Så här utformar du tomma statussidor för webbplatser och mobila applikationer

Tomma statssidor är mindre kända designelement med en betydande roll i användarupplevelse. I sin enklaste form är tomma stater Sidlayouter som ses när en användare först besöker en sida där inget innehåll är tillgängligt.

Det kan innehålla mobilapplikationer, sociala nätverk eller tom tomma bloggkategorier. Syftet är att leverera en tom sida som ser ut som en icke-tom sida. Besökare borde erkänna bristen på innehåll som ett medel för överhängande innehåll.

Jag skulle vilja täcka hur tomma statliga sidor fungerar och varför de är så viktiga. Gränssnittsdesigners bör överväga dessa punkter och försöka tillämpa dem på tomma tillstånd när det är lämpligt. Men för att komma igång, låt oss undersöka hur ett tomt tillstånd fungerar och hur det ger värde till gränssnittet.

Värdet av tomma stater

Skönheten i en stor tom statlig design är i enkelhet. Tomma sidor förklarar vad borde vara på sidan en gång finns det något innehåll. Det kan vara passivt som en tom inkorg, eller det kan vara aktivt att vänta på användaren som ett tomt Twitter-flöde.

Tomma sidor är tråkiga, tråkiga och till och med förvirrande. Tomma stater bistå med vägledning för att hjälpa användarna att förstå vad de tittar på. Även om det är en tom sida hjälper det extra sammanhanget.

Tomma stater ger också en känsla av “friskhet” med nya konton som inte har några befintliga uppgifter.

Detta test gjort av Redditor Bambo_Ocha kontrollerade 20 olika appar för tomma tillståndsdesign. Olika designstilar uppstod med CTA-knappar, provdata och till och med korta handledningsturneringar.

Appar som trivs på en användargränssnitt bör utforma tomma stater som uppmuntra användaraktivitet. Den här aktiviteten kan vara att publicera innehåll, lägga till vänner, ladda upp bilder eller vad som helst för appen. Skärmen nedan från Tookapic är ett bra exempel.

Men tomma statssidor har fortfarande värde även när ingen åtgärd behövs. Dessa mönster är huvudsakligen gjorda för att ge information.

Statisk information är lika värdefull och det är inte i sig dåligt att ha en tom stat. Till exempel visar den här siddesignen inga aktuella statistik från en kontrollpanel för spårningsapplikationer. Användaren kanske vill lägga till några mätvärden, men det är inte illa att lämna bindestrecket tomt.

Liknande statiska mönster kan fungera bra för tomma bloggarkiv eller tomma meddelandemapper. Det är helt acceptabelt att inga meddelanden ska visas. Men sidan borde inte vara helt tom utan något kontext.

Viktiga sidelement

Det viktigaste elementet på en tom statssida är sammanhang. Detta kan komma i form av grafik, text eller båda. Du vill informera användarna varför sidan är tom och vilken typ av data som kan vara där (e-postmeddelanden, tweets, vänprofiler, etc.).

Och medan text är det primära kommunikationsmediet på webben, kan du inte förbise värdet av grafik och ikoner.

DigitalOcean har en lysande instrumentpanel med tom statlig grafik som illustrerar sin punkt tydligt. Deras företag använder sig av kreativa varumärken och ren typografi så det är ingen överraskning att deras tomma statssidor är så illustrativa.

En annan viktig aspekt av tom state design är Call to Action-knappen. Detta är typiskt utformat som en knapp även om hyperlänkar fungerar bra också.

Målet är att hjälpa användare att vidta åtgärder och rensa upp sin tomma tillstånd. Om det här krävs att du lägger till data eller vidtar åtgärder på webbplatsen, guidar CTAs användarna till nästa steg som behövs för att rensa upp den tomma staten.

Dropbox har en bra design med två CTA-knappar. När en Dropbox-användare inte har några mappar kan de antingen skapa en ny mapp eller lägga till en provmapp på sidan.

Uppmuntra användaraktivitet

Ring till handlingsknappar är de aktiva elementen, men kom ihåg att sidkopia förklarar vad användaren gör. Ingen klickar bara på knappar utan att veta varför.

Det bästa sättet att uppmuntra verksamheten är att skriva en bra kopia på din tomma tillståndssida. Led användarna genom ett innehållsflöde som uppmuntrar användaraktivitet över hela applikationen.

Detta tomma tillstånd av ModSpot är ett briljant exempel på kvalitetsdesign och uppmuntrande innehåll.

Ikoner används för att visa vad användaren ska lägga till på webbplatsen. En pil pekar på knappen användarna ska klickar på med lite text uppmuntrande beteende. Det här är en strålande tom state-design med alla de element du kan förvänta dig.

På samma sätt erbjuder Gumroad-tomma staten två alternativ som riktar sig till olika potentiella åtgärder. Användare kan lägga till en digital produkt eller en fysisk produkt för att komma igång med att sälja.

Andra länkar på sidan leder till hjälpguider och kontaktuppgifter. Allt är otroligt strömlinjeformat och binder samman snyggt.

Web vs Mobile Apps

Tomma statssidor för alla medier bör följa liknande designtrender. Men det finns några mindre skillnader med användarupplevelse på skrivbordet jämfört med en smartphone.

Webbplatser på större skärmar har mer utrymme för extra knappar. Webbsidor kan också ha större navigeringselement som kan dra personer på andra ställen på platsen.

Detta kan lösas i en liknande stil som Nusii gör på deras förslagssida. Om det inte finns några förslag, guidas användaren till “lägga till förslag” knappen i den övre navigeringsfältet.

Mobila appar kan ha liknande problem men skärmarna är mycket mindre. Detta gör det mycket lättare att dra användare direkt in i åtgärden.

Jag tycker det är bäst att hålla mobilappar enklare med färre alternativ. Använd bilder som ögonsocker för att uppmuntra åtgärden och peka på ett mycket specifikt användarflöde.

Empty State Design Exemplar

Kanske är det bästa sättet att lära sig om tom state design att studera några exempel. Det briljanta webbgalleriet tomstat.es kuraterar tomma tillståndssidor från olika webbplatser till mobila applikationer.

Jag har handplockat några exempel som förtjänar din uppmärksamhet som bäst illustrerar den tomma tillståndsdesignen. Om du har några andra förslag är du välkommen att meddela oss.

DigitalOcean Floating IPs