Spinnerul tău de încărcare este un ucigaș UX! Iată o alternativă

Știm că urăști așteptarea. Toata lumea face.

Într-un studiu din 2017, Google a descoperit că:

• Timpii de încărcare de 1-3 secunde au crescut ratele de respingere cu 32%.
• Timpii de încărcare de 1-5 secunde au crescut ratele de respingere cu 90%.
• Timpii de încărcare de 1-6 secunde au crescut ratele de respingere cu 106%.

Oamenilor nu le place să aștepte decât dacă există un motiv întemeiat, și cu cât așteptarea este mai lungă, cu atât motivul este mai puțin. De aceea, vizibilitatea stării sistemului este una dintre cele 10 euristici de utilizare ale Nielsen pentru proiectarea interfeței de utilizare. Vizibilitatea stării sistemului înseamnă:

„Designul ar trebui să țină întotdeauna utilizatorii informați despre ceea ce se întâmplă, printr-un feedback adecvat într-un interval de timp rezonabil.”

Și aici intervin indicatorii de încărcare. Un indicator bun de încărcare:

1. Permite utilizatorilor să știe că aplicația funcționează.
2. Face așteptarea tolerabilă.
3. Oferă utilizatorilor ceva la care să se uite.

Cel mai obișnuit indicator de încărcare în designul UI este – ați ghicit – rotorul de încărcare.

Dar uneori, trebuie să puneți la îndoială practica obișnuită pentru a depăși granițele și a descoperi soluții inovatoare. În acest caz, spinnerul de încărcare are defecte pe care designerii le-au trecut cu vederea mult prea mult timp.

Design Spinner: De ce încărcarea Spinners este nasol

În ceea ce privește încărcarea animațiilor, rotorul de încărcare este o alegere nefericită, în special pentru așteptările mai mari de 10 secunde. De ce?

Să începem cu o scurtă poveste.

Prima mea amintire despre un spinner de încărcare este de acum peste un deceniu, cu mult înainte de a afla despre experiența utilizatorului. În laboratorul de informatică al școlii am întâlnit lucrul fatidic și de temut pe care eu și prietenii mei am învățat să-l numim Roata Morții. Se pare că nu este un nume neobișnuit pentru cursorul de așteptare macOS.

Imagine a cursorului de așteptare macOS de la How-To Geek.

La fel ca Roata Morții, dispozitivele de încărcare nu oferă feedback - nici un semn de progres. Se învârtesc la infinit, ne spunând nimic despre progresele pe care le-a făcut sau nu o aplicație. Este frustrant pentru utilizatori și de-a dreptul provocator de furie atunci când vă grăbiți.

Te trezești să pui întrebări precum:

• Când se va termina încărcarea?
• Este aproape gata?
• Este rupt?

Dar întrebările tale rămân fără răspuns, așa că renunți.

Mai rău încă, filatorii încetinesc timpul.

Ați fost vreodată în mijlocul unui antrenament, disperat să se încheie un cronometru? Sau nerăbdător să scape de curs? În aceste cazuri, urmărirea ceasului și așteptarea fără scop face ca timpul să se târască. Spinnerii fac același lucru, minus beneficiul unei numărătoare inversă. Sunt ca și cum ar aștepta mâncarea într-un restaurant cu stomacul bubuitor; numai că nu știi dacă bucătarul a primit comanda ta.

Sigur, încărcarea animațiilor nu controlează de fapt timpul, dar plăcerea noastră față de o sarcină ne influențează percepția asupra acesteia. Când ne distrăm, ceasul se accelerează. Când urâm așteptarea, încetinește.

Și încă o dată, spinnerul încurajează utilizatorii să renunțe.

Mai mult decât atât, doriți ca conținutul dvs. să fie valoros pentru utilizatori - să le îndeplinească, dacă nu să le depășească, așteptările. Dacă, întâmplător, pagina nu este ceea ce sperau ei, frustrarea adăugată de a fi privit prea mult timp la un spinner sporește daunele.

Pentru a revizui, un spinner de încărcare:

1. Nu dă niciun semn de progres.
2. Nu reușește să răspundă la întrebările unui utilizator.
3. Face așteptarea să pară mai lungă decât este.
4. Nu pregătește așteptările utilizatorilor.

Opțiunile de animație de încărcare

Cel mai bun mod de a remedia frustrarea unui utilizator cu un spinner de încărcare este să eliminați acea frustrare de la început. Aceasta înseamnă reducerea timpului de așteptare până când acesta este inexistent sau utilizarea unui indicator de progres alternativ.

