Beskeder (Alerts)

Sådan bruges komponenten

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.

Sådan (do)

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)

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

Sådan (do)

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)

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).

Varianter

Teksteksempler

Besked med luk knap

Se komponenten i eksempelløsninger

• Formular til kontaktoplysninger: Kvittering
• Trinformular til registrering: Kvittering
• Trinformular til ansøgning: Kvittering
• Sagsoversigt: Afgørelser

Referencer

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

Installation

HTML Struktur

<div class="alert alert-info">
    <svg class="icon-svg alert-icon" aria-label="Information" focusable="false"><use xlink:href="#info"></use></svg>
    <div class="alert-body">
        <h2 class="alert-heading">Informativ besked</h2>
        <p class="alert-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium.</p>
    </div>
</div>

<div class="alert alert-success">
    <svg class="icon-svg alert-icon" aria-label="Succes" focusable="false"><use xlink:href="#check-circle"></use></svg>
    <div class="alert-body">
        <h2 class="alert-heading">Succesmeddelelse</h2>
        <p class="alert-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium.</p>
    </div>
</div>

<div class="alert alert-warning" role="alert">
    <svg class="icon-svg alert-icon" aria-label="Advarsel" focusable="false"><use xlink:href="#report-problem"></use></svg>
    <div class="alert-body">
        <h2 class="alert-heading">Advarsel</h2>
        <p class="alert-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium.</p>
    </div>
</div>

<div class="alert alert-error" role="alert">
    <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use xlink:href="#highlight-off"></use></svg>
    <div class="alert-body">
        <h2 class="alert-heading">Fejlbesked</h2>
        <p class="alert-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium.</p>
    </div>
</div>

Anvend role="alert" til beskeder, der skal læses højt af en skærmlæser med det samme, hvis indholdet ændrer sig. Dette kan for eksempel være en besked, der bliver synlig efter at have været skjult eller hvor indholdet ændrer sig. Advarsler og fejlbeskeder bør altid være markeret med role="alert".

Hvis beskeden indeholder en alert-heading, sørg da for at benytte et html-element, der passer ind i konteksten på siden. Dette vil som regel være en overskrift, for eksempel <h3>, eller et <strong>-element.

Javascript

Man kan bruge nedenstående JavaScript for at sætte events på luk-knappen i beskederne. Det er kun nødvendigt, hvis man gør brug af luk-knappen. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:

new DKFDS.Alert(document.getElementById('ALERT-ID')).init();

Events

Farver

Informativ

Informativ er blå, og defineres med klassen alert-info.

<div class="alert alert-info">
    <svg class="icon-svg alert-icon" aria-label="Information" focusable="false"><use xlink:href="#info"></use></svg>
    <div class="alert-body">
        <h3 class="alert-heading">Informativ besked</h3>
        <p class="alert-text">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.</p>
    </div>
</div>

Succes

Succesbesked er grøn, og defineres med klassen alert-success.

<div class="alert alert-success">
    <svg class="icon-svg alert-icon" aria-label="Succes" focusable="false"><use xlink:href="#check-circle"></use></svg>
    <div class="alert-body">
        <h3 class="alert-heading">Succesbesked</h3>
        <p class="alert-text">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.</p>
    </div>
</div>

Advarsel

Besked med advarsel er gul, og defineres med klassen alert-warning.

<div class="alert alert-warning" role="alert">
    <svg class="icon-svg alert-icon" aria-label="Advarsel" focusable="false"><use xlink:href="#report-problem"></use></svg>
    <div class="alert-body">
        <h3 class="alert-heading">Advarsel</h3>
        <p class="alert-text">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.</p>
    </div>
</div>

Fejl

Besked med fejl er rød, og defineres med klassen alert-error.

<div class="alert alert-error" role="alert">
    <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use xlink:href="#highlight-off"></use></svg>
    <div class="alert-body">
        <h3 class="alert-heading">Fejl</h3>
        <p class="alert-text">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.</p>
    </div>
</div>

Paragrafbredde

Defineres med klassen alert--paragraph.

<div class="alert alert-info alert--paragraph">
    <svg class="icon-svg alert-icon" aria-label="Information" focusable="false"><use xlink:href="#info"></use></svg>
    <div class="alert-body">
        <h3 class="alert-heading">Besked med mindre bredde</h3>
        <p class="alert-text">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.</p>
    </div>
</div>

Luk knap

<div class="alert alert-info has-close">
    <svg class="icon-svg alert-icon" aria-label="Information" focusable="false"><use xlink:href="#info"></use></svg>
    <div class="alert-body">
        <h4 class="alert-heading pr-7">Besked med luk</h4>
        <p class="alert-text">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.</p>
        <button type="button" class="alert-close">
            <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#close"></use></svg>Luk
        </button>
    </div>
</div>