Guidelines for digital selvbetjening

Webformularer optræder på de fleste websites – uanset om konteksten er indberetning, reservation eller kontakt. Ingen brugere har lyst til at udfylde formularer, og kun få læser hjælpeteksterne. Disse 112 guidelines kan hjælpe med at gøre digitale selvbetjeningsløsninger nemme og intuitive at bruge.

Af Marie Soelberg

Af Børge Kristensen

Overblik: Guidelines for digital selvbetjening – kort fortalt

Webformularer består af labels, formular-elementer og understøttende tekster. For at gøre webformularer brugervenlige bør du følge 112 guidelines, der er baseret på internationale standarder, anerkendt faglitteratur og best practice. De behandler følgende emner:

Struktur
Overskrift
Labels
Tekstfelter
Radioknapper
Tjekbokse
Dropdown-lister og pop-up-lister
Trinknapper
Listebokse
Analoge formular-elementer
Knapper
Markering af obligatorisk og valgfrit
Defaults
Hjælpetekster
Fejlmeddelelser
Succes-meddelelser

Struktur

Struktur handler om rækkefølge, gruppering og opdeling af de emner, formularen behandler.

Begyndelse

Begynd med kernen i brugerens task. ^{17, s. 196-206}

Lad ikke login være det første skridt. ¹⁶

Opdeling

Del formularen op på flere sider, hvis den kan deles op i meningsfulde underemner. ^{5, s. 102}

Hold formularen på 1 side, hvis den bruges hyppigt af trænede brugere. ^{5, s. 102}

Brug en statusindikator, når formularen er delt op i en række faste trin. ^{5, s. 106}

Rækkefølge

Opstil svarmuligheder i en logisk rækkefølge. ¹⁰

Gruppér relaterede felter. ⁹

Navngiv grupperne på en måde, der gør dem lette at adskille fra hinanden. ⁹

Behandl ét emne ad gangen, og hop ikke tilbage til noget, der tidligere er behandlet. ⁴

Citat

"We’ve consistently found that very simple one-question-per page designs work better for our users than anything more complicated ..." (Caroline Jarrett, 2015)

Se også

Design pattern: Form structure (Gov.uk)

Overskrift

Overskriften fortæller, hvad formularens formål er. Når formularen er delt op på flere sider, optræder overskriften på alle sider, samtidig med at de enkelte sider er forsynet med en underoverskrift.

Placering

Formularens overskrift skal være gennemgående på alle formularens sider. ^{8, s. 203}

Udformning

Giv overskrifter prominens (fx vha. størrelse eller farve) i formularens visuelle hierarki. ¹⁹

Formulering

Giv formularen en overskrift, der gør det klart, hvad den gør. ^{17, s. 40}

Sørg for, at overskriften matcher det link, der sendte brugeren ind i formularen. ^{17, s. 40}

Brug verber i stedet for navneord i overskriften. ¹

Lad formålet med den enkelte side fremgå af en underoverskrift, når formularen har flere sider. ^{8, s. 205}

Citat

"... noun services aren't helpful. We need to turn them into verb services." (Loise Downe, 2015)

Se også

Good services are verbs, bad services are nouns (Louise Downe, 2015)

Labels

En formular er en dialog. Formularens labels er afsenderens anmodninger eller spørgsmål, mens felter og knapper er forbeholdt brugernes svar.

Placering

Placér som udgangspunkt labels over input-felter. ⁹

Placér labels tættere på de felter, de hører til, end på andre felter. ⁹

Placér kun labels ved siden af felter, hvis der er tungtvejende argumenter for at spare på pladsen i højden. ^{17, s. 60-62}

Venstrejustér labels placeret ved siden af felter, når længden er ensartet. ^{3, afsnit 5.3.5}

Højrejustér labels placeret ved siden af felter, når der er stor forskel på længden. ^{3, afsnit 5.3.4}

Undlad at placere labels i indtastningsfelter. ⁶

Udformning

Giv labels visuel vægt, så de står tydeligt frem for andre elementer. ¹⁸

Formulering

