Slides from my lecture on Interaction Design at BI Bergen, 14.04.09 Part 2

1. IxD2
interaksjonsdesign

2. Prosessen
IxD fra A til Å
Gode løsninger er et resultat av et grundig forarbeid. Målgruppen kartlegges under en
innledende research-runde, og mange retninger testes og prøves ut før den endelige
løsningen utformes. Av de virkemidlene vi nå skal se på er det ikke alle som blir anvendt på
ett og samme prosjekt. Spesielt på mindre prosjekter vil noen av disse være overflødige.

3. Research-modeller
Først ut er research-modeller. Brukergruppens behov og motivasjon kartlegges under den
innledende runde med research.

4. Research-
modeller
• Gjennomgang av research
• Visualisering av data
• Jakten på mønstre
Research-modeller er - visuelle fremstillinger av researchmaterialet. - Målet med disse
modellene er å lettere få øye på trender og mønstre i tallene.

5. Research-
modeller
Lik
Mi
t
slik
t
t
ruk
B
Ønsket
t
n
Kje t
k
bru
t
n U
kje
U
Dette er et eksempel på visualisering av research-materiale, fra et intranett. I en slik modell er
det langt enklere å få oversikt over for eksempel hvor stor del av dagens løsning som oppfyller
kravene, og hvor mye som må redesignes.

6. Personas
Neste virkemiddel er Personas, en metode som gjør det enklere for hele teamet å danne seg
et godt bilde av målgruppene under utviklingen.

7. Personas
• Arketypiske personligheter
• Bedre å spisse løsningen mot enn “brukeren”
• Grupper av brukere med samme karakteristikk
• Hva folk gjør (handlinger)
• Hvorfor gjør det (mål og motivasjon)
• Personas er ikke demografi (markedssegmenter)
Personas er arketypiske personligheter - en mer konkret fremstilling av målgruppen enn den
generiske “brukeren”. - Personas er grupper av brukere med samme karakteristikk - hva de
gjør - og hvorfor de gjør det, deres motivasjon og mål. - Det er viktig å understreke at
Personas ikke er bygget på demografiske faktorer som alder og bosted. Det er motivasjon
ikke markedssegmenter vi er ute etter.

8. Personas
Michael
• Et navn og ansikt på ulike brukergrupper
• Beskrivende oppførsel som tittel 5
• Godt definerte karakterer 4
3
• Se løsningen gjennom deres øyne
2
• Bruk et begrenset antall (1-7 personas) 1
• Ikke en erstatning for brukertesting ge ge ce g fo
led led rien n s
in In ctio ion
ain uct
ow now pe le lect ve
Tr d
Kn Ex e
t i
K ro ct S e Se etit
uc
n
ai logy od ew P du t p
m na om
Pr N
o
Do hn o
Pr lter C
ec A
T
Knowledge
Activities an
Personas gis liv gjennom karaktertrekk som navn og ansikt - oppførsel, tittel, interesser,
frustrasjoner. - og annet som gir karakterene motivasjon og målsetninger rundt bruken av
løsningen som skal utvikles - Personas gir oss mulighet til å se løsningen gjennom brukernes
øyne. - Et begrenset antall personas, 1-7 stk, er tilstrekkelig. Det viktige er at de er tydelige.
- Men husk at dette ikke er faktiske brukere, og derfor heller ikke et substitutt for
brukertesting.

