Fokus og brugerhandlinger

Hvis du kun husker én ting: Fokus skal kunne ses tydeligt, ellers er formularen svær at bruge med tastatur.

Fokus er en del af UX

Når en bruger tab’er (TAB-tasten på tastaturet) gennem en formular, skal det være let at se, hvor man er. Det er ikke nok, at siden “teknisk set” kan bruges med tastatur. Fokus skal også kunne opdages hurtigt med øjet.

En enkel oversigt over de vigtigste tilstande kan se sådan ud:

:focus-visible {
  /* Focus states */
}

button:hover {
  /* Hover states */
}

button:active {
  /* Pressed states */
}

Dette er enkelt, men vigtig. Setuppet viser, at brugeradfærd ikke er én ting. Der er forskel på:

• at et element har fokus
• at musen er over det
• at brugeren er i gang med at trykke på det

:focus-visible er den vigtigste her

Til forms er :focus-visible ofte mere relevant end :hover, fordi den hjælper brugere, der navigerer med tastatur.

En god tommelfingerregel er at koble den til en tydelig outline:

• brug outline eller en anden tydelig markering
• sørg for, at markeringen har nok kontrast
• lad være med at fjerne fokus uden at erstatte det med noget lige så tydeligt

Hover og active er også adfærd

På knapper og klikbare elementer giver det mening at skelne mellem :hover og :active.

De bliver ofte knyttet til simple egenskaber som:

• background
• scale

Du behøver ikke lave avancerede animationer for at give god feedback. En lille ændring i baggrund eller størrelse kan være nok til at gøre interaktionen tydeligere.

Brug tilstande bevidst

Det vigtigste er ikke at style alle pseudo-klasser bare fordi du kan. Det vigtigste er at stille spørgsmålet: Hvad skal brugeren kunne opdage her?

Hvis svaret er “hvilket felt er aktivt?”, så er fokus vigtigst. Hvis svaret er “kan den her knap klikkes?”, så kan hover og active være nyttige.