4 manieren om visuele hiërarchie te gebruiken om UX te verbeteren en conversies te stimuleren

10 min


151

Technologie en consumentenvoorkeuren evolueren snel (schijnbaar per uur), maar in deze turbulente wereld van snelle veranderingen vergeten we vaak dat sommige kernprincipes van sensorische waarneming en menselijke psychologie hetzelfde blijven.

Een van die functies is hoe we visuele informatie bekijken en verwerken, en in het bijzonder visuele hiërarchie.

Mensen zijn visuele wezens.

Hoewel er geen smidgen van waarachtigheid zijn in de wijd verspreide infographics en “contentmarketing” -posten die schreeuwen, verwerken we beelden 60.000 keer sneller dan tekst, maar een onderzoek vond wel datpresentaties met visuele hulpmiddelen 43% overtuigender zijn dan niet-gebruikte .

We kunnen dus met een redelijke mate van zekerheid zeggen dat visuals de kortetermijnbeslissingen beïnvloeden die consumenten maken zonder het zelf te beseffen. Bijgevolg moeten marketeers vertrouwd raken met het concept van hoe ze visuele hiërarchie op hun website of app kunnen gebruiken om impulsieve consumentenreacties in verschillende stadia van hun verkooptrechter te benutten .

Wat is visuele hiërarchie? Visuele hiërarchie gedefinieerd

Allereerst, wat is visuele hiërarchie in termen van webdesign precies ?

In wezen is het de manier waarop de pagina is ingedeeld om de volgorde en het belang van de inhoud visueel over te brengen. Visuele hiërarchie wordt gecreëerd door bepaalde aanwijzingen zoals grootte, kleur, contrast, vorm, positionering en rangschikking in kaart te brengen om een ​​gevoel van diepte te vormen.

We ervaren elke dag visuele hiërarchie. Om u een eenvoudig alledaags voorbeeld te geven, bedenk eens wanneer u door de blauwe en witte interface van Facebook bladert, wat springt er altijd het meest uit? De levendige rode meldingsaanduiding natuurlijk!

Hoewel visuele hiërarchie een sleutelprincipe is van website- en productontwerp, is het concept op zich niet moeilijk te vatten. Maar om het goed te krijgen, zal hoogstwaarschijnlijk wel wat vallen en opstaan ​​gebruiken.

Hier leest u hoe u neurologische aanwijzingen kunt gebruiken om een ​​sterk gevoel van visuele hiërarchie op uw platform te creëren …

1. Bepaal gedefinieerde scanpatronen

Ongeacht de culturele achtergrond, iedereen consumeert over het algemeen inhoud van bovenaf, en de meerderheid leest van links naar rechts. Het is belangrijk om te beseffen dat bezoekers zich zelden zullen committeren aan het lezen van elk woord op een website. Gebruikers scannen webinhoud meestal zo snel als ze kunnen om te bepalen of ze dieper willen duiken.

In 2014 onthulde Chartbeat beroemd dat je gemiddeld ongeveer 15 seconden aandacht van een lezer online hebt. Hun CEO Tony Haile volgde het op met wijze woorden van advies voor marketeers:

“We hebben clicks al lange tijd gebruikt als standaard voor het feit of iets online wordt gelezen en daarom de dollars van een adverteerder waard zijn. Wat echt de moeite van het meten waard is, is aandacht – en aandacht is een functie van de tijd. “

We bespreken routinematig een miljoen manieren om de aandacht van een lezer te “grijpen”. Maar hebben we betrouwbare manieren om het te ‘houden’? Een onderzoek uitgevoerd door Nielsen Norman Group ontdekte dat het menselijk brein vaak inhoud in twee verschillende patronen scant.

Voor tekstzware pagina’s zoals blogposts of pagina’s met consistente blokken met afbeeldingen, zoals productvermeldingen, vindt het scangedrag consequent plaats in een F-patroon.

Bekijk deze hittekaart van oogverkeer op ecommerce-websites, artikelen en (uniforme) zoekresultaten:

Afbeeldingsbron

U zult merken dat de linkerkant van de pagina aanzienlijk meer begunstigd is dan de rechterkant. Hoewel deze studie werd uitgevoerd met Engelstalige respondenten, zou het tegenovergestelde het geval zijn voor diegenen wiens talen van rechts naar links worden gelezen. Het bootst in wezen het leespatroon na dat mensen sinds de oudheid hebben omarmd.

