Afișarea stării sistemului este unul dintre cele zece standarde fundamentale de utilizare, rămânând unul dintre cele mai importante și principii universale Design UI.

Indicatorii de progres sunt implementați pentru a oferi în timp util părere despre funcționarea sistemului/interfeței. Conform teoriei interacțiunii lui Norman, aceste elemente ar trebui, de asemenea, să ajute utilizatorii să evalueze starea sistemului.

Una dintre cele mai frecvent utilizate forme de feedback cu privire la funcționarea sistemului este un indicator animat de progres - acest element afișează încărcarea sistemului/resursei la procesarea informațiilor sau la încărcarea datelor.

Astăzi vă aducem în atenție o traducere a unui articol de Katie Sherwin, specialist în uzabilitate la NNG (Nielsen-Norman Group, Nielsen-Norman Group), în care a vorbit despre tipuri variate indicatori de progres și au oferit recomandări pentru utilizarea acestora.

Puterea feedback-ului - Faceți utilizatorii să simtă că îi auziți

Indicatorii de progres nu sunt dintre cei mai recenti, dar implementarea lor este garantată pentru a îmbunătăți experiența utilizatorului - primind feedback cu privire la acțiunile lor, utilizatorii sunt convinși că sistemul le-a acceptat cererea și o procesează.

Din păcate, majoritatea site-urilor și sistemelor nu afișează informații despre starea unui proces până la finalizare - acest lucru irită utilizatorii, deoarece nu știu dacă comanda lor este în curs de executare sau dacă sistemul rulează. În plus, lipsa de cunoaștere a stării sistemului cauzează comenzi repetate și multe clicuri inutile.

Viteza mare de descărcare este cerinta generala pentru toate resursele, dar uneori serverele procesează datele mai mult decât de obicei, iar acest lucru nu poate fi corectat nici măcar prin modernizarea acestora. În astfel de cazuri, consumatorii ar trebui să fie informați că sistemul funcționează și comanda lor este efectuată. Dacă descărcarea necesită mai mult de 10 secunde, se recomandă să indicați timpul aproximativ până la finalizare - în in caz contrar, mulți utilizatori pur și simplu nu vor aștepta.

Ca exemplu de feedback privind starea sistemului, Katie a împărtășit acest apel cu Departamentul de Autovehicule din California (DMV):

• În mod previzibil, Sherwin a fost informat că toți operatorii erau ocupați.
• Câteva minute mai târziu, a fost pornit un mesaj care indică faptul că Katie era încă pe linie.
• Următoarea intrare a precizat că timpul de așteptare aproximativ a fost de 15-20 de minute - acest lucru i-a permis specialistului NNG să-și facă treburile fără teama de a pierde linia.
• După 15 minute, Katie a fost rugată să plece numar de contact pentru ca operatorul să o poată contacta atunci când este liber. Mai mult, Sherwin a fost asigurată că nu își va pierde locul la coadă.

Instrumentele de feedback ale DMV au făcut mai ușoară așteptarea pentru a fi conectată la un operator — Katie nu numai că a fost ținută la curent cu starea apelului ei, dar a oferit și o alternativă convenabilă la așteptare. Apropo, implementarea unui astfel de sistem de reținere este mult mai ieftină decât extinderea personalului.

Indicatorii de încărcare informează utilizatorii că sistemul durează mai mult timp pentru a finaliza o comandă (care ar putea fi descărcarea unui fișier, instalarea unei actualizări etc.) și afișează timpul estimat de așteptare.

Pentru a transmite în mod clar proprietățile acestor elemente, Katie a descris beneficiile lor, făcând o paralelă cu un apel către Departamentul de Transport din California:

