Foute user interfaces

Het stroomt nieuwe mogelijkheden voor het web die nieuwe trends en hypes mogelijk maken. Iconen zijn daar een goed voorbeeld van. Na de geboorte van Apple's iPhone zie je opeens overal iconen verschijnen. Apple gebruikt iconen in plaats van labels om zo ruimte te besparen op de kleine schermen. Je ziet dat ontwerpers die overnemen, en dat is ook meteen het probleem. Onbewust koppelen ze het gebruik van iconen aan de gebruiks­vriendelijk­heid van Apple's iOS. Hierna verschijnen meerdere online tools om iconen in fonts te plaatsen, wat het toepassen ervan nog makkelijker maakt.

Het probleem van iconen is dat ze nooit voor iedereen eenduidig zijn. Dat iconen goed op iOS werken, komt doordat Apple ze overal herhaalt en de gebruiker forceert ze aan te leren. Die luxe heb je met een website niet. Je kunt iconen niet opdringen aan de gebruiker.

Tijdens onze usabilityonderzoeken zien we dat gebruikers aarzelen bij iconen zonder label of zelfs iconen niet zien en overslaan. We hadden bijvoorbeeld het woord 'home' in het hoofdmenu vervangen door een icoon van een huis. We verwachtten dat dat één van de weinige iconen is die wèl zou werken. Het liep faliekant mis: alle participanten zochten het woord 'home'. Ze konden het niet vinden en gingen daarna maar terug met de terug-knop van de webbrowser, tot ze weer bij home waren. En zo zijn er meer voorbeelden.

Pas dus goed op bij nieuwe trends en hypes. Een foute keuze kost je geld. Daarom som ik enkele van deze foute user interfaces op en geef ik er een korte toelichting bij: carrousel, megamenu, feed­back­knop, social login, like-knop, route­planner, FAQ, flat design, en eisen voor wachtwoorden.

Niemand gebruikt jouw carrousel

Veel grote websites hebben een carrousel. Een paar jaar terug gaf ik nog enkele adviezen voor het ontwerpen van een carrousel. Maar eigenlijk is het ontwikkelen, vullen, en bijhouden van een carrousel zonde van je tijd. Gebruikers slaan je carrousel namelijk over. Op de homepage van nd.edu klikt maar 1 op de 100.000 gebruikers op een beeld verstopt in de carrousel. Jared Smith illustreert het heel komisch met een aantal referenties verwerkt in een carrousel op z'n website 'Should I use a carousel?'. Geen hond die ernaar kijkt.

Wel is er één maar. In één geval is de carrousel prima om content mee weer te geven, namelijk wanneer de carrousel zuiver één enkel doel heeft. Denk aan een carrousel met foto's van je vakantie op websites zoals flickr.com of een portfolio om je werk te laten zien. Daarvoor werkt het prima, voor al het andere is het helemaal niks.

Zonder megamenu 219% meer engagement

Niet zo lang geleden schreef ik dat megamenu's averechts werken. Ik kan het niet laten om dit onderwerp nog een keer op te voeren. Megamenu's zijn inflexibel, creëren onzekerheid, werken niet goed op aanraakschermen, en werken niet in adaptieve user interfaces.

Uit onderzoek van IBM blijkt zelfs dat het gebruik van een onderdeel binnen een website met maar liefst 219% toeneemt zodra de megamenu's zijn vervangen met overzichten op onder­liggende 'landingspagina's'.

Meescrollende feed­back­knop zorgt voor verkeerde feedback

Voor mensen is het moeilijk om te vertellen wat de onder­liggende problemen op websites zijn. Ze moeten eerst hun handelen analyseren en daarna dat helder onder woorden brengen. Dat is lastig en communicatief een mijnenveld. Bij een usabilityonderzoek is het daarom regel dat je meer moet letten op wat mensen doen dan wat ze zeggen. We maken vaak mee dat gebruikers zeggen dat ze de website geweldig vinden, maar hun weg er niet in konden vinden en vice versa. Met een feed­back­knop geef je gemakkelijk te veel aandacht aan schreeuw­lelijkerds die je op het verkeerde been zetten. Kijk naar het gedrag bij een usabilityonderzoek en vervolgens naar statistieken met Analytics en A/B-testen.

Zo'n meescrollende feed­back­knop is daarbij ook nog eens storend voor de gebruiker. Het leidt hem af van zijn doel. Wil je van de gebruiker wat weten, stel dan een vraag achteraf en met een goede reden. Bijvoorbeeld als iemand lang op een pagina blijft steken. Als er daadwerkelijk iets ernstigs aan de hand is, vinden je gebruikers de contactpagina of het telefoon­nummer in de header.

