Design och konstruktion av grafiska gränssnitt

Transkript

1 Design och konstruktion av grafiska gränssnitt Peter Börjesson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU

2 Idag Pappersprototyper Designexempel Listor (Tidwell kap.5, List of Things) Projekthandledning imorgon Möjlighet till vanlig handledning i labsalen varje onsdag och fredag Möte med handledare varje fredag

3 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 börjar kodar

4 Pappersprototyp?

5 En skiss visar bara hur det ser ut Ingen interaktion Ofta flera olika förslag Generera idéer Skiss

6 En wireframe visar layout Skelett Kan visa interaktion Visar innehåll men oftast ingen riktig data Wireframe

7 Storyboard En skiss visar en serie av interaktioner Ingen interaktion Temporal aspekt Förstå hur en uppgift utförs och hur GUI:t kan stödja detta

8 Pappersprototyp En pappersprototyp kan man interagera med Klicka genom att peka Sedan byter man till hur det ser ut efter klick Skriva kan man göra direkt Sen kanske man byter vy beroende på kommando Vid menyval visar man menyer Klickar man (genom att peka) på en dropdown visas en lista

9

10

11 Pappersprototyp - exempel Apartment Finder Paper Prototype Visar upp ett koncept och demar interfacet Hanmail Visar ett användartest

12 Pappersprototyp - tips Undvik att förfina och göra perfekt Gör oftast väldigt lite skillnad En av styrkorna är att man kan göra om, göra bättre eller överge dåliga idéer.

13 Pappersprototyp - tips Greeking? (dummy text) Bra verktyg, men använd inte för mycket Användare måste förstå sammanhang Testet måste vara förankrat i verkligheten Riktig data? kan vara viktigt för att förstå sammanhang men kan också få användaren att fokusera på fel saker.

14 Pappersprototyp - tips Separera skärmen i olika delar Använd sax Undvik att skissa samma meny flera gånger

15 Planera test Vilka användare vill man testa på? Vilka delar av gränssnittet vill man testa? Kan inte testa allt Skapa 3-5 uppgifter som användarna ska göra Lista saker som kan utföras, vilka är viktigast? Lista egna frågor som rör designen Välj de mål som ni tycker bäst besvarar och täcker era frågor och gör dessa till en testuppgift. Välj ut 10 låtar du tycker om och för över till din mobiltelefon Varje uppgift bör ha ett tydligt slut, användaren bör förstå när uppgiften är klar

16 Förbered Pappersprototyp Vilka element av GUI:t behövs för att genomföra uppgiften? Menyer, knappar, länkar, textboxar Man byter papper efter vad användarna gör, se till att skapa alla skärmar som behövs för att genomföra uppgiften Det går att ha olika lösa delar av sidan Glöm inte data där det behövs till exempel sökresultat att visa

17 Förbered Pappersprototyp Börja med att testa den själva Hitta grova saker som saknas Hur lång tid tar det När ska man hjälpa användaren Gameplan 1,2,3 sedan 4 eller 5 Kan inte förutse och förbereda allt Förutse troliga alternativ: hitta något via sök eller kategorier Du förstår allt i den här menyn, men det är inte vad du letar efter

18 Roller vid test Roller Testledare (Facilitator) Förklarar uppgifter, ställer frågor, håller reda på tid och hjälper testanvändaren där det behövs. Dator En av er spelar datorn som varken hör eller pratar med testanvändaren, utan visar olika skärmar och agerar som applikationen skulle göra Observatör Samlar data, lyssnar, skriver ned vad som saknas, vad testpersonen säger, frågor som uppkommer

19 Utföra test Förklara att det är gränssnittet som ska testas, inte användaren Förklara vilka era roller är Förklara att användaren ska peka för att klicka på knappar och länkar och vad de ska göra vid drag and drop, högerklick etc. Ge användaren papper och penna som kan användas för att simulera inmatning via ett tangentbord Be användaren tänka högt och berätta vad som verkar vettigt, förvirrande, oklart.

20 Analysera resultat Gruppera observationer Försök hitta gemensamma drag och mönster Identifiera vad som saknas Ändra? Text på knappar, länkar Arrangemang av knappar, länkar Lägga till / ta bort kontroller Testa igen

21 Övning 4 Ska finnas en färdig pappersprototyp att testa under övningen på onsdag. SCHEMA 09:00-09:15: Förberedelser för pappersprototypen. 09:15-09:45: Testning. 09:45-10:00: Rast. 10:00-10:45: Testning. 10:45-11:00: Rast. 11:00-11:30: Analysera insamlat material från tester 11:30-11:45: Skriva feedback till andra grupper om deras design.

