Un ghid cuprinzător pentru proiectarea notificărilor

Publicat: 2022-03-11

Mesajele periferice din produsele digitale, cunoscute ca notificări, nu ar trebui să dăuneze niciodată experienței utilizatorului. În schimb, ei trebuie să contribuie la o experiență care îi ajută pe oameni să atingă un scop. Abordarea proiectării notificărilor la începutul procesului de proiectare a produsului va produce rezultate mai bune.

Imaginați-vă un grup de arhitecți care proiectează o casă cu trei etaje, muncind luni de zile la planuri. Este impresionant! E frumos! Dar chiar când se apropie de terminarea diagramei, unul dintre ei exclamă: „ Stai! Cum ajung oamenii de la primul la al treilea etaj? ” Au uitat de scară!

În mod similar, designerii de produse tind să se gândească în ultimul rând la îmbunătățiri UX mici, dar critice. Ca și în cazul stărilor goale, designerii sunt predispuși să lase până la sfârșit designul notificărilor - alerte, mesaje de eroare, confirmări, anunțuri și confirmări. Problema poate ieși la iveală brusc când un dezvoltator întreabă: „ Cum gestionăm erorile? ” Deoarece este o gândire ulterioară, această abordare de aderență produce frecvent „designuri” neglijente, care dăunează UX.

Pentru a evita un astfel de scenariu, cel mai bine este să utilizați o abordare integrată a designului notificărilor pentru a îmbunătăți experiența utilizatorului . Chiar dacă este posibil ca designerii să nu aibă toate informațiile la îndemână, proiectarea unui cadru cuprinzător de notificări în timpul ciclului de viață de proiectare a produsului va ajuta la pregătirea produsului pentru cazuri de utilizare neprevăzute.

Design de notificare pentru o UX mai bună

Când începeți proiectarea notificărilor, principiul esențial de proiectare de reținut este că trebuie să asiste (nu să împiedice) oamenii să îndeplinească sarcini . Este imperativ să testați prototipurile de produse din timp și să mapați cazurile de utilizare în care mesageria periferică ar fi de valoare pentru a ajuta interacțiunile . Cu toate acestea, cel mai bun mod de a comunica cu utilizatorii va varia și depinde de mai mulți factori cheie:

  • Tipul de informații care se comunică
  • Urgența informațiilor – dacă trebuie văzută imediat
  • Dacă acțiunea utilizatorului este necesară ca urmare a informațiilor

În afară de stilul și comportamentul notificărilor, tonul lor trebuie stabilit prin copie UX. Toate copiile notificărilor trebuie să fie clare, concise și utile. Un sistem de notificare bine conceput este, de asemenea, proiectat având în vedere accesibilitatea și are flexibilitatea de a găzdui diferite limbi.

Terminologia folosită pentru notificări tinde să fie similară, dar va varia ușor de la o echipă la alta și de la un proiect la altul. Proiectantului îi revine sarcina de a determina terminologia cadrului de notificare – cum se numește ce – precum și de a sincroniza pe toată lumea cu privire la rațiunea utilizării lor: ce, unde și cum .

Design excelent cadru de notificare cu mulțumiri

Utilizabilitate mai bună printr-un design de notificare mai bun

Notificările îndeplinesc o funcție esențială în utilizarea produsului. „ Vizibilitatea stării sistemului ” este numărul unu pe lista celor „10 euristici de utilizare pentru proiectarea interfeței cu utilizatorul” de la Nielsen Norman Group. Regula prevede că „ sistemul ar trebui să țină întotdeauna utilizatorii informați despre ceea ce se întâmplă, printr-un feedback adecvat într-un timp rezonabil.

Un sistem de notificare face parte atât de mult din UX-ul unui produs digital, încât fără el, produsul s-ar simți ca și cum ar fi omis ceva. Dacă nu există „vizibilitate a stării sistemului” și feedback, este asemănător cu conducerea unei mașini fără bord.

Sunt căutați designeri UX independenți cu normă întreagă din SUA

Tabloul de bord al unei mașini este plin de indicatori, pictograme și lumini concepute pentru a oferi vizibilitate în sistemul de operare al mașinii și pentru a asigura operabilitatea sigură și fiabilă. Când conducem, un grup de citiri și notificări despre temperatura motorului, starea bateriei, presiunea uleiului, lumini, frâne, airbag-uri și așa mai departe ne țin la curent. Când vrem să facem un viraj, există o lumină intermitentă pentru semnalizator, împreună cu un sunet de clic, ambele oferindu-ne feedback. Avem și un indicator al rezervorului de combustibil care indică când rezervorul de combustibil este scăzut.

