Waarschuwingen

Fout- en waarschuwingsberichten geven contextuele en bruikbare feedback om gebruikers te helpen vooruit te komen in hun workflow.

Beslissen wat te gebruiken

Deze richtlijnen beschrijven hoe fouten en waarschuwingen op een duidelijke en consistente manier aan gebruikers worden gecommuniceerd. We leggen uit wanneer elke melding wordt getoond, hoe deze hiërarchisch wordt opgebouwd en geven praktische voorbeelden om een consistente gebruikerservaring te waarborgen.

Fouten

Fouten geven kritieke informatie weer die de gebruiker eerst moet verhelpen voordat hij verder kan gaan. Belangrijke punten:

• Foutmeldingen leggen uit wat er mis is en, indien mogelijk, hoe het probleem kan worden opgelost.
• Naast de tekstuele uitleg wordt visueel vaak een bijpassende indicator (bijvoorbeeld in de kleur Cinnamon 500) getoond.
• Hoewel kleur een sterk visueel signaal is, moet de tekst altijd voldoende onderscheid bieden, zodat ook gebruikers met visuele beperkingen de meldingen goed kunnen herkennen.

Waarschuwingen

Waarschuwingen tonen niet-kritieke informatie die de gebruiker kan helpen om in de toekomst fouten te voorkomen:

• Ze geven een voorzichtige waarschuwing over mogelijke, vaak onbekende of onomkeerbare consequenties van een actie.
• Visueel worden waarschuwingen vaak ondersteund door een indicator in de kleur Cantaloupe 400.
• De gebruiker hoeft niet direct actie te ondernemen, maar krijgt wel inzicht in mogelijke risico’s.

Wanneer verschijnen fouten en waarschuwingen?

Formulier validatie

De meeste fouten en waarschuwingen treden op bij het invullen van formulieren. Hierbij onderscheiden we twee validatiemomenten:

• OnBlur Validatie:
  Wanneer de gebruiker de focus verlegt (bijvoorbeeld via tabben of door buiten het invoerveld te klikken), vindt directe validatie plaats. Dit stelt de gebruiker in staat om fouten meteen te corrigeren tijdens het invulproces.

• OnSubmit Validatie:
  Wanneer de gebruiker probeert verder te gaan door op een actieknoop (zoals een verzendknop) te klikken, controleert het systeem de gehele pagina op fouten en waarschuwingen. Indien fouten of waarschuwingen worden gedetecteerd, worden de bijbehorende elementen visueel benadrukt. Om de toegankelijkheid te waarborgen, verdient validatie via onClick extra de voorkeur.

Focus gedrag

• OnBlur:
  Verplaats de focus niet automatisch naar het invoerveld wanneer een fout optreedt. Het direct terughalen van de focus kan leiden tot een onverwachte gebruikerservaring en kan een valkuil vormen voor toetsenbordgebruikers, omdat zij mogelijk opgesloten raken in het foutieve veld.

• OnSubmit:
  Wanneer fouten en waarschuwingen na een inzending worden ontdekt, verplaats de focus naar een overzichtsgebied (bijvoorbeeld een banner of modaal venster) waarin alle fouten worden weergegeven. Dit helpt de gebruiker om snel een overzicht te krijgen van alle te corrigeren issues.

Systeem detecteert een fout of waarschuwing

Naast formuliervalidatie kunnen fouten of waarschuwingen ook optreden wanneer:

• De server bepaalde informatie niet kan ophalen.
• De server een verzoek niet correct kan afhandelen.

In zulke situaties geeft het systeem een foutmelding of waarschuwing met uitleg over de oorzaak. Soms is de oorzaak onbekend, en wordt de gebruiker geadviseerd het later opnieuw te proberen. Dergelijke incidenten kunnen verband houden met gebruikersrechten, prestatieproblemen of een instabiele netwerkverbinding.

Hiërarchie

Meldingen moeten eenvoudig te lokaliseren zijn en duidelijk verband houden met hun corresponderende invoerelement of container. Er zijn verschillende niveaus waarop meldingen kunnen worden toegepast:

Elementniveau

• Voorbeeld:
  Een prompt naast een invoerveld meldt:
  "Fout: Uw beschikbare tegoed voor deze verlofaanvraag is lager dan het gevraagde bedrag. Verlaag het verzoek of kies een ander type verlof."
  of een keuzemenu met:
  "Waarschuwing: De locatie van de geselecteerde cursus wijkt af van uw primaire werkplek."

Elementniveau-fouten en -waarschuwingen worden meestal voorafgegaan door labels zoals "Fout" of "Waarschuwing" om de boodschap helder te maken, ook voor mensen met een verminderd zicht of kleurenblindheid.

