Når en besøgende lander på din hjemmeside, læser øjnene ikke siden fra top til bund i rækkefølge. De skimmer og hopper mellem de elementer, der skiller sig ud. Visuelt hierarki er det designprincip, der styrer, hvad de lægger mærke til først, som nummer to og som nummer tre. Uden det går selv velskrevet tekst tabt, fordi intet leder øjet hen mod det, der betyder mest.
Visuelt hierarki på en hjemmeside er den bevidste ordning af elementer efter størrelse, farve, kontrast, afstand og placering, så besøgende naturligt fokuserer på den vigtigste information først. Det afgør, om nogen forstår din værdi på få sekunder, eller om de forlader siden forvirret over, hvad din virksomhed tilbyder. At få hierarkiet rigtigt er en af de designbeslutninger, der gør størst forskel.
Hvorfor er visuelt hierarki vigtigt?
Besøgende bruger i gennemsnit få sekunder på at afgøre, om de bliver på en side. I den tid læser de ikke afsnit. De skimmer overskrifter, billeder og knapper for at afgøre, om siden er relevant. En side med stærkt visuelt hierarki formidler sit formål med det samme. En side uden det tvinger besøgende til at arbejde hårdere, og de fleste gider ikke.
Hierarki driver også handling. Når den primære opfordring til handling er visuelt dominerende, klikker flere på den. Når den går i ét med indholdet omkring den, falder konverteringsraten. Sammenhængen mellem visuelt hierarki og forretningsresultater er direkte: klart hierarki giver tydeligere veje til de handlinger, du vil have besøgende til at tage.
Hvilke værktøjer skaber visuelt hierarki?
Designere bruger et fast sæt visuelle egenskaber til at fastlægge prioritet. Hver af dem kan justeres for sig eller kombineres for en stærkere effekt.
Størrelse
Større elementer fanger opmærksomheden først. En hovedoverskrift på 36 pixels trækker øjet før brødtekst på 16 pixels. Forskelle i størrelse mellem overskriftsniveauer skaber en tydelig læserækkefølge. Når alt på siden er nogenlunde lige stort, skiller intet sig ud, og besøgende har ingen indgang.
Farve og kontrast
Elementer med høj kontrast mod en neutral baggrund kræver opmærksomhed. En lys knap på en hvid side er umulig at overse. Elementer med lav kontrast træder i baggrunden. Brug din primære brandfarve sparsomt på de elementer, der betyder mest: hovedoverskriften, den primære opfordring til handling og vigtige tal eller udtalelser. Indholdet omkring bør bruge neutrale toner, der støtter frem for at konkurrere.
Afstand og luft
Elementer, der er omgivet af luft, virker vigtigere end elementer, der er pakket tæt sammen. Rigelig afstand omkring en knap med opfordring til handling signalerer, at den fortjener opmærksomhed. Trange layouts får alt til at føles lige hastende, og det betyder, at intet føles hastende. Artiklen om sådan bruger du luft på din hjemmeside dækker princippet i praktisk detalje.
Placering
Besøgende skimmer websider i forudsigelige mønstre, typisk fra øverste venstre hjørne og nedad. Det vigtigste indhold hører til øverst på siden og i det område, man ser på mobil, før man scroller.
Sådan bruger du visuelt hierarki på en virksomhedshjemmeside
Stærkt hierarki følger et fast mønster på tværs af alle sidetyper. Detaljerne ændrer sig, men strukturen er den samme.
Hierarki på forsiden
Forsiden har brug for det tydeligste hierarki på hele hjemmesiden, fordi den henvender sig til den bredeste målgruppe. Hovedoverskriften siger, hvad virksomheden gør. En primær knap med opfordring til handling står tydeligt lige under. Artiklen om sådan får du din hjemmeside til at se professionel ud dækker, hvordan hierarki passer ind i det bredere mål om et poleret udtryk. Artiklen om hvad UX-design er forklarer, hvordan hierarki hænger sammen med den samlede oplevelse for besøgende.
Sådan klarer WEMASY visuelt hierarki
WEMASYs skabeloner er bygget med visuelt hierarki som et centralt designprincip. Overskriftsstørrelser, knapstil, standardafstande og indholdsblokkes layout er opbygget, så de vigtigste elementer naturligt skiller sig ud. Med den visuelle editor kan du justere hierarkiet ved at ændre overskriftsniveauer, knapstile og afstande mellem afsnit, mens den underliggende struktur bevares på tværs af computer og mobil.
Se, hvad der er med, hos WEMASYs hjemmesidebygger, eller se planerne på prissiden.
Ofte stillede spørgsmål
Hvad er visuelt hierarki på en hjemmeside?
Visuelt hierarki er ordningen af sidens elementer, så besøgende lægger mærke til den vigtigste information først. Størrelse, farve, kontrast, afstand og placering bidrager alle til at fastlægge den rækkefølge. Med WEMASYs hjemmesidebygger kan du sætte det op direkte på din hjemmeside.
Hvorfor er visuelt hierarki vigtigt for konverteringer?
Et tydeligt hierarki leder besøgende hen mod den handling, du vil have dem til at tage. Når opfordringen til handling er visuelt dominerende, og værdien er synlig med det samme, forstår flere, hvad de skal gøre, og følger igennem. Uden hierarki går opfordringer til handling tabt mellem konkurrerende elementer.
Hvordan ved jeg, om min side har et godt visuelt hierarki?
Knib øjnene sammen, eller se på siden på afstand. Det element, der skiller sig mest ud, bør være din hovedoverskrift eller din primære opfordring til handling. Hvis intet skiller sig ud, eller hvis det forkerte element dominerer, skal hierarkiet justeres. Bed en person, der ikke kender din hjemmeside, om at pege på hovedbudskabet inden for fem sekunder.
Hvad er forskellen på visuelt hierarki og layout?
Layout afgør, hvor elementerne er placeret på siden: kolonner, gitre og rækkefølgen af afsnit. Visuelt hierarki afgør, hvilke af disse elementer der fanger opmærksomheden først gennem størrelse, farve og kontrast. En side kan have et logisk layout, men dårligt hierarki, hvis alle elementer konkurrerer lige meget om opmærksomheden.
Virker visuelt hierarki ens på mobil?
Principperne er de samme, men anvendelsen er forskellig. Mobilskærme viser mindre indhold ad gangen, så hierarkiet skal være strammere. Stak elementerne lodret i prioriteret rækkefølge. Sørg for, at hovedoverskriften og den primære opfordring til handling vises, før den besøgende scroller. Brug færre konkurrerende elementer end i computerversionen.
Kan skabeloner give et godt visuelt hierarki?
Ja. Veldesignede skabeloner skaber hierarki gennem overskriftsstruktur, knapstil og standardafstande. Tilpasninger bør holde sig inden for den struktur frem for at overskrive den. Hvis du gør en enkelt overskrift meget større eller tilføjer flere stærkt farvede knapper, kan du ødelægge det hierarki, skabelonen giver.