Lista de verificare a designului UX

În timpul procesului de proiectare, unele defecte ale produsului dvs. vor trece neobservate. Acele lucruri mici (sau uneori mari) pot face foarte mult să rănească experiența pe care o are utilizatorul în timp ce vă folosește software-ul. Am pregătit o listă de puncte pe care să le verificați înainte ca designul să fie semnat.

Vă rugăm să rețineți că nu toate aceste puncte se aplică tuturor produselor, dar, în general, acestea sunt cele mai relevante.

Design de interacțiune

01 – Acțiunile repetitive sau activitățile frecvente se simt fără efort

De ce contează: acțiunile repetitive pentru aceeași ieșire (de exemplu, completarea diferitelor formulare cu aceleași informații) este o sarcină dificilă care nu ajută utilizatorul să-și atingă obiectivele mai rapid sau mai bine. Este posibil ca utilizatorul să încerce, de asemenea, să găsească o cale de ocolire: de exemplu, căutând concurenți care să-l ajute să o facă mai rapid/mai bine.

Cum să-l testați: ar trebui să începeți prin a analiza toate fluxurile produsului și observați comportamentul utilizatorului. Vrei să te asiguri că, dacă sunt prezente acțiuni repetitive, există o modalitate de a le facilita: o opțiune de a utiliza informațiile introduse anterior.

02 – Utilizatorii se pot recupera cu ușurință din erori

De ce contează: de multe ori, utilizatorii efectuează acțiuni neintenționate sau acțiuni care nu au condus la rezultatele dorite – iar permițându-le să se întoarcă și să încerce din nou înseamnă că nu vor fi frustrați și se vor recupera ușor și vor continua să se miște pe flux.

Cum să-l testați: mai întâi, asigurați-vă că sistemul dvs. de navigație permite revenirea și că acțiunile pot fi anulate. Apoi, atunci când efectuați teste de utilizare, creați scenarii în care utilizatorul va efectua cel mai probabil acțiunea greșită și verificați dacă își poate recupera cu ușurință.

03 – Utilizatorii sunt sprijiniți corespunzător în funcție de nivelul lor de expertiză

De ce contează: este important să vă asigurați că utilizatorii începători în produsul dvs. au o experiență de învățare fără probleme. Cu toate acestea, odată ce sunt deja familiarizați cu produsul, acest lucru ar trebui să dea loc unor instrumente care îi ajută să se deplaseze mai rapid prin fluxuri. Ambele scenarii îmbunătățesc gradul de utilizare și reținerea. De exemplu, comenzi rapide pentru utilizatori experți, sfaturi pentru utilizatorii începători etc.

Cum să-l testați: În primul rând, verificați dacă aveți instrumente pentru ambele categorii de public. Apoi, efectuați teste de utilizare cu utilizatori începători și experți pentru a vedea dacă aceste instrumente sunt utilizate corect.

04 – Accesarea ajutorului nu împiedică progresul utilizatorului

De ce contează: utilizatorii solicită ajutor ori de câte ori sunt blocați într-o anumită parte a produsului dvs. Este important ca ajutorul – online sau offline – să fie suplimentar și să permită utilizatorului să reia lucrul de unde a plecat.

Cum se testează: creați scenarii de testare în care utilizatorii vor cere ajutor și vor vedea dacă fluxurile de lucru și progresul lor sunt întrerupte.

Design vizual

05 – Nu mai mult de trei culori primare

De ce contează: aceasta nu este o regulă fixă ​​– și uneori, pentru cazuri specifice, pot fi folosite mai mult de trei culori primare. Cu toate acestea, rețineți că combinarea a trei culori este deja dificilă, așa că în majoritatea cazurilor ar trebui evitate mai mult decât atât.

Cum să-l testați: asigurați-vă că paleta de culori pe care ați folosit-o la proiectarea produsului nu are mai mult de trei culori primare.

06 – Numai culoarea nu este folosită pentru a transmite ierarhie, conținut sau funcționalitate

De ce contează: a avea un produs care este accesibil nu este un plus – este o necesitate. Persoanele cu dizabilități de vedere, cum ar fi daltonismul, se bazează exclusiv pe culoare pentru a transmite ierarhie, conținut sau funcționalitate. Aceasta înseamnă că nu vor putea folosi produsul dvs. și vor fi un grup demografic exclus.

Cum să-l testați: colorfilter.wickline.org vă va permite să puneți un filtru de culoare deasupra paginii dvs. web și să-l testați pentru diferite tipuri de daltonism. De asemenea, puteți să capturați ecranul produsului și să îl convertiți în tonuri de gri într-un editor de imagini și să vedeți dacă puteți deosebi ușor culorile.

07 – Ierarhia vizuală direcționează utilizatorul către acțiunea necesară

De ce contează: utilizatorii se bazează pe ierarhia produsului și pe indicii pentru a ști ce să facă și unde să meargă – este esențial să înțeleagă acest lucru și să-i ghideze în mod corespunzător folosind acea ierarhie.

