Design och konstruktion av grafiska gränssnitt

Transkript

1 Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Getting input from users Exempeldesign Paper prototyping Idag CHARM ingen övning på onsdag Handledning enligt särskilt schema på fredag Kolla hemsidan 1

2 Interaktionsdesignspraxis Fastställ behov och krav loop Utveckla alternativa designförslag Bygg interaktiva prototyper för kommunikation och analys Utvärdera designen baserat på prototyperna end loop GETTING INPUT FROM USERS 2

3 Allmänt Design bör ta hänsyn till alignment, grouping etc för att skapa ett harmoniskt och förståeligt intryck För val av specifika kontroller kan uppställningen i Tidwells bok vara nyttig En av flera? Flera av flera? Tal i intervall? Sen finns det några principer till Principer Se till att användarna förstår vad som efterfrågas och varför Använd språk som är anpassat till användarna Om det är en massa information förklara varför den behövs Använd tooltips för t ex knappar som används för input Om det går ställ inte frågan alls Detta är samma som Cooper säger Man kanske avbryter flow Det kanske går att gissa eller fylla i ett standardvärde för att minska arbete 3

4 Principer, forts Kunskap i världen är mer korrekt än kunskap i huvudet Går det att erbjuda en lista att välja från så gör det Kan man ha en visuell presentation så använd den Måste man ha ett visst format, visa det tydligt Se upp för direktmappningar från implementationsmodellen Glöm inte användarens mentala modell Data i implementationen kanske inte passar Designa först mappa mot implementationen sen Användartesta Gäller för allt Ofta räcker det med ett ganska litet antal personer (typ 5) Principer, forts Valet av kontroll påverkar vad användaren förväntar sig så välj rätt Radiobox flervalsalternativ Textfält kort öppet svar Ge inte möjlighet att skriva fel T ex 15 när bara 1-10 är tillåtet Få aldrig användaren att känna sig dum 4

5 Välja kontroll Boken tar upp ett stort antal möjliga kontroller för olika situationer Kontroller för att välja en av två möjliga Kontroller för att välja N objekt där N är litet Kontroller för att välja N objekt i godtycklig ordning Kontroll för att skriva en rad text Läs tillräckligt för att ha god uppfattning om möjligheter sen kan man slå upp i en designsituation Faktorer att ta hänsyn till Tillgängligt utrymme Platskraven varierar mycket mellan olika kontroller Användarnas allmänna datorkunskap Textfält förståeligt för alla Dubbelslider eller lista med flervalsmöjlighet mycket svårare Användarnas domänkunskap Vet man att bara vissa intervall är tillåtna så måste man inte designa lika noga Det kanske är mindre viktigt att bara ha givna alternativ att välja mellan Men det blir lätt fel även om man är kunnig 5

6 forts Förväntningar från andra program The applications that are easy to use are designed to be familiar Bold/Italic/Underline vanligt som butcons, radioknappaer blir konstigt Dvs man måste kunna sin verktygslåda Tillgänglig teknik Alla plattformar har inte samma kontroller Web begränsad iphone specialdesignade Några mönster Allmänt Mönster är förslag på fungerande lösningar Måste anpassas efter situationen Nytta Kan man många är chansen större att man hittar något lämpligt för en given situation Ger en vokabulär för att diskutera design Studera/reflektera kring program man använder Är beprövade 6

7 Forgiving Format Forgiving Format Vad Tillåt användaren skriva lite vad som helst och låt sedan programmet tolka det intelligent När Programmet efterfrågar data som kan skrivas på många olika sätt, blandningar av format, tecken, stora/små bokstäver etc Varför Användaren vill bara få något gjort utan att fundera på format det blir helt enkelt mycket enklare Hur Se Vad. Sen måste man se till att det går att förutse tillräckligt bra vad användaren kan tänkas skriva så att det går att tolka 7

8 Exempel Structured Format 8

