chatbots of live chat

digitale marketing: visuele signalen (visual cues)in het ontwerp van je website/landingpagina’s

10 min


152

Een groot deel van de optimalisatie van bestemmingspagina’s richt zich op de aandacht van uw bezoekers op wat belangrijk is.

Er zijn veel ontwerptheorieën over hoe dat precies te doen. De meesten zullen onder meer een visuele signaal gebruiken om de aandacht naar een gewenst object te richten.

Visuele signalen hebben sterke wortels in empirisch psychologisch onderzoek en in praktische case studies. Op dit punt is er een grote hoeveelheid gegevens over waarom ze werken, hoe ze werken en hoe je ze moet gebruiken, afhankelijk van je specifieke gebruik.

Wat is een visuele cue?

Visuele aanwijzingen, in grote lijnen, zijn een soort sensorische signalen die door het oog worden verwerkt. Ze bieden informatie en inzicht in hoe de wereld of een specifieke ervaring wordt waargenomen.

Wanneer je praat met verkoopmedewerkers in de echte wereld, zijn er een aantal visuele aanwijzingen – zoals kleine gezichtsuitdrukkingen, lichaamstaal en subtiele tics – die je vertellen of ze echt zijn, of gewoon op je geld uit zijn.

Deze ‘micro-emoties’ zoals Malcolm Gladwell ze noemt , zijn de metadata van menselijke interactie. Of je het nu beseft of niet, je pakt de kleinste signalen op en krijgt “vibes” van iedereen om je heen. De laatste keer dat je dit sterk gevoeld hebt, was na een vriendelijk gesprek met een nieuwe persoon, en toen dacht je: “Huh, ik denk  dat ze me leuk vonden.”

In de context van digitale marketing zijn visuele aanwijzingen elementen die worden gebruikt om de aandacht te richten of een boodschap subtiel uit te beelden met behulp van visuele communicatiemethoden.

Die definities klinken behoorlijk academisch, maar je zou zeker een visuele signaal kennen als je er een zou zien. Hier is een voorbeeld:

Afbeeldingsbron

Er zijn over het algemeen twee soorten directionele aanwijzingen:

  • uitdrukkelijk
  • Impliciet (of suggestief)

“Expliciete aanwijzingen nemen de vorm aan van pijlen of lijnen terwijl suggestieve aanwijzingen beelden gebruiken om de blik van uw prospect subtiel te sturen,” Unbounce legt uit.

Waarom werken visuele aanwijzingen?

Wanneer iemand op je pagina komt, maken ze een zeer snel eerste oordeel, of ze het bewust beseffen of niet.

Mensen maken snelle oordelen. Het duurt slechts 1/10 seconde om een ​​eerste indruk over een persoon te vormen en websites zijn niet anders. Het duurt ongeveer 50 milliseconden (dat is 0,05 seconden) voordat gebruikers zich een mening vormen over uw website die bepaalt of ze uw site leuk vinden of niet, of ze blijven of weggaan.

Deze eerste indruk hangt van veel factoren af: structuur, kleuren, spatiëring, symmetrie, hoeveelheid tekst, lettertypen en meer.

Design is de sleutel tot onbewuste percepties

De eerste indruk is 94% afhankelijk van het ontwerp. Dat vonden de Britse onderzoekers trouwens bij het analyseren hoe verschillende factoren op het gebied van design en informatie-inhoud het vertrouwen van online gezondheidssites beïnvloeden.

Uit de studie bleek duidelijk dat het uiterlijk van de website de belangrijkste aanjager is van eerste indrukken. Visuele aantrekkingskracht en website-navigatie hadden veruit de grootste invloed op de eerste indrukken van de site.

Vergelijkbare resultaten werden gevonden in een studie voor Consumer WebWatch , uitgevoerd door de geloofwaardigheidsexperts van Stanford University. Ze vonden dat wat mensen zeggen over hoe ze het vertrouwen van een website evalueren en hoe ze het echt doen anders zijn.

Uit de gegevens bleek dat de gemiddelde consument veel meer aandacht besteedde aan de oppervlakkige aspecten van een site, zoals visuele aanwijzingen, dan aan de inhoud ervan. Bijna de helft van alle consumenten (of 46,1%) in de studie beoordeelde bijvoorbeeld de geloofwaardigheid van sites op basis van de aantrekkelijkheid van het algehele visuele ontwerp van een site, inclusief lay-out, typografie, lettergrootte en kleurenschema’s.

