Modaler
Modaler ska användas med försiktighet då de avbryter det användaren håller på med och döljer informationen på sidan bakom. Det finns två användningsområden då de är att föredra. Det ena är då man vill ge information som är längre än vad som ryms i ett Tooltip och som kan med fördel läsas mer fokuserat och utan behov av den underliggande kontexten på sidan. Se Informationsmodal nedan. Det andra användningsområdet är då man behöver avbryta användaren för att få input. Se Dialoger nedan.
Informationsmodal
Informationsmodal används för att ge ytterligare information när användaren efterfrågat den. Informationsmodalen visas ovanför sidan när användaren klickar på en i-ikon. Informationen i Informationsmodalen är längre text för att ge informationen som bättre kan tas in isolerad och mer fokuserat än om den läses på sidan.
Se Modals (i KTH Style, på engelska).
| Komponenttyp | Används för |
|---|---|
| Information modal | Ge ytterligare information när användaren efterfrågar det. |
Dialoger
Dialoger används då direkt input behövs från användaren. Användningen ska minimeras då de avbryter användarens flöde men måste användas vid viktiga val.
Det finns finns två olika typer av dialoger. Välj komponenttyp utifrån användning (se tabellen nedan).
Välj dialog
| Komponenttyp | Används för |
|---|---|
| Confirm modal | Bekräfta en destruktiv aktivitet som användaren har valt. Exempel: Ta bort fil. |
| Choose modal | Presentera val som användaren kan göra som inte är destruktiva (det går att ångra). Exempel: Bifoga bild. |
Riktlinjer
Namngivning
Det är extra viktigt för dialoger att tänka på namngivning av knapparna, läs mer om namngivning på Gemensamma riktlinjer för komponenter .
Information
Använd inte informationsmodaler för längre information som hör hemma på en sida. Läs mer om hur du informerar så att användaren förstår under: Ta användarens perspektiv på sidan Övergripande riktlinjer .
Länkar
Var försiktig med att lägga länkar i modaler då det kan innebära att man lämnar ett flöde på den underliggande sidan.
Formulär
Var försiktig med att kräva input av användaren i modaler med hjälp av formulärsfält då tillgänglighet i modaler är komplicerat. Var i så fall nogrann med att Testa användbarhet och tillgänglighet .