Fotografie in UX: do or don’t?

Om je bezoeker de beste gebruikerservaring te bieden, staan de look en feel van een website tegenwoordig steeds meer centraal. Lange lappen tekst en een tekort aan overzicht worden niet meer gewaardeerd. In plaats daarvan moeten websites snel laden, een duidelijke navigatie hebben, logische feedback sturen en de gebruikers een algehele positieve beleving geven. Veel sites proberen deze ervaring te verbeteren of aan te vullen door afbeeldingen in te zetten. Dit kan in het klein, maar gebeurt tegenwoordig steeds vaker banner breed of zelfs paginagroot.

Hoewel foto’s een emotionele waarde kunnen toevoegen aan je pagina, kunnen ze ook een afleidende factor zijn. Het gebruik van afbeeldingen heeft lang niet altijd een positief effect. Wanneer foto’s worden ingezet, is het van belang om van te voren goed na te lopen waar, wanneer en met welk doel de afbeelding zichtbaar is voor de bezoeker. Waar de ene foto gepaard kan gaan met een hogere conversie, kan de andere foto een ultieme domper zijn op je cijfers. Wanneer kan een foto nu wel helpen bij het verhogen van je conversie?

1. Relevantie

Als allereerste is het van belang dat, wanneer er een afbeelding wordt gebruikt op een website, deze ook daadwerkelijk iets toevoegt op de pagina. Gebruikers moeten bij het zien van de foto meteen begrijpen waar de pagina over gaat. Minder of niet relevante foto’s kunnen voor verwarring zorgen bij de gebruiker, waardoor er een mismatch ontstaat tussen de tekstuele en visuele content van de pagina.

Fotografie in UX
In deze banner van Holiday Inn vullen de tekst en afbeelding elkaar sterk aan. De afbeelding is relevant voor de rest van de pagina.

Zo zal een foto van een lachend koppel in de keuken minder effect hebben op een pagina voor autoverzekeringen, dan wanneer datzelfde koppel in een auto gefotografeerd is. En ook stockfoto’s die puur als opvulling gebruikt worden en geen verder doel hebben, kunnen beter vermeden worden. Wanneer tekst en foto elkaar wel goed aanvullen, kan dit effect elkaar juist versterken en een daarmee een positief effect hebben op je conversie.

2. Focus

Een afbeelding op een website gaat vaak gepaard met tekst. Waar teksten eerder bewust gelezen worden, zullen goede afbeeldingen juist onbewust verwerkt worden. Door een afbeelding de juiste focus te geven, kost het bekijken van de afbeelding minder cognitieve inspanning. De juiste focus behaal je door bijvoorbeeld een specifiek onderwerp uit te lichten of de foto op de juiste manier bij te snijden (in lijn met de regel van derden). Dit maakt een afbeelding niet alleen sterker, maar ook emotioneel waardevoller.

Fotografie in UX
Door de afbeelding in negen gelijke vakken te delen ontstaan er vier kruisingen. Op deze punten is de afbeelding het sterkst. De vlieg heeft hierdoor veel focus gekregen.

Foto’s zonder focus (bv. foto’s die een overzicht geven van een bepaalde scène) leiden eerder tot verwarring. Gebruikers zullen juist meer cognitieve inspanning moeten tonen om erachter te komen wat het focuspunt van de foto is. Aan de andere kant kan het bewust vervagen of blurren van een afbeelding juist helpen bij het verleggen van de focus op een andere element op de site zonder dat de waarde van de afbeelding verdwijnt.

3. Plaatsing

Vervolgens zul je ook rekening moeten houden met de grootte en de plaatsing van de afbeelding. Normaliter worden de foto’s die een bijdrage leveren aan de pagina bovenaan geplaatst, zodat deze als eerste waargenomen worden. Dit soort foto’s zijn er vaak op gericht om het publiek een positief gevoel te geven bij het aangewezen merk of product. Denk bijvoorbeeld aan een vakantiefoto van de reisbestemming op de boekingspagina van een reisorganisatie.

Houd er wel rekening mee dat wanneer een pagina veel informatie bevat, deze juist door de foto onder de vouw terecht kan komen. Dit beïnvloedt het scrollgedrag van de gebruiker en kan daardoor ook van invloed zijn op de conversie van je website. Foto’s bijsnijden naar een smaller bannerformaat kan daarentegen de focus van de foto weghalen en dus ook negatief uitpakken.

4. Kwaliteit

We hechten veel waarde aan foto’s van hoge kwaliteit. Afbeeldingen die net niet helemaal scherp zijn, te donker oogen of afleidingen bevatten kunnen de gebruikerservaring al snel negatief beïnvloeden. Tegelijkertijd is het van belang dat, wanneer foto’s van hoge kwaliteit zijn, deze niet de laadsnelheid van de pagina beïnvloeden. We spreken hier dus over kleine gecomprimeerde bestanden, die nog steeds genoeg informatie moeten bevatten om de boodschap over te brengen. Zo hebben webshops veelal de mogelijkheid om foto’s uitvergroot in detail te bekijken, wat voor velen een toevoeging is op de gebruikservaring.

5. Stock versus natuurlijk

Al kort benoemd, is het stockfoto fenomeen. Deze makkelijke, snelle en goedkope mogelijkheid om foto’s rechtenvrij in te zetten, heeft in de laatste jaren zijn populariteit verloren. Gebruikers zijn toe aan natuurlijke foto’s die specifieke scenario’s in kaart brengen voor de bekeken website of pagina. Het voordeel hiervan is dat deze natuurlijke foto’s een bepaalde echtheid met zich meebrengen en daardoor dichter bij de realiteit staan. Dit kan bijdragen aan het inlevingsvermogen van de gebruiker, en dus een sterker emotioneel effect hebben. Stockfoto’s, daarentegen, hebben het risico om te algemeen te zijn en zullen dus minder snel dit effect teweeg brengen.

Fotografie in UX
Links: Stockfoto. Rechts: Airbnb’s homepage waar goed gebruikt wordt gemaakt van een real life scene.

Foto’s kunnen in zekere mate dus de ervaring van de bezoeker naar een hoger niveau tillen, mits ze op de juiste manier gebruikt worden. Wanneer foto’s niet relevant zijn, een duidelijke focus missen, alle belangrijke informatie naar beneden duwen, onscherp zijn of te algemeen zijn, is het dus beter om deze afbeeldingen geheel achterwege te laten. Afbeeldingen die wel op de juiste manier ingezet zijn kunnen daarentegen een versterkend effect hebben op de content van de pagina, en, op zijn beurt de conversie positief beïnvloeden.

Marcel Stommel - user experience expert

Bij Online Dialogue helpen we opdrachtgevers betere en betrouwbaardere beslissingen te nemen. Om dit te bereiken maken we gebruik van data en psychologie in combinatie met bedrijfsadvies en verandermanagement. Als UX designer was Marcel dagelijks vol enthousiasme bezig met het vertalen van data en psychologie naar visuele designs om zo een optimale gebruikerservaring te creëren. Inmiddels is hij werkzaam bij Ahold.