Feedback
Tomme tilstande
En tom tilstand er det, en skærm viser, når der endnu ikke er indhold — for en ny bruger, en tom søgning eller et view, brugeren selv har ryddet. I stedet for et tomt hul kan den forklare, hvorfor der er tomt, og pege på næste skridt. Mønstret er vejlednings-drevet: der findes ikke et veldokumenteret konverteringstal, så værdien hviler på etableret usability-vejledning frem for et enkelt studie.
Definition
En tom tilstand er det, brugeren ser, når der endnu ikke er data — en mulighed for at guide frem for at efterlade et hul.
Hvorfor det virker
En blank beholder efterlader brugeren i tvivl om, hvorvidt indhold indlæses, mangler eller er i stykker. En besked afklarer status — Nielsen Norman Groups første regel for tomme tilstande, som svarer direkte til Nielsens heuristik om synlighed af systemstatus.1
Den tomme tilstand er et læringsøjeblik: den kan forklare, hvad der hører til i rummet, og hvordan funktionen virker — NN/g anbefaler at bruge den til at give læringssignaler.1
En direkte vej til næste opgave gør tom plads til onboarding frem for en mur. NN/g’s tredje regel er at give en tydelig genvej til at komme i gang med den opgave, der fylder skærmen.1
Kontekstuel hjælp i situationen slår tvungne intro-tutorials: NN/g finder, at instruktions-overlays ofte springes over og ikke forbedrer opgaveløsningen. En first-use tom tilstand er netop hjælp vist på det relevante tidspunkt.4
Hvornår du bruger det — og hvornår ikke
Hvornår du bruger det
- Views kan være tomme før første handling eller ved 0 resultater.
- Der findes et klart næste skridt at pege på.
- Tonen kan gøre en frustrerende situation venlig.
Hvornår du bør undgå det
- Skærmen er reelt aldrig tom i praksis.
- En tom tilstand ville skjule en egentlig fejl.
Best practices
Forklar hvorfor pladsen er tom
Efterlad aldrig en bar blank skærm. Sig tydeligt, at der ikke er noget her endnu — og hvorfor (fx »Ingen poster for den valgte periode«).1
Giv præcis én tydelig næste handling
En direkte genvej til den opgave, der fylder skærmen (»Opret dit første projekt«). Hold det til én oplagt handling, så valget er utvetydigt.1
Brug first-use som onboarding
Behandl den første tomme skærm som et startpunkt, der driver en handling — ikke som fyld. Design den til at opmuntre til aktivitet.3
Skeln »ingen resultater« fra »første gang«
De kræver forskellig copy og CTA: first-use inviterer til at oprette; ingen-resultater bekræfter, at søgningen kørte, og tilbyder en vej videre (bredere søgning eller et tydeligt »bedste match«).2
Overvej starter-indhold i stedet for ingenting
Fyld ellers tomme skærme med eksempel-indhold eller et lille, lukbart lærings-kort, så brugeren kan komme i gang med det samme og lære ved at gøre.2
Hold illustrationer diskrete
Billedet skal være subtilt og sekundært i forhold til beskeden — det skal støtte, ikke dominere eller skubbe handlingen ned under folden.2
Gør tilstanden tilgængelig
Annoncér »ingen resultater« via et aria-live-område, så skærmlæser-brugere hører udfaldet (WCAG 4.1.3, niveau AA), og hold fokus i søgefeltet, så søgningen kan justeres.5
Typiske fejl
En helt blank skærm
En tom beholder læses som i stykker eller »indlæser i det uendelige« og giver ingen vej videre.
Generisk copy som »Ingen data«
Fortæller intet om hvorfor eller hvad-nu. Kombinér besked, læringssignal og en genvej i stedet.
At skjule en reel fejl bag en tom tilstand
En ægte indlæsnings- eller adgangsfejl er en fejltilstand, ikke en normal tom tilstand — hold dem adskilt, så brugeren kan komme videre.
Stille »ingen resultater« for skærmlæsere
Opdateres resultaterne uden en annonceret status, efterlades skærmlæser-brugere i et sort hul — et brud på WCAG 4.1.3.
Overdreven illustration
En stor dekorativ illustration, der skubber den faktiske handling ned under folden, modarbejder formålet.
Eksempler i praksis
Slack
Ofte fremhævet: en tom kanal viser en venlig besked (»This channel doesn’t have any messages yet«) med en klar CTA; og »ingen søgeresultater« tilbyder at justere søgningen eller gå til kanal-oversigten frem for en blindgyde.
Starter-indhold (Material Design)
Mange apps seeder en ellers tom skærm med eksempel-indhold eller et lærings-kort, så brugeren kan bruge produktet med det samme i stedet for at møde ingenting.
Ofte stillede spørgsmål
Hvad er en tom tilstand?
Det er, hvad en skærm viser, når der ikke er indhold endnu — for en ny bruger, en tom søgning/filter, eller indhold brugeren selv har ryddet. Gjort godt forklarer den, hvorfor der er tomt, og peger på næste skridt frem for at vise et tomt hul.
Hvilke typer tomme tilstande findes der?
Fire slags: first-use (intet oprettet endnu), ingen-resultater (en søgning/filter matchede intet), bruger-ryddet (brugeren tømte den selv, ofte »alt er klaret«) og fejl/ingen-data (indhold kunne ikke hentes). De tre første er vejlednings-muligheder; den sidste bør behandles som en særskilt fejl.
Hvad bør en god tom tilstand indeholde?
En kort forklaring på, hvorfor der er tomt, et lille læringssignal om, hvad der hører til, og én tydelig call-to-action, der hjælper brugeren med at fylde skærmen — NN/g’s tre opgaver: vis status, lær fra dig, og giv en genvej.
Hvordan adskiller »ingen resultater« sig fra »første gang«?
First-use inviterer til at oprette (»Tilføj dit første punkt«). Ingen-resultater bekræfter, at søgningen kørte, og hjælper brugeren videre — gentag søgningen, foreslå bredere ord eller filtre, eller vis et »bedste match«. Den samme generiske besked til begge forvirrer.
Kan en tom tilstand erstatte en onboarding-tutorial?
Ofte ja — til first-use. NN/g finder, at tvungne intro-tutorials tit springes over og ikke forbedrer opgaveløsningen; kontekstuel hjælp vist på stedet (netop en first-use tom tilstand) virker typisk bedre.
Hvad kræver en tom tilstand af tilgængelighed?
Annoncér »ingen resultater« via et aria-live-område, så skærmlæser-brugere hører udfaldet (WCAG 4.1.3, niveau AA), hold tastaturfokus i søgefeltet, giv meningsfulde illustrationer alt-tekst, og skjul rent dekorative billeder for hjælpeteknologi.