• Indicatorii elimină îndoielile utilizatorilor cu privire la funcționarea corectă a sistemului prin afișarea stării acestuia - acest lucru a fost realizat folosind un mesaj despre ocuparea operatorilor.
• Aceste elemente oferă un obiect de urmărit care ușurează așteptarea - atunci când un apel este în așteptare, aceasta este muzică.
• Ei încurajează utilizatorii să aștepte afișând un proces — Sherwin a fost informată că toți reprezentanții departamentului sunt ocupați și că operatorul va fi liber în 15 minute, așa că a fost dispusă să aștepte.
• Indicatorii de progres slăbesc simțul timpului, deoarece utilizatorii, concentrându-se pe feedback, acordă mai puțină atenție procesului de așteptare în sine - în timp ce ascultă muzică, specialistul NNG a uitat cât de obositor este să aștepte o conexiune cu un operator.

Scopul unui studiu realizat la Universitatea din Nebraska-Lincoln a fost de a determina durata de timp pe care utilizatorii sunt dispuși să aștepte ca un site web să se încarce. Unui grup de respondenți i s-a prezentat o versiune a paginii cu indicatori de progres (o bară de încărcare animată), iar al doilea - fără.

Drept urmare, cei cărora li s-a arătat pagina web cu indicatorul au fost mai mulțumiți de experiența utilizatorului și au așteptat în medie de 3 ori mai mult decât cei cărora nu li s-a afișat elementul de feedback.

Indicatori de încărcare animați

În ciuda faptului că viteza conexiunilor digitale crește în fiecare an, problema încărcării lente a resurselor este încă relevantă. Și după cum știți, performanta scazuta Site-urile web îi irită pe vizitatori și adesea îi determină să plece.

Disponibilitatea utilizatorilor de a aștepta descărcarea este determinată de mai mulți factori:

• Urgența și complexitatea scopului vizitei.
• Contextul utilizării resursei este că un vizitator grăbit să descarce un proiect important are mai multe șanse să părăsească resursa decât cineva care se află pe o rețea socială pentru a ucide timpul.
• Îndeplinește așteptările bazate pe experiența anterioară de a interacționa cu o resursă sau de a efectua un proces similar.

Specialiștii în marketing nu pot influența acești factori, dar urmând recomandările de mai jos, pot crește semnificativ disponibilitatea utilizatorilor de a aștepta:

Afișați întotdeauna unele feedback

Deoarece așteptarea începe imediat după finalizarea unei acțiuni (de exemplu, făcând clic pe un element CTA), sistemul trebuie să indice imediat că cererea a fost acceptată și este în curs de procesare: de exemplu, culoarea butonului pe care utilizatorul a făcut clic se poate schimba , sau poate apărea o bară de încărcare.

Natura statică a interfeței după trimiterea unei cereri este percepută de mulți utilizatori ca o eroare, așa că adesea încearcă să execute din nou comanda, ceea ce, la rândul său, poate duce la consecințe negative.

Afișează progresul oricărui proces care durează mai mult de 1 secundă

Atenția utilizatorilor începe să rătăcească după câteva secunde de așteptare, ceea ce îi poate determina să plece. Prin urmare, pentru a afișa progresul proceselor a căror durată este mai mare de o secundă, ar trebui să utilizați animație ciclică sau un indicator procentual.

Un grafic cu o animație în buclă indică faptul că sistemul rulează, dar nu oferă informații despre timpul estimat de încărcare.

Astfel de elemente ar trebui folosite pentru a afișa starea proceselor care durează de la 2 la 10 secunde. Dacă utilizați animație în buclă pentru cereri care durează mai puțin de o secundă pentru procesare, utilizatorii vor fi confuzi de apariția bruscă și dispariția unui element de neînțeles.

Din perspectiva dezvoltării web, este tentant să folosești animația în buclă în toți indicatorii tăi, deoarece nu necesită calcularea timpilor de încărcare. Cu toate acestea, nu este recomandat să afișați procesarea proceselor care durează mai mult de 10 secunde cu animație în buclă - lipsa informațiilor despre progres va încuraja utilizatorii să plece. Mai mult, în conformitate cu aceasta element grafic este imposibil să se determine dacă sistemul funcționează, ceea ce crește și posibilitatea ca interacțiunea digitală să fie întreruptă.

Un participant la un test de utilizare a așteptat mai mult de 15 minute până se încarcă pagina unei publicații online și, în cele din urmă, s-a dovedit că a apărut o eroare și că aplicația trebuia repornită. Este evident că utilizator real nu va aștepta atât de mult.

