Modal

Retningslinjer for bruk

Bruk modal når

• du trenger en bekreftelse på en kritisk handling (for eksempel ved sletting eller endringer som ikke kan angres)
• du vil vise ekstra informasjon uten å forlate siden
• du vil vise et skjema brukeren må fylle ut umiddelbart

Unngå modal når

• innholdet er langt eller komplekst, bruk heller en ny side
• det er flere steg i prosessen
• informasjonen ikke er kritisk, bruk heller accordion eller lignende

Bruk modaler med omhu

Modaler er ofte forstyrrende, og regnes sjelden som god brukeropplevelse. De bryter brukerens flyt, tar over skjermen og gir inntrykk av at noe haster, selv når det ikke gjør det.

En modal kan få brukeren til å miste tråden i oppgaven de jobber med. De vet kanskje ikke hvorfor den dukker opp, hvordan den lukkes eller om de må gjøre noe. Dette gjelder særlig for brukere med konsentrasjonsvansker, nedsatt syn eller skjermleser.

I følge Nielsen Norman Group kan modaler skape usikkerhet eller frustrasjon hvis de ikke er forventet eller blokkerer viktig innhold.

Vi anbefaler at du tester modalen i bruk – helst med faktiske brukere – før du setter den i produksjon. Det er den beste måten å sikre at modalen hjelper, ikke hindrer.

Ikke åpne modal automatisk

En modal skal aldri vises uten at brukeren har gjort noe som tilsier det. Det må alltid være en tydelig trigger som gjør at brukeren forventer et avbrudd.

Gi brukeren en tydelig handling å utføre

En modal uten knapp eller neste steg skaper frustrasjon. Sørg for at det er tydelig hva brukeren skal gjøre, for eksempel lagre, sende inn, slette eller avbryte.

Gjør slik

Bruk modal når du vil gi mer informasjon, uten at det forstyrrer resten av oppgaven brukeren jobber med

Unngå

Unngå utydelige modaler der brukeren blir usikker på hva som skjer etter trykk eller interaksjon

Ikke bruk modaler til lange skjemaer eller mye interaksjon

Hvis modalen inneholder mange felt eller seksjoner, velg heller en egen side. Det gir bedre oversikt og navigasjon, særlig på små skjermer.

Ikke bruk modal til ukritisk informasjon

Modal passer ikke for små oppdateringer eller informasjon som kan vises på en roligere måte. Bruk inline-elementer eller infoseksjoner (for eksempel messagebox) i stedet.

Gjør slik

Bruk modal til kritiske handlinger og beskjeder

Unngå

Unngå modal ikke haster eller krever brukerens umiddelbare oppmerksomhet

Når du viser feilmeldinger i modal

Bruk komponenten alert for å vise feil, advarsler eller suksessmeldinger inne i modalen. Ikke endre bakgrunn eller tekstfarge på modalen for å signalisere alvor.

Gjør slik

Gå for å endre elementer i innholdet for å fremheve alvorlighetsgraden av en handling

Unngå

Unngå å endre fargen til modalen

Universell utforming

Modal må være tilgjengelig for alle

Modal er en dialogboks som vises over innholdet på siden. Den bruker HTML-elementet <dialog>, som automatisk setter fokus på det første fokuserbare elementet når modalen åpnes. I Punkt sin løsning er dette ofte lukknappen, og den får derfor autofocus. Vi anbefaler alltid å vise lukknappen, det gir forutsigbarhet og kontroll for brukeren.

Fokus skal styres riktig

Når modalen åpnes, skal fokus flyttes inn i modalen automatisk, helst til første interaktive element. Fokus må holdes inne i modalen så lenge den er åpen. Brukeren skal ikke kunne tabbe seg «bak» eller ut av den. Når modalen lukkes, skal fokus returneres til det elementet som åpnet den.

Gi brukeren en tydelig vei ut

Alle modaler må kunne lukkes med både “Esc” og en synlig lukknapp. Det gjør det enkelt å forstå hvordan man kommer seg videre, og er spesielt viktig for brukere med motoriske utfordringer.

Merk: “Esc” fungerer bare dersom du åpner modalen med den innebygde funksjonen showModal(). Dette vises i kodeeksemplene lenger ned.

Tastaturnavigasjon må fungere

Alle knapper og felt inne i modalen må kunne nås og brukes med tastatur. Hvis modalen inneholder et skjema, må submit-knappen være wrappet i <form method="dialog">. Da lukkes modalen automatisk når skjemaet sendes inn, uten at du trenger ekstra logikk.

Tittelen må være tydelig

Modalen skal alltid ha en tittel i en <h1>-tag. Dette hjelper skjermlesere med å tolke innholdet, og gir god kontekst for alle brukere.

Tilpass visning på små skjermer

På mobil og små skjermer skal modalen utvide seg og ta hele bredden. Modalen justerer seg automatisk når skjermen er smalere enn 576 px (36 rem). Vi anbefaler å teste dette i praksis, særlig hvis du har mye innhold i modalen.