Hoe lege staatspagina's voor websites en mobiele apps te ontwerpen

Lege statuspagina's zijn minder bekende ontwerpelementen met een belangrijke rol in de gebruikerservaring. In de eenvoudigste vorm zijn lege toestanden pagina-indelingen te zien wanneer een gebruiker voor het eerst een pagina bezoekt waar geen inhoud beschikbaar is.

Dit kan mobiele toepassingen, sociale netwerken of zelfs lege blogcategorieën omvatten. Het doel is om een lege pagina die te bezorgen lijkt op een niet-lege pagina. Bezoekers moeten erkennen het gebrek aan inhoud als een middel voor dreigende inhoud.

Ik wil graag bespreken hoe lege staatspagina's werken en waarom ze zo belangrijk zijn. Ontwerpers van interfaces moeten deze punten overwegen en proberen ze toe te passen op lege staten, indien van toepassing. Maar laten we beginnen om te kijken hoe een lege status functioneert en hoe deze waarde biedt voor de interface.

De waarde van lege staten

De schoonheid van een geweldig leeg ontwerp staat in de eenvoud. Lege pagina's leggen uit wat zou op de pagina moeten staan zodra er wat inhoud is. Het kan passief zijn als een lege inbox, of het kan actief op de gebruiker wachten als een lege Twitter-feed.

Blanco pagina's zijn saai, saai en zelfs verwarrend. Lege toestanden bieden begeleiding om gebruikers te helpen begrijpen waar ze naar kijken. Hoewel het een lege pagina is, helpt de extra context.

Lege toestanden geven ook een gevoel van “versheid” met nieuwe accounts die geen bestaande gegevens bevatten.

Deze test, uitgevoerd door Redditor Bambo_Ocha, controleerde 20 verschillende apps voor lege staatsontwerpen. Verschillende ontwerpstijlen vonden plaats met CTA-knoppen, voorbeeldgegevens en zelfs korte tutorials.

Apps die gedijen op een gebruikersbasis, moeten lege toestanden ontwerpen gebruikersactiviteit aanmoedigen. Deze activiteit kan content publiceren, vrienden toevoegen, foto's uploaden of waarvoor de app is gemaakt. Het onderstaande scherm van Tookapic is een goed voorbeeld.

Maar lege statuspagina's hebben nog steeds waarde, zelfs als er geen actie nodig is. Deze ontwerpen zijn voornamelijk gemaakt om informatie te verstrekken.

Statische informatie is net zo waardevol en het is niet inherent slecht om een lege staat te hebben. Dit paginaontwerp toont bijvoorbeeld geen actuele statistieken van een trackingappendashboard. De gebruiker wil misschien wat statistieken toevoegen, maar het is niet erg om het dashboard leeg te laten.

Vergelijkbare statische ontwerpen kunnen prima werken voor lege blogarchieven of lege berichtenmappen. Het is perfect acceptabel om geen berichten weer te geven. Maar de pagina zou ook niet helemaal leeg moeten zijn zonder context.

Essentiële pagina-elementen

Het belangrijkste element op een lege statuspagina is context. Dit kan komen in de vorm van afbeeldingen, tekst of beide. U wilt gebruikers informeren waarom de pagina leeg is en wat voor soort gegevens er kunnen zijn (e-mails, tweets, vriendenprofielen, enz.).

En hoewel tekst het primaire communicatiemiddel op internet is, kunt u de waarde van afbeeldingen en pictogrammen niet over het hoofd zien.

DigitalOcean heeft een schitterend dashboard met lege grafische toestanden die hun punt duidelijk illustreren. Hun bedrijf maakt gebruik van creatieve branding en schone typografie, dus het is geen verrassing dat hun lege staatspagina's zo illustratief zijn.

Een ander cruciaal aspect van leeg staat ontwerp is de call-to-action-knop. Dit is meestal ontworpen als een knop, hoewel hyperlinks ook goed werken.

Het doel is om gebruikers te helpen actie te ondernemen en hun lege staat op te ruimen. Of dit nu gegevens toevoegen of actie op de site vereist, CTA's leiden gebruikers naar de volgende stap die nodig is om de lege status op te heffen.

Dropbox heeft een geweldig ontwerp met twee CTA-knoppen. Wanneer een Dropbox-gebruiker geen mappen heeft, kunnen deze een nieuwe map maken of een voorbeeldmap toevoegen aan de pagina.

Aanmoedigen van gebruikersactiviteit

Oproep tot actieknoppen zijn de actieve elementen maar onthoud dat pagina-kopie wordt uitgelegd wat de gebruiker aan het doen is. Niemand klikt gewoon op de knoppen zonder te weten waarom.

De beste manier om activiteit aan te moedigen, is door een goede kopie op uw lege statuspagina te schrijven. Leid gebruikers door een contentstroom die gebruikersactiviteit over de hele applicatie stimuleert.

Deze lege staat van ModSpot is een schitterend voorbeeld van kwaliteitsontwerp en bemoedigende inhoud.

Pictogrammen worden gebruikt om aan te tonen wat de gebruiker moet toevoegen aan de site. Een pijl wijst naar de knop die gebruikers zouden moeten aanklikken, samen met wat bemoedigend gedrag. Dit is een briljant leeg ontwerp met alle elementen die je zou verwachten.

Evenzo biedt de lege Gumroad-status twee opties voor verschillende potentiële acties. Gebruikers kunnen een digitaal product of een fysiek product toevoegen om te beginnen met verkopen.

Andere links op de pagina leiden naar hulpgidsen en contactgegevens. Alles is ongelooflijk gestroomlijnd en sluit mooi aan.

Web versus mobiele apps

Lege statuspagina's voor alle media moeten vergelijkbare ontwerptrends volgen. Maar er zijn enkele kleine verschillen met de gebruikerservaring op een desktop in vergelijking met een smartphone.

Websites op grotere schermen heb meer ruimte voor extra knoppen. Webpagina's kunnen ook hebben grotere navigatie-elementen die mensen elders naar de site kunnen trekken.

Dit kan worden opgelost in een vergelijkbare stijl als Nusii op hun voorstellenpagina doet. Als er geen voorstellen zijn, wordt de gebruiker geleid naar de “voorstellen toevoegen” knop in de bovenste navigatiebalk.

Mobiele apps kunnen soortgelijke problemen hebben, maar de schermen zijn veel kleiner. Dit maakt het een stuk eenvoudiger om gebruikers direct naar de actie te trekken.

Ik vind het het beste om mobiele apps eenvoudiger te houden met minder opties. Gebruik visuals als eye candy om actie aan te moedigen en wees op een zeer specifieke gebruikersstroom.

Lege voorbeelden van staatsontwerp

Misschien is de beste manier om iets te leren over leeg ontwerp van de staat enkele voorbeelden te bestuderen. De schitterende webgalerij emptystat.es beheert lege staatspagina's van verschillende websites tot mobiele applicaties.

Ik heb met de hand een aantal voorbeelden uitgekozen die uw aandacht verdienen en die het beste illustreren hoe leeg de staat is. Als u nog andere suggesties heeft, kunt u ons dit laten weten.

DigitalOcean Drijvende IP's