Form UX & UI

Grundreglerne

Enkeltkolonne-layouts

<form>
  <fieldset>
    <legend>Operation System</legend>
    <label>
      <input>
      Windows
    </label>
    <label>
      <input>
      Mac
    </label>
    <label>
      <input>
      Linux
    </label>
  </fieldset>
</form>

Saml beslægtede felter

Tilpas feltlængde til forventet input

Marker obligatoriske felter tydeligt

https://www.nngroup.com/articles/web-form-design/

eller valgfrie..?

Hjælp brugeren med eksempler og tydelige krav til input

Vælg den rigtige form-control

https://uxdesign.cc/if-satan-was-a-web-designer-dc5cdf06dff9

Vælg den rigtige form-control

Hvad er galt her?

Placeholders as labels

It's difficult to remember what information belongs in a field, and to check for and fix errors

— nngroup

Forsvindende placeholder-tekst belaster brugernes korttidshukommelse
Uden labels kan brugerne ikke kontrollere deres arbejde, før de indsender en formular
Placeholder-tekst, der forsvinder, når markøren placeres i et formularfelt, er irriterende for brugere, der navigerer med tastaturet
Brugere kan forveksle en placeholder med data, der automatisk blev udfyldt

https://www.nngroup.com/articles/form-design-placeholders/

Brug ikke placeholder-tekst som instruktion eller label

👎🏻

Brug ikke placeholder-tekst som instruktion eller label

Hjælp brugeren med eksempler og tydelige krav til input

👍🏻

Brug altid en label!

Vis fejlmeddelelser tæt på relevante felter og på det rigtige tidspunkt

Fejl skal formidles multimodalt

Fejl skal formidles multimodalt

Best Practice

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

https://www.nngroup.com/articles/4-principles-reduce-cognitive-load/

- 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

Eksempel...

🤷‍♂️

Med grundreglerne in mente...

Lad os style vores formular...

Layout

Look & feel

Adfærd

Look & feel

Farver, kanter, typografi, osv.

Form controls styling er... anderledes 😕

Et levn fra en svunden tid

...og varierer i udseende 🤦‍♂️

De kommer med deres egen bredde... 🤷‍♂️

Ligesom <img>'s

147px (Chrome)

148px (Safari)

189px (Firefox)

img {
  max-width: 100%;
}

CSS virker... nogle gange 🧐

Vent, hvad..?

CSS virker... nogle gange 🧐

Vent, hvad..?

Det kunne generelt være bedre 😩

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

CSS Starter

Fornuftige defaults, version 1

Det, vi gør nu

Måske? 🤷‍♂️

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  interpolate-size: allow-keywords;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2 {
  line-height: 1.25;
}

p,
li {
  text-wrap: pretty;
}

img,
svg {
  display: block;
  width: 100%;
  height: auto;
}

label {
  display: block;
}
  
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background-color: transparent;
  font-size: max(1em, 16px);
}

textarea {
  resize: none;
  min-height: 4lh;
}

legend {
  padding: 0;
}

select,
::picker(select) {
  appearance: base-select;
}

CSS Starter – fra os til jer

Fornuftige defaults, version 2

Det, vi gør om lidt

Det giver os følgende...

Et bedre udgangspunkt

Style-anbefaling

Til input, textarea, select, button

- border
- border-radius
- padding
- evt. color, box-shadow

button {
  cursor: pointer; 
}

Style-anbefaling

Til checkbokse, radioknapper

form {
  accent-color: deeppink;
}

øvelse 5

Tilføj styles til inputs

Få formularen til nogenlunde at ligne denne. Vent med mellemrum mellem felterne.

NB: Vores CSS Starter er tilføjet

(lad den være åben)

- Inputs,

- Button,

- Checkbox,

- Fejlbeskeder

Layout

Placering, gruppering, Grid, Flexbox, spacing, osv.

Form layout

Elementer er inline

label {
  display: block;
}

Form layout

Elementer er inline

Grupper labels og inputs visuelt

HUSK:

<form>
  <div class="form-group">
    <label for="name">Fulde navn</label>
    <input type="text" id="name" name="full-name" />
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" />
  </div>
  <button>Send formular</button>
</form>

Form layout

Grupper felter

<form>
  <div class="form-group">
    <label for="name">Fulde navn</label>
    <input type="text" id="name" name="full-name" />
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" />
  </div>
  <button>Send formular</button>
</form>

Form layout

Grupper felter

<form>
  <div class="form-group">
    <label for="name">Fulde navn</label>
    <input type="text" id="name" name="full-name" />
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" />
  </div>
  <button>Send formular</button>
</form>

Form layout

gap

Grupper felter

form {
  display: grid;
  gap: 2rem;
}

.form-group {
  display: grid;
  gap: 3px;
}

Form layout

<form>
  <div class="form-group">
    <label for="name">Fulde navn</label>
    <input type="text" id="name" name="full-name" />
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" />
  </div>
  <button>Send formular</button>
