Prototyping

Innehåll

• Vad är prototyping? • Low-, mid-, high-fidelity prototyping • Konceptuella modeller • Verktyg för mid/high-fi prototyping

• Individuell inlämningsuppgift

Vad är en prototyp?

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

Vad är en prototyp?

• I interaktionsdesign kan det vara t.ex. – En serie skisser av vyer från ett datorgränssnitt – En powerpoint-presentation – En video som simulerar hur systemet skall

användas – En bit kartong – Mjukvara med begränsad funktionalitet – …

Jeff Hawking, PalmPilot

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

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.

Varför prototyping?

• Man kan utforska och testa designidéer • Utvärdering och återkoppling är centrala delar av den iterativa

interaktionsdesign-processen • Intressenter och användare kan se, hålla och interagera med

en prototyp lättare än att läsa en beskrivning eller titta på en skiss

• Uppmuntrar till reflektion och diskussion • Hjälper medlemmar i ett designteam att kommunicera • Hjälper till att prioritera mellan olika designidéer

IDEO

Konceptvideo

• http://www.youtube.com/watch?v=iAZCr6canvw&feature=player_embedded

• Simulerad funktionalitet för att presentera och testa koncept (och för marknadsföring)

Olika typer av prototyper

Low-fidelity

Mid-fidelity

High-fidelity

Fidelity = naturtrogenhet

Olika typer av prototyper

Low-fidelity Mid-fidelity High-fidelity

Olika typer av prototyper

Low-fidelity Mid-fidelity High-fidelity

Microsoft Expression Blend + Sketchflow Balsamiq Mockups

Olika typer av prototyper

Low-fidelity Mid-fidelity High-fidelity

Exempel lo-fi prototyping

http://www.youtube.com/watch?v=GrV2SZuRPv0&feature=PlayList&p=D56A6FBB8F605994&playnext=1&playnext_from=PL&index=97

Varför lo-fi prototyping?

• Billigt och snabbt • Kreativt • Demokratiskt (alla kan vara med!) • Kan underlätta kommunikationen mellan

designer och användare… • … samt mellan designer och utvecklare • 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!

Scenarier

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

• Kan bli omständligt att hålla reda på alla lappar och papper.

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

• Prototypen kontrolleras av en person. • Svårare att identifiera fel. • Otydliga specifikationer: Svårare att skapa kod

till. • Användbarhetstestning blir svårare.

Hi-fi/Mid-fi prototyping

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

Varför hi-fi prototyping?

• Väldigt lik den färdiga produkten både utseendemässigt och i funktionalitet – Diskutera grafisk design – Navigation och flöde fungerar som det är tänkt

• Kan testas som om det är den riktiga produkten

• Upptäcker brister i interaktion och användbarhet

Nackdelar med hi-fi prototyping

• Tar lång tid att bygga. – Man ändrar ogärna något man jobbat med

länge. • Användare och utvärderare tenderar att

fokusera på ytliga aspekter. • Kan skapa överdrivna förväntningar. • En enda bugg kan förstöra ett helt

användbarhetstest.

Varför mid-fi prototyping?

• Överbrygger en del av nackdelarna med både lo-fi och hi-fi prototyping – Lättare att simulera realistiskt flöde och

navigation – Ändå inte så likt slutprodukten att man bara får

feedback på grafisk layout

Exempel på verktyg för

mid/hifi-prototyping

• Photoshop • Powerpoint • Balsamiq Mockups • Google sketchup (3D models) • Axure RP Pro (html prototypes for web/apps) • The Pencil Project (free) • Microsoft Expression Blend + SketchFlow

Prototyp = kompromiss

Att bygga en prototyp handlar om att kompromissa på olika sätt. • Horisontella och vertikala prototyper

– Horisontell prototyp – många funktioner och låg detaljgrad.

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

• Utnyttja detta positivt – dvs. designa prototypen efter de egenskaper som du vill utforska så att man inte får fokus på fel saker

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 – enligt boken

– ”a high-level description of how a system is organized and operates”

– ”an abstraction outlining what people can do with a product and what concepts are needed to understand how to interact with it”

