Design och konstruktion av grafiska gränssnitt

Transkript

1 Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Paper Prototyping Lite kodtips Lists of Things Designexempel Onsdag övning Idag Projekthandledning enligt särskilt schema på fredag Obligatoriskt! Anslås på onsdag em Möjlighet till vanlig handledning i labsalen 1

2 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 2

3 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 3

4 4

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

6 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 6

7 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 steg att göra och inte vara för stor. Arkitektur Exempel som använder backend från lab 2 Försöker hålla koden i GUI-klasser minimal Vad som ska hända och kommunikation med modell hanteras av Controller 2 varianter av MVC Passive View Cocoa (Touch) Style 7

8 forts Passive View Interface som låter Controller göra get/set på innehåll Uppdatering av GUI sköts i vyn Cocoa Style Controller får tillgång till komponenter i vyn All synkning mellan vy och modell sker sedan i Controller Demo LISTS OF THINGS 8

9 Lists of Things Tidwell kap 5 Listor av någon slags objekt jättevanligt Artiklar Sidor Bilder Matvaror Forum Mail Sökresultat Filer Dokument Listor vad gör man? Vilken/vilka? Få en överblick Bläddra på varje objekt Söka Sortera o filtrera Ordna om/arrangera etc Vad man ska göra påverkar vilket/vilka mönster som är relevanta Mönstren som vanligt beprövade lösningar 9

10 Listor saker att fundera på Längd Finns det ett slut? Hur mycket kan man visa? Ordning Någon naturlig sortering? Gruppering Kan man gruppera elementen? Objekt Hur visas varje objekt/element? Interaktion Vad kan/ska man göra med listan Two-Panel Selector 10

11 Two-Panel Selector Vad Två paneler bredvid varandra. I den ena finns någon form av lista användaren kan välja från. I den andra visas innehållet. När Man har en lista av objekt (kategorier, handlingar). Varje objekt har ett intressant innehåll. Man vill kunna visa både strukturen på listan och det enskilda objektet. Displayen man jobbar med måste vara tillräckligt stor. Varför (kortversionen) Detta är en vanlig konvention som användare förstår Hur Placera listan ovanför eller till vänster och det som visas nedanför eller till höger. När användaren väljer i listan visas motsvarande objekt omedelbart upp (1 klick). Se till att det är uppenbart i listan vad som är valt. Exempel 11

12 Exempel One-Window DrillDown 12

13 One-Window Drilldown Vad Visa en lista i ett fönster. När man väljer ett objekt i listan byts hela fönstrets innehåll och visar det valda objektet. När Man har en lista av objekt att visa (organiserade linjärt eller hierarkiskt) och man har en liten skärm eller det blir enklare för användarna på detta sätt. Varför Enkelt. Allting finns på en skärm. Alla vet hur man navigerar på webben som funkar på detta sätt. Hur Skapa lista med lämplig design (text, thumbnail grid ) När man väljer ett objekt byt hela innehållet. Ha tydligt sätt att navigera tillbaka. Exempel 13

14 List Inlay 14

15 List Inlay Vad Expandera ett objekt i en lista på plats när det väljs När Visa lista av objekt. All detaljer får inte plats, men det finns inte jättemycket info att visa Varför Genom att visa detaljer i listan behålls kontext. Kan expandera flera objekt för att jämföra. Hur Expandera ett objekt när det väljs. Ha ett tydligt sätt att stänga det igen, använd gärna en animering för att expandera och stänga. 15

16 Thumbnail Grid Thumbnail Grid Presentera en lista som en grid med thumbnails Grid of equals Skillnad? Thumbnails Grid of equals princip för att organisera sida 16

17 Thumbnail Grid Carousel 17

18 Carousel Vad Visa en lista som ett horisontellt fält av thumbnails När Visa en lista där det finns en visuell representation. Varje objekt är potentiellt intressant och inte mycket vertikalt utrymme. Varför Engagerande gränssnitt för att utforska en samling objekt med visuell representation. Kompakt vertikalt. Hur Ha tydliga fram/bak-pilar till höger o vänster. Kan ha en scroller också. Animera förflyttning vid klick Carousel 18

19 Row Striping Row Striping Alternerande färger på rader gör tabeller mycket tydligare och eliminerar behov av ramar runt rader. Blir bättre att läsa och snyggare. 19

20 Cascading Lists Cascading Lists Vad Visa en hierarki genom att visa valbara listor med elementen i varje nivå. Väljer man i en lista visas barnen till det man valt i nästa lista. När Man har någon slags trädformad data. Ofta handlar det om att navigera genom olika kategorier eller göra en följd av val. Varför Man får en god överblick av data och ser ganska mycket samtidigt. Hur Placera översta nivån i hierarkin längst till vänster och fyll på med listor till höger efter hand. När man når ett löv kan man visa en preview för detta längst till höger. 20

21 Exempel forts 21

22 forts Tree Table 22

23 Tree Table Vad Placera hierarkisk data i kolumner, men använd en indenterad struktur längst till vänster för att visa datans organisation När Man har någon slags data med flera variabler som passar i en tabell men det finns också en hierarki man vill visa. Användarna är ganska avancerade. Varför Träd + tabell visar mer information och kan därför vara bättre än bara den ena Hur Ha en outline längst till vänster och sen en tabell. Ingen klass i Swing men googlar man på JTreeTable så finns det man behöver Exempel 23

24 Läs också Hela kapitlet DESIGNEXEMPEL 24

25 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 Info om fotboll Spelare Serier Resultat Forum Lag Konto? Stil? Fotbollsnördar Liten desktop-app Fotbollsapp 25

26 Informationsarkitektur En sektion för varje huvud-del Spelare Serier Resultat Forum Lag Konto Så här? Global Navigation Väljer någon form av global navigation mellan huvuddelarna Styr upp hur de olika delarna samverkar Testar olika 26

27 Visual Framework Bestäm gemensam visuell idé för alla sidor Grid Färger Fonter Knappar Center-stage Grid of Equals Val för enskilda enheter Kom ihåg visual framework vid design Olika enheter samma stil 27

28 Detaljerad design Enskilda kort Använd visual framework Grouping alignment etc Right/Left alignment Prominent Done Button Row-striping Detaljerad design Kontouppgifter Visual framework Mönster för input Same-page error messages Prominent Done Button Input hints 28

29 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 Jobba med design Pappersprototyp Att göra Läsa Kapitel 5 i Tidwell Titta igenom text om pappersprototyper Rekapitulera resten 29