Share
Tomma stater är ofta en eftertanke för de flesta designers.
Hemsidan och betalningsvagnen kan till exempel vara den mest prioriterade funktionen i din backlog-men vad sägs om de tomma tillstånden för dessa funktioner? Hur ska de hanteras?
Följande artikel är inte heltäckande, eller ett "måste" på något sätt. I stället skisserar det tre vanliga typer av tomma tillstånd:
Vi ska titta på ett bra exempel på var och en, diskutera varför det fungerar och hur du kan implementera liknande idéer eller expandera på det baserat på din unika situation.
Följande skärm är från BBC News app. Det är ett exempel på en skärm där användaren använder appen för första gången och behöver någon riktning för att "komma igång".
Det är effektivt på ett par nivåer:
Det ger en klar förklaring. Denna tomma status förklarar vad den aktuella funktionen gör och ger dig en knapp, vilket indikerar hur du kommer igång. I det här fallet måste användaren lägga till ämnen för att skapa sitt eget personliga nyhetsflöde.
Det ger en länk för att fylla i den funktionen. Knappen, som tar användaren till sidan där de kan fylla den angivna skärmen, är en praktisk funktion. Det sparar användaren att behöva navigera hem och försöka hitta skärmen på annat sätt.
Så hur kan du implementera något som liknar dig själv?
Ange en ombordstigningssekvens. Om användaren använder din webbapps för första gången kan du överväga en genomgång för att hjälpa dem att få fart. Men kom ihåg att detta kan frustrera experten och mellanmedlet. Överväg att bara visa den en gång och sedan sprida informationen i din hjälpavdelning.
Följande sida är önskelistan från Apple iTunes Store. Det är ett exempel på en sida där användaren inte har något, eller de har rensat allt från sin lista.
Vad gör den här tomma sidan effektiv?
Något är bättre än inget. Denna önskelista utger inte bara något. Det ger användaren en cue att de behöver lägga till ett objekt i listan. Ikonen är stor och fet, men ändå subtil. Din tomma stat borde ta tag i användarnas uppmärksamhet - du har ingenting här! -Men är också en indikation på tomhet, t.ex. använder dämpade färger etc.
Direkt och rakt mot punkten. Det är frestande att lägga in lite flufftext i ditt tomma tillstånd ... kanske ett citat av någon. Men det mesta är det bästa alternativet att bara vara direkt och rakt till den punkt som visas i exemplet ovan "Du har inte lagt till något i din önskelista".
Denna önskelista sida kunde ha blivit förbättrad, så vad ska vi lära av det?
Ge ett exempel. Du kan också tänka på att lägga till ett exempel på vad ett fyllt tillstånd kan se ut. Detta är nog mer relevant för skrivbord än mobila gränssnitt eftersom du har lite mer skärm fastigheter att arbeta med.
Följande fel sida är en del av Google Chrome-webbläsaren. Det är ett exempel på en situation där användaren får något annat än önskat tillstånd. I det här fallet kan de inte ansluta till internet.
Denna grafik har blivit bekant för miljontals, men vad får det att fungera?
Det är lämpligt för situationen. Det fungerar eftersom ikonen är subtil och lämplig för problemets allvar. Det är vanligt att gå för ett kors eller en "X" och det är bra. Det är ett bra sätt att ta tag i någons uppmärksamhet, men här vill du bara informera användaren om att något är fel. Du behöver inte skrika om det med en över ikonen eller meddelandet överst.
Det erbjuder mer information. Du får aldrig lämna dina användare osäker på vad du ska göra nästa. I det här fallet har Chrome tillhandahållit en Mer knappen för att hjälpa till med felsökning av problemet. I de flesta fall kommer användaren säkert att vara medveten om att de måste slå på wifi, återställa modemet eller ringa till sin internetleverantör, men det ger värde för de användare som behöver mer info.
Vad sägs om att tillämpa detta själv?
Tänk på hur kritiska dina felmeddelanden är. Hur dåligt är felet? Om det är kritiskt för användaren måste du verkligen fånga uppmärksamheten med starka färger och tydlig hierarki. Tänk på det språk som används och empati med användarens position. En rolig ikon som lyser av en frustrerande situation kan göra saker värre!
Denna artikel har gett dig ett bra startramverk att överväga när du tittar på tomma stater. Tänk på vilken typ av tomt tillstånd du utformar för och de lämpligaste sätten att layouta sidan baserat på användarnas situation och deras mål.
Några bra tumregler är:
Accentsconagua