# Visuell hierarki: få folk att läsa i rätt ordning

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

Varje design läses i någon ordning. Om du inte väljer den gör det mest högljudda elementet det. Så bestämmer du vad som kommer först, tvåa och trea, och får det att hända.

## The short version

- Visuell hierarki är den ordning i vilken folk lägger märke till och läser delarna i en design.
- Hierarki styrs med fem verktyg: storlek, vikt, färg och kontrast, placering samt luft.
- De flesta designer behöver högst tre nivåer: en sak som ses först, några saker som kommer därefter och detaljer sist.
- Elementet med mest kontrast mot omgivningen ses oftast först, oavsett storlek, så accentfärger bör läggas på en enda sak.
- Ögonkisartestet, att sudda ut blicken tills bara former återstår, visar direkt vilket element som verkligen leder.

**Visuell hierarki** är den ordning i vilken folk lägger märke till och läser delarna i en design. Du styr den med fem verktyg: **storlek**, **vikt**, **färg och kontrast**, **placering** och **luft**. En tydlig hierarki har en sak som ses först, några saker som ses därefter och detaljer som bara hittas när någon letar efter dem. Utan den konkurrerar allt och ingen läser något.

## De fem verktygen för visuell hierarki

Varje verktyg fungerar på samma sätt: det gör ett element annorlunda än sina grannar. Ju större skillnad, desto tidigare ses elementet. Använder du flera verktyg på samma element stärks det, använder du dem på olika element börjar de konkurrera.

| Verktyg | Så skapar det betoning | Exempel |
| --- | --- | --- |
| Storlek | Större ses tidigare | En rubrik dubbelt så stor som texten omkring |
| Vikt | Tyngre linjer sticker ut | Ett fetstilt datum i en rad vanlig text |
| Färg och kontrast | Den mest avvikande färgen vinner | En guldaccent i en mörk, stillsam design |
| Placering | Överst och i läsriktningens början kommer först | Rubriken uppe till vänster |
| Luft | Isolerade element drar blicken till sig | En enda rad med breda marginaler runt |

De fem verktygen. De flesta starka designer använder två eller tre av dem på samma primära element.

## Bestäm ordningen innan du designar

Hierarkiproblem är oftast beslutsproblem. Om du inte har bestämt vad som är viktigast kan designen inte visa det. Innan du öppnar ett designverktyg rangordnar du innehållet.

1. **Lista allt** Varje text och varje bild som designen ska rymma.
2. **Välj den ena saken** Om folk bara minns ett element, vilket ska det vara? Det är nivå ett.
3. **Gruppera de stödjande fakta** De två till fyra saker folk behöver härnäst, till exempel ett datum, en plats eller en kort förklaring. Det är nivå två.
4. **Allt annat är detaljer** Användarnamn, finstilt, logotyper. Det är nivå tre, litet och stilla.
5. **Stryk det som inte får plats** Om något inte hittar en nivå hör det förmodligen hemma i bildtexten eller nästa bild.

Ett stående eventinlägg med Lanseringskväll som stor rubrik, datumet ovanför och tre korta detaljrader nedanför

Tre nivåer: eventets namn först, sedan datumet ovanför och detaljerna nedanför, var och en ett tydligt steg mindre.

## Storlek och vikt

