Om användare och designprocessen

Transkript

1 Om användare och designprocessen Målorienterad design. Olika typer av användare. Mentala modeller, metaforer med mera. Att designa The interaction framework.

2 Förra veckan. Gör så här Men inte så

3 Förra veckan lab!

4 Om användare och designprocessen Målorienterad design. Olika typer av användare. Mentala modeller, metaforer med mera. Att designa The interaction framework.

5 Om användare: Vad de vill, vilka de är, hur de tänker

6 Målorienterad design Cooper och många andra förespråkar Goal- Directed design Google: Focus on the user and all else will follow Mål är det vi vill uppnå inte medlen vi använder för att uppnå målet

7 Målpyramiden

8 Målpyramiden

9 Föränderlighet

10 Målorienterad design Cooper: Det allra vanligaste målet för alla människor överallt i alla tider är ja vad då?

11 Målorienterad design Cooper: Det allra vanligaste målet för alla människor överallt i alla tider är ATT INTE KÄNNA SIG SOM EN IDIOT! Eller verka vara en! Glöm aldrig det.

12 Användare kan delas in i tre kategorier Nybörjare vanliga användare Experter

13 och varför ska vi bry oss om det? Nybörjare är viktiga för vi vill behålla dem och förvandla dem till Vanliga användare är viktigast eftersom de är flest, opch därför är det dem vi tjänar pengar på. Experter är viktiga eftersom det är de som bedömer, recenserar och rekommenderar programmet och eftersom de uppskattar förbättringar!

14 Olika stadier

15 Personas I sin designprocess använder man ibland personas, som får representara statistiken. De är påhittade personer med riktiga användar-karaktäristika Ex två vanliga användare som har två olika mål med programmet En expertanvändare Alla har andra egenskaper också; jobb, bil, ålder, hobbies, familj sätter namn på en kravspec

16 Hur tänker vi? Människor Mönsterigenkänning Kasualitet Många parallella, kontinuerliga tankeprocesser Dåligt minne Datorer Räknar ut saker behöver regler Disktera processer Väldigt bra minne

17 Hur tänker vi? Människor tillämpar mentala modeller Vi tror att saker fungerar på ett visst sätt Det behöver inte vara sant :) Vi har svårt för hårda data och vill hellre ha samband 999 gånger dricker jag kaffe, 1 gång dricker jag te Datorer tillämpar implementationsmodeller Hårda, maskinnära data Kodstruktur Informationsarkitektur Det finns två fall

18 Mellantinget En representativ modell ligger någonstans mellan den mentala modellen och implementationsmodellen Designerns uppgift är att skapa en representativ modell av systemet Eftersom det är väldigt bökigt och svårt att nå hela vägen fram till en användares mentala modell

19 Implementationsmodell 0, 102, 204

20 Representationsmodell Blå

21 Representationsmodell (fast närmare den mentala modellen) Blå

22 Mental modell

23 Mental models in GUIs Variations - function in Photoshop

24 Eller, ett mera GUI-relaterat exempel

25 Metaforer Ibland använder vi metaforer för att förklara en viss funktion för användarna Det är helt enkelt riktiga saker vars funktion eller beteende överensstämmer med något i GUIt Typiska GUI-metaforer är Att vi jobbar med dokument (och inte filer numera) Saxen som symboliserar klipp ut Att vi lagrar våra dokument i mappar (vilket funkar mindre bra eftersom man i verkligheten inte har mappar i mappar i mappar )

26 Metaforer är bra eftersom de ger enkla ledtrådar till vad något är, eller hur det kan användas är problematiska eftersom De inte håller hela vägen (som mappar i mappar) De kan vara begränsande (tänk att se Word som en skrivmaskin enbart!) De oftast inte hänger med när man utökar systemet med nya funktioner för då kanske man lånar in metaforer från en annan domän och då blir det rörigt som i Photoshop där man blandar metaforer från foto, måleri och magi

27 Idiom är en lösning på detta Idiom kan inte listas ut, de måste läras in Ursprungligen mystiska språkliga uttryck, ex Ont krut förgås inte! När man vet, så vet man måste vara lätta att lära in Oberoende av kultur Disketten För oss är den en metafor men om den hänger kvar ett par decennier till kommer den att förvandlas till ett idiom

28 Välkända idiom

29 Välkända idiom Nästan alla typer av kontroller i GUIn

30 Sammanfattningsvis Designa för att användaren ska uppnå sitt mål så snabbt och enkelt saom möjligt men glöm inte andra intressegrupper Designa för den vanlige användaren men glöm inte bort nybörjarna och experterna Försök göra representativa modeller som ligger nära användarnas mentala modell Använd bara riktigt bra metaforer

31 Designprocessen: Att sno ihop ett GUI

