70
BERGHS: Konceptutveckling Interaktionsdesign Jesper Gisslén, Ottoboni

Konceptutveckling, interaktionsdesign i digitala projekt

Embed Size (px)

DESCRIPTION

Gästföreläsning på Berghs School of Communications kring rollen som konceptutvecklare / interaktionsdesigner i webbprojekt.

Citation preview

Page 1: Konceptutveckling, interaktionsdesign i digitala projekt

BERGHS:Konceptutveckling Interaktionsdesign

Jesper Gisslén, Ottoboni

Page 2: Konceptutveckling, interaktionsdesign i digitala projekt

Inledning

Page 3: Konceptutveckling, interaktionsdesign i digitala projekt

Min bakgrund- Beteendevetenskap

- AD

- Informationsarkitekt

Nu:

Konceptutvecklare/Interaktionsdesigner

Page 4: Konceptutveckling, interaktionsdesign i digitala projekt

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

InteraktionsdesignerWebbstrategKonceptutvecklareInformationsdesignerInformationsarkitektUser Interface

designerUser Experience

Page 6: Konceptutveckling, interaktionsdesign i digitala projekt

Det handlar om att förstå människor- Deras behov

- Deras kunskapsnivå

- Deras intressen

- Deras krav

Page 7: Konceptutveckling, interaktionsdesign i digitala projekt

Det handlar om att förstå människor

Konceptutvecklare/Interaktionsdesigner

Beställare ”Kund”

Kundens kunder

Page 8: Konceptutveckling, interaktionsdesign i digitala projekt

Det handlar om att förstå människor

Konceptutvecklare/Interaktionsdesigner

Beställare ”Kund”

Kundens kunder

Page 9: Konceptutveckling, interaktionsdesign i digitala projekt

Ö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

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

Konceptfas

Stort projekt

Litet projekt

Page 12: Konceptutveckling, interaktionsdesign i digitala projekt

Behovsidentifiering

Page 13: Konceptutveckling, interaktionsdesign i digitala projekt

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

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

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

Innehållsanalys

Page 17: Konceptutveckling, interaktionsdesign i digitala projekt

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

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

Innehållsanalys: Funktioner Leda besökaren rätt direkt mha personnummer

Page 20: Konceptutveckling, interaktionsdesign i digitala projekt

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

Innehållsanalys: Språk

Page 22: Konceptutveckling, interaktionsdesign i digitala projekt

Innehållsanalys: Språk

Page 23: Konceptutveckling, interaktionsdesign i digitala projekt

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

Innehållsanalys: Internt sökAuto suggestion

Page 25: Konceptutveckling, interaktionsdesign i digitala projekt

Struktur/Navigation

Page 26: Konceptutveckling, interaktionsdesign i digitala projekt

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

Struktur: Sitemap

Page 28: Konceptutveckling, interaktionsdesign i digitala projekt

Navigation- Baserat på strukturen

- Enkel att förstå

- Stödja olika målgrupper

Page 29: Konceptutveckling, interaktionsdesign i digitala projekt

Navigation: Ska svara på:- Var är jag?

- Var har jag varit?

- Vart kan jag gå?

Page 30: Konceptutveckling, interaktionsdesign i digitala projekt

Navigation: Exempel (Skanska)

Page 31: Konceptutveckling, interaktionsdesign i digitala projekt

Navigation: exempelToppmeny

Brödsmule-meny

Facetterad navigering-Kategori-Storlek-Färg-Designer-Pris

Page 32: Konceptutveckling, interaktionsdesign i digitala projekt

Navigation: Startsida

Produkt/Tjänst

Behov

Page 33: Konceptutveckling, interaktionsdesign i digitala projekt

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

Wireframe

Page 35: Konceptutveckling, interaktionsdesign i digitala projekt

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

Wireframe: Länsförsäkringar

Page 37: Konceptutveckling, interaktionsdesign i digitala projekt

Wireframe: Länsförsäkringar

Page 38: Konceptutveckling, interaktionsdesign i digitala projekt

Wireframe: Länsförsäkringar

Page 39: Konceptutveckling, interaktionsdesign i digitala projekt

Wireframe: Prototyp

Page 40: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer

Page 41: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer: Vad är en startsida?

Traditionell syn

Page 42: Konceptutveckling, interaktionsdesign i digitala projekt

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

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

Externa Faktorer: SEONyckelordsanalys (Keyword tool)

Page 45: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer: SEOTrender

Page 46: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer: SEOTrender

Page 47: Konceptutveckling, interaktionsdesign i digitala projekt

Sponsrade länkar

Organiskt sökresultat

Externa Faktorer: SEO

Page 48: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer: SEO

Page 49: Konceptutveckling, interaktionsdesign i digitala projekt

Titel

Rubrik (H1)

Nyckelordet (”mopedförsäkring”)

”Externa Faktorer”: SEO

Page 50: Konceptutveckling, interaktionsdesign i digitala projekt

Länk till webbplatsen

”Externa Faktorer”: SEO

Page 51: Konceptutveckling, interaktionsdesign i digitala projekt

Länk till webbplatsen

”Externa Faktorer”: SEO

Relevanta taggar

Page 52: Konceptutveckling, interaktionsdesign i digitala projekt

Företag Konsumenter

Externa Faktorer: Sociala medier (nya sätt att kommunicera)

Page 53: Konceptutveckling, interaktionsdesign i digitala projekt

Företag Konsumenter

Externa Faktorer: Sociala medier (nya sätt att kommunicera)

Page 54: Konceptutveckling, interaktionsdesign i digitala projekt

Företag Konsumenter

Dialog

Externa Faktorer: Sociala medier (nya sätt att kommunicera)

Page 55: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer: Sociala medier (posta till Facebook)

Page 56: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer: Sociala medier (posta till Facebook)

Page 57: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer: Sociala medier (posta till Facebook)

Page 58: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer: Sociala medier (Facebook fan page)

Page 59: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer: Sociala medier (Facebook connect)

Page 60: Konceptutveckling, interaktionsdesign i digitala projekt

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

Externa Faktorer: Sociala medier (Twitter)

Saltå Kvarn: Nyheter

Page 62: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer: Sociala medier (Twitter)

Ving: Sista Minuten

Page 63: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer: Sociala medier (Twitter)

Hertz: tävling

Page 64: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer: Sociala medier (Twitter)

Chicago Bulls: Inför match

Page 65: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer: Sociala medier (Twitter)

Wachovia (bank): Kundservice

Page 66: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer: Bevaka

Page 67: Konceptutveckling, interaktionsdesign i digitala projekt

Externa Faktorer: Bevaka

Page 68: Konceptutveckling, interaktionsdesign i digitala projekt
Page 69: Konceptutveckling, interaktionsdesign i digitala projekt

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

Tack!