Adăugarea la indicatori simboluri text(de exemplu, „Încărcare comentarii”) poate, de asemenea, să le sporească eficacitatea.

Este de remarcat faptul că animația ciclică nu este potrivită pentru afișarea progresului descărcării datelor de pe servere, deoarece calitatea conexiunii, care afectează viteza de lucru, este dincolo de controlul dezvoltatorilor. Conform standardelor, datele nu ar trebui să se încarce mai mult de 2 secunde, dar această cifră nu este întotdeauna realizabilă.

Indicatorii procentuali de progres sunt cel mai informativ tip de feedback animat. Aceste elemente permit utilizatorilor să estimeze timpii de așteptare aproximativi (dându-le posibilitatea de a decide dacă vor aștepta sau nu), elimină cât mai multă incertitudine cu privire la timpii de procesare și reduc sensul timpului.

Cercurile și barele orizontale care umplu de la 0 la 100% sunt exemple ale acestui tip de indicator de progres.

Ca regulă generală, indicatorii procentuali ar trebui utilizați pentru procesele care durează 10 secunde sau mai mult - element vizual, reflectând finalizarea treptată a procesării, calmează și încurajează anticiparea. Cu toate acestea, aceste elemente pot fi folosite pentru a afișa starea proceselor care necesită mai puțin de 10 secunde, dacă sunt legate de procesarea fișierelor sau a registrului, deoarece vizitatorii înțeleg că sistemul rulează cu o anumită sumăînregistrări.

Se recomandă adăugarea de text la indicatorii de procentaj animați (de exemplu, „Fișiere descărcate: 17 din 50”) și la indicatorii proceselor lungi pentru a adăuga un buton de anulare în cazul în care utilizatorul nu dorește să aștepte. Apropo, absența unui element de anulare îi privează pe utilizatori de controlul asupra sistemului, ceea ce dăunează experienței utilizatorului.

Indicatorii procentuali oferă o perspectivă asupra duratei procesului, ceea ce face ca modificările ratei de progres să fie mai vizibile, ceea ce, la rândul său, are un impact pozitiv asupra experienței utilizatorului. Cu toate acestea, utilizatorii sunt enervați dacă indicatorul se umple prea repede și apoi se oprește cu câteva procente rămase pentru finalizare - acest lucru reduce influență pozitivă niciun raspuns.

Mulți designeri și dezvoltatori care implementează indicatori de încărcare se confruntă cu problema calculării vitezei proceselor. Pentru a face față acestei sarcini, urmați aceste recomandări:

• Setați animația astfel încât indicatorul să înceapă să se umple lent și, pe măsură ce se apropie de încărcare, viteza crește - acest lucru nu va crea așteptări mari pentru performanța site-ului în rândul vizitatorilor. Este întotdeauna mai bine să depășiți așteptările clienților decât să-i dezamăgim.
• Este de remarcat faptul că această recomandare se aplică doar indicatorilor de încărcare — studiile au arătat că indicatorii de progres ale sondajului, a căror rată de finalizare scade pe măsură ce progresează, scad rata de respingere.
• Vă rugăm să indicați aproximativ timpul exact Timpi de așteptare - în unele cazuri, descărcarea va dura probabil mai mult decât timpul specificat, ceea ce va afecta negativ încrederea consumatorilor.
• Textul simplu precum „Acest lucru va dura aproximativ un minut” sau „Au mai rămas aproximativ 3 minute” este suficient pentru a informa și a păstra utilizatorii. De asemenea, adăugați câteva secunde în plus la valoarea specificată în cazul unor întârzieri neașteptate.
• În loc să afișați progresul general, în unele cazuri este optim să afișați numărul de pași finalizați și rămași - vizitatorii nu vor ști exact cât timp va dura pentru a finaliza un anumit pas, dar numărul de pași îi va ajuta să-și facă o idee generală și îi va atrage să finalizeze procesul sau să aștepte ca acesta să se termine.