De top-down theorie van visuele waarneming is de sleutel tot het begrijpen van de waarde van visuele aanwijzingen in ontwerp.

Bij de  zoektocht naar onze relevante informatie gebruiken we bekende aanwijzingen en pictogrammen om onze wegen te bepalen.

In essentie verwerken we visuele stimuli met behulp van onze ervaringen uit het verleden en heuristieken om onze waarneming te vormen. Zoals Simply Psychology het principe samenvatte , “we hebben hogere cognitieve informatie nodig, hetzij uit ervaringen uit het verleden of uit opgeslagen kennis om conclusies te trekken over wat we waarnemen.”

Afbeeldingsbron

Daarom, wanneer u een element van de bestemmingspagina ziet zoals een pijl, een benadrukt tekstvak, een contrasterend element of iemand die een CTA aanwijst of bekijkt, verwerkt u die elementen via uw eerdere ervaringen. Een pijl is in het algemeen een richtsnoer om je aandacht op iets te richten, dus werken pijlen ook online

Visuele cues gebruiken om UX te verbeteren

Visuele aanwijzingen verbeteren de gebruikerservaring door de aandacht te optimaliseren.

Ze werken subtiel of niet-zo-subtiel aan een gebruiker tot een gewenste actie. Hoe kun je vertellen waar visuele aanwijzingen moeten worden geïmplementeerd?  Dit is namelijk waar hittekaarten (heatmaps) heel handig kunnen zijn. Een hittekaart is geweldig handing om u te vertellen waar het meest op een pagina gekeken wordt.

Visuele aanwijzingen zijn ook een nuttige oplossing voor wat bekend staat als de ‘valse bodem’.

De valse bodem wordt ook vaak een logisch einde genoemd en de illusie van volledigheid. In feite is een valse onderkant het punt op een pagina waar een bezoeker van mening is dat de pagina niet verder zal scrollen, ondanks het feit dat er meer inhoud onder dat punt is.

Er is meestal een natuurlijk afleverpunt op de vouw, maar alle andere harde stops moeten worden onderzocht. U kunt ook gebruikers filteren, zodat u geen rekening houdt met junk-verkeer dat meteen weer wordt geactiveerd.

Een andere manier, een beetje duurder en tijd-intensiever, is om eye-tracking-tests uit te voeren . Kijken waar de blik van mensen gericht is, laat je toe om knelpunten in het paginaontwerp te bepalen en mogelijk visuele aanwijzingen te implementeren om die te doorstaan.

Zodra u gebieden vindt die verbeterd moeten worden, hebt u nog steeds de lastige taak om te kiezen welk type visuele actie u moet implementeren en hoe u dit moet doen. Hier zijn enkele voorbeelden van populaire visuele que tactieken …

Voorbeelden van visuele aanwijzingen

De meeste van de volgende zijn gerichte aanwijzingen, zoals pijlen die laten zien dat er meer inhoud in een bepaalde richting is. Sommige zullen subtieler zijn, zoals een vorm inkapselen om aandacht te vragen.

Maar ze zijn allemaal effectief om de aandacht te vestigen op een gewenst gebruikersgedrag.

pijlen

Pijlen zijn een populaire en opvallende visuele que (sorry voor het spammy-voorbeeld):

Ze worden meestal gebruikt om naar een CTA of formulier te verwijzen of om u verder naar beneden op een bestemmingspagina te duwen. Hier is een voorbeeld van de eerste:

In het laatste geval is een sterke directionele que contextueel en beantwoordt hij de volgende vragen voor uw bezoekers …

  • Is er inhoud onder of naast dit punt?
  • Zal die inhoud interessant / waardevol voor me zijn?
  • Hoe lang kan ik verwachten te scrollen?

Er is een pijl aan de onderkant van het scherm. Wanneer u begint te scrollen, ziet u wat u ziet:

Zeer sterke directionele aanwijzingen die u in een lineaire richting langs de pagina trekken.

Een ander voorbeeld is afkomstig van een startpagina van Instapage. Zonder de pijl is het moeilijk om te zien zonder de context van de kop dat er meer inhoud onder de vouw staat:

