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 Information Projekt Projektplanering in 11/2 Projekthandledning Möjlighet till vanlig handledning i labbsalen onsdag och fredag, se schema Inte bara kodfrågor, kan även gälla designen Projektmöte Möte med handledare tre fredagar, obligatoriskt 20/2, 27/2, 6/3 Design vs. implementation

3 Information Projekt Övning 3 skisser feedback Material till pappersprototyp 11/2 sal /2 rum 5205 Övning 4 pappersprototyp ska vara klar och testas Vad som krävs gås igenom idag

4 Idag Designexempel Pappersprototyper Listor (Tidwell kap.5, List of Things)

5 DESIGNEXEMPEL

6 Vad har vi Användarstudier Kategorier: intermediate, expert, novice mentala modeller personas Organisera innehåll Informationsarkitektur,,flera paneler, ett fönster Platform & Posture Mönster Feature, search, browse Navigation Minimera Mönster - Clear entry points, global navigation

7 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

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

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

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

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

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

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

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

15 Iterera Jobba på helhet och varje del tills de är bra nog Förutom papper Mockup-verktyg Balsamiq Axure Lagom realistiska Länkar under resurser Photoshop/Gimp etc

16 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

17 Pappersprototyp?

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

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

20 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

21 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

22

23

24 Pappersprototyp - exempel Usability testing with a paper prototype Hanmail Visar ett användartest

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

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

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

28 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

29 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: Test1,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

30 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

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

32 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

33 Övning 4, 18/2 Ska finnas en färdig pappersprototyp att testa under övningen på onsdag. OBS 18/2 SCHEMA 09:00-09:15: Förberedelser för pappersprototypen. 09:15-09:45: Testning :45-10:00: Rast. 10:00-10:45: Testning :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.

34 Övning 4, 18/2 Ska finnas en färdig pappersprototyp att testa under övningen på onsdag. OBS 18/2 Låna material: 11/ eller 13/2 TBA SCHEMA 09:00-09:15: Förberedelser för pappersprototypen. 09:15-09:45: Testning :45-10:00: Rast. 10:00-10:45: Testning :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.

35 Övning 4, 18/2 Låna material, ytterligare feedback 11/ /2 5205

36 Övning 4, 18/2 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, 4, 5s design. Grupp 2 testar grupp 3, 4, 5, 6s design. Grupp 26 testar grupp 27, 1, 2, 3s design. Grupp 27 testar grupp 1, 2, 3, 4s design.

37 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

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

39 Få en överblick

40 Få en överblick

41 Bläddra igenom, jämföra

42 Bläddra igenom, jämföra

43 Hitta en specifik sak

44 Hitta en specifik sak

45 Sortera och filtrera

46 Arrangera om i listan

47 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 och som lämpar sig bäst.

48 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?

49 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?

50 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

51 Two-Panel Selector

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

53 Two-Panel Selector

54 Two-Panel Selector

55 One-Window Drilldown

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

57 Problem? One-Window Drilldown

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

59 One-Window Drilldown

60 One-Window Drilldown

61 One-Window Drilldown

62 One-Window Drilldown

63 List Inlay

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

65 List Inlay

66 List Inlay

67 List Inlay

68 Thumbnail Grid

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

70 Thumbnail Grid

71 Thumbnail Grid

72 Problem? Thumbnail Grid

73 Problem? Thumbnail Grid

74 Carousel

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

76 Carousel

77 Carousel

78

79

80

81

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

83 Row Striping

84 Cascading Lists

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

86 Cascading Lists

87 Tree Table

88 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

89 Tree Table

90 Pagination

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

92 Pagination

93 Alternativ (Infinite List) Pagination

94 Alternativ (Continuous Scrolling ) Pagination

95 Alphabet Scroller

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

97 Alphabet Scroller

98 Alphabet Scroller Variant? (Windows Phone)

99 Alphabet Scroller Alternativ/Komplement (Jump to Item)

100 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