Indicatorii statici, cum ar fi textul „Vă rugăm să așteptați, rezultatele se încarcă” fără elemente animate, sunt ineficienți. Astfel de indicatori nu afișează informații despre progresul sistemului și starea de funcționare a acestuia, prin urmare ar trebui înlocuiți cu cei dinamici.

Cea mai proastă modalitate de a preveni recomenzile accidentale și clicurile inutile este să adăugați un avertisment la butonul CTA care spune: „Re-clic poate duce la o comandă repetată”. În primul rând, orice amenințare este contrară standardelor de bază ale pozitivului experiența utilizatoruluiși, în al doilea rând, astfel de avertismente sunt pur și simplu ineficiente, deoarece acestea sunt rareori acordate atenție.

Text de avertizare: „Nu faceți dublu clic!”

În cadrul studiului „Copiii în World wide web” (Copii pe Web), specialiștii NNG au întâlnit o mulțime de instrumente și jocuri interactive care au durat mult să se încarce.

Pentru a face ecranul de încărcare distractiv și captivant, designerii includ adesea conținut video și mini-jocuri pentru a menține utilizatorii ocupați în timp ce așteaptă. Cu toate acestea, astfel de modificări fac mai mult rău decât bine, deoarece copiii adesea nu disting joc real din procesul de descărcare și nu înțeleg de ce interacțiunea a fost întreruptă.

Katie a oferit câteva sfaturi despre cum să păstrați tinerii utilizatori interesați fără a le distrage atenția de la activitatea principală:

• Utilizați întotdeauna indicatori procentuali vizibili pentru a le informa copiilor că sistemul se încarcă. Copiii, ca și adulții, vor să știe dacă sistemul funcționează și cât timp va dura pentru a porni.
• Asigurați-vă că animația intermediară nu ascunde indicatorul și nu arată ca un joc.
• Folosiți incitant și animații simple, relevante pentru activitatea principală - acestea sunt cele mai eficiente pentru menținerea atenției și creșterea așteptărilor.

Concluzie

Furnizarea de feedback este una dintre cerințele directoare ale unei experiențe pozitive de utilizator. Afișând în mod deschis și transparent timpul necesar pentru încărcare, designerii pot elimina confuzia utilizatorilor cu privire la starea sistemului și pot crește timpul pe care sunt dispuși să îl petreacă în așteptare.

Indicatorii ciclici ar trebui utilizați pentru procesele care durează 2-9 secunde și indicatori procentuali pentru întârzierile care durează mai mult de 10 secunde. Dar, deoarece nu este întotdeauna posibil să estimați timpul de încărcare, ar trebui să măriți întârzierea de afișare pentru procesele care necesită mai mult de 10 secunde. Cu cât instabilitatea timpului de încărcare este mai mare, cu atât ar trebui să fie mai mic pragul minim pentru afișarea corectă a progresului.

Indicatorii eficienți de progres îi fac pe utilizatori să aștepte și le influențează pozitiv impresia despre site/aplicație.

Acest afișaj elegant cu săgeți servește la prezentarea datelor despre funcționarea serverelor. Afișează procentul de încărcare a procesorului, memorie cu acces aleatorȘi hard disk-uri calculator. Datele sunt afișate folosind trei dispozitive analogice de tip pointer - voltmetre curent continuu la 10 V (sau oricare dintre cele potrivite; alegerea unei rezistențe pentru a devia complet acul nu este o problemă). Modulul Raspberry Pi Zero este responsabil pentru controlul funcționării sistemului împreună cu un sistem format din două amplificatoare operaționale LM358, alimentat de un convertor boost 5>12V ( modul gata cu Ali).

Schema electrica

Pentru a conecta voltmetre la ieșiri, aveți nevoie program simplu, scris in Limbajul Python, care generează trei semnale PWM, proporționale cu sarcina a acestui element server controlat. Circuit amplificator operațional - convertor analogic Semnal de tensiune PWM.

DAC-ul convertește semnalul PWM de 3,3 V care vine de la Raspberry Pi într-o tensiune cuprinsă între 0 și 10 V. ieșiri analogice- 1, 2 și 3 - sunt conectate direct la senzorii de pe panou, iar intrările PWM - 1, 2 și 3, sunt conectate la controler.

