IxDinteraksjonsdesign

2

ProsessenIxD 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.

Research-modeller

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

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.

UkjentLiktM

islikt

Brukt

Ubrukt

Ønsket

Kjent

Research- modeller

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.

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.

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.

Personas

• Et navn og ansikt på ulike brukergrupper

• Beskrivende oppførsel som tittel

• Godt definerte karakterer

• Se løsningen gjennom deres øyne

• Bruk et begrenset antall (1-7 personas)

• Ikke en erstatning for brukertesting

Michael

1.0 Highly Seasoned

Product T

raining

New Product In

fo

Product S

election

Domain Knowledge

Technology Knowledge

Experience

Altern

ate Selections

Competitive In

tel

Case Stu

dies

Quote Builder

Accessory Finder

Reports

5

4

3

2

1

Knowledge Activities and InterestPro

duct Training

New Product In

fo

Product S

election

Domain Knowledge

Technology Knowledge

Experience

Altern

ate Selections

Competitive In

tel

Case Stu

dies

Quote Builder

Accessory Finder

Reports

5

4

3

2

1

Knowledge Activities and Interest

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.

Michael

1.0 Highly Seasoned

Product T

raining

New Product In

fo

Product S

election

Domain Knowledge

Tech

nology Knowledge

Experience

Altern

ate Selectio

ns

Competit

ive Inte

l

Case Stu

dies

Quote Build

er

Accesso

ry Finder

Reports

5

4

3

2

1

Knowledge Activities and Interest

Product T

raining

New Product In

fo

Product S

election

Domain Knowledge

Tech

nology Knowledge

Experience

Altern

ate Selectio

ns

Competit

ive Inte

l

Case Stu

dies

Quote Build

er

Accesso

ry Finder

Reports

5

4

3

2

1

Knowledge Activities and Interest

Personas

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 den innledende research og brukerintervjuer.

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.

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 effektivt på et tidlig tidspunkt i prosessen - Scenarioer er altså en form for verbal prototyping.

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.

Sketches & models

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

Sketches & models

• Visuell eksperimentering

• Et mangfold av konsepter og idéer

• Papir eller Whiteboard er fortsatt best

• Bruk store flater

• Gjentas gjennom hele prosessen

a

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.

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øffe streken. Det vi er ute etter her er de helt overordnede temaene rundt opplevelse og navigasjon. Detaljene kommer senere.

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.

Slik ser Twitter ut i dag.

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.

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.

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.

Task analysis

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

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.

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)

Task flow

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

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?

USERACTION

SYSTEMACTION

DECISION

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.

Use cases

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

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.

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)

Moodboards

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

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

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.

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 effektiv måte.

Wireframing

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

Wireframing

• Det viktigste designdokumentet:

• Struktur: Oppbygning og navigasjon

• Informasjonshierarki: Hva vektes høyest?

• Funksjonalitet: UI elementer og flyt

• Innhold: Plassering av tekst, bilder etc

Illustrasjonsbilde

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.

Wireframing

• Flere målgrupper:

• Kunden: Innfris forretningsmålene?

• Uviklere: Hvordan virker produktet?

• Visuelle designere: Hva skal designes?

• Tekstforfattere: Hva og hvor mye tekst?

• IxD designere: Dokumentasjon

Illustrasjonsbilde

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.

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.

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.

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.

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.

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 bieffekt 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å)

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.

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

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

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.

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)

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.

IxDinteraksjonsdesign

2

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