9. Michael
Do
Te ma
in
ch
no Kn
o
lo
gy wle
Kn dg
ow e
le
Ex dg
pe e
rie
nc
e
Knowledge
Pr
od
u
1
2
3
4
5
Ne ct T
w ra
in
P
Pr rod ing
od uc
Al uct t In
f
te
rn Sel o
ec
at
e tio
n
Co Sel
e
m
pe ctio
ns
tit
iv
Ca e In
Ac se S tel
t
ce
ss udi
e
or
yF s
in
Qu
Activities and Interest
de
ot
e
Bu r
ild
e
Re r
po
r ts
den innledende research og brukerintervjuer.
Personas
1.0 Highly Seasoned
Do
Te ma
in
ch
no Kn
o
lo
gy wle
Kn dg
ow e
le
Ex dg
pe e
rie
nc
e
Knowledge
Pr
od
u
1
2
3
4
5
Ne ct T
w ra
in
P
Pr rod ing
od uc
Al uct t In
f
te
rn Sel o
ec
at
e tio
n
Co Sel
e
m
pe ctio
ns
tit
iv
Ca e In
Ac se S tel
t
ce
ss udi
or es
y
Qu Fin
Activities and Interest
de
ot
e
Bu r
ild
e
Re r
po
r ts
Personas er altså karakterer vi konstruerer som felles referanser under utviklingen av
prosjektet. De kan gjerne basereres på utsagn og observasjoner som er kommet frem under

10. Scenarioer
Neste virkemiddel er scenarioer. Dette er her våre Personas kommer til liv, gjennom
iscenesettelser: Scenarioer er korte beskrivelser av en brukers interaksjon med løsningen.

11. Scenarioer
• Tekstlige beskrivelser av brukerscenarioer
• Rask og effektiv testing av konsepter
• Verbale prototyper
Disse brukerscenarioene er beskrevet i prosaform, som en liten fortelling om hvordan
brukeren går frem, og hvordan interaksjonen foregår. - Hensikten med scenarioer er å kunne
teste ulike kosepter raskt og eektivt på et tidlig tidspunkt i prosessen - Scenarioer er altså
en form for verbal prototyping.

12. Scenarioer
• Protagonistene er personas:
• Hvordan bruker de løsningen?
• Hvordan opplever de den?
• Hva finner de problematisk?
I disse små historiene er heltene våre Personas. - Vi kan utforske hvordan de ulike
karaktertypene tar i bruk løsningen - hvordan de opplever den - og hva de ikke forstår. Det
er først og fremst i slike scenarioer at våre Personas kommer til live i realistiske situasjoner.

13. Sketches models
Skisser og modeller er neste virkemiddel. Dette er ofte det første forsøket på å gi selve
løsningen et visuelt uttrykk.

14. Sketches
models
• Visuell eksperimentering
• Et mangfold av konsepter og idéer
a
• Papir eller Whiteboard er fortsatt best
• Bruk store flater
• Gjentas gjennom hele prosessen
Skisser og modeller er en form for visuell eksperimentering på et punkt i prosessen hvor alt
er mulig. - Målet med skisser og modeller er å komme opp med så mange ulike retninger
som mulig, for å få prøvd ut et mangforld av konsepter og idéer. - Til skisser er papir eller
whiteboards fortsatt best. - Skiss på store flater. Sett gjerne av en hel vegg til dette. - Skisser
er ofte forbundet med starten på utviklingsprosessen, men det bør gjøres plass til å teste,
skisse og korrigere løsningen gjennom hele prosessen.

15. Skisser har mange former, og ingen fasit. Den enkelte designer har sin stil, og hvert prosjekt
sine behov. Dette er et eksempel på et sett skisser fra en reiseportal. Legg merke til den røe
streken. Det vi er ute etter her er de helt overordnede temaene rundt opplevelse og
navigasjon. Detaljene kommer senere.

16. Noen her som bruker Twitter? Dette er den første skissen. Mye er endret siden den gang. Et
mangfold av skisser er den beste måten å slipe diamanten på, og sørge for at det beste ved
konseptet kommer frem.

17. Slik ser Twitter ut i dag.

18. Storyboards
Det neste virkemiddelet vi skal se på er storyboards. De fleste kjenner storyboards fra
filmverden, hvor det er et viktig ledd i planleggingen av filmen. I storyboardet planlegges
hver scene i detalj, slik at teamet kan studere det sammen. Storyboards har en lignende rolle
i interaksjonsdesign.