Design indicator

Cel mai dificil lucru aici nu este să asamblați diagrama - ci să imprimați 3 scale frumoase. Iată un desen pe care îl puteți folosi pentru dispozitivul dvs.

Apoi tăiați-l și lipiți-l deasupra scalei cadranului original.

Tipul dispozitivului finit

Indicatoarele sunt montate pe o placă vopsită cu gri. Îl puteți încorpora în carcasa computerului sau îl puteți aranja sub forma unei cutii separate. Întregul sistem este montat într-o carcasă compactă, deci nu există nimic în afară decât comparatoare cu cadran Nu pot sa vad.

Totul este alimentat de o tensiune comună de 5 volți de la sursa PC-ului. Pe de o parte, alimentează Raspberry Pi Zero, iar pe de altă parte, printr-un convertor de 12 Volți, alimentează un circuit analogic care generează o tensiune de control de la 0 la 10 V pentru comutatori. Schema circuitului și firmware-ul MK nu sunt date - deoarece aceasta este o poveste separată...

Imaginează-ți situația: te afli într-un magazin încercând să găsești un produs și întreabă-l pe consultant unde este. Ca răspuns la aceasta, consultantul pur și simplu stă nemișcat fără să ia nicio măsură. Cel mai probabil te vei simți dezamăgit și vei pleca. Utilizatorii care urmăresc indicatorul de încărcare „spinner” de pe monitorul lor pentru prea mult timp simt același lucru.

Spinerele nu sunt pentru încărcare lungă

Spinnerii nu spun utilizatorului cât timp va dura procesul de încărcare. Dacă utilizați acest indicator pentru un proces prea lung, utilizatorii vor începe să creadă că ceva a mers prost și că există o problemă cu aplicația. Lipsa de informații creează incertitudine pe care vizitatorii o vor interpreta în cel mai rău mod posibil.

Utilizatorii vor decide că descărcarea va dura prea mult, iar acest lucru, după cum vă puteți imagina, nu le va înveseli așteptările. Nerăbdarea va crește și, în cele din urmă, vizitatorul va apăsa pur și simplu butonul „înapoi” sau va ieși complet din aplicație.

Regula celor patru secunde

Dacă doriți ca utilizatorii să rămână în aplicația dvs., nu folosiți rotitori pentru timpi de încărcare mai mari de patru minute. Cercetările științifice au arătat că toleranța maximă de așteptare a utilizatorilor este de patru minute. Aceasta înseamnă că după patru secunde, intențiile comportamentale se schimbă.

Când să folosiți un spinner

Utilizatorul așteaptă un răspuns imediat din partea aplicației. Reacția imediată durează mai puțin de o secundă. Dacă utilizatorul nu vede nicio reacție mai mult de o secundă, începe să se îngrijoreze.

Dacă aveți un proces care durează mai mult de o secundă, utilizați un spinner. Acest lucru va permite utilizatorilor să știe că aplicația se încarcă, ceea ce le va ușura așteptarea și îngrijorarea.

Bară de încărcare pentru procese lungi

Dacă procesul durează mai mult de patru secunde, trebuie să utilizați bara de încărcare. În acest caz, utilizatorii tind să fie mai toleranți atunci când așteaptă.

Acest lucru se datorează faptului că oferiți o înțelegere clară a cât timp va dura așteptarea. Bara de încărcare permite utilizatorilor să vadă progresul, ceea ce îi menține pe drumul cel bun în timp ce așteaptă. Dacă văd doar rotorul, atunci nu pot observa niciun progres și, în general, nu pot fi siguri că acțiunea se întâmplă cu adevărat. Vizitatorul pur și simplu nu are nici un stimulent să aștepte.

Cum să proiectați o bară de încărcare

Bara de progres ar trebui să arate utilizatorilor cât de mult progres se face. Animația ar trebui să aibă loc de la stânga la dreapta într-un ritm gradual și constant. Dacă animația se oprește prea mult pentru o lungă perioadă de timp, utilizatorii încep să creadă că procesul s-a blocat și nu vor să mai aștepte.