• (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!

Att tänka på vid konceptuell design

• Vilka metaforer skulle hjälpa användaren att förstå produkten/systemet?

• Vilka interaktionstyper stödjer bäst användningen?

• Skulle olika användargränssnittstyper medföra nya insikter och idéer?

• (Vi återkommer till konceptuella modeller senare i kursen.)

Virtuella obduktioner

IKEA-katalogen

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

Utvärdering och testning av prototyper

• I ett användbarhetslab eller i den verkliga miljön • Anpassa nivån (användarantal, organisation kring

testet, etc) efter vilken fas utvecklingsprojektet är i och efter vad man vill ha ut av testet – Testa initiala designkoncept – Verifiera förståelse av en viss funktionalitet – Sluttest av ett “färdigt” system i den miljö där

produkten/systemet skall användas • Exempel på metoder

– Think aloud – Wizard of Oz

Två exempel på mjukvara för mid/high-fi prototyping

Balsamiq Mockups Expression Blend + Sketchflow

Balsamiq mockup

• Mid-fi prototyping: datorbaserat verktyg med ”sketchade” komponenter

• Massor av färdiga komponenter att använda – 75 st inbyggda i programmet – Community-utvecklade

• Interaktiva prototyper • Möjlighet för flera att arbeta med samma

prototyp • Möjlighet att dela prototypen med intressenter

för feedback

Balsamiq mockup

http://www.balsamiq.com/products/mockups

Balsamiq för er

• Ladda ner 7 dagar test-version av Balsamiq www.balsamiq.com/download

• Meddela om ni vill använda Balsamiq i ert projekt så skapar vi konto åt er grupp med fri användning av myBalsamiq (web applikation).

Microsoft Expression Blend + Sketch Flow

Interaktiva applikationer för dator (WPF) och web (Silverlight) Grafisk

utvecklingsmiljö

Hela produktioner: design, layout, animationer, skins, etc.

Brygga mellan utvecklare och designer

Färdiga byggstenar

Sketchflow för att enkelt och snabbt bygga prototyper

Microsoft Expression Blend + Sketch Flow

Sketchflow • ”quickly prototype, gather feedback, and iterate on your

design” • “not designed to produce production work/finished

projects”

Film! http://www.youtube.com/watch?v=vI

dxeRxhO3c

Nytt projekt - WPF eller Silverlight? • Med ett WPF-projekt (Windows Presentation Foundation) kan man skapa en

Windows-applikation, dvs. en .exe-fil som är körbar på en PC

• Med ett Silverlight-projekt skapas en webb-applikation (.xap) samt tillhörande HTML-sida för att köra igång applikationen i en webb-läsare.

Nytt projekt - grundvy

Artboard – rityta, här ser man sidans innehåll

Sketchflow map – översikt över alla sidor i applikationen

Properties, resources, data – ändra egenskaper hos objekt, hantera data från ex databas, … Objects and

timeline – lista över alla objekt på den aktuella sidan samt ev. effekter samt tidslinje för animationer

Projects – allt innehåll i projektet, bilder, ljudfiler etc., Assets – alla kontroller, beteenden, effekter, etc., Triggers – för att starta/stoppa animationer, byta egenskaper, etc., States – hantera states

Tools panel – verktyg för att skapa och modifiera objekt

Funktioner som vi skall titta på

• Interaktivitet • Animering • Navigering • Grafisk design

– Färg/form – Text – Bild – Ljud – …

Interaktivitet, animeringar och navigering

Många sätt att göra på! • States – använd för att byta egenskaper på ett objekt vid en viss

händelse • Storyboards – struktur för att bygga animationer m.h.a. keyframes • Behaviours – inbyggda komponenter för ex. animering och navigering:

– Sketchflow animation – lite mindre detaljerat än Storyboards. Fungerar bra på prototyp-stadiet för att demonstrera ett beteende

– Navigering • NavigateToScreenAction – ange vilken sida man skall navigera till när

man trycker på en viss knapp t.ex.

Grafisk design

• Färdiga kontroller, figurer, etc. som kan ritas och stylas direkt i gränssnittet

• Det går att importera bilder från ex Photoshop och Illustrator och modifiera dessa vidare i programmet

• Bilder (jpg, tiff, etc) kan också inkluderas som de är och användas i applikationen – Detta gäller även ljudfiler

Project -> Add Existing Item… Dra in filen på arbetsytan och jobba vidare med den där.

Tips…

• Du kan ta bort det skiss-artade utseendet på din prototyp genom att ändra stilen på den och på så sätt få en prototyp som mer liknar ett riktigt program (men fortfarande jobba i Sketchflow).

• Properties -> Miscellaneous -> Style -> Reset

”Sketchad” knapp ”Avsketchad” knapp

Tips…

• Namnge dina objekt…

Varning… • När du jobbar i ”Sketchflow map”-fönstret så gäller

interaktion med musen, ej tangentbord/kortkommandon! För att deleta en koppling, eller en vy måste du högerklicka och välja Delete, att trycka på Delete-knappen deletar det objekt som är valt i huvudvyn.

När din applikation skall testas…

• F5… eller

• File -> Package Sketchflow

Project – WPF – applikation/körbart

program – Silverlight – html-sida (starta i

Internet Explorer)

Hjälpresurser

Ex på Sketchflow-översikt/tutorial http://expression.microsoft.com/sv-se/ee307361

Mjukvaran • Microsoft Expression Studio 4 finns att

hämta gratis för studenter på Studentportalen: Studentportalen->Mina tjänster->Hämta programvaror: Från Microsoft: MSDNAA

• 60 dagars prova-på

http://www.microsoft.com/expression/products/StudioUltimate_Overview.aspx

FOKUSERA PÅ ATT FÅ ERA SPECIFIKA SCENARION ATT

FUNGERA!