De afvalkalender die je preventief op je fouten wijst

Wat je ziet op het scherm van je laptop, tablet of telefoon? Dat noem je ook wel een user interface (UI). Een goede UI helpt je om een actie prettig en met zo min mogelijk gedoe uit te voeren. Die actie kan van alles zijn: een product bestellen, een artikel lezen, een reactie geven, bedenk het maar.

Elke dag zie ik goede en minder goede voorbeelden van een UI. Natuurlijk vind ik daar wat van. Als UX-writer wil ik namelijk dat iedere UI prettig is. Met teksten (microcopy) die voor de gebruiker begrijpelijk en bruikbaar zijn.

Eens in de zoveel tijd vind ik het leuk om een UI af te pellen. Laagje voor laagje, om te laten zien wat goed is en wat beter kan. Op schermen die ik zelf tegenkom, privé en in mijn werk. Ter lering en misschien een beetje vermaak.

Lees je mee? 👇

UI afpellen: afvalkalender bekijken voor je eigen adres

Ik wilde de afvalkalender van m’n gemeente bekijken. Ik kan me niet herinneren dat ik ‘m ergens op papier heb, dus checkte ik het online. En dat begint met dit scherm:

Mag het ietsje minder formeel?

Vul je postcode en huisnummer in. En bekijk de afvalkalender voor jouw adres. Lekker rechttoe-rechtaan, toch? Het punt is alleen dat er verder nergens op dit scherm duidelijk wordt gemaakt dat het om een afvalkalender gaat. Alleen al daarom is de tekst op de knop (‘Bevestig’) wel erg universeel.

Los daarvan moet een interactie met een knop of in een link zo concreet mogelijk zijn over de actie die het in werking stelt. Een betere tekst op de knop is dus bijvoorbeeld ‘Bekijk afvalkalender’.

Toch weer dat kleurcontrast…

Ik had al bijna de cursor in het Postcode-veld staan, toen ik begon te twijfelen: hoe zit het met het kleurcontrast van de blauwe letters en witte achtergrond? Ik deed een check met de WebAIM contrast checker (tip!). En waar ik al bang voor was: dit kleurcontrast voldoet niet helemaal aan de toegankelijkheidseisen.

Je ziet dat de ‘uitgegrijsde’ knop zelfs nog minder kleurcontrast heeft met de iets meer donkere tekst op de knop. Puur voor de toegankelijkheidseisen is dit niet erg, omdat de knop op dit moment nog een inactief element is. Je kunt er namelijk niet op klikken zolang je geen postcode en huisnummer hebt ingevoerd.

Máár: het moet dan wel duidelijk zijn dat het element inactief is. En of dat altijd duidelijk is voor de gebruiker, is nog maar de vraag. Het is dus beter om gewoon geen inactieve elementen te gebruiken. Drukt de gebruiker dan te vroeg op de knop? Dan kun je deze ‘fout’ afvangen met een duidelijke foutmelding.

Alsjeblieft, beste gebruiker, een mogelijke fout!

Goed, tijd om mijn postcode en huisnummer in te vullen. Tenminste, als ik niet gelijk op een mogelijke fout wordt gewezen. Als ik nog zonder iets in te vullen weer met de cursor uit het invoerveld ga, komt er al preventief een foutmelding te staan. Een foutmelding hoor je pas te krijgen als je iets verzendt wat niet volledig of correct is ingevuld. Tot zover de vriendelijkheid van ACV.

Wat ik wél goed vind, is dat de fout zowel visueel als tekstueel getoond wordt.

Nog even over dat kleurcontrast

Als ik mijn postcode en huisnummer heb ingevuld, wordt de knop onder de invoervelden actief. Ik kan er dus op klikken. Ook hier is het kleurcontrast niet voldoende…

…maar als ik met de muis over de knop heenga weer wél:

Een relatief eenvoudig scherm dus, maar toch is er genoeg om op aan te merken. Gelukkig kreeg ik na een druk op de knop wel daadwerkelijk een afvalkalender te zien. En of die goed is? Da’s wellicht UI-afpelvoer voor een volgende keer. 😉

Zo, weer een UI afgepeld

Vond je dit nuttig? Mooi! Laat het me weten via LinkedIn of door mij te mailen. Dat geldt natuurlijk ook voor vragen en andere opmerkingen. Trouwens, deel dit artikel vooral met je eigen netwerk. Vind ik leuk. 🙂