22 Övning 4 STRUKTUR Varje grupp väljer tre personer som sköter testningen vid deras station (dator, observatör, testledare), och har en person som cirkulerar andra stationer för att testa deras design. Ni kan byta så att alla testar flera roller. Grupper mindre än 4 personer kan slå ihop observatör och testledare. Grupptestningen sker enligt följande: Grupp 1 testar grupp 2, 3, 4s design. Grupp 2 testar grupp 3, 4, 5s design. Grupp 27 testar grupp 28, 1, 2s design. Grupp 28 testar grupp 1, 2, 3s design.

23 DESIGNEXEMPEL

24 Vad har vi Användarstudier, mentala modeller, personas Platform & Posture kategorier intermediate, expert, novice Organisera innehåll Informationsarkitektur,,tiled panes, single windows Mönster Feature, search, browse Navigation Minimera Mönster - Clear entry points, global navigation

25 Vad har vi Visuell hierarki, Layout Mönster - Visual framework, Titled sections, Module tabs Ett antal olika sätt att utföra handlingar och affordances Mönster - Button groups, action panel Getting input from user En massa kontroller Mönster - Structured format, input hints Flow, Listor, Showing complex data Mönster - Cascading lists, row striping Summan av detta saker att utgå från i en top-down process

26 Fotbollsapp Info om fotboll Spelare Serier Resultat Forum Lag Konto? Stil? Fotbollsnördar Liten desktop-app

27 Informationsarkitektur En sektion för varje huvud-del Spelare Serier Resultat Forum Lag Konto Så här?

28 Global Navigation Väljer någon form av global navigation mellan huvuddelarna Styr upp hur de olika delarna samverkar Testa olika

29 Visual Framework Bestäm gemensam visuell idé för alla sidor Grid Färger Fonter Knappar Center-stage

30 Grid of Equals Val för enskilda paneler Kom ihåg visual framework vid design Olika paneler samma stil Samma applikation

31 Detaljerad design Enskilda kort Använd visual framework Grouping alignment etc Right/Left alignment Prominent Done Button Row-striping

32 Detaljerad design Kontouppgifter Visual framework Mönster för input Same-page error messages Prominent Done Button Input hints

33 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

34 Listor finns överallt Lists of Things Tidwell Kapitel 5 Artiklar Sidor Bilder Matvaror Forum Mail Sökresultat Filer Dokument Låtar Filmer Kontakter Statusuppdateringar Applikationer Spel Meddelanden Tweets Video Avgångar

35 Listor vad gör man? På vilka sätt använder vi listor och hur påverkar detta designen?

36 Få en överblick

37 Få en överblick

38 Få en överblick

39 Få en överblick

40 Bläddra igenom, jämföra

41 Bläddra igenom, jämföra

42 Hitta en specifik sak

43 Hitta en specifik sak

44 Sortera och filtrera

45 Arrangera om i listan

46 Listor vad gör man? Vilken/vilka? Få en överblick Bläddra igenom, jämföra Hitta specifik sak Sortera och filtrera Arrangera om i listan Vad man ska göra påverkar vilket/vilka mönster som är relevanta

47 Listor saker att fundera på Längd Finns det ett slut? Hur mycket kan man visa? Ordning Någon naturlig sortering? Vill användaren ändra på denna? I så fall till vad? Gruppering Kan man gruppera elementen? Är denna gruppering naturlig eller måste den förklaras? Finns det olika sätt att gruppera, ska användaren själv få gruppera element?

48 Listor saker att fundera på Saker i listan Är objekten simpla eller komplexa? Är de lika eller väldigt olika? Finns det en bild knuten till varje element? Vad i objekten är viktigast för användaren och kan dessa sorteras / filtreras? Interaktion Hur mycket ska visas av varje element i listan? Vad kan/ska man göra med listan Jämföra, välja för närmare inspektion, utföra en uppgift? Ska man kunna välja flera objekt samtidigt?

49 Two-Panel Selector One-Window Drilldown List Inlay Carousel Row Striping Cascading Lists Thumbnail Grid Pagination Alphabet Scroller Tree Table Mönster List of Things Kapitel 5

50 Two-Panel Selector

51 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. Varför? Detta är en vanlig konvention som användare känner igen och snabbt förstår. Bra att erbjuda överblick men samtidigt detaljer. När? Man har en lista av objekt med som har ett intressant innehåll. Man vill visa både strukturen på listan och det enskilda objektet samt tillåta snabb ändring. Skärmen man jobbar med måste vara tillräckligt stor. 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.

52 Two-Panel Selector

53 Two-Panel Selector

54 One-Window DrillDown