Cum să-l testați: înțelegeți cum funcționează fluxurile din interiorul produsului dvs. și dacă acțiunile sale cheie sunt stimulate de ierarhia vizuală.

08 – Elementele de deasupra ierarhiei vizuale sunt cele mai importante

De ce contează: ierarhia vizuală permite utilizatorilor să scaneze rapid informațiile, acordând prioritate conținutului în funcție de nevoile lor imediate. Elementele din partea de sus a ierarhiei vizuale trebuie să fie cele mai importante pentru afacere și cele mai relevante pentru utilizatori.

Cum să-l testați: capturați ecranul produsului dvs. digital, apoi estompează Gaussian acea captură de ecran pe o rază de aproximativ 5px. Când vă uitați la rezultat, veți vizualiza instantaneu ierarhia și veți observa ce elemente ies în evidență. Sunt acestea cele mai importante pentru afacere și utilizator?

09 – Acțiunea primară este vizual distinctă de acțiunile secundare

De ce contează: având acțiuni principale și secundare distincte înseamnă că utilizatorul nu va fi confundat atunci când interacționează cu produsul dvs. și va fi mai puțin predispus la greșeli. De exemplu, „Trimiteți” și „Anulați” trebuie să fie clar distincte.

Cum se testează: atunci când efectuați teste de utilizare, observați erorile comune care nu rezultă din intenția utilizatorului, ci din acțiuni primare și secundare slab distincte. De asemenea, atunci când revizuiți designul, asigurați-vă că culoarea, dimensiunea, poziționarea și alte elemente diferențiază acțiunile.

10 – Elementele interactive nu sunt abstractizate

De ce contează: atunci când folosesc un produs nou, utilizatorii vin cu un set de așteptări construite din experiența anterioară de utilizare a altor produse digitale – de exemplu, cum ar trebui să arate butoanele și cum ar trebui să funcționeze. Îndeplinirea acestor așteptări înseamnă că nu creați frecări inutile.

Cum să-l testați: mai întâi, revizuiți produsul căutând zonele în care modelele comune nu sunt utilizate. De exemplu, link-uri care nu arată ca link-uri.

11 – Depunerea formularului este confirmată într-o manieră distinctă vizual

De ce contează: este esențial să oferiți utilizatorului confirmarea dacă o acțiune a fost efectuată cu succes sau nu. De exemplu, după trimiterea unui formular, un mesaj clar de confirmare sub forma unui banner color va însemna că utilizatorul poate trece la următoarea sarcină.

Cum să îl testați: verificați toate zonele produsului în care utilizatorul introduce informații. După ce introducerea utilizatorului este completă, declanșați o confirmare privind dacă acțiunea a avut succes sau nu. Asigurați-vă că feedback-ul este clar cu privire la starea finală.

12 – Mesajele de alertă sunt consecvente

Ce este: mesajele de alertă au același stil vizual și apar în aceeași locație în același mod.

De ce contează: având mesaje de alertă consecvente înseamnă că utilizatorul va înțelege întotdeauna ceea ce merită imediat atenție. Neconcordanța cu alertele ar însemna încărcare mentală suplimentară de fiecare dată când apare o nouă alertă.

Cum se testează: Asigurați-vă că mesajele de alertă au același stil vizual și poziționarea lor este similară sau identică.

13 – Mesajele de alertă sunt distincte vizual

De ce contează: asigurându-vă că mesajele de alertă sunt clar diferențiate de alte elemente ale ecranului, utilizatorul le poate observa și/sau acționa asupra lor.

Cum să-l testați: după ce verificați dvs. diferențierea vizuală, vedeți cum reacţionează utilizatorii la mesajele de alertă în testarea gradului de utilizare.

Arhitectura Informației

14 – Navigarea este consecventă

De ce contează: modul în care utilizatorii se orientează și apoi navighează prin produsul dvs. influențează direct dacă își pot îndeplini obiectivele, indiferent de pagina lor curentă.

Cum să-l testați: verificați documentația arhitecturii informațiilor și asigurați-vă că navigarea este accesibilă pe fiecare pagină și că nu se schimbă sau dispare. Înainte de a vă scufunda în designul vizual, încercați sortarea cardurilor sau testarea arborilor pentru a vă asigura că căile arhitecturii informaționale sunt cât mai intuitive posibil.

15 – Spațiu de creștere

De ce contează: nu puteți reproiecta sistemul de navigare și informații al unui produs de fiecare dată când apar noi caracteristici sau conținut. Meniurile de navigare și aspectul general trebuie să accepte mai multe categorii/subiecte fără întrerupere. Proiectarea cu spațiu pentru creștere înseamnă că eforturile majore de proiectare și dezvoltare se extind cu ușurință în întreaga interfață.

Cum se testează: Întrebați toate părțile interesate despre cum ar putea crește conținutul în timp în produs. Veți accepta conținut mai static? Arhitectura va trebui să accepte videoclipuri?

Tipografie

16 – Nu se utilizează mai mult de două familii de tip distincte