Door de jaren heen, met de toegenomen populariteit van mobiele apps en mobiel surfen op het internet, veranderingen in inhoudsformaten, innovatief gebruik van CTA’s en een totale transformatie in het weergeven van resultaten van zoekmachines, voerde Neil Patel aan dat het F-vormige patroon “Is geen gemeenschappelijkheid meer.”

Aan de andere kant is een Z-patroon van toepassing op meer visueel georiënteerde pagina’s, zoals advertenties.

Afbeeldingsbron

Deze scanmethode treedt meestal op als de inhoud niet in blokparagrafen wordt weergegeven. De natuurlijke neiging van de lezer is om bovenaan de pagina te beginnen, naar de andere hoek te schieten voor meer informatie, dan diagonaal naar beneden te gaan om het volgende blok van links te beginnen en te herhalen.

Hoe kunt u dit concept opnemen in uw website of product om UX te verbeteren en conversies te verkrijgen?

Het is gebruikelijk voor webontwerpers om hun pagina’s expliciet te maken rond deze neurologische gedragingen. Omdat beide patronen op dezelfde manier beginnen, is het een slimme keuze om uw belangrijkste informatie bovenaan links te plaatsen. Kijk op de startpagina’s van de toonaangevende e-commerce websites. Dit is Amazon:

En hier is Etsy:

U zult merken dat logo’s meestal in de linkerbovenhoek van de pagina worden geplaatst. Aan de andere kant zijn er aanmeldings- / aanmeldingsopties. Vervolgens, terwijl ogen naar het midden gaan, worden bezoekers naar producten geleid. De eindpunten rechtvaardigen meestal een CTA voor verdere actie.

Het gebruik van deze neurologische tendensen en scanpatronen in uw voordeel zal niet alleen u verleiden gebruikers te helpen uw platform te verkennen, maar ook effectief hun onbewuste besluitvormingsproces door de verkooptrechter naar een conversie leiden.

Als een datagedreven marketeer, weet dat er veel tools tot uw beschikking zijn om de specifieke kijkpatronen van uw site te ontdekken.

Deze omvatten softwareoplossingen voor eye-tracking , registratie van gebruikersgedrag , warmtekaarten (die interactie tonen met bewegende en dynamische elementen, in tegenstelling tot alleen snapshots), klik op kaarten, schuifkaarten en trechtervisualisaties .

Bovendien moeten deze gebruikerservaringinzichten en kwalitatieve bevindingen worden getest in een gecontroleerd experiment .

2. Experimenteer met White Space

Witte ruimte is misschien wel de meest over het hoofd gezien ontwerpcomponent in het schema van de visuele hiërarchie.

Geloof het of niet, het gebruik van witte ruimte heeft een unieke visuele betekenis in e-commerce webdesign. Het basisidee is, hoe meer witte ruimte rond een element, hoe meer aandacht het zal aantrekken.

Wat de neurologische impact betreft, zijn er veel voordelen aan het strategisch implementeren van dit concept …

1. Witte ruimte verbetert de focus

Het valt niet te ontkennen dat de gebruikers van vandaag webinhoud doorbladeren met een sterk gevoel van urgentie . In webdesign is  eenvoud een krachtige bondgenoot .

Het menselijk brein heeft twee redeneersystemen: het onbewuste denkproces, dat impulsief, vormend en beïnvloed door intuïtie (Systeem Eén) is, en het  bewuste denkproces , dat langzaam en analytisch is (Systeem Twee).

Dual Process Theory bij besluitvorming ( Image Source )

Omdat we slechts enkele seconden hebben om de aandacht van bezoekers te trekken, is het gebruik van witte ruimte een goede manier om snel belangrijke delen van de website te laten zien. Dit kunnen koppen, afbeeldingen, CTA-knoppen of links naar waardevolle inhoud zijn.

Apple gebruikt witruimtes om de stroom van de productpagina’s te splitsen, gericht op zowel de bewuste als de onbewuste denkprocessen, door de informatieve (Meer informatie) en transactionele (Koop) paden duidelijk te scheiden:

2. Witte ruimte snijdt door de rommel

Je weet rommel als je het ziet.

Het overbelast bezoekers en drijft ze in drommen weg. Heb je trouwens de ‘World’s Worst Website ooit’ gezien ?

Zo ziet het eruit als er te veel elementen om aandacht vragen. En laat me er zelfs niet over beginnen :

Als uw website eruit ziet alsof deze is ontworpen in de jaren 90, kunnen consumenten gemakkelijk naar conclusies springen zoals a) u bent niet langer actief en b) uw website bewaart uw waardevolle informatie niet. Beide kosten u geloofwaardigheid en maken potentiële kopers weg .

