Design och konstruktion av grafiska gränssnitt Peter Börjesson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU
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
Information Projekt Övning 3 skisser feedback Material till pappersprototyp 11/2 sal 3507 13/2 rum 5205 Övning 4 pappersprototyp ska vara klar och testas Vad som krävs gås igenom idag
Idag Designexempel Pappersprototyper Listor (Tidwell kap.5, List of Things)
DESIGNEXEMPEL
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
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
Fotbollsapp Info om fotboll Spelare Serier Resultat Forum Lag Konto? Stil? Fotbollsnördar Liten desktop-app
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 Testa olika
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 paneler Kom ihåg visual framework vid design Olika paneler samma stil Samma applikation
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
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
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
Pappersprototyp?
En skiss visar bara hur det ser ut Ingen interaktion Ofta flera olika förslag Generera idéer Övning 3 Skiss
En wireframe visar layout Skelett Kan visa interaktion Visar innehåll men oftast ingen riktig data Wireframe
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
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
Pappersprototyp - exempel Usability testing with a paper prototype https://www.youtube.com/watch?v=aa-svs5mqd8 Hanmail https://www.youtube.com/watch?v=grv2szurpv0 Visar ett användartest
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.
Pappersprototyp - tips Separera skärmen i olika delar Använd sax Undvik att skissa samma meny flera gånger
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.
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
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
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
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.
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
Ö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 1-2. 09:45-10:00: Rast. 10:00-10:45: Testning 3-4. 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.
Övning 4, 18/2 Ska finnas en färdig pappersprototyp att testa under övningen på onsdag. OBS 18/2 Låna material: 11/2 3507 eller 13/2 TBA SCHEMA 09:00-09:15: Förberedelser för pappersprototypen. 09:15-09:45: Testning 1-2. 09:45-10:00: Rast. 10:00-10:45: Testning 3-4. 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.
Övning 4, 18/2 Låna material, ytterligare feedback 11/2 3507 13/2 5205
Ö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.
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
Listor vad gör man? På vilka sätt använder vi listor och hur påverkar detta designen av listorna?
Få en överblick
Få en överblick
Bläddra igenom, jämföra
Bläddra igenom, jämföra
Hitta en specifik sak
Hitta en specifik sak
Sortera och filtrera
Arrangera om i listan
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.
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?
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?
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
Two-Panel Selector
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.
Two-Panel Selector
Two-Panel Selector
One-Window Drilldown
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.
Problem? One-Window Drilldown
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.
One-Window Drilldown
One-Window Drilldown
One-Window Drilldown
One-Window Drilldown
List Inlay
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.
List Inlay
List Inlay
List Inlay
Thumbnail Grid
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.
Thumbnail Grid
Thumbnail Grid
Problem? Thumbnail Grid
Problem? Thumbnail Grid
Carousel
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.
Carousel
Carousel
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.
Row Striping
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. 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.
Cascading Lists
Tree Table
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
Tree Table
Pagination
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.
Pagination
Alternativ (Infinite List) Pagination
Alternativ (Continuous Scrolling ) Pagination
Alphabet Scroller
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.
Alphabet Scroller
Alphabet Scroller Variant? (Windows Phone)
Alphabet Scroller Alternativ/Komplement (Jump to Item)
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