En dialog er et panel i grensesnittet som har en spesifikk funksjon som en bruker kan interagere med. Dialoger kan være såkalt modale eller ikke-modale.

En modal dialog setter brukeren i en spesifikk kontekst, og tvinger brukeren til å fokusere på denne oppgaven. Brukeren må enten fullføre eller avbryte oppgaven før de kan gjøre en annen oppgave. Modale dialoger legger seg nesten alltid oppå resten av løsningen.

Ikke-modale dialoger kan åpnes og gi tilgang på oppgaver/funksjoner uten å hindre brukeren fra å interagere med andre ting.

Retningslinjer og veiledning

Bruk av dialoger er per definisjon veldig kontekstavhengig. Modale dialoger er veldig effektive for å varsle brukeren om feil, eller forhindre at feil oppstår. Samtidig tar de kontrollen, som kan være frustrerende spesielt for erfarne brukere. Det er lurt å ha en klar strategi rundt bruk av modale dialoger, og teste hvordan de påvirker brukeropplevelsen.

Modale dialoger passer bra til

• Varsling og utbedring av kritiske feil
• Redusering av risiko for kritiske feil i komplekse oppgaver, for eksempel bekreftelse av ikke-reversible valg
• Utfylling av viktig informasjon som må fylles ut for å komme videre
• Bryte opp komplekse oppgaver i flere, separate oppgaver

Modale dialoger passer mindre bra til

• Oppgaver med under-oppgaver, du bør aldri ha en modal dialog inne i en modal dialog
• Oppgaver som er så omfattende at de burde gis en egen side eller arbeidsflyt, for eksempel skjemaer med flere steg

Ikke-modale dialoger passer bra til

• Tilleggsfunksjonalitet til en hovedoppgave, som for eksempel filtrering av en listevisning, eller styling av tekst i en rik teksteditor
• Alternative visninger av innhold, som for eksempel oppsummering av et skjema eller en oppgave
• Lokale menyer på store skjermstørrelser
• Tilleggsinformasjon som kan hjelpe noen brukere, for eksempel en steg-for-steg veileder for et skjema, eller en chatbot

Ikke-modale dialoger passer mindre bra til

• Oppgaver som krever at brukeren gjør et valg før oppgaven kan fullføres

Dialog-komponenter

Vi har en dialog-komponent som lar deg bygge modale og ikke-modale dialoger med stor fleksibilitet.

Forskjellige typer dialoger med eksempler

Modal dialog som visuelt blokkerer innhold

Denne typen har alltid lukkeknapp og minst én action-knapp. Action-knappen vil lukke dialogen og ta deg tilbake til grensesnittet eller til en ny side.

• Varsling om kritisk feil
• Bekrefte innsending av skjema som ikke kan endres etter innsending

Modal dialog som ikke visuelt blokkerer innhold

Denne typen har ofte lukkeknapp eller toggle, men lukkes også om du klikker utenfor dialogen. Å lukke dialogen ved å klikke utenfor har samme effekt som lukkeknappen, oppgaven avbrytes uten at noen valg lagres.

• Lokal navigasjon som legger seg oppå sideinnhold
• Dropdown-lister for select, comboboks etc.

Ikke-modal dialog som legger seg oppå innhold

Har lukkeknapp og ofte én eller flere action-knapper. Du kan fortsatt bruke resten av grensesnittet utenfor dialogen. Action-knapper vil vanligvis implementere valg fra dialogen, men dialogen lukkes ikke.

• Chatbot-vindu
• Feedback-skjema

Ikke-modal dialog som legger seg inne i sideinnholdet, i stedet for oppå

Denne typen har lukkeknapp eller toggle for å vise/skjule dialogen. Den har ofte flere typer knapper.

• Toolbars
• Filtreringspaneler for lister eller tabeller
• Oppsummering av skjemaer