Design och konstruktion av grafiska gränssnitt

(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)

Skiss

•

En skiss visar bara hur det ser ut

–

Ingen interaktion

–

Ofta flera olika förslag

–

Generera idéer

(6)

Wireframe

•

En wireframe visar layout

–

^Skelett

–

Kan visa interaktion

–

Visar innehåll men oftast ingen riktig data

(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

https://www.youtube.com/watch?v=j-_pgoryDWI Visar upp ett koncept och demar interfacet

Hanmail

https://www.youtube.com/watch?v=GrV2SZuRPv0 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.

…

(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)

Tidwell – Kapitel 5

•

Listor finns överallt

–

^Artiklar

–

^Sidor

–

^Bilder

–

^Matvaror

–

^Forum

–

^Mail

–

Sökresultat

–

^Filer

–

^Dokument

–

^Låtar

Lists of Things

–

^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)

Mönster

•

Two-Panel Selector

•

One-Window Drilldown

•

List Inlay

•

^Carousel

•

Row Striping

•

Cascading Lists

•

Thumbnail Grid

•

Pagination

•

Alphabet Scroller

•

Tree Table

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.

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.

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.

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)

One-Window Drilldown

Problem?

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

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

Varför?

Genom att visa detaljer i listan behålls kontexten. 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.

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

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.

Varför?

Engagerande gränssnitt för visuella objekt som uppmanar till

utforskning.

Sparar plats jämfört med en thumbnail grid.

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.

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.

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

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.

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.

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)

Pagination

Alternativ (Infinite List)

(91)

Pagination

Alternativ (Continuous Scrolling )

(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)

Mönster

•

Two-Panel Selector

•

One-Window Drilldown

•

List Inlay

•

^Carousel

•

Row Striping

•

Cascading Lists

•

Thumbnail Grid

•

Pagination

•

Alphabet Scroller

•

Tree Table

List of Things – Kapitel 5