De asemenea, trebuie să adăugați o evaluare numerică a progresului. Dacă procesul durează mai puțin de un minut, afișați descărcarea ca procent din descărcare sau numărul de fișiere descărcate. Informați utilizatorii despre exact ce activitate desfășoară aplicația.

Dacă descărcarea durează mai mult de un minut, trebuie să furnizați informații despre cât timp va dura așteptarea. Acest lucru va oferi utilizatorilor să înțeleagă că procesul va dura mai mult decât de obicei. Specificați timpul de așteptare rămas în minute, astfel încât persoana să poată trece la altceva și să revină la aplicație în perioada specificată.

Nu abuzați de filatoarele

Mulți designeri au obiceiul de a folosi spinneri în orice proces de încărcare. Dar dacă le folosiți în timpul unor perioade lungi de încărcare, va duce la frustrarea utilizatorului. Evitați acest lucru folosind benzi de încărcare atunci când este necesar.

Bara de încărcare face utilizatorul mai tolerant în procesul său de așteptare. Nu le deranjează să aștepte când înțeleg că aplicația funcționează pentru ei în acel moment. Dar dacă acest proces durează mai mult decât de obicei, vizitatorii au nevoie de feedback vizual. Lipsa de informații despre cât timp să aștepte provoacă nerăbdare și utilizatorii pur și simplu pleacă.

Traducere – Cameră de serviciu

Preîncărcările animate sunt folosite de dezvoltatori atunci când încarcă aplicații web și datele paginilor web prin Ajax. Uneori vrei să folosești ceva mai original în loc de o imagine plictisitoare standard. Dacă aveți nevoie GIF animat sau PNG (APNG) preloader (indicator) loading loading.gif Vă sfătuiesc să acordați atenție serviciului de internet. Anterior, era nevoie de mult efort pentru a găsi fișiere de imagine adecvate, servicii similare, în principiu, nu atât, așa că apariția unui alt proiect este cu siguranță un plus pentru designeri și dezvoltatori.

Deci, să ne uităm la Preloaders mai detaliat - generator gratuit Preîncărcătoare GIF și APNG care afișează procesul de încărcare. În plus, generatorul este cât se poate de simplu și foarte convenabil. Imediat ajungând la pagină, veți vedea că toate imaginile descărcabile sunt ordonate convenabil pe categorii - 3D, emoticoane, semne zodiacale, oameni, semne religioase, astronomie etc. S-ar putea să găsiți chiar categoria „ Rețelele de socializare" În vremurile de astăzi, chestia este aproape de neînlocuit. Apropo, pe lângă categorii, puteți vedea cele mai populare imagini animate sau ultimele 10.

Odată ce v-ați decis asupra categoriei și încărcătorul principal (ale cărui alegere este disponibilă din lista derulantă corespunzătoare), puteți începe să-l personalizați. Puteți defini:

• Tipul imaginii (format - gif sau apng);
• Culoarea bootloader-ului/fondului în sine (selectat folosind o „paletă” convenabilă), precum și transparența;
• Viteza animației;
• Dimensiunea imaginii (inclusiv rezoluția de 128x128 pixeli acceptată);
• Câteva „efecte” suplimentare (inversie de culoare, reflexie de fundal, animație inversă etc.).

O caracteristică unică a serviciului Preloaders.net este că, dacă nu găsiți încărcătorul necesar în baza de date, îl puteți comanda! Pentru a face acest lucru, trebuie să mergeți la secțiunea „Comandă nouă” și să completați cel mai simplu formular:

Pentru utilizatorii începători va fi util instrucțiuni detaliate de generatorul Preloaders.net, pe care îl puteți găsi. În principiu, nu mai este nimic de adăugat, deoarece serviciul este cât se poate de simplu; puteți realiza rapid și ușor preîncărcătoarele animate necesare cu ajutorul acestuia. Mulțumim dezvoltatorilor noștri pentru asta serviciu util, toți cei care programează în Ajax ar trebui să-l aprecieze.