55 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? Är kanske det enda alternativet som vid små skärmar 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.

56 Problem? One-Window Drilldown

57 One-Window Drilldown Problem? Kognitiv börda Jobbigare när hela fönstret laddas om, jämfört med bara en del av det Pogosticking Kan bli bättre genom att låta användaren gå direkt till nästa och förra elementet i listan.

58 One-Window Drilldown

59 One-Window Drilldown

60 One-Window Drilldown

61 One-Window Drilldown

62 List Inlay

63 List Inlay Vad? Expandera ett objekt i en lista på plats när det väljs. Låt objekt öppnas och stängas oberoende av varandra. Varför? Genom att visa detaljer i listan behålls kontexten. Kan expandera flera objekt för att jämföra. När? Visa lista av objekt. Alla detaljer får inte plats, men det finns inte jättemycket info att visa. Listans struktur är viktig och det är bra om användaren kan jämföra olika objekt 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.

64 List Inlay

65 List Inlay

66 List Inlay

67 Thumbnail Grid

68 Thumbnail Grid Vad? Presentera en lista av visuellt intressanta objekt som en grid med thumbnails. När? Har en lista med en visuell representation som är unik för objektet. Annan information som ska visas är begränsad, bilden ska ta mest plats Varför? Stark visuell effekt. En bild kan ibland bättre hjälpa användaren att hitta ett objekt. Passar väldigt bra för touch. Hur? Placera objektens thumbnail i en grid. Försök att ha samma storlek på dessa thumbnails. Presentera text i närheten men inte för mycket, låt bilden tala istället.

69 Thumbnail Grid

70 Thumbnail Grid

71 Carousel

72 Carousel Vad? Visa en lista som en horisontell rad eller båge av thumbnails. Förstora eventuellt det mittersta objektet. Varför? Engagerande gränssnitt för visuella objekt som uppmanar till utforskning. Sparar plats jämfört med en thumbnail grid. När? Visa en lista där det finns en unik visuell representation. Listan innehåller inte kategorier. Casual browsing Man har inte så mycket vertikalt utrymme. Hur? Försök att ha samma storlek på dessa thumbnails. Presentera text i närheten men inte för mycket, låt bilden tala istället.

73 Carousel

74 Carousel

75

76

77

78

79 Row Striping Vad? Alternerande liknande färger av bakgrund i rader. När? Presenterar data i flera kolumner som kan vara svår att separera visuellt. Varför? Blir lättare att läsa och snyggare. Kan eliminera behov av ramar runt rader. Hur? Alternera två liknande färger, en lite mörkare än den andra.

80 Row Striping

81 Cascading Lists

82 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. Varför? Man får en god överblick av data och ser ganska mycket samtidigt. 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. 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.

83 Cascading Lists

84 Tree Table

85 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

86 Tree Table

87 Pagination

88 Pagination Vad? Dela upp en lista på olika sidor som laddas en i taget. Ge användaren kontroller för att navigera till nästa, förra, sista och första sidan. Varför? Delar in resultat i delar som är lättare att ta till sig för användaren. Valet att ladda mer resultat är ett hamnar hos användaren. När? Visar en lista som är väldigt lång, de flesta användare utforskar bara de översta resultaten. Infinite list eller continuously scolling list inte fungerar som alternativ. Hur? Bestäm hur många resultat som ska visas per sida baserat på utrymme och laddningstider. Första sidan ska räcka, se till att bra sökresultat visas här. Överväg att låta användaren bestämma hur många objekt som ska visas per sida.

89 Pagination

90 Alternativ (Infinite List) Pagination

91 Alternativ (Continuous Scrolling ) Pagination

92 Alphabet Scroller

93 Alphabet Scroller Vad? Visa alfabetet längs med en scrollbar i en alfabetisk lista När? Användare letar efter ett specifikt objekt och man vill göra detta så lätt och snabbt som möjligt för användaren. Varför? Inte så vanliga men nyttan är självförklarande. Fungerar också som en karta på samma sätt som en Annoterad Scrollbar. Alternativ/komplement till Jump to Item Hur? Visa alfabetets bokstäver längs med en scrollbar i en alfabetisk lista. När användaren klickar på en bokstav, skrolla listan dit. Överväg om den kan användas till andra sortera listor som nummer och datum.

94 Alphabet Scroller

95 Alphabet Scroller Variant? (Windows Phone)

96 Alphabet Scroller Alternativ/Komplement (Jump to Item)

97 Two-Panel Selector One-Window Drilldown List Inlay Carousel Row Striping Cascading Lists Thumbnail Grid Pagination Alphabet Scroller Tree Table Mönster List of Things Kapitel 5