19. Storyboards
• Visuelle bruksscenarioer
• Tilstrekkelig upresise
• Forklarer hovedfunksjoner
• Tydeliggjør kompliserte funksjoner
Storybards er det visuelle motstykket til scenarioer. Vi bruker de til å illustrere
brukssituasjoner, men denne gangen visuelt. - Storyboards er (som skisser) upresise nok til å
kunne • forklare hovedfunksjoner uten å bli for detaljfokusert - Storyboards er spesielt godt
egnet til å forklare kompliserte funksjoner på en enkel måte.

20. Dette er et storyboard fra utviklingen av en løsning for å publisere bøker på nett.
Storyboardet viser i enkle bilder hvordan Personaen møter nettstedet, hvordan hun bruker
det, og hvilke rasjonelle og emosjonelle prosesser hun går igjennom.

21. Task analysis
Neste virkemiddel i interaksjonsdesign-prosessen er analyse av brukernes oppgaver og
aktiviteter.

22. Task analysis
• Liste over aktiviteter løsningen skal støtte
• Komplett oversikt over alle funksjoner
• Lister kan sorteres etter ulike kriterier:
• Funksjoner
• Tilgangsnivå (basic, registrert, admin)
• Personaer
Task analyser er oversikt over aktiviteter løsingen skal støtte - en komplett oversikt over alle
funskjoner. - Disse listene kan sorteres etter ulike kriterier: - Etter beskrivelse av funksjoner
- etter hvem som har tilgang til funksjonen, feks admin eller registrert bruker. - Listen kan
også sorteres etter hvilke personaer som etterspør funksjonen.

23. Task analysis
• Oppgaver kan samles fra ulike steder:
• Forretningsmål: “kontakte kundeservice”
• Design research: “mange etterspurte søk”
• Andre produkter: “konkurrentene har det”
• Brainstorming og Scenarioer: “Hva hvis...”
Disse oppgavene kan samles inn fra ulike steder - som for eksempel forretningsmål
(brukeren må kunne kontakte kundeservice) - Design research (under intertervjuer var det
mange som etterspurte søk) - sammenligning med andre produkter (matche konkurrentenes
funksjoner) - Oppgaver oppstår også i brainstormingssessioner og scenarioer (Feks gjennom
“hva hvis” scenarioer med en persona)

24. Task flow
HVordan disse oppgavene henger sammen er temaet for det neste virkemiddelet,
Oppgaveflyt.

25. Task flow
• Flytdiagram over en oppgaves prosesser
• Oversikt over logiske forbindelser
• Når kan en bruker utføre en oppgave?
• Hvilke nye valg gis brukeren?
• Hvordan kommer brukeren tilbake?
Oppgaveflyt er oppgaver satt i system, gjennom flytdiagram over prosessene som utgjør en
oppgave. - De utgjør en oversikt over de logiske forbindelser i prosessen, som - når kan en
bruker utføre en oppgave? - Hvilke valg gis brukeren? - og hvordan kommer brukeren
tilbake?

26. USER
ACTION
DECISION
SYSTEM
ACTION
Til venstre ser dere standard-komponentene i en oppgaveflyt: De handlingene som brukeren
utfører er symbolisert med en sirkel, valg som tas er vist som en firkant på høykant, og de
handlingene som systemet utfører er vist med en firkant. Til høyre ser dere en enkel
oppgaveflyt: Hvordan en telefonsvarer håndterer en innkommende samtale. Hva som skjer
avhenger av om telefonen er på, om brukeren tar den, og hvor mange ganger den ringer.

27. Use cases
Det neste virkemiddelet er brukereksempler. Som et filmmanus beskriver brukereksempler
hva som skjer, og hvem som gjør hva.

28. Use cases
• I klartekst hva en funksjon gjør, og hvorfor
• Ulike skuespillere:
• Personas
• Brukeren
• Systemet
Brukereksempler beskriver i klartekst hva en funsjon gjør, og hvorfor den er der. - Dette
manuset inneholder ulike skuespillere: - Detajerte Personas - eller eventuelt bare ‘Brukeren’
- og Systemet. Alle har sine replikker i et brukereksempel.

