Innehåll. Vad är prototyping? Low-, mid-, high-fidelity prototyping Konceptuella modeller Verktyg för mid/high-fi prototyping

Transkript

1 Prototyping

2 Innehåll Vad är prototyping? Low-, mid-, high-fidelity prototyping Konceptuella modeller Verktyg för mid/high-fi prototyping Individuell inlämningsuppgift

3 Vad är en prototyp? En prototyp är en manifestation av ett designförslag som man kan interagera med på något sätt.

4 Vad är en prototyp? I interaktionsdesign kan det vara t.ex. En serie skisser av vyer från ett datorgränssnitt En powerpoint-presentation En video som simulerar hur systemet skall användas En bit kartong Mjukvara med begränsad funktionalitet

5 Jeff Hawking, PalmPilot Gick runt i flera månader med en prototyp och låtsades att det var en riktig handdator

6 Vad tjänade Jeff på detta? Han fick förstahandserfarenhet av produkten. Han testade om han faktiskt skulle komma att använda en PalmPilot. Han kunde använda sin fantasi för att komma på nya funktioner.

7 Varför prototyping? Man kan utforska och testa designidéer Utvärdering och återkoppling är centrala delar av den iterativa interaktionsdesign-processen Intressenter och användare kan se, hålla och interagera med en prototyp lättare än att läsa en beskrivning eller titta på en skiss Uppmuntrar till reflektion och diskussion Hjälper medlemmar i ett designteam att kommunicera Hjälper till att prioritera mellan olika designidéer

8 IDEO

9 Konceptvideo vw&feature=player_embedded Simulerad funktionalitet för att presentera och testa koncept (och för marknadsföring)

10 Olika typer av prototyper Lowfidelity Midfidelity Highfidelity Fidelity = naturtrogenhet

11 Olika typer av prototyper Low-fidelity Mid-fidelity High-fidelity

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

13 Olika typer av prototyper Low-fidelity Mid-fidelity High-fidelity

14 Exempel lo-fi prototyping Pv0&feature=PlayList&p=D56A6FBB8F &playnext=1&playnext_from=pl&index=97

15 Varför 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!)

16 Skisser

17 Skisser

18 Tips för skisser Det behöver absolut inte se snyggt ut Strunta i detaljer Det räcker att storlekarna är ungefärliga Jobba inte för mycket med text

19 Storyboarding

20 The Empire Strikes Back (1980)

21 Storyboarding Ett sätt att göra ett scenario mer detaljerat Man behöver inte kunna rita och det behöver inte se snyggt ut!

22

23 Scenarier

24 Scenarier Greta, 85 år, vill beställa färdtjänst så att hon kan åka och hälsa på sin dotter. Hon sätter sig i TVsoffan och tar fjärrkontrollen. Hon hittar den stora, gröna PÅ-knappen utan problem. Välkommen Greta. Vad vill du göra för något? frågar TV:n. Beställa färdtjänst till fredag svarar Greta. Vilken tid? fortsätter TV:n. En minut senare är Greta klar med beställningen. TV:n har skickat beställningen och har även lagt till en påminnelselapp på start-skärmen.

25 Scenarier Storytelling är ett naturligt för oss människor att förklara saker och ting Effektivt sätt för kommunikation med användare mellan olika yrkesgrupper i utvecklingsteamet Ofta börjar man med scenarier som man utvecklar till storyboards.

26 Card-based prototypes Ofta bygger man en lo-fiprototyp som användare kan interagera med. Boken kallar dessa cardbased prototypes Kan givetvis vara i vilken storlek som helst, inte bara kortstorlek! Filmklipp

27 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. Prototypen kontrolleras av en person. Svårare att identifiera fel. Otydliga specifikationer: Svårare att skapa kod till. Användbarhetstestning blir svårare.

28 Hi-fi/Mid-fi prototyping Hi-fi = High-fidelity = Hög naturtrogenhet Mid-fi = Medelhög naturtrogenhet

29

30 Varför 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

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

32 Varför mid-fi prototyping? Överbrygger en del av nackdelarna med både lo-fi och hi-fi prototyping Lättare att simulera realistiskt flöde och navigation Ändå inte så likt slutprodukten att man bara får feedback på grafisk layout

33 Exempel på verktyg för mid/hifi-prototyping Photoshop Powerpoint Balsamiq Mockups Google sketchup (3D models) Axure RP Pro (html prototypes for web/apps) The Pencil Project (free) Microsoft Expression Blend + SketchFlow

34 Prototyp = kompromiss Att bygga en prototyp handlar om att kompromissa på olika sätt. Horisontella och vertikala prototyper Horisontell prototyp många funktioner och låg detaljgrad. Vertikal prototyp ett fåtal funktioner och hög detaljgrad. Utnyttja detta positivt dvs. designa prototypen efter de egenskaper som du vill utforska så att man inte får fokus på fel saker

35 Konceptuell design: att gå från krav till första design Kap 11.3

36 Vad menas egentligen med konceptuell design? Att gå från produktkrav till konceptuell modell Konceptuell modell enligt boken a high-level description of how a system is organized and operates an abstraction outlining what people can do with a product and what concepts are needed to understand how to interact with it (kursboken, sid 40)

37 En känd konceptuell modell

38 Att tänka på vid konceptuell design Använd ett öppet sinne men glöm aldrig användarna och deras kontext. Diskutera idéer med användarna så mycket som möjligt. Använd lo-fi-prototyping. Iterera, iterera, iterera!