Lad labelen angive, hvilken slags input systemet vil acceptere. ^{2, afsnit 6.2.1}

Citat

"The space inside the text box is for the user; the space outside the box, for the organization ..." (Caroline Jarrett, 2013)

Se også

Mobile Form Usability: Never Use Inline Labels (Jamie Appleseed, 2013)

Tekstfelter

Tekstfelter gør det muligt for brugerne at indtaste tekst og tal i fri form. Felterne kan bestå af en eller flere linjer afhængigt af længden på det forventede svar.

Anvendelse

Brug tekstfelter, når der er mange gyldige svarmuligheder, og de ikke kan opstilles på forhånd. ^{3, afsnit 8.5}

Undlad at bruge tekstfelter til input, brugerne let indtaster forkert. ¹⁰

Placering

Indsæt afstand mellem inputfelter svarende til 50-75 % af inputfeltets højde. ^{17, s. 44}

Udformning

Lad det tydeligt fremgå af udformningen af tekstfeltet, at brugerne kan skrive i det.

Afstem længden af feltet til det, der skal indtastes. ⁴

Undlad at variere felternes længde, hvis det ikke bidrager til forståelsen af, hvad der skal indtastes. ^{17, s. 74}

Brug tekstfelter med plads til flere linjers tekst til kommentarer.

Citat

"A form is a document that asks questions and has space for the answers." (Caroline Jarrett, 2000, pdf, 167 kB)

Se også

Don't Put Hints Inside Text Boxes in Web Forms (Caroline Jarrett, 2010)

Radioknapper

Radioknapper gør det muligt at vælge ét – og kun ét – svar i en liste. Radioknapper er som regel udformet som cirkler. Når en radioknap er valgt, vises en prik inde i cirklen.

Anvendelse

Brug radio-knapper, når der skal vælges 1 svar blandt 2-5 gensidigt udelukkende svarmuligheder. ^{3, afsnit 8.6}

Placering

Placér radioknapper under hinanden, så de danner en vertikal skanne-linje. ^{3, afsnit 9.2.7}

Udformning

Sæt som hovedregel altid én svarmulighed som default. ¹³

Lad både selve radioknappen og dens tekst være klikbar. ^{17, s. 69}

Formulering

Formulér tekster til radioknapper så kort og konsistent som muligt. ^{8, s. 207}

Undgå alle overflødige ord. ^{8, s. 207}

Citat

"If you are considering selecting no radio button by default, think hard about your reasons for doing so." (Kara Pernice, 2014)

Se også

Making radio buttons and checkboxes easier to use (Robin Whittleton, 2015)

Tjekbokse

Tjekbokse gør det muligt at vælge ét eller flere svar i en liste. Tjekbokse er som regel udformet som kvadrater. Når en tjekboks er valgt, vises et kryds eller et flueben inde i kvadratet.

Anvendelse

Brug tjekbokse, når der kan vælges flere svar i samme liste. ^{3, afsnit 8.7}

Brug en tjekboks, når der kun er 1 valgmulighed, der kan være valgt til eller valgt fra. ^{17, s. 69}

Placering

Placér tjekbokse under hinanden, så de danner en vertikal skanne-linje. ^{3, afsnit 9.2.7}

Udformning

Lad både label og tjekboks være klikbar. ^{17, s. 69}

Formulering

Sørg for, at betydningen af både tilvalgt og fravalgt tjekboks er åbenlys. ^{8, s. 208}

Formulér valgmuligheder positivt. ^{8, s. 208}

Brug samme sprogstruktur i alle elementer. ^{8, s. 208}

Citat

"Use standard visual representations. A checkbox should be a small square that has a checkmark or an X when selected." (Jakob Nielsen, 2004)

Se også

Why You Should Add Hover Effects to Your Checkboxes (Anthony Thomas, 2010)

Dropdown-lister og pop-up-lister

Dropdown-lister og pop-up-lister gør det muligt at vælge ét – og kun ét – svar i en liste. Valgmulighederne er skjult for at spare plads, indtil brugeren aktiverer listen. Dropdown-lister viser kun valgmuligheder under det valgte; pop-up-lister viser valgmuligheder både under og over det valgte.

