Sfat UX Luați în considerare statele golite

Stările goale sunt adesea o idee ulterioară pentru majoritatea designerilor. 

Pagina de pornire și coșul de plată, de exemplu, ar putea fi cea mai prioritată facilitate din restanțele dvs. - dar cum rămâne cu starea goală a acestor funcții? Cum ar trebui să fie abordate??

Următorul articol nu este cuprinzător sau trebuie făcut "prin orice mijloace. În schimb, conturează trei tipuri comune de stare goală: 

  1. prima utilizare
  2. eliminat-utilizator
  3. eroare

Vom analiza un exemplu bun al fiecăruia, vom discuta de ce funcționează și cum ați putea implementa idei similare sau să vă extindeți în funcție de situația dvs. unică.

1. Prima utilizare

Următorul ecran este din aplicația BBCNews. Este un exemplu de ecran în care utilizatorul folosește aplicația pentru prima dată și are nevoie de o anumită direcție pentru a "începe". 

Este eficient pe câteva nivele:

Acesta oferă explicații clare. Această stare goală explică ce face funcția curentă și vă oferă un buton, care indică cum să începeți. În acest caz, utilizatorul trebuie să adauge subiecte pentru a-și crea propria feed de știri personale. 

Acesta oferă un link pentru a popula această caracteristică. Butonul, care duce utilizatorul la pagina unde poate popula ecranul dat, este o caracteristică utilă. Salvează utilizatorul de a naviga acasă și de a încerca să găsească ecranul prin alte mijloace.

Deci, cum ai putea implementa tu ceva similar?

Furnizați o secvență de îmbarcare. În cazul în care utilizatorul utilizează pentru prima dată aplicația dvs. web, puteți lua în considerare o scurtă trecere pentru a vă ajuta să atingeți viteza. Cu toate acestea, rețineți că acest lucru poate împiedica utilizatorul expert și intermediar. Luați în considerare doar o prezentare o dată și apoi difuzarea informațiilor în secțiunea de ajutor. 

2. Utilizatorul a fost șters

Următoarea pagină este lista de dorințe din magazinul Apple iTunes. Este un exemplu al unei pagini în care utilizatorul nu are nimic sau au eliminat totul din lista lor.

Ce face ca această pagină goală să fie eficientă?

Ceva este mai bun decât nimic. Această listă de dorințe nu înseamnă doar a scoate nimic. Oferă utilizatorului un indiciu pe care trebuie să îl adauge la listă. Icoana este mare și îndrăzneață, totuși subtilă. Starea voastră goală ar trebui să atragă atenția utilizatorilor - nu aveți nimic aici! - dar, de asemenea, să indicați goliciunea, de ex. folosind culori mutate etc.. 

Direct și direct la punct. Este tentant să introduci un text de puf în starea ta goală ... poate un citat de cineva. Cu toate acestea, de cele mai multe ori, cea mai bună opțiune este doar de a fi direct și direct la punct, așa cum se arată în exemplul de mai sus "Nu ați adăugat nimic la lista de dorințe".

Această pagină de dorințe ar fi putut fi îmbunătățită, deci ce ar trebui să învățăm din aceasta?

Oferiți un exemplu. De asemenea, puteți să vă gândiți să adăugați un exemplu despre cum poate arăta o stare plină. Acest lucru este probabil mai relevant pentru mediul de lucru decât interfețele mobile, deoarece aveți mai multă realitate pe ecran cu care să lucrați. 

3. Eroare

Următoarea pagină de eroare face parte din browserul Google Chrome. Este un exemplu de situație în care utilizatorul primește altceva decât starea dorită. În acest caz, acestea nu pot conecta la internet.

Acest grafic a devenit cunoscut milioane, dar ce face să funcționeze?

Este potrivit pentru situație. Funcționează deoarece pictograma este subtilă și potrivită gravității problemei. Este comun să mergeți pentru o cruce sau un "X" și asta e bine; este o modalitate bună de a atrage atenția unora, dar aici doriți doar să informați utilizatorul că ceva este rău. Nu trebuie să țipați despre asta cu o pictogramă sau un mesaj deasupra.

Oferă mai multe informații. Nu trebuie să lăsați utilizatorii dvs. sigur de ce să faceți în continuare. În acest caz, Chrome a furnizat o Mai Mult pentru a ajuta la depanarea problemei. În majoritatea cazurilor, utilizatorul va fi probabil conștient că trebuie să-și schimbe WiFi-ul, să-și reinițializeze modemul sau să-și apeleze furnizorul de internet, dar aceasta adaugă valoare acelor utilizatori care au nevoie de mai multe informații.

Ce zici de a te aplica singur?

Luați în considerare cât de importante sunt mesajele dvs. de eroare. Cât de gravă este eroarea? Dacă este esențială pentru utilizator, atunci va trebui să vă atrageți atenția cu culori puternice și cu o ierarhie clară. Luați în considerare limba utilizată și empatizați-o cu poziția utilizatorului. O pictogramă amuzantă care face lumina unei situații frustrante ar putea face lucrurile mai rău!

Concluzie

Acest articol ți-a oferit un bun cadru de pornire care trebuie luat în considerare atunci când privim la stări goale. Luați în considerare tipul de stare goală pe care o proiectați și modalitățile cele mai potrivite pentru a structura pagina în funcție de situația utilizatorilor și de obiectivele acestora.

Câteva reguli bune de bază includ:

  • Completați un conținut relevant care este simplu și direct la punct
  • Explicați ceea ce face caracteristica curentă și oferiți utilizatorului acces ușor pentru a lua măsuri
  • Furnizați exemple de stări de sfârșit dorite, dacă este posibil (adică ce arată o pagină întreagă)
  • Asigurați-vă că utilizatorii dvs. știu ce pași următori ar trebui să fie
  • Utilizați pictogramele, culoarea, limba și ierarhia potrivită pentru mesajul pe care îl comunicați

Resurse suplimentare

  • emptystat.es Exemple de stări goale în designul UI
  • Nu ma face sa ma gandescO utilizare clasică citită de Steve Krug 
  • Despre Face 3 Un ghid de interfață pentru utilizatori
  • www.useronboard.com Închiderea teardowns și exemple