Deze stijlgids richt zich op het maken van meldingen en toastberichten voor de gebruikersinterface van een product. Deze elementen spelen een cruciale rol bij het communiceren van belangrijke acties, statussen en uitkomsten aan gebruikers. Een goed geschreven melding of toastbericht verbetert de gebruikerservaring door duidelijkheid, begeleiding en bruikbare informatie te bieden.
Kernprincipes
| Principe | Wat het betekent |
|---|---|
| Eerst duidelijkheid | Schrijf korte, directe berichten die direct het doel overbrengen. Vermijd technische jargon of complexe taal. |
| Consistentie | Gebruik dezelfde toon, opmaak en structuur voor alle meldingen. Volg dezelfde woordenschat voor herhaalde acties (bijv. "opgeslagen," "bijgewerkt," "mislukt"). |
| Relevantie | Pas boodschappen aan op de context van de actie. Alleen berichten tonen die betekenisvol zijn voor de workflow van de gebruiker. |
| Actiegericht | Gebruik werkwoorden om het resultaat van de handeling of de volgende stappen aan te geven. Zorg ervoor dat gebruikers weten wat ze hierna moeten doen als verdere actie nodig is. |
Meldingstypen
Succesmeldingen
Bevestig dat een actie succesvol is voltooid (bijvoorbeeld bestandsuploads, opgeslagen instellingen, gepubliceerde inhoud).
- "Wijzigingen succesvol opgeslagen."
- "Het artikel is gepubliceerd."
Foutmeldingen
Informeer gebruikers over mislukte acties of systeemfouten. Leg duidelijk uit wat er misging en geef begeleiding om het probleem op te lossen.
- "Bestand is niet geüpload. Zorg dat het aan de groottelimiet voldoet."
- "Domeinimport mislukt. Controleer het bestandsformaat en probeer het opnieuw."
Waarschuwingsmeldingen
Waarschuw gebruikers voor mogelijke problemen of risico's voordat ze verder gaan. Help gebruikers onomkeerbare fouten te voorkomen.
- "Je staat op het punt een categorie te verwijderen. Deze actie kan niet ongedaan worden gemaakt."
Informatieve meldingen
Geef niet-dringende updates of algemene informatie (bijv. feature-updates, aankondigingen, bevestigingen van automatische opslag).
- "Je wijzigingen worden automatisch opgeslagen."
Opmerking: De tekenlimiet voor in-app meldingen is 80, inclusief witruimte.
Toastberichten
Definitie: Toastberichten zijn korte, tijdelijke meldingen die kort in een hoek van de UI verschijnen. Ze worden meestal gebruikt voor niet-kritische updates.
Best Practices
| Richtlijn | Wat te doen |
|---|---|
| Houd het kort | Beperk berichten tot 1–2 zinnen. |
| Gebruik tegenwoordige tijd | Beschrijf de handeling of het resultaat beknopt in de tegenwoordige tijd. |
| Vermijd overbelasting | Vermeld alleen essentiële details. Overlaad de boodschap niet met te veel informatie. |
| Automatische afsluiting | Toastberichten zouden na enkele seconden moeten verdwijnen, tenzij de actie kritiek is en gebruikersbevestiging vereist. |
Voorbeelden
- "Artikel opgeslagen als concept."
- "1 bestand succesvol geüpload."
- "Reactie verwijderd."
Do's en Don'ts
| Doe | Niet doen |
|---|---|
| Gebruik duidelijke en beknopte taal. | Schrijf lange of te gedetailleerde berichten. |
| Leg uit wat er is gebeurd of wat er daarna komt. | Laat gebruikers gissen over de uitkomst. |
| Gebruik een vriendelijke, gespreksgerichte toon. | Klink robotachtig of overdreven formeel. |
| Pas de boodschap aan op de uitgevoerde actie. | Gebruik generieke of irrelevante berichten. |
Opmaakrichtlijnen
| Richtlijn | Voorbeeld |
|---|---|
| Begin met het resultaat of de actie | "Het artikel is succesvol gearchiveerd." |
| Gebruik zinsnaamval | Schrijf alleen het eerste woord en de eigennamen met een hoofdletter. |
| Vermijd overmatige interpunctie | Gebruik één punt aan het einde. Vermijd uitroeptekens, tenzij je succes viert. |
| Gebruik getallen voor specificiteit | "3 bestanden succesvol geüpload." |
Veelvoorkomende meldingen en Toast-berichten
Succesberichten
- "Instellingen succesvol bijgewerkt."
- "2 gebruikers succesvol geïmporteerd."
- "Link voor wachtwoord reset, verzonden naar je e-mail."
Foutmeldingen
- "Wijzigingen kunnen niet opslaan. Probeer het alsjeblieft opnieuw."
- "Deze categorienaam bestaat al. Kies een andere naam."
- "Artikel is niet gepubliceerd. Controleer je internetverbinding."
Waarschuwingsberichten
- "Je hebt wijzigingen die niet zijn opgeslagen. Wil je weggaan zonder te sparen?"
- "Het verwijderen van deze categorie verwijdert ook de subcategorieën en artikelen."
Informatieve boodschappen
- "Concept automatisch opgeslagen om 10:35 uur."
- "Je hebt beperkte toegang tot deze pagina."
Checklist voor het schrijven van meldingen en toastberichten
- Is de boodschap duidelijk en beknopt?
- Legt het het resultaat uit of de volgende stappen?
- Is het specifiek voor de actie van de gebruiker?
- Volgt het de toon en stijlrichtlijnen?
- Is het vrij van technisch jargon?