Systematisk metode for rask skanning av ikoner

Det finnes mange forskjellige matematiske verktøy som kan gi en svært så nøyaktig 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 skrevet en bloggpost om hvordan vi tolker ikoner, hvor han beskriver hvordan øynene på to forskjellige måter skiller mellom bilder på skjermen. Kort oppsummert: den ene går på fargetolkning, og den andre på formen på objektet, slik som på bildet under:

I kombinasjon med Fitts lov gir dette svært mye informasjon: Fitts lov gir en indikasjon på størrelse av, og distanse mellom valgene, mens metoden til Matt Queen indikerer om formen og fargen (og dermed gjenkjenneligheten) er god.

Dette prinsippet er jo velkjent blant grafiske designere: lag enkle former som er gjenkjennelige, så husker forbrukerne det bedre. Hvilke av disse to logoene tror du forbrukeren vil huske best?

I bloggposten kan man lese følgende:

The magnocellular pathway (M pathway, or “big neurons”) contains channels sensitive to gross shape, luminance, and motion. The parvocellular pathway (P pathway—”small neurons”) contains channels sensitive to color and detailed shape (Nicholls et al, 1992). In order to discriminate between two different visual signals—icons, in our case—the signals encoded in available channels must differ beyond some threshold.

Og videre

Users only see roughly 1.5 degrees of visual angle in sharp focus (roughly the size of your thumb nail held at arms distance); the rest of the image is processed in the M pathway and at lower spatial frequencies. At each fixation point, most of the icons in a UI fall outside of 1.5 degrees.

Når man designer ikoner, så skal man altså tenke seg at det finnes to måter å skille ut et ikon på, enten en sterk eller unik form, eller ved å velge en farge som skiller seg ut. Når brukerne skanner ikoner, så bør det skilles spesifikt ut på en av “kanalene”. Jo mer unik form, jo raskere kan ikonene skannes.
Først, la oss installere et verktøy for å finne ut den såkalte “M” pathway, la oss kalle det “M-sti” på norsk. Vær obs på at dette ikke er det samme som å “sløre” (engelsk: “blur”) bildet. Et sløret bilde vil se slik ut:

Installere verktøyet:

1. Last ned RGui for Windows (29 Mb) Mac (61 Mb) eller Linux. Installer dette verktøyet på maskinen.
2. Last ned dette lille programmet og lagre det et sted der du enkelt finner det igjen! Husk å lagre filen som form_og_kontrast.r (og ikke som en normal tekstfil).
3. Kopier denne teksten:

skript < - file.choose();source(skript);

4. Start "RGUI"-verktøyet og lim så den kopierte teksten fra over inn i vinduet og trykk Enter-tasten, slik:

5. Velg programmet du lastet ned i steg 2 i filvinduet.
6. Du vil nå få opp enda et fil-vindu, og her skal du velge et bilde i JPG-format.
7. Programmet er kodet for ikoner 48x48 pixler, med ca. 60 cm i avstand fra skjermen. For andre typer ikoner, må man endre radiusen som finnes i tabellen nederst i artikkelen.

Eksempler

La oss prøve oss på et par eksempler:

Eksempel 1: Vær-ikoner på yr.no

Her ser du at "M-stien" for regnskyen er svært markant i forhold til solen. Hvis du derimot ser på bildet til venstre så ser bildene nesten like "kraftige" ut. I tillegg har den nederste skyen farge som gjør at det skiller seg godt ut.

Eksempel 2: Kontrollpanelet i Windows

De 4 ikonene i venstre, øverste hjørne fremstår som svært like i formen, mens ikonene nederst fremstår som mer unike i formen.

Gå mer i detalj om temaet på boxesandarrows.com

Les om hvordan du skal designe for fargeblinde.