Menyer, formulär och dialogrutor

Interaktion 2

Menyer, formulär och dialogrutor Konkreta typer av interaktion för direktmanipulation/wimp Kursboken Kap 6

Menyer

Tanken med att använda menyer i användargränssnitt Datorer är duktiga på att snabbt leverera visuell information och människor är duktiga på snabb visuell igenkänning! Ben Shneiderman

Single menus

Grundregel The categories should be comprehensible and distinctive so that users are confident in making their selections. Ben Shneiderman

Single menus: binär meny

Observera metaforen! Single menus: radio buttons

Single menus: check boxes

Singe menus: pull down menus

Shneiderman rekommenderar Bättre gråmarkera än ta bort => positional constancy

Shneiderman rekommenderar Använd genvägar

Single menus: pop-up menus

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

Pop-up menus: pie menu

Popup menus: pie menu More rapid selection Selecting without visual attention Callahan et al (1988)

Single menus for long lists: fisheye menu

Fisheye menu Can improve speed Not liked by all: not recommended as default menu style Bederson, 2000

Fisheye menu

Single menus for long lists: iphone datepicker

Tree stuctured menus

Tree structured menus

Tree structured menus Bredd att föredra framför djup

Tree structured menus Bredd att föredra framför djup Djup: Tre nivåer (max fyra)

Tree structured menus Bredd att föredra framför djup Djup: Max tre nivåer Stor risk att användaren tappar orienteringen i menyer med stort djup

Riktlinjer för hur man organiserar menyer Gruppering Ordningsföljd Layout

Gruppering Create groups of logically similar items

Create groups of logically similar items Country > State > City

Gruppering Create groups of logically similar items Form groups that cover all possibilities

Form groups that cover all possibilities

Gruppering Create groups of logically similar items Form groups that cover all possibilities Make sure that items are nonoverlapping

Make sure that items are non-overlapping Entertainment Events?? Conserts

Make sure that items are nonoverlapping Entertainment Events Concerts Sports

Gruppering Create groups of logically similar items Form groups that cover all possibilities Make sure that items are nonoverlapping Use familiar terminology, but ensure that items are distinct from one another

Use familiar terminology, but ensure that items are distinct from one another Day och Night 6 A.M. to 6 P.M. och 6 P.M. to 6 A.M.

Ordningsföljd Vad göra när det inte finns en naturlig ordning? Gruppera relaterade objekt Alfabetisk ordning Mest använda objekten först Viktigaste objekten först

Ordningsföljd: relaterade objekt

Ordningsföljd: alfabetisk ordning

Ordningsföljd: adaptiva menyer

Adaptiva menyer De minst använda valen visas ej Klicka på pilen för att se dem Fungerar bra för en del användare Starkt ogillande hos vissa användare

Titlar Layout av menyer

Layout av menyer Namn på menyobjekt Använd känd terminologi Se till att namnen skiljer sig åt Använd koncisa namn Börja med nyckelord

Grafisk design Layout av menyer

Formulär och dialogrutor

Formulär Metafor: pappersformulär

Högerjustera titlar Formulär

Formulär Tillåt smidig navigering

Ge tydlig feedback Formulär

Visuell organisation Dialogrutor

Dialogrutor

Dialogrutor med tabbar

Dialogrutor med tabbar Ofta effektiv metod Kan bli svårt för användaren att navigera

Ö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: vad finns?

Översikt: vad finns? 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?

Navigering i ipad-tidning #1

Navigering i ipad-tidning #2

Felhantering

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 annars att något ej är reversibelt + man ska bara behöva ändra/reversera det som är fel) Överväg så kallade forcing functions

Kursboken Kap 8 Interaction devices

Interaction devices Keyboards and keypads Pointing devices Direct Indirect

Keyboards and keypads

The QWERTY layout

The 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

Profile of force displacement

Clickiness!

Pointing devices

Två kategorier Direct Indirect

Light pen

Light pen Relativt populär på 80-talet Intuitiv Problem med belastningsergonomi Omständig Ömtålig

Touchscreen Touch screen

Touch screen Intuitiv Robust Problem med belastningsergonomi Handen kan skymma Dålig precision Dålig taktil feedback

Touch screen Intuitiv Man interagerar direkt med informationen (direktmanipulation!)

Robust Touch screen

Touch screen Problem med belastningsergonomi

Touch screen Handen kan skymma

Dålig precision Touch screen

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

Lift-off strategy iphone

Touchscreen Dålig taktil feedback många föredrar ett fysiskt tangentbord

Touchscreen Olika typer av teknik Resistive Capacitive Surface acoustic-wave

Touchscreen Resistive touchscreens

Resistive touchscreens Billiga Går att peka med stylus, med handskar etc. Kan ge taktil feedback Låg känslighet Svårt implementera multitouch

Touchscreen Capacitive touchscreens

Capacitive touchscreens Högre känslighet Multi-touch Går ej att peka med stylus, handskar etc.

Direct pointing devices Stylus (pen-based interface)

Stylus (pen-based interface) Intuitiv Hög precision Omständig Mobila enheter kräver två händer

Mouse Indirect pointing devices

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

Trackball Indirect pointing devices

Så, vilket styrdon är bäst?

Det beror på......vem användaren är...vad användaren ska göra användningskontexten

Frågor?