Affordance

Toen ik de eerste keer met het woordje “affordance” op de proppen kwam, bekeek iedereen mij een beetje vreemd. Zo met een blik van “jaja, moeilijke woorden gebruiken die niks betekenen”.

Wisten zij veel dat ze eigenlijk op dagelijkse basis met affordance geconfronteerd worden.

Het duurde dan ook maar een fractie van de seconde tot de eerste “What???” ten berde werd gebracht.



Wat is dat eigenlijk? Affordance...



Op zich is het heel erg simpel. Wikipedia legt het uit als volgt: "Affordance is de kwaliteit van een product of een omgeving wat de gebruiker toelaat een actie te ondernemen.”

Om het simpel te houden met een voorbeeld.
Wanneer iemand voor de eerste keer een (normale) schaar ziet, zal het voor deze persoon toch duidelijk worden dat dit een toestel is om iets door te knippen. Zonder dat iemand het gebruik ervan zal moeten uitleggen.



Wanneer gebruikers onmiddellijk de toepassing van een omgeving of een product herkennen, wil dit zeggen dat de affordance hiervan optimaal is.



Ongetwijfeld zijn er nu mensen die denken, ja maar dat is toch simpel. Wie ziet dat nu niet?

In theorie klinkt het inderdaad erg banaal. De praktijk bewijst echter het tegendeel.

Duwen of trekken

Het simpelste voorbeeld dat we kunnen voorleggen is de boodschap op een deur, duwen of trekken.
Hoe dikwijls zie je niet dat mensen tegen een deur staan te duwen terwijl ze moeten trekken en omgekeerd. En dit terwijl we toch dagelijks meermaals een deur gebruiken en ondertussen toch wel zouden moeten weten hoe het werkt.

De affordance van de deur, en natuurlijk ook de deurklink, zijn van groot belang om de gebruiker aan te geven in welke richting deze opengaat. Lijkt simpel niet?
Think again...

Soms maken we het onszelf dan ook nog wat moeilijker.

Zo plakken we soms stickers met bv: duwen op een doorzichtige (bv: glazen) deur. Uiteraard zie je deze sticker dan in spiegelschrift langs de “trekken” zijde.
Ons brein laat het echter toe deze te kunnen lezen en ons als dusdanig aan het twijfelen te brengen.

Hierdoor gaat een groot deel van de mensen alsnog duwen in plaats van trekken. En dit terwijl de affordance van de deur misschien toch optimaal zou kunnen zijn.

Wat heeft dit met web-gui design te maken?

Wel, redelijk veel.


En net als in “real life” is niet alleen de te nemen actie, maar ook de omgeving van belang.



Voorbeeld: Wanneer we button plaatsen in een design is in eerste instantie de positionering van belang, op de voet gevolgd door het feit dat deze button er effectief moet uitzien als een button.
Met andere woorden, heeft de gebruiker het gevoel dat klikken op die locatie een zinvolle actie tot gevolg heeft.

Aangezien men op een computer scherm overal de mogelijkheid om te klikken, dienen de elementen op het scherm aan te duiden welke elementen effectief bedoeld zijn om aan te klikken.

Voor diegenen die nu denken, maar als ik over aan klikbaar object kom met de muis krijg ik een specifieke cursor die aangeeft dat dit element klikbaar is. Een cursor valt niet onder de term affordance. Een cursor is visuele feedback.



Met een touch-screen versus een normaal scherm wordt het een beetje ingewikkelder. Je kan elk scherm aanraken, maar niet elk scherm zal deze detecteren.

Dit zal enkel gebeuren met een touch-screen. De affordance van het aanraken blijft echter in beide gevallen hetzelfde. Hier kan me dus de cursor eventueel gaan gebruiken als een vorm van affordance.


Conclusie

De affordance van een product of een element duidt dus simpelweg aan hoe de visuele perceptie omgezet wordt in enige vorm van actie.

References