Interaktionsdesign för touchskärm

Johan Berndtsson

Att designa för touchskärm (pekskärm) bjuder på lite annorlunda förutsättningar. Då in- och utmatning sker i samma enhet skalas en abstraktionsnivå bort, användaren kan agera direkt på objekt och behöver inte bekymra sig om vad systemet fokuserar på för tillfället. Eftersom alla tillgängliga alternativ måste visas på skärmen kan den kognitiva arbetsbelastningen minskas och inlärningstider hållas nere.

Windowsmultitouch_2Det är dock stor skillnad på att designa för en mobiltelefon som ska kunna användas då man går nerför gatan en sommarsdag och en bred skärm i ett nedsläckt kontrollrum. Betraktningsvinkel, avstånd till ansikte, placering, höjd, belysning, rörlighet och övrigt möblemang kan spela stor roll och måste vägas in i lösningen.

Flera myndigheter arbetar med att sammanställa riktinjer för olika inmatningsenheter. Bland annat har Federal Aviation Administration, Eurocontrol och Nuclear Regulatory Commision (känt från The Simpsons) gett ut egna riktlinjer för design av interaktiva system. Även om de sällan står i direkt konflikt med varandra har de ofta olika utgångslägen och fokus. Detta är ett försök att sammanfatta vad de säger om klickbara ytor:

Vill man göra det enkelt för sig kan man göra alla knappar 26x26mm, vilket är optimal storlek med avseende på effektivitet och antal felklick. Klickbara ytor bör inte vara större än 38mm på något håll. De kan dock minskas till 22mm utan precisionsförlust om man optimerar träffytan. Detta görs genom att väga samman lutning, avstånd och betraktningsvinkel på skärmen. Testa själv att klicka på skrivbordet på armlängds avstånd, man träffar ofta lite under målet men helt rätt i sidled. En simpel optimering kan således innebära att de klickbara ytorna görs 26mm höga och 22mm breda, eventuellt med viss förskjutning mellan det grafiska objektet i förhållande till den klickbara ytan.

Det döda avståndet mellan klickbara ytor ska vara minst 3mm och högst 6mm. Därmed inte sagt att ytorna måste ha visuella spalter mellan sig, relaterade knappar kan mycket väl sitta ihop för att minska den upplevda mängden objekt på skärmen och underlätta gruppering. Maxavståndet gäller naturligtvis knappar inom samma grupp eller med uppenbart relaterad funktionalitet.

Själva klicken kan registreras vid olika tillfällen. Land-on innebär att det objekt fingret träffar först kommer väljas, men bara under förutsättning att fingret lyfts från samma objekt. Det innebär att felklick kan korrigeras genom att släppa utanför det markerade objektet. Vid First-contact registreras klicket så fort fingret rör vid en klickbar yta. Om användaren klickar utanför klickbara ytor och sedan drar till en klickbar kommer det registreras och utföras. Felklick kan inte korrigeras. Take-off innebär att klick registreras där fingret lyfts. Felklick kan endast korrigeras om användaren släpper på en icke-klickbar yta.

First-contact har visat sig vara den effektivaste strategin och land-on den mest precisa. Take off är oftast att föredra då de klickbara ytorna är mycket små, till exempel på en mobiltelefon.

Oavsett vilken klickstrategi man väljer är feedback viktigt, och vid land-on och take-off bör även feed-forward visas - frågan "vad kommer hända när jag släpper" måste alltid besvaras. Eftersom den klickbara ytan helt eller delvis täcks av fingret bör visuell återkoppling kombineras med auditiv. Återkoppling bör ges vid landning för att visa att trycket registrerats samt vilket alternativ som markerats. Likaså bör kontakt utan genomfört klick ge feedback för att tydliggöra att inget kommer hända eller att användaren lyckades ångra valet. Auditiv återkoppling måste inte ges då fingret släpper ytan vid faktiskt klick, under förutsättning att både nedslag och felaktiga eller ångrade klick ger feedback.

Layout av klickbara objekt bör utöver de sedvanliga gestaltprinciperna ta särskild hänsyn till användningsfrekvens och potentiella konsekvenser av felklick. Återkommande handlingar måste ligga nära till hands, alltså i nederkant och mot den sida av skärmen användaren förväntas sitta. Presicionen i rakt utsträckt arm är sämre än i en arm som vilar mot skrivbordet.

Rundade hörn är sällsynt välmotiverat för touchskärmar. Rutnät av knappar med lika stora döda spalter skapar annars oönskade och irriterande mönstereffekter. Övriga grafiska aspekter innefattar bland annat färg- och kontrastanpassning till ljusförhållanden och betraktningsvinkel, visuell återkoppling som syns även då fingret döljer knappen och upplevelse av vilka ytor som är klickbara till skillnad från enbart informationsbärande.

Det är svårt att hitta riktlinjer för tillgänglighetsanpassning av touchskärmar. Det bör påpekas att principerna ovan inte tar hänsyn till personer med nedsättningar i syn eller motorisk förmåga.

Mer information kan fås från:

/Peter Erhard

Lämna en kommentar

3 kommentarer

  • Robert Folkesson

    Jag kan verkligen rekommendera det här seminariet från MIX08-konferensen, där Daniel Makoski, chef för interaktionsdesign-teamet som ansvarade för MS Surface, bla berättar om hur de prototypade Surface och arbetade med gest-baserad modeller för interaktionsdesign: http://sessions.visitmix.com/?selectedSearch=UX08 mvh Robert

  • Peter Erhard

    Robert, tack för tipset men länken fungerar inte för mig. Verkar intressant!

  • Fem saker att tänka på när du designar för skärmar

    [...] Är det en pekskärm? Då tillkommer hel del, läs mitt gamla inlägg om det här. [...]