Social login is vragen om problemen

Een universele login, de droom van elke gebruiker. Nooit meer verschillende wachtwoorden onthouden om daarna weer te vergeten. De meeste sociale media proberen hierop in te spelen door 'logins' aan te bieden. Je hoeft dan enkel met je Face­book- of Twitter-account in te loggen op elke website die dat ondersteunt. Helaas levert dit meer problemen dan oplossingen.

Om te beginnen ontkom je er niet aan een eigen login-mogelijkheid aan te bieden. Immers niet iedereen heeft Face­book of Twitter en hoe lang houden deze individuele social media's het uit op de lange termijn?

Aarron Walter van MailChimp implementeerde social login en plotseling ontstonden er een stuk minder fouten met inloggen. Later bleek dat niet de social login deze enorme daling in login-fouten veroorzaakte; het kwam door betere foutafhandeling.

So that big drop in login failures? It was all caused by better error handling and copywriting. That’s it. It wasn’t the social login buttons, though they did make a small contribution to our lower login failure rate. But if they help at all, why kill them? Even a 3.4% drop in failures is worth having them there, right? Maybe not. Social login buttons can hurt brands.

Afgezien dat het je merk kan beschadigen, weegt de minimale winst niet op tegen de problemen die later ontstaan. Want gebruikers vergeten de manier waarop ze zijn ingelogd.

But with these new benefits come new problems as well. Most notably, people forget which account provider they used to sign up for a site, which makes them unsure about how to proceed. In the words of one of our friends on Bagcheck: "Whenever I have to sign into Bagcheck, I'm filled with anxiety. Not because I don't love the service, but because of the log in screen. I cannot remember whether I signed up through Face­book, Twitter or if I should know some special entry credentials.

De oplossing volgens Luke Wroblewski is om de gebruiker eerst naar de gebruikersnaam te laten zoeken. De website biedt vervolgens de inlog-methodes aan waarmee die gebruiker in het verleden is ingelogd. Helaas introduceer je op die manier weer extra interactie om een te kleine winst te behouden en werken 'saved passwords' van de browser niet meer. Het weegt niet tegen elkaar op. Veel beter is om enkel je eigen login-methode aan te bieden.

De Like-knop vermindert conversie

Nog een social-feature is de 'like-knop'. Het probleem is dat dit soort knoppen de performance van je website enorm verlagen. Ze nemen samen bijna een halve MB voor hun rekening. Zeker op mobiel met een slechte netwerkverbinding zorgt dat voor flinke conversiedaling. Één seconden vertraging over de gehele linie kan voor 7% conversiedaling zorgen. Let dus goed op de grootte van je website. Sinds 2010 zijn websites bijna twee keer zo groot geworden. Een slechte en kostbare ontwikkeling.

Daarnaast zegt de hoeveelheid likes helemaal niks over de kwaliteit van de content of je product. Op bol.com staat het boek 'Waarom sommige landen rijk zijn en andere arm'. Dit is in 2012 gepubliceerd en één van de belangrijkste boeken van de afgelopen jaren. Het heeft nu negen likes op de grootste online boekenwinkel van Nederland.

Concurreer niet met Google Maps

Vroeger vroegen opdrachtgevers wel eens of ik een simpele route­planner kon ontwerpen voor hun website. Uiteindelijk lukt het technisch gezien ook prima. Het is alleen zonde van de ontwikkelingstijd. Voor de gebruiker is het veel fijner om diensten te gebruiken van bedrijven die daarin zijn gespecialiseerd. Ga niet concurreren met diensten zoals route­planners. Stuur gebruikers door naar een map-service want dat werkt veel beter op mobiel of tablet. Op deze apparaten staan vaak native apps van deze services geïnstalleerd die de functie automatisch overnemen.

FAQ helpt niet op het juiste moment

Tijdens cardsort-sessies komt vaak het onderwerp 'FAQ' op tafel. Ik waarschuw klanten dan dat frequently asked questions zeer ongebruiksvriendelijk zijn.

Ten eerste heeft het internet alle gebruikers geleerd dat FAQ's nutteloos zijn. Op enkele uitzonderingen na stellen FAQ's niks voor. In het uitzonderingsgeval dat een FAQ goed is, wordt onderhouden, en problemen echt oplost, vraagt het de gebruiker: (1) zijn handelingen stop te zetten; (2) zijn proces te verlaten; (3) en de vraag op te zoeken in de FAQ. Dat is een enorme conversie-killer. Je moet teksten in de user interface zo beschrijven dat een FAQ nooit nodig is. Ontwikkeling en bijhouden van een FAQ werkt averechts en is zonde van je tijd.

