Grundläggande teori för användargränssnitt,del 2

Innehåll Översikt, navigering och orientering (ej i boken) Typer av användargränssnitt (Kap 6) Styrdon (ej i boken) Fitts lag (kort på sidan 527-528) Felhantering (kort på sid 138) Kursboken är tyvärr väldigt tunn vad gäller dessa aspekter

Översikt, orientering och navigering

Översikt: Vad finns? Orientering: Var är jag? Navigering: Hur kommer jag dit jag vill?

Översikt: vad finns? Ge användaren en översikt över vad produkten erbjuder Tätt kopplat till synlighet (Norman)

Översikt i Handbrake

Översikt i Handbrake Lätt att missa möjligheten att använda presets Denna del tar väldigt mycket av användarens uppmärksamhet i anspråk

The F-shaped pattern

The F-shaped pattern Hur vi läser webbinnehåll Nästan 70% av läsarens fokus ligger till vänster i vyn 1. 2. Det vanligaste läsmönstret: 1. Horisontell ögonrörelse #1 2. Horisontell ögonrörelse #2 3. Vertikal ögonrörelse 3.

Orientering: var är jag?

Navigering: hur kommer jag dit jag vill?

Exempel: Två olika designer av en ipadtidning

Typer av användargränssnitt

Kommandobaserad interaktion

AutoCAD

Kommandobaserad interaktion + Snabbt för vana användare

Kommandobaserad interaktion + Snabbt för vana användare Billigt och enkelt

Kommandobaserad interaktion + Snabbt för vana användare Billigt och enkelt Flexibelt och rikt på valmöjligheter

Kommandobaserad interaktion + Snabbt för vana användare Billigt och enkelt Flexibelt och rikt på valmöjligheter - Kräver träning och memorerande

Kommandobaserad interaktion + Snabbt för vana användare Billigt och enkelt Flexibelt och rikt på valmöjligheter - Kräver träning och memorerande Hög felfrekvens

Kommandobaserad interaktion + Snabbt för vana användare Billigt och enkelt Flexibelt och rikt på valmöjligheter - Kräver träning och memorerande Hög felfrekvens Svårt att komma igång med

The Xerox Star Interface Utvecklades 1973 av Xerox PARC i Palo Alto, Kalifornien Mål: användargränssnitt som alla kan klara av

WIMP Windows Icons Menues Pointing device

WIMP + Lätt att lära, lätt att minnas

WIMP + Lätt att lära, lätt att minnas Rikligt med feedback

WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande

WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande - Kan ibland ta onödigt mycket skärmyta

WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande - Kan ta mycket skärmyta Användaren måste lära sig symboler och ikoner

WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande - Kan ta mycket skärmyta Användaren måste lära sig symboler och ikoner Missledande visuell representation

WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande - Kan ta mycket skärmyta Användaren måste lära sig symboler och ikoner Missledande visuell representation Tidsödande byta styrdon

Graphical User Interface (GUI) Vanliga GUI-komponenter Fönster Dialogrutor Formulär Menyer

Fönster

Fönster För att överkomma skärmens begränsade yta Översikt, navigering och orientering försvåras Att växla mellan olika fönster är en av de vanligaste operationerna när vi interagerar med ett datorsystem Genomsnittstiden för hur länge ett fönster är öppet och interageras med = 20 sekunder Att designa bra fönsterhantering är svårt!

Alt + Tab

Exposé (Mac OS X)

Windows Flip 3D

Dialogrutor

Spara som i tidig Office-version

Spara som i Office Xp

Dialogrutor Visuell organisation viktigt! Man pratar ibland om mappning av handlingssekvens dvs. att styra användarens uppmärksamhet och handlingar så att han/hon gör saker och ting i rätt ordning.

Dialogrutor med tabbar Utrymmeseffektiv metod Översikt, navigering och orientering försvåras (speciellt om flera rader av tabbar används)

Formulär Metafor: pappersformulär

Riktlinjer för formulär

Högerjustera titlar

Tillåt smidig navigering

Ge tydlig feedback när fält har fyllts i fel

Menyer

Menyer Bygger på principen att vi har lättare för att känna igen än att dra oss till minnes (recogntion over recall)

Generella riktlinjer för menyer

Presentera relevanta val

Bättre gråmarkera än ta bort Positional constancy: Saker och ting bör befinna sig där vi är vana vid att hitta dem

Lägg mest använda valen överst, minst använda nederst

Dela in valen i naturliga grupper

Undvik väldigt långa listor

Använd genvägar

Olika typer av menyer Drop-down-meny Cascading drop-down-meny Pop-up-meny Pajmeny Menyer för långa listor Adaptiva menyer

Drop-down-meny

Cascading drop-down-meny Ger tillgång till många val Kräver bra motorisk kontroll Kan vara omöjliga att använda för personer med funktionsnedsättning och äldre människor

Pop-up-meny

Pop-up-meny Snabbare att nå än topp-placerad drop-down-meny Speciellt lämpliga för large wall displays

Pajmeny

Pajmeny Går snabbare att välja Man kan välja utan att titta (muskelminnet) Callahan et al (1988)

