Alert

Er zijn drie soorten statusmeldingen:

• notificaties
• validatoren
• indicatoren

Welke soort u het beste kunt gebruiken, hangt af van de volgende punten:

• Welke informatie wilt u doorgeven?
• Hoe belangrijk is het dat de gebruiker de informatie direct ziet?
• Moet de gebruiker iets doen?

Hoe te gebruiken: notificaties

Notificaties kunnen zowel informatief als aanmoedigend zijn. Ze kunnen op elk moment verschijnen, ook als de gebruiker op dat moment niet bezig is met het systeem. Vaak gaan ze over een specifiek UI element, of juist over een heel systeem. Er zijn drie soorten notificaties.

Notificaties die om actie vragen

Dit is een dringende mededeling waarbij de gebruiker actie moet ondernemen. Ontwerp de notificatie daarom op een manier die het proces van de gebruiker onderbreekt.

Notificaties die niet om actie vragen

Een notificatie die niet om actie vraagt, is niet of minder dringend. Een gebruiker hoeft niet per se iets te doen als dit soort meldingen verschijnen. De notificatie is bijvoorbeeld een paar seconden te zien in een hoek van het scherm, waarna hij weer verdwijnt.

Sectieberichten

Sectieberichten wijzen gebruikers op dat er iets in een deel van het scherm is gebeurd. De gebruiker kan ze niet afwijzen, en ze verdwijnen pas als de situatie is opgelost of als de gebruiker actie heeft ondernomen.

Wat doet een sectiebericht?

• Het waarschuwt dat bepaalde acties gevolgen hebben.
• Het communiceert dat een actie succesvol is uitgevoerd.
• Het laat de gebruiker weten dat er iets fout is gegaan als dat zo is.
• Bij fouten in de validatie geeft het sectiebericht aan wat er nog niet goed is.

Voorbeeld: sectiebericht met foutsamenvatting

Als de gebruiker verplichte velden niet invult, verschijnt er een sectiebericht.

De positie van de knop bepaalt of het sectiebericht binnen de vragengroep of bovenaan het scherm zichtbaar is.

De melding krijgt focus (role=alert), zodat hij direct door screenreaders wordt voorgelezen. In de melding staan één of meerdere anchor links naar de verplichte velden. Zodra de gebruiker een verplicht veld heeft ingevuld, verdwijnt de anchor link naar dat veld.

Hoe te gebruiken: validatoren

Validatoren zijn meldingen die te maken hebben met de input van een gebruiker. Ze geven aan of de dingen die de gebruiker heeft ingevuld correct en compleet zijn. Als er iets niet klopt, moet de validator aangeven wat er niet klopt. Ook geeft de validator aan wat de gebruiker moet veranderen zodat alles wel klopt.

Een voorbeeld is de informatie die een gebruiker ziet bij een invoerveld als hij dat veld niet of verkeerd heeft ingevuld. Samengevat:

• Validatoren worden gegenereerd doordat de gebruiker iets invult.
• De validator verdwijnt als de gebruiker zijn input verbetert.

Voorbeeld: verplichte velden

Gebruik inline-validatie met realtime feedback. Deze validatie vertelt de gebruiker meteen of de informatie die ze hebben getypt, voldoet aan de vereisten van het formulier.

Idealiter verschijnen foutmeldingen nadat de gebruiker naar het volgende veld gaat (het ingevulde veld verliest dan focus).

• Voorkom dat inline-validatie op focus wordt weergegeven: in dit geval wordt de foutmelding al weergegeven zonder dat de gebruiker begonnen is met typen.
• Valideer niet na elk getypt teken: deze aanpak verhoogt niet alleen het aantal onnodige validatiepogingen, maar frustreert ook gebruikers. Deze regel heeft enkele uitzonderingen: het is handig om inline te valideren terwijl de gebruiker typt bij het maken van een wachtwoord (om te controleren of het wachtwoord voldoet aan de eisen), bij het maken van een gebruikersnaam (om te controleren of een naam beschikbaar is) en bij het typen van een bericht met een tekenlimiet.

Voorbeeld: verplicht invoerformaat

Net als verplichte velden kunnen er ook verplichte invoerformaten zijn. Denk bijvoorbeeld aan een e-mailadres dat de vorm naam@domein.nl moet hebben.

Het is belangrijk om vóór het invoerveld duidelijk te maken wat de eisen zijn aan de invoer, óf automatisch de invoer te corrigeren.

Een ander voorbeeld is de postcode (1234 AB). Plaats de uitleg binnen het labelelement. Gebruikers met een screenreader krijgen de uitleg dan voorgelezen als ze op het invoerveld staan.

Hoe te gebruiken: indicatoren

Een indicator vraagt de aandacht van een gebruiker voor een bepaald element. Dat kan content zijn, maar ook een dynamisch deel van de interface. De indicator geeft een verandering van dit element aan. Omdat het de aandacht moet trekken, is het vaak een icoon, groter font of animatie.

• Indicatoren staan dicht bij het element waar ze over gaan.
• Indicatoren verschijnen of veranderen afhankelijk van de omstandigheden. Ze zijn dus niet altijd zichtbaar.
• Indicatoren trekken de aandacht van de gebruiker als dat nodig is, maar vragen geen actie van de gebruiker.

Voorbeelden van indicatoren

Indicatoren geven extra informatie over veranderende inhoud of elementen uit de gebruikersinterface. Ze verschijnen of veranderen onder specifieke omstandigheden. U kunt een indicator op zichzelf laten staan, maar ook in combinatie met een sectiebericht tonen.

Indicatoren: loaders

Animaties die te zien zijn tijdens het wachten zorgen voor een prettigere ervaring voor gebruikers. Denk bijvoorbeeld aan een procentuele progress bar of spinner. Ze informeren gebruikers over de status en voortgang van hun proces. Daardoor zijn ze vaak bereid langer te wachten.

Zichtbaarheid van de status van een systeem is een van de belangrijkste en algemeen toepasbare principes van het ontwerp van een gebruikersinterface.