Share
Lege toestanden zijn vaak een bijzaak voor de meeste ontwerpers.
De startpagina en betalingskar kunnen bijvoorbeeld de meest geprioriteerde functie in uw backlog zijn, maar hoe zit het met de lege status van deze functies? Hoe moeten ze worden aangepakt??
Het volgende artikel is niet volledig, of een "moet doen" op alle mogelijke manieren. In plaats daarvan schetst het drie veel voorkomende typen lege staat:
We zullen een goed voorbeeld van elk bekijken, bespreken waarom het werkt en hoe u vergelijkbare ideeën kunt implementeren of uitbreiden op basis van uw unieke situatie.
Het volgende scherm is van de BBCNews-app. Het is een voorbeeld van een scherm waarbij de gebruiker de app voor de eerste keer gebruikt en die wat richting nodig heeft om "aan de slag" te gaan.
Het is effectief op een aantal niveaus:
Het biedt duidelijke uitleg. Deze lege status legt uit wat de huidige functie doet en geeft u een knop, die aangeeft hoe u aan de slag kunt gaan. In dit geval moet de gebruiker onderwerpen toevoegen om zijn eigen persoonlijke nieuwsfeed te maken.
Het biedt een link om die functie te vullen. De knop, die de gebruiker naar de pagina brengt waar ze het gegeven scherm kunnen vullen, is een handige functie. Het bespaart de gebruiker die naar huis moet navigeren en probeert het scherm op een andere manier te vinden.
Dus hoe zou je zelf iets dergelijks kunnen implementeren??
Geef een on-board volgorde. Als de gebruiker uw web-app voor de eerste keer gebruikt, kunt u overwegen een walk-through uit te voeren om ze op weg te helpen. Houd er echter rekening mee dat dit de ervaren en gemiddelde gebruiker kan frustreren. Overweeg het slechts eenmaal te laten zien en vervolgens de informatie in uw helpsectie te verspreiden.
De volgende pagina is de Wish List van de Apple iTunes Store. Het is een voorbeeld van een pagina waar de gebruiker niets heeft, of ze hebben alles uit hun lijst gewist.
Wat maakt deze lege pagina effectief??
Iets is beter dan niets. Dit verlanglijstje bevat niet alleen niets. Het geeft de gebruiker een signaal dat hij nodig heeft om een item aan de lijst toe te voegen. Het pictogram is groot en vet, maar toch subtiel. Je lege staat moet de aandacht van de gebruikers trekken - je hebt hier niets! - maar wees ook indicatief voor leegte, bijvoorbeeld gebruik van gedempte kleuren enz.
Rechtstreeks en recht naar het punt. Het is verleidelijk om een of andere donzige tekst in je lege staat te plaatsen ... misschien een citaat van iemand. Meestal is de beste optie echter om direct en direct te zijn zoals in het bovenstaande voorbeeld "Je hebt niets toegevoegd aan je verlanglijst".
Deze wishlist-pagina had verbeterd kunnen worden, dus wat moeten we ervan leren?
Geef een voorbeeld. Je kunt ook denken aan het toevoegen van een voorbeeld van hoe een gevulde staat er uit zou kunnen zien. Dit is waarschijnlijk relevanter voor desktop dan mobiele interfaces, omdat je een beetje meer schermruimte hebt om mee te werken.
De volgende foutpagina is onderdeel van de Google Chrome-browser. Het is een voorbeeld van een situatie waarin de gebruiker iets anders krijgt dan de gewenste staat. In dit geval kunnen ze geen verbinding maken met internet.
Deze afbeelding is miljoenen bekend geworden, maar wat maakt het werk?
Het is geschikt voor de situatie. Het werkt omdat het pictogram subtiel is en past bij de ernst van het probleem. Het is gebruikelijk om voor een kruis of een "X" te gaan en dat is prima; het is een goede manier om iemands aandacht te trekken, maar hier wil je de gebruiker gewoon informeren dat er iets mis is. Je hoeft er niet over te gillen met een over-the-top icoon of bericht.
Het biedt meer informatie. Je moet je gebruikers nooit onzeker maken over wat ze vervolgens moeten doen. In dit geval heeft Chrome een Meer om het probleem op te lossen. In de meeste gevallen zal de gebruiker waarschijnlijk weten dat ze hun wifi moeten inschakelen, hun modem moeten resetten of hun internetprovider moeten bellen, maar dit voegt waarde toe aan die gebruikers die meer informatie nodig hebben.
Hoe zit het met het toepassen van dit zelf?
Overweeg hoe kritisch uw foutmeldingen zijn. Hoe erg is de fout? Als het voor de gebruiker van cruciaal belang is, moet je echt hun aandacht trekken met krachtige kleuren en een duidelijke hiërarchie. Overweeg de gebruikte taal en empathiseer met de positie van de gebruiker. Een grappig pictogram dat licht maakt van een frustrerende situatie kan de situatie alleen maar erger maken!
Dit artikel heeft je een goed uitgangskader gegeven om te overwegen wanneer je naar lege staten kijkt. Overweeg welk type lege staat u ontwerpt en de meest geschikte manieren om de pagina in te delen op basis van de situatie van uw gebruikers en hun doelen.
Een paar goede vuistregels zijn onder meer:
Accentsconagua