Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Toastbesked

Toastbeskeder bruges til at give brugeren vigtig og aktuel information om fx status, generelle fejl, fejlopsummeringer, samt til at gøre opmærksom på ting brugeren skal vide, fx automatiske ændringer i brugerens data o.l.

Til forskel fra Beskeder (alerts) som er placeret som en del af sideindholdet, placeres toastbeskeder ovenpå selve siden. Vær opmærksom på at toastbeskeder hurtigt kan gå fra at opfattes som nyttige til at opfattes som anmassende og påtrængende, så overvej nøje om det er denne komponent, der er det rigtige valg.

Retningslinjer

Anvendes til

At gøre brugeren opmærksom på vigtige oplysninger, ofte relateret til brugerens aktuelle aktivitet.

Anvendes ikke til

Brug Beskeder (alerts), hvis en besked skal placeres som en del af indholdet på siden.

Brug ikke toastbeskeder til at markere fejlindtastning i et specifikt felt. Brug da fejlmeddelelser i stedet.

Brug modal dialog – ikke toastbeskeder – til at give brugerne information om en potentielt kritisk handling. Dermed risikerer brugeren ikke at overse eller misforstå beskeden.

Kritiske beskeder eller lange beskeder, hvis toastbeskeden er tidsindstillet og forsvinder automatisk. Det gør det vanskeligt for brugere, som fx gør brug af hjælpeteknologier, at læse meddelelsen før den forsvinder.

Vejledning

Gør informationen i toastbeskeden aktiv og handlingsanvisende, så brugeren forstår, hvad der er behov for eller hvad den aktuelle status er.

Brug ord og begreber, som brugeren kan genkende fra løsningen.

Skriv kort og præcist og undgå tekniske beskeder, der kan forvirre brugeren.

Brug beskeder til at øge brugerens forståelse for løsningen.

Tilføj ikke interaktivt indhold som links ol. på toastbeskeden, da der kan opstå udfordringer i forbindelse med tilgængelighed.

Når toastbeskeden vises, kan man lade den forsvinde igen, men vær opmærksom på at WCAG succes kriteriet 2.2.1: Timing Adjustable bør efterleves.

Vis den nyeste toastbesked øverst. Hvis der kan være flere toastbeskeder vist ad gangen og rækkefølgen er vigtig, så tilføj et tidsstempel til toastbeskeden.

Varianter

Succes

Eksempel på notifikation med success farver

Succes: Din ansøgning er afsendt

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Advarsel

Eksempel på notifikation med advarselsfarver

Advarsel: Dette er en advarsel

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Fejl

Eksempel på notifikation med fejlfarver

Fejl: Der opstod en fejl

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Information

Eksempel på notifikation med infofarver

Information: Du har fået en besked

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Uden brødtekst

Eksempel på notifikation uden brødtekst

Information: Dine ændringer er blevet gemt