WhatsApp Contact
UX verbeteraar Around Seven uit Amersfoort. Ontwerpt voor jouw klanten.

Waarom afwijken van conventies catastrofaal kan zijn

17-01-2020, UX
UX: waarom verkeersborden werken
"driehoeken werden vrolijke sterren"

Waarom afwijken van conventies catastrofaal kan zijn

Er was eens een man die binnen het kleine koninkrijk waar hij woonde verantwoordelijk werd gemaakt voor de bewegwijzering. Een belangrijke taak, zo vond hij zelf ook. Zonder hem zouden bezoekers binnen het pittoreske koninkrijk hopeloos verdwalen en zou het een chaos worden. De man genoot van zijn baan en liet overal borden plaatsen om het verkeer in goede banen te leiden en de toeristen te informeren. Hij gebruikte dezelfde borden als de omliggende koninkrijken. Handig, want die borden kenden de reizigers al. Het hele koninkrijk was een oase van rust en regelmaat en hij was een tevreden man.

De jaren verstreken. Het koninkrijk floreerde, kreeg veel reizigers uit andere koninkrijken en iedereen was tevreden. Behalve de man. Hij werd naar mate de tijd verstreek steeds ongelukkiger. Hij wilde wat meer kleur in zijn leven. Dus besloot de man op een dag alle borden een ander kleurtje te geven: rood, paars, geel, groen. Ook de vormen vond hij maar saai en paste deze dus aan: ronde borden werden achthoekig, rechthoeken werden ovaal en driehoeken werden vrolijke sterren.

Wat was de man blij! Overal vrolijke borden vol kleur. Opgewekt liep hij door de straten om alle nieuwe borden te bewonderen. Maar wat was dat!? Paarden reden door rood, voetgangers kregen geen voorrang, koetsen reden veel te hard en reizigers stonden verdwaasd naar de bewegwijzering te staren. Binnen een week was het een enorme chaos in het eens zo rustige koninkrijk en kwam het volk in opstand. De man, beduusd en onthutst, vluchtte naar het buitenland om nooit meer terug te keren.

Waarom verkeersborden werken

Dieze borden snapt iedere Nederlander, ook al is dit in [land]

Verbodsborden zijn rond, wit met een rode cirkel. Moet je ergens voor oppassen, dan zie je een driehoekig bord. Dat leer je al in groep 8. Handig, want zo weet je hoe je je in het verkeer moet gedragen. En mocht je een keer in het buitenland zijn dan hoef je in ieder geval geen extra stress te hebben over de verkeersborden, want die zijn daar hetzelfde. Zo’n conventie werkt, omdat iedereen zich eraan houdt. Als er iemand besluit (zoals de man in ons verhaal) om de boel eens lekker anders te gaan doen dan is er in no-time chaos.. Gaan we niet doen dus.

Esthetiek versus gebruikersgemak

Die man uit ons verhaal. Wat een flapdrol, denk je wellicht. Maar nog niet zo lang geleden zei iemand tegen me: “laten we de linkjes op onze site gewoon in de huisstijl kleur (rood) doen” en “de navigatie kan hier wel weg, dat scheelt weer ruimte”. En ik kan heel goed begrijpen dat veel ontwerpers daarin meegaan. Want zeg nou zelf: die blauwe onderstreepte linkjes zijn toch ook gewoon lelijk? En navigatie is vaak toch erg saai?

Ik snap dat. Je wil als ontwerper een site of een app een bepaalde uitstraling meegeven. Eentje die aansluit bij de beleving van het merk. Het moet er wel lekker uitzien, toch? Maar ga eens na bij jezelf: wanneer bezocht jij voor het laatst een website vanwege zijn looks? Even lekker een stukje beleving naar de mensen toe?