32 Från spec till design Detta är egentligen en lång process (se Cooper kap 1) Bakgrundsforskning: vad, vilka, var, när, hur? Modellering: vilka mål, vilka är de huvudsakliga användarna Funktionsanalys: scenarions, use cases, objectives Att designa ramverket, dvs själva interaktionsdesignen Att förbättra designen och lägga till look&feel Att testa, förbättra, dokumentera, supporta

33 Att skapa ett ramverk för ixd Definiera kontext Hur och var ska GUIt användas? Definiera element Vad har vi för saker i systemet och vad kan man göra med dem? Gruppering Vilka element hör ihop, vad är viktigast Skissa Enkla layout-skisser som visar flöden och skärmelement Keypaths Skapa interaktionssekvenser. Fundera på /se över layout. Validering Funkar det här som vi tänkt nu då? Testa, testa, testa!

34 Vi testar!

35 Vi testar! Hotellbokingssystem 2-3 valiga användare (kan Word, Excel, ) Det brukade vara Excelfiler 58 rum; 43 i huvudbyggnaden, 15 i ett annex. 2 sviter i huvudbyggnaden En hel del stammisar

36 Definiera kontext 1) Definiera kontext Hur och var ska GUIt användas? Är det en användare eller flera? Vilken är användningsmiljön? Vilken är användningssituationen? Hur ska information visas? Hur ska informtion matas in? För vårt hotell blir det..?

37 2) Definiera element Vilka saker har vi i systemet, och vad har de för egenskaper ( vad ska vara i databasen? ) Exempel på saker är sånt som användare, recept, filer Exempel på egenskaper blir då Funktioner Namn, login, lösenord, organisation, rättigheter Ingredienser, typ av rätt, instruktioner Vad vill vi kunna göra? (Skapa, editera, flytta, ändra, koppla ihop? ) Hur? För vårt hotell blir det..?

38 3a) Gruppering Vilka är de viktigaste sakerna Vilka är de viktigaste funktionerna? Hur ska de grupperas på bästa sätt? Grupper, flikar, menyer Tänk på flow och sekvenser här finns det en naturlig ordning? För vårt hotell blir det..?

39 3b) Skissa Rita bara enkla former:) Börja översiktligt Börja med att dela in skärmen i olika områden, eller processen i olika steg Fyll på med innehåll GÖR ALLTID MER ÄN EN SKISS!!! För vårt hotell blir det..?

40 3c) Testa key paths En key path är en vanlig eller trolig interaktionssekvens som kan hjälpa till med layout & flow Exempel: att skriva ett mail Att öppna ett nytt mail (måste vara först) Att i någon ordning ange Mottagare (måste man) Ämne (måste man inte) Innehållet (bör man väl ) Om man vill bifoga något Att skicka (gör man sist) För vårt hotell blir det..?

41 Välj själv! :) Gruppera, skissa och skapa key paths kan man göra i vilken ordning som helst välj den som passar dig/er bäst! Oftast går man fram och tillbaka mellan aktiviteterna i en iterativ process. Gruppering Vilka element hör ihop, vad är viktigast Skissa Enkla layout-skisser som visar flöden och skärmelement Testa keypaths Kolla om saker ligger i rätt ordning

42 Validering Man kan hitta på alternative key paths De mer ovanliga sakerna (exempelvis att radera alla mail i en inbox, eller rotera alla bilder i en mapp) Man kan försöka slå sönder key paths (gaming!) Kolla att man har med ovanliga men nödvändiga funktioner Att konfigurera nånting Lägga till användare För vårt hotell blir det..?

43 Iterera! De sista fyra stegen är iterativa!

44 Summering Definiera kontext Hur och var ska GUIt användas? Definiera element Vad har vi för saker i systemet och vad kan man göra med dem? Gruppering Vilka element hör ihop, vad är viktigast Skissa Enkla layout-skisser som visar flöden och skärmelement Keypaths Skapa interaktionssekvenser. Fundera på /se över layout. Validering Funkar det här som vi tänkt nu då? Testa, testa, testa!

45 Litteratur Cooper, Reimann & Cronin (2007) About face 3: the essentials of interaction design finns som e-bok på Chalmers bibliotek: Om Goal-Directed design: kapitel 1 Om mentala modeller etc: kapitel 2 Om olika typer av användare: kapitel 3 Om designprocessen: Kapitel 7 (halva, s ) Tidwell (2011) Designing interfaces 2nd Edition finns också som e-bok på Chalmers bibliotek Lite om olika användarbeteenden: kapitel 1

46 Onsdagens övning Fokus är att designa för olika typer av användare, och till sist smälta ihop detta till ett GUI Rätt är bättre än snyggt!!!! Öppnar ni photoshop, Balsamiq eller nåt annat skissprogram före är ni dödens! Rita på papper! Lägg inte tid på att välja färger, bilder eller ikoner.