Empty States - Designmönster

När en vy eller komponent saknar innehåll uppstår ett kommunikativt vakuum – användaren vet inte om något gått fel, om de befinner sig på fel ställe, eller om systemet helt enkelt är tomt. Utan ett empty state riskerar användaren att tolka frånvaron av innehåll som ett tekniskt fel eller ett gränssnittsproblem. Empty state-mönstret fyller detta vakuum med rätt förväntningssättning: det förklarar varför vyn är tom, vad som normalt sett skulle visas, och – när det är möjligt – ger användaren en väg framåt. Den övergripande principen är att tomhet aldrig ska kännas som ett misslyckande, utan som ett naturligt tillstånd med ett tydligt nästa steg.

Användning

Använd när

• En listvy, tabell eller inkorg är tom och förväntas fyllas med innehåll

• Användaren precis har skapat ett konto eller ett nytt arbetsflöde och ännu inte genererat data

• En sökning eller filtrering returnerar inga träffar

• En komponent visar ett fält där information saknas eller ännu inte fyllts i

• Innehåll har raderats och vyn är nu tom

Använd inte när

• Innehåll laddas in – visa en laddningsindikator istället

• Vyn är avsiktligt tom och förväntas förbli tom (d.v.s. det finns inget innehåll att förvänta sig)

• Felet beror på ett systemfel eller ett nätverksproblem – använd ett felmeddelande-mönster istället

• Vyn visar ett resultat av en sökning med nollträffar i en liten inline-kontext – en kortare textrad räcker ofta där

Varianter

Vy-nivå (full empty state)

Används när en hel vy eller ett helt sidavsnitt saknar innehåll. Innehåller illustration, rubrik, brödtext och i förekommande fall en CTA.

Passar för: Inkorgar, ärendelistor, dashboards, rapporter, sökresultat på helsida

Open

Hela vyer med empty state

Komponent-nivå (inline empty state)

Används inuti avgränsade komponenter som tabeller, kort eller datalistor. Visar en kortfattad text – utan illustration – som kommunicerar att information saknas. Texten är kursiv och använder färgen text-subtle-on-default för att visuellt särskilja sig från faktiskt innehåll.

Passar för: Tabellrader, fältgrupper i formulär, detaljvyer med ännu ej ifylld information

Open

Detaljvy som saknar information och en tom tabell

Klassificering

Tomt av naturliga skäl (no-content)

Vyn är tom för att användaren ännu inte skapat eller tagit emot något innehåll. Det är ett förväntat och normalt tillstånd.

• Ton: uppmuntrande, framåtblickande

• Inkludera en CTA om det är möjligt för användaren att initiera innehåll

• Exempel: "Du har inga ärenden än. Skapa ditt första ärende för att komma igång."

Tomt efter filtrering eller sökning (no-results)

Vyn är tom som ett direkt resultat av användarens sökning eller filtrering.

• Ton: neutral, hjälpsam

• Förklara att inga träffar hittades utifrån aktuella kriterier

• Föreslå att ändra söktermen eller rensa filter

• Inkludera inte en skapande CTA – kontexten handlar om att hitta, inte skapa

• Exempel: "Inga ärenden matchar din sökning. Prova att ändra sökord eller ta bort ett filter."

Saknad information i komponent (missing-data)

Ett fält eller en datapunkt saknar värde. Det kan bero på att informationen inte fyllts i, inte hämtats eller inte är tillgänglig.

• Ton: neutral, deskriptiv

• Använd en platshållartext som tydligt signalerar att värdet saknas, t.ex. — eller Ej angivet

• Undvik att lämna fältet tomt – en tom yta ger ingen information

• Exempel i en personvy: Ej angivet för namn, e-postadress och telefonnummer som ännu inte fyllts i

Riktlinjer

Beteende

Vy-nivå: empty state visas direkt när vyn laddas och inga dataobjekt finns att rendera. Det ska inte animeras in med fördröjning – det ska finnas där direkt. Om en CTA klickas, navigerar den användaren till relevant skapandeflöde eller utlöser en dialog; det hör till det aktuella flödets mönster att hantera det.