9 Structured Format Vad Använd flera textfält istället för ett för att visa strukturen på data När Inmatning av med ett givet och känt format. T ex kreditkortsnummer. Funkar inte om det kan finnas variation. Varför Strukturen visar för användaren vad som ska matas in Hur Använd ett antal textfält som motsvarar strukturen. Dessa bör inte vara längre än vad som behövs. När användaren matat in allt i ett fält flyttas man automatiskt till nästa. Exempel 9

10 forts bra? Fill-in-the-Blanks 10

11 Fill-in-the-Blanks Vad Ordna en eller flera inputkontroller i en fras, där inmatning innebär att man fyller i hål i frasen. När Man ska mata in något och detta blir tydligare och snyggare än vanliga label/inputarrangemeng. Varför Metoden är självförklarande. Användare klarar intuitivt av att fylla i hål i fraser. Tydligare än en massa förklaringar. Hur Jobba ordentligt med frasen. Mönstret funkar bäst med textfält, dropdowns o dyl som passar bra in i en text visuellt. Exempel 11

12 Input Hints Input Hints Vad Placera en text eller ett exempel bredvid ett inmatningsfält för att visa hur det ska användas När Det är inte helt självklart hur vad man ska skriva i ett fält och man vill inte skriva en lång förklarande label Varför Användarna slipper gissa. Vet man vad det ska stå behöver man inte kolla på input-hinten Hur Placera en kort text under eller bredvid inmatningsfältet. Det kan vara bra att använda en mindre font än för fältets label 12

13 Exempel forts bra? 13

14 Illustrated Choices Illustrated Choices Vad Använd bilder istället för ord för att visa tillgängliga val När Användaren skall välja mellan ett antal objekt som skiljer sig visuellt Varför En bild säger mer än tusen ord + det blir snyggare Hur Visa bilder som motsvarar vad användaren får. Tekniken kan användas i bl a menyer, listor, knappar, tabeller osv. Borta ur kapitel 8 14

15 Exempel Good Defaults 15

16 Good Defaults Vad När det är möjligt fyll i sannolika värden i förväg När I alla fall när man begär in information från användaren. Speciellt då det finns sannolika svar, eller då det är troligt att systemet vet vad som borde vara mest lämpligt. Varför Minskar användarens arbete. Kan också göra det mycket enklare om användaren är osäker och bara behöver bekräfta systemets val. Hur Ange default-värden för textfält, comboboxar etc. Kan göras dynamiskt eller statiskt. Var noggrann med att inte fylla i värden som sannolikt måste ändras. Exempel 16

17 forts Same-Page Error Messages 17

18 Same-Page Error Messages Vad Placera felmeddelanden direkt på inmatningssidan. Placera ett meddelande överst och helst också nära de faktiska felen När Designen tillåter att man faktiskt kan skriva fel eller utelämna information. Gör det så enkelt som möjligt att rätta till när det inträffar. Varför Den traditionella metoden är att slänga upp en dialogruta med ett felmeddelande (ofta modal). När man stängt den är informationen borta Bättre med information i kontext Hur Se Vad. Om felmeddelandena finns vid felet behöver man inte leta och fundera. Exempel 18

19 DESIGNEXEMPEL Vad har vi - projekt? Användarstudier, mentala modeller, personas Platform & Posture kategorier intermediate, expert, novice Organisera innehåll Informationsarkitektur,,tiled panes, single windows Mönster Feature, search, browse Minimera navigation & Navigationsmönster clear entry points, global navigation Visuell hierarki, grouping & alignment visual framework, titled sections, module tabs Ett antal olika sätt att utföra handlingar och affordances Button groups, action panel Shneidermans och Nielsens principer Getting input from user En massa kontroller, Structured format, input hints Flow, Showing complex data Cascading lists, row striping Summan av detta saker att utgå från i en top-down process 19

20 Info om fotboll Spelare Serier Resultat Forum Lag Konto? Stil? Fotbollsnördar Transient desktop-app Fotbollsapp Informationsarkitektur En sektion för varje huvud-del Spelare Serier Resultat Forum Lag Konto Så här? 20

21 Global Navigation Väljer någon form av global navigation mellan huvuddelarna Styr upp hur de olika delarna samverkar Testar olika Visual Framework Bestäm gemensam visuell idé för alla sidor Grid Färger Fonter Knappar Center-stage 21

