Hvor mange sekunder skal jeg bruge på at vurdere om dit budskab er relevant?

Hvad nu hvis jeg fortalte dig, at viden om Visuelle Hierakier kunne øge dit salg? Så ville du formentlig læse resten af dette indlæg. Ja hvis altså ikke du har for travlt med finde ud af hvorfor din bounce-rate er højere end den burde være, nå nu du har lagt så mange kroner i SEO.

Du ved at i alle former for visuel kommunikation og specifikt ift online medier, bruger den besøgende kun få sekunder for at overveje, om det er værd at bruge mere tid på indholdet.

Så hvordan kan du sikre dig, at dine besøgende på en hjemmeside ikke bouncer videre med det samme? Eller at en potientiel kunde overhovedet gider klikke på din dyrt indkøbte SoMe annonce?

Det kan du ved at vide noget om VISUAL HIERACHIES.

På dansk: Visuelle hierakier. Også selvom du vælger at hyre en professionel designer til opgaven fremfor at bakse med det selv. Eller måske NETOP når du vælger at hyre en professionel.

Visuelt Hieraki er et grundbegreb indenfor grafisk design, webdesign og UX.

Begrebet Visuelt Hieraki refererer til organiseringen af design elementer, sådan at beskuerens øje bliver guidet I retning af hvert individuelt element, I den rækkefølge som designeren har valgt.

Ud fra hvad afsenderen af budskabet har prioriteret som værende den vigtigste information.

Den vigtigste information bør være “ i toppen af hierakiet”.

Fordi brugeren/læseren vil opfatte den information som visuelt er mest fremtrædende, først.

Det betyder dog ikke nødvendigvis, at den allervigtigste information altid skal placeres som det absolut øverste på en hjemmeside, annonce, flyer eller andet grafisk design.

Nogle gange er det smartest, men langtfra altid. Begrebet “øverst” eller “toppen” af  det visuelle hieraki, refererer blot til den rækkefølge  af information som brugeren læser/opfatter.

Tænk på en avisforside i trykformat: Her står den “største historie” midt på den øverste del af siden. Typisk med meget store skrifttyper. Eller man bruger et billede som “blikfang”. Tabloid aviser har ofte få ord med MEGET STORE typer på forsiden.

Hjemmesiders logoer, placerer vi i vestlig kultursammenhæng næsten altid enten øverst til venstre eller i midten, øverst i headeren. På denne måde kan brugeren hurtigt orientere sig ift afsender. Det ville virke underligt, hvis vi først skulle scrolle helt ned i bunden af siden, for at finde denne information. Netop fordi vi intuitivt opfatter information der er placeret synligt fremtrædende ved første øjekast som mest væsentlig.

Uddybende og/eller mindre vigtigte informationer placeres  “below the fold”, dvs den del af siden der i gamle dage ville være usynlig, når avisen lå sammenfoldet i pæne stakke nede i kiosken.

Begrebet below the fold bruges stadig indenfor UX og webdesign, hvor  det refererer til den del af siden som først bliver synlig for os som læsere/brugere, når vi scroller.

 

HVIS vi altså scroller.

Det gør vi jo kun, når vi forventer, at den øvrige information på siden er værd at undersøge nærmere.

Den evindelige diskussion mellem grafiske designere og deres klienter omkring størrelsen på et fx firmalogo handler essentielt set om forståelsen af det visuelle hierakis funktion.

Klienten synes måske, at deres superfine logo da helt bestemt må være det allervigtigste, og derfor skal være MEGET større.

Den grafiske designer som ved noget om UX, vil holde på at det nok er mere væsentligt at den besøgende på siden hurtigt kan afkode hvad virksomheden rent faktisk sælger - og finde ud af hvordan de kan købe det.

Se fx https://www.nngroup.com/ og

https://www.nngroup.com/articles/principles-visual-design/

 

Når vi opfatter et visuelt design som værende mere brugevenligt og hurtigt at afkode end andet, er det ofte fordi der er er tale om et tydeligt visuelt hieraki.

Også selvom designet i sig selv kan være komplekst opbygget med mange forskellige elementer.

Mere "enkle" designs anvender samme princip, og det er netop det tydelige hieraki i informationen der gør, at vi opfatter et design som enkelt og let at afkode.

 De primære metoder til at skabe visuelt hieraki:

 

• Størrelse

• Farver

• Placering

• Kontrast

 

Alting kan jo ikke have den same “vægt” – så vil designet fremstå rodet og uden struktur.

Med Gruppering (dvs elementers relative placering ift hinanden) skaber vi også det visuelle hieraki. Hvadenten du er bevidst om det eller ej.

Man kan ved en forkert placering af elementer overfor hinanden komme til helt utilsigtet at sende det HELT forkerte budskab. Mere om det i et senere indlæg.

Elementer som opfattes ens i farve og størrelse og/eller er placeret tæt på hinanden, forstår vi som tilhørende den samme kategori af information. Dvs de læses som værende på samme “niveau” i informations hierakiet.

Derfor er det altid en dårlig idé at bruge for mange forskellige skriftyper og -størrelser i visuelt design, medmindre der er en mening med det.

Ligesom brugen af farver i godt informations design er konsevent ift hvilke kategorier og emner de henviser til eller repræsenterer.

Placering af elementer sålededes at der er relativt meget plads omkring dem, kalder vi “negative space” eller “white space” (man kan nok indvende, at negative space både mere PC såvel som mere retvisende end "whitespace", så jeg kalder det negative space).

Negative space er endnu en måde at skabe konstrast til de omkringliggende elementer, og dermed fremhæve elementet.

 

Negative space øger samtidig læsevenligheden, idet brugeren/læseren hurtigere kan overskue mængden af information, når billeder/tekst ikke er “klemt for meget sammen” i én stor blok.

Når brugeren interagerer med et interface eller lander på en hjemmeside, kan de jo ikke vide hvad designeren (afsenderen) har haft af intentioner.

Brugeren kan allerhøjest som modtager af budskabet vurdere hvordan blikket bliver guidet af de individuelle design-elementer. Mere sandsynligt er det dog, at brugeren kun forholder sig til spørgsmålet:

Ligner dette noget af det jeg søger – ja/nej?

 

Når du vurderer om din annonce, hjemmeside eller grafiske brugergrænseflade i en app er brugervenlig, så start med at dekonstruere designet:

IDENTIFICÉR hvilke elementer brugeren/den besøgende lægger mærke til som de første.

Hvorfor og hvordan.

 

• Hvordan bliver blikket guidet gennem designet?

• Hvilken historie /budskab fortælles ved hjælp af den rækkefølge de individuelle elementer opfattes/læses i?

• Hvor er CTA's placeret, og hvordan er de visuelt fremhævet?

• Kan det gøres mere tydeligt?

Smid en kommentar, del en historie om dårlige designvalg - eller følg med næste gang hvor vi ser på visuel støj, vildledende data-visualiseringer og hvorfor begge dele er væsentlig viden for dig som er iværksætter, selvstændig eller freelancer ...