Manchet

Du kan bruge en manchet til at introducere et trin eller en sides indhold. Typisk kan du bruge den når og hvor, det giver mening i kontekst for brugerne.

Designværdier

Retningslinjer

Hold manchetten kort og præcis, gerne max tre linjer.

Manchet er kun til korte introduktionstekster og ikke til lange informationstekster. Brug brødtekst og lister til yderligere informationstekster.

Brug kun manchet, når og hvor det er nødvendigt. Brug fx ikke manchet, hvis brugeren selv kan afkode siden og begynde at indtaste med det samme.

Typisk starter indtastningsflowet eller en sektion lige under manchet. Hvis det understøtter brugerens gennemførelse af løsningen, kan du godt indsætte brødtekst, lister, links, o.l. efter manchet.

Brødtekst

Designværdier

Retningslinjer

Undgå “mure af tekst” i din selvbetjeningsløsning: Bruge white space / mellemrum til at skabe luft mellem tekster og øge læsbarheden.

Brug kun fed tekst i meget begrænset omfang: Fx inde i sætninger til at fremhæve særligt centrale tal eller pointer.

Brug ikke fed tekst som overskrift.

Brug ikke understreget tekst, da det ligner links.

Brug ikke kursiv tekst, da det nedsætter læsbarheden.

Hjælpetekst

Retningslinjer

Nogle gange er det nødvendigt at forklare eller eksemplificere en feltoverskrift. Her kan du anvende hjælpetekst. Du kan også bruge hjælpetekst til at forklare, hvorfor du efterspørger særligt følsomme oplysninger. Fx hvis det kan være en barriere for at få et svar fra brugeren.

Brug hjælpetekst til at give uddybende forklaring (fx til at understøtte feltoverskrifter).

Se eksempel på brug af hjælpetekst

Fejlmeddelelser

Retningslinjer

Det er vigtigt for brugerne, at de får feedback på deres handling. Det gælder særligt, når noget fejler og fejltekst er et helt centralt element for formularer. Sørg derfor for, at de er knivskarpe og præcist kommunikerer, hvad fejlen består i, og hvad brugeren skal gøre for at komme videre. Skriv så vidt muligt fejlmeddelelse og vejledning i én og samme sætning.

• Skriv klar og præcis fejltekst i et sprog, som brugeren forstår.
• Vær høflig (“Indtast venligst din adresse”) og vær ikke anklagende (“Du mangler at indtaste din adresse”). Hjælp brugeren med at løse fejlen.
• Skriv ikke tekniske eller fagligt tunge fejltekster og brug ikke “jargon”.
• Placer fejlteksten dér, hvor fejlen forekommer.
• Fejltekst er som udgangspunkt rød. I formularer skal du indikere fejltekst med en rød streg. Andre steder end i formularer skal du indikere fejltekst med et fejlikon.

• Se retningslinjer for fejlmeddelelser
• Ti gode råd vedrørende fejlmeddelelser i formularer

Billedtekst

Forklarende eller beskrivende tekst tilhørende et billede.

Designværdier

Retningslinjer

Billedtekst vises under et billede, således at det synligt bemærkes at teksten og billedet hører sammen, samt at teksten ikke nødvendigvis er en del af den øvrige brødtekst.

Stor tekst

Stor tekst kan fx bruges til at fremhæve positive eller negative resultater og dermed fremhæve særlige tal eller ord.

Designværdier

Retningslinjer

Anvendes til

At fremhæve tal eller ord i særlig grad.

Anvendes ikke til

Afsnit af tekst.

Alle tal i en beregning.

Overskrifter.

Vejledning

Brug kun stor tekst i meget begrænset omfang og til nøje udvalgte kommunikative formål.

Linjelængde

For at sikre optimal læsbarhed er der indsat en maksimal bredde på linjelængden for brød- og manchet i koden til designsystemet.

Linjeafstand

Linjeafstanden er baseret på teksttypernes linjehøjde.

Manchet

Læs retningslinjerne for manchet

HTML Struktur

<p class="font-lead">Dette er en manchet</p>

Brødtekst

Læs retningslinjerne for brødtekst

HTML Struktur

<p>Brødtekst</p>
<p class="small-text">Dette er lille brødtekst</p>
<p class="bold">Dette er fed brødtekst</p>

Hjælpetekst

Læs retningslinjer for hjælpetekst

Fejlmeddelelser

Læs retningslinjer for fejlmeddelelser

HTML Struktur

<p class="form-hint">Hjælpetekst, der forklarer, hvad du skal gøre</p>

Billedtekst

Læs retningslinjer for billedtekst

HTML Struktur

<div class="figcaption">Dette er en billedtekst</div>

Stor tekst

Læs retningslinjerne for stor tekst

HTML Struktur

<p class="displayheading-1">Stor tekst nr. 1</p>
<p class="displayheading-2">Stor tekst nr. 2</p>
<p class="displayheading-2 text-positive">Stor positiv tekst</p>
<p class="displayheading-2 text-negative">Stor negativ tekst</p>