Inputfelter

• Hjælpetekst
• Obligatoriske og frivillige felter
• Read-only
• Deaktiveret
• Prefix og suffix
• Karakterbegrænsning
• Feltbredde

Retningslinjer

Anvendes til

Brug til input af information i form af bogstaver og tal eller en kombination af begge.

Brug inputfelter når det er nemmere for brugeren at skrive information end at vælge den på anden vis.

Brug når brugeren skal kunne copy paste information ind i en formular.

Anvendes ikke til

Når brugeren skal vælge ud fra et prædefineret sæt af værdier (fx nogle få bestemte datoer) eller hvis der er strenge krav til datakonsistens, oftest i en løsning uden klientside validering (hvis brugerens input-format kan skabe fejl på serversiden).

Vejledning

Brug primært formularelementer, når der er behov for, at brugeren kan tilføje information, som ikke kan vælges ud fra prædefinerede værdier, eller som løsningen ikke automatisk kan forudse ud fra brugerens andre indtastninger.

Vis kun fejlmeddelelser, når brugeren har indtastet en ugyldig værdi.

Fejlmeddelelser skal være meningsfulde og hjælpsomme.

Placér fejlmeddelelser mellem label og feltet, som bliver markeret med rødt.

Inputfelter er ikke perfekte til mobile løsninger. Overvej om de er nødvendige eller om du kan tilbyde brugeren en anden form for interaktion.

Brug feltbredden til at begrænse antallet af tegn i et felt. Feltbredden angiver det forventede omfang af tegn, så brugeren får en fornemmelse af, hvad der skal indtastes. Fx bør et felt, hvor man skal angive et dansk postnummer, kun være 4 tegn bredt, mens et felt til et gadenavn bør være på minimum 27 tegn.

Brug ikke feltbredde til at validere brugerens input. Angiv i stedet krav til inputvalidering i en vejledning.

Feltets bredde skal modsvare det, du forventer at brugeren skal indtaste, så brugeren kan se alle tegn under indtastningen.

Felter do's and don'ts

Sådan (do)

Sådan: Brug inputfelter, når der er mange gyldige svarmuligheder, som ikke kan opstilles på forhånd, og når mange typer svar er acceptable. (ISO, 2012, afsnit 8.5).

