Karin Fahlquist Berättelser Scenarios Presentationer Skisser Formella modeller Mjukvaruprototyper Kartong modeller etc. Viktigt att se från andra personers perspektiv Abatrakta idéer kommer till liv Utforska designkoncept & idéer med andra Översikt zooma in filtrera detaljer Snapshopts Mot olika personer: kollegor, kunder, användare 1
Fungerar som inspiration Samlar visuella stimuli som fångarna känslan av designen Foto, bilder, färger, textiler, former, tidningsrubriker, citat, Alternativ: adjektiv Från filmens värld Nyckelhändelser i seriefigur stuk (tecknat) Beskriver interaktiva händelsen Koppla till scenario Kunder 2
Beskriver hur användaren flyttar sig genom siten/applikationen Varje sida= en box eller rubrik, visa hur flödet går mellan sidorna Behövs oftast skrivas om under arbetets gång Mind mapping Rita på whiteboard Skriva på postit lappar Demonstrera ett koncept i ett tidigt stadium Testa detaljer i ett senare stadium Som en specifikation för den färdiga produkten 3
En prototyp är alltid INTERAKTIV Prototyp används för att involvera användare & kunder för att utvärdera design ideér Lo-fi Prototyp: pappers prototyp Hi-fi Prototyp: ser ut och känns som den slutliga produkten Full: full funktionalitet Horisontell: går över hela systemet men har bara topp nivå funktioner Vertikal: har alla funktioner uppifrån och ner, men bara på några få ställen (Vanligt med en kombination av Horisontell och Vertikal.) 4
Maximum Feedback for Minimum Effort Citat ur Paper prototyping av Carolyn Snyder Diskussionsunderlag (gränssnittsdesigners, säljare, grafiker, programmerare och beställare!) Tidig återkoppling från användare Möjliggör iterativ utveckling Kräver inte teknisk kompetens Uppmuntrar kreativitet (Parallell design, bestäm en tidigt ) Designa användarupplevelse Ta fram visuell design - Kreativitet med papper och penna - Flera liknande sidor, kopiera - Ändra? Koda beteendet - Realistiska data i prototypen, greeking - Sent i processen - Pappersprototyp = 0% kod! 5
Helper Kit Lo-Fi prototyp 10 Video exempel 6
http://www.userfocus.co.uk/articles/morae-pp.html En tjock bunt med papper Sax En lite grövre penna Transparent tape Overheadplast Klister som på post-it-lappar mm 7
Interface widgets ung. grafiska användargränssnittskomponenter Läs uppkopierade sidor runt hur man kan skapa Widgets och hur man kan simulera interaktion baserat på dessa. Ditt nya förslag är mycket bättre. Jag ändrar på direkten Men jag gjorde på detta sättet för att Jag har lagt två veckor på detta arbete. Är det säker på att detta är vad du vill ha - Isbergseffekten! 8
Användarmål Era frågor 1) Bestäm målsättning med testet 2) Definiera målgrupp (-er) 3) Skapa relevanta uppgifter 4) Skapa pappersprototyp 5) Intern genomgång (minst en) 6) Genomför tester (minst två) 7) Prioritera åtgärder 8) Kommunicera Bra uppgifter är relevanta för testanvändaren är relevanta för produkten och affärerna har ett realistiskt fokus har ett ändligt/förutsägbart antal lösningar vet man när man klarat uppmuntrar till handling, inte till åsikter 9
Förbered observatörer Samla in frågor från gruppen (se nästa bild) Uppskatta tidsåtgång Besluta om ifall du ska styra testet - Vad är du minst säker på? - Vilka finns de största riskerna ur ett affärsperspektiv? - Vilka viktiga designbeslut behöver fattas? - Var har vi tidigare erhållit negativ feedback? - Finns det kritiska uppgifter för användaren? - Har vi nya delar? 1. Instruerar observatörer och andra (innan) 2. Samlar in fakta om testanvändaren (-arna) 3. Förklarar hur testet går till 4. Beskriver uppgifter 5. Uppmuntrar till att tänka högt 6. Går igenom testet med observatörer (efter) 10
Under testet: - Uppmuntra att tänka högt - Uppmuntra till att ställa frågor, men svara inte! - Använd samma vokabulär - Ställ öppna frågor - Lyssna efter hmm, aha, ops - Låt användaren bestämma när den är klar Grafisk designer Dator Design reviews X Lo-Fi PNG PDF Test 7D $79 Popular Mockup Windows, Mac, and Linux via Adobe Air. Middle HTML, PNG, document and PDF. Free Open source Firefox addons, standalone using XULRunner Hi-Fi HTML, PNG, Specification. Test 30 D $589 Popular Prototyping PC, Mac Hi-Fi HTML5, CSS3 styles, and JavaScript $30 Mac Hi-Fi HTML5, CSS3 styles, and JavaScript Preview version Mac OS X v10.6 or 10.7 and Windows 7 or Windows Vista. 11
Balsamiq (http://balsamiq.com/) 12
13