Zet contrast in om meer klanten te krijgen

Wikipedia schrijft: “Contrast is het verschil tussen tegenstellingen. Bijvoorbeeld tussen licht en donker of tussen twee kleuren, tussen personen. Een hoog contrast duidt op een groot verschil, zwart en wit, dag en nacht. Een laag contrast duidt op weinig verschil: grijs-tinten onderling bijvoorbeeld.”

Contrast is dus een merkbaar/zichtbaar verschil tussen twee bepaalde elementen. Contrast kom je overal tegen en in veel vakgebieden wordt over contrast gesproken. Maar ook in de wondere wereld van webdesign en online marketing. Waarom en hoe je je voordeel kunt doen door het gebruik van contrast leg ik je in dit artikel uit.

Contrast maakt vergelijken makkelijk

Doormiddel van het gebruik van contrast kun je heel eenvoudig een vergelijking maken. Dit kan uiteraard in meerdere vormen, maar vaak wordt dit gedaan door het gebruik van foto’s.

Een heel bekend – en veel gebruikt – voorbeeld is de voor/na-foto van een sportschool. De voor-foto toont de huidige situatie en de na-foto toont de gewenste situatie, het doel.

Vooral het doel, de gewenste situatie, is een enorm goede trigger voor mensen om over te gaan tot actie. Doordat ze het resultaat zien, voelen ze zich aangesproken. Mensen zijn erg resultaat-gericht. Ze willen hetzelfde resultaat bereiken als op de foto wordt getoond.

Schets de huidige situatie, en het ideaalbeeld

Mensen die aan de slag willen met afvallen of het krijgen van een gespierder lichaam kunnen zich eenvoudig identificeren met de voor-foto. De huidige situatie, de situatie waar zij zich op dat moment ook in bevinden.

Dit is de situatie waar ze uit willen komen, die ze willen verlaten.

Doordat ze direct de na-foto zien, zien ze ook meteen wat het resultaat kan zijn van sporten. Je kunt dan in één oogopslag de vergelijking maken tussen hoe het nu is en hoe het kan zijn als je aan de slag gaat bij deze sportschool.

Je wordt direct getriggerd omdat je het resultaat kunt zien van het bezoeken van een sportschool.

Uiteraard zijn er talloze andere voorbeelden te bedenken waar je de voor/na-foto wordt ingezet om via contrast het resultaat te laten zien. Denk aan:

• Kapsalons. voor-foto: het oude kapsel / na-foto: een mooie nieuwe, frisse coupe.
• Schildersbedrijven. voor-foto: saaie, afgebladerde muur / na-foto: een mooie strakke muur.
• Tuincentra. voor-foto: een kale, dorre tuin / na-foto: een prachtig gevulde, groene tuin.
• Fotograven. voor-foto: niet-sprekende zelf-gemaakte foto’s / na-foto: sprekende, optimaal belichte foto’s.

Gebruik emotie om contrast te tonen in een foto

Hierboven staan slechts enkele voorbeelden van manieren om contrast te gebruiken. Dit zijn vooral fysieke manieren om contrast te duiden. Ze geven heel duidelijk een beeld van hoe het eerst was en hoe het kan zijn.

Echter kun je ook heel goed met emotie contrast aantonen. Hoe dan? Vraag je je misschien af. Heel simpel, door het effect van jouw product of dienst op iemand te laten zien.

Ben je advocaat dan kun je je voorstellen dat iemand die een geschil heeft zich nu niet helemaal fijn voelt. Wellicht gespannen en gestresst. Doormiddel van jouw diensten kun je deze persoon helpen met zijn geschil. Mensen die geholpen zijn – als het goed is – vrolijk, opgelucht en blij dat alles achter de rug is.

Zie je hier ook het contrast? Iemand die gestresst is, niet weet hoe de situatie beter kan worden… En aan de andere kant iemand die blij en opgelucht is.

Ook deze situatie kun je perfect in een voor/na-foto vastleggen. Aan de ene kant een foto van iemand met de handen in het haar. Het huilen staat nader dan het lachen.

Aan de andere zijde iemand die blij is, lacht, opgelucht kijkt.

Contrast heeft aantrekkingskracht

Naast het makkelijk maken van vergelijkingen en het tonen van de ideale situatie kan contrast in webdesign goed worden ingezet om elementen op te laten vallen en daardoor de aandacht van de bezoeker te grijpen.

Door een contrasterende kleur te gebruiken, zal dat element extra opvallen ten opzichte van alle elementen op die pagina.

Maar waarom zou je dat willen? In het geval van hele belangrijke elementen, zoals de knop om een tafel te reserveren op de website van een restaurant, wil je dat alle bezoekers deze knop zien en ze er niet naar hoeven te zoeken.

De knop moet meteen zichtbaar, duidelijk zijn zodat er geen onduidelijkheid bestaat over hoe je het makkelijkst en snelst een tafel kunt reserveren.

Dus als regel kun je gebruiken: Heb ik een element waar mensen op moeten klikken? Gebruik dan een contrasterende kleur.

Zeker in het geval van een goede call to action is het van belang dat je een contrasterende kleur gebruikt om deze extra op te laten vallen.

Doe de ooghaar test

Je kunt heel eenvoudig testen of bepaalde elementen, waarvan jij denkt dat ze opvallen, ook daadwerkelijk opvallen. Doe je ogen dicht en kijk door je oogharen naar je website of pagina. Vallen de elementen nog steeds goed op of verdwijnen ze een beetje in het niets?

Hieronder een voorbeeld van een contrasterende knop en een niet-contrasterende knop:

Als je door je oogharen kijkt, valt de oranje knop duidelijk veel beter op dan de groene knop. Wanneer je snel scroll is er een grote kans dat je zo voorbij de groene knop zal scrollen. In het geval van die oranje knop is die kans al stukken kleiner.

Complementaire kleuren

Maar wanneer is een kleur contrasterend? Daarvoor kun je het beste een complementaire kleur nemen. Dat is een kleur die aan de andere kant van het kleurenwiel staat. Als vuistregel kun je stellen dat de volgende kleuren complementair aan elkaar zijn:

• Rood & Lichtblauw
• (Donker)blauw & Geel
• (Licht)blauw & Oranje
• Groen & Paars

Het is niet voor niets dat veel merken ook gebruik maken van deze kleuren. Zoals Ikea (blauw, geel), Pepsi (blauw & rood) en Coolblue (oranje & blauw).

Wil je weten welke kleur complementair is aan een bepaalde kleur en daarom het beste contrasteert? Daar kun je dit programma voor gebruiken: https://www.canva.com/colors/color-wheel/ (overigens een geweldig artikel over kleuren en kleur-theorie).