Placeholders om een plaats te reserveren (Zucht…)

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: reserveren bij restaurant Shabu Experience

Mijn vrouw en ik aten laatst bij restaurant Shabu Experience in Ede. We houden nu eenmaal van sushi. Ik kon er online reserveren. Mini-microcopy-me ging helemaal áán op het scherm wat ik dan te zien krijg:

Niet nodig? Niet vragen

Wat me direct opvalt, is dat er eerst gevraagd wordt om een aanhef: ‘Dhr.’, ‘Mevr.’, ‘Familie’ en/of ‘Bedrijf’. Dit invullen is trouwens niet verplicht. Ik ga niet in op of het inclusief genoeg is om alleen ‘Dhr.’ en ‘Mevr.’ als opties te geven wat betreft aanhef. Daarvoor ben ik nu niet deze UI aan het afpellen.

Waar ik wél op inga, is dat je iets niet moet vragen als je het niet nodig hebt. Is het voor een reservering bij een sushirestaurant echt nodig om te weten of iemand een heer of mevrouw is? Ik betwijfel het.

Weten met hoeveel personen je komt is natuurlijk wel nodig. Goed om te weten: dit heb ik al in een vorig scherm aangegeven. De optie ‘Familie’ is dus ook niet nodig. De optie ‘Bedrijf’ is dan weer wel handig. Al was het maar voor het restaurant om te weten of er iets bijzonders op de factuur moet.

Bottom line: niet nodig? Niet vragen. Wat je hier altijd mee wint, is dat het je formulier eenvoudiger maakt. En dus gebruiksvriendelijker.

Weten wat de gelegenheid is

Eerder zei ik dat het niet nodig is om aan te vinken dat je als ‘Familie’ komt. Het is wél goed om te vragen of de reservering voor een speciale gelegenheid is. Mooi dus dat dit gebeurt. Slim ook dat er een aantal opties worden gegeven: verjaardag, viering, diploma-uitreiking en jubileum. Hiermee help je iemand die het formulier invult om te bepalen wat de gelegenheid is.

Het is allemaal weer eens lekker contrastisch

De labels (namen) van de velden die je moet invullen, zijn iets donkerder grijs dan de velden waarin je de gegevens invult. Deze keer heb ik niet eens de WebAIM contrast checker nodig om te zien dat het kleurcontrast echt onvoldoende is.

Een placeholder is géén vervanging van een label

En dan is er nog een ander probleem: de namen van de velden (ook wel ‘Iabels’ genoemd) staan ín de velden. Daardoor zijn het ‘placeholders’. Een placeholder is een soort hulptekst in een veld, bedoeld om je een hint te geven voor wat je kunt invullen in dat veld.

Het probleem van een placeholder? Zodra je begint met typen, verdwijnt-ie. Terwijl een label juist bedoeld is om altijd zichtbaar te hebben voor de gebruiker wat voor informatie je in een veld moet invullen. Wel zo gebruiksvriendelijk.

Ik heb voor dit scherm niet in de html-code gekeken voor meer details over de labels en placeholders. Maar een ontbrekend label per formulierveld is hoe dan ook een probleem voor mensen die bijvoorbeeld een screenreader gebruiken.

Kortom: een placeholder mag nooit een vervanging zijn van een label.

En dan is het nu tijd om te huilen

Bij de reservering wordt me ook gevraagd om mijn geboortedatum door te geven. Het restaurant hanteert verschillende prijzen, afhankelijk van je leeftijd, dus dat begrijp ik. Maar in vredesnaam: wáárom kan ik niet gewoon zelf mijn geboortedatum invullen?!

Nu moet ik maand na maand klikken om bij mijn geboortedatum uit te komen. Ja, echt waar. Ik kan niet versneld naar mijn geboortejaar of -maand. Wil je dus reserveren en kom je uit pakweg 1973? Hou er dan rekening mee dat beginnende RSI onderdeel kan worden van je Shabu Experience.

(Trouwens, in welk universum is ‘Duidelijk’ een logische knoptekst om je geboortedatum te bevestigen?)

Voor Jan L*l geklikt tot je een ons weegt

Heb je eindelijk net zo vaak geklikt tot je bij je geboortejaar en -maand bent uitgekomen? Dan heb je dat voor Jan L*l gedaan. Want om te reserveren is het niet verplicht om dit in te vullen. Hoe ik dat weet? Omdat ik even checkte wat er gebeurt als ik op ‘Reserveer nu’ klik.

Het formulier laat me dan zien welke velden nog niet zijn ingevuld. Probleem is dat dit alléén visueel gebeurt. Een foutmelding moet ook tekstueel duidelijk zijn. Per veld moet de gebruiker weten wat er niet of verkeerd is ingevuld. Dat gaat hier dus mis:

Overigens moet je ook vóór het indienen van een formulier al kunnen zien welke velden verplicht zijn. Of optioneel. Ook dat ontbreekt nu op dit scherm.

Onderstreep. Altijd. Je. Hyperlinks.

Nog nét voor ik het formulier besluit in te dienen, stuit ik op een stokpaardje van me: hyperlinks. Ik zie hier gelukkig geen ‘klik hier’ of iets wat erop lijkt (tip: zorg altijd voor een duidelijk beschrijvende linktekst).

Alleen zijn de links in deze UI niet onderstreept. Iemand die kleurenblind is, kan zo de link al snel missen. Kortom: Onderstreep. Altijd. Je. Hyperlinks.

Trouwens, er is iets riskant aan deze manier van linken naar algemene voorwaarden en een privacybeleid. In dit formulier heeft 1 element nu 2 heel verschillende mogelijkheden:

1. Je kunt akkoord gaan, met een vinkje in de checkbox.
2. Je kunt doorklikken naar andere pagina’s, via hyperlinks.

Ik zou dit uit elkaar halen. Dus bijvoorbeeld eerst een zinnetje over dat je voor een reservering akkoord moet gaan met de algemene voorwaarden en het privacybeleid. En dan daaronder de checkbox, met alleen de tekst ‘Ik ga akkoord’. (Iets speelser mag ook, als dit past bij je tone of voice.)

Succes met de bevestiging!

Alles ingevuld? Check. Geklikt op ‘Reserveer nu’? Check. En dan volgt dat waar ik altijd op hoop: iets van een bevestiging. Nou, die krijg ik. Regels lang, zonder witregels, in lichte tekst op een lichtbruine (of is het oranje?) achtergrond. Slecht leesbaar en slecht scanbaar. En dan heb ik het nog niet gehad over de inhoud van de tekst, die meer wegheeft van een juridisch contract dan een reservering:

Gemiste kans, want dit is het moment waarop je me als restaurant kunt onderdompelen in smaakvolle voorpret. In tekst en beeld. En daar is bij mij niet eens heel veel voor nodig. Want alleen al als ik denk aan sushi, krijg ik trek.

De UI voor reserveren kan dus een stuk beter. Gelukkig was het eten en de rest wél helemaal top. 🍣🍤🥢

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. 🙂