39 Att tänka på vid konceptuell design Vilka metaforer skulle hjälpa användaren att förstå produkten/systemet? Vilka interaktionstyper stödjer bäst användningen? Virtuella obduktioner Skulle olika användargränssnittstyper medföra nya insikter och idéer? IKEA-katalogen (Vi återkommer till konceptuella modeller senare i kursen.)

40 I projektet Systemets övergripande struktur (konceptuella modell). Användarens mentala/konceptuella modell. Metaforer. Gruppering av tjänster i naturliga grupper. Språkbruk/terminologi. På denna nivå arbetar ni med flera olika alternativa lösningar (parallell design).

41 Läsanvisningar Kap 11 Kap : Läs noggrant Kap : Läs översiktligt Metaforer: kommande föreläsning Interaktionstyper: kommande föreläsning

42 Utvärdering och testning av prototyper I ett användbarhetslab eller i den verkliga miljön Anpassa nivån (användarantal, organisation kring testet, etc) efter vilken fas utvecklingsprojektet är i och efter vad man vill ha ut av testet Testa initiala designkoncept Verifiera förståelse av en viss funktionalitet Sluttest av ett färdigt system i den miljö där produkten/systemet skall användas Exempel på metoder Think aloud Wizard of Oz

43 Två exempel på mjukvara för mid/high-fi prototyping Balsamiq Mockups Expression Blend + Sketchflow

44 Balsamiq mockup Mid-fi prototyping: 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

45 Balsamiq mockup

46 Balsamiq för er 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).

47 Microsoft Expression Blend + Sketch Flow

48 Microsoft Expression Blend + Sketch Flow Grafisk utvecklingsmiljö Interaktiva applikationer för dator (WPF) och web (Silverlight) Färdiga byggstenar Hela produktioner: design, layout, animationer, skins, etc. Sketchflow för att enkelt och snabbt bygga prototyper Brygga mellan utvecklare och designer

49 Sketchflow quickly prototype, gather feedback, and iterate on your design not designed to produce production work/finished projects Film! dxerxho3c

50 Nytt projekt - WPF eller Silverlight? Med ett WPF-projekt (Windows Presentation Foundation) kan man skapa en Windows-applikation, dvs. en.exe-fil som är körbar på en PC Med ett Silverlight-projekt skapas en webb-applikation (.xap) samt tillhörande HTML-sida för att köra igång applikationen i en webb-läsare.

51 Nytt projekt - grundvy Projects allt innehåll i projektet, bilder, ljudfiler etc., Assets alla kontroller, beteenden, effekter, etc., Triggers för att starta/stoppa animationer, byta egenskaper, etc., States hantera states Artboard rityta, här ser man sidans innehåll Tools panel verktyg för att skapa och modifiera objekt Objects and timeline lista över alla objekt på den aktuella sidan samt ev. effekter samt tidslinje för animationer Properties, resources, data ändra egenskaper hos objekt, hantera data från ex databas, Sketchflow map översikt över alla sidor i applikationen

52 Funktioner som vi skall titta på Interaktivitet Animering Navigering Grafisk design Färg/form Text Bild Ljud

53 Interaktivitet, animeringar och Många sätt att göra på! navigering States använd för att byta egenskaper på ett objekt vid en viss händelse Storyboards struktur för att bygga animationer m.h.a. keyframes Behaviours inbyggda komponenter för ex. animering och navigering: Sketchflow animation lite mindre detaljerat än Storyboards. Fungerar bra på prototyp-stadiet för att demonstrera ett beteende Navigering NavigateToScreenAction ange vilken sida man skall navigera till när man trycker på en viss knapp t.ex.

54 Grafisk design Färdiga kontroller, figurer, etc. som kan ritas och stylas direkt i gränssnittet Det går att importera bilder från ex Photoshop och Illustrator och modifiera dessa vidare i programmet Bilder (jpg, tiff, etc) kan också inkluderas som de är och användas i applikationen Detta gäller även ljudfiler Project -> Add Existing Item Dra in filen på arbetsytan och jobba vidare med den där.

55 Tips Du kan ta bort det skiss-artade utseendet på din prototyp genom att ändra stilen på den och på så sätt få en prototyp som mer liknar ett riktigt program (men fortfarande jobba i Sketchflow). Properties -> Miscellaneous -> Style -> Reset Sketchad knapp Avsketchad knapp

56 Namnge dina objekt Tips

57 Varning När du jobbar i Sketchflow map -fönstret så gäller interaktion med musen, ej tangentbord/kortkommandon! För att deleta en koppling, eller en vy måste du högerklicka och välja Delete, att trycka på Delete-knappen deletar det objekt som är valt i huvudvyn.

58 När din applikation skall testas F5 eller File -> Package Sketchflow Project WPF applikation/körbart program Silverlight html-sida (starta i Internet Explorer)

59 Hjälpresurser Ex på Sketchflow-översikt/tutorial

60 Mjukvaran Microsoft Expression Studio 4 finns att hämta gratis för studenter på Studentportalen: Studentportalen->Mina tjänster->hämta programvaror: Från Microsoft: MSDNAA 60 dagars prova-på

61 FOKUSERA PÅ ATT FÅ ERA SPECIFIKA SCENARION ATT FUNGERA!