Laat je online content opvallen: tips voor optimale usability

Hoe kan het dat sommige content op een pagina niet gezien wordt, terwijl deze toch prominent in beeld is? Ondanks het feit dat deze informatie op ons netvlies terecht komt, wordt deze blijkbaar niet altijd bewust waargenomen. In dit artikel bespreken we enkele cruciale aspecten van visuele waarneming, zoals contrast en crowding. En hoe deze ingezet kunnen worden voor optimale usability.

Ik zie, ik zie wat jij niet ziet…

Wanneer een object op een webpagina door een gebruiker niet gezien wordt kan dit meerdere oorzaken hebben. Gebruikers zullen doorgaans met een specifieke intentie en voorgeschiedenis op een website komen. Wanneer iemand besluit om blauwe schoenen aan te schaffen, zal de kans groot zijn dat schoenen met een andere kleur gedurende dit zoekproces genegeerd zullen worden. Dit is een voorbeeld van het sturen van visuele aandacht naar een specifieke categorie (blauwe schoenen), met als gevolg het negeren van objecten die niet binnen deze categorie vallen. Dit wordt selectieve perceptie genoemd.

Dit is trouwens de reden dat men tijdens het afnemen van een UX- of usability-onderzoek geen specifieke termen wil noemen die op de te onderzoeken website vermeld staan. Dit stuurt immers de aandacht en zal het natuurlijke zoekgedrag van de gebruiker ongewenst beïnvloeden.

Overigens staat het sturen van de focus van visuele aandacht (de zogenaamde attentional spotlight) los van het maken van oogbewegingen. Zonder het maken van oogbewegingen ben je prima in staat om je aandacht over verschillende locaties in je gezichtsveld te laten gaan, in sommige gevallen zelfs meerdere locaties tegelijkertijd. Zelfs terwijl je ogen stil staan ben je dus in staat om specifiek te ‘kijken’ naar verschillende locaties in het visuele veld. Lees enkele treffende demonstraties hiervan.

Gevolg sturen van aandacht

Een gevolg van het sturen van aandacht is dat het waarnemen van overige informatie, waar op dat moment niet op gelet wordt, hier negatief door beïnvloed wordt. Een bekend voorbeeld hiervan is te zien in het onderstaande filmpje. Hierbij wordt een object dat duidelijk in beeld is door de meeste mensen in eerste instantie over het hoofd gezien. In dit filmpje wordt de aandacht voornamelijk gericht op het aantal keer dat het witte team de bal overspeelt. Met andere woorden, aandacht ergens actief op richten (het witte team), kan ervoor zorgen dat overige informatie niet meer wordt waargenomen, ondanks het feit dat het wel op het netvlies terecht komt.

De intenties en voorgeschiedenis van een gebruiker zijn helaas vaak niet te beïnvloeden door degene die de pagina vorm geeft. In dit stuk focussen we ons daarom op het gedeelte dat wel door een websiteontwikkelaar te beïnvloeden is: design en vormgeving.

Aandachttrekkers

Een lichtje dat knippert in de rand van je gezichtsveld. Het piepje bij de McDonald’s dat aangeeft dat de ‘french fries’ de frituur uit mogen. Iemand die je naam roept. Allemaal voorbeelden van situaties in het dagelijks leven. Je aandacht wordt getrokken door een object, hetzij visueel of auditief. Het feit dat je aandacht in deze voorbeelden getrokken wordt, geeft aan dat deze informatie prioriteit krijgt bij het verwerken ervan in je brein. Anders gezegd, je eigen naam is belangrijk voor je, wanneer deze geroepen wordt zal het verwerken hiervan voorrang krijgen boven andere informatie, met als gevolg dat dit vrijwel direct je aandacht trekt.

Wat is contrast? Vier vormen

Een belangrijke reden voor de opvallendheid van een object is de mate waarin dit object afsteekt ten opzichte van de omgeving. Hoe groter dit verschil, hoe opvallender het object. Een algemene maat om aan te geven hoeveel een bepaald object verschilt ten opzichte van de omgeving is contrast. Een bekende vorm van contrast is kleurcontrast, geïllustreerd in de afbeelding hieronder. Hierbij is er een object dat qua kleur verschilt ten opzichte van de overige objecten. Hoe groter het verschil in kleur (hue), hoe groter het kleurcontrast. Overige vormen van contrast, zoals vormcontrast, groottecontrast en verzadigingscontrast worden geïllustreerd in onderstaande afbeelding.

Verhoog het contrast

Een voor de hand liggende oplossing om bijvoorbeeld een button die niet snel gezien wordt door gebruikers meer opvallend te maken, ligt in het verhogen van het contrast. De gedachte hierachter is dat een button met meer contrast sneller waargenomen zal worden. Maar welk type contrast moet hierbij gekozen worden? Moet de button groter gemaakt worden? Anders van kleur? Anders van vorm? Of allemaal tegelijk? Hoe beïnvloeden de verschillende vormen van contrast elkaar en de omgeving? En wat zijn de consequenties voor de rest van de pagina?