29. Use cases
• Tittel: Beskriver handlingen
• Skuespillere: Hvem utfører handlingen?
• Hensikt: Hva ønskes oppnådd? Hvorfor?
• Innledende status: Hva starter handlingen?
• Sluttstatus: Hva avslutter handlingen?
• Primærsteg: Prosessen steg for steg
• Alternativer: Liknende brukereksempler
• Nøsting: Andre brukereksempler brukt
Dette er vanligvis standardelementer, eller skuespillere, i et brukereksempel er (punkter)

30. Moodboards
Neste virkemiddel i prosessen er Moodboards. Målet med moodboards er å eksperimentere
med ulike stemninger.

31. Moodboards
• Visuell prototyping i collage-form
• Formidle det emosjonelle uttrykket
• Uttrykke stemning, stil og tone
• Bruk av bilder, ord, farger, typogafi, etc
• Analogt: Klipp og lim
• Digitalt: Bevegelse, rytme, lydlandskap
Moodboards er enkelt og greit visuell prototyping i collage-form. - De formidler det ønskede
emosjonelle uttrykket som løsningen skal ha - og uttrykker disse (stemning, stil og tone) -
gjennom bruk av elementer som bilder, ord, farger, typografi, osv. - Moodboards kan foregå
analogt med klipp og lim fra feks blader og magasiner, - eller digitalt, hvor en kan ha mer
fokus på bevegelser og lyder

32. Dette er et eksempel fra en interaktiv infographics. Her er collage-elementene sortert etter
layout og design, med bilder fra bla en Røyksopp-video, en kolonne med eksempler på
fargebruk, og en for bevegelser og overganger.

33. Dette eksempelet er fra en portrettside om en legendarisk pilot. Målet med moodboards er til
syvende og sist å kunne formulere stemninger uten å foregripe det visuelle designet, og å
kommunisere stil og tone med resten av teamet på en eektiv måte.

34. Wireframing
Neste ut er Wireframing. Dette er punktet i prosessen hvor løsningens layout og struktur skal
formuleres.

35. Wireframing
• Det viktigste designdokumentet:
• Struktur: Oppbygning og navigasjon
Illustrasjon
sbilde
• Informasjonshierarki: Hva vektes høyest?
• Funksjonalitet: UI elementer og flyt
• Innhold: Plassering av tekst, bilder etc
Wireframing er sammen med prototyping det viktigste designdokumentet. - Det tar for seg
hvordan nettstedet er opppbygd, og hvordan brukeren navigerer - Det inneholder den
strukturelle prioriteringen av elementer i et informasjonshierarki: Hvilke funksjoner gis
høyest prioritet og synlighet? - Det viser hvordan flyten i funksjonene foregår - og det viser
hvordan innhold, som tekst, bilder etc er plassert på de ulike sidetypene.

36. Wireframing
• Flere målgrupper:
• Kunden: Innfris forretningsmålene?
Illustrasjon
sbilde
• Uviklere: Hvordan virker produktet?
• Visuelle designere: Hva skal designes?
• Tekstforfattere: Hva og hvor mye tekst?
• IxD designere: Dokumentasjon
Wireframing er et tricky dokument å sette sammen, for det retter seg mot mange
målgrupper. Potensielt alle som er involvert i prosjektet: - Kunden vil se om
forretningsmålene innfris - Utviklere vil se hvordan produktet skal virke - Visuelle designere
vil se hva som skal designes - Tekstforfattere hvor mye tekst som skal skrives - og
interaksjonsdesigneren selv trenger wireframes som dokumentasjon på designvalg som er
tatt.

37. Wireframe Ferdig design
Dette er et eksempel fra en reiselivsportal. Wireframen til venstre viser i detalj forsidens
layout, og hvor de ulike funksjonene er plassert. De blå boblene er henvisninger til
kommentarer og beskrivende tekster. Som dere ser er det fortsatt rom for forbedringer på
veien mot det ferdige designet.

38. Prototyping
Nest sist av virkemidlene er prototyping. De fleste kjenner hvordan blant annet bilbransjen
bygger prototyper for å teste ut nye retninger, og for å se hvordan publikum reagerer.
Interaksjonsdesign gjør det samme. Målet med prototyper er å simulere det ferdige
produktet.

