Îmbunătățiți-vă UX cu o ierarhie vizuală clară

Conceptul de ierarhie vizuală a fost aplicat în design, deoarece internetul era o fantezie îndepărtată și este la fel de important în designul modern al produselor, precum a fost la apogeul reclamei tipărite.

Ierarhia vizuală determină ordinea în care oamenii preiau și procesează informațiile de pe o pagină, indiferent dacă este digitală sau tipărită. Este o parte vitală a creării unei experiențe optime pentru utilizator.

Mai simplu, un simț clar al ierarhiei vizuale ghidează oamenii către conținut sau acțiuni importante. Într-o reclamă tipărită, aceasta ar fi limita, în timp ce într-un produs digital, ar putea fi mesaje de brand sau un îndemn principal la acțiune.

Este o modalitate incredibil de utilă de a crea o experiență ordonată și intenționată a clientului, îmbunătățind în același timp șansele de a obține un rezultat strategic.

Iată câțiva pași pe care designerii UX îi pot face pentru a obține un sentiment clar de ierarhie vizuală în produsele digitale și pentru a duce experiențele clienților la nivelul următor.

Definiți UX și obiectivele de brand

Folosind o varietate de metode, multe echipe de produse definesc deja obiectivele UX pentru fiecare secțiune a produsului lor.

Conturarea definiției obiectivelor UX prin îndeplinirea criteriilor pentru metodologia SMART (Specific, M easurable, A ctionable , Relevant , Trackable ) este o modalitate populară de a face acest lucru. Există un articol bun despre asta aici.

La fel de importante sunt obiectivele mărcii. Acestea reflectă obiectivele generale ale afacerii, atât din perspectiva mărcii, cât și din perspectiva comercială. Un exemplu de obiective ale mărcii pentru o pagină de destinație de servicii auto ar fi: a) stabilirea mărcii ca un serviciu premium și b) încurajarea căutărilor de mașini.

Cea mai simplă și eficientă modalitate de a documenta obiectivele UX și ale mărcii ale diferitelor faze ale călătoriei clientului este de a desfășura un atelier de ierarhie vizuală colaborativă.

Folosind un instrument de colaborare cu o pânză largă, cum ar fi Milanote sau chiar Sketch, aranjați ecranele prototip în ordine cronologică generală. Invitați practicienii cheie la o întâlnire online sau fizică, asigurându-vă că există reprezentare atât din perspectiva UX, cât și din perspectiva mărcii.

Apoi, partajați ecranul (sau conectați-vă la un monitor) și începeți adnotarea!

Acest lucru demarează procesul de identificare a UX și a obiectivelor de brand pentru fiecare secțiune a experienței clienților și pune în mișcare un flux de lucru strategic care poate fi valorificat pe tot parcursul procesului de proiectare.

Clasați acțiunile și conținutul pentru o ierarhie vizuală clară

Acum că obiectivele UX și ale mărcii sunt la locul lor, este timpul să definiți ierarhia vizuală adecvată a fiecărei acțiuni sau piese de conținut și să documentați ca referință în timpul lucrărilor de proiectare ulterioare.

În primul rând, este nevoie de o taxonomie. Cel mai bine este să folosiți o scală de la 1 la 3 - 1 fiind cel mai important, 3 fiind cel mai puțin.

Folosind formatul de pânză largă profilat mai devreme, începeți să adnotați în colaborare aspectul prototipului.

În acest exemplu, există un obiectiv UX de „ Vreau să aflu mai multe despre serviciul acestui brand pentru a determina dacă se potrivește bugetului, nevoilor și preferințelor mele ”. Obiectivele mărcii sunt a) stabilirea mărcii ca un serviciu premium și b) încurajarea căutărilor de mașini.

În lumina acestui fapt, mesajului de brand Găsește-ți mașina ideală din peste 500 de mașini i s-a atribuit o ierarhie de 1, la fel ca și formularul însoțitor și CTA.

