Felmeddelande
När du behöver det
Något gick fel — ett formulärfält, en uppladdning, ett systemanrop. Användaren behöver förstå vad som hänt och vad de kan göra åt det.
Principen
Ett fel skapar en kort ångesttopp. Den nära experten lämnar aldrig någon i det läget utan nästa steg. Felmeddelandet förklarar vad som hände och vad användaren kan göra nu — inte vad systemet tycker om situationen.
Strukturen
- Vad hände — kort, konkret, utan teknisk jargong
- Vad du kan göra — ett tydligt nästa steg
Aldrig bara "Något gick fel." Aldrig utan en väg framåt.
Exempel
✅ "E-postadressen ser inte komplett ut. Kontrollera att den innehåller @."
✅ "Den filen kan vi inte ta emot. Ladda upp som PDF, JPG eller PNG (max 10 MB)."
✅ "Vi kunde inte spara dina uppgifter. Kontrollera din uppkoppling och försök igen — dina svar är inte förlorade."
❌ "Ogiltigt filformat."
❌ "Ett fel uppstod. Försök igen."
❌ "Error 500."
Det viktigaste efter "vad hände": lugna oron. "Dina svar är inte förlorade" gör mer för patienten än den tekniska förklaringen.
Tokens
| Token | Roll |
|---|---|
--input-error-color |
Textfärg för felmeddelande |
--input-error-border |
Kantfärg på fältet |
--text-error |
Status-error (#C14444) |
--font-size-xs |
Storlek (14px) |
Tillgänglighet
Felmeddelandet placeras direkt under fältet det gäller — inte i en modal, inte i en banner högst upp. Använd aria-describedby för att koppla meddelandet till fältet så att skärmläsare hittar det. Formuläret ska aldrig låsas vid fel — användaren korrigerar och försöker igen.
Snabbtest
Vet användaren vad de ska göra härnäst? Om inte — skriv om.