TL;DR
- En placeholder er ikke en erstatning for en label.
- Labels hjælper både synlige brugere og skærmlæsere.
- Fejlmeddelelser skal placeres tæt på det felt, de handler om.
- En god formular gør det let at forstå både krav og fejl.
Hvis du kun husker én ting: En label forklarer feltet, mens en placeholder kun er en kort hjælp inde i feltet.
Brug altid en rigtig label
Hvis labelen mangler, skal brugeren gætte mere. Det bliver især et problem, når feltet først er udfyldt, og placeholder-teksten er væk.
Et rigtigt label gør det lettere at:
- forstå hvad feltet er til
- gå tilbage og kontrollere det indtastede
- bruge formularen med tastatur og hjælpemidler
Brug ikke placeholder som instruktion
Placeholder-tekst kan være fin som et lille eksempel, men den bør ikke bære hele forklaringen.
Det klassiske problem er, at teksten forsvinder, så snart feltet får fokus. Så skal brugeren huske både spørgsmålet og formatet samtidig.
Det er derfor bedre at tænke sådan:
- labelen fortæller hvad feltet er
- hjælpetekst eller eksempel fortæller hvordan inputtet skal se ud
Vis fejlmeddelelser på det rigtige tidspunkt
Hvis noget går galt, skal brugeren hurtigt kunne se:
- hvilket felt der er problemet
- hvad problemet er
- hvordan det kan løses
En fejlbesked langt væk fra feltet eller kun med farve er sjældent nok. Det er bedre, når beskeden ligger tæt ved feltet og bruger både tekst og tydelig styling.
Best practice er ofte små ting
God UX i formularer handler sjældent om én stor feature. Det handler oftere om mange små valg, der tilsammen gør formularen nemmere at bruge.
Det er netop derfor labels, hjælpetekst og gode fejlbeskeder er værd at tage seriøst tidligt.
Opsummering af de vigtigste regler:
- Grupper labels og inputs visuelt
- Saml beslægtede felter
- Naturlig eller logisk rækkefølge
- Enkeltkolonne-layouts
- Marker obligatoriske felter tydeligt
- Hjælp brugeren med eksempler og tydelige krav til input
- Tilpas feltlængde til forventet input
- Brug ikke placeholder-tekst som instruktion eller label
- Vis fejlmeddelelser tæt på relevante felter og på det rigtige tidspunkt
- Fejl skal formidles multimodalt
Kilde: nngroup