Anvendelse

Brug en dropdown, når der skal vælges 1 svar blandt flere end 4 gensidigt udelukkende valgmuligheder. ^{3, afsnit 8.11}

Undgå dropdown-lister, når brugeren har behov for at se svarmulighederne for at forstå spørgsmålet. ¹⁰

Brug en pop-up-liste som alternativ til drop-down-lister. ^{3, afsnit 8.11}

Udformning

Lad det tydeligt fremgå af udformningen, at dropdown-listen kan foldes ud.

Formulering

Formulér valgmulighederne så kort og konsistent som muligt. ^{8, s. 209}

Sortér lange lister alfabetisk; korte lister efter popularitet. ^{8, s. 210}

Citat

"... while drop-down lists do have a place in web design, you should always consider whether there’s a more appropriate alternative, ..." (Christian Holst, 2010)

Se også

Dropdowns Should be the UI of Last Resort (Luke Wroblewski, 2015)

Trinknapper

Trinknapper gør det muligt at vælge ét – og kun ét – svar fra en liste ved at navigere ét trin op eller ned ad gangen. Trinknapper bruges ofte i forbindelse med valg af antal.

Anvendelse

Brug trinknapper, når brugerne kun skal foretage mindre justeringer. ^{3, afsnit 8.8}

Undgå trinknapper, når brugerne har behov for at gennemse svarmulighederne. ^{3, afsnit 8.8}

Citat

"Forms can benefit from stepper controls when users need to edit quantities." (Nick Kellingley)

Se også

Video: Simplifying Input with Steppers (Luke Wroblewski, 2014)

Listebokse

Listebokse minder om dropdown-lister, men nogle eller alle valgmuligheder i listebokse er umiddelbart synlige. (Valgmuligheder, der ikke er umiddelbart synlige, tilgås ved hjælp af en scrollebar). I enkeltvalgslistebokse kan brugeren kun vælge ét svar, mens flervalgslistebokse tillader at vælge flere svar.

Anvendelse

Brug enkeltvalgs-listebokse, når der kan vælges 1 svar blandt flere end 5 gensidigt udelukkende svarmuligheder. ^{3, afsnit 8.9}

Brug enkeltvalgs-listebokse, når det har værdi, at flere muligheder er synlige på én gang. ^{3, afsnit 8.9}

Brug flervalgs-listebokse, når der kan vælges flere svar blandt flere end 5 svarmuligheder. ^{3, afsnit 8.10}

Brug flervalgs-listebokse, når det har en værdi, at flere muligheder er synlige på én gang. ^{3, afsnit 8.10}

Udformning

Sørg for, at der er tilstrækkelig plads til at vise mindst 3 svarmuligheder på én gang uden at scrolle. ^{3, afsnit 8.9-8.10}

Formulering

Formulér valgmulighederne så kort og konsistent som muligt. ^{8, s. 209}

Citat

"... the dual nature of list boxes (mutually exclusive single selection or multiple selection) tends to cause problems for many people." (Luke Wroblewski, 2008)

Se også

Select Multiple Form Fields (Ryan Cramer, 2008)

Analoge formular-elementer

Analoge formular-elementer er en fællesbetegnelse for formular-elementer, der anvender metaforer fra fysiske elementer på fx radioer og forstærkere. Det mest almindelige analoge formular-element er slideren, hvor brugerne trinløst kan ændre fx et tidspunkt eller et antal.

Anvendelse

Brug fx sliders, når der er behov for let at foretage store og upræcise ændringer, og valgmulighederne skal præsenteres som del af et kontinuum. ^{3, afsnit 8.15}

Citat

"Use a slider only when the precise value won’t matter to the user, but rather only the approximate range." (Aurora Bedford, 2015)

Se også

Form Usability: 5 Requirements for Slider Interfaces (Christian Holst, 2015)

Knapper

Knapper indsender brugernes indtastninger og valg i formularen. Knapper er som regel udformet som et rektangel med en tekst-label indeni.

Anvendelse