Menyer för långa listor: fisheye-meny

Fisheye-meny Kan öka hastigheten. Inte alla uppskattar dem och de rekommenderas därför inte som defaultmeny. Bederson, 2000

Menyer för långa listor: iphone datepicker

Adaptiva menyer De minst använda valen visas ej Fungerar bra för en del användare men väcker starkt ogillande hos vissa användare Bör ej användas som defaultinställning

Ikoner Sid 169-172 i kursboken Tas upp på föreläsningen Grafisk design nästa vecka

Andra typer av användargränssnitt Mobile Touch Air-based gesture Multimodal Haptic Mixed & augmented reality Virtual reality dessa kommer ni att studera i kurserna Avancerad interaktionsdesign och Virtual Reality i teori och praktik

Styrdon (ej i kursboken)

Styrdon Tangentbord Pekdon

Tangentbord

QWERTY-layout

Dvorak-layout

QWERTY vs. Dvorak QWERTY: 150 ord/minut Dvorak: 200 ord/minut Mindre fel med Dvorak Ändå är QWERTY standard. Varför?

Tangentbordsknappar Konkav, sträv yta 12 mm

Tangentbordsknappar 40 125 gram 3-5 mm

Följer man dessa riktlinjer så får man... Snabb input Låg felfrekvens Bra feedback

Pekdon

Pekskärm

Pekskärm Intuitiv Robust Problem med belastningsergonomi Handen kan skymma Dålig precision Dålig taktil feedback

Pekskärm Intuitiv Man interagerar direkt med informationen

Robust Pekskärm

Pekskärm Problem med belastningsergonomi

Pekskärm Handen kan skymma

Dålig precision Pekskärm

Lift-off strategy Teknik för bättre precision i pekskärmar 1. Peka på skärmen, markör dyker upp 2. Flytta markören 3. Lyft fingret

Pekskärm Dålig taktil feedback många föredrar ett fysiskt tangentbord

Pekskärm Olika typer av teknik Resistiva Kapacitiva

Resistiv pekskärm

Resistiv pekskärm Billig Går att peka med stylus, med handskar etc. Kan ge taktil feedback Låg känslighet Svårt implementera bra multi touch

Kapacitiv pekskärm

Kapacitiv pekskärm Högre känslighet Multi touch Går ej att peka med stylus, handskar etc.

Stylus

Stylus Intuitiv Hög precision Omständig Mobila enheter kräver två händer

Mus Billig Bra belastningsergonomi Hög precision Kräver en smula träning i början Omständigt flytta handen

Fitts lag En matematisk modell av finmotorisk kontroll

Fitts lag OK

Fitts lag Distance (D) OK Width (W)

Fitts lag Distance (D) OK T = tid att nå målet D = avstånd till målet W = målets bredd a, b = konstanter som beror på styrdonet Width (W)

Experiment http://www.tele-actor.net/fitts/index.html

Vad säger Fitts lag? Det tar längre tid att nå små objekt som är långt bort Små ändringar i storlek hos små objekt spelar större roll än små ändringar i storlek hos stora objekt Det samma gäller för avståndet till objektet

Några konsekvenser av Fitts lag

Ge större storlek till objekt som används ofta

Placera objekt som används ofta nära markörens position Pop-up-menyer The Mini Toolbar

Objekt vid skärmkanten har oändlig målbredd!

Notera skillnaden!

The Quick Access Toolbar

Man pratar ibland om The Magic Corners

The Magic Corners: Win 95 vs. Win XP

Hur drar pajmenyer nytta av Fitts lag?

OBS! Kursbokens beskrivningar av Fitts lag är inte helt korrekta. Utgå från denna föreläsning istället!

Felhantering

Vad är ett fel? Handhavandefel Misstag (man tänker fel) Slip (man tänker rätt, men gör fel) Systemfel

Upptäckt-diagnos-åtgärd Hur lätt eller svårt är det att upptäcka felet/problemet och hur lång tid tar det? Hur lätt eller svårt är det att diagnostisera felet/problemet? Hur tydligt framgår det vilken åtgärd som är rätt (t ex klicka på undo-knappen eller ringa tekniker för service)?

Principer för god felhantering Synlighet (gör rätt saker synliga) Feedback (bra & begriplig) Vettig layout (rätt saker på rätt plats: mappning) Reversibilitet (markera om något ej är reversibelt + man ska bara behöva ändra/reversera det som är fel) Överväg så kallade forcing functions

Riktlinjer för design av felmeddelanden Upplys med artig ton användaren om vad han/hon behöver göra för att åtgärda felet. Undvik ord som FATAL, ERROR, INVALID etc. Undvik långa felkoder och stora bokstäver. Ljudfeedback ska användaren själv kunna ställa in, eftersom de kan orsaka förlägenhet hos honom/henne. Ge exakt information. Erbjud en hjälpikon med vilken användaren kan få kontextberoende hjälp. Erbjud information på olika nivåer så att kortare meddelanden kompletteras med längre förklaringar. Sid 138-139 i kursboken

Vi avslutar föreläsningen med en riktig värsting