În ciuda importanței sale pentru experiența globală a clienților, logo-ului propriu-zis (și navigației) i s-a atribuit un 2, deoarece nu joacă un rol la fel de important în îndeplinirea obiectivelor UX și ale mărcii.

Conținutul suport este marcat cu 3, ceea ce poate părea contraintuitiv. Cu toate acestea, aderă la fluxul narativ care începe să prindă contur, cu mesajul mărcii și funcționalitatea „începeți” ca obiectiv principal, apoi logo-ul și navigarea pentru a stabili identitatea și structura premium a serviciului, apoi conținutul suport pentru liniștește, oferă context și inspiră clientul.

Pe măsură ce designerii devin obișnuiți să ia în considerare ierarhia vizuală, este ușor să începeți să apreciați posibilitățile narative pe care le dezvăluie, adăugând profunzime reală interfețelor de utilizator și poveștilor pe care le spun.

Construiți ierarhie vizuală în sistemul de proiectare

Acum că obiectivele și clasamentele ierarhiei vizuale sunt stabilite, poate fi creat limbajul vizual care le va aduce la viață. Să presupunem că există deja un sistem de proiectare (dacă nu, acest lucru ar trebui făcut mai întâi!) și că o serie de elemente de UI au fost deja proiectate.

Primul loc de început este compoziția - aspectul șabloanelor necesare. Luați în considerare unde ar trebui să apară elementele bine clasate (așa cum a fost descris mai devreme, nu este întotdeauna cel mai așteptat). Pot fi necesare mai multe variații pentru a satisface o serie de scenarii. Pentru a vă asigura că nimic nu este trecut cu vederea mai târziu în proiect, designerii ar trebui să-și facă timp pentru a le crea acum.

Mai târziu, în procesul de proiectare, o serie de modele de exemplu pot fi incluse în documentul sistemului de proiectare, cu simboluri live ale modelelor UI (astfel încât designerii care lucrează la proiect au cele mai recente versiuni).

Odată ce s-a stabilit o idee largă a compoziției, pot începe să fie create variante ale elementelor UI.

Luați umilul antet al paginii. În acest exemplu dintr-un proiect recent pentru o consultanță de resurse umane, există trei variante în sistemul de proiectare pentru a satisface diferitele ranguri ale ierarhiei vizuale.

Designerii pot extinde acest lucru cu elementele de bază ale interfeței lor de utilizare. De exemplu, într-un proiect recent pentru o aplicație de recrutare populară, profunzimea a fost folosită pentru a diferenția panourile de conținut - cu cât profunzimea este mai mare, cu atât ierarhia vizuală era mai mare.

Ierarhia vizuală poate fi proiectată în aproape fiecare element al limbajului vizual al unei mărci: compoziție, tipografie, profunzime, imagini, iconografie și tonul vocii. Cu cât designul merge mai profund, cu atât experiența clientului va fi mai coerentă și concentrată.

Învelire

Încorporarea unui flux de lucru cu ierarhie vizuală în procesul de proiectare are ca rezultat experiențe de utilizator considerabil mai bune. Face acest lucru oferind designerilor un mijloc de a atribui un rang diferitelor tipuri de conținut, rezultând interfețe de utilizator care nu numai că se simt ordonate și intuitive, dar permit și îndeplinirea obiectivelor de bază ale mărcii.

Ierarhia vizuală clară nu numai că vă îmbunătățește UX, ci și stabilește un flux de lucru sustenabil care oferă procesului de proiectare un accent strategic - esențial într-un mediu modern de proiectare a produsului.

Citiri suplimentare pe Blogul Toptal Design:

• Principii de proiectare: Introducere în ierarhie
• Cele mai bune practici de design UI și greșeli comune
• Explorarea principiilor Gestalt ale designului
• Ghidul cuprinzător al arhitecturii informaționale
• Îmbunătățiți-vă UX cu aceste principii de design de interacțiune de succes