Kako dizajnirati prazne stranice za web stranice i mobilne aplikacije

Prazne stranice stanja manje su poznati elementi dizajna koji imaju značajnu ulogu u korisničkom iskustvu. U svom najjednostavnijem obliku, prazna stanja su izgleda stranica kada korisnik prvi put posjeti stranicu na kojoj nema sadržaja.

To može uključivati mobilne aplikacije, društvene mreže ili čak prazne kategorije blogova. Svrha je dostaviti praznu stranicu izgleda kao ne-praznu stranicu. Posjetitelji bi trebali prepoznati nedostatak sadržaja kao sredstvo predstojećeg sadržaja.

Želio bih pokriti kako prazne stranice funkcioniraju i zašto su tako važne. Dizajneri sučelja trebali bi razmotriti te točke i pokušati ih primijeniti na prazna stanja kad god je to prikladno. No, za početak, razmotrimo kako funkcionira prazna država i kako ona daje vrijednost sučelju.

Vrijednost praznih stanja

Ljepota velikog dizajna praznog stanja je u jednostavnosti. Prazne stranice objašnjavaju što bi trebalo biti na stranici jednom postoji neki sadržaj. Može biti pasivna kao prazna ulazna pošta ili možda aktivno čeka korisnika kao prazan Twitter feed.

Prazne stranice su dosadne, dosadne, pa čak i zbunjujuće. Prazna stanja dati smjernice kako biste korisnicima pomogli razumjeti što gledaju. Iako je to prazna stranica, dodatni kontekst pomaže.

Prazna stanja također daju osjećaj “svježina” s novim računima koji nemaju postojeće podatke.

Ovaj test koji je izvršio Redditor Bambo_Ocha provjerio je 20 različitih aplikacija za prazne dizajne. Različiti stilovi dizajna pojavili su se s CTA gumbima, uzorcima podataka, pa čak i kratkim uputama za učenje.

Aplikacije koje napreduju na korisničkoj bazi trebale bi dizajnirati prazna stanja poticati aktivnosti korisnika. Ta bi aktivnost mogla biti objavljivanje sadržaja, dodavanje prijatelja, prijenos fotografija ili ono za što je aplikacija napravljena. Zaslon ispod Tookapica je sjajan primjer.

No stranice praznih država još uvijek imaju vrijednost čak i kada nije potrebna nikakva radnja. Ovi nacrti su prvenstveno napravljeni za pružanje informacija.

Statičke informacije su jednako vrijedne i nisu inherentno loše imati prazno stanje. Na primjer, ovaj dizajn stranice ne prikazuje trenutnu mjernu vrijednost s nadzorne ploče aplikacije za praćenje. Korisnik će možda htjeti dodati neke mjerne podatke, ali nije loše ostaviti praznu crticu.

Slični statični dizajni mogu dobro poslužiti za prazne arhive blogova ili prazne mape s porukama. Savršeno je prihvatljivo da nema poruka za prikaz. Ali stranica ne smije biti potpuno prazna i bez konteksta.

Vitalni elementi stranice

Najvažniji element na praznoj stranici je kontekst. To može biti u obliku grafike, teksta ili oboje. Želite obavijestiti korisnike zašto je stranica prazna i kakvi podaci mogu biti tamo (e-poruke, tweetovi, profili prijatelja itd.).

Iako je tekst primarni komunikacijski medij na webu, ne možete previdjeti vrijednost grafike i ikona.

DigitalOcean ima sjajnu nadzornu ploču s praznom grafikom koja jasno pokazuje njihovu točku. Njihova tvrtka koristi kreativno brendiranje i čistu tipografiju, tako da ne čudi da su njihove prazne stranice toliko ilustrativne.

Drugi ključni aspekt dizajna praznog stanja je gumb za poziv na radnju. Ovo je obično dizajnirano kao gumb iako hiperveze rade previše.

Cilj je pomoći korisnicima da poduzmu akcije i raščiste svoje prazno stanje. Bez obzira na to zahtijeva li dodavanje podataka ili poduzimanje radnji na web-lokaciji, CTA-i vode korisnike na sljedeći korak koji je potreban za čišćenje praznog stanja.

Dropbox ima izvrstan dizajn s dva CTA gumba. Kad god Dropbox korisnik nema mape, mogu stvoriti novu mapu ili dodati mapu uzorka na stranicu.

Poticanje aktivnosti korisnika

Gumbi poziva na akciju aktivni su elementi, ali zapamtite da kopija stranice objašnjava što korisnik radi. Nitko ne klikne samo gumbe ne znajući zašto.

Najbolji način za poticanje aktivnosti je pisanje sjajne kopije na stranici praznog stanja. Vodite korisnike kroz tijek sadržaja koji potiče aktivnost korisnika nad cijelom aplikacijom.

Ovo prazno stanje od strane ModSpot-a je sjajan primjer kvalitetnog dizajna i poticajnog sadržaja.

Ikone služe za prikazivanje što korisnik treba dodati na web-lokaciju. Strelica pokazuje na gumb koji korisnici trebaju kliknuti zajedno s nekim poticanjem ponašanja teksta. Ovo je sjajan dizajn praznog stanja sa svim elementima koje očekujete.

Slično tome, prazno stanje Gumroada nudi dvije opcije koje ciljaju na različite potencijalne akcije. Korisnici mogu dodati digitalni proizvod ili fizički proizvod za početak prodaje.

Ostale veze na stranici vode do vodiča za pomoć i pojedinosti o kontaktu. Sve je nevjerojatno racionalno i lijepo povezano.

Web-aplikacije u odnosu na mobilne aplikacije

Prazne državne stranice za sve medije trebaju slijediti slične trendove dizajna. No, postoje neke manje razlike s korisničkim iskustvom na radnoj površini u usporedbi s pametnim telefonom.

Web stranice na većim zaslonima imati više mjesta za dodatne gumbe. Web stranice također mogu imati veći navigacijski elementi koji mogu privući ljude na drugo mjesto.

To se može riješiti u sličnom stilu kao i Nusii na stranici njihovih prijedloga. Tamo gdje nema prijedloga, korisnik se vodi do “dodajte prijedloge” na gornjoj navigacijskoj traci.

Mobilne aplikacije mogu imati slične probleme, ali su zasloni mnogo manji. To ga čini puno lakše privući korisnike u akciju.

Smatram da je najbolje držati mobilne aplikacije jednostavnijim uz manje mogućnosti. Koristite vizualne efekte kao oku bombon za poticanje akcije i usmjerite se prema vrlo specifičnom korisničkom tijeku.

Primjeri dizajna praznog stanja

Možda je najbolji način za učenje o dizajnu praznog stanja proučavanje nekih primjera. Briljantna web galerija emptystat.es kurira prazne stranice s različitih web stranica na mobilne aplikacije.

Odabrao sam nekoliko primjera koji zaslužuju vašu pažnju i koji najbolje ilustriraju dizajn praznog stanja. Ako imate bilo kakvih drugih prijedloga, slobodno nas obavijestite.

Plutajuće IP adrese tvrtke DigitalOcean