Kilde: Designsystemet.no Lesetid: 3 minutter

Det er flere måter å markere obligatoriske felt på som oppfyller kravene til merking. I dag gjør vi dette ulikt på tvers. Noen bruker asterisk (stjerne), noen bruker ord, andre informerer i forkant om hva som må fylles ut. Klarer vi å gjøre dette mer likt på tvers blir det lettere for innbygger å forstå og kjenne igjen mønsteret på tvers av løsningene våre. Det vil alltid være unntak og ulike kontekster som krever ulik merking.

En generell retningslinje er at vi bør unngå å be om informasjon vi ikke trenger, altså unngå valgfrie felt.

Ett spørsmål per side

Hvis vi kan holde oss til ett spørsmål per side, så er det det aller enkleste for brukeren. Gjør vi det, trenger vi ikke å markere hvilke felt som må fylles ut. Da kommer det frem av beskrivelsen at dette må fylles ut.

Dersom det er frivillig å fylle ut en av sidene, kan dette også komme frem i beskrivelsen.

Når vi må ha flere spørsmål per side

Hvis vi må ha flere spørsmål på en side, kan vi informere tydelig i toppen om at alle felt må fylles ut. Vi skal bare spørre brukeren om informasjon vi absolutt trenger, og unngå valgfrie felt. (Kan du ikke unngå valgfrie felt, se eksempel 3).

Bruk for eksempel en gul tagg, som vist i eksemplet under.
Bruk teksten «Alle felt må fylles ut». (Ikke bruk “Obligatorisk” eller “Påkrevd”)
Pass på at det ikke er for mange spørsmål på samme side. Det som ligger på samme side bør ha samme tema eller spørsmål som er relatert til hverandre.

Når vi må ha en kombinasjon av obligatoriske og valgfrie felt

En kombinasjon av obligatoriske og valgfrie felt er ikke ideelt! Men det vil være situasjoner der vi ikke kommer unna det. Hvis vi må ha med valgfrie felt i tillegg til de obligatoriske, bør vi markere alle feltene hver for seg. Da trenger vi ikke å informere i toppen.

Informer tydelig med taggen «Må fylles ut» eller «Valgfritt» bak hvert spørsmål/hver ledetekst.
Ikke bruk ordene «Obligatorisk» eller «Påkrevd».
Bruk for eksempel gul tagg for «Må fylles ut» og blå for valgfritt.
Ikke bruk stjerne for å markere felt som må fylles ut.

Samordnet registermelding

Slette foretak

Avbryt

<div class="mockup-browser border  bg-base-200 border-base-300 w-full">
  <div class="mockup-browser-toolbar">
    <div class="input">https://design.ntnu.no</div>
  </div>
  <div class="p-4">
    <div class="join join-vertical rounded-box bg-base-100 w-full shadow">
      <div class="border-b-2 border-base-300 p-4">Samordnet registermelding</div>
      <div class="p-4">
        <h1 class="text-3xl">Slette foretak</h1>
        <form class="flex flex-col gap-6">
          <fieldset class="fieldset">
            <legend class="fieldset-legend text-lg">Når skal foretaket slettes?</legend>
            <p class="label"><span class="bg-warning text-warning-content text-md px-1">Må fylles ut</span></p>
            <input type="date" class="input" />
          </fieldset>
          <fieldset class="fieldset">
            <legend class="fieldset-legend text-lg">Hva skal skje med underenhetene når du sletter foretaket?</legend>
            <p class="label"><span class="bg-warning text-warning-content px-1">Må fylles ut</span></p>
            <label class="label"><input type="radio" name="radio-1" class="radio radio-primary" checked="checked" /> Jeg skal slette underenhetene.</label>
            <label class="label"><input type="radio" name="radio-1" class="radio radio-primary" /> Jeg skal slette underenhetene.</label>
            <label class="label"><input type="radio" name="radio-1" class="radio radio-primary" /> Jeg skal slette eller overdra underenhetene på forskjellige tidspunkt eller til forskjellige eiere.</label>
          </fieldset>
          <fieldset class="fieldset">
            <legend class="fieldset-legend text-lg">Årsak til sletting</legend>
            <p class="label">Brukes til statistiske formål. <span class="bg-info text-info-content text-md px-1">Valgfritt</span></p>
            <select class="select">
              <option selected>Velg årsak</option>
              <option>Prisstigning</option>
              <option>Krig og fred og sånn</option>
              <option>Brunost</option>
            </select>
          </fieldset>
          <div class="flex gap-2">
            <button class="min-w-[8rem] btn btn-primary btn-outline">Forrige</button>
            <button class="min-w-[8rem] btn btn-primary">Neste</button>
          </div>
        </form>
      </div>
      <div class="border-t-2 border-base-300 p-4 text-center lg:text-left">Avbryt</div>
    </div>
  </div>
</div>

Obligatoriske Felter

Ett spørsmål per side

Når vi må ha flere spørsmål per side

Når vi må ha en kombinasjon av obligatoriske og valgfrie felt

Slette foretak