Hoe deze 3 UX fails eenvoudig op te lossen zijn
Disclaimertje vooraf: ik ben niet van het wijzen naar andermans fouten. Maar in dit geval dienen de genoemde praktijkvoorbeelden als lesmateriaal: waar moet je als vormgever alert op zijn en hoe zijn dit soort fouten te voorkomen danwel op te lossen..
Ok. Let’s go…
Voorbeeld 1: Toon schept verwarring
Ik heb thuis een Toon. Zo’n slimme thermostaat van Eneco die je inzicht geeft in verbruik en kosten. Werkt best aardig. Zo nu en dan krijgt onze Toon een update. Een tijd terug kreeg Toon zelfs een heuze facelift waarbij de vormgeving een flinke update kreeg. Eén puntje hebben ze toen laten liggen:
Excuus voor de crappy kwaliteit, ik heb deze foto genomen met het mobieltje van Mees en die heeft een fijne 2mp camera. Maar goed, dit scherm krijg je te zien na een update. Het logo van Toon en drie bolletjes waarbij één bolletje gevuld is. Dat kennen we. Want dat zien we bijvoorbeeld vaak in van die header sliders op websites. Het geeft aan hoeveel slides er nog zijn en vaak kan je er ook nog op klikken om te navigeren. Oh, en Apple is er ook fan van. Je gebruikt het op de iPhone bijvoorbeeld om door de pagina’s van je homescreen te bladeren. Of in de weer app om van locatie te wisselen.
Dus ik probeerde enthousiast naar de volgende pagina te swipen. Deze eerste pagina was namelijk niet zo spannend, alleen maar een logo. Maar er gebeurde niets… Een tap op het logo dan? Niets. De bolletjes aanraken dan? Niets. Toon..? Ben je er nog…?
Ik staarde nog naar het scherm, mijn hersenen pijnigend om erachter te komen wat ik over het hoofd zag, toen plots er een tweede bolletje gevuld werd. En niet veel later het derde. En daarna het besef dat dit dus geen navigatie bolletjes waren, maar een voortgang indicator.
Conventies zijn niet voor niets conventies
Een User Experience (UX) designer moet één ding heel goed kunnen: herhalen. Herhalen, herhalen, herhalen.
Hoe sterk de drang naar vernieuwing ook is, hou je aan conventies. Laat een link eruit zien als een link, een button herkenbaar zijn als button, zet de navigatie boven of links, etc. Saai, maar je wilt als het goed is een zo prettig mogelijke ervaring voor de gebruiker en niet een ego trip voor jou als designer. Afwijken van zo’n conventie is al link, een conventie op een andere manier gebruiken is funest. En dat laat dit voorbeeld mooi zien. Ik ben zo gewend aan die bolletjes en hoe ermee om te gaan, dat ik er al blind vanuit ga dat het ook op dit scherm zo werkt: een swipe naar links en ik krijg het scherm van het volgende bolletje. Door de bolletjes als voortgang indicator te gebruiken eindig je met gefrustreerde gebruikers in plaats van tevreden gebruikers.
Hoe moet het dan?
Simpeler. Wat wil je de gebruiker vertellen? Dat Toon geladen wordt. En hoe lang het nog duurt voordat Toon daadwerkelijk geladen is:
Ik heb het nu in procenten gedaan, als het technisch haalbaar is dan zou een tijd nog mooier zijn: nog 20 seconden…
Te saai? Dan is een animatie nog een optie. Maak de belangrijkste gebeurtenis visueel, in dit geval dus de voortgang van het laden. Altijd leuk om te kijken of de animatie in de context geplaatst kan worden (bij Toon: energie, elektriciteit). Ik heb even snel een ideetje uitgewerkt:
Voorbeeld 2: Wij doen iets fout maar dat is jouw schuld. Lekker puh!
Ik weet niet meer waar ik deze tegenkwam. Het zal iets geweest zijn bij het afsluiten van een reisverzekering. Of een poging daartoe. Aan bovenstaande foutmelding is weinig mis: Er wordt met een sterretje aangegeven dat dit veld verplicht is, de foutmelding is opvallend en er wordt uitleg gegeven wat er mis is: de datum is in het verkeerde formaat. Die tekst moet beter want dit is duidelijk door een programmeur geschreven maar in dit geval zou die programmeur ook een tik op zijn achterhoofd moeten krijgen. De datum is namelijk goed ingevuld, maar de programmeur heeft zijn werk niet goed gedaan. Dit veld wordt gecontroleerd op een correcte datum, maar daarbij wordt uitgegaan van de Amerikaanse notatie en niet van onze Nederlandse. Gevolg: de gebruiker wordt opgezadeld met een probleem wat niet zijn/haar probleem had moeten zijn en krijgt daar ook nog eens de schuld van.
Hoe moet het dan?
Quick fix: zet in het grijs onder het veld hoe je de datum notatie wilt hebben.
De juiste fix: zorg dat het veld de Nederlandse notatie accepteert (én zet de gewenste notatie eventueel nog onder het veld).
Voorbeeld 3: Hoe werkt onze site…
Ik ben nogal dol op auto’s. Dit jaar heb ik eindelijk mijn droomauto gekocht (nou ja, één van mijn droomauto’s dan): een Subaru Forester Turbo. Een bescheiden uiterlijk maar stevige prestaties. Om dat bescheiden uiterlijk iets minder bescheiden te maken had ik via ebay een spoiler op de kop getikt. Die moest ik dan nog wel laten spuiten. Of zelf spuiten. Dus ik ging op onderzoek uit en kwam al snel uit bij 2k lakken. De website 123autolakken.nl verkocht ze. Goede domeinnaam, dus dat leek me wel wat. Wat je hierboven ziet is de homepage. Scan de pagina maar eens. Je ziet waarschijnlijk die auto’s, het logo van STANDOX (geen idee wat dat is), een rijtje producten en de kop ‘Hoe werkt onze site’.
Hoe werkt onze site? Hè? Moet ik dat serieus gaan lezen om de site goed te kunnen gebruiken? Ik wil gewoon even snel kijken of jullie 2k lakken verkopen voor mijn Subaru! Wat een gedoe, ik ben weg.
Nou ja. Ik was bijna weg, maar de stemming was wel gedaald. En dat was helemaal niet nodig geweest.
Hoe moet het dan?
Hier gaan eigenlijk 2 dingen mis.
- Er is een gebrek aan focus
- Er is gehandeld uit angst
Gebrek aan focus: De site is ‘in your face’. Een hele bak aan linkjes en teksten en… succes ermee he! De focus lijkt me – gezien de domeinnaam- te moeten liggen op de verkoop van autolak. In spuitbus, lakstift of blik. De rest is secundair. En op de homepage gaat het erom dat ik zo snel mogelijk bij het juiste product kom en onderweg nog een beetje een goed gevoel krijg over de webshop
Gehandeld uit angst: stel dat mensen niet snappen hoe de site werkt? Ze weten vast niet hoe ze kleurcodes moeten opzoeken, of dat ze ook op ‘meer info’ kunnen klikken om meer informatie te krijgen. En wat als ze de kleurcode niet kunnen vinden? En wat als…
Goede vragen hoor, maar op het verkeerde moment de antwoorden gegeven. Kleurcodes, wanneer wordt dat relevant? Als je gekozen hebt wat voor lak je wilt. Informatie? Daarvoor zijn detailpagina’s. Hoe je de kleurcode vindt? Dat is pas relevant als je een kleurcode moet gaan opgeven. Timing, daar gaat het hier om. De homepage is niet de plek om de bezoeker van antwoorden te voorzien, omdat hij op dat moment simpelweg niet met die vragen zit.
Ik laat 123autolakken.nl niet met lege handen zitten. Wat mij betreft zou dit een eerste aanzet tot een betere homepage zijn:
Als ze interesse hebben mogen ze contact met me opnemen 😉
—
Zomaar wat voorbeelden van wat UX problemen uit de praktijk. Waar gaat het eigenlijk in alle drie de gevallen mis? De eindgebruiker is niet (voldoende) centraal gezet. Bij Toon is niet gedacht aan het feit dat de gebruiker niet doorheeft dat het om een laadscherm gaat en welke info dan relevant is. Bij het voorbeeld met het datumveld is er gedacht vanuit techniek en niet vanuit de gebruiker. Bij het derde voorbeeld, de 123autolakken.nl site, is er te weinig gekeken naar hoe de gebruiker het snelst tot zijn doel kan komen en welke prioriteiten de verschillende pagina onderdelen daarom zouden moeten krijgen.
Zit jij met een UX probleem waar je niet uitkomt? Let me know!
Misschien ben je bijvoorbeeld geholpen met de Around Seven UX Audit en de Around Seven UX Website strippenkaart (ideaal als je af en toe eens wil sparren over UX kwesties).
Vond je dit leuk? Geef een applausje!
Ontvang tips en maak kans op het boek Online Invloed
Kan jij wel wat kennis gebruiken? Ik geef het boek Online invloed gratis weg. Het enige wat ik van je vraag is even aangeven dat ik je mag mailen met tips. Je ontvangt dan op onregelmatige basis UX / Design / Conversie tips en ik betrek je graag in korte gebruikersonderzoeken van mijn eigen projecten (hoef je niet aan mee te doen, mag).
Onder de inschrijvers verloot ik het boek, als bedankje voor jullie support.