39. Prototyping
• Utprøving av ulike designretninger
• Tydelig kommunikasjon av designmål
• Eksperimentering med funksjon og uttrykk
• Et av de viktigste designverktøyene
Prototyping er et viktig virkemiddel for å prøve ut ulike designretninger før produksjonen
starter. - De viktigste grunnene til å prototype er å kommunisere målsetningene med
interaksjonsdesignen på en tydelig og nesten realistisk måte. - Prototyping gir også en siste
anledning til å prøve ut ulike alternativer for funksjon og uttrykk, - og er derfor et av de
viktigste verktøyene i prosessen.

40. Prototyping
• Papir-prototyper:
• Raskest å utvikle
• Hvert ark er et stadie i prosessen
• Unøyaktighet gir bedre brukerrespons
• Størst fleksibilitet
Det er tre ulike metoder for prototyping. Papirprototyper er mest brukt da - det er det
raskeste å utvikle. - En interaksjonsprosess blir brutt ned i sine enkelte bestanddeler, og
hvert ark representerer et stadie i prosessen. - Som med skisser gir papirprototyper en bedre
brukerrespons fordi den er tilstrekkelig unøyaktig. - Med papirprototyper er det enkelt å
justere og tilpasse underveis, noe som gjør metoden svært fleksibel.

41. Prototyping
• Digitale prototyper:
• Bilder, 3D animasjon, visualiseringer
• Playback eller interaktive
• Gir ofte et uheldig fokus på det visuelle
En kan også bygge prototyper digitalt, - med bruk av bilder, 3D animasjon osv, - Disse kan
bygges opp som en film, eller som en interaktiv presentasjon. - Digitale prototyper har ofte
en uheldig bieekt ved å være for... designet, og kan dreie diskusjonen fra interaksjonen til
det visuelle (Det er jo en prosess som strengt tatt ikke er påbegynt ennå)

42. Prototyping
• Fysiske prototyper:
• En enkelt funksjon - hele produktet
• Miniatyr - fullskala
• Leire - faktiske materialer
Den tredje typen protoyper er de fysiske prototypene. - Disse kan ta for seg alt fra en enkelt
funksjon til hele produktet, - fra miniatyr til fullskala - og bygges i alt fra leire til de faktiske
materialene produktet skal utformes i. Alt avhenger av hva en ønsker å prøve ut. Det er ikke
uvanlig å benytte en spekter av protoyper for å utforske ulike aspekter ved designet.

43. Dette er prototyper fra et iPhone program som heter Things. Både papirprototyper og fysiske
prototyper er brukt for å teste ulike faktorer.

44. Her er det det ferdige programmet. Interaksjonsdesignet bak Things er svært godt
gjennomtenkt, og de har høstet masse priser for programmet.

45. Testing
Det siste virkemiddelet vi skal se på er brukertesting. Å se hvordan faktiske brukere forholder
seg til interaksjonsdesignet er svært viktig for å forsikre seg om at prosjektet er på riktig
spor.

46. Testing
• Brukertester:
• Besøk brukeren (naturlige omgivelser)
• Snakk med dem (lytt til tilbakemeldinger)
• Skriv det ned (Hukommelsen svikter)
Brukertesting er en egen profesjon, men prinsippet er enkelt - (punkter)

47. Testing
• Ikke test kun for bekreftelse
• Test for å finne svakheter
• Justér wireframes og prototyper
• Test igjen og igjen
• Feil tidlig, og feil ofte
Det som er viktig å huske på er at en ikke tester for å få bekreftet hva som virker - men for å
finne ut hva som ikke gjør det, slik at vi kan forbedre designet. - Når svakheter oppdages går
en tilbake til wireframes og prototyper og juster disse - og tester igjen. Og igjen. ‘Det gjelder
å feile tidlig, og feile ofte’, så ikke seriøse mangler henger med videre.

48. IxD2 interaksjonsdesign
Etter pausen skal vi se nærmere på grensesnitt, og på noen fremtidsscenarier for
interaksjonsdesign