Flat design is niet de oplossing

Steeds meer designers stappen af van skeuo­mor­phism. Skeuo­mor­phism is visuele imitatie van een materiaal, de knoppenkast van een versterker. In feite een metaforisch ontwerp. Apple heeft het populair gemaakt door zijn skeuo­mor­phism user interface binnen iOS. Ontwerpers vervangen nu massaal het skeuo­mor­phism door het minimalistische flat design. Flat design brengt de vormgeving terug naar de essentie, het maakt geen gebruik van metaforen. Metaforen zijn namelijk verraderlijk en het gebruik ervan is niet authentiek aan het medium waarop je het toepast. Het probleem van een metaforische user interface is dat de gebruiker niet weet waar de metafoor begint en waar die ophoudt. Ook de ontwerper komt er op de lange termijn mee in de problemen. De ontwerper moet zich dan vast klampen aan een metafoor en zich in allerlei bochten wringen om de metafoor gekunsteld in stand te houden.

Het probleem van flat design is dat ontwerpers het vaak te ver doorvoeren. Als je het te letterlijk neemt, mag er geen referentie zijn naar de echte wereld, zo mogen knoppen dan geen 3D-effect meer hebben. Maar daarmee haal je juist alle affordance weg. Affordance van een object geeft aan wat je ermee kunt doen. Op een stoel kan je zitten en staan en is van de orde dat je hem kunt optillen. Dat het wegnemen van deze affordance problematisch is, toont Nielsen Norman Group groep aan in één van haar onderzoeken.

Flat design […] are the main threats to tablet usability, followed by poor gestures and workflow. […] Flat design. Why not allow users to easily see what they can do? We need a golden middle ground between skeuo­mor­phism and a dearth of distinguishing signifiers for UI elements.

Het is dus niet verstandig om direct het roer definitief en rigoureus om te gooien en je online-identiteit om te zetten naar het nu zo populaire flat design.

Eisen stellen aan wachtwoorden maakt het minder veilig

Hoe meer eisen je stelt aan een wachtwoord, hoe minder verschillende wachtwoorden er mogelijk zijn, en hoe makkelijker het is voor crackers om wachtwoorden te achterhalen.

'If I knew the site, I would go there and find out what the requirements are,' he said. The information would have allowed radix to craft custom rule sets targeted at the specific hashes he was trying to crack.

Het is prima om een minimum lengte te eisen. Stel alleen niet meer eisen dan dat. Texas AG heeft het wel heel bond gemaakt met een enorme puzzel met tien complexe eisen voor het invoeren van wachtwoorden. Thomas Baekdal geeft aan dat simpele wachtwoorden zoals 'this is fun' 10 keer zo veilig zijn dan 'J4fS<2'. Ga dus geen complexe wachtwoorden opleggen. Genereer of adviseer om drie willekeurige woorden aan elkaar te schrijven als wachtwoord.

Nog een kleine tip. Tijdens onze usabilityonderzoeken merken we op dat veel gebruikers het wachtwoord van hun e-mailadres proberen als ze ergens moeten inloggen en zich afvragen waarom het niet werkt. Verwerk daarom de (verkorte) naam van de website in het label naast het wachtwoord, dus 'Bol.com wachtwoord:' in plaats van 'Wachtwoord:'.

Desondanks draaien deze websites veel omzet

Het antwoord is content en service. Als de content uniek en goed is, komen de gebruikers vanzelf. Daarnaast is een website altijd onderdeel van een groter geheel: de service. Als je later gemakkelijk kunt betalen met een acceptgiro dan zullen bezoekers dit verkiezen boven een iets betere website zonder acceptgiro. Afgezien hiervan blijft usability één van de belangrijkste factoren voor het percentage bezoekers dat je over de streep trekt.

Bart van de Biezen

Bart van de Biezen

Als cognitief ergonoom bij Aan Zee Communicatie, onderzoek, ontwerp, spreek en schrijf ik over user interfaces en usability. M'n achtergrond: Industrieel Ontwerpen en daarna Psychologie aan de Universiteit Twente, afgestudeerd bij Philips op midair pointing voor een nieuwe generatie TV's, Apple Design Award voor CSSEdit, usability onderzoeker bij MetrixLab en blogger.