Storlek är det starkaste verktyget, och det är lättast att göra fel med genom att vara försiktig. Om en rubrik bara är lite större än texten under ser de två ut som ett misstag snarare än en hierarki. Gör stegen mellan nivåerna tydliga, och en typskala, som beskrivs i [typografins grunder](https://gradiently.design/sv/guide/typography-basics), håller dem konsekventa.

### Platt hierarki

- Rubriken knappt större än brödtexten
- Allt är fetstilt, så ingenting är det
- Fyra olika storlekar som nästan är likadana
- Två rubriker med lika stor tyngd

### Tydlig hierarki

- Rubriken minst ungefär dubbelt så stor som brödtexten
- Fetstil sparas till de få ord som måste leda
- Tre storlekar med tydliga steg emellan
- En rubrik, en stödjande rad

## Färg och kontrast

Ögat går först till det som avviker mest från omgivningen. En liten fläck ljus färg i en mörk, stillsam design slår ett större element i dämpad ton. Det gör accentfärgen till en budget: lägg den på den enda saken som ska leda, eller på handlingen du vill att folk ska utföra, och ingen annanstans.

- Botten: #0f1222
- Primär text: #f5f3ee
- Sekundär text: #a7a9be
- Accent, används en gång: #ffb454

En palett med hierarki inbyggd. Primär text har mest kontrast mot botten (cirka 16,8:1), sekundär text märkbart mindre (cirka 8:1, fortfarande mycket läsbar), och accenten är reserverad för ett enda element.

Att sänka kontrasten är hur du skjuter saker bakåt utan att göra dem mindre: en mjukare textfärg för bildtexter och etiketter håller dem läsbara men bakom rubriken. Håll även den stillsammaste texten över minimivärdena i [färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility). [60-30-10-regeln](https://gradiently.design/sv/guide/60-30-10-rule) är ett annat sätt att tänka på hur mycket du ska använda av varje färg.

## Placering och läsriktning

På språk som läses från vänster till höger börjar folk oftast uppe till vänster och rör sig åt höger och neråt, så element placerade där ses tidigt. På språk som läses från höger till vänster växlar startpunkten hörn. Centrerade, symmetriska layouter börjar i mitten och arbetar utåt, vilket passar korta designer med ett enda budskap, som affischer, citat och tillkännagivanden.

Placeringen kan också jobba emot dig. I sociala format täcker plattformens kontroller delar av bilden, och på miniatyrer sitter en bricka i hörnet. Håll det första elementet borta från de ytorna, och [design av YouTube-miniatyrer](https://gradiently.design/sv/guide/youtube-thumbnail-design) visar hur.

## Luft

Luft gör två jobb. Runt ett enskilt element isolerar den det, och isolering läses som vikt: en rad med generösa marginaler kan slå ett mycket större textblock. Mellan element grupperar den dem: saker som ligger nära varandra läses som att de hör ihop. Lägg datum och plats nära varandra och längre från rubriken, så läser folk dem som en enhet av detaljer.

Ett stående inlägg med en rubrik som annonserar tolv workshoppar och en stödjande rad

Orden leder: rubriken bär nyheten och detaljen stödjer den.

Ett stående inlägg med det stora talet 12 och orden workshoppar i höst

Ett tal leder: samma innehåll, omrangordnat så att siffran ses först.

Samma innehåll kan stödja olika hierarkier. Vilken du väljer beror på vad du vill att folk ska minnas: idén eller siffran.

## Så testar du visuell hierarki

- **Ögonkisartestet.** Halvslut ögonen eller sudda ut designen. Formen som fortfarande sticker ut är din verkliga nivå ett. Om det inte är den du valde, justera.
- **Tvåsekunderstestet.** Visa designen för någon i två sekunder och fråga sedan vad den sa. De ska upprepa din nivå ett.
- **Miniatyrtestet.** Krymp den till den storlek den visas i på en telefon. Nivå två och tre kan försvinna, och det är okej, men nivå ett får inte det.
- **Gråskaletestet.** Ta bort färgen. Om hierarkin kollapsar litade den på nyans i stället för ljushetskontrast.

Hierarki blir svårare när bakgrunden är livlig eller färgstark, eftersom kontrasten ändras under orden, och [text på gradient](https://gradiently.design/sv/guide/text-on-gradient) visar hur du håller nivå ett läsbar oavsett var den sitter. För tillkännagivanden, där hierarkin betyder mest, se [så designar du ett tillkännagivande](https://gradiently.design/sv/guide/announcement-post-design).

## FAQ

### Vad är visuell hierarki?

Visuell hierarki är den ordning i vilken folk lägger märke till och läser delarna i en design, och den styrs med storlek, vikt, färg och kontrast, placering och luft.

### Hur många hierarkinivåer bör en design ha?

Oftast tre: ett element som ses först, några stödjande element därefter och detaljer sist.

### Vad är ögonkisartestet?

Halvslut ögonen eller sudda ut designen tills bara former återstår. Det som fortfarande sticker ut är det folk lägger märke till först.

### Är storlek det enda sättet att skapa hierarki?

Nej. Vikt, kontrast, färg, placering och luft skapar också betoning, och ett litet element i en ljus accentfärg kan slå ett större dämpat.