Visuelt hierarki: få folk til å lese i riktig rekkefølge

Visuelt hierarki er rekkefølgen folk legger merke til og leser delene av et design i. Du styrer det med fem verktøy: størrelse, vekt, farge og kontrast, plassering og luft. Et tydelig hierarki har én ting som ses først, noen få ting som ses deretter, og detaljer som bare blir funnet når noen leter etter dem. Uten det konkurrerer alt, og folk leser ingenting.

De fem verktøyene i visuelt hierarki

Hvert verktøy virker på samme måte: det gjør ett element ulikt naboene. Jo større forskjell, desto tidligere ses elementet. Bruker du flere verktøy på samme element, styrker du det. Bruker du dem på ulike elementer, begynner de å konkurrere.

Bestem rekkefølgen før du designer

Hierarkiproblemer er som regel beslutningsproblemer. Har du ikke bestemt hva som betyr mest, kan ikke designet vise det. Ranger innholdet før du åpner et designverktøy.

1. 1

   List opp alt

   Hver tekstbit og hvert bilde designet må romme.

2. 2

   Velg den ene tingen

   Hvis folk bare husker ett element, hvilket skal det være? Det er nivå én.

3. 3

   Grupper støttefakta

   De to til fire tingene folk trenger deretter, som en dato, et sted eller en kort forklaring. Det er nivå to.

4. 4

   Alt annet er detaljer

   Brukernavn, liten skrift, logoer. Det er nivå tre, lite og stille.

5. 5

   Kutt det som ikke passer inn

   Finner ikke noe et nivå, hører det sannsynligvis hjemme i bildeteksten eller på neste lysbilde.

Størrelse og vekt

Størrelse er det sterkeste verktøyet, og det letteste å bruke feil ved å være for forsiktig. Er en overskrift bare litt større enn teksten under, ser de to ut som en feil og ikke som et hierarki. Gjør trinnene mellom nivåene tydelige. En skriftskala, som beskrevet i grunnleggende typografi, holder dem konsekvente.

Farge og kontrast

Øyet går først til det som skiller seg mest fra omgivelsene. En liten flekk med sterk farge på et mørkt, stille design slår et større element i en dempet tone. Det gjør aksentfargen til et budsjett: bruk den på den ene tingen som skal lede, eller på handlingen du vil at folk skal utføre, og ingen andre steder.

Å senke kontrasten er måten du skyver ting bakover på uten å krympe dem: en mykere tekstfarge i bildetekster og etiketter holder dem lesbare, men bak overskriften. Hold selv den stilleste teksten over minstekravene i fargekontrast. 60-30-10-regelen er en annen måte å tenke på hvor mye av hver farge du bør bruke.

Plassering og leseretning

På språk som leses fra venstre mot høyre, pleier folk å starte øverst til venstre og bevege seg mot høyre og nedover, så elementer som står der, ses tidlig. På språk som leses fra høyre mot venstre, bytter starthjørnet side. Midtstilte, symmetriske oppsett starter i midten og jobber seg utover, noe som passer til korte design med ett budskap, som plakater, sitater og kunngjøringer.

Plasseringen kan også jobbe mot deg. I sosiale formater dekker plattformens kontroller deler av bildet, og på miniatyrbilder ligger et merke i hjørnet. Hold det første elementet unna de områdene. Design av YouTube-miniatyrbilder viser hvordan.

Luft

Luft gjør to jobber. Rundt ett enkelt element isolerer den det, og isolasjon leses som viktighet: én linje med rause marger kan rangere over en mye større tekstblokk. Mellom elementer grupperer den dem: ting som står tett, leses som om de hører sammen. Legg dato og sted nær hverandre og lenger fra overskriften, så leser folk dem som én enhet med detaljer.

Det samme innholdet kan bære ulike hierarkier. Hvilket du velger, avhenger av hva du vil at folk skal huske: ideen eller tallet.

Slik tester du visuelt hierarki

• Mysetesten. Lukk øynene halvveis eller gjør designet uskarpt. Formen som fortsatt skiller seg ut, er ditt egentlige nivå én. Er det ikke den du valgte, justerer du.
• Tosekunderstesten. Vis designet til noen i to sekunder, og spør så hva det sa. De skal gjenta nivå én.
• Miniatyrtesten. Krymp det til størrelsen det får på en mobil. Nivå to og tre kan forsvinne, og det er greit. Nivå én må ikke gjøre det.
• Gråtonetesten. Fjern fargen. Kollapser hierarkiet, hvilte det på fargetone og ikke på lyshetskontrast.

Hierarki blir vanskeligere når bakgrunnen er urolig eller fargerik, fordi kontrasten endrer seg under ordene. Tekst på gradient dekker hvordan du holder nivå én lesbart uansett hvor det står. For kunngjøringer, der hierarki betyr mest, se hvordan du designer et kunngjøringsinnlegg.