Visuelt hierarki: Ta tilbake kontrollen over besøkerne dine

Det er kanskje dumt å røpe poenget med dette innlegget aller først, men what the hell… Et godt eksempel på et visuelt hierarki kan du faktisk allerede se i toppbilde i dette innlegget. Klarer du å skimte hva jeg skal frem til (Ja, jeg vet det er veldig mørkt)? Men uansett… Den blåe toppen skiller seg ut. Plasserte jeg den i midten tilfeldig? Nei.. Den ble plassert inn for å bryte opp bildet og for å få den som ser bildet til å feste blikket nettopp akkurat der!

Hvorfor er det viktig å tenke på et visuelt hierarki?

Innen design finnes det en rekke guides for å skape et visuelt hierarki. Du kan jo se for deg at du er ute og går en tur. Du går forbi en av disse utendørs billboardsene til Clear Channel eller JCDecaux. Dersom det bare er en hvit bakgrunn med en tettpakket tekst i Times New Roman font, stopper du da opp og leser? Klarer reklamen å fange blikket ditt? Svaret er “Nei”!

Det du ønsker er å få frem budskapet på en tydelig måte, og den beste måten å gjøre det på er å guide personen ved å sette et tydelig visuelt hierarki. Så enkelt som at du tenker “Dette er det første jeg vil personen skal se, så dette, så dette, så dette… You see? 

Tro det eller ei, men det er du som har kontrollen

Jeg skal ikke påberope meg ekspertise på design eller printreklame, men jeg kan ett og annet om digitale kundereiser. Så la oss ta for oss hvordan du kan skape et visuelt hierarki på nettstedet ditt.

Det første du skal tenke på er at du må chunke opp designet ditt. Ja, du skal tenke på helheten på siden din. Men en besøker ser jo ikke hele siden din på en og samme gang, ikke sant?! Ta derfor for deg én og én “Viewport”.

Viewport er det en besøker ser på sin skjerm (uavhengig av device) før vedkommende må scrolle. Det er altså ikke det samme som skjermoppløsning, ikke sånn direkte. I Google Analytics kan du finne ut hvilke enheter dine besøkere besøker siden din fra og hvilken skjermoppløsning de har.

Det gjør at du for eksempel kan bryte opp hele forsiden din i deler (chunks), så påse at det visuelle hierarkiet er “on point” gjennom hele kundereisen når en besøker scroller.

Det er altså DU som har kontrollen, selv om det kanskje ikke alltid føles sånn 😉

Tror du det første du ser på forsiden på dette nettstedet er tilfeldig?

Det er det absolutt ikke, ikke i nærheten en gang. La oss ta en titt, så skal jeg poengtere hva jeg mener:

Optimus Prime Consulting forside | Visuelt hierarki

La meg være den første til å si at teksten min ikke er den beste. Så der unngår jeg “Best practice” med høye kneløft. Men datadrevet copywriting og “copy-swiping” for å skrive god og triggende copy kan vi snakke mer om senere!

