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

Beskeder (Alerts)

Eksempel på beskeder

Informativ besked

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

Succesmeddelelse

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

Retningslinjer

Anvendes til

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

Anvend succes- og advarselsbeskeder til at bekræfte en handling eller give besked om behov for handling.

Anvendes ikke til

Brug ikke beskeder til at markere fejlindtastning i et specifikt felt. Anvend i stedet fejlmeddelelser.

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

Brug ikke beskeder som farvelade for at “peppe” løsningen op, når informationen er neutral og statisk. Anvend da i stedet almindelig brødtekst.

Vejledning

Brug kun beskeder, når det er nødvendigt og hjælper brugeren med at forstå hvad denne skal, hvad der sker eller hvorfor.

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.

Informativ besked

Anvend informative beskeder til at gøre brugeren opmærksom på, at der er sket noget i brugergrænsefladen, som kan have betydning for deres handlinger. Det kan fx være hvis visse felter er blevet automatisk udfyldt med data andetstedsfra, som brugeren bør kontrollere.

Succesmeddelelse

Anvend succesmeddelelser til at gøre brugeren opmærksom på, at en bestemt handling er gået korrekt igennem. Det kan fx være når en formular er blevet sendt af sted, eller hvis brugerens ændringer i en løsning er blevet gemt.

Advarsel

Brug advarsler til information, som ikke er udtryk for fejl, men som med høj sandsynlighed kan lede til fejl eller problemer, hvis ikke brugeren er opmærksom på det. Det kan fx være for at gøre opmærksom på planlagt nedetid for en løsning, eller hvis behandlingstiden pga. aktuelle omstændigheder er forlænget i en sådan grad, at det kan have særlige konsekvenser for brugeren.

Fejlbesked

Brug kun fejlbeskeder til deciderede fejl. Det kan både være som opsummering af fejl i brugerens egne indtastninger, eller hvis en handling ikke kunne gennemføres grundet tekniske fejl.

Beskeder do's and don'ts

Sådan (do)

Beskeder bør placeres i øverst i formularen - dvs. over alle felter.

Sådan: Brug beskeder til at gøre brugerne opmærksomme på vigtige oplysninger, der kan hjælpe dem med at udføre og fuldføre deres opgave, fx status, opdateringer, nedetid eller fejl. Gør informationen konstruktiv og handlingsanvisende (Lior, 2013, s. 153).

Ikke sådan (don't)

Beskeder bør ikke placeres midt i formularen, og slet ikke flere beskeder på én gang.

Ikke sådan: Brug ikke besked-komponenten som erstatning for fejlmeddelelser eller hjælpetekster, der kun er relevante for et bestemt felt i formularen.

Successbeskeder do's and don'ts

Sådan (do)

Eksempel på, hvordan en successbesked kan se ud

Sådan: Giv brugerne besked, når noget er lykkedes (Wroblewski, 2008, s. 133). Succesmeddelelser er bekræftelser på, at systemet har modtaget en brugers input. De kan vises, når et felt er udfyldt korrekt, når et trin i en proces er gennemført eller som afslutning på formularen. Giv brugerne mulighed for at bekræfte eller ændre det indtastede, når det er relevant (Lior, 2013, s. 151).

Ikke sådan (don't)

Eksempel på, hvordan en successbesked ikke bør se ud

Ikke sådan: Undgå succesmeddelelser, der er så korte, at de efterlader brugerne usikre på, hvad der er sket, hvad der er indsendt, og hvad der sker næst. Undgå blindgyder ved at foreslå passende næste handlinger på kvitteringssider (Wroblewski 2008, s. 95 og 136). Undgå at vise succesmeddelelser i modale vinduer (Silver, 2018, s. 256-257).

Se komponenten i eksempelløsninger

Referencer

  • Linda Newman Lior: Writing for Interaction (2013)
  • Luke Wroblewski: Web Form Design: Filling in the Blanks (2008)
  • Adam Silver: Form Design Patterns (2018)

Varianter

Beskeder med ikon

Eksempel på besked med ikon

Informativ besked - med ikon

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

Succesmeddelelse - med ikon

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

Teksteksempler

Eksempel på besked i forskellige formater
Informativ besked - kun overskrift

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

Informativ besked - tekstafsnit

Dette eksempel viser, hvordan en besked ser ud, når dens bredde er blevet begrænset. Bredden svarer til længden på en paragraf og denne type beskeder er derfor mere velegnet, hvis du vil vise beskeden midt i en tekst.

Besked med luk knap

Eksempel på besked med luk-knap

Besked med luk

Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.