Bovendien presteren verouderde websites doorgaans niet goed in de zoekresultaten. Google werkt hun zoekalgoritmen honderden keren per jaar bij en waardeert de gebruikerservaring ten opzichte van de meeste andere rangschikkingsfactoren.

Weinig mensen weten dat Google regelmatig onderzoek naar gebruikerservaring uitvoert om hun eigen producten te verbeteren. Dat is hoe serieus ze zijn met UX. Uw website wordt begraven in de SERP’s als u de bruikbaarheid blijft negeren.

Aan de andere kant van het spectrum bleek uit een vaak geciteerde studie (Lin, 2004) dat een strategisch geplaatste witte ruimte het begrip tot 20% vergroot.

3. Witte ruimte Creëert balans

Het opbouwen van een stroom naar uw website is sterk afhankelijk van uw vermogen om een ​​vlotte balans te vormen in termen van leesbaarheid en bruikbaarheid. Voor het vinden van de perfecte mix van berichten en witruimte kan een beetje experimenteren nodig zijn. Houd in gedachten dat te veel witte ruimte kan worden gezien als een gebrek aan inhoud en inhoud, terwijl er te weinig los kan komen als ongeorganiseerd.

Sony biedt een fenomenaal voorbeeld van het gebruik van witruimte in een lay-out:

Wanneer bezoekers op een e-commerceplatform landen, willen ze het vlees van het aanbod zo snel mogelijk zien. Sony gebruikt sizing en witruimte om navigatiekaarten te maken en gebruikers naar producten van hun keuze te leiden. U zult zien dat er op geen enkel moment een overload aan informatie is en dat het boren in categorieën een eenvoudig, intuïtief proces is.

Denk aan witte ruimte als de mortel die de volledige visuele hiërarchie van uw website bij elkaar houdt. Aan het einde van de dag is het primaire doel om de grenzen van het menselijk geheugen en de aandacht te dienen voor een soepele UX-stroom.

3. Gebruik herhaling

Herhaling heeft keer op keer bewezen effectief te zijn in het maken van een sterke indruk op het menselijk brein. Dat is misschien wat het tot een van de meest overtuigende elementen van de bestverkopende muziekrecords maakt, zoals Elizabeth Hellmuth Margulis uiteen heeft gezet in een TED-lezing .

Dit fenomeen wordt ondersteund door wat bekend staat als het ‘vertrouwdheidsbeginsel’ in de sociale theorie en ‘mere exposure-effect’ in de psychologie. Een paper gepubliceerd in de Oxford Journal of Consumer Research vond een sterke correlatie tussen vlotheid van blootstelling en gunstige evaluatie.

De reden dat herhaling zo’n krachtige invloed heeft op mensen is omdat het onze ‘verwerkingsvloeiendheid’ vergroot. Met andere woorden, herhaalde effecten zijn veel gemakkelijker voor onze geest om te absorberen.

Afbeeldingsbron

In de late jaren zestig voerde psycholoog Robert Zajonc een studie uit naar de ‘Attitudinale effecten van een eenvoudige blootstelling’. Zajonc stelde twee groepen onderwerpen bloot aan een reeks Chinese symbolen en ideogrammen. De eerste groep kreeg vijf opnamen van de afbeeldingen. De tweede groep kreeg er slechts één. In beide groepen duurden de blootstellingen ongeveer vijf milliseconden (te snel om bewust te worden verwerkt).

Afbeeldingsbron

Vervolgens toonde Zajonc een grotere reeks afbeeldingen inclusief nieuwe symbolen en ideogrammen. Deze waren in aanvulling op de vorige. Deze keer konden de proefpersonen de beelden een volle seconde bekijken (genoeg tijd om bewust te verwerken). Vervolgens werd aan hen gevraagd hoeveel ze van elkaar hielden.

Het bleek dat de proefpersonen die de vijf korte subliminale opnames van een afbeelding hadden ontvangen ze beter vonden dan degenen die ze slechts één keer hadden gezien. Over het algemeen vond de groep met meer exposure de beelden over het algemeen leuker en hadden ze een hoger humeur. Zajonc trok de conclusie dat in aanwezigheid van vertrouwde dingen ons gelukkiger maakt, zelfs als we ons niet bewust zijn van de blootstelling:

“De herhaling van een ervaring is intrinsiek plezierig. Het vergroot onze stemming en dat plezier vloeit over naar alles in de buurt. “