22 Grid of Equals Val för enskilda enheter Kom ihåg visual framework vid design Olika enheter samma stil Detaljerad design Enskilda kort Använd visual framework Grouping alignment etc Right/Left alignment Prominent Done Button Row-striping 22

23 Detaljerad design Kontouppgifter Visual framework Mönster för input Same-page error messages Prominent Done Button Input hints Iterera Jobba på helhet och varje del tills de är bra nog Förutom papper Photoshop/Gimp etc Mockup-verktyg Balsamiq Axure Lagom realistiska Länkar under resurser 23

24 PAPER PROTOTYPING Pappersprototyper Vad? Man skapar en pappersversion av sitt GUI och använder för att testa och utvärdera innan man börjar programmera. Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person playing computer, who doesn t explain how the interface is intended to work. Varför Snabbt enkelt och billigt Kan fånga massor av problem innan man kodar 24

25 Pappersprototyp? Skiss vs pappersprototyp En skiss visar bara hur det ser ut Kan vara flera olika sidor Samma sak med storyboards och wireframes Som förstås alla kan vara intressanta En pappersprototyp kan man interagera med Klicka genom att peka Sen byter man till hur det ser ut efter klick Skriva kan man göra direkt Sen kanske man byter beroende på kommando Vid menyval visar man menyer Klickar man (genom att peka) på en dropdown visas en lista 25

26 26

27 Test med pappersprototyp Välj ut de delar av GUI:t man vill testa Skapa pappersversioner av alla sidor Man kan ha olika lösa delar man lägger på varandra etc också Välj ut användare för testet Skapa några uppgifter användarna ska göra Sen byter man papper efter vad användarna gör och ser vad som händer Det är vanligt att man uppmanar användare att tänka högt Roller Facilitator Computer Observer Jakob Nielsens heuristics Jakob Nielsen välkänd usability-guru, se Detta är en annan uppsättning principer det är allmänbildning att ha hört talas om. Tänkta bl a för att kunna användas i utvärdering Fungerar också som designprinciper Visibility of system status Systemet ska alltid hålla användaren informerad om vad som sker Match between system and real world Systemet ska alltid följa användarens modell och termer istället systemmodell och terminologi. Följ real-world conventions. User control and freedom Användare väljer ofta fel väg och behöver nödutgång för att komma tillbaka enkelt. Stöd undo och redo. 27

28 Nielsens heuristics, forts Consistency and standards Man ska inte behöva fundera på om saker betyder vad de brukar. Följ platformskonventioner. Error prevention Ännu bättre än felhantering är att se till att inga problem uppstår. Leta efter problemsituationer och begär konfirmation för farliga handlingar Recognition rather than recall Minimera användarens minnesbelastning genom att visa det som kan utföras. Man ska inte behöva komma ihåg saker från en dialog till en annan. Instruktioner ska vara synliga eller lättåtkomliga när det behövs. Nielsens heuristics, forts Flexibility and efficiency of use Shortcuts o accelarators kan ofta snabba upp interaktionen för erfarna användare. Erbjud möjlighet att anpassa vanliga actions. Aesthetic and minimalist design Dialoger ska inte innehålla information som är irrelevant eller sällan behövs. Varje bit onödig information slåss om uppmärksamhet med den relevanta informationen och minskar dess synlighet 28

29 Nielsens heuristics, forts Help users recognize, diagnose and recover from errors Felmeddelanden ska uttryckas på vanligt språk (inga felkoder), tala om precis vad problemet är och föreslå en konstruktiv lösning Help and documentation Även om det är bäst om systemet kan användas utan hjälp så kan den behövas. Hjälp ska vara lätt att nå, lätt att söka i, fokuserad på användarens uppgift, lista konkreta stega att göra och inte vara för stor. Att göra Jobba med design Analysera uppgiften Informationsarkitektur Visual framework Skissa Pappersprototyp Visa gärna denna på fredag Läsa Kapitel 8 i Tidwell Många mönster läs alla Uttömmande uppställning av olika kontroller 29