När en besökare landar på din webbplats läser ögonen inte sidan uppifrån och ned i ordning. De skummar och hoppar mellan element som sticker ut. Visuell hierarki är designprincipen som styr vad de lägger märke till först, andra och tredje. Utan den försvinner även välskrivet innehåll, eftersom inget leder blicken mot det som är viktigast.
Visuell hierarki på en webbplats är det medvetna arrangemanget av element efter storlek, färg, kontrast, avstånd och placering så att besökare naturligt fokuserar på den viktigaste informationen först. Den avgör om någon förstår ditt värdeerbjudande inom några sekunder eller lämnar förvirrad över vad ditt företag erbjuder. Att få hierarkin rätt är ett av de designbeslut som ger störst effekt.
Varför spelar visuell hierarki roll?
Besökare lägger i genomsnitt några sekunder på att bestämma om de ska stanna på en sida. På den tiden läser de inte stycken. De skummar rubriker, bilder och knappar för att avgöra relevans. En sida med stark visuell hierarki förmedlar sitt syfte direkt. En sida utan den tvingar besökare att anstränga sig mer, och de flesta orkar inte.
Hierarkin driver också handling. När den primära uppmaningen till handling är visuellt dominerande klickar fler på den. När den smälter in i innehållet runt omkring sjunker konverteringsgraden. Sambandet mellan visuell hierarki och affärsresultat är direkt: tydlig hierarki ger tydligare vägar till de handlingar du vill att besökare ska ta.
Vilka verktyg skapar visuell hierarki?
Designers använder en enhetlig uppsättning visuella egenskaper för att skapa prioritering. Var och en kan justeras separat eller kombineras för starkare effekt.
Storlek
Större element drar uppmärksamheten först. En huvudrubrik på 36 pixlar drar blicken före brödtext på 16 pixlar. Storleksskillnader mellan rubriknivåer skapar en tydlig läsordning. När allt på sidan är ungefär lika stort sticker inget ut och besökare har ingen ingång.
Färg och kontrast
Element med hög kontrast mot en neutral bakgrund kräver uppmärksamhet. En ljus knapp på en vit sida går inte att missa. Element med låg kontrast träder tillbaka. Använd din primära varumärkesfärg sparsamt på de element som betyder mest: huvudrubriken, den primära uppmaningen till handling och viktig statistik eller omdömen. Innehållet runt omkring bör använda neutrala toner som stödjer i stället för att konkurrera.
Avstånd och vitt utrymme
Element omgivna av vitt utrymme framstår som viktigare än element som är packade tätt. Generöst avstånd runt en knapp med uppmaning till handling signalerar att den förtjänar uppmärksamhet. Trånga layouter gör att allt känns lika brådskande, vilket betyder att ingenting känns brådskande alls. Artikeln om hur du använder vitt utrymme på din webbplats tar upp principen i praktisk detalj.
Placering
Besökare skummar webbsidor enligt förutsägbara mönster, oftast med start uppe till vänster och vidare nedåt. Det viktigaste innehållet hör hemma högst upp på sidan och ovanför vecket på mobil.
Så tillämpar du visuell hierarki på en företagswebbplats
Stark hierarki följer ett enhetligt mönster på alla sidtyper. Detaljerna ändras, men strukturen förblir densamma.
Hierarki på startsidan
Startsidan behöver den tydligaste hierarkin på hela webbplatsen eftersom den når den bredaste publiken. Huvudrubriken säger vad företaget gör. En knapp för den primära uppmaningen till handling sitter väl synlig under. Artikeln om hur du får din webbplats att se professionell ut tar upp hur hierarki passar in i det bredare målet om ett polerat utseende. Artikeln om vad UX-design är förklarar hur hierarki hänger ihop med besökarens helhetsupplevelse.
Så hanterar WEMASY visuell hierarki
Mallarna i WEMASY är byggda med visuell hierarki som en grundläggande designprincip. Rubrikstorlekar, knappstil, standardavstånd och layouter för innehållsblock är uppbyggda så att de viktigaste elementen naturligt sticker ut. Med den visuella redigeraren justerar du hierarkin genom att ändra rubriknivåer, knappstilar och avstånd mellan avsnitt, medan den underliggande strukturen hålls intakt på både dator och mobil.
Se vad som ingår i webbplatsbyggaren i WEMASY eller jämför planerna på prissidan.
Vanliga frågor
Vad är visuell hierarki på en webbplats?
Visuell hierarki är arrangemanget av sidans element så att besökare lägger märke till den viktigaste informationen först. Storlek, färg, kontrast, avstånd och placering bidrar alla till att skapa den ordningen. Med webbplatsbyggaren i WEMASY kan du sätta upp det direkt på din webbplats.
Varför är visuell hierarki viktig för konverteringar?
En tydlig hierarki leder besökare mot den handling du vill att de ska ta. När uppmaningen till handling är visuellt dominerande och värdeerbjudandet syns direkt förstår fler besökare vad de ska göra och följer upp. Utan hierarki försvinner uppmaningarna bland konkurrerande element.
Hur vet jag om min sida har bra visuell hierarki?
Kisa mot sidan eller titta på den på avstånd. Det element som sticker ut mest bör vara din huvudrubrik eller primära uppmaning till handling. Om inget sticker ut, eller om fel element dominerar, behöver hierarkin justeras. Be någon som inte känner till din webbplats att peka ut huvudbudskapet inom fem sekunder.
Vad är skillnaden mellan visuell hierarki och layout?
Layouten avgör var element placeras på sidan: kolumner, rutnät och avsnittsordning. Visuell hierarki avgör vilka av de elementen som drar uppmärksamheten först genom storlek, färg och kontrast. En sida kan ha en logisk layout men dålig hierarki om alla element konkurrerar lika mycket om uppmärksamheten.
Fungerar visuell hierarki likadant på mobil?
Principerna är desamma, men tillämpningen skiljer sig. Mobilskärmar visar mindre innehåll åt gången, så hierarkin måste vara stramare. Stapla elementen i prioritetsordning lodrätt. Se till att huvudrubriken och den primära uppmaningen till handling syns innan besökaren scrollar. Minska antalet konkurrerande element jämfört med datorversionen.
Kan mallar ge bra visuell hierarki?
Ja. Väl utformade mallar skapar hierarki genom rubrikstruktur, knappstil och standardavstånd. Anpassningar bör ske inom den strukturen i stället för att åsidosätta den. Att göra en rubrik mycket större eller lägga till flera starkt färgade knappar kan bryta hierarkin som mallen ger.