Sådan designes tomme statsider til websites og mobilapps

Tomme statssider er mindre kendte designelementer med en væsentlig rolle i brugeroplevelsen. I sin enkleste form er tomme stater sidelayouter ses, når en bruger først besøger en side, hvor der ikke er noget indhold tilgængeligt.

Dette kan omfatte mobile applikationer, sociale netværk eller endog tomme blogkategorier. Formålet er at levere en tom side som ligner en ikke-tom side. Besøgende bør genkende manglen på indhold som et middel til forestående indhold.

Jeg vil gerne dække, hvordan tomme statsider fungerer, og hvorfor de er så vigtige. Interface designere bør overveje disse punkter og forsøge at anvende dem til tomme stater, når det er relevant. Men for at komme i gang lad os undersøge, hvordan en tom tilstand fungerer, og hvordan den giver værdi til grænsefladen.

Værdien af tomme lande

Skønheden i en stor tom tilstandsdesign er i enkelheden. Tomme sider forklarer hvad skal der være på siden når der er noget indhold. Det kan være passivt som en tom indbakke, eller det kan være aktivt at vente på brugeren som et tomt Twitter-feed.

Blank sider er kedelige, kedelige og endda forvirrende. Tomme stater give vejledning for at hjælpe brugerne med at forstå, hvad de ser på. Selv om det er en tom side, hjælper den ekstra sammenhæng.

Tomme stater giver også en følelse af “friskhed” med nye konti, der ikke har eksisterende data.

Denne test udført af Redditor Bambo_Ocha kontrollerede 20 forskellige apps til tomme state designs. Forskellige design stilarter forekom med CTA knapper, prøve data, og endda korte tutorial walkthroughs.

Apps, der trives i en brugerbase, bør designe tomme stater, som tilskynde brugeraktivitet. Denne aktivitet kan være at udgive indhold, tilføje venner, uploade billeder, eller hvad appen blev lavet til. Skærmbilledet nedenfor fra Tookapic er et godt eksempel.

Men tomme stats sider har stadig værdi, selv når der ikke er brug for noget. Disse designs er primært lavet til at give information.

Statisk information er lige så værdifuld, og det er ikke i sig selv dårlig at have en tom tilstand. For eksempel viser dette sidedesign ingen aktuelle metrics fra et sporingspanel til dashboard. Brugeren vil muligvis tilføje nogle målinger, men det er ikke dårligt at lade bindestreget være tomt.

Lignende statiske design kan virke godt for tomme blogarkiver eller tomme meddelelsesmapper. Det er helt acceptabelt at have ingen beskeder at vise. Men siden skal ikke være helt tom uden kontekst heller.

Vital Side Elements

Det vigtigste element på en tom tilstandsside er sammenhæng. Dette kan komme i form af grafik, tekst eller begge dele. Du vil informere brugere, hvorfor siden er tom, og hvilke slags data der kan være der (e-mails, tweets, vensprofiler osv.).

Og mens tekst er det primære kommunikationsmedium på internettet, kan du ikke overse værdien af grafik og ikoner.

DigitalOcean har et strålende dashboard med tom tilstandsgrafik, der illustrerer deres punkt klart. Deres firma bruger kreativ branding og ren typografi, så det er ingen overraskelse, at deres tomme stats sider er så illustrative.

Et andet vigtigt aspekt ved tom tilstand design er Ring til handlingsknap. Dette er typisk designet som en knap, selvom hyperlinks fungerer også fint.

Målet er at hjælpe brugerne med at handle og rydde op i deres tomme tilstand. Uanset om dette kræver at tilføje data eller træffe foranstaltninger på webstedet, guide CTA'er brugerne til det næste trin, der er nødvendigt for at rydde op i den tomme tilstand.

Dropbox har et godt design med to CTA knapper. Når en Dropbox-bruger ikke har nogen mapper, kan de enten oprette en ny mappe eller tilføje en prøvemappe på siden.

Tilskyndelse til brugeraktivitet

Kald til handlingsknapper er de aktive elementer, men husk at sidekopieringen forklarer hvad brugeren laver. Ingen klikker bare knapper uden at vide hvorfor.

Den bedste måde at tilskynde til aktivitet er at skrive en god kopi på din tom tilstandsside. Guide brugere gennem et indholdsflow, der tilskynder brugeraktivitet over hele applikationen.

Denne tomme tilstand ved ModSpot er et glimrende eksempel på kvalitetsdesign og opmuntrende indhold.

Ikoner bruges til at vise, hvad brugeren skal føje til webstedet. En pil peger på knappen, som brugerne skal klikke sammen med nogle tekstopmuntrende adfærd. Dette er et strålende tomt state design med alle de elementer, du kunne forvente.

På samme måde tilbyder Gumroad-tilstanden to muligheder, der er målrettet mod forskellige potentielle handlinger. Brugere kan tilføje et digitalt produkt eller et fysisk produkt for at komme i gang med at sælge.

Andre links på siden fører til hjælpelinjer og kontaktoplysninger. Alt er utrolig strømlinet og binder sammen pænt.

Web vs Mobile Apps

Tomme statssider for alle medier skal følge lignende designtendenser. Men der er nogle mindre forskelle med brugeroplevelse på et skrivebord i forhold til en smartphone.

Websites på større skærme har mere plads til ekstra knapper. Websider kan også have større navigationselementer som kan tegne folk andre steder på stedet.

Dette kan løses i en lignende stil som Nusii gør på deres forslagsside. Hvor der ikke er nogen forslag, ledes brugeren til “tilføj forslag” knappen i øverste navigationslinje.

Mobilapps kan have lignende problemer, men skærme er meget mindre. Dette gør det meget lettere at tegne brugere direkte ind i handlingen.

Jeg finder det bedst at holde mobilapps enklere med færre muligheder. Brug billeder som eye candy for at tilskynde til handling og pege på en meget specifik brugerflow.

Empty State Design Eksempler

Måske er den bedste måde at lære om tom state design at studere nogle eksempler på. Det strålende webgalleri tomstat.es kuraterer tomme stats sider fra forskellige hjemmesider til mobile applikationer.

Jeg har håndplukket nogle eksempler, som fortjener din opmærksomhed, og som illustrerer bedst statligt design. Hvis du har andre forslag, er du velkommen til at lade os vide.

DigitalOcean Flydende IP'er