A Human-Centered Design Process (ISO 9241-210, 2010) Prototypningsverktyg 1. Plan the humancentred process 2. Understand the context of use Mattias Arvola Meets the requirements 5. Evaluate against requirements 3. Specify user and business requirements @mattiasarvola Institutionen för datavetenskap 4. Produce design solutions 2 Uncertainty / Patterns / Insights Clarity / Focus ideation revisions detailing ideation revisions detailing 3 4
Dagens föreläsning Typer av prototyper Upplösning Datorprototyper Verktyg för att bygga datorprototyper Evolutionära prototyper eller kasta bort-prototyper 5 6 LoFi- och HiFi-prototyper Low Fidelity: Ofta gjorda i papper. Används för att testa en design med användare och förutse stora problem till en extremt låg kostnad. High Fidelity: Interaktiva och datorbaserade. Används för att övertyga ledning och andra intressenter om att man tänkt igenom designen ordentligt och att man är på god väg. Kostnaden för dem kan dock vara ganska hög och de kan orsaka orealistiska förväntningar bland kunder. Mer om det i kommande föreläsning. Vad prototyper prototypar Funktion Integrerad Konstruktion Look & Feel 7 8
Pappersprototyper Görs tidigt i utvecklingsprocessen för att utforska idéer Interaktiva! Billiga, snabba och portabla Lätta att ändra, kan t.o.m. skapas under en session med användare Användare har lätt att föreslå förändringar Vad vill du testa? Ju finare de är desto mer fokuserar användare på utseende 9 10 11 12
13 14 Fysisk mock-up Fysisk mock-up 1:1 eller skalmodeller ungefär som arkitekter använder Kartong, lego, styrofoam Får systemdesigners att tänka 3D och fysiska begränsningar 15 16
Detaljgrad igen Low Fidelity High Fidelity Mixed Fidelity Detaljerad i vilket avseende? Detaljerad interaktion: Representeras transitioner, animeringar och systemrespons på ett realistiskt sätt eller är det statiska skisser? Detaljerad i data: Faktiska, eller realistiska, data ger förståelse för om designen passar domänen. 17 18 Hur mycket ska vi implementera? Bredd i funktionalitet: En bred funktionalitet (t.ex. uttag, insättning, kontoutdrag, betalningar)ger förståelse för hur systemet hänger ihop. Djup i funktionalitet: En detaljerad sekvens av en feature (t.ex. uttag) ger förståelse en hel uppgift. Visuellt detaljerad: Från handritade skisser till pixelkorrekta mock-uper. Bygg det om ni kan bygga det. Fejka det om ni inte kan bygga det. Om ingen kan bygga det så är det fel på er design. 19 20
Wizard-of-Oz Ger användarna intrycket av att de jobbar med ett verkligt system utan att något sådant faktiskt existerar. Styrs helt eller delvis av en wizard som tittar på vad användaren gör och ger systemresponsen. Gör att man kan testa en avancerad AI eller parsning för att se om och hur den borde konstrueras. Kan också användas för att bygga upp en korpus som sedan driver ett naturligt språkgränssnitt. 21 22 Videoprototyper Linjära illustrationer av hur användare interagerar med det nya systemet Kan bygga på pappersprototyper, fysiska mock-upper, existerande mjukvara och bilder av faktiska miljöer Utgå från ett scenario, och gör en storyboard för filmen Flytta omkring delar av storyboardsen för att sätta ihop sekvenser av klipp Filma klippen i rätt ordning utifrån storyboard för att slippa redigera och klippa så mycket Filmtajm Sketch-a-move http://vimeo.com/5125096 23 24
Screen casts: Linjär datorprototyp En film av hur skärmen ser ut när användaren kör ett scenario. Helt linjär och görs vanligen i program som Director och Flash. Kan också göras i Powerpoint eller Keynote med efterbehandling i MovieMaker, imovie eller AfterEffects. Används oftast när man inte kan visa en feature med papper, mock-up, wizard of oz eller analog videoprototyp. Börja med en storyboard! Kan göras med stop: stannar vid varje steg och väntar på input. Men endast en sak går att göra för att ta sig vidare till nästa steg. Körbara datorprototyper Påminner om slutprodukten och görs senare i utvecklingscykeln Testar känsla och detaljerad interaktion Jobbigt att ändra och en felaktig detalj kan stoppa upp testningen 25 26 Iterativa och evolutionära prototyper Byggs inte primärt för att testa en design utan för att både testa och bygga vidare på. Görs i traditionella utvecklingsmiljöer, men gärna med GUI-byggare Sådana miljöer har ofta färdiga bibliotek. De gör det snabbt enkelt att använda standardkomponenter. De får en lätt att låsa sig vid standardkomponenter och inte tänka på nya interaktionstekniker Verktyg för att bygga datorprototyper HTML, CSS, javascript Presentationsverktyg: PowerPoint, Keynote, Acrobat, FireWorks, OmniGraffle, Visio Multimediaverktyg: Director, Flash, Expression Specialiserade prototypningsverktyg: Flash Catalyst, Expression Blend, Axure, Balsamiq Grafiska programmeringsmiljöer: Interface Builder, Visual Studio Express, LiveCode, Eclipse http://c2.com/cgi/wiki?guiprototypingtools 27 28
29 30 http://www.cooper.com/journal/2013/07/designers-toolkit-proto-testing-for-prototypes LiveCode http://livecode.com/how-it-works/ 31 32
www.liu.se