Slik lager du tomme statussider for nettsteder og mobilapps

Tomme statssider er mindre kjente designelementer med en betydelig rolle i brukeropplevelsen. I sin enkleste form er tomme stater sidelayouter sett når en bruker først besøker en side der det ikke er noe innhold tilgjengelig.

Dette kan omfatte mobilapplikasjoner, sosiale nettverk eller tom blogkategorier. Hensikten er å levere en tom side som ser ut som en ikke-tom side. Besøkende bør gjenkjenne mangelen på innhold som et middel til forestående innhold.

Jeg vil gjerne dekke hvordan tomme statssider fungerer, og hvorfor de er så viktige. Grensesnitt designere bør vurdere disse punktene og forsøke å bruke dem til tomme stater når det er hensiktsmessig. Men for å komme i gang, la oss undersøke hvordan en tom tilstand fungerer og hvordan den gir verdi til grensesnittet.

Verdien av tomme stater

Skjønnheten i en flott, tom tilstandsdesign er i enkelhet. Tomme sider forklarer hva skal være på siden når det er noe innhold. Det kan være passivt som en tom innboks, eller det kan være aktivt å vente på brukeren som en tom Twitter-feed.

Blanke sider er kjedelig, kjedelig og til og med forvirrende. Tomme stater gi veiledning for å hjelpe brukerne å forstå hva de ser på. Selv om det er en tom side, hjelper den ekstra konteksten.

Tomme stater gir også en følelse av “friskhet” med nye kontoer som ikke har eksisterende data.

Denne testen som ble gjort av Redditor Bambo_Ocha, sjekket 20 forskjellige apper for tomme tilstandsdesign. Ulike design stiler skjedde med CTA knapper, prøve data, og til og med korte opplærings gjennomganger.

Apper som trives på en userbase bør designe tomme stater som oppmuntre brukeraktivitet. Denne aktiviteten kan publisere innhold, legge til venner, laste opp bilder, eller hva appen ble laget for. Skjermen nedenfor fra Tookapic er et godt eksempel.

Men tomme statssider har fortsatt verdi selv når det ikke trengs noe. Disse designene er primært laget for å gi informasjon.

Statisk informasjon er like verdifull og det er ikke iboende dårlig å ha en tom tilstand. For eksempel viser dette sidedesignet ingen nåværende beregninger fra et sporingspanelets oversiktspanel. Brukeren vil kanskje legge til noen beregninger, men det er ikke dårlig å la dashbordet være tomt.

Lignende statiske konstruksjoner kan fungere bra for tomme blogarkiver eller tomme meldingsmapper. Det er helt akseptabelt å ikke ha noen meldinger å vise. Men siden skulle ikke være helt tom uten kontekst heller.

Vital Side Elements

Det viktigste elementet på en tom tilstandsside er kontekst. Dette kan komme i form av grafikk, tekst eller begge deler. Du vil informere brukere om hvorfor siden er tom og hva slags data kan være der (e-post, tweets, vennprofiler, etc.).

Og mens tekst er det primære kommunikasjonsmediet på nettet, kan du ikke overse verdien av grafikk og ikoner.

DigitalOcean har et glimrende dashbord med tom statlig grafikk som illustrerer deres poeng tydelig. Deres firma bruker kreativ branding og ren typografi, så det er ingen overraskelse at de tomme statssidene er så illustrative.

Et annet viktig aspekt ved tom tilstandsdesign er Ring til handlingsknapp. Dette er vanligvis utformet som en knapp, selv om hyperkoblinger fungerer også bra.

Målet er å hjelpe brukerne til å gjøre noe, og rydde opp sin tomme tilstand. Om dette krever at du legger til data eller gjør noe på nettstedet, veileder CTAs brukerne til neste trinn som er nødvendig for å rydde opp den tomme tilstanden.

Dropbox har en flott design med to CTA knapper. Når en Dropbox-bruker ikke har noen mapper, kan de enten opprette en ny mappe eller legge til en prøvemappe på siden.

Oppmuntre brukeraktivitet

Ring til handlingsknapper er de aktive elementene, men husk at sidekopien forklarer hva brukeren gjør. Ingen klikker bare knapper uten å vite hvorfor.

Den beste måten å oppmuntre til aktivitet, er å skrive en god kopi på din tomstatsside. Guide brukere gjennom en innholdsstrøm som oppfordrer brukeraktivitet over hele applikasjonen.

Denne tomme tilstanden ved ModSpot er et glimrende eksempel på kvalitetsdesign og oppmuntrende innhold.

Ikoner brukes til å vise hva brukeren bør legge til siden. En pil peker på knappen brukerne bør klikke sammen med litt tekstoppmuntrende oppførsel. Dette er en strålende tom state design med alle elementene du kan forvente.

På samme måte tilbyr Gumroad-tømmestaten to alternativer som målretter mot ulike potensielle handlinger. Brukere kan legge til et digitalt produkt eller et fysisk produkt for å komme i gang med å selge.

Andre lenker på siden fører til hjelpelinjer og kontaktdetaljer. Alt er utrolig strømlinjeformet og binder sammen pent.

Web vs Mobile Apps

Tomme statssider for alle medier bør følge lignende designtrender. Men det er noen mindre forskjeller med brukeropplevelsen på et skrivebord i forhold til en smarttelefon.

Nettsteder på større skjermer Har mer plass for ekstra knapper. Websider kan også ha større navigasjonselementer som kan trekke folk andre steder på stedet.

Dette kan løses i en lignende stil som Nusii gjør på deres forslagsside. Når det ikke er noen forslag, blir brukeren veiledet til “legg til forslag” knappen i toppnavigasjonslinjen.

Mobilapper kan ha lignende problemer, men skjermene er mye mindre. Dette gjør det mye lettere å tegne brukere rett inn i handlingen.

Jeg synes det er best å holde mobilappene enklere med færre alternativer. Bruk visualer som øyeffi for å oppmuntre til handling og peke mot en svært spesifikk brukerflyt.

Empty State Design Eksempler

Kanskje den beste måten å lære om tom state design er å studere noen eksempler. Det briljante webgalleriet tomstat.es kuraterer tømmesider fra ulike nettsteder til mobilapplikasjoner.

Jeg har håndplukket noen eksempler som fortjener din oppmerksomhet som best illustrerer tom tilstandsdesign. Hvis du har andre forslag, er du velkommen til å gi oss beskjed.

DigitalOcean Floating IPs