Navigarea în utilități Cum influențează designul experienței utilizatorilor
Pentru a proiecta o navigație eficientă și ușor de utilizat, nu trebuie doar să ne gândim cum să facem acest lucru grupați conținutul nostru în meniuri bine structurate pentru a permite utilizatorilor să găsească cu ușurință ceea ce doresc, dar și despre cum să să proiecteze instrumentele de care vor avea nevoie pentru a interacționa cu site-ul
Se numește navigare care nu este strict legată de conținut și care ajută utilizatorii să realizeze diferite acțiuni utilitare de navigare, și este un aspect mai puțin discutat, dar foarte important, al designului de experiență a utilizatorilor. Barele de căutare, formularele de conectare și de înscriere, butoanele de abonare, de partajare și imprimare, coșurile de cumpărături, meniurile contextuale și instrumentele care permit utilizatorilor să schimbe limbile sau dimensiunea fontului sunt exemple tipice de navigare utilitar.
Proiectarea lor nu este la fel de ușoară cum pare la prima vedere necesită luarea în considerare a elementelor de care avem nevoie, unde să le plasăm și cum să le afișăm pentru a ne asigura că vizitatorii noștri îi pot găsi rapid și pot înțelege cum funcționează.
Cum influențează navigarea utilitarului UX
Atunci când proiectăm navigația utilitară, trebuie să decidem cum vrem ca utilizatorii noștri să interacționeze cu site-ul nostru. Trebuie să le oferim un structură de interacțiune care se potrivește obiectivelor noastre de afaceri, îi determină pe utilizatori să treacă prin călătoria clientului, le oferă opțiuni ușor de înțeles și le oferă utilizatorilor o experiență plăcută.
Pentru inceput, ei trebuie să poată efectua rapid acțiunile pe care le doresc. Dacă le permitem să facă acest lucru, satisfacția clienților va crește, iar utilizatorii mulțumiți tind să-și petreacă mai mult timp și mai mulți bani pe site-uri web.
Pagina principală a AirBnB respectă acest principiu UX, iar meniul său de sus conține numai unelte utilitare. Nu este o soluție obișnuită, dar dacă aruncăm o privire la rata de creștere incredibilă a AirBnB, este alegerea perfectă pentru ei.
Cele 4 elemente de meniu de top vizează cele 4 persoane principale care vizitează de obicei site-ul AirBnB: persoane care sunt interesate să devină gazdă (“Deveniți un gazdă”), persoane care doresc să rezolve o problemă care a avut loc în timpul utilizării serviciului (“Ajutor”), utilizatorii noi și cei care se întorc (“Inscrie-te” și “Logare”). Pagina principală a companiei AirBnB conține, de asemenea, o bara de căutare rapidă, care este un instrument crucial pe un site de închiriere de cazare.
În al doilea rând, utilizatorii nu au nevoie de utilități inutile, deoarece prea multă aglomerație distrage atenția și reduce focalizarea. Ce instrumente sunt necesare în navigația noastră de utilitate și care nu depind de natura site-ului nostru. De exemplu, poate fi util să includeți o afișare de tipărire pe un blog sau pe un site de știri, dar aceeași caracteristică poate fi o distragere inutilă pe un forum sau pe un site de social media.
Washington Post, de exemplu, afișează navigarea utilitarului pe paginile sale de postare unică diferit față de pagina de pornire. În acest fel, utilizatorii întâlnesc doar unelte utilitare relevante și nu sunt presarate cu opțiuni pe care nu ar dori să le utilizeze oricum.
Există 3 elemente de navigare utilitare pe care vizitatorii ar putea să le folosească la nivel de site. Acestea sunt incluse inteligent în bara de sus fixă (instrument de căutare, “Conectare”, și “Abonati-va”), însă utilizatorii nu trebuie să se gândească la opțiunile legate de postări unice, cum ar fi “Listă de citit” când navighează pe pagina de pornire sau pe una din paginile categoriei.
În al treilea rând, utilizatorii trebuie să înțeleagă rapid ce pot face pe site-ul nostru. Vizitatorii nu știu neapărat ce doresc, deci trebuie întotdeauna să le oferim informații despre opțiunile pe care le au.
Dacă vă uitați la captura de ecran de mai jos, puteți vedea că The New York Times informează utilizatorii despre disponibilitatea a 3 ediții diferite: american, Internaţional, și chinez, și le permite, de asemenea comuta rapid între cele trei. Acest exemplu extraordinar de navigare utilitară inteligentă arată utilizatorilor opțiuni mai puțin vizibile, pe care probabil nu le-ar găsi singure, într-un mod ne-obstrucționat și elegant.
Găsiți locul cel mai bun
Există destinații de plasare tipice pentru navigarea utilitară, unde utilizatorii intuitiv căută aceste instrumente, pentru că la asta au obișnuit pe majoritatea site-urilor web. Ruperea convențiilor de design web este considerată o practică de utilizare a experților rău, și este în special adevărat pentru navigația utilitar care, în cele mai multe cazuri, este mai mult despre uzabilitate decât creativitatea.
Deoarece navigarea în utilități este secundară navigării bazate pe conținut în majoritatea site-urilor web, este frecvent plasată în zone mai puțin proeminente, dar încă vizibile. Aceasta înseamnă de obicei (1) colțul din dreapta sus al site-urilor web și (2) partea inferioară a subsolului. este o idee bună de a urma aceste convenții, la fel de acestea sunt locurile în care majoritatea utilizatorilor caută mai întâi scule utilitare.
După cum vedeți mai jos, Reuters și-a poziționat majoritatea instrumentelor de utilitate în aceste două zone tipice, în colțul din dreapta sus al site-ului și partea inferioară a subsolului sub navigația bazată pe conținut. Soluția unică aici este footerul suplimentar fix cu 2 elemente de utilitate pe care designerii le-au considerat cele mai importante: “Autentificare sau înregistrare” și “Ultimele de la My Wire”.
Este interesant de menționat că zona de navigare suplimentară a utilităților este încă plasată într-un fel de subsol unde utilizatorii ar căuta în mod normal instrumente similare, astfel încât designerii Reuters au fost creativ într-un fel dar au urmat încă convențiile de design web pentru a menține gradul de utilizare.
Construiți o structură logică
Gruparea instrumentelor utilitare într-o structură logică este crucială dacă dorim să construim un site cu o rată de conversie ridicată. Aceasta poate fi o provocare, chiar dacă nu vrem să oferim utilizatorilor multe opțiuni, dar Amazon ia complexitatea navigării utilitare la nivelul următor. Amazon are o navigație incredibil de complicată, cu multe opțiuni, dar dacă folosim în mod regulat Amazon, nu pare așa. Aceasta este magia designului inteligent.
Ei nu au plasat doar navigația utilitară în colțul din dreapta sus unde utilizatorii se așteaptă să o găsească, ci și-au împărțit în 3 grupuri principale: (1) o bară de căutare, (2) informații legate de utilizator ) și (3) acțiunile pe care utilizatorii le pot efectua pe site.
Este inteligent deoarece, datorită indiciilor vizuale cum ar fi coșul de cumpărături sau pictograma de căutare, clienții pot decide în clipeală de ochiul grupului pe care doresc să îl folosească și de atunci pot ignora celelalte două. Există doar un singur grup (“Contul tău”, “Încercați Prime”, “Coş”, și “Lista de dorințe”) care are submeniuri care sunt, de asemenea, structurate logic, iar diferitele grupuri de submeni sunt împărțite prin separatoare discrete dar vizibile pentru a ajuta utilizatorii să găsească rapid ceea ce doresc.
Creați un design vizual eficient
Designul vizual al navigației utilitare eficiente trebuie să urmeze faimosul principiu KISS (Keep It Simple, Stupid). Este recomandat să furnizați pictograme cu etichete de text, să faceți comenzi ca controale și să evidențiați vizual cele mai importante acțiuni. De asemenea, poate fi o idee bună să se facă distincția între navigația bazată pe utilitate și conținutul prin utilizarea unui design ușor diferit.
Două exemple minunate de design vizual eficient pot fi găsite pe site-urile Walmart și Etsy. Designerii au plasat navigația utilitară în partea de sus a celor două site-uri și au evidențiat-o cu culori care variază de la restul navigației, Walmart cu fundal albastru și Etsy cu fonturi albastre.
Ambele site-uri accentuează cele mai importante acțiuni ale utilizatorilor cu diferite elemente de design vizual, Walmart utilizează culoarea galbenă pentru butoanele Căutare și Conectare, în timp ce Etsy dă o margine albastră discretă la butonul Conectare și include o pictogramă gri de coș de cumpărături deasupra meniului Cart.
Acesta este singurul loc în care Etsy utilizează o pictogramă în meniul său utilitar, în timp ce Walmart afișează o pictogramă lângă fiecare element, dar tot nu uită să includă etichetele de text necesare în dreptul pictogramelor.
