Tien originele ontwerpen van empty states voor eerste gebruik, geen zoekresultaten, opgeschoonde inboxen, fouten en ontbrekende rechten, met bewerkbare code en een toegankelijke berichtenbuilder.
Een empty state is wat een scherm toont als er nog niets te tonen is: een nieuw account, een zoekopdracht zonder treffers, een opgeschoonde inbox of mislukt laden. Elk geval heeft een duidelijke uitleg en een volgende stap nodig. De tien ontwerpen hieronder dekken elk veelvoorkomend geval met bewerkbare HTML en CSS, plus een builder die toegankelijke markup schrijft.
De vijf soorten leegte en wat elk moet bieden
Lege schermen zijn het eerste wat nieuwe gebruikers zien en de plek waar mensen belanden als een zoekopdracht misgaat, toch zijn het vaak grijze vakken met de tekst Geen data. Deze voorbeelden behandelen elke soort leegte anders, want de juiste boodschap na een typfout is niet de juiste boodschap op dag één. Elk fragment staat op zichzelf en gebruikt eenvoudige vormen in plaats van stockillustraties.
Het is het scherm of paneel dat verschijnt als een lijst, tabel, dashboard of zoekopdracht niets te tonen heeft. Goede empty states leggen uit waarom en geven de volgende actie; slechte tonen lege ruimte of alleen Geen data.
Gebruik een echte kop en tekst, niet alleen een afbeelding. Markeer decoratieve illustraties met lege alt-tekst. Als de lege boodschap verschijnt na een filter of zoekopdracht zonder dat de pagina herlaadt, zet hem dan in een element met role="status", dat impliciet een beleefde live-instelling heeft, en verplaats de focus er niet naartoe.
Dat kan helpen bij eerste gebruik, bijvoorbeeld een demoproject dat de gebruiker kan openen en verwijderen. Label het duidelijk als voorbeeld zodat niemand het voor eigen data aanziet.
Herhaal de term, zeg dat er niets overeenkwam en stel oplossingen voor: controleer de spelling, verwijder een filter of blader door een categorie. Een knop Filters wissen met één klik is de nuttigste losse actie.
Een empty state betekent dat er echt niets te tonen is. Een fout betekent dat er misschien data is, maar dat die niet geladen kon worden. Zeg welke van de twee het is, want iemand vertellen dat hij geen bestellingen heeft terwijl de server faalde is alarmerend.
Een gestippelde omlijning laat zien waar het item zal verschijnen. De knop staat in het lege gebied zodat niemand ernaar hoeft te zoeken.
Aanmaken of importeren aanbieden respecteert mensen die al ergens anders data hebben.
Een korte lijst met de eerste stap gemarkeerd maakt van een leeg dashboard een plan.
Een duidelijk gemarkeerde voorbeeldrij laat zien hoe het scherm eruitziet als het vol is.
Herhaal de term, stel oplossingen voor en houd een weg terug naar alles.
De actieve filters tonen als verwijderbare chips wijst direct naar de oorzaak.
Sommige lege schermen zijn goed nieuws. Een rustige bevestiging is genoeg; geen knop nodig.
Benoem het probleem eerlijk, zeg dat de data veilig is als dat zo is, en bied opnieuw proberen aan.
Vertel mensen wie ze moeten vragen en geef ze een knop die het vragen doet.
De kolomkoppen behouden laat zien wat er zal verschijnen, en één rij met de boodschap loopt over alle kolommen.
Facturen die u verstuurt verschijnen hier, met hun status en vervaldatum.
Factuur aanmaken
Empty-state-builder
Schrijf de kop, de zin en de knop, kies de soort en kopieer toegankelijke HTML en CSS. Beginoutput:
Uitleg
Knoptekst
Eerste gebruik
Geen resultaten
Fout
Voorbeeld van uw empty state
HTML kopiëren
CSS kopiëren
Gratis beginnen · Geen creditcard nodig