Funcționează în același mod cu un produs digital. Vizibilitatea stării sistemului și feedback-ul este esențială atunci când vine vorba de utilizare, iar utilizarea este baza unor experiențe excelente pentru utilizatori.

Design ux de notificare pe tabloul de bord al mașinii

Stabilirea unui cadru de notificare util

Pentru a proiecta bine un cadru de notificare, poate fi util să ne gândim la notificări în termeni de „puterea semnalului”. Ce mesaje periferice necesită mai multă sau mai puțină atenție? De exemplu, interacțiunile care pot fi distructive au nevoie de notificări „mai tare”, iar interacțiunile nedistructive au nevoie de notificări „mai silențioase”.

Trimiterea oamenilor cantității potrivite de notificări este un act de echilibru , iar exagerarea este plină de pericol; produsul poate primi o mulțime de feedback negativ sau, în cel mai rău caz, poate înstrăina oamenii în măsura în care îl vor abandona. Prin urmare, designerii trebuie să ia în considerare cu atenție UX-ul și să trimită numai mesaje cu un scop bine definit. De asemenea, este o idee bună să oferiți utilizatorilor flexibilitatea de a dezactiva toate, sau cel puțin unele dintre notificări.

Abordarea inițială a proiectării notificărilor necesită clasificare pe trei niveluri: atenție ridicată, medie și scăzută , adică „niveluri de severitate”. După aceea, tipurile de notificare trebuie să fie definite în continuare prin atribute specifice pe aceste trei niveluri, fie că sunt alerte, avertismente, confirmări, erori, mesaje de succes sau indicatori de stare.

Proiectarea cadrului de notificare

Odată ce atributele de notificare au fost identificate, este timpul să creați o taxonomie a diferitelor notificări care vor alcătui cadrul. Următoarele nu sunt în niciun caz o listă exhaustivă - tipurile de notificări vor diferi în funcție de produs, cazuri de utilizare și alte variabile. ( Vă rugăm să rețineți : după cum am menționat, diferite echipe folosesc o varietate de terminologii. De exemplu, numim „confirmare” o notificare care necesită aprobarea utilizatorului pentru a continua cu o interacțiune distructivă. Unele echipe pot folosi „confirmare” ca termen pentru un mesaj de succes.)

Mare atenție

  • Alerte (se cere atenție imediată)
  • Erori (se cere o acțiune imediată)
  • Excepții (anomalii de sistem, ceva nu a funcționat)
  • Confirmări (acțiuni potențial distructive care necesită confirmarea utilizatorului pentru a continua)

Atenție medie

  • Avertismente (nu este necesară nicio acțiune imediată)
  • Mulțumiri (feedback cu privire la acțiunile utilizatorului)
  • Mesaje de succes

Atenție scăzută

  • Mesaje informative (alias notificări pasive, ceva este gata de vizualizat)
  • Insigne (de obicei pe pictograme, care semnifică ceva nou de la ultima interacțiune)
  • Indicatori de stare (feedback de sistem)

Design de notificări pentru notificări LinkedIn

Proiectarea UX de notificare excelentă

Pentru a proiecta un produs cu UX excelent, designerii trebuie să facă o listă cu toate cazurile de utilizare în care notificările pot fi utile. Se recomandă ca acest proces să fie realizat în colaborare cu un dezvoltator, deoarece, în majoritatea cazurilor, aceștia pot fi imparțiali și pot ajuta la depanarea cazurilor marginale pe care proiectantul ar putea să nu le fi luat în considerare.

Designerii ar trebui, de asemenea, să noteze toate interacțiunile în timpul testării utilizatorilor, unde notificările pot oferi valoare pentru a îmbunătăți UX.

Odată armat cu lista, următorul pas este clasificarea notificărilor în funcție de nivelul de atenție și atributele dorite. Din nou, deoarece notificările nu ar trebui să fie intruzive , acest lucru trebuie făcut cu atenție. Câteva dintre întrebările pe care trebuie să le puneți în timpul acestui proces sunt:

  • Ce ar declanșa notificarea?
  • Ce tip de feedback este comunicat?
  • Unde ar apărea notificarea și cum?
  • Ce notificare ar necesita o interacțiune imediată?
  • Notificarea este persistentă sau nepersistentă?