Waarschijnlijk nooit of vrijwel nooit. Je bezoekt een website vanwege de inhoud, de content. Die content moet zo gebruiksvriendelijk mogelijk ontsloten worden en goed zichtbaar zijn. Want daar worden jouw bezoekers blij van. Niet van hele grote tekst op vrolijke gradients en geinige navigatie probeersels.

Eigenlijk dus net als in het verkeer. Gebruiken we herkenbare verkeersborden, dan gaat het goed. Wijken we daarvan af, dan wordt het chaos. In het geval van websites: chaos in het hoofd van de bezoeker.

Willen jullie meer of minder gebruikersgemak?

Meer? Nou, dan gaan we dat regelen.

De man uit mijn verhaal was De Vormgever. Hij kreeg genoeg van altijd maar hetzelfde en koos in plaats van conventies voor het esthetische, het mooie. Uit (gebruikers)onderzoeken blijkt echter dat mensen online heel erg leunen op dat wat ze al kennen (zoals links zijn blauw en onderstreept).

Bepaalde design patronen zitten zo ingebakken in ons brein, dat we daar direct naar op zoek gaan zodra we een website openen. We zoeken het logo linksboven zodat we weten waar we zijn. We zoeken naar koppen om te scannen zodat we ons een beeld kunnen vormen van de inhoud. We zoeken de navigatie bovenin, of aan de linkerkant van het scherm. En we willen zo snel mogelijk snappen hoe we ergens moeten komen. Lukt dat niet, dan zijn we foetsie.

Er zijn tools voor om dit te testen, bijvoorbeeld de First Click methode of de 5 seconden test. Bij de laatste schotelen we gebruikers een screenshot voor en stellen hem een vraag (Bijvoorbeeld: wat doet dit bedrijf?). Binnen 5 sec. moet het antwoord komen anders faalt de test.

Gebruikers zijn over het algemeen vrij ongeduldig. Conventies werken goed, want als we iets kennen hoeven we minder na te denken en kunnen we dus sneller door. Wil je meer gebruikersgemak? Maak dan volop gebruik van conventies. Ga vooral niet experimenteren met geinige button vormen of onconventionele pagina structuren. Het lijkt misschien leuk, maar kost je conversie. En da’s minder leuk.

Doe onderzoek om te achterhalen waar je website nog beter kan

Voorbeelden van conventies (waar je je maar beter aan kan houden!)

  • Linkjes zijn gekleurd (bij voorkeur blauw) en onderstreept. In tekst kan je dat onderstrepen weglaten, ik adviseer dan wel om bij mouse over wel de link te onderstrepen
  • Buttons zijn herkenbaar als button: gevuld, afgeronde hoeken en met voldoende contrast.
  • De navigatie staat bovenin de site, of aan de linkerkant van de pagina. Op mobiel staat bovenin vaak een ingang naar het menu, of onderin staan knoppen. Verberg de navigatie alleen als het echt niet anders kan, maar geef dan op de pagina zelf ingangen naar de rest van de site
  • Het logo staat linksboven. Vlakbij het logo (liefst eronder) staat in 1 zin wat het bedrijf of de organisatie doet
  • Telefoonnummers zoeken we vaak rechtsboven in de header of helemaal onderin de pagina in de footer
  • Een invoerveld is voorzien van een rand (zorg dat het duidelijk herkenbaar is als invoerveld)
  • De pagina loopt van boven naar beneden. (dat klinkt logisch toch, maar nog niet zo lang geleden was er trend waarin ontwerpers ineens horizontale websites gingen ontwerpen waarbij de pagina van links naar rechts bewoog als je ging scrollen. Super verwarrend)
Lees lekker
verder.
Je kan me inhuren voor UX projecten of specifiek Visual Design. Voor huisstijl projecten heb ik beperkt ruimte. Ik word ingehuurd door diverse internetbureaus en bedrijven die graag op UX vlak de concurrentie voor willen blijven.
UX optimizer Around Seven uit Amersfoort. Ontwerpt voor jouw klanten.