De ce contează: aceasta nu este o regulă fixă: uneori este posibil să scoți mai mult de două. Dar, în general, potrivirea a mai mult de două nu este o muncă ușoară. Pentru utilizare și în scopuri vizuale, respectarea a două vă simplifică ierarhia tipografică, ceea ce îmbunătățește înțelegerea.

Cum să-l testați: asigurați-vă că designul dvs. nu amestecă mai mult de două familii de tipuri. Ar fi de ajutor dacă v-ați asigura că familiile pe care le-ați ales sunt potrivite (aflați mai multe aici).

17 – Fonturile utilizate pentru conținutul text au dimensiunea de cel puțin 12 px

De ce contează: Din nou, nu este o regulă fixă ​​– ai putea, teoretic, să folosești dimensiuni mai mici pentru anumite scopuri – dar, în general, lizibilitatea este redusă considerabil pentru dimensiuni sub 12 pixeli.

Cum să-l testați: verificați tot conținutul și asigurați-vă că fonturile folosite pentru ele au o dimensiune de cel puțin 12 pixeli.

18 – Rezervați cuvintele majuscule pentru etichete, anteturi sau acronime

De ce contează: se știe că limitarea utilizării cuvintelor majuscule facilitează înțelegerea – este mai puțin grea din punct de vedere vizual și este mai ușor de digerat de către utilizator. Ar trebui să fie folosit în mod specific pentru cazuri de accent sau foarte restrânse – acronime, de exemplu.

Cum să-l testați: executați o verificare amănunțită a conținutului și asigurați-vă că cuvintele cu majuscule sunt limitate fie la anteturi, etichete sau acronime.

19 – Sunt folosite diferite stiluri de fonturi sau familii pentru a separa conținutul de controale

De ce contează: trebuie să existe indicatori clari cu privire la conținut și ce sunt controalele – adică cu ce poate interacționa utilizatorul. Acei indicatori pot fi dimensiunea, culoarea, poziționarea, fontul etc. Fontul este unul important: folosirea diferitelor stiluri sau familii înseamnă că utilizatorul nu va fi confundat și va identifica ușor cu ce poate fi interacționat.

Cum să-l testați: identificați toate controalele din produsul dvs. și asigurați-vă că acestea ies în evidență din conținut. Când rulați teste de utilizare, acordați atenție dacă utilizatorii întâmpină dificultăți în interacțiunea cu comenzile.

20 – Dimensiunea/greutatea fontului diferențiază tipurile de conținut

De ce contează: are un impact puternic asupra lizibilității și înțelegerii. Făcând o distincție clară între titluri, subtitluri și paragrafe reduce supraîncărcarea mentală în digerarea acelui conținut. Are și beneficii vizuale – arată și se simte mai bine.

Cum să-l testați: atunci când examinați conținutul din produsul dvs., asigurați-vă că titlurile, subtitlurile și paragrafele folosesc diferite dimensiuni și greutăți de font.

Interfața cu utilizatorul

21 – Proximitatea și alinierea

De ce contează: utilizatorul are tendința de a grupa – funcțional sau contextual – articole care sunt aproape unele de altele. O bară de navigare este un bun exemplu în acest sens. Urmând acest model și gruparea elementelor care sunt conectate înseamnă că utilizatorul înțelege instantaneu interfața dvs.

Cum să-l testați: Căutați elemente care sunt similare ca funcționalitate și verificați dacă (dacă este posibil) sunt grupate împreună.

22 – Indicator de progres pentru fluxurile de lucru în mai mulți pași

De ce contează: mai ales pentru fluxurile de lucru în mai mulți pași, utilizatorul se poate simți cu ușurință copleșit sau se poate întreba cât timp este până la sfârșit. Un indicator de progres îi ajută să se localizeze, dar, mai important, creează un sentiment de realizare și reduce ratele de pierdere.

Cum să-l testați: verificați toate fluxurile din interiorul produsului dvs. unde există diferiți pași pentru a realiza ceva, apoi asigurați-vă că progresul este indicat printr-un indicator.

23 – Elementele din prim-plan (cum ar fi conținutul și controalele) se disting ușor de fundal

De ce contează: important pentru persoanele cu dizabilități de vedere. De asemenea, îmbunătățește curba de învățare și înțelegerea utilizatorului. Distincția clară facilitează navigarea, aduce mai multă atenție butoanelor și crește gradul de utilizare în general.

Cum să-l testați: capturați ecranul produsului și estompează Gaussian acea captură de ecran la o rază de aproximativ 3px până la 5px. Când vă uitați la rezultat, puteți spune cu ușurință ce este în prim plan și ce este în fundal?

Felicitări pentru că ai trecut prin listă! Totuși, acesta nu este sfârșitul.

Produsul tău este acum mai solid și s-ar putea să te fi îmbunătățit în mai multe domenii – poate că este mai accesibil acum, de exemplu – dar nu uitați să continuați să testați, să culegeți feedbackul utilizatorilor și să continuați să repetați.