Apoi, codurile de culori și pictogramele trebuie determinate și introduse într-un sistem de design (sau ghid de stil). Când trec prin acest proces, designerii trebuie să ia în considerare fiecare situație în care ar apărea o notificare și să se asigure că redă corect pe toate fundalurile.

Model de proiectare de notificare în diferite sisteme de proiectare
Chiar și seturile de instrumente UI bine-cunoscute folosesc cadre și terminologii diferite de proiectare a notificărilor. (Sursă)

Plasarea notificărilor este, de asemenea, esențială. Cu riscul de a afirma ceea ce este evident, pentru a evita întunecarea interfeței, notificările ar trebui să apară în partea de sus sau de jos, sau în apropierea colțurilor interfeței. În plus, dacă designul este receptiv, designerii trebuie să testeze aspectul notificărilor cu diferite ferestre de vizualizare. Este deosebit de important atunci când mesajele de eroare pot fi afișate cu formulare mobile receptive.

Proiectarea unui cadru de notificare nu este ușoară. Trebuie luate în considerare multe detalii mici care apar în diferite scenarii. Dincolo de accesibilitate și lizibilitate, localizarea viitoare trebuie avută în vedere. Un sistem de notificare care arată perfect în engleză se poate destrama complet atunci când este utilizat pe o platformă germană sau japoneză.

Design de notificare pentru alerte
Alertele afișate pe un tablou de bord B2B ar trebui să rămână accesibile ca parte a navigației globale.

Alte întrebări de adresat când vine vorba de definirea comportamentului notificărilor :

  • Dacă o alertă sau o avertizare este menită să fie persistentă, cum se asigură designerii că oamenii au în continuare acces la ele după ce se îndepărtează de ecranul inițial?
  • Ar trebui încorporată o pictogramă de alertă cu o insignă unde ar putea fi văzută o arhivă de notificări?
  • Dacă o notificare nu este persistentă, cât timp înainte de a dispărea și ar trebui să existe o opțiune de a o respinge înainte ca aceasta să dispară?

Pentru aplicațiile mobile, nu numai notificările în aplicație, ci și notificările push (la nivel de sistem, în afara aplicației) trebuie să fie proiectate cu meticulozitate. Sunt în mare parte întreruperi, așa că este esențial să ne uităm la copia notificării și cum și când să ceri permisiunea de a le trimite. Folosite prea mult, pot descuraja oamenii să folosească aplicația. Prea multe notificări neesențiale pot frustra utilizatorii care pot apoi să suprime notificările sau să înceteze cu totul să mai folosească aplicația.

Designerii ar trebui, de asemenea, să ia în considerare notificările acționabile care permit oamenilor să fie productivi fără a deschide o aplicație. Permiterea utilizatorilor să îndeplinească sarcini mici fără a intra într-o aplicație poate fi un instrument puternic în îmbunătățirea UX.

Pentru notificările push mobile, cea mai bună practică UX este de a întârzia notificările de orice fel (cererea de acces la locația unei persoane, trimiterea de notificări push și așa mai departe) până când oamenii au avut șansa de a explora puțin aplicația.

Design aplicație de notificare
Notificările push mobile trebuie să fie programate cu atenție pentru a nu înstrăina utilizatorii.

Cele mai bune practici de notificare pentru UX excelent

Respectarea următoarelor bune practici va asigura că oamenii vor percepe notificările ca oferind valoare, nu ca întreruperi, îmbunătățind astfel experiența utilizatorului. Înainte de a proiecta un sistem de notificări și de a le introduce într-un sistem de proiectare, luați în considerare aceste bune practici fundamentale:

  • Clasificați notificările după cele trei niveluri de atenție discutate mai devreme. Apoi, definiți taxonomia diferitelor forme de notificări în cadrul acestor trei niveluri.
  • Când creați un ghid de stil pentru sistemul de notificare, specificați lungimea maximă a caracterelor pentru notificare în toate limbile în care va fi lansată.
  • Acordați o atenție deosebită adaptabilității și flexibilității pentru a se adapta diferitelor tipuri de conținut și lungimi de text.
  • Creați o schemă de culori consecventă pentru cele trei niveluri de atenție, precum și o iconografie consecventă.
  • Creați notificări concise, ușor de citit, care oferă informații utile.
  • Luați în considerare cu atenție ce să trimiteți și când să trimiteți. Pe mobil, amânați trimiterea notificărilor pentru aplicațiile proaspăt descărcate pentru a evita înstrăinarea oamenilor. Examinați îndeaproape contextul și cazurile de utilizare.
  • Eroare pe lângă faptul că afișează mai puține notificări, fie că sunt alerte sau avertismente sau alte actualizări de stare cu atenție mare și medie. În schimb, puneți-le într-o listă pe care oamenii o pot accesa atunci când doresc să le vadă (semnificate printr-o insignă cu pictogramă în interfața de utilizare).
  • Luați în considerare un sistem cu o opțiune de a marca notificările „nu se afișează din nou”.
  • Confirmările nepersistente, cum ar fi „snack bars” ar trebui să dispară de pe ecran după minimum patru secunde și maxim opt secunde, cu opțiunea de a le închide mai devreme și de a „anula” acolo unde este cazul.
  • Pentru notificări cu nivel ridicat de atenție pe mobil, luați în considerare feedbackul sonor și haptic atunci când este posibil.
  • Asigurați un contrast adecvat pe notificări pentru lizibilitate și între fundalul pe care apar notificările. Rețineți că, în cazul designurilor fluide și receptive, fundalul se poate schimba sub notificare.

