Patronen voor empty-state-ontwerp die verwarring verminderen en gebruikers stap-voor-stap naar de volgende succesvolle setupstap leiden — met tekst, lay-out en checklists die je snel kunt toepassen.
Een blanco scherm is niet neutraal. Het creëert een pauze waarin mensen gaan raden wat ze moeten doen, of ze een stap gemist hebben, of het product wel werkt. Tijdens setup is die pauze duur. Het verandert “ik begin” in “ik kom later wel terug.”
Een lege staat is wat een gebruiker ziet wanneer er nog niets te tonen valt omdat ze nog niets hebben aangemaakt, geïmporteerd of gekoppeld. Het is geen laadscherm, geen foutmelding en geen toestemming-waarschuwing. Het is het moment net vóór waarde, wanneer de app de gebruiker moet helpen naar een eerste betekenisvol resultaat.
Een goede lege staat heeft één taak: de gebruiker naar de volgende succesvolle actie leiden met zo min mogelijk nadenken. “Succesvol” telt. De volgende stap moet een echt resultaat opleveren (een eerste project, een gekoppelde databron, een eerste item aangemaakt), niet een doodlopende formulierpagina of een vage producttour.
Deze momenten komen vaker voor dan teams verwachten: eerste inlog na registratie, een gloednieuwe workspace, een feature-tab zonder items (projecten, klanten, bestanden) of een setup-pad waarbij import is overgeslagen en er niets bestaat.
Als een lege staat z’n werk doet, beantwoordt die snel drie vragen:
Voorbeeld: in Koder.ai kan een nieuwe gebruiker een verse workspace openen en nog geen apps zien. Een sterke lege staat zegt duidelijk dat er nog niets is gemaakt, biedt één voor de hand liggende volgende actie zoals “Maak je eerste app” en voegt een klein geruststellend nootje toe (bijvoorbeeld dat broncode-export en snapshots beschikbaar zijn zodra ze beginnen). Het doel is van “niks hier” naar “ik kan naar een eerste werkend resultaat”.
Voor een nieuwe gebruiker kan een leeg scherm voelen alsof de app vastloopt of alsof ze iets fout hebben gedaan. De geest vult de leegte snel, en meestal niet in jouw voordeel.
De meeste mensen stellen in stilte dezelfde reeks vragen:
De emoties achter die vragen sturen gedrag. Onzekerheid laat mensen blijven hangen. Angst om iets fout te doen zorgt dat ze de primaire knop vermijden. Onrust maakt dat ze de app sluiten als er binnen een paar seconden geen duidelijke volgende stap verschijnt.
Nieuwe-gebruiker lege staten en power-user lege staten lossen verschillende problemen op. Nieuwe gebruikers hebben context en zekerheid nodig omdat ze jouw woorden nog niet kennen. Terugkerende gebruikers willen snelheid: een snelle manier om nog een item te maken, data te importeren of een bekende actie te herhalen.
Setup-lege staten verschillen ook van fout- en laadstatussen. Laden zegt “wacht, er gebeurt iets.” Fout zegt “er is iets misgegaan, hier is waarom.” Setup zegt “er staat nog niets en dat is normaal. Zo begin je.”
Een concreet voorbeeld: als iemand een nieuwe workspace in Koder.ai opent en een lege Projects-pagina ziet, denken ze niet aan features. Ze denken: “Begin ik met een prompt, importeer ik code of kies ik een template, en gaat er iets stuk?” Je lege staat zou dat moeten beantwoorden zonder hen naar de documentatie te sturen.
Een goede lege staat voelt niet leeg. Hij fungeert als een wegwijzer: “Dit is wat dit is, en hier is de volgende klik.”
Een structuur die in de meeste setup-flows werkt heeft drie delen:
Houd de uitleg kort. Als je een alinea nodig hebt om het scherm uit te leggen, vraag je te veel van de gebruiker. Mik op 1 tot 2 korte zinnen met eenvoudige woorden zoals “Voeg je eerste project toe” of “Maak je eerste workspace.”
Maak daarna de volgende stap overduidelijk met één primaire knop. Als je drie gelijke knoppen laat zien, vraag je de gebruiker een pad te kiezen voordat ze de pagina begrijpen. Als je alternatieven moet aanbieden (import, template, overslaan), houd die visueel stiller dan de hoofdfunctie.
Gebruik de geruststellende regel om veelvoorkomende angsten weg te nemen: iets verkeerd doen, tijd verspillen of technische kennis nodig hebben. Kleine hints over wat er daarna gebeurt en wat ongedaan kan worden gemaakt helpen meer dan extra uitleg.
Voorbeeldtekst voor een eerste “Projects”-scherm:
Titel: Start je eerste project
Uitleg: Projecten bevatten je app-setup en releases.
Primaire actie: Project aanmaken
Geruststelling: Duurt ongeveer 2 minuten. Je kunt het later hernoemen.
Als je product meerdere manieren ondersteunt om te starten (bouwen vanuit chat, importeren of template, zoals tools als Koder.ai), houd “Aanmaken” als standaard en plaats “Importeren” en “Gebruik een template” als secundaire acties eronder.
Lege staten falen als de tekst over features praat in plaats van over wat de gebruiker krijgt. Je woorden moeten snel beantwoorden: wat is dit scherm? Waarom zou ik hier iets doen? Wat moet ik nu doen?
Een eenvoudige kopregel-formule is Uitkomst + object. Noem het resultaat en het ding dat ze gaan maken, niet je interne functienaam.
Voor de body-tekst gebruik wat het is + waarom het belangrijk is in één of twee zinnen:
“Klanten zijn de mensen aan wie je verkoopt. Voeg er nu eentje toe zodat je een factuur kunt sturen en betalingen kunt bijhouden.”
CTA's moeten beginnen met een duidelijk werkwoord en een specifiek zelfstandig naamwoord. Vermijd vage knoppen zoals “Aan de slag” als er meerdere paden zijn.
Voeg microtekst toe direct naast de keuze die risico lijkt te hebben. Kleine geruststellingen doen vaak meer dan lange uitleg:
Als je product output genereert voor de gebruiker (zoals Koder.ai), stel verwachtingen zodat mensen weten dat ze niet committen aan een eindversie: “We maken een eerste concept. Je kunt het beoordelen en bewerken voordat je het live zet.”
Een goede lege staat moet lezen als een wegwijzer, niet als een poster. De lay-out heeft een duidelijke volgorde nodig zodat mensen in één oogopslag begrijpen wat er gebeurt en kunnen handelen.
Gebruik een eenvoudige hiërarchie die overeenkomt met hoe ogen een pagina scannen: kopregel, één korte zin, een primaire CTA en dan een stillere secundaire actie (import, template, overslaan).
Houd de primaire knop dicht bij de boodschap. Als de gebruiker moet lezen, scrollen en dan pas beslissen, stoppen ze vaak. Een veelgebruikt patroon is een compact blok (kopregel + body + CTA), met meer witruimte tussen dat blok en alles eromheen (navigatie, footer, zijpanelen).
Iconen en kleine illustraties kunnen helpen bij het scannen, maar alleen als ze betekenis toevoegen. Een map-icoon naast “Nog geen projecten” is nuttig. Een willekeurige mascotte meestal niet. Als je een illustratie gebruikt, houd die klein en plaats hem boven de kopregel zodat hij niet concurreert met de CTA.
Een van de sterkste patronen is het tonen van een klein voorbeeld van succes: een voorbeeldkaart, een enkele demoregel in een tabel of een vervaagde voorbeeldtegel. In een tool zoals Koder.ai zou het lege “Apps”-scherm één voorbeeld-app-tegel kunnen tonen (naam, status, laatst bijgewerkt) zodat gebruikers onmiddellijk begrijpen wat ze gaan maken.
Wanneer iemand een leeg scherm ziet, willen ze meestal één van drie dingen: helemaal opnieuw beginnen, data binnenhalen of snel aan de slag met een starter. Goede lege staten maken die paden duidelijk zonder de gebruiker te dwingen het product te bestuderen.
Leid met “Aanmaken” wanneer de eerste echte winst het maken van iets nieuws is: een project, workspace, pagina of eerste record. Dit werkt het beste wanneer de gebruiker snel klaar kan zijn en de actie omkeerbaar is.
Als het aanmaken langer duurt, breek het op in een kleinere eerste stap (bijvoorbeeld “Maak een concept”) zodat ze vooruit kunnen zonder zich opgesloten te voelen.
Leid met “Importeren” wanneer de meeste nieuwe gebruikers binnenkomen met een bestaand systeem, bestand of account om te koppelen. De lege staat moet aangeven wat import ondersteunt en wat ze daarna krijgen (bijvoorbeeld velden gemapt en items aangemaakt).
Een praktische manier om de primaire CTA te kiezen is op context te letten. Als de gebruiker vanuit migratiecontent komt, markeer Import. Als ze op een lege “nieuw project”-knop klikten, markeer Maak. Als setup complex is, markeer Template.
Leid met templates wanneer je product veelvoorkomende startpunten heeft en gebruikers vooral willen aanpassen, niet ontwerpen. Benoem templates op resultaat (“Sales pipeline”, “Weekplanner”), niet op features.
Een veilige “Probeer met voorbeelddata”-optie vermindert angst. Maak duidelijk dat het verwijderd kan worden. Voor een chat-first builder zoals Koder.ai kan een voorbeeldproject de vorm van een werkende app laten zien voordat de gebruiker zijn eigen prompt schrijft.
Lege schermen zijn niet neutraal. De beste maken de volgende succesvolle actie duidelijk, veilig en snel.
Voorbeeld: als iemand een nieuwe CRM opent en de lege “Contacten”-tab ziet, is de snelste winst “Voeg je eerste contact toe.” Houd het bij naam + e-mail, bied “CSV importeren” als fallback en stel gerust dat ze velden later kunnen bijwerken.
De meeste “vastzittende” lege staten falen om één reden: ze laten de volgende stap riskant of onduidelijk voelen.
Als je drie knoppen toont die er even belangrijk uitzien, pauzeren gebruikers. Kies één primaire actie en één secundaire. Zet alles anders achter een stille “Meer opties”-regel.
“Powerful dashboards, flexible roles, advanced settings” vertelt mensen niet wat ze nu moeten doen. Vervang het door de volgende uitkomst die ze krijgen na klikken.
Voorbeelden:
Lange formulieren in een lege staat voelen als een verbintenis. Als je details nodig hebt, verdien ze later. Begin met de kleinste stap die iets zichtbaar oplevert.
In plaats van naam, bedrijfsomvang, rol en doelen te vragen voordat er iets laadt, vraag alleen “Projectnaam” en maak de rest optioneel zodra het eerste scherm er is.
Humor is prima, maar niet waar de gebruiker duidelijkheid nodig heeft. “Niets te zien hier” verspilt het moment. Zeg precies wat er gebeurt na de klik en wat er niet gebeurt.
Sommige gebruikers kunnen niet vanaf nul beginnen. Bied een echte back-up: importeer, start vanaf een template of probeer een voorbeeld. Als iemand Koder.ai gebruikt en geen idee heeft, kan “Begin met een voorbeeldapp” ze naar een werkend scherm brengen zonder een volledige specificatie te schrijven.
Een nieuwe gebruiker moet in ongeveer vijf seconden begrijpen wat het scherm is, waarom het belangrijk is en wat ze daarna moeten doen.
Geruststelling verandert aarzeling in actie. Voeg een kleine regel vlak bij de CTA toe die angst vermindert, zoals “Je kunt dit later aanpassen” of “Niets wordt gepubliceerd totdat je bevestigt.” Houd het kalm en specifiek.
Een eenvoudige test: vraag een collega om vijf seconden naar het scherm te kijken en je dan te vertellen wat ze denken dat er gebeurt als ze op de hoofdknop klikken. Als ze het niet kunnen beantwoorden, verscherp de tekst of hiërarchie.
Als je setup-flows bouwt in een chat-first builder zoals Koder.ai, geldt dezelfde checklist. De lege staat moet één succesvolle volgende actie uitnodigen: starten vanaf een template, data importeren of een eerste werkende versie genereren die je veilig kunt bewerken.
Een solo-oprichter meldt zich aan bij Koder.ai en opent een gloednieuwe workspace. Ze landen op een Projects-scherm met nul apps en geen idee wat “goed” eruitziet.
In plaats van een lege tabel laat de lege staat een korte belofte, een duidelijke volgende stap en een klein veiligheidsnootje zien. Hier is een voorbeeld van de tekst en CTA (behandel tijdschattingen als placeholders die je moet valideren):
Your workspace is empty.
Create your first app in 5 minutes. Start with a template or describe what you want in plain English.
[Create your first app]
Secondary: Import existing code | Browse templates
Note: You can export the source code anytime.
Nadat de oprichter op Create your first app klikt, vraagt het volgende scherm één eenvoudige vraag: “What are you building?” met één invoerveld en 2 voorbeeldprompts (zoals “CRM for a small agency” of “Landing page with signup”). Houd het pad smal: één duidelijk veld, één duidelijke knop.
Scherm twee kan een korte plan-review zijn (features, pagina’s, data), gevolgd door een bouwstap en een werkende preview. Het eerste succesmoment is wanneer de gebruiker iets reëels kan doen in die preview, zoals een record toevoegen of een test-aanmelding indienen.
Zodra er data bestaat, zouden terugkerende gebruikers niet hetzelfde lege scherm opnieuw moeten zien. Het Projects-scherm kan overschakelen naar een “recent apps”-overzicht met één prominente snelle actie (bijvoorbeeld New app) en kleinere acties (zoals Snapshots of Deploy) op basis van wat ze de vorige keer deden.
Om te weten of je lege staat zijn werk doet, meet je een paar cijfers:
Kies deze week één setup-flow om te verbeteren. Kies degene met de grootste uitval of degene die nieuwe gebruikers als eerste tegenkomen. Herschrijf de lege staat zodat hij drie vragen snel beantwoordt: Wat is dit? Waarom moet ik het nu doen? Wat is de volgende klik?
Houd de verandering klein. Je herontwerpt de onboarding niet. Je zorgt dat de eerste succesvolle actie overduidelijk voelt.
Een eenvoudig éénweek-plan:
Nadat je één winst hebt, standaardiseer. Maak een korte interne pattern voor lege staten: spacing, kopstijl, regels voor icoon/illustratie en een consistente CTA-lay-out. Als teams dezelfde structuur volgen, leren gebruikers het één keer en bewegen ze overal sneller.
Als je een nieuwe app bouwt en setup-stappen snel wilt prototypen, kan Koder.ai (koder.ai) je helpen een flow in Planning Mode te schetsen en de eerste versie te genereren om te testen, en daarna itereren op basis van waar mensen echt aarzelen.
Een lege staat is wat gebruikers zien wanneer er nog niets te tonen is omdat ze nog niets hebben aangemaakt, geïmporteerd of gekoppeld. Het moet uitleggen waar het scherm voor is en wijzen naar de volgende succesvolle actie, in plaats van gebruikers te laten raden.
Een laadscherm zegt “wacht, er gebeurt iets”, en een foutstatus zegt “er is iets misgegaan, dit is waarom”. Een setup-lege-staat zegt “hier staat nog niets en dat is normaal” en begeleidt de gebruiker vervolgens om iets te creëren, te importeren of te starten vanaf een template zodat ze een eerste echte uitkomst bereiken.
Streef ernaar drie dingen snel te beantwoorden: wat is dit scherm, waarom is het leeg en wat moet ik nu doen. Als gebruikers dat binnen een paar seconden niet kunnen begrijpen, houden ze vaker pauze, denken ze iets fout te doen of vertrekken ze.
Gebruik een eenvoudige structuur: een korte verklaring wat het gebied doet, één duidelijke primaire actie en één geruststellende regel die angst of moeite vermindert. Houd de tekst compact zodat gebruikers niet een hele alinea hoeven te lezen om te weten waar ze op moeten klikken.
Stel één primaire knop in die overeenkomt met de meest voorkomende volgende stap, en maak alles anders duidelijk secundair. Als je meerdere gelijkwaardige knoppen toont, bevriezen mensen vaak omdat ze niet weten welk pad “juist” is.
Leid met “Maak” wanneer vanaf nul beginnen de snelste weg is naar een zichtbaar resultaat, zoals een eerste project of record. Leidt met “Importeren” als de meeste nieuwe gebruikers al data elders hebben. Leidt met “Template” wanneer snelheid belangrijker is dan controle.
Schrijf kopregels als resultaat + object, bijvoorbeeld “Maak je eerste project” in plaats van functieslabels zoals “Projecten”. Voeg in de body één zin toe die uitlegt wat er na de klik gebeurt zodat gebruikers het resultaat kunnen voorspellen.
Plaats de kopregel, één korte zin en de primaire knop in een compact blok met duidelijke visuele hiërarchie. Houd secundaire acties stiller en dichtbij, en voorkom dat de hoofdknop ver naar beneden wordt gedrukt waar gebruikers moeten scrollen of zoeken.
Zet een korte veiligheidsregel vlakbij de actie, zoals “Je kunt dit later aanpassen” of “Niets wordt gepubliceerd totdat je bevestigt.” In tools zoals Koder.ai kan het ook helpen om omkeerbare acties te noemen, zoals snapshots/rollback of de mogelijkheid om broncode te exporteren zodra ze beginnen te bouwen.
Volg hoe vaak gebruikers het lege scherm zien, klikken op de primaire CTA en het mijlpaaldoel bereiken waar de lege staat voor bedoeld is. Bekijk ook de tijd tot eerste succes en uitval tussen de lege staat en de volgende stap — een lege staat kan klikken krijgen maar toch falen in het opleveren van echte resultaten.