Komponent-nivå: platshållartexten ersätter det saknade värdet utan att förändra komponentens layout eller höjd. I tabeller placeras texten som en enda rad under kolumnrubrikerna och spänner hela tabellbredden.

Visuell utformning

Vy-nivå: centrera innehållet horisontellt i vyn. Illustrationen placeras ovanför rubriken. Använd illustrationer från designsystemets illustrationsbibliotek – aldrig ikoner. Välj en illustration som är semantiskt kopplad till vyns syfte. CTA-knappen placeras under preamble-texten och följer primär- eller sekundärknappshierarkin beroende på åtgärdens vikt.

Open

Exempel på hur empty states för vyer ser ut.

Komponent-nivå: texten är kursiv och färgsatt med text-subtle-on-default. Ingen illustration, ingen rubrik. Storleken följer den omgivande komponentens textstil.

Open

Exempel på text-utseende för empty state på komponentnivå (wirefram, 1177, Inera).

Innehåll och språk

Rubrik (vy-nivå): besvara varför vyn är tom i en kort, tydlig mening. Undvik generiska fraser som "Inget att visa". Var specifik utifrån vyns kontext.

• Undvik: "Inga objekt hittades"

• Föredra: "Du har inga meddelanden" eller "Inga ärenden har skapats ännu"

Preamble (vy-nivå): beskriv kort vad användaren normalt sett skulle se i den här vyn. Håll det till en till två meningar. Sätt förväntningar utan att vara teknisk.

CTA-text (vy-nivå, när relevant): använd ett handlingsorienterat verb kopplat till det specifika objektet.

• Undvik: "Kom igång"

• Föredra: "Skapa ärende" eller "Lägg till mottagare"

Platshållartext (komponent-nivå): använd Ej angivet för information som saknas men kan fyllas i. Använd ett tankstreck (—) för information som inte är tillämpbar. Undvik att lämna fältet tomt.

Gör / Gör inte

Tillgänglighet

WCAG-relevanta kriterier

Riktlinjer

• Vy-nivå: lägg empty state-innehållet i en <section> eller <div> med ett beskrivande aria-label om det inte redan har en synlig rubrik som identifierar sektionen

• Om empty state visas dynamiskt efter en användarinteraktion (t.ex. sökning): använd en role="status" eller aria-live="polite"-region för att meddela skärmläsare att inga resultat hittades, utan att flytta fokus

• CTA-knappen ska ha ett tillgängligt namn som är självförklarande: "Skapa ärende" är tillgängligt, "Klicka här" är inte det

• Illustration: märk upp illustrationen med alt="" (dekorativ) eftersom rubriken och preamble-texten kommunicerar det meningsbärande innehållet – illustrationen ska inte duplicera texten via alt-text

• Komponent-nivå: platshållartexten är ren text i DOM – undvik att dölja den enbart visuellt med CSS på ett sätt som exkluderar den från tillgänglighetsträdet

• Tangentbord: CTA i empty state ska nås och aktiveras med tangentbord enligt standard fokusordning. Inga särskilda fokushanteringsbehov finns om empty state är ett statiskt tillstånd. Om det visas dynamiskt, säkerställ att fokus inte hamnar utanför synligt innehåll.

Sammanfattning

Empty state-mönstret används för att kommunicera att en vy eller komponent saknar innehåll, och skiljer på vy-nivå (med illustration, rubrik, preamble och valfri CTA) och komponent-nivå (med kursiv platshållartext i text-subtle-on-default). Mönstret ska alltid sätta rätt förväntningar – förklara varför det är tomt och vad som normalt visas – och skilja på tillståndet "inget har skapats än" kontra "sökningen gav inga träffar". Dynamiskt visade empty states ska tillgängliggöras via aria-live så att skärmläsaranvändare får korrekt feedback.