Brug knapper, når der udføres en handling ^{3, afsnit 8.3}, eller når der sendes data ⁷.

Undgå at bruge knapper til navigation. ⁷

Undlad at have en annullér- eller ryd-knap, hvis det er klart, hvordan man fjerner input.¹²

Placering

Placér knapper i venstre side under formularens felter. ^{17, s. 93-97}

Undgå, at sekundære handlinger er placeret som de mest oplagte næste trin. ^{17, s. 93-97}

Udformning

Lad det tydeligt fremgå af udformningen, at knappen er klikbar, så den ikke kan forveksles med et tekstfelt.

Sørg for, at primære og sekundære handlinger er visuelt lette at skelne fra hinanden. ^{17, s. 90-97}

Citat

"Links are primary used to 'go somewhere.' [...] Buttons are primarily used to 'do something' on a website." (Randall Knutson, 2011)

Se også

7 Basic Best Practices for Buttons (Caroline Jarrett, 2012)

Markering af obligatorisk og valgfrit

I tilfælde, hvor formularen både indeholder obligatoriske og valgfrie felter, skal ord eller symboler markere, hvad der er hvad.

Anvendelse

Drop de spørgsmål, brugerne ikke behøver svare på. ^{17, s. 76}

Undlad markeringer, når det er selvfølgeligt, at alle felter skal udfyldes.

Placering

Sæt markeringen ved siden af feltets label og ikke ved siden af feltet. ^{17, s. 80}

Udformning

Markér de obligatoriske felter (fx med en asterisk), når størstedelen er valgfrie. ^{17, s. 75-78}

Markér de valgfrie felter (fx med teksten 'Valgfrit'), når størstedelen er obligatoriske. ^{17, s. 75-78}

Forklar markeringens betydning øverst på siden. ^{5, s. 134}

Citat

"Literally including the phrase 'optional' after a label is much clearer than any visual symbol you could use to mean the same thing." (Luke Wroblewski, 2008, s. 78)

Se også

E-Commerce Checkouts Need to Mark Both Required and Optional Fields Explicitly (Christian Holst, 2014)

Defaults

Standardindstillinger eller defaults er formular-elementer, der er valgt eller udfyldt på forhånd med de mest almindelige input.

Anvendelse

Brug standardindstillinger for at mindske interaktionsomkostninger. ^{3, afsnit 6.8.1}

Vær opmærksom på, at brugerne kan overse, at de skal vælge noget, når der er en standardindstilling. ¹⁴

Udformning

Definér 1 knap som standard-handling, der udløses af 'enter', når der er flere knapper. ^{3, afsnit 6.9.5 og 6.9.7}

Placér cursoren i første relevante input-felt. ^{3, afsnit 6.3.3}

Flyt automatisk cursoren til næste felt, hvor det er relevant. ^{3, afsnit 6.2.9}

Citat

"Defaults help users in many ways." (Jakob Nielsen, 2008)

Se også

Designing For Explicit Choice (Colleen Roller, 2015)

Hjælpetekster

Hjælpetekster kan være umiddelbart synlige i forbindelse med en label (indlejret), vises på foranledning af brugeren (brugeraktiveret), dukke op ved aktivering af et bestemt element (systemaktiveret) eller være placeret på en særskilt side.

Anvendelse

Vis kun hjælpetekster, når de er relevante.

Brug hjælpetekster, når brugerne skal oplyse noget, de ikke ved hvad er. ^{17, s. 105}

Forklar brugerne, hvorfor de skal give information, der virker unødvendig. ^{17, s. 105}

Gør brugerne trygge, når de skal oplyse data, de bekymrer sig om sikker behandling af. ^{17, s. 105}

Instruér brugerne, hvis felterne skal udfyldes på en bestemt måde. ^{17, s. 105}

Forklar hvorfor, hvis et felt skiller sig ud fra de øvrige ved at være enten obligatorisk eller valgfrit. ^{17, s. 105}

Placering

Undlad at placere hjælpetekster i inputfelter. ¹⁵

Placér indlejret hjælpetekst sammen med labelen. ¹⁵

