Filter
ChatGPT Wat UX-designers kunnen leren van een theepot
Wat maakt een theepot een theepot? Waardoor herken je een theepot? Hoe herkennen gebruikers van een object de functie ervan en weten ze wat ze ermee moeten doen? UX/UI’ers zorgen ervoor dat gebruikers digitale designoplossingen herkennen en succesvol weten te gebruiken. Maar wanneer zijn UX/UI-oplossingen acceptabel? Herkenbaarheid, interpretatiegemak en frictieloos een opdracht weten te vervullen gaan hand in hand. Dit is de basis van digital affordance.
Dit is een theepot. Iedereen die niet geboren is op een onbewoond eiland (dat kan ook niet, maar dat terzijde) herkent dit object en zal het benoemen als een theepot.
Een doorsneetheepot herken je aan een aantal elementen die hem definiëren. Een reservoir voor de thee, een deksel om hem te openen zodat er heet water in kan, een handvat waarmee je de theepot oppakt en de thee schenkt, en een tuit waar de thee dan uitkomt. Deze is nog eens extra duidelijk omdat je ook nog eens kan zien wat er inzit. Een hele duidelijke theepot dus (je kunt er natuurlijk ook koffie in doen, maar dan doe je gewoon raar).
Wat is affordance?
Het voorwerp hierboven is ook een theepot. Deze theepot doet precies hetzelfde als de vorige. Tuit, handvat, deksel, thee erin, gieten. Maar als we het op dit moment niet over theepotten zouden hebben, weet ik zeker dat je iets langer moet kijken om te zien dat het een theepot is. Daar gaat in de basis affordance over: ‘de perceptie van de functie van een object.’ Er is geen Nederlands woord voor, vandaar de ingewikkelde zin die het moet duiden. Simpeler: ‘ik weet wat dit ding doet, en ik weet wat ik ermee moet doen.’
Het herkennen van een product en de functie ervan
Terug naar de theepotten. De onduidelijke theepot is nog steeds een theepot. Iedereen die de bovenstaande alinea’s gelezen heeft kan voortaan naar dit specifieke exemplaar kijken en meteen zeggen dat het een theepot is. Affordance is herkenning van een object en de functie ervan. Ik kan je echter nog tien andere theepotten laten zien die net zo onduidelijk zijn. Je moet daar toch weer even naar kijken om de functie en precieze werking te doorgronden. Affordance wordt aangeleerd. Maar aanleren kost tijd, en soms zelfs moeite.
Affordance in het digitale landschap
Tijd hebben we niet. En moeite doen, daar hebben we al helemaal geen zin in. Zeker niet in het digitale landschap. Ik wil een app of een website omdat die mijn leven makkelijker maakt, niet om een nieuwe uitdaging aan te gaan. Hoe vaak heb je geen ruzie gehad met een app of website? Bijvoorbeeld omdat je iets niet kon vinden, of omdat je niet begreep wat je precies moest doen, of dat de verwachte interactie niet bleek te kloppen met wat er daadwerkelijk gebeurde?
Soms moet je iets aanleren
Soms móét je natuurlijk wel even doorbijten. Dan ben je wel verplicht om iets ‘aan te leren’. Niet alle apps of websites hebben immers een goed of beter alternatief. Een DigiD heeft bijvoorbeeld helemaal geen digitale concurrentie. Het hele idee van DigiD is dat je één account hebt waar je je overheidsgerelateerde zaken kunt regelen. Net als het gemeentehuis is er maar één plek waar je deze zaken kunt afhandelen. Want er is maar één overheid.
Of Airbnb. Dit bedrijf heeft door zijn disruptieve werking een nichemarkt gecreëerd waar het op dit moment nog altijd zwaar dominant is. Er zijn zeker wel alternatieven, maar Airbnb is altijd top of mind als je een verblijfslocatie zoekt buiten het hotelcircuit om. Qua aanbod en gebruikersmassa kan niemand daar op dit moment snel iets aan veranderen. Content/aanbod is vaak king. Dus ga je naar Airbnb en zoek je misschien niet eens verder.
Concurrentie
Producten of diensten met een monopoliepositie zijn echter niet de norm. Een heleboel digitale oplossingen hebben genoeg concurrentie of alternatieven, zeker in de commerciële sector. Moeten gebruikers meer moeite doen in jouw app dan in die van de concurrentie? Of snappen gebruikers soms zelfs helemaal niet wat ze nu precies moeten doen met jouw digitale oplossing, dan verzwak je je product tegenover de concurrentie. Het kan hét verschil maken tussen boeken bij Booking.com of Trivago.nl, of shoppen bij de online store van Footlocker of Perry Sport.
De invloed van affordance op UX-keuzes
“Wat doet dit dan?” of “Hoe werkt het dan?” zijn dus niet echt vragen die je als ontwerper wil horen van een gebruiker. Je creëert met je oplossing op dat moment een probleem voor de gebruiker, want hij moet iets gaan oplossen. We proberen juist iets te realiseren wat voor de gebruiker iets oplost of makkelijker maakt. Soms heeft dit probleem te maken met affordance.
Als UX’er creëer je geen problemen, maar oplossingen.
Een klein voorbeeld op de homepage van Trivago.
Dit is een redelijk normale zoekbalk. Functie: zoeken en vinden van een hotel waar je kunt overnachten. Dat weet ik, want dat staat erboven. En ik ken Trivago van de televisiereclame, dus ik weet wat Trivago doet. Ook is de oplossing ‘zoekbalk’ zo algemeen geworden dat ik weet wat een zoekbalk doet. Een goede affordance dus voor een gemiddelde internetgebruiker. Net als een theepot heeft voor de gemiddelde mens.
Maar wat is dit dan precies?
Dit icoon bepaalt je huidige locatie (weet ik nu). Handig voor als je vanuit je huidige locatie een hotel moet vinden in de buurt. Je hoeft dan niet te gaan typen, maar de website gaat dan meteen zoeken vanuit je huidige plek. Niks mis met dat concept. Probleem is, ik wist niet precies wat het deed toen ik er voor het eerst kwam. En ik ging dat ook echt pas snappen toen ik de uitleg las via een mouseover.
Dat ik niet wist wat het deed komt door meerdere zaken. Ik ben niet de hele dag bewust bezig met mijn locatie. Ik heb het dus niet heel vaak nodig, dus ik zie dit icoon ook niet zo vaak of misschien zelfs nooit. Daarnaast worden er in het digitale landschap ook nog weleens andere iconen gebruikt om locatie te duiden, zoals deze voorbeelden.
Was het icoon bij Trivago vervangen door de eerste uit de reeks hierboven, dan had ik het wel begrepen. Dat icoon heb ik veel vaker gezien en gebruikt. Mijn begrip van het icoon is veel groter dan het icoon dat gebruikt wordt bij Trivago.
Dit is deels persoonlijk. Andere gebruikers kennen het andere icoon misschien veel beter. Deze mensen hebben dit icoon vaker gezien en gebruikt en herkennen het dus sneller. Persoonlijk had ik ergens wel een idee dat het iets met locatie te maken moest hebben, maar zeker wist ik het niet. Ik ben er 100 procent zeker van dat meer mensen tegen dit probleem aanlopen. Of misschien hebben ze nog niet eens dat er een interactie op zit en dat ze er iets mee kunnen.
Had er gewoon een label met ‘mijn locatie’ onder het icoon gestaan, dan had ik het veel sneller begrepen. Iconen + label is vrijwel altijd beter dan alleen een icoon, of alleen een label.
3 belangrijke aspecten bij UX en interaction design
Wanneer is iets dan wel of niet acceptabel? Dat is een vraag die UX- en interaction designers zichzelf vaak stellen. Die ze bij het bedenken van een oplossing móéten stellen. Je zou het een kerntaak van de designer kunnen noemen. Het werk van UX en interaction design is namelijk om complexe technische structuren door te vertalen naar gebruiksvriendelijke handelingen die zo min mogelijk weerstand en frustratie oproepen, en juist een gevoel van gemak.
Drie zaken zijn hierbij in ieder geval belangrijk:
- Zichtbaarheid: is de oplossing duidelijk genoeg te vinden en te interpreteren?
- Herhaling: hoe vaak heb ik iets gezien? Hoe lang worden mensen al met dezelfde oplossingsvorm geconfronteerd?
- Uniformiteit: hoeveel websites en applicaties gebruiken dezelfde elementen of communicatie zodat er een mate van uniformiteit ontstaat?
1. Zichtbaarheid
Zichtbaarheid is fundamenteel. Want je kunt pas interpreteren dat ergens een bepaalde interactie of oplossing zit, als je deze ook kan vinden en herkennen (je kunt het bijna niet meer over affordance hebben als gebruikers de theepot nog niet eens zien staan).
Een voorbeeld hierbij zijn buttons en ghost buttons. Als je bijvoorbeeld een button wil plaatsen op je website of in je app, die ook de functie van een button heeft (namelijk een actie uitvoeren), dan moet deze er wel uitzien als een button, om een goede affordance te realiseren.
Deze drie buttons hebben dezelfde functionaliteit. Toch werkt de rechter button het beste, want hij ziet er het meeste uit als een traditionele interpretatie van een button. De linkerbutton kan ook een link zijn, of nog erger, gewoon tekst (hangt van de context en de rest van het design af). De middelste heeft een kleiner, maar toch een probleem op herkenbaarheid van de interactie. Want tags zien er vaak ook zo uit, en deze zijn niet altijd interactief. En door het flat design kan hij wegvallen in een design.
De derde is de buttonvariant van de eerste theepot. Niet mooi, wel duidelijk een echte button.
Ghost buttons
Een ander voorbeeld van een mooi trendgevoelig design, maar discutabele oplossing is de ghost button (of hipster button). Vooral te zien op ‘stijlvolle’ websites die wat meer exclusiviteit willen uitstralen of hip willen doen, want ze zien er designwise mooi uit. Ze vallen echter niet snel of genoeg op. Ze vallen weg in de achtergrond en kunnen moeilijk leesbaar zijn. Gebruikers snappen niet dat het een button is, et cetera. Dit is het probleem van de tweede theepot. Hij ziet er bij nader inzien wel uit als een button, maar is daar niet heel duidelijk in. Hij gaat in tegen de normale affordance van een button. Hij wil eigenlijk geen button zijn, maar een stijlelement.
Vaak moeten designers dus allemaal andere trucs uithalen om de gewilde ghost button toch in het design naar voren te laten komen. Maar in principe wil je dus eigenlijk de gebruiker een beetje negeren om een betere smoel te krijgen voor je website.
2. Herhaling
Zo’n beetje iedereen in Nederland kent wel een theepot. Je bent er waarschijnlijk mee opgegroeid. En hebt er al liters thee uit gedronken. Toch was er een moment dat je voor het eerst een theepot zag. En dan zegt een theepot je een stuk minder. Nu is een theepot iets waar je waarschijnlijk mee geconfronteerd bent toen je heel klein was. Toen moest je alles nog leren, dus was er niet echt een probleem, want je begreep een hele hoop sowieso al niet.
Maar wat nou als je nu als gebruiker iets ziet wat je nog nooit gezien hebt? Dan moet je dus zaken opnieuw gaan herkennen en leren interpreteren. Wat is dan acceptabel voor mensen, en wat levert een goede ervaring op?
Het hamburger-menu
Neem als voorbeeld de menu-button, oftewel het ‘hamburger-menu’. Sinds de komst van de mobiel, mobiele apps en mobiel internet is dit menu steeds gangbaarder geworden. Je mag misschien wel zeggen dat hij op dit moment genoeg affordance heeft om hem gewoon te gebruiken in je design. Want honderden apps gebruiken het en mensen zijn er nu wel aan gewend. Hij komt tegenwoordig zelfs op desktop gewoon terug. Dat is eigenlijk belachelijk, want hij is vooral bedoeld om menu-navigatie op een klein scherm te faciliteren.
Toen dit icoon een paar jaar geleden echter in design begon te sluipen, was hij helemaal niet zo duidelijk. Want hij was nieuw, en mensen snapten hem niet. Als niemand erop klikt, vinden mensen je menu niet. Een simpel woordje ‘menu’ is klein en 4 letters lang, waarom niet gewoon dat gebruiken? Omdat het lelijk is? Duidelijker is het hamburgertje in ieder geval niet.
De komst van nieuwe technologie vraagt natuurlijk altijd wat van gebruikers. Een leercurve bij je nieuwe VR Holodeck Bril 2.0 heb je altijd. Door het gebruik van onduidelijke of nieuwe beeldtaal wordt het er alleen niet makkelijker op. Zelf nieuwe of niet-gangbare oplossingen introduceren om zaken te communiceren, zal altijd een berg van initiële frustratie opleveren bij een groep gebruikers. Als het niet hoeft, niet doen. Niet alles wordt ooit zo gangbaar als een play-button of een hamburger.
3. Uniformiteit
Een grote groep interactie-elementen heeft in de loop der jaren genoeg affordance opgebouwd, waardoor jij ze zonder al te veel zorgen kunt inzetten. De play-button op je videospeler, het vergrootglas bij het zoekveld, et cetera. Er is echter nog een vrij groot scala aan elementen die ofwel nog steeds niet de status van ‘standaard’ of een grote affordance heeft bereikt. En daar gaat het soms mis. Want als er geen standaard is, wat werkt dan het beste?
Neem nu het delen-icoon.
Ook weer vanuit mobiele oplossingen ontstaan, want op desktop heb je vaak dit:
De vier linkericonen zijn elementen waar je hedendaags wel raad mee weet (alleen de + is een klein mysterie, want wat zit erachter, in ieder geval ‘meer’?)
Neemt niet weg dat de mobiele plaatsbesparende oplossingen gebruikers helemaal niks zeggen. Vooral de eerste is een totale waas van vaagheid waar je zelf doorheen moet prikken alvorens je een idee gaat krijgen wat het doet. Bij nummer twee heb ik in ieder geval nog het idee dat’iets ergens heen gaat’. Maar wat dan en waarheen, dat weet ik ook niet.
Zonder uniformiteit, en genoeg herhaling, zal dit probleem zich blijven voordoen bij veel gebruikers. Als er voor een communicatie-oplossing zes vormen bestaan, zal de kwaliteit van een oplossing nooit zo duidelijk zijn als een duidelijke vorm waar iedereen gebruik van maakt.
Affordance in layouts en structuren
Nu hebben we het vooral veel over kleine details en stukjes gehad. Maar affordance geldt eigenlijk voor alles wat mensen moeten gebruiken. Dus ook het totaalbeeld.
Een vrachtwagen heeft duizenden kleine onderdelen, maar de eerste herkenning zit hem in het totaalbeeld van een vrachtwagen. Dat geldt ook voor jouw oplossing. Een website is herkenbaar aan een hele hoop kleine elementen die samen het beeld van deze website vormen. Net als bij een vrachtwagen moet je weten waar je in moet stappen, waar het contact zit, waar het gaspedaal en stuur voor dienen, wil je vrachtwagen goed kunnen gebruiken.
Daarom zien vrachtwagens er vaak hetzelfde uit
Bij een digitale oplossing moet je weten hoe je hem oproept, waar de navigatie zit, hoe de structuur in elkaar zit, et cetera. Daarom zien vrachtwagens er vaak hetzelfde uit. Ook al gebeurt er onder de kap misschien iets heel anders. Bij een digitale oplossing geldt precies hetzelfde. Conventies zijn saai, maar wel duidelijk. Een topnavigatie, een linker zijmenu, een footer, allemaal een goede affordance, want praktisch elke website hangt zo aan elkaar. Een megamenu vanuit een hamburger icoon dan weer iets minder (op dit moment van schrijven).
Innovatie en digital affordance
Nu zit er aan affordance wel een keerzijde. Als je altijd teruggrijpt op bestaande conventies, wanneer komt er dan ruimte voor iets nieuws?
Wie kent bovenstaande symbool niet? Vrijwel iedereen kent dit symbool. Want het staat op iedere telefoon, en veel oplossingen gebruiken het in hun iconografie. Het is ook decennialang dé vorm geweest van een telefoon. Maar hoeveel telefoons zien er nog steeds zo uit als de weergave van dit symbool? De enige reden dat het er zo uit blijft zien, is de torenhoge affordance die dit icoon/symbool heeft opgebouwd in de jaren. Maar eigenlijk slaat de vorm nergens meer op. Want iedereen onder de 25 zal al weinig contact hebben gehad met deze traditionele telefoon.
Dit geldt voor meer zaken. Een mail icoon (envelopje) is de initiële link met echte post in je brievenbus al lang ontstegen. Een polaroidtoestel heeft niks met Instagram te maken. Ik denk dat de grootste groep gebruikers van Instagram nog nooit een ouderwetse polaroidcamera heeft vastgehad.
Hoe bouw je digital affordance op voor nieuwe oplossingen?
Soms moet je wel out of the box denken en nieuwe zaken introduceren. Eigenlijk alles waar we het nu over hebben gehad, is ooit ergens begonnen met nul of weinig affordance. De eerste telefoon had weinig affordance bij het eerste model. Een website had voor de gemiddelde gebruiker weinig affordance bij de eerste launch. Innovatie is ook voor een deel leren en aanleren, zolang het maar niet zodanig belemmert dat het einddoel niet te bereiken valt.
User testing op affordance
De beste oplossing voor het valideren van ‘nieuwe’ of onconventionele oplossingen en ideeën is dus user testing. Want de eindgebruiker zal uiteindelijk bepalen of een oplossing acceptabel is of niet. De mate waarin acceptabel, acceptabel genoeg is, zal subjectief blijven. Een tevredenheidsscore van 100 procent is vrijwel onmogelijk te realiseren. Maar je kunt je ideeën wel verfijnen en zien waar gebruikers dan precies op vast lopen. Snappen ze waar ze naar kijken, begrijpen ze waar een functionaliteit toe dient en het proces dat ze doorlopen?
Zelfs traditionele oplossingen zijn gebaat bij user testing op affordance. Want past de oplossing het beste bij het probleem wat je probeert op te lossen? Is de traditionele vorm van een website wel de meest geschikte vorm of moet je juist een app maken? Je kunt ook thee zetten in een emmer, maar dat doet niemand. WhatsApp heeft ook een weboplossing, maar deze is secundair. Deze zou lang niet zo populair zijn als het geen app op je telefoon was geweest. Het is dus logisch dat WhatsApp primair een app is geworden. Want apps staan het meest op je telefoon. Het medium waar je een oplossing op realiseert, moet voelen als iets ‘natuurlijks’ en een telefoon is nog altijd meer bedoeld voor intermenselijke communicatie dan een desktop. De affordance fit is helderder.
De oplossing moet doen wat het verwacht wordt te doen
Doet een oplossing wat het verwacht wordt te doen en gebeurt dat op de meest efficiënte, duidelijke (affordance) en makkelijkste manier? Test dit met gebruikers en luister naar de feedback die ze geven over wat ze denken te zien. Maar kijk ook naar wat ze denken dat ze ermee kunnen doen, voordat je ze eventueel instructies geeft. Herkenbaarheid is net zo belangrijk voor een theepot als voor een website. Meestal komen er vragen naar boven die voor jou als ontwerper of developer al vanzelfsprekend zijn, maar voor een gebruiker helemaal niet, omdat die veel minder naar digitale oplossingen kijkt dan professionals. Het beste test je affordance met gebruikers die iets nieuws voor het eerst zien, want daar zit het minste begrip. Vanuit daar heb je het beste startpunt voor de volgende iteratie. Of toch maar een andere oplossing vinden?
Over de auteur