Din nou, un indicator bun de încărcare sau de progres:

1. Face percepția unui utilizator asupra timpului să se simtă mai rapidă.
2. Oferă senzația că aplicația progresează.

Cele două tipuri principale de indicatori de progres utilizați în proiectarea UX sunt indicatori de progres nedeterminați și indicatori de progres determinați. Factorul determinant este timpul.

Ideea este că folosești un rotisor de încărcare obișnuit când nu știi cât timp va dura încărcarea și folosești un indicator determinat, cum ar fi o bară de progres, când știi. O animație de încărcare determinată indică cât mai mult trebuie să aștepte un utilizator cu indicii cum ar fi procentul de finalizare, minute rămase sau o bară care se umple.

Indicator de progres nedeterminat vs determinat din Material Design.

Problema cu această strategie este că nu știi niciodată exact cât timp va dura ceva să se încarce. Puteți face o presupunere educată, dar cam atât. De aceea, mulți indicatori de numărătoare inversă vor conta astfel: 10 minute rămase, 9 minute rămase, 8 minute rămase, 7 minute rămase, 10 minute rămase, 8 minute rămase și așa mai departe. Se va finaliza încărcarea și va atinge 0 în cele din urmă, dar nu înainte de a duce utilizatorul într-o plimbare.

Cum să profitați la maximum de încărcarea animațiilor

Discutăm mai jos o soluție alternativă la spinner și bare de progres. Totuși, dacă ești hotărât să urmezi un traseu mai tradițional sau ai efectuat cercetări UX și ai descoperit că acestea sunt alegerea preferată pentru publicul tău, există câteva linii directoare de urmat.

În primul rând, utilizați doar un spinner de încărcare pentru așteptări sub 10 secunde. Pentru întârzieri de peste 10 secunde, creați iluzia progresului cu indicatori determinați pentru a menține utilizatorii interesați mai mult timp.

Când proiectați spinneri sau alte animații de încărcare:

1. Fii cât mai creativ și distractiv posibil
2. Fă-l pe brand
3. Furnizați o estimare de finalizare cât mai precisă
4. Explicați de ce utilizatorul așteaptă
   – Vă rugăm să așteptați până vă calculăm rezultatele.
   – Vă rugăm să așteptați până vă punem la punct lucrurile.
   – Colectăm datele dumneavoastră.
   – 21 din 30 de fișiere verificate.
5. Nu folosiți o animație dacă pagina se va încărca în mai puțin de o secundă.

Exemplu de gif-uri pentru ecranul de încărcare de la Hacker Noon.

Am putea continua să îmbunătățim animațiile de încărcare, dar nu despre asta este vorba în acest articol. Pentru că oricât de distractivă este animația dvs. de încărcare, ea accentuează timpul de așteptare și nu oferă un sentiment clar de progres.

Pentru asta sunt ecranele schelete.

Încărcare progresivă cu ecrane schelet

Cercetările care compară filatoarele și ecranele scheletului au arătat că ecranele scheletului sunt percepute ca fiind mai rapide și îi lasă pe utilizatori mai fericiți. Deci, ce este acest presupus erou?

După cum știți, rotoarele de încărcare ocupă un ecran până când interfața cu utilizatorul este complet încărcată, moment în care totul apare simultan.

Ecranele de tip schelet folosesc o tactică diferită și dezvăluie fiecare parte a interfeței de utilizare pe măsură ce încărcarea progresează. Începe cu o schiță generală a designului interfeței și apoi continuă cu afișarea elementelor pe măsură ce termină încărcarea. Această strategie se numește progresie graduală, iar detaliile apar de obicei în ordinea conturului scheletului (numit și substituent UI), text și apoi imagini.

Exemplu de ecran schelet Facebook de la Facebook Engineering.

Folosite de companii de renume precum LinkedIn, Instagram, Facebook și Google, ecranele schelet oferă o experiență mai bună a ecranului de încărcare, transformând așteptarea pasivă în așteptare activă.

Așteptarea pasivă este atunci când stai acolo și aștepți fără nimic de făcut, cum ar fi când vezi un filator care se învârte și se rotește. Așteptarea activă este atunci când faci ceva care se simte ca un progres în timp ce aștepți. Încărcarea scheletului încurajează așteptarea activă, oferind utilizatorului informații noi de procesat de fiecare dată când ecranul se actualizează.

