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

  • MT er gjennomstnittstiden det tar å klikke på et mål.
  • a og b er konstanter man kan komme fram til gjennom empirisk utprøving.
  • A er avstanden fra startpunktet til midten av målet.
  • W er bredden av målet målt i bevegelsesrettningen til musepekeren.
  • c er en konstant som er enten 0, 0.5 eller 1 avhengig av konteksen.

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?

Stem denne posten nedStem denne posten opp (+10 rating, 3 votes)
Loading ... Loading ...

13 kommentarer


Teodor
18. juni 2007
kl. 22:07

Takk Gjermund for dagens “eye opener”
Her må jeg ta frem kalkulatoren og måle pixler :-)


Nils Evelt
19. juni 2007
kl. 08:32

Flott gjennomgang av Fitts’ lov. Dere kunne like godt brukt eksempler fra egen hjemmeside hva gjelder brudd på loven. Lenkelistene deres på toppen av netliferesearch.no er jo prima eksempler på denslags forbrytelse. Jeg ser frem til en fremtidig gjennomgang av Hick’s Law.


Christian Johansen
19. juni 2007
kl. 14:54

Veldig interessant! For de tekniske er dette ofte så enkelt som a:link { display: block; } i CSS. På Storebrand som du bruker som eksempel er det også noe Javascript for å ivareta fornuftig HTML samtidig som hele flaten er klikkbare (hele de store boksene er klikkbare).


KP
19. juni 2007
kl. 17:45

Meget bra artikkel. For de som er markedsførere så er det interessant å se at Google har fjernet muligheten til å klikke på selve webaddressen i en Google Adwords-annonse. Tidligere var hele tekstannonsen klikkbar, nå er det bare annonsetittelen som er klikkbar.

Sony Ericsson telefoner -– Nå er det bare tittelen som er klikkbar.
Mobiltelefon med abonnement
Enkel & rask bestilling.
Nettbutikk.telenor.no

Dermed betaler annonsøren mindre fordi færre mennesker klikker på annonsene. Annonsøren får flere kvalifiserte klikk fordi de som først klikker, de er i større grad interessert.


Gorm Gullo
29. november 2007
kl. 10:41

“a og b er kontanter man kan komme fram til gjennom epirisk utprøvninig”? Skulle det kanskje vært “konstanter” og “empirisk. Men ellers veldig interessant ;-)


Thor
29. november 2007
kl. 14:35

Takk for den Gorm – jeg har fikset dem :)


Gorm Gullo
29. november 2007
kl. 15:09

Ingen årsak. Da gjenstår bare “utprøvninig”.
Kall meg gjerne en pedant ;-)
Stemmer nok i hvert fall på noen områder.


Jørund
1. september 2008
kl. 18:00

Spennende lov dette. Nok en liten typo:
# A er avstanden fra startpunktet til midten av målet. is the distance from the starting point to the center of the target.
;)


Gjermund
2. september 2008
kl. 12:52

Nå er skrivefeilen rettet.

[...] Har du gjennomf�rt noen tester for � se hvor godt reklamen dine egentlig blir lagt merke til? Husk at man i l�pet av dagen for sendt veldig mye reklame mot seg, s� "Billig og proff webdesigner til tjeneste" blir kanskje ikke lagt s� bra merke til.. Spesielt ikke hvis det er "en god gammel kjenning" som er grodd inn i skallen p� de lokale bedriftslederene og andre potensielle kunder for deg. Du m� gj�re noe som skiller deg fra mengden. Jeg kan dessverre ikke komme p� noen konkrete ting, men det m� gj�res. Eventuelt m� du gi dem et tilbud dem ikke kan motst�. Selv om "Herr Hansen" som driver den lokale r�rleggerbedriften har lagt merke til reklamen din, s� betyr ikke det at han plutselig f�r lyst p� en ny nettside. Han har jo allerede en som ble laget i 1995, som inneholder all informasjonen han trenger � f� ut p� internett. Angrip han fra en annen vinkel. G� inn p� siden hans, finn ut hva som er d�rlig/feil med den, sett opp en liste over eventuelle forbedringer, og viktigst av alt, hvorfor disse forbedringene er bra for akkurat hans bedrift. Og husk, at du har validerende kode som kan leses p� wap er noe dem driter totalt i. Ogs� at sidene dine er vennlige mot svaksynte. Det er "gadgets" i deres �yne, og egentlig ikke s� viktig. Om du derimot kan sette opp et forslag som kan dra dem inn mer penger, s� snakker vi andre boller. Vis til eksempler hvor folk har �kt omsetningen sin gjennom � forbedre internett strategiene sine: - Komplett.no gikk opp 30% over natta da dem skiftet farge p� kj�psknappen sin. - �kt brukervennlighet p� siden = h�yere konvertering (kilde) - Hvordan en blogg kan �ke kontakten med kundene. Det finnes dr�ssevis av slike historier. - osv osv. N� skal det nevnes at du ogs� m� se ann bedriften. Sjansene er sm� for at en r�rlegger er interessert i en blogg, men kanskje det er andre firmaer som er avhengig av tilbakemeldinger fra forbrukerene sine? Eller kanskje en organisasjon? Det finnes ogs� de som allerede har mer enn nok av oppdrag � fylle dagen med, som rett og slett ikke trenger flere. Men disse vil kanskje allikevel ha en veldig fancy profil. Til slutt, om du s�ker kunder utenfor oppedal - Tilby deg � lage et (eller flere) gratis designer for nettsteder som enten er store eller har potensielle kunder. Det er for det f�rste et pluss for portfolioen og for det andre er det stor sjanse for at noen tenker "Jeg vil ha den som lagde det fine designet" n�r dem skal ha side selv. __________________ Brafilm / Brafilm.no com / Bra Film / DVD utleie p� nett [...]
[...] Gjermund sin grundige gjennomgang av Fitts’ lov - også kjent som “første bud for interaksjonsdesignere” [...]
[...] De er ofte vanskelige å navigere, fordi rullefeltene/scrollbars blir svært små, og vanskelig å treffe med musen, jamfør Fitts lov. Hvis man bruker piltastene på tastaturet er det ofte veldig tidskrevende å finne det riktige valget. [...]
[...] beskrivelse av hvor raskt brukeren vil kunne klikke og navigere seg frem. Vi har tidligere skrevet om Fitts lov som gir en utregning på hvor enkelt det er å f.eks. treffe et valg i en meny. Matt Queen har [...]

Gi oss din kommentar

eller