Prototyping

Vad är en prototyp?

• En prototyp är en manifestation av ett designförslag som man kan interagera med på något sätt.

Jeff Hawking, PalmPilot

• Gick runt i flera månader med en prototyp och låtsades att det var en riktig handdator

• ”Pretotyping”

Vad tjänade Jeff på detta?

• Han fick förstahandserfarenhet av produkten.

• Han testade om han faktiskt skulle komma att använda en PalmPilot.

• Han kunde använda sin fantasi för att komma på nya funktioner.

Prototyper gör det lättare att…

• utforska designidéer.

• välja bland designidéer.

IDEO

The Astonishing Tribe

Filmklipp

Två typer av prototyping

• Low-fidelity prototyping

• High-fidelity prototyping

Lo-fi prototyping

Lo-fi = Low-fidelity = Låg naturtrogenhet

Varför lo-fi prototyping?

• Billigt och snabbt

• Kreativt

• Demokratiskt (alla kan vara med!)

• Kan vara lättare att få användarfeedback

(prototypen ser inte färdig ut!)

Skisser

Skisser

Tips för skisser

• Det behöver absolut inte se snyggt ut

• Strunta i detaljer

• Det räcker att storlekarna är ungefärliga

• Jobba inte för mycket med text

Storyboarding

The Empire Strikes Back (1980)

Storyboarding

• Ett sätt att göra ett scenario mer detaljerat

• Man behöver inte kunna rita och det behöver inte se snyggt ut!

Övning

Rita en storyboard för hur man tankar en bil!

Scenarier

Greta, 85 år, vill beställa färdtjänst så att hon kan åka och hälsa på sin dotter. Hon sätter sig i TV-soffan och tar fjärrkontrollen. Hon hittar den stora, gröna PÅ-knappen utan problem. “Välkommen Greta. Vad vill du göra för något?” frågar TV:n. “Beställa färdtjänst till fredag” svarar Greta. “Vilken tid?” fortsätter TV:n.

En minut senare är Greta klar med beställningen. TV:n har skickat beställningen och har även lagt till en påminnelselapp på start-skärmen.

Scenarier

• “Storytelling” är ett naturligt för oss människor att förklara saker och ting

• Effektivt sätt för kommunikation – med användare

– mellan olika yrkesgrupper i utvecklingsteamet

• Ofta börjar man med scenarier som man utvecklar till storyboards.

”Card-based prototypes”

• Ofta bygger man en lo-fi-prototyp som användare kan interagera med.

• Boken kallar dessa card-based prototypes

• Kan givetvis vara i vilken storlek som helst, inte bara kortstorlek!

Filmklipp

Nackdelar med lo-fi prototyping

• Svårare att identifiera fel.

• Prototypen kontrolleras av en person.

• Otydliga specifikationer: Svårare att skapa kod till.

• Användbarhetstestning blir svårare.

• Begränsningar med avseende på navigation och flöde.

Hi-fi prototyping

Hi-fi = High-fidelity = Hög naturtrogenhet

Verktyg för hi-fi-prototyping

• Powerpoint

• Balsamiq Mockups

• Axure RP Pro

• The Pencil Project

• Microsoft Visio

• Microsoft Expression Blend + SketchFlow

MS Expression Blend + SketchFlow

• Johanna kommer berätta mer.

Nackdelar hi-fi-prototyper

• Tar lång tid att bygga.

• Användare och utvärderare tenderar att fokusera på ytliga aspekter.

• Utvecklare ändrar ogärna något de jobbat med länge.

• Kan skapa överdrivna förväntningar.

• En enda bugg kan förstöra ett helt användbarhetstest.

Horisontella och vertikala prototyper

• Horisontell prototyp: många funktioner och låg detaljgrad.

• Vertikal prototyp: ett fåtal funktioner och hög detaljgrad.

Konceptuell design: att gå från krav till första design

Kap 11.3

Vad menas egentligen med ”konceptuell design”?

• Att gå från produktkrav till konceptuell modell

• Konceptuell modell = ”a high-level description of how a system is organized and operates” (kursboken, sid 40)

En känd konceptuell modell

Att tänka på vid konceptuell design

• Använd ett öppet sinne men glöm aldrig användarna och deras kontext.

• Diskutera idéer med användarna så mycket som möjligt.

• Använd lo-fi-prototyping.

• Iterera, iterera, iterera!

I projektet

• Systemets övergripande struktur (konceptuella modell).

• Användarens mentala/konceptuella modell.

• Metaforer.

• Gruppering av tjänster i naturliga grupper.

• Språkbruk/terminologi.

På denna nivå arbetar ni med flera olika alternativa lösningar (parallell design).

Läsanvisningar Kap 11

• Kap 11.1-11.2: Läs noggrant

• Kap 11.3-11.7: Läs översiktligt

– Metaforer: kommande föreläsning

– Interaktionstyper: kommande föreläsning