Placér adgang til brugeraktiveret hjælp ved siden af feltets label og ikke ved siden af inputfeltet. ^{17, s. 113}

Vær forsigtig med brugen af system-aktiveret hjælp. ^{17, s. 109}

Gør det tydeligt, hvilket felt den systemaktiverede hjælpetekst er relateret til. ^{17, s. 109}

Udformning

Adskil hjælpetekster visuelt fra andre tekster. ^{2, afsnit 5.2.1}

Indled med en særskilt startside med en instruerende tekst, hvis formularen er kompliceret. ^{17, s. 105}

Formulering

Undgå lange forklarende tekster i formularer. ^{17, s. 105}

Citat

"The main thing you need to know about instructions is that no one is going to read them ..." (Steve Krug, 2014)

Se også

Good Help is Hard to Find (Lyle Mullican, 2010)

Fejlmeddelelser

Fejlmeddelelser informerer brugerne om fejl, fx at et felt ikke er udfyldt korrekt eller slet ikke er udfyldt. Fejmelddelelser indeholder information om, hvad der er gået galt, hvorfor fejlen er opstået, og hvordan den skal rettes.

Anvendelse

Vis fejlmeddelelser så hurtigt som muligt. ^{3, afsnit 9.5.8}

Fjern fejlmeddelelsen, når fejlen er rettet. ^{3, afsnit 9.5.5}

Placering

Indsæt fejlmeddelelser under det felt, hvor fejlen skal rettes. ^{17, s. 119-132}

Indsæt også fejlmeddelelser øverst på siden. ^{17, s. 119-132}

Udformning

Brug farven rød til fejlmeddelelser og til at markere fejl. ^{17, s. 119-132}

Fremhæv fejl med flere visuelle virkemidler end farve alene. ^{17, s. 119-132}

Vis en liste over fejl øverst på siden, hvis der er flere fejl – gerne med links til de berørte felter i lange formularer. ^{17, s. 119-132}

Fremhæv de berørte punkter. ^{17, s. 119-132}

Undlad at bruge farven rød til andet end fejlmeddelelser. ^{17, s. 95 og 156}

Undlad at vise fejlmeddelelser i modalvinduer. ^{17, s. 123}

Formulering

Fortæl i fejlmeddelelser, hvad der er galt, hvad der skal gøres, og hvorfor fejlen er opstået. ^{2, afsnit 9.5.3}

Fokusér på at hjælpe brugerne videre. ^{8, s. 153}

Vær konstruktiv. ^{8, s. 153}

Skriv konkret. ^{2, afsnit 5.2.4}

Undgå at anklage brugeren for at gøre noget forkert. ^{8, s. 197-198}

Brug evt. passiv for at opnå en neutral og ikke-anklagende sprogtone med fokus på det relevante. ^{8, s. 197-198}

Undlad at omtale en irrelevant tredjeperson (fx et system eller en database). ^{8, s. 197-198}

Let evt. stemningen med en humoristisk tone, hvis fejlen ikke er alvorlig. ^{11, s. 33}

Citat

"The very worst error messages are those that don't exist." (Jakob Nielsen, 2001)

Se også

Avoid Being Embarrassed by Your Error Messages (Caroline Jarrett, 2010)

Succes-meddelelser

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.

Anvendelse

Giv brugerne besked, når noget er lykkedes. ^{17, s. 133}

Placering

Sørg for, at succes-meddelelser aldrig hindrer brugerne i at komme videre i formularen. ^{17, s. 133}

Udformning

Giv brugerne mulighed for at bekræfte eller ændre handlingen, når det er relevant. ^{8, s. 151}

Undgå blindgyder ved at foreslå passende næste handlinger på kvitteringssider. ^{17, s. 95 og 136}

Citat

"Think of success messages as just that — a way to let people know they accomplished their goal." (Luke Wroblewski, 2008, s. 133)

Se også

Inline Validation in Web Forms (Luke Wroblewski, 2009)

Referencer

Tilmeld dig Copenux' nyhedsbrev, og få artikler som denne pr. e-mail hver måned.

Udgivet: 05.10.2016. Grafik: Marie Soelberg.