Error page message - Designmönster

Ibland når användaren en sida som inte längre finns, saknar behörighet till, eller som inte går att ladda på grund av ett tekniskt fel. Utan ett tydligt felsidesmeddelande möter användaren en blank yta, en kraschad vy eller en kryptisk teknisk felkod, vilket skapar osäkerhet kring om felet beror på användaren själv, om något gick sönder permanent, eller om det går att göra om. Den övergripande principen är att ett fel aldrig ska lämna användaren i en återvändsgränd: mönstret ska alltid förklara vad som hänt i vardagsspråk och erbjuda minst en konkret väg vidare.

Användning

Använd när

• Användaren navigerar till en sida som inte existerar (404)

• Ett tekniskt fel hindrar sidan från att laddas eller renderas (500)

• Användaren saknar behörighet till det efterfrågade innehållet (403)

• Systemet är tillfälligt otillgängligt på grund av planerat underhåll eller driftstörning

Använd inte när

• Felet gäller ett enskilt formulärfält – använd mönstret för formulärvalidering istället

• Felet är tillfälligt och kan lösas utan att lämna sidan, t.ex. en misslyckad sparning – använd en alert/notifiering istället

• Syftet är att bekräfta en utloggning – använd mönstret Utloggad-meddelande

• Ytan saknar innehåll av naturliga skäl, t.ex. en tom inkorg – använd mönstret Tomt tillstånd

Klassificering

400 – Något gick fel

Syfte och användningsområde: Förfrågan till servern kunde inte tolkas, t.ex. på grund av en trasig länk, felaktigt formaterade parametrar eller ett anrop som skickats i fel format.

• Förklara att förfrågan inte gick att tolka, utan att lägga skulden på användaren

• Undvik teknisk information om vad som var syntaktiskt fel

• Erbjud en väg tillbaka, t.ex. föregående sida eller startsidan Exempel: "Något blev fel med din förfrågan. Dubbelkolla gärna att allt är rätt ifyllt och försök igen."

403 – Åtkomst nekad

Syfte och användningsområde: Innehållet finns men användaren saknar rättighet att se det.

• Förklara att det handlar om behörighet, inte ett tekniskt fel

• Ge vägledning om hur användaren kan få åtkomst, t.ex. kontakt med administratör

• Exponera aldrig information om innehållet som avslöjar mer än nödvändigt Exempel: "Du har tyvärr inte behörighet att se den här sidan. Om du tror att det är fel, kontakta gärna supporten."

404 – Sidan hittades inte

Syfte och användningsområde: Sidan eller resursen existerar inte, eller har flyttats.

• Förklara att sidan inte kunde hittas, inte att "något gick fel" generellt

• Ge minst en väg vidare: länk till startsidan eller sökfunktion

• Undvik att antyda att användaren gjort fel – länkar bryts, adresser ändras Exempel: "Sidan du söker har fått en ny adress eller är borttagen. 
[produkten] arbetar löpande med att förbättra struktur och innehåll på webbplatsen."

500 – Tekniskt fel

Syfte och användningsområde: Ett oväntat serverfel har inträffat.

• Var tydlig med att felet är på systemets sida, inte användarens

• Erbjud att försöka igen samt en väg tillbaka

• Undvik teknisk felkod som huvudbudskap; visa den ev. som sekundär information Exempel: "Något gick fel på vår sida. Vi jobbar på att lösa det så snabbt vi kan. Försök gärna igen om en stund."

Tjänsten är inte tillgänglig just nu

Syfte och användningsområde: Systemet är otillgängligt på grund av underhåll eller känd störning.

• Ange om möjligt när tjänsten förväntas vara tillbaka

• Länka till en driftstatussida om en sådan finns Exempel: "Tjänsten är tillfälligt otillgänglig på grund av underhåll. Välkommen tillbaka vid senare tillfälle."

Riktlinjer

Beteende

Meddelandet ersätter innehållsytan (i en SPA) eller hela sidan (vid serverrenderat fel). Vid navigering inom applikationen utan full sidladdning ska fokus flyttas programmatiskt till meddelandets rubrik så att skärmläsaranvändare uppmärksammas på förändringen. Undvik animationer som drar onödig uppmärksamhet; en enkel infasning på max 150 ms räcker.

Visuell utformning

Error page message består av ikon, rubrik, brödtext och en eller flera åtgärdsknappar/länkar, byggt med etablerade spacing- och typografitokens. Ikonen är alltid ett komplement till text, aldrig ensam bärare av information. Figma-komponenten innehåller separata innehållsvarianter för respektive felkod.

Open

Exempel på meddelande för 404-sida

Open

Exempel på meddelande i en vy.

Innehåll och språk

Skriv i vardagsspråk utan teknisk jargong. Varje meddelande ska svara på "vad hände" och "vad kan jag göra nu". Exempel på struktur: "Sidan du sökte efter finns inte längre. Gå till startsidan eller sök efter det du letar efter."

Gör / Gör inte

Tillgänglighet

WCAG-relevanta kriterier

Riktlinjer

• Rubriken ska vara markerad som <h1> om felet upptar hela sidan, annars på rätt nivå i sidans rubrikhierarki

• Vid klientsidig rendering: flytta fokus programmatiskt till rubriken, eller använd role="alert" för att säkerställa uppläsning

• Ikoner är dekorativa (aria-hidden="true") och kompletteras alltid av synlig text

• Länktext ska beskriva målet, t.ex. "Gå till startsidan" – aldrig "Klicka här"

• Kontrollera att kontrasten uppfyller AA även i felfärgade varianter (t.ex. röd ikon mot vit bakgrund)

Sammanfattning

Felsidesmeddelandet används när en sida inte kan visas – oavsett om orsaken är att den inte finns, att användaren saknar behörighet, eller att ett tekniskt fel inträffat. Mönstret ska alltid förklara orsaken i vardagsspråk och erbjuda en konkret väg vidare, med fokus- och statushantering anpassad för dynamisk rendering.