Tilbage til Forms UX & UI

1. semester / Tema 4: Grundlæggende UI

Form UX: Grundregler

Start med de enkle regler: én kolonne, tydelige grupper og felter der passer til inputtet.

Se undervisningsslides

Relevante links

TL;DR

  1. Gør formularer lette at læse oppefra og ned.
  2. Gruppér felter der naturligt hører sammen.
  3. Lad feltets størrelse og type passe til det, brugeren skal skrive.
  4. Vælg det rigtige form-element, så browseren kan hjælpe.

Hvis du kun husker én ting: Gør formularen let at afkode: én ting ad gangen, tydelige grupper og felter der passer til opgaven.

Hold formularen enkel at læse

Mange formularer er nemmest at forstå, når de følger en tydelig lodret rytme.

Det betyder ikke, at alt altid skal være i én kolonne. Men som udgangspunkt er det ofte lettere for en begynder at bygge og lettere for en bruger at læse, hvis formularen går oppefra og ned.

Gruppér det der hører sammen

Når flere felter handler om det samme spørgsmål, skal de ikke bare stå løst.

Det gælder især:

Her er fieldset og legend stadig en god løsning, fordi de gør sammenhængen tydelig både visuelt og semantisk.

Tilpas feltet til opgaven

Et lille felt signalerer ofte et kort svar. Et større felt signalerer mere tekst.

Det påvirker brugerens forventning. Hvis nogen skal skrive en kommentar, giver textarea bedre mening end et enkelt tekstfelt. Hvis nogen skal vælge fra en fast liste, giver select eller radio buttons ofte bedre mening end fritekst.

Vælg den rigtige control

En vigtig del af god form UX er at bruge de elementer, der passer til opgaven:

Det gør formularen lettere at forstå og lettere at bruge.