Modalt fönster

Modalt fönster (Dialog) är en ruta som visas ovanpå annat innehåll på sidan. Det modala fönstret presenteras när användaren har agerat på något och måste göra ett val för att komma vidare.

Visuella exempel

Riktlinjer

  • Ett modalt fönster presenteras bara när användaren har agerat på något (tryckt på knapp, länk etc).
  • Ett modalt fönster ska ha en extremt tydlig rubrik och kortfattad brödtext som tydligt och direkt relaterar till de val som presenteras för användaren.
  • Valalternativen ska presenteras som knappar. Det primära valet ska ligga till vänster om det sekundära. Om skärmytan inte ger plats för detta ska det sekundära valet flöda ner under det primära valet.
  • Användaren ska kunna välja att stänga det modala fönstret med ett stäng-kryss med tillhörande text i övre högra hörnet av modalen.
  • Innehåll som ett modalt fönster placerar sig ovanpå, ska ha en overlay när modala fönstret presenteras. Använd 70% av #000000 för overlay.
  • Det modala fönstret finns kvar även när man klickar utanför det.
  • Bakgrundssidan ska inte gå att scrolla när modalen presenteras.
  • När modalen stängs, ska användaren komma tillbaka med fokus på det element där användaren var när modalen öppnades.
  • Ett, och endast ett, modalt fönster kan visas i taget. Visa aldrig två, tre eller fler modala fönster samtidigt.

Bra att tänka på

  • Använd endast modalt fönster ytterst sparsamt i en applikation. Det är främst till för när användaren måste bekräfta ett viktigt val innan man fortsätter i flödet, eller när konsekvensen av ett fel riskerar att bli för stort (till exempel radera viss information).
  • Undvik att fylla det modala fönstret med för mycket information eller interaktion.
  • Undvik fler-stegs-funktioner för att komma vidare inom det modala fönstret.
  • Länka inte vidare från det modala fönstret. Behöver användaren mer information för att kunna göra ett val i modalen, bör denna information finnas tillgänglig innan modala fönstret öppnas.

Tillgänglig komponent