Hva webutvikling kan lære av
HCI og brukersentrert design
Human-computer interaction er et forskningsfelt, men prinsippene er dagligdagse. Her er fem av dem — og hva de betyr for nettsider som faktisk fungerer.
Bakgrunn
HCI er ikke akademisk.
Det er designet vi møter hver dag.
Human-computer interaction (HCI) er studiet av hvordan mennesker interagerer med datamaskiner — og hva som gjør den interaksjonen effektiv, behagelig og forståelig. Det er et felt som strekker seg tilbake til 1960-tallet, men prinsippene er mer relevante enn noensinne i en verden der alle bærer en datamaskin i lommen.
Mange av de mest grunnleggende lovene og prinsippene innen HCI ble formulert lenge før internett eksisterte — men de beskriver menneskelig atferd, ikke teknologi, og menneskelig atferd endrer seg saktere enn teknologien.
Disse prinsippene bør ikke ligge på et akademisk pensum. De bør ligge til grunn for hvordan vi designer nettsider.
Fem prinsipper
Fra teori til praktisk nettside
Fitt's Law
Paul Fitts, 1954
Tid til å nå et mål avhenger av avstand til og størrelse på målet.
I webutvikling
Klikkmål må være store nok til å treffe — spesielt på mobil. En "Send"-knapp på 32×20px er for liten. En lenke på én bokstav er verste praksis. Primærhandlinger bør ha stor klikkbar flate og stå nær der brukerens fokus allerede er.
Eksempel
Callout-knapp i hero: stor, tydelig, sentralt plassert. Ikke et lite tekstlenke i hjørnet.
Hick's Law
William Edmund Hick, 1952
Beslutningens tid øker logaritmisk med antall valg.
I webutvikling
Jo flere valg du gir besøkende, jo lenger tid tar det å beslutte — og jo større sjansen for at de ikke bestemmer seg i det hele tatt. Navigasjonsmeny med 10 punkter er dårligere enn en med 5. En forside med tre CTAer konkurrerer mot seg selv.
Eksempel
Én tydelig primær-CTA per side, maksimalt én sekundær. Resten er støy.
Kognitiv belastning
John Sweller, 1988
Arbeidsminnet er begrenset. For mye informasjon på en gang reduserer forståelse.
I webutvikling
Sider med for mye tekst, for mange elementer eller for kompleks layout tvinger besøkende til å bruke energi på å tolke siden — ikke på innholdet. Progressive disclosure (vis det viktigste først, detaljer etterpå) og god white space er direkte svar på dette.
Eksempel
Forsidetekst på tre setninger er sterkere enn tre avsnitt. Bruk underside for detaljer.
Mentale modeller
Kenneth Craik, 1943
Brukere forventer at systemer oppfører seg slik de allerede forstår verden.
I webutvikling
Brukere har forventninger til navigasjon, form-felt og knappeplassering basert på alt de har brukt før. Logo øverst til venstre som lenker tilbake til forsiden. Søk øverst til høyre. Kontakt i footeren. Å bryte disse mønstrene krever en god grunn.
Eksempel
Kreativ navigasjon som er unik kan virke forvirrende. Konvensjon er tillit.
Affordances
James Gibson / Don Norman
Et objekts utseende bør formidle hvordan det brukes.
I webutvikling
Knapper bør se ut som knapper — med litt volum, tydelig ramme eller farge som skiller dem fra omgivelsene. Lenker bør se ut som lenker. Om brukere ikke forstår at noe er klikkbart, klikker de ikke.
Eksempel
En flat tekst med samme farge som brødtekst fungerer ikke som CTA, selv om det teknisk er en lenke.
I praksis
Brukersentrert design som arbeidsmetode
Forstå brukeren
Hvem besøker siden, hva er de ute etter, og hva er konteksten de er i? En mobil bruker på vei til møte har andre behov enn en desktop-bruker som sitter i ro.
Definer oppgavene
Hva er de primære oppgavene besøkende prøver å utføre? Design for disse — ikke for hva bedriften ønsker å fortelle.
Reduser friksjon
Finn og eliminer unødvendige steg, uklare signaler og forvirrende layout. Hvert ekstra klikk, scroll og lesesteg er friksjon som reduserer konvertering.
Test med ekte mennesker
Utviklerens forståelse av en side er aldri brukerens forståelse. Enkle brukertest-øvelser — selv med én til to testpersoner — avslører problemer ingen hadde forestilt seg.
Oppsummert
En nettside som «fungerer» er ikke tilfeldig
De nettsidene som konverterer godt, holder besøkende lenge og gir en god brukeropplevelse, gjør det ikke ved tilfeldighet. De er designet med disse prinsippene — bevisst eller intuitivt — innebygd i hvert valg.
Det er forskjellen på en nettside som ser bra ut i en preview, og en nettside som faktisk gjør jobben den er ment å gjøre.
Vi bygger med dette i bakhodet
Design som fungerer for brukeren, fungerer for deg
Ta kontakt for å snakke om hvordan vi kan bygge noe som faktisk konverterer.