Het creëren van een aangename e-commerce UX-stroom gaat helemaal over het vinden van een ritme ; de beste manier om een ​​ritme in te druppelen is door herhaling te gebruiken.

Hoewel herhaling een fundamenteel aspect is, varieert het gebruik van simplistisch tot complex. Een paar voor de hand liggende plaatsen om herhaling op uw site of app te gebruiken, zijn het lettertype, het kleurenschema, de lijndikte, vormen, enz. Bij het opstellen van een thema is herhaling een essentieel ingrediënt voor consistentie door nadruk op de ruimte en eenwording.

Het overkoepelende doel van herhaling in webdesign is om te zorgen voor coherentie van informatie.

In termen van visuele hiërarchie is herhaling een geweldige manier om het relatieve belang te laten zien. Terug naar de startpagina van Apple:

De belangrijkste focus ligt natuurlijk op de gloednieuwe, speciale editie, rode iPhone 7.

Daaronder ziet u de andere producten die Apple al zijn andere producten promoot, gerangschikt in rechthoeken van dezelfde grootte. Door bepaalde componenten op uw platform te herhalen, geeft u visuele aanwijzingen voor bezoekers om de inhoud te volgen en te begrijpen hoe alles bij elkaar past.

Uiteindelijk, wanneer merkinhoud gemakkelijker te consumeren is, versnelt het besluitvormingsproces van klanten.

Als Justin Bieber herhalingen kan gebruiken om miljoenen records te verkopen, waarom kan je het dan niet gebruiken om je website-conversies een boost te geven ?!

Herhaling maakt hits in muziek en UX ( Image Source )

4. Maak een flow en breek het vervolgens

Nadat het scannen van patronen en flow goed zijn vastgesteld, is een effectieve techniek in de visuele hiërarchie om de huidige status-quo te onderbreken.

Als u bijvoorbeeld de herhaling die u in uw lay-out hebt gemaakt, doorbreekt, zullen gebruikers onvermijdelijk in hun tracks stoppen en hernieuwde aandacht krijgen. Het is echter belangrijk om deze aanpak voorzichtig te gebruiken. Als u de stroom van een website te vaak verstoort, ziet uw platform er slordig en ongericht uit.

Het menselijk oog is (en zal altijd) aangetrokken worden tot beweging . In webontwerp is een animatie in het midden van tekstblokken een eenvoudige maar effectieve manier om de aandacht te vestigen op iets dat u wilt benadrukken. Dit is misschien een van de krachtigste technieken om te gebruiken bij het vaststellen van een visuele hiërarchie.

Bekijk de pagina van illustrator Miki Mottes :

Ten eerste is deze webpagina fascinerend om naar te kijken. De subtiele verschuivingen in de animatie zijn geweldig om de bezoeker te amuseren. Je ogen keren echter onvermijdelijk terug naar het zakelijke gedeelte, dat in het midden is ingekaderd.

Waarschuwing: als uw animatie overdreven flitsend is, kan a) het enige zijn dat de koper ziet en b) hen afleiden van de winkelervaring. En God verhoede als het een automatisch spelende video is!

Als het correct en strategisch wordt toegepast, kunnen stroomonderbrekingen de UX verbeteren.

Er zijn veel manieren om de huidige stroom van een website te doorbreken; een groeiende trend in webontwerp is het gebruik van foto-video-hybriden of ‘cinemagraphs’. Dit omvat video’s die voornamelijk bestaan ​​uit statische elementen of foto’s met incidentele, repetitieve beweging van een enkel element. Zie hoe de ogen van het model lichtjes verschuiven om naar je te kijken, naar Bundy Bundy :

Omwille van de visuele hiërarchie kan het gebruik van dergelijke ‘afleiding’ in uw webontwerp uiteindelijk helpen voorkomen dat de aandacht van de klant verdwaalt (en gaan waar u dat niet wilt) en in plaats daarvan verwijzen naar CTA-prompts.

Wees voorzichtig om niet overboord te gaan; deze techniek is een beetje een wildcard. Zoals altijd, test het voor jezelf.

Conclusie

In website- en productontwerp kun je het je niet veroorloven om op welk moment dan ook de aandacht te trekken en te behouden. Visuele elementen moeten veel meer zijn dan artistieke decoratie. Ze moeten strategisch (en praktisch) geplaatst zijn om een ​​actiegestuurde stroom van bruikbaarheid te creëren.

Het opnemen van visuele hiërarchie rond neurologische triggers is cruciaal voor het communiceren van zowel de doelen van uw bedrijf als de algehele functionaliteit van uw website. Denk je niet?


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format