Cum să creați pagini de stat goale pentru site-uri și aplicații mobile

Paginile de stare goale sunt elemente de design mai puțin cunoscute, cu un rol semnificativ în experiența utilizatorilor. În cea mai simplă formă, sunt stări goale layout-uri de pagină văzute atunci când un utilizator vizitează prima dată o pagină în care nu este disponibil niciun conținut.

Acestea pot include aplicații mobile, rețele sociale sau chiar categorii de bloguri goale. Scopul este de a oferi o pagină goală se pare ca o pagină ne-goală. Vizitatorii trebuie recunosc lipsa de conținut ca mijloc de conținut iminent.

Aș dori să aflu ce pagini de stare goale funcționează și de ce sunt atât de importante. Designerii de interfețe ar trebui să ia în considerare aceste puncte și să încerce să le aplice la stări goale ori de câte ori este cazul. Dar, pentru a începe, să examinăm cum funcționează o stare goală și cum furnizează o valoare interfeței.

Valoarea statelor goale

Frumusețea unui design mare de stare goală este în simplitate. Goliți paginile goale ce ar trebui să fie pe pagină odată ce există conținut. Poate fi pasiv ca o căsuță poștală goală sau poate aștepta în mod activ utilizatorul ca un feed Twitter gol.

Paginile goale sunt plictisitoare, plictisitoare și chiar derutante. Stări goale oferă îndrumare pentru a ajuta utilizatorii să înțeleagă la ce se uită. Chiar dacă este o pagină goală, contextul extra ajută.

Stările goale oferă, de asemenea, un sentiment de “prospeţime” cu conturi noi care nu au date existente.

Acest test efectuat de Redditor Bambo_Ocha a bifat 20 de aplicații diferite pentru desenele goale de stare. Diferite stiluri de design au avut loc cu ajutorul butoanelor CTA, a datelor de probă și chiar a scurtelor tutoriale.

Aplicațiile care se dezvoltă pe baza de utilizatori ar trebui să conceapă stări goale pe care le presupune încuraja activitatea utilizatorilor. Această activitate ar putea fi publicarea de conținut, adăugarea de prieteni, încărcarea fotografiilor sau pentru orice aplicație a fost creată. Ecranul de mai jos de la Tookapic este un exemplu excelent.

Dar paginile de stare goale au valoare încă și atunci când nu este necesară nicio acțiune. Aceste modele sunt în principal făcute pentru a furniza informații.

Informațiile statice sunt la fel de valoroase și nu este inerent rău să avem o stare goală. De exemplu, acest design de pagină nu afișează valori curente de la un tablou de bord al aplicației de urmărire. Utilizatorul poate dori să adauge unele valori, dar nu este rău să lăsați bordul gol.

Design-urile statice similare pot funcționa excelent pentru arhivele goale de pe blog sau pentru dosarele cu mesaje goale. Este perfect acceptabil să nu aveți mesaje de afișat. Dar pagina nu ar trebui să fie complet goală, fără niciun context.

Elemente de pagină vitale

Cel mai important element pe o pagină de stare goală este context. Acest lucru poate apărea sub formă de grafică, text sau ambele. Vrei să informezi utilizatorii de ce pagina este goală și ce fel de date ar putea fi acolo (e-mailuri, tweet-uri, profile de prieteni etc.).

Și în timp ce textul este mijlocul principal de comunicare de pe web, nu puteți trece cu vederea valoarea graficelor și a icoanelor.

DigitalOcean are un tablou de bord excelent, cu grafică de stare goală, care ilustrează în mod clar punctul lor. Compania lor folosește branding creativ și tipografie curată, astfel încât nu este deloc surprins că paginile lor goale de stare sunt atât de ilustrative.

Un alt aspect crucial al designului de stare goală este butonul de chemare la acțiune. Acest lucru este de obicei conceput ca un buton, deși hyperlink-urile funcționează prea bine.

Scopul este de a ajuta utilizatorii să ia măsuri și să-și clarifice starea lor goală. Indiferent dacă acest lucru necesită adăugarea de date sau luarea de măsuri în cadrul site-ului, CTA-urile îi ghidează pe utilizatori în etapa următoare necesară pentru a șterge starea goală.

Dropbox are un design minunat cu două butoane CTA. Ori de câte ori un utilizator Dropbox nu are dosare, acesta poate să creeze un folder nou sau să adauge un dosar eșantion pe pagină.

Încurajarea activității utilizatorilor

Butoanele pentru apelul la acțiune sunt elementele active, însă nu uitați că explică copia paginii ceea ce face utilizatorul. Nimeni nu face doar clic pe butoane fără să știe de ce.

Cea mai bună modalitate de a încuraja activitatea este să scrieți o copie mare pe pagina dvs. de stare goală. Ghidați utilizatorii printr-un flux de conținut care încurajează activitatea utilizatorilor în întreaga aplicație.

Această stare goală de către ModSpot este un exemplu strălucit de design de calitate și conținut favorabil.

Icoanele sunt folosite pentru a demonstra ce ar trebui să adauge utilizatorul pe site. O săgeată indică butonul pe care utilizatorii ar trebui să îl facă clic, împreună cu un text care încurajează comportamentul. Acesta este un design genial de stare goală, cu toate elementele pe care le-ați aștepta.

În mod similar, starea goală Gumroad oferă două opțiuni care vizează diferite acțiuni potențiale. Utilizatorii pot adăuga un produs digital sau un produs fizic pentru a începe să vândă.

Alte link-uri de pe pagină conduc la ajutarea ghidurilor și detaliilor de contact. Totul este incredibil de raționalizat și se leagă împreună frumos.

Aplicații Web vs. mobile

Pagina goală de stare pentru toate mediile trebuie să urmeze tendințe similare de design. Dar există unele diferențe minore cu experiența utilizatorului pe un desktop, comparativ cu un smartphone.

Site-uri web pe ecrane mai mari au mai mult spațiu pentru butoane suplimentare. Paginile web pot avea, de asemenea elemente de navigație mai mari care poate atrage oameni în altă parte pe site.

Acest lucru poate fi rezolvat într-un stil similar cu cel pe care Nusii îl face în pagina de propuneri. În cazul în care nu există propuneri, utilizatorul este îndrumat către “adăugați propuneri” în bara de navigare de sus.

Aplicațiile mobile pot avea probleme similare, însă ecranele sunt mult mai mici. Asta face mult mai ușor de a atrage utilizatorii chiar în acțiune.

Consider că este mai bine să păstrați aplicațiile mobile mai simple cu mai puține opțiuni. Folosiți vizuale ca bomboane ochi pentru a încuraja acțiunea și a îndrepta spre un flux de utilizator foarte specific.

Exemple de design empatice de stat

Poate cel mai bun mod de a învăța despre designul gol al stării este de a studia câteva exemple. Galeria glorioasă a webului emptystat.es curează paginile de stare goale de la diverse site-uri web la aplicații mobile.

Am selectat câteva exemple care merită atenția dvs., care ilustrează cel mai bine designul gol al stării. Dacă aveți alte sugestii, nu ezitați să ne anunțați.

IP-uri plutitoare DigitalOcean