Kortversionen
- 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.
På den här sidan
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 |
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.
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, 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.
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. 60-30-10-regeln ä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 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.
Orden leder: rubriken bär nyheten och detaljen stödjer den.
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 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.
Vanliga frågor
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.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil
