![Page 1: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/1.jpg)
BERGHS:Konceptutveckling Interaktionsdesign
Jesper Gisslén, Ottoboni
![Page 2: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/2.jpg)
Inledning
![Page 3: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/3.jpg)
Min bakgrund- Beteendevetenskap
- AD
- Informationsarkitekt
Nu:
Konceptutvecklare/Interaktionsdesigner
![Page 4: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/4.jpg)
Innehåll idag- På både övergripande och detaljnivå
- Hur jag jobbar
- Fokus på det digitala
- Avbryt! Ställ frågor!
![Page 5: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/5.jpg)
InteraktionsdesignerWebbstrategKonceptutvecklareInformationsdesignerInformationsarkitektUser Interface
designerUser Experience
![Page 6: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/6.jpg)
Det handlar om att förstå människor- Deras behov
- Deras kunskapsnivå
- Deras intressen
- Deras krav
![Page 7: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/7.jpg)
Det handlar om att förstå människor
Konceptutvecklare/Interaktionsdesigner
Beställare ”Kund”
Kundens kunder
![Page 8: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/8.jpg)
Det handlar om att förstå människor
Konceptutvecklare/Interaktionsdesigner
Beställare ”Kund”
Kundens kunder
![Page 9: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/9.jpg)
Översikt: konceptfasBehovsidentifiering1. - Mål, syften, målgrupper,
Innehållsanalys2. - Nytt, gammalt, ny funktionalitet
3. Struktur/Navigation - Antal nivåer, hållbarhet
4. Wireframes - Användarvänlighet, målgruppsanpassning
5. Externa faktorer - SEO, sociala medier, nischsajter, länkbygge
Formgivning
Teknisk utveckling
![Page 10: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/10.jpg)
Konceptutvecklaren i projektmodellen
Konceptfas Avstämning form Avstämning teknik
Överlämning
Design Teknik
Uppföljning (användartester, mätningar)
![Page 11: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/11.jpg)
Konceptfas
Stort projekt
Litet projekt
![Page 12: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/12.jpg)
Behovsidentifiering
![Page 13: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/13.jpg)
BehovsidentifieringVad?
-Lära känna beställaren (och dennes
kunder)
-Hur?
- Workshops / Arbetsmöten (”gula lappar”)
- Gå igenom existerande material
- Användarundersökning, träffa
målgrupper
- Personas (fiktiva användare)
- Intervjuer (lyssna i kundcenter)
![Page 14: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/14.jpg)
Behovsidentifiering: Mål- Kommunikationsmål / Affärsmål / Mätbara mål:
Öka försäljning, varumärkeskännedom, öka service
(t.ex. kundservice), bygga relationer, öka
besökarantalet etc.
![Page 15: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/15.jpg)
Behovsidentifiering: Användartest- Ofta finns det redan material
- Pappersskisser i sin enklaste form
- Kvalitativ/Kvantitativ
- Referensgrupper genom processen
- Klickbar prototyp
- ”Card sorting”
![Page 16: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/16.jpg)
Innehållsanalys
![Page 17: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/17.jpg)
Innehållsanalys- Gå igenom existerande information/ rensa,
skriva om
- Skapa nytt innehåll
- Förstår besökare språket?
- Envägskommunikation eller dialog?
![Page 18: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/18.jpg)
Innehållsanalys: Funktioner- Behövs ny funktionalitet för att stödja
innehållet?Förebygga skador(interaktiv guide)
![Page 19: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/19.jpg)
Innehållsanalys: Funktioner Leda besökaren rätt direkt mha personnummer
![Page 20: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/20.jpg)
Innehållsanalys: Språk- Förstår besökare vad som sägs?
- Våga lyfta fram och välja bort
- Rakt på sak
- Tonalitet
- ”Responsivitet” (dialog)
![Page 21: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/21.jpg)
Innehållsanalys: Språk
![Page 22: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/22.jpg)
Innehållsanalys: Språk
![Page 23: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/23.jpg)
Innehållsanalys: Internt sök-Får ofta mycket klagomål ”Jag använder
Google för att söka på vår egen webbplats”
- Hjälp när man fyller i
- Bättre resultatsida
- Analysera interna sökningar
![Page 24: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/24.jpg)
Innehållsanalys: Internt sökAuto suggestion
![Page 25: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/25.jpg)
Struktur/Navigation
![Page 26: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/26.jpg)
Struktur- Baserat på innehållet
- Måste vara flexibelt för framtiden
- Skapa hierarkier (våga vikta)
-Max antal nivåer?
- Ett slags ”skelett” för webbplatsen
![Page 27: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/27.jpg)
Struktur: Sitemap
![Page 28: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/28.jpg)
Navigation- Baserat på strukturen
- Enkel att förstå
- Stödja olika målgrupper
![Page 29: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/29.jpg)
Navigation: Ska svara på:- Var är jag?
- Var har jag varit?
- Vart kan jag gå?
![Page 30: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/30.jpg)
Navigation: Exempel (Skanska)
![Page 31: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/31.jpg)
Navigation: exempelToppmeny
Brödsmule-meny
Facetterad navigering-Kategori-Storlek-Färg-Designer-Pris
![Page 32: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/32.jpg)
Navigation: Startsida
Produkt/Tjänst
Behov
![Page 33: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/33.jpg)
Besökare som inte bestämt sig för att köpa hushållsnära tjänster
Besökare som har bestämt sig för att köpa hushållsnära tjänster
Navigation: Exempelflöden
![Page 34: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/34.jpg)
Wireframe
![Page 35: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/35.jpg)
Wireframe:- Testa sajten utan färg, form
- Inte glömma innehåll/funktioner
- Få godkänt innan nästa fas (designfasen)
![Page 36: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/36.jpg)
Wireframe: Länsförsäkringar
![Page 37: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/37.jpg)
Wireframe: Länsförsäkringar
![Page 38: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/38.jpg)
Wireframe: Länsförsäkringar
![Page 39: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/39.jpg)
Wireframe: Prototyp
![Page 40: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/40.jpg)
Externa Faktorer
![Page 41: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/41.jpg)
Externa Faktorer: Vad är en startsida?
Traditionell syn
![Page 42: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/42.jpg)
Idag
Externa Faktorer: Vad är en startsida?
Sociala nätverk (t.ex. Facebook)
Social sharing (t.ex. Youtube)
Bloggar, mikrobloggar (t.ex.
Twitter)Nischsajter (t.ex Prisjakt)
![Page 43: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/43.jpg)
Externa Faktorer: SEO- Nyckelord (keyword tool)
- Optimera sidan (titel, rubrik, text, meta-
taggar)
- Intern, extern länkning
- Benämningar (vinterjacka.jpg isf image.jpg)
- Skapa sitemap
- Skapa intressant innehåll!
![Page 44: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/44.jpg)
Externa Faktorer: SEONyckelordsanalys (Keyword tool)
![Page 45: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/45.jpg)
Externa Faktorer: SEOTrender
![Page 46: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/46.jpg)
Externa Faktorer: SEOTrender
![Page 47: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/47.jpg)
Sponsrade länkar
Organiskt sökresultat
Externa Faktorer: SEO
![Page 48: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/48.jpg)
Externa Faktorer: SEO
![Page 49: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/49.jpg)
Titel
Rubrik (H1)
Nyckelordet (”mopedförsäkring”)
”Externa Faktorer”: SEO
![Page 50: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/50.jpg)
Länk till webbplatsen
”Externa Faktorer”: SEO
![Page 51: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/51.jpg)
Länk till webbplatsen
”Externa Faktorer”: SEO
Relevanta taggar
![Page 52: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/52.jpg)
Företag Konsumenter
Externa Faktorer: Sociala medier (nya sätt att kommunicera)
![Page 53: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/53.jpg)
Företag Konsumenter
Externa Faktorer: Sociala medier (nya sätt att kommunicera)
![Page 54: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/54.jpg)
Företag Konsumenter
Dialog
Externa Faktorer: Sociala medier (nya sätt att kommunicera)
![Page 55: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/55.jpg)
Externa Faktorer: Sociala medier (posta till Facebook)
![Page 56: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/56.jpg)
Externa Faktorer: Sociala medier (posta till Facebook)
![Page 57: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/57.jpg)
Externa Faktorer: Sociala medier (posta till Facebook)
![Page 58: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/58.jpg)
Externa Faktorer: Sociala medier (Facebook fan page)
![Page 59: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/59.jpg)
Externa Faktorer: Sociala medier (Facebook connect)
![Page 60: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/60.jpg)
Externa Faktorer: Sociala medier (Twitter)- 140 tecken:
-PR
- Kundservice
- Driva trafik
- Krisinformation etc.
Ni bestämmer! Men det måste vara
personligt
![Page 61: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/61.jpg)
Externa Faktorer: Sociala medier (Twitter)
Saltå Kvarn: Nyheter
![Page 62: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/62.jpg)
Externa Faktorer: Sociala medier (Twitter)
Ving: Sista Minuten
![Page 63: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/63.jpg)
Externa Faktorer: Sociala medier (Twitter)
Hertz: tävling
![Page 64: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/64.jpg)
Externa Faktorer: Sociala medier (Twitter)
Chicago Bulls: Inför match
![Page 65: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/65.jpg)
Externa Faktorer: Sociala medier (Twitter)
Wachovia (bank): Kundservice
![Page 66: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/66.jpg)
Externa Faktorer: Bevaka
![Page 67: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/67.jpg)
Externa Faktorer: Bevaka
![Page 68: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/68.jpg)
![Page 69: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/69.jpg)
Slutsatser- Konceptfasen är oerhört viktig
- Våga lägga tid på att göra rätt från början
- Se till att konceptet följs genom hela
processen
- Vem gör vi lösningen för? Beställaren?
Beställarens kunder?
- Inte bara ”hemsida” längre
![Page 70: Konceptutveckling, interaktionsdesign i digitala projekt](https://reader035.vdocuments.site/reader035/viewer/2022062404/55420341550346972b8b45be/html5/thumbnails/70.jpg)
Tack!