Design ux de notificare pentru notificările aplicației mobile Google Voice
Anunțuri pentru aplicații mobile, mesaje de succes și mulțumiri.

Cele mai bune practici pentru mesajele de eroare

  • Mesajele de eroare trebuie să fie simple și directe, de preferință aplicabile, scrise într-un limbaj ușor de citit și rapid de înțeles.
  • Evitați codurile obscure și abrevierile precum „ succesul răspunsului primit este fals.
  • Furnizați descrieri concise și clare ale problemei în loc de „ a apărut o eroare.
  • Evitați să dați vina pe oameni sau să le spuneți că au făcut ceva greșit, de exemplu, spunând că a fost o „ comandă ilegală.
  • Furnizați mesaje de eroare constructive în context, astfel încât oamenii să poată remedia problema.
  • Evitați indicarea unei erori doar transformând câmpul în roșu. Nu îl face accesibil persoanelor cu dizabilități. Cel mai bine este întotdeauna să includeți și alte indicii vizuale pe care daltonicul le poate vedea.
  • Utilizați validarea inline pentru câmpurile de intrare din formulare.
  • Mesajele de eroare nu ar trebui să dispară până când oamenii nu rezolvă problema.

Verificarea erorilor în linie pentru un design excelent de notificare a erorilor
Validarea inline a formularelor, denumită verificarea erorilor live și mesajele clare, îmbunătățesc UX.

rezumat

Notificările contribuie la o experiență care îi ajută pe oameni să atingă un obiectiv și ar trebui tratate ca orice altă componentă a produsului digital. Cu toate acestea, notificările pot tăia ambele sensuri. Dacă sunt gestionate bine, acestea pot stimula UX și pot asista implicarea, dar atunci când sunt executate prost, riscă să devină o supărare. Găsirea echilibrului corect este cheia.

Notificările nu ar trebui tratate ca o idee ulterioară. Pentru a le face corect, designerii trebuie să abordeze cazurile de utilizare din timp, să definească diferitele forme în timpul ciclului de viață al designului produsului și să le testeze pe larg.

O recapitulare rapidă despre modul corect de a proiecta notificările:

  • Începeți proiectarea notificărilor devreme, nu ca o idee ulterioară.
  • Clasificați notificările după cele trei niveluri de atenție: ridicat, mediu și scăzut.
  • Codați culori, atribuiți pictograme și determinați destinații de plasare.
  • Clasificați-le după tip: persistent sau nepersistent, pop-up, banner, dialog etc.
  • Încorporați-le într-un sistem de proiectare.

Înțelegerea când și cum să folosiți notificările este esențială pentru a oferi o utilizare excelentă și pentru a crea coerență în mesajele produselor. Evaluând cu atenție mesajele periferice care trebuie afișate la momentul potrivit, designerii pot crește eficiența unui produs și pot îmbunătăți UX-ul acestuia.


Spune-ne ce crezi! Vă rugăm să lăsați mai jos gândurile, comentariile și feedback-ul dvs.

• • •

Citiri suplimentare pe Blogul Toptal Design:

  • Cum să lucrezi de la distanță atunci când contează cel mai mult
  • Cum să faci tranziția cu ușurință a lucrului de la distanță
  • Cele mai bune practici și greșeli în designul aplicațiilor mobile
  • Ghidul suprem pentru designul site-urilor de comerț electronic
  • Blocarea chatului – Când un Chatbot eșuează