La meg fortelle hva jeg har forsøkt på her. Jeg har egentlig 4 (5) konkrete punkter jeg ønsker at mine besøkere skal se, og jeg lister de i stigende rekkefølge: 

    1. Knappen “Dette kan jeg hjelpe med”. Dette er min primære “Call to action”. For at noen skal kunne “kjøpe” noe av meg så må de nesten vite hva jeg kan hjelpe med, makes sense?
    2. Bilde. Jeg har også et bilde av meg selv som ser mot venstre. Jeg ser altså på teksten som står til høyre. psykologisk sett så er det nemlig slik at vi mennesker ser dit andre ser når vi ser et bilde som det der. Jeg forsøker altså å fremprovosere at besøkeren skal se på, og lese, teksten til høyre.
    3. Teksten til høyre. Jeg har valgt en stor fet hvit font som heading, det er en god kontrast til den mørke bakgrunnen. Jeg har forsøkt å ha en kort brødtekst, og har tenkt at det skal være nok tekst til å trigge til handling (få nok oppmerksomhet/nysgjerrighet slik at motivasjonen til å klikke på knappen er så høy som mulig.
    4. “Produktbokser”. Jeg har tre bokser (det er heller ikke tilfeldig at det er tre og ikke to, mer om det i bonusvideoen i bunnen av dette innlegget). Det er ganske tydelig hva jeg kan, ikke sant? Igjen, jeg kan kanskje jobbe med copy. Men hensikten her er at disse boksene skal skille seg ut med en annen kontrast. I tillegg indikerer de at det er mer innhold under “bretten”. Jeg trigger altså til scroll. 
    5. Chat. Dette er egentlig en liten “bonus”. Jeg vet at ingen kjøper tjenester av meg uten å virkelig sette seg inn i hva jeg gjør, og ikke minst så ønsker en potensiell kunde å snakke med “mannen bak bildet”. For det er ikke nettsiden min de skal kjøpe, de skal kjøpe kompetansen som sitter i hodet mitt. Derfor gjør jeg alt jeg kan for å komme i kontakt med de som besøker min side.

Den cookie baren er dessverre noe som må være der pga GDPR og sånne ting, derfor er det også litt kontrast på den. Jeg vil jo at folk skal godta mine cookies slik at vi får den baren ut av “kundereisen”, og jeg får data til å jobbe med remarketing 🤓

Det er ikke vanskeligere enn det. You get the point?

Vi kan godt kjøre noen flere eksempler også. Jeg jobbet med litt research knyttet til et prosjekt i går. Da tok jeg for meg Booking.com, Norwegian, Hotels.com og airbnb.

Jeg tenkte utelukkende “visuelt hierarki” og gjorde en evaluering på de fire sidene. Jeg kjørte også Booking.com via et verktøy fra 3M som heter “VAS”. VAS står for “Visual Attention Software”, som igjen kan oversettes til… Ja, du gjettet riktig “visuelt hierarki”!

La oss først bare se på skjermbilder fra min viewport

Jeg sitter på en 15″ Macbook Pro med Retina display. Og slik så det ut for meg:
(Klikk på bildene for å se de større, eller zoom inn på mobil)

Hvordan er det visuelle hierarkiet til Booking.com?

Etter å ha kjørt skjermbildet via VAS så får vi en del interessante findings. VAS gir oss feedback på heatmaps, visuelt hierarki og oddsen for at noe blir sett i løpt av de første 5 sekundene.

Det er veldig viktig å huske på dette med tid. En besøker er utålmodig og vi mennesker har faktisk påvist lavere attention span enn en gullfisk (!!). Derfor er det viktig å tenke maks 5 sekunder, og det er virkelig maks. Så på 5 sekunder skal du ha klart å fortelle besøkeren din hvem du er, hva vedkommende kan gjøre på din side og hva du leverer. I tillegg kommer troverdighetsfaktoren inn i bildet. Kan besøkeren stole på deg?

Heatmap:

Booking.com - Heatmap - forside | Optimus Prime Consulting

Det er vanskelig for meg å sitte her å påstå hva Booking.com har som fokus og ikke, så man kan bare synse litt. Men jeg lover, min synsing er kvalifisert synsing… hehe! Dersom jeg skal trekke frem noe fra bildet over så må det være: 

  1. Knapp: Hva er det booking er keen på? Det må jo være å motivere en besøker til å søke. Altså starte sin kundereise. Da svarer de på spørsmålet “Hva kan jeg gjøre på denne siden”. Jo, du kan søke etter tilbud på hoteller, ferieboliger og mye annet – og her er søkeknappen!
  2. Kategori Oslo Sentrum: Jeg vil anta at Booking, som alle andre, fokuserer lokalt med tanke på Covid-19. Vi kan ikke reise som før, og da vil lokale og nasjonale destinasjoner være et naturlig fokus. Om jeg har rett i at de tenker slik så er det ikke dumt å ha en slik “kategori” til høyre? Med tanke på det berømte “F-mønsteret” og de tingene der.
  3. Øvrig: Vi kan også se at heading, menykategorier, log in etc får fokus. Noe som heller ikke er dumt med tanke på å fortelle for besøkeren hva man kan gjøre på siden, alle valgene man har.

Sannsynlighet:

Booking.com - Visuelt hierarki - forside | Optimus Prime Consulting

For å spille videre på det jeg nevnte over. Treffer de ikke midt i blinken på nettopp akkurat det? Det som “må” sees, sees – ikke sant?

  1. Kategori,  “Oslo sentrum” 94% sjanse for at den sees de første 5 sekundene.
  2. CTA “søk”, 76% sjanse for at den sees de første 5 sekundene.
  3. Heading, 62% og 64% sjanse for at den får oppmerksomhet. Det er jo samme heading, så vi kan kanskje møtes på midten å si 63%.

Det er da 3 ulike elementer som får fokus, med stor sannsynlighet. I mitt hode er dette nøyaktig de tre “triggerne” man trenger for å få tilstrekkelig motivasjon til å fortsette kundereisen.

Visuelt hierarki:

Booking.com - rekkefølge på visuelt hierarki - forside | Optimus Prime Consulting

Det blir litt gjentakende dette her, men nå skjønner du garantert poenget? Se hvor fokuset går… Dersom Booking.com vil at jeg skal tenke “lokalt” og starte mitt søk så har de jo skutt BULLSEYE!

  1. Inspirerende og lokal/nasjonal lokasjon
  2. Søk (CTA)
  3. Mer inspirasjon
  4. Tilbake til den lokale/nasjonale lokasjonen

Før jeg gir de alt for mye cred. Det kan være at det er helt tilfeldig at nettopp elementet “Oslo sentrum” ligger akkurat der det gjør, og selve bildet kan være helt tilfeldig. For det er viktig å nevne at selve utformingen av bildet har mye å si for å få fokus. Hadde det vært et annet bilde med mindre kontraster så kunne utfallet av det visuelle hierarkiet vært helt annerledes.

Men kjenner jeg Booking.com rett så er dette alt annet enn tilfeldig 🤓

BONUS: 11 visuell hierarki prinsipper

Dersom dette ikke var nok for deg så kan du lese enda mer om visuelt hierarki og øyebevegelser her. 👀

Legg igjen en kommentar