Hi fi prototyping Johanna Persson MAM15 25 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 Lowfidelity Midfidelity Highfidelity 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ända datorverktyg för prototyping
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 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
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/quicktour/?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