Ikke sådan (don't)

Ikke sådan: Undlad at bruge inputfelter til information, som lettere kan vælges ud fra prædefinerede værdier (ISO 9241-143, afsnit 8.5), og som brugerne let indtaster forkert (Miller & Jarrett, 2001).

Felt labels do's and don'ts

Sådan (do)

Sådan: Placér labels over formularens felter – tættere på de felter, de hører til, end på andre felter (Silver, 2018, s. 31-32). Placeringen over felterne gør formularen hurtigere at skanne, fordi øjet ikke behøver at bevæge sig frem og tilbage mellem label og indtastningsfelt, som det skulle, hvis labelen var placeret til venstre for feltet (McCloskey, 2013).

Ikke sådan (don't)

Ikke sådan: Undlad at placere labels inde i formularens felter. Formularens labels er afsenderens anmodninger eller spørgsmål, mens felterne bør være forbeholdt brugernes svar (Jarrett, 2013). En label inde i felt kan medføre, at brugerne fejlfortolker labelen som autoudfyldt data, og at feltet slet ikke ligner et indtastningsfelt (Sherwin, 2014-2018).

Fejlmeddelelse

Læs mere om korrekt brug af fejlmeddelelser og deres formuleringer.

Når der vises en fejlmeddelelse, vis da også fejlopsummering.

Se komponenten i eksempelløsninger

• Formular til kontaktoplysninger: Oplysninger om dig
• Trinformular til registrering: Kontaktoplysninger
• Trinformular til ansøgning: Kontaktoplysninger
• Trinformular til ansøgning: Tilføj dokumentation

Referencer

• ISO 9241-143: Forms (2012)
• Adam Silver: Form Design Patterns (2018)
• Marieke McCloskey: Form Design Quick Fix: Group Form Elements Effectively Using White Space (2013)
• Caroline Jarrett: Don’t Put Labels Inside Text Boxes (Unless You’re Luke W) (2013)
• Katie Sherwin: Placeholders in Form Fields Are Harmful (2014-2018)

Varianter

Hjælpetekst

Felt med hjælpetekst do's and don'ts

Sådan (do)

Sådan: Placér indlejret hjælpetekst sammen med labelen (Sherwin, 2014-2018). På grund af menneskets svage perifere syn, kan brugerne kun se skarpt i en diameter på 2-4 cm ved en computerskærm (Johnson, 2014, s. 54). Hvis hjælpeteksten ikke står tæt på labelen, vil brugerne derfor måske ikke opdage den.

Ikke sådan (don't)

Ikke sådan: Undlad at placere hjælpetekster under felter, hvor de er svære at få øje på. Undgå også at placere dem inde i indtastningsfelterne, hvor de forsvinder, når brugerne begynder at taste (Sherwin, 2014-2018).

Referencer

• Katie Sherwin: Placeholders in Form Fields Are Harmful (2014-2018)
• Jeff Johnson: Designing with the Mind in Mind, Second Edition (2014)

Obligatoriske og frivillige inputfelter

Undgå frivillige inputfelter så vidt muligt. Hvis et felt er frivilligt, så overvej altid, om det er nødvendigt at have med i formularen.

Hvis en formular indeholder frivillige inputfelter, som vil have en betydelig positiv effekt for brugeren, kan dette forklares i en hjælpetekst. Det kan f.eks. være tilfældet med inputfelter, der forkorter tiden for en sagsbehandling betragteligt, hvis de bliver udfyldt.

Når der er flest obligatoriske inputfelter

I de fleste tilfælde bør der være flere obligatoriske end frivillige inputfelter. Marker da de frivillige felter i formularen.

Når der er flest frivillige inputfelter

Hvis en formular indeholder flere frivillige end obligatoriske inputfelter, fremhæves de obligatoriske felter i stedet for de frivillige.

Referencer

• Luke Wroblewski: Web Form Design: Filling in the Blanks (2008)
• Caroline Jarrett & Gerry Gaffney: Forms that Work: Designing Web Forms for Usability (2009)

Read-only

Deaktiveret

Bemærk, at deaktiverede elementer er usynlige for hjælpeteknologier som fx skærmlæsere, og derved vil brugere af disse værktøjer ikke få oplyst om elementernes tilstedeværelse. Det anbefales derfor, at man i stedet undlader feltet eller gør brug af read-only.

Prefix og suffix

Prefix og suffix kan bruges til at tydeliggøre, hvordan brugeren skal angive bestemte data såsom beløb, antal m.m.

Et suffix må aldrig være den eneste indikator for, hvordan et felt skal udfyldes, eftersom det ikke læses højt af skærmlæsere. Feltets label eller en hjælpetekst kan bruges til også at indikere dette.

Karakterbegrænsning

Karakterbegrænsning sætter et maksimalt antal af tegn, som brugeren kan indtaste i et felt. Karakterbegrænsning indikerer løbende overfor brugeren, hvor mange tegn der er tilbage, og hvor mange tegn de evt. har overskredet med.

Vis altid antallet af tegn, der er til rådighed i inputfeltet, inden brugeren begynder at skrive.

Stop ikke indtastningen, når brugeren overskrider antallet af tegn. Vis i stedet løbende med rød tekst under feltet, hvor mange tegn der er overskredet med.

Feltbredde

Feltbredde do's and don'ts

Sådan (do)

Sådan: Afstem længden af feltet til det, der skal indtastes (Jarrett, 2000). Når et design er intuitivt, signalerer de forskellige elementer, hvordan de skal bruges (Norman, 2013). Et felt til e-mailadresser bør derfor være længere end et felt til telefonnumre. Et felt til postnumre bør være kortere end andre felter (Silver, 2018, s. 81).

Ikke sådan (don't)

Ikke sådan: Undgå felter, der er så korte, at brugernes indtastninger ikke kan ses. Det virker, som at afbryde én, der taler. Undgå også felter, der er meget længere end det input, der forventes. For meget plads kan få brugeren til at tro, at han har misforstået spørgsmålet (Jarrett, 2000; Silver, 2018, s. 82).

Referencer

• Adam Silver: Form Design Patterns (2018)
• Caroline Jarrett: Designing usable forms: the three-layer model of the form (2000)
• Don Norman: Don Normans Principles of Design (2013)