Hi fi prototyping. Johanna Persson MAM nov 2014

Transkript

1 Hi fi prototyping Johanna Persson MAM15 25 nov 2014

2 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

3 Prototyper gör det lättare att utforska designidéer. välja bland designidéer.

4 Olika typer av prototyper Lowfidelity Midfidelity Highfidelity Fidelity = naturtrogenhet

5 Olika typer av prototyper Low fidelity Mid fidelity High fidelity

6 Olika typer av prototyper Low fidelity Mid fidelity High fidelity Microsoft Expression Blend + Sketchflow Balsamiq Mockups

7 Olika typer av prototyper Low fidelity Mid fidelity High fidelity

8 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!)

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

10 Hi fi prototyping Efter ett tag blir man begränsad av lo fi prototyping Dags att använda datorverktyg för prototyping

11 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

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

13 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

14 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

15 Powerpoint Avaktivera Frammating vid musklick I menyn Övergångar Advance slide on mouse click Skapa hyperlänkar från objekt till andra slides Obs om ni lägger text på objekt att texten måste länka också, dvs det som ligger överst måste länka till rätt ställe

16 PowerPoint Prototyping Toolkit a toolkit of commonly used GUI components to copy and paste when designing the prototype screens

17 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

18 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

19 Balsamiq mockup

20 Balsamiq mockup

21 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)

22 Just in Mind

23 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

24 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 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 OBS 30 dagar gratis test version med full funktionalitet