In de afbeelding hieronder zijn twee versies van een menuonderdeel van dezelfde webpagina getoond. Eén standaard versie (links) en één ‘hoog contrast’ versie (rechts), zoals aangeboden op de website zelf. In dit geval is het beoogde resultaat dat het veranderen van de achtergrondkleur naar zwart en de tekstkleur naar groen de leesbaarheid van de tekst zal vergroten. In het getoonde voorbeeld is de verhoogde leesbaarheid echter niet direct duidelijk. In dit geval is ook de opmaak van de tekst verloren gegaan (waaronder de ruimte tussen de regels), wat de leesbaarheid niet ten goede komt.

Veranderingen in de vorm of grootte zullen enerzijds niet altijd praktisch zijn en anderzijds ook niet per definitie zorgen dat content meer opvalt. Eén van de meest voorkomende redenen waarom content op webpagina’s over het hoofd gezien wordt, en die niet te maken heeft met de intenties van een gebruiker, heeft te maken met een fenomeen dat bekend staat als crowding.

Crowding

Bekijk de afbeelding hieronder en kijk naar de stip links bovenaan. Kijk vervolgens of het getal rechts in beeld makkelijk te herkennen is. Kijk dan naar de stip links onderaan en kijk of het middelste getal rechtsonder dit keer nog steeds makkelijk te herkennen is. De kans is groot dat het middelste getal rechts onderaan dit keer een stuk lastiger te identificeren is. In dit geval zorgen de getallen links en rechts van het middelste getal ervoor dat deze een stuk lastiger waar te nemen is.

Crowding: funest voor visibility en usability

Dit gegeven wordt crowding genoemd, het feit dat waarneming van een object aan de rand van het gezichtsveld negatief beïnvloed wordt door objecten die er dicht bij in de buurt staan. Crowding kan op websites funest zijn voor de usability. Het te dicht bij elkaar plaatsen van objecten kan ertoe leiden dat objecten niet direct gezien worden, met als gevolg dat de gebruiker de complete pagina zal moeten scannen op zoek naar het relevante object.

Zoals de afbeelding hieronder zal het verhogen van kleurcontrast van het centrale getal ten opzichte van de omgevende getallen niet direct de waarneembaarheid ervan vergroten. Ook de overige eerder genoemde contrastvormen zullen in dit geval het middelste getal niet enorm beïnvloeden qua leesbaarheid. Dit verklaart waarom het veranderen van de eerder genoemde vormen van contrast niet direct een meer opvallend object tot gevolg zal hebben.

De oplossing is in dit geval echter eenvoudig. Claude Debussy hintte er al naar toen hij zei dat muziek bestond uit de ruimte tussen de noten. In dit geval zal het vergroten van lege ruimte rondom een object (bekend als whitespace, iets dat ondanks de naam helemaal niet wit hoeft te zijn) de opvallendheid van dit object vergroten, omdat crowding hierdoor verminderd wordt.

De ruimte tussen de content

Het vergroten van de ruimte rondom een object zal de opvallendheid ervan drastisch vergroten, zoals te zien in de afbeelding hieronder.

Door het vergroten van de witruimte rondom een object zal crowding verminderd worden, hetgeen tot gevolg heeft dat dit object sneller en makkelijker gevonden kan worden omdat het object nu ook vanuit je ooghoeken te zien is. Zonder het veranderen van bijvoorbeeld kleurcontrast op de pagina is de vindbaarheid van een object dus eenvoudig aan te passen, simpelweg door er minder omheen te zetten of de afstand tot nabije objecten te vergroten.

Enkele voorbeelden van optimaal gebruik van whitespace zijn te vinden op onder andere de website van Apple, zoals te zien in onderstaand figuur. De belangrijkste informatie staat op deza pagina prominent in beeld, zonder afleiding door naburige objecten. Visuele aandacht wordt in dit geval direct getrokken door de relevante content op de pagina.

3 tips om visibility en usability te verhogen en crowding te verminderen

Hierboven beschreven we waarom crowding, de mate waarin de opvallendheid van een object door nabije objecten beïnvloed wordt, een cruciale rol speelt bij de manier waarop een gebruiker content waarneemt. Effectief omgaan met witruimte rondom objecten zal crowding verminderen, de opvallendheid van een object drastisch verhogen en er mede toe bijdragen dat online content sneller en makkelijker gevonden zal worden. Hierbij drie aandachtspunten met betrekking tot het verminderen van crowding:

1. Wanneer een object op een pagina niet gezien wordt zal in veel gevallen het verhogen van contrast alleen niet zorgen voor een hogere ‘visibility’ van dit object. Met name wanneer een pagina veel content bevat is de kans groot dat crowding een rol speelt. De meest eenvoudige manier om crowding op te heffen is door het vergroten van whitespace rondom het betreffende object.
2. Aanvullend hierop: het tegelijkertijd verhogen van contrast van meerdere objecten op een pagina om deze meer opvallend te maken is af te raden. In het gunstigste geval blijft het contrast van deze objecten ten opzichte van elkaar namelijk gelijk, in het ergste geval wordt crowding in de hand gewerkt met als gevolg een lagere opvallendheid van de individuele objecten.
3. Minder is beter, puur vanwege het feit dat dit zowel contrastverhogend werkt en de rol van crowding vermindert. In het voorbeeld van de Apple homepagina wordt aandacht vrijwel exclusief getrokken door de iPads, alleen al vanwege het feit dat er verder bijna niks op de pagina staat.