</form>

Brug Grid

form {
  display: grid;
  gap: 2rem;
}

.form-group {
  display: grid;
  gap: 3px;
}

Form layout

<form>
  <div class="form-group">
    <label for="name">Fulde navn</label>
    <input type="text" id="name" name="full-name" />
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" />
  </div>
  <button>Send formular</button>
</form>

Brug Grid

Form layout

Checkbokse/Radioknapper

<form>
  ...
  <label for="spiderman">  
    <input
       type="radio"
       id="spiderman"
       name="superhero"
       value="spiderman">
    Spider-man
  </label>
  ...
</form>

Form layout

Brug Flexbox

<form>
  ...
  <label for="spiderman">  
    <input
       type="radio"
       id="spiderman"
       name="superhero"
       value="spiderman">
    Spider-man
  </label>
  ...
</form>

label:has(input) {
  display: flex;
  align-items: center;
  gap: .75ch;
}

Form layout

label:has(input) {
  display: flex;
  align-items: center;
  gap: .75ch;
}

Brug Flexbox

Læs mere om :has()

øvelse 6

Tilføj layout-struktur

Få formularen til nogenlunde at ligne denne ift. layoutet.

(lad den være åben)

- Grid,

- Flexbox,

- Reducer evt. afstand

For meget afstand?

Adfærd

Brugerhandlinger og input-state (tilstandsform)

spil-øvelse

Hocus :focus

Gennemfør alle 8 levels og bliv opmærksom på, hvor vigtige "focus states" er i forhold til keyboard accessibility (link på Fronter).

https://focus.hteumeuleu.com/

Pseudo-klasser

En CSS pseudo-klasse er et nøgleord tilføjet til en selector, der specificerer en særlig tilstand af det valgte element(er). For eksempel kan :hover bruges til at ændre en knaps farve, når brugerens markør er over den.

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#alphabetical_index

Pseudo-klasser

:hover

:focus-visible

:active

:user-valid

:user-invalid

:required

Pseudo-klasser

:hover

:focus-visible

:active

:user-valid

:user-invalid

:required

Brugerhandlinger

Input-state
(tilstandsform)

Brugerhandlinger

:focus-visible {
  outline: 2px solid orange;
  outline-offset: 1px;
  /* evt. box-shadow */
}

Fokus v/ tastatur-navigation
- input, textarea, select osv.

:focus-visible

Brugerhandlinger

:focus-visible {
  /* Focus states */
}
button:hover {
  /* Hover states */
}
button:active {
  /* Pressed states */
}

Generel interaktion
- button

øvelse 7

Tilføj pseudo-klasser

Tilføj regler for brugerhandlinger til hhv. input-felter og knappen.

(lad den være åben)

- :focus-visible

- outline

- :hover, :active (button)

- background, scale

:focus-visible

:hover

:active

Input-state (tilstandsform)

Form validation

Input-state

Vis fejlmeddelelser tæt på relevante felter og på det rigtige tidspunkt

Hvad er der galt?

Skjul fejlmeddelelser før interaktion

.error-message {
  display: none;
}

Input-state

"Hvis feltet ikke opfylder kriteriet, vis da fejlbesked"

Kriterie =

email-format

Input-state

Browseren kan selv holde styr på, om e-mail-felter er udfyldt korrekt

Input-state

via attributter som required og minlength

Vi skal fortælle formularen, hvilke inputs der er obligatoriske, samt hvilke kriterier de skal opfylde, så den kan give os den korrekte status.

Input-state

"Hvis feltet ikke opfylder kriteriet, vis da fejlbesked"

Kriterie =

feltet er obligatorisk

Obligatorisk felt

"Feltet skal udfyldes"

<div>
  <label>First name</label>
  <input required />
  <p>Please enter a value</p>
</div>

"Hvis feltet ikke opfylder kriteriet, vis da fejlbesked"

Kriterie =

mindst 8 tegn (e.l.)

Input-state

Input-kriterie

"Feltet skal udfyldes, og der skal mindst være 8 tegn"

<div>
  <label>Password</label>
  <input minlength="8" required />
  <p>Please enter a value</p>
</div>

:user-valid

:user-invalid

:required

Input-state

.form-group:has(:required) {
  label::after {
    content: " *";
    color: red;
  }
}

Input-state mønstre

"Hvis .form-group har et obligatorisk felt,
så tilføj en stjerne til label"

Input-state mønstre

.form-group:has(:user-invalid) {
  input {
  	outline: 3px solid #f005;
    border-color: darkred;
  }
}

"Hvis .form-group har et ugyldigt felt,
så tilføj rød kant omkring input-feltet"

.form-group:has(:user-invalid) {
  input {
    outline: 3px solid #f005;
    border-color: darkred;
  }
  
  .error-message {
    display: block;
  }
}