Directe aanwijzing

Vergelijkbaar met pijlen is de richtings que voor menselijk richten. Nogmaals, dit wordt heel vaak gebruikt om de nadruk te leggen op een bericht, formulier of CTA.

Dan is hier een voorbeeld van Basecamp ( gedeeld door Pagewiz ):

Afbeeldingsbron

driehoeken

Driehoeken zijn vrijwel hetzelfde als pijlen, maar subtieler:

De knop ‘Terug naar begin’ is een populaire integratie voor blogs en inhoud met een lange vorm.

Wanneer wil je terugkeren naar de top? Meestal wanneer u onderaan de pagina bent geraakt. Een knop om terug te keren naar de top kan nuttig zijn, maar kan gemakkelijk het einde van de pagina aangeven als u niet oppast. Overgangssignalen worden nog belangrijker.

Zeker bij lange artikelen is een knop ‘Terug naar begin’ logisch.

Gezien de aard van onze site is het bovendien relatief moeilijk om aan te nemen dat u het einde van de pagina hebt bereikt, terwijl dat niet het geval is. Als u aan het scannen bent, kunt u zien hoeveel inhoud er nog over is met behulp van de schuifbalk.

Driehoeken worden vaak subtiel gebruikt voor gebruiksdoeleinden. WordPress gebruikt het als een inspringing om u te laten weten op welk tabblad u zich momenteel bevindt:

Horizontale navigatie-aanwijzingen

Volgens NN / g-onderzoek blijven zelfs sterke aanwijzingen zoals pijlen vaak onopgemerkt in het geval van horizontaal scrollen. Mensen verwachten verticaal te scrollen, niet zijwaarts. Zijdelings scrollen druist in tegen hun aanvaarde paradigma van website-inhoud en -gedrag.

Afbeeldingsbron

Dit kan evolueren met meer mobiel en tabletgebruik, maar hoe dan ook, het kan worden geholpen door het gebruik van sterke visuele aanwijzingen.

Instapage gaf een goed voorbeeld waar Lumosity directionele aanwijzingen gebruikte voor navigatie:

Afbeeldingsbron

Menselijke visuele aanwijzingen

Marketeers weten dat het gebruik van afbeeldingen van mensen in hun advertenties helpt om de betrokkenheid en meestal de emotionele reactie op de advertentie te vergroten.

“wanneer we iemand naar iets zien kijken, handelen onze hersenen reflexmatig, en we beginnen ook naar dat object te kijken.”

Hieronder een voorbeeld:

Vanessa Van Edwards gebruikt haar homepage heel goed om haar status op te krikken, ze staat alleen voor een menigte en kijkt naar de menigte. Je zult dan wel iets interessants te vertellen hebben als zoveel mensen naar je luisteren.

Hier is nog een recent voorbeeld van de ACLU , die, ondanks het feit dat hij Trump gebruikt als een call-to-action in een gevecht tegen hem, het beeld gebruikt van Trump die naar de donatieknop staart:

Dan is er dit voorbeeld van BarkBox , dat niet echt een mens is, maar dezelfde truc doet:

Afbeeldingsbron

Encapsulatie / Nadruk

Zoals Elisa Silverman op het blog van Pagewiz schreef : “Het inkapselen van belangrijke kopieën binnen een afzonderlijk gebied benadrukt ook dat gebied voor speciale aandacht.”

Inkapseling is een ander voorbeeld van een meer subtiele visuele que. Het is niet zo opvallend als een pijl die met de hand getekend is, maar als het goed wordt uitgevoerd, kan het ongelooflijk effectief zijn in aandacht voor formulieren en bij het genereren van conversies.

Welke visuele aanwijzingen werken het beste?

Daar heb je het: visuele aanwijzingen, als je het op de juiste manier doet, kan de gebruikerservaring verbeteren en op zijn beurt de conversies verhogen. Maar als je kijkt naar de enorme hoeveelheid verschillende soorten visuele aanwijzingen die beschikbaar zijn, worden dingen gecompliceerd.

Je zou pijlen, lijnen, foto’s van mensen, grenzen, wijzende vingers, heldere banners, uitroeptekens, vinkjes kunnen gebruiken … de lijst gaat maar door. Welke visuele aanwijzingen werken het beste?

