Lege schermen ontwerpen: help mensen verder wanneer inhoud ontbreekt
Een praktisch kader voor het ontwerpen van schermen bij eerste gebruik, zoekopdrachten zonder resultaten, gewiste gegevens en fouten, met bruikbare tekst, duidelijke acties en beeldgebruik dat bij de context past.
Een leeg vlak is dubbelzinnig. Iemand kan zich afvragen of de app nog laadt, of de zoekopdracht is mislukt of dat er eerst iets moet worden toegevoegd. Een bruikbare lege staat benoemt wat er gebeurt en helpt bepalen wat de volgende stap is.
Bepaal eerst waarom de inhoud ontbreekt. Eerste gebruik, geen zoekresultaten, bewust gewiste gegevens en een systeemfout vragen elk om andere tekst en acties. De voorbeelden hier zijn hypothetische ontwerpoefeningen, geen productcasussen of claims over prestaties.
Belangrijkste inzichten
- Bepaal waarom de inhoud ontbreekt voordat je tekst, illustratie of actie kiest.
- Houd feedback over laden en mislukken gescheiden van een bevestigd leeg resultaat.
- Schrijf een specifieke kop, waar nodig een korte uitleg en een relevante volgende stap.
- Beoordeel de staat in zijn context, inclusief toegankelijkheid, smalle schermen en herstelroutes.
1. Bepaal waarom de ruimte leeg is
Behandel een lege staat als informatie over het product, niet als een kans om te versieren. Vraag wat er vlak voor het verschijnen van het scherm gebeurde, wat het systeem weet en of de persoon de situatie kan veranderen. Volgens NN/g bieden lege staten kansen om status te communiceren, leren te ondersteunen en routes naar belangrijke taken te bieden. Daarvoor moet je eerst de staat juist vaststellen.
Toon vooral niet ‘Geen items’ terwijl een verzoek nog loopt. Laat een laadindicator of skeletweergave zien totdat het resultaat bekend is. Als het verzoek mislukt, leg dan uit wat er misging en welke herstelmogelijkheid er is. Als het verzoek slaagt maar nul items oplevert, zeg dan dat er geen passende inhoud is. Zo verwarren mensen een tijdelijke vertraging of systeemprobleem niet met een echt resultaat.
| Staat | Wat het betekent | Bruikbare reactie |
|---|---|---|
| Eerste gebruik | De functie is klaar, maar de persoon heeft nog niets toegevoegd of gemaakt. | Leg uit wat hier thuishoort en bied een directe manier om iets te maken, toe te voegen of te ontdekken. |
| Geen resultaten | Een zoekopdracht, filter of datumbereik is succesvol afgerond zonder treffers. | Bevestig dat de criteria geen treffers opleverden; stel een relevante aanpassing voor of bied aan een filter te wissen. |
| Gewiste gegevens | De persoon heeft de items die hier gewoonlijk verschijnen afgerond of verwijderd. | Erken de voltooiing of het lege resultaat zonder te suggereren dat er iets mis is; bied zo nodig een andere taak aan. |
| Fout | Het systeem kon de verwachte inhoud niet ophalen of tonen. | Leg in gewone taal uit wat mislukte en bied een herstelactie aan, zoals opnieuw proberen. |
| Laden | Het systeem heeft nog niet vastgesteld of er inhoud bestaat. | Toon voortgang of een laadweergave; kondig niet te vroeg een leeg resultaat aan. |
2. Schrijf tekst die past bij de oorzaak
Gebruik een kop om de staat te benoemen en aanvullende tekst om uit te leggen wat die betekent of hoe iemand verder kan. Houd de kop scanbaar. Voeg alleen een zin toe als die een echte vraag beantwoordt. Apples richtlijnen voor tekst adviseren duidelijke volgende stappen op lege schermen, actiegerichte labels en directe foutmeldingen die uitleggen hoe het probleem kan worden opgelost. Vermijd spitsvondigheden die de betekenis verhullen, vage koppen zoals ‘Hier is niets’ en tekst die de gebruiker de schuld geeft.
Een hypothetisch scherm met opgeslagen items bij eerste gebruik zou bijvoorbeeld ‘Je opgeslagen gidsen verschijnen hier’ kunnen tonen, gevolgd door ‘Sla een gids op om er later naar terug te keren’, met een knop ‘Gidsen bekijken’. Een afgeronde controlelijst zou ‘Je bent helemaal bij’ kunnen melden en ‘Afgeronde taken bekijken’ aanbieden. Deze voorbeelden beschrijven verschillende situaties: het eerste leert hoe je een functie vult, het tweede bevestigt een geslaagd resultaat.
Bij een geslaagde zoekopdracht zonder treffers zou een hypothetische melding ‘Geen projecten gevonden voor ‘orchidee’’ kunnen zijn, met de suggestie ‘Probeer een bredere term of wis filters’. Bewaar de zoekterm en maak filterwijzigingen waar mogelijk omkeerbaar. Schrijf bij een netwerkfout ‘Projecten konden niet laden’ met ‘Opnieuw proberen’. Beweer niet dat er geen projecten zijn als het systeem dat niet kon controleren.
- Benoem het relevante object of criterium, zodat de melding ook buiten de directe context begrijpelijk is.
- Gebruik een werkwoord op de knop, zoals ‘Project maken’, ‘Filters wissen’ of ‘Opnieuw proberen’.
- Plaats instructies bij de betreffende inhoud en gebruik tekst naast kleur of beeld.
- Vermijd ‘Oeps’, verwijten en technische codes, tenzij mensen die nodig hebben om het probleem op te lossen.
3. Maak de volgende stap nuttig, niet automatisch
Bied een actie aan als iemand de situatie redelijkerwijs kan veranderen of de taak kan voortzetten. Bij eerste gebruik helpt vaak een maak- of toevoegactie; bij geen resultaten kan het wissen van een beperking helpen; bij een fout is opnieuw proberen zinvol. Een lege inbox of afgeronde training heeft misschien helemaal geen actie nodig. Plaats niet op elke staat een knop alleen om het vlak interactief te laten lijken.
Laat de herstelactie passen bij het probleem. Een mislukte vernieuwing vraagt meestal om een uitleg en een knop om opnieuw te proberen op dezelfde plek, niet om een blokkerende melding. Apple adviseert feedback af te stemmen op het belang van de informatie en waarschuwingen te bewaren voor kritieke situaties waarin actie mogelijk is. Bewaar bij zoeken het werk van de gebruiker en bied logische aanpassingen aan in plaats van de zoekterm stilzwijgend te veranderen. Material Design noemt ook startinhoud, korte uitleg of duidelijk gelabelde beste treffers als alternatieven wanneer die echt helpen.
Gebruik een illustratie alleen als die context, warmte of herkenning toevoegt. Ze mag niet concurreren met de boodschap of mensen laten denken dat een decoratief beeld interactief is. Bij een compact filterresultaat volstaat mogelijk een eenvoudig pictogram; een werkruimte bij eerste gebruik kan baat hebben bij een klein voorbeeld van de inhoud die erin komt. Maak startinhoud, als je die gebruikt, makkelijk herkenbaar en verwijderbaar.
- Kies één hoofdactie die de oorzaak direct aanpakt.
- Voeg alleen een tweede hulproute toe als die een waarschijnlijke vervolgvraag beantwoordt.
- Gebruik een rustige bevestiging wanneer het lege resultaat goed nieuws is.
- Zorg dat de actie ook voor toetsenbord- en schermlezergebruikers begrijpelijk blijft.
4. Beoordeel de hele staat, niet alleen de illustratie
Bekijk de staat in de werkelijke ruimte: een schermvullende weergave bij eerste gebruik, een smalle zijbalk en een gefilterde tabel stellen verschillende eisen aan ruimte en hiërarchie. Houd de melding dicht bij het gebied waarover ze gaat. Zorg dat ze leesbaar blijft wanneer tekst groter wordt of afbreekt, en maak de hoofdactie vindbaar zonder kleurherkenning te vereisen. Test ook de overgangen: van laden naar leeg, van laden naar fout, van opnieuw proberen naar succes en van een filterwijziging terug naar resultaten.
Een praktische bibliotheekbeoordeling begint met een aanleiding en een verwachte herstelactie. Noteer voor elk patroon de staat, kop, eventuele uitleg, hoofdactie, tweede route en wat na selectie gebeurt. Vergelijk screenshots op bruikbare structuur en visuele hiërarchie en controleer daarna het productgedrag in de context; een stilstaand beeld vertelt niet of een fout herstelbaar is of een resultaat echt leeg. Bekijk de UI-bibliotheek van ScreenKits voor visuele referenties en ontdek alle categorieën voor verwante patronen.
- Kan iemand zien of inhoud ontbreekt, nog laadt of door een fout niet beschikbaar is?
- Sluit de melding aan bij de huidige zoekterm, filters, het account of de afgeronde taak?
- Behoudt de actie nuttige invoer en leidt ze tot een zichtbaar resultaat?
- Werkt de staat op kleine schermen, met langere vertaalde tekst en met ondersteunende technologie?
- Kan iemand herstellen van een fout of een mislukte zoekopdracht aanpassen?
Veelgestelde vragen
Moet een lege staat altijd een oproep tot actie bevatten?
Nee. Voeg een actie toe wanneer die helpt om inhoud toe te voegen, een zoekopdracht aan te passen of van een probleem te herstellen. Een afgeronde taak of vanzelfsprekend lege weergave heeft mogelijk alleen een korte bevestiging nodig.
Is een scherm zonder resultaten een foutstatus?
Meestal niet. Als het zoeken of filteren succesvol is afgerond, meld dan dat er geen treffers waren en bied een nuttige aanpassing aan. Gebruik fouttaal alleen bij een systeemfout waardoor het resultaat niet kon worden vastgesteld of getoond.
Wat moet er verschijnen terwijl resultaten worden geladen?
Gebruik een laadweergave of voortgangsfeedback totdat het verzoek is afgerond. Toon pas een leeg resultaat nadat het systeem heeft bevestigd dat het geslaagde antwoord geen passende items bevat.
