Fitts' lov – et enkelt prinsipp for bedre brukervennlighet 13

Av Gjermund Alsos, 17. juni 2007

Hva lønner seg?Tenk deg at jobben din var å sitte og klikke hele dagen ;-). Ville du tjent mest penger på å klikke på små lenker for 10 kroner eller store knapper for 5 (forutsatt at responstiden var den samme)?

De fleste føler kanskje på seg at det vil gå raskere å klikke på en stor knapp. Men vet du nøyaktig hvor mye? Fitts’ lov kan forutsi dette med matematisk presisjon.

Loven, som ble utformet av Paul Fitts og publisert i 1954, er intet mindre enn en gullgruve for folk som vil lage gode brukergrensesnitt. Brudd på Fitts’ lov er samtidig en av de vanligste forbrytelsene i grensesnittdesign, til tross for at det er en svært enkel regel å etterleve.

Skatteetaten har for eksempel valgt å utforme sine menyer som (tilsynelatende) store lenker som det er lett å treffe. Men faktum er at du må treffe tekstlenken med pinlig nøyaktighet, selv om hele bakgrunnen indikerer klikkbarhet når du fører musen over:

Skatteetaten'

På storebrand.no har vi plassert navigasjonen som store knapper som dekker det meste av innholdsfeltet. Fitt’s lov forutsier at brukere vil kunne navigere raskere i storebrands navigasjon enn i Skatteetaten sin:

Storebrand

Fitts’ lov sier at

– Jo lenger unna et mål er, jo lenger tid tar det å klikke på det med musepekeren.
– Jo mindre et mål er, jo lenger tid tar det å klikke på det.

Selv om dette kan virke banalt, har det vist seg at loven klarer å forutsi hvor raskt man kan operere et brukergrensesnitt overraskende nøyaktig. Fitts’ lov er derfor spesielt nyttig når man skal lage grensesnitt der effektivitet er viktig.

Her er noen flere eksempler på hvordan man kan utnytte Fitts’ lov for å forbedre brukervennligheten:

Viktigste lenker størst. I teorien kan man øke hastigheten i brukergrensesnittet både ved å plassere elementene tettere og ved å gjøre de større. Men fordi man sjelden vet på forhånd hvor musepekeren er, vil det oftes fungere best å lage viktige funksjoner større. Google har små tall for å velge sidene i søkeresultatet. Siden tallene har små trefflater er de vanskelig å treffe. Og fordi de er plassert så nær hverandre er risikoen for å klikke feil stor. Derfor har Google plassert større lenker på de vanligste funksjonene, nemlig å bla til neste eller forrige side.

Googles navigasjon i søkeresultat

Bruk bokser. Lenker har egentlig en form som er lite egnet for å klikke på. En lenkeliste som i eksempelet fra skatteeteaten har små trefflater i høyderetningen. Det gjør det vanskelig å treffe riktig lenke og enkelt å klikke feil:

Lenkeliste hos Skatteetaten

Løsningen kan være å lage større lenker og plassere de lenger fra hverandre, slik blant andre Flickr har gjort. Det er også et kjent triks å plassere lenkene i bokser for å få en større trefflate.

Lenkeliste hos Flickr

Utnytt kantene. Siden datamusen stanser når den treffer kanten på skjermen, er knapper plassert på kantene av skjermen like enkle å treffe som om de var forlenget uendelig langt utenfor skjermen. I samtlige Mac-operativsystemer er menyene plassert helt øverst, mens det i Windows 95 lå en bjelke som ikke var klikkbar rett under oppgavelinjen. Bruce Tognazini hevder dette gjorde Mac-menyene fem ganger raskere enn Windowsmenyene.

I føgle Jensen Harris sin blog har Microsoft forsøkt å utnytte Fitts lov bedre i Office 2007. Lagre og angreknappene er lagt helt øverst i skjermen slik at de skal bli lettere tilgjengelig med mus.

Den nye “Office knappen” har kommet som et forsøk på å utnytte hjørnene bedre. Forsøk å flytte musen raskt oppover mot venstre, og musepekeren ligger i venstre hjørne. Hjørnene er de punktene som er lettest tilgjengelig (nest etter det punktet som til en hver tid er under musepekeren). Det er litt merkelig at det ikke ser ut som Office-knappen strekker seg helt ut til hjørnet, men utviklerne i Microsoft mente at det ikke gjør noe siden de fleste feilklikk vil bli fanget opp.

office-2007.png

Under musen raskest. Hjørnene kalles ofte “magiske punkter” fordi de representerer uendelig store trefflater. Men det finnes et femte magisk punkt som også er lett tilgjengelig for brukerne til enhver tid, nemmelig punktet rett under musepekeren. Dersom brukerne skal tilbringe mye tid i et brukergrensesnitt kan pop-outmenyer som kommer opp ved f.eks. høyreklikk være en rask snarvei.

Forøvrig kan den matematiske formelen for Fitt’s lov uttrykkes slik:

Fitts lov

Det kan være litt komplisert å regne ut effektiviteten av et grensesnitt fordi det er flere empiriske konstanter som må måles på nytt i hvert enkelt grensesnitt. Er det noen som kjenner eksempler på at man har brukt formelen for å ta praktiske designbesluttninger, så tas de imot med takk.

Her kan du selv finne ut om dine klikkeferdigheter følger Fitts lov: http://www.tele-actor.net/fitts/.

Hvis du vil teste dine kunnskaper om Fitts lov kan du ta Bruce Tognazzinis Quiz Designed to Give You Fitts.

Har dere sett noen eksempler på god eller dårlig bruk av Fitt’s lov?

Mest lest

Tid for ømhet

Av Eirik Hafver Rønjum

Det hjelper lite med kurs og kompetanse hvis vi ikke har tid. Juristen skriver dårlig, vi sender ham på skrivekurs. Saksbehandlerne eier ikke språkøre, vi arrangerer et kurs i nettskriving. [...]

  1. Ett år og fortsatt grønnskollinger
  2. Prototyping i Xcode
  3. Slik jobber du strategisk med innhold
  4. Denne våren skal du kle deg i responsiv design

Sist kommentert

Bruk nettstedsøket til å forbedre innholdet ditt

Av Audun Rundberg

Lou Rosenfelds syv tips til hvordan du kan forbedre innholdet ved hjelp av nettstedsøket.

  1. Slik jobber du strategisk med innhold 2
  2. Effektiv bruk av brukarprofilar 6
  3. Prototyping i Xcode 1
  4. Slik jobber vi i Netlife 2