Om deze studie uit te voeren hebben we eye-tracking tests uitgevoerd op zes gewijzigde afbeeldingen:

We hebben gekeken naar zowel de gemiddelde tijd besteed aan fixeren op het formulier en de gemiddelde tijd tot de eerste fixatie op het formulier. We hebben ook een posttestvraag gedaan met de vraag: “Gezien de webpagina die u zojuist zag, wat zou uw volgende stap zijn om in contact te komen met dit advocatenkantoor?”

Als de deelnemers antwoordden dat ze het formulier zouden invullen om contact op te nemen met het bedrijf, werd het visuele signaal beschouwd als effectief bij het richten van de aandacht op de vorm en daarmee het vergroten van de kans op terugroepactie.

Dus wat gebeurde er?

  • De visuele aanwijzingen hebben invloed op de mate waarin een gebruiker op de vorm let.
    • De handgetekende pijl resulteerde in de langste tijd op het formulier.3. Pijl naar form (sm) watermerk
    • De mens die weg van de vorm keek, resulteerde in de kortste tijd.2. Mens kijkt recht vooruit (sm) met een watermerk

Hoewel elke site anders is, zijn hier enkele empirische gegevens die aangeven dat u wellicht handgetekende gerichte objecten (bijvoorbeeld een pijl) moet testen om de aandacht van gebruikers te trekken.

Als u een afbeelding van een mens als visuele que gebruikt, moet deze persoon in de richting van de CTA of de hoofdfunctie kijken. De wegkijkende mens was de slechtste in termen van fixatietijd.

Wat te vermijden

Er is eigenlijk maar één heuristiek te volgen, zij het een moeilijke en misschien ook een subjectieve: visuele aanwijzingen die de gebruiker niet helpen bij een gewenste actie, leiden er alleen maar van af.

Het is vergelijkbaar met de oude stelregel: “Perfectie wordt niet bereikt als er niets meer aan toe te voegen is, maar als er niets meer over is om mee te nemen.”

Bij het implementeren van visuele aanwijzingen, doe niet gek: laat je doelen leiden naar je ontwerp.

Hoewel afbeeldingen of visuele aanwijzingen zelf meer aandacht kunnen trekken, als ze niet relevant zijn of afleiden van het hoofddoel van de pagina, kunnen ze schadelijk zijn.

Onderzoek heeft aangetoond dat mensen kijken naar waar anderen kijken , maar het effect is minder aanwezig bij mensen op verschillende delen van de schaal van Autisme en varieert ook per geslacht en zelfs politiek temperament.

Bovendien toonde een  eyetracking-studie door EyeQuant aan dat blikzoekers en gezichten niet zo krachtig zijn als marketeers geneigd zijn te geloven.

In dit voorbeeld van Felix + Iris presteerde het menselijke beeld dat naar de CTA / value prop keek slechter dan een productafbeelding:

Afbeeldingsbron

Visuele verwerking is gecompliceerd en moet worden getest.

Aangezien we afbeeldingen zo veel sneller verwerken dan tekst, kun je veel informatie via foto’s overbrengen, maar ze moeten weloverwogen en zorgvuldig worden gebruikt, omdat het gebruik van een onjuiste foto kan eindigen als een afleiding.

Denk bij het kiezen van foto’s na over hoe afbeeldingen uw unieke waardevoorstel versterken of afleiden. Als uw waardepropositie rond emoties is, zouden gezichten goed kunnen werken. Als dat niet het geval is, overweeg dan een productfoto of informatieve afbeelding.

Conclusie

Visuele signalen vormen een cruciaal onderdeel van effectief ontwerp. Ze kunnen worden gebruikt om de aandacht in een bepaalde richting te richten, belangrijke elementen te benadrukken en actie te inspireren.

Zoals met veel dingen gerelateerd aan UX of CRO, is het deels kunst en deels wetenschap. Er is veel creativiteit die bijdraagt ​​aan een effectief bestemmingspaginaontwerp, maar we beschikken over een goede hoeveelheid gegevens om praktische tips voor te stellen (zoals de bovenstaande onderzoeken).

En natuurlijk moet je het allemaal zelf testen (niemand is precies hetzelfde, en ze reageren ook niet op dezelfde manier).


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