Paal Holter

Hvordan designe vellykkede touch-grensesnitt (2/3)

Kritiske systemer og applikasjoner 2 kommentarer

ButtonsI forrige innlegg skrev jeg om når det er fornuftig å bruke touch. Denne gangen går jeg rett på sak med designtips.

Tips for å kompensere for mangel på haptisk respons

Fysiske knapper og kontroller kan man ta og føle på uten at man aktiverer noen ting. I tillegg gir slike instrumenter ofte tydelig fysisk tilbakemelding ved aktivering, for eksempel ved trykk og slipp av en knapp. Dette gir brukeren en trygg og intuitiv bevissthet rundt både tilstedeværelse og respons fra interaksjonspunktene.

En av de største utfordringene med touch-grensesnitt er mangelen på haptisk respons. Foreløpig finnes det ingen metoder som erstatter denne egenskapen, men man kan gjøre noen grep for å kompensere:

  1. Tydelig visuell kommunikasjon
    Bruk grafiske virkemidler bevisst for å oppnå forutsigbarhet og kvitteringseffekter. Husk alle tilstander: før trykk, ved trykk, ved slipp, etter trykk og eventuelt prosessindikasjon.
  2. Vurder audio-tilbakemeldinger
    Lyd kan være et godt virkemiddel for å kvittere handlinger. Med ”lyddesign” kan man også underbygge eventuelt positive eller negative effekter av handlingen. Vær obs på at lyd kan være plagsomt for både brukeren og miljøet – som regel bør det være mulig å skru den av.
  3. Vurder mekaniske tilbakemeldinger
    Den vanligste formen for mekanisk tilbakemelding er vibrasjon, som mange har opplevd på mobiltelefonen. Dette kan også gi en god kvitteringsopplevelse, og er særlig nyttig når høy lyd bør unngås.
  4. Motvirk utilsiktet aktivering
    Utilsiktede klikk er vanligere på touch-skjermer enn med fysiske knapper, siden det ikke er noen mekanisk motstand ved trykk. Det er to hovedprinsipper for å unngå dette:
    (a) Unngå enkelttrykkstilgang til viktige direktefunksjoner, og erstatt med kombinasjonsklikk, trykk-og-hold, eller ”gestures” som slide og lignende.
    (b) Bruk bekreftelsesdialoger, slik at brukeren får en mulighet til å angre
  5. Vurder alternativer til multi-klikk
    Standard dobbelt-klikk overføres ofte ikke særlig bra til touch. Igjen kan det være fornuftig å utforske alternativer som kombinasjonsklikk, trykk-og-hold eller ”gestures”.

Her er en utmerket oversikt over gode ”gesture”-konvensjoner.

Slide button HTC
Slide-knapp fra HTC Touch Diamond

Tips for å overleve uten cursor

Mange usability-konvensjoner er koblet med å ha en cursor (eller “peker”, som det vel heter på norsk). Første tips angående dette: Skru pekeren av! På en touch-skjerm representerer pekeren kun siste interaksjonspunkt, som gir brukeren feil fokus og dessuten indikerer at det finnes en mus et sted.

Nå som pekeren er borte, må vi gjøre noen design-grep:

  1. Kommuniser touch
    Brukeren bør på utseende forstå at skjermen er touch-sensitiv – i hvert fall hvis produktet ikke er personlig (for eksempel automater i offentlige rom).  Typisk simuleres 3d og taktilitet med grafiske effekter, slik at man ”får lyst” til å trykke på skjermen.
  2. Visualiser interaksjonspunktene
    Ofte brukes pekeren til å indikere interaksjon i kontekst, for eksempel endrer den seg fra en pil til en finger eller side-til-side pil når man kan trekke i elementene under pekeren. Fordi dette ikke er tilgjengelig på touch, må tilsvarende muligheter for interaksjon indikeres direkte i grafikken.
  3. Lag selvforklarende ”labels”
    Tool-tip og info-tip er ikke tilgjengelig. Dermed bør ikoner og forkortelser som står alene begrenses til det mest åpenbare.
  4. Visualiser at systemet ”tenker”
    Vanligvis endrer pekeren seg til timeglass eller annet tenke-symbol når systemet prosesserer. Dette må nå vises på ny måte i skjermen. Du kan for eksempel vise det på den relevante knappen eller i et dedikert statusfelt. Hvis annen interaksjon er blokkert mens man venter, kan det være greit å bruke en modal dialog

Tips for å tilrettelegge for pølsefingre

“Pølsefinger” er et begrep som brukes for å illustrere fenomenet der en tykk og rund finger møter en hard flate for å gjøre en nålepresis operasjon. Med mindre du designer for et nisjemarked med spesialiserte brukere eller anatomiske særegenheter, må du ta stilling til pølsefingerproblemstillingen.

  1. Design store knapper
    Jo større, jo bedre. Knapper på ca 2x2cm kan regnes som minimum for komfortabel operasjon. Men dette varierer avhengig av størrelse på skjerm, nøyaktighet på kalibrering, ergonomi i forhold til arbeidsstilling, individuelle ferdigheter og fingeranatomi.Hvis skjermen ikke tillater nok plass til store knapper; forminsk de knappene som gir minst kritisk konsekvens av feiltrykk. Vurder eventuelt å plassere forminskede knapper langt skjermkanten, hvis det kan gi en ergonomisk fordel.
  2. Visualiser treff-flatene
    Kravet til presisjon bestemmes ikke egentlig av den synlige knappen, men av det som er definert som trefflate. Teoretisk kan en knapp se liten ut grafisk, selv om et stort område rundt knappen regnes som gyldig for trykk. Det blir imidlertid mer forutsigbart for brukeren, dersom så mye av trefflaten som mulig er visuelt kommunisert – særlig hvis interaksjonspunktene står relativt nærme hverandre.  
  3. Inkluder mellomrom
    Hvis det er lite plass, kan det være nødvendig å stable knapper tett sammen. Hvis man likevel klarer å inkludere litt plass mellom knappene (både den synlige delen og den definerte trefflaten), minker faren for feiltrykk.
  4. Unngå interaksjon med høye presisjonskrav
    Små trefflater og finmotoriske bevegelser er krevende. Hvis man ikke kommer utenom, kan man eventuelt vurdere å forstørre temporært de aktuelle delene av grensesnittet.

Da er det bare å skyte løs, hvis noen har flere ideer eller innsigelser! Siste del av innlegget kommer innen en uke.

Hvordan designe vellykkede touch-grensesnitt 1/3  

Hvordan designe vellykkede touch-grensesnitt 3/3