Containerniveau

• Voorbeeld:
  In een modaal venster staat een lijst met twee fouten bovenaan. De invoervelden met fouten worden omkaderd met een rode rand en de foutmelding staat direct onder het betreffende veld.
  Containerniveau meldingen helpen de gebruiker fouten te lokaliseren in complexe of uitgestrekte formulieren.

Pagina-niveau

• Voorbeeld:
  Een foutbanner bovenaan een pagina geeft aan dat de totale ingevoerde bedragen niet in balans zijn. Wanneer de gebruiker op deze banner klikt, verschijnt een modaal venster met gedetailleerde informatie over de fout.
  Pagina-niveau meldingen worden getoond wanneer de fout niet aan één specifiek element gebonden is, maar voortkomt uit een combinatie van invoervelden of andere omgevingsfactoren.

Globaal

• Voorbeeld:
  Op mobiele apparaten wordt soms een volledige schermmelding getoond, bijvoorbeeld:
  "U bent offline. Controleer uw Wifi- of dataverbinding."
  Hierbij kan een knop voor het vernieuwen van de pagina worden aangeboden.
  Globale meldingen informeren de gebruiker over kwesties die het gehele systeem beïnvloeden, zoals netwerkstoringen.

Voorbeelden van fouten en waarschuwingen

Wat ging er mis?	Wanneer verschijnt de melding?	Gebruikersinterface-oplossing	Voorbeeldmelding
De gebruiker vult een waarde in die niet voldoet aan de formuliervereisten.	Dynamische validatie: focus verplaatst vanuit het invoerveld	Inline foutmelding in een banner	Voer een einddatum in die in de toekomst ligt.
De gebruiker verstuurt het formulier zonder verplichte velden in te vullen.	Validatie bij inzending: activering van de verzendknop	Inline foutmelding in een banner	Vul de volgende velden in: Expense Report; Expense Amount.
De totaalbedragen van een gespecificeerde uitgave komen niet overeen.	Validatie bij inzending: activering van de verzendknop	Pagina-niveau foutmelding in een banner, aangevuld met inline meldingen indien mogelijk	Uw resterende tegoed voor dit uitgavenrapport is lager dan het ingevoerde bedrag per eenheid. Verlaag alstublieft het aangevraagde bedrag.
De gebruiker probeert een document op te slaan met een naam die al in gebruik is.	Wanneer het systeem een fout detecteert	Pagina-niveau foutmelding in een modaal venster	Er bestaat al een bestand met de naam “Journey Maps”. Kies een andere naam of vervang het bestaande bestand.
Er doet zich een prestatieprobleem voor bij het laden van een rapport.	Wanneer het systeem een fout detecteert	Pagina-niveau waarschuwing in een modaal venster	Uw verzoek wordt verwerkt. U kunt ondertussen verder werken en wij informeren u wanneer het rapport gereed is.
De internetverbinding is verbroken en er kan geen pagina worden geladen.	Wanneer het systeem een fout detecteert	Globale foutmelding in een leeg toestandscherm met vernieuwknop	U bent offline. Controleer uw Wifi- of dataverbinding. [Vernieuw pagina]

Foutpreventie

Om te voorkomen dat gebruikers fouten tegenkomen, dient het ontwerp zodanig te worden ingericht dat fouten zoveel mogelijk voorkomen worden. Enkele strategieën:

• Gebruik van Modale Componenten:
  Voor acties die het risico op kritieke fouten (zoals onomkeerbaar dataverlies) met zich meebrengen, kan een modaal venster worden ingezet. Dit venster vraagt de gebruiker expliciet om de actie te bevestigen of een alternatieve keuze te maken.

• Deactiveer Onbeschikbare Elementen:
  Elementen waartoe de gebruiker geen toegang heeft, moeten gedeactiveerd worden. Optioneel kunnen ze verborgen worden, tenzij informatiepresentatie noodzakelijk is.

• Helpteksten en Instructies:
  Waar nodig is het toevoegen van ondersteunende teksten essentieel om de gebruiker extra duidelijkheid te bieden bij het invullen van velden of het uitvoeren van acties.

Deze richtlijnen vormen de basis voor een consistente en toegankelijke communicatie van fouten en waarschuwingen binnen het Campus Experience Systeem (CXS). Door heldere, begrijpelijke meldingen en een logisch gestructureerde hiërarchie kunnen gebruikers effectief geïnformeerd worden en tijdig ingrijpen wanneer nodig.

Referenties

• 3.1.1. Taal van de pagina