Hi‐fi prototyping

Johanna PerssonMAM1525 nov 2014

Dagens upplägg

• Hi‐fi prototyping• Olika verktyg för hi‐fi prototyping• Introduktion till ett urval av dessa

– Power point– Balsamiq Mockups– Just in Mind

• Praktisk övning

Prototyper gör det lättare att…

• utforska designidéer.• välja bland designidéer. 

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

Fördelar med 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!)

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.

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

• Prototypen kontrolleras av en person.• Användbarhetstestning blir svårare.

Hi‐fi prototyping

• Efter ett tag blir man begränsad av lo‐fi prototyping

• Dags att användadatorverktyg förprototyping

Fördelar med 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.

Exempel på verktyg för mid/hi‐fi prototyping

• Powerpoint• Balsamiq Mockups• Just in Mind • Photoshop (ej interaktivitet)• Axure RP Pro (html prototypes for web/apps)• The Pencil Project (free)• Microsoft Expression Blend + SketchFlow (finns via 

studentportalen)• POP – prototyping on paper• Flash, HTML, Java, …• Och många, många fler…

Powerpoint

We use PowerPoint as kind of a better version of paper prototypes. This technique has several advantages: prototypes can be made to feel somewhat interactive, because the content is electronic it can be modified more easily than paper, and the usability participant uses the mouse and is on the computer, so it feels natural to them. 

Jensen Harris, UI designer, Microsoft

Powerpoint

• Avaktivera “Frammating vid musklick” I menyn Övergångar– Advance slide on mouse click

• Skapa hyperlänkar från objekttill andra slides– Obs om ni lägger text på objekt

att texten måste länka också, dvs det som ligger överstmåste länka till rätt ställe

PowerPoint Prototyping Toolkit

“a toolkit of commonly used GUI components to copy and paste when designing the prototype screens”http://www.istartedsomething.com/20071018/powerpoint-prototype-toolkit-01/

Powerpoint

• Mycket lätt att komma igång med och använda• Lättillgängligt• Begränsat i vad man kan göra• Blir omständligt vid större prototyper

Balsamiq mockup

• 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

• Ej gratis men för kursuppgiften kan vi tillhandahålla konto

Balsamiq mockup

http://balsamiq.com/

Balsamiq mockup

Just in Mind• Är precis som Balsamiq ett verktyg framtaget för just interaktiva prototyper

• Stöd för touch‐baserad interaktion…– Swipe, pinch, etc

• … samt för responsiv design• Mer funktioner men därmed också en något längre uppstartsträcka

• OBS! 30 dagars gratis provversion med full funktionalitet (därefter gratisversionen med begränsad funktionalitet)

• http://www.justinmind.com/

Just in Mind

http://www.justinmind.com/support/quick-tour/?utm_source=prototyper&utm_medium=welcomewindow&utm_campaign=tour

Lite tips inför ert val!

• Välj ett verktyg som ni alla hanterar• Se till att ni inte fastnar i den tekniska lösningen (lätt hänt om man väljer en mer programmeringsnära lösning för sin prototyp)

• Var kreativa – det finns många sätt att simulera interaktiviteten i en prototyp– Det behöver bara fungera för de scenarion ni har

Prova på!• Skapa ett virtuellt skyltfönster (det ni gjorde på lo‐fi‐övningen)– Vertikal prototyp – ett fåtal funktioner och hög detaljgrad

• Välj mellan de vi gått igenom eller testa flera:– Power point– Balsamiq

• 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).

– Justinmind• En av er får ladda ner test‐versionen ‐http://www.justinmind.com/download?top

• OBS 30 dagar gratis test‐version med full funktionalitet