În acest fel, ecranul schelet ia atenția asupra timpului pe care îl așteptați și îl plasează pe dovada reală a progresului care se întâmplă înaintea dvs., făcând ca procesul de încărcare să se simtă mai rapid. Și pe măsură ce dezvăluie ce s-a încărcat și ce a mai rămas, permite utilizatorului să construiască așteptări precise pentru interfața utilizatorului.

Încărcarea progresivă a Instagramului în acțiune.

Când implementați un ecran schelet, asigurați-vă că interfața de utilizare a substituentului este o reprezentare exactă a modului în care va arăta interfața de utilizare finală. În caz contrar, creezi un decalaj între așteptări și realitate.

Unele instrumente și site-uri web, cum ar fi Medium și Google Images, utilizează încărcarea progresivă a imaginii pentru a adăuga un alt pas în progresie. Încărcarea progresivă a imaginii este atunci când afișați culoarea predominantă sau versiunea neclară a unei imagini înainte ca aceasta să se încarce complet.

De asemenea, puteți crea animații de încărcare în ecranele schelet pentru a indica încărcarea. Facebook, de exemplu, are barele de text gri de pe ecranul său schelet să execute propria lor mișcare de încărcare pe măsură ce pagina se încarcă.

Utilizatorii percep ecranele cu mișcări de încărcare de la stânga la dreapta și mișcări de încărcare lente și constante ca fiind mai rapide.

Preocupări cu ecranul scheletului

Există, ca întotdeauna, critici – cea mai mare îngrijorare fiind că blocurile gri sunt o soluție plictisitoare și neatractivă pentru utilizatorii care se așteaptă să vadă conținut grozav.

Într-o oarecare măsură, această preocupare ratează scopul ecranului schelet: să sugereze conținutul grozav care este pe drum rapid. Niciun utilizator nu se așteaptă sau dorește deloc un ecran de încărcare, dar ecranele schelet oferă confortul de a ști că o interfață funcționează și va fi disponibilă în câteva secunde.

Desigur, blocurile gri devin iritante atunci când există o perioadă prea lungă de așteptare între fiecare fază de progres. Cu cât timpul de așteptare este mai lung, cu atât devine mai rău. Acesta este cazul tuturor indicatorilor de încărcare deoarece, așa cum am stabilit la început, nimănui nu-i place să aștepte mult.

Cu ecrane scheletice, ajută la implementarea mai multor faze de progresie pentru a continua să activeze concentrarea utilizatorului. Există ecrane schelete prost proiectate acolo, care merg de la interfața de utilizare a substituenților gri la totul dintr-o dată, ceea ce învinge scopul. Încărcarea progresivă eficientă arată conținutul de îndată ce acesta este gata să țină utilizatorii informați, interesați și plini de speranță.

Dacă timpul de așteptare este puțin mai lung decât ideal, ați putea lua în considerare utilizarea unui rotisor timp de câteva secunde înainte de a dezvălui interfața de utilizare a substituentului și de a încărca conținutul dvs. Procedând astfel, vă puteți câștiga o perioadă mică de timp, atâta timp cât interfața de utilizare a substituentului apare pentru a arăta progrese substanțiale.

Dacă timpul de încărcare este prea lung, reducerea timpului de așteptare este întotdeauna cea mai bună opțiune și ar trebui să fie prioritatea dvs. Există multe motive pentru care site-ul dvs. ar putea fi lent.

Testați-l: UX bun începe cu utilizatorul

Experiența utilizatorului începe cu utilizatorul și niciun răspuns nu este potrivit pentru toată lumea, chiar și atunci când este pentru majoritatea. De aceea, oferirea unei experiențe bune de utilizator începe cu testarea ideilor tale pentru a stabili ce funcționează cel mai bine pentru publicul tău.

Pe vremuri, oferirea celui mai bun design de spinner era tot ce puteai face.

Acum, încărcarea progresivă bine concepută este o alternativă care merită luată în considerare. Accelerează timpii de așteptare percepuți, oferă un sentiment de progres, implică ceea ce rămâne de încărcat și sfătuiește așteptările utilizatorilor.

Dar asta nu înseamnă că este timpul să încetăm să punem la îndoială cele mai bune practici. Zilele în care folosim animații de încărcare lungi și neinformative ar putea fi în urmă, dar într-o zi, ceva va depăși limitările ecranelor schelet în același mod în care au încărcat rotoarele.

Până atunci, dacă doriți să aflați mai multe despre cum să vă îmbunătățiți UX, contactați-vă. Ne place să vorbim despre strategie.