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

[Canonical HTML page](https://gradiently.design/nb/guide/visual-hierarchy)

Hvert design leses i en eller annen rekkefølge. Velger ikke du den, gjør det mest høylytte elementet det. Slik bestemmer du hva som kommer først, deretter og til slutt, og får det til å skje.

## The short version

- Visuelt hierarki er rekkefølgen folk legger merke til og leser delene av et design i.
- Hierarki styres med fem verktøy: størrelse, vekt, farge og kontrast, plassering og luft.
- De fleste design trenger ikke mer enn tre nivåer: én ting som ses først, noen få ting som ses deretter, og detaljer til slutt.
- Elementet med mest kontrast mot omgivelsene ses som regel først, uansett størrelse, så aksentfarger bør brukes på én ting.
- Mysetesten, der du gjør synet uskarpt til bare former står igjen, viser med ett blikk hvilket element som faktisk leder.

**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.

| Verktøy | Hvordan det gir vekt | Eksempel |
| --- | --- | --- |
| Størrelse | Større ses tidligere | En overskrift dobbelt så stor som teksten rundt |
| Vekt | Kraftigere streker skiller seg ut | En dato i fet i en linje med vanlig tekst |
| Farge og kontrast | Den mest avvikende fargen vinner | Én gullaksent på et mørkt, stille design |
| Plassering | Toppen og starten av leseretningen kommer først | Overskriften øverst til venstre |
| Luft | Isolerte elementer trekker til seg øyet | En enkelt linje med brede marger rundt |

De fem verktøyene. De fleste sterke design bruker to eller tre av dem på det samme hovedelementet.

## 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. **List opp alt** Hver tekstbit og hvert bilde designet må romme.
2. **Velg den ene tingen** Hvis folk bare husker ett element, hvilket skal det være? Det er nivå én.
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. **Alt annet er detaljer** Brukernavn, liten skrift, logoer. Det er nivå tre, lite og stille.
5. **Kutt det som ikke passer inn** Finner ikke noe et nivå, hører det sannsynligvis hjemme i bildeteksten eller på neste lysbilde.

Et stående arrangementsinnlegg med Lanseringskveld som stor overskrift, datoen over og tre korte detaljlinjer under

Tre nivåer: navnet på arrangementet først, så datoen over og detaljene under, hvert et tydelig trinn mindre.

## 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](https://gradiently.design/nb/guide/typography-basics), holder dem konsekvente.

### Flatt hierarki

- Overskrift knapt større enn brødteksten
- Alt i fet, så ingenting er det
- Fire ulike størrelser som er nesten like
- To overskrifter med lik vekt

### Tydelig hierarki

- Overskrift minst omtrent dobbelt så stor som brødteksten
- Fet spart til de få ordene som må lede
- Tre størrelser med tydelige trinn mellom
- Én overskrift, én støttelinje

## 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.

- Grunn: #0f1222
- Primær tekstfarge: #f5f3ee
- Sekundær tekstfarge: #a7a9be
- Aksent, brukt én gang: #ffb454

En palett med innebygd hierarki. Den primære tekstfargen har mest kontrast mot grunnen (omtrent 16,8:1), den sekundære merkbart mindre (omtrent 8:1, fortsatt svært lesbar), og aksenten er reservert for ett enkelt element.

Å 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](https://gradiently.design/nb/guide/color-contrast-accessibility). [60-30-10-regelen](https://gradiently.design/nb/guide/60-30-10-rule) 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](https://gradiently.design/nb/guide/youtube-thumbnail-design) 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.

Et stående innlegg med en overskrift som kunngjør tolv verksteder, og en støttelinje

Ordene leder: overskriften bærer nyheten, og detaljen støtter den.

Et stående innlegg med et stort tall 12 og ordene verksteder i høst

Et tall leder: det samme innholdet, rangert på nytt så tallet ses først.

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](https://gradiently.design/nb/guide/text-on-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](https://gradiently.design/nb/guide/announcement-post-design).

## FAQ

### Hva er visuelt hierarki?

Visuelt hierarki er rekkefølgen folk legger merke til og leser delene av et design i, styrt med størrelse, vekt, farge og kontrast, plassering og luft.

### Hvor mange hierarkinivåer bør et design ha?

Som regel tre: ett element som ses først, noen få støtteelementer deretter, og detaljer til slutt.

### Hva er mysetesten?

Lukk øynene halvveis eller gjør designet uskarpt til bare former står igjen. Det som fortsatt skiller seg ut, er det folk legger merke til først.

### Er størrelse den eneste måten å skape hierarki på?

Nei. Vekt, kontrast, farge, plassering og luft gir alle vekt, og et lite element i en sterk aksentfarge kan rangere over et større og dempet.