Principii de UX

Ce este “User Experience”?

User Experience (UX) reprezintă totalitatea emoțiilor, crezurilor, preferințelor, percepțiilor, răspunsurilor fizice și psihologice, precum și comportamentele și realizările utilizatorului, generate în timpul folosirii și după folosirea unui produs sau serviciu web.

User Experience Design-ul (UXD) îmbunătățește experiența utilizatorului vizavi de acel produs sau serviciu web. O bună experiență a utilizatorului va crește automat gradul de adopție al acelui produs sau serviciu web.

User Experience Designer-ul este acea persoană care înțelege scopurile și contextul de folosire al potențialilor utilizatori ai unui produs sau serviciu web. El folosește această înțelegere pentru a proiecta un produs sau serviciu web în limita constrângerilor tehnice, legale sau de business specifice acelui produs sau serviciu web.

Un User Experience Designer folosește următoarele metode și discipline:

  • user (experience) research
  • product design
  • interaction design
  • arhitectura informației (information architecture)
  • usability
  • prototyping
  • interface design
  • content strategy
  • psihologie. [1]

Una din regulile de bază ale User Experience Design-ului spune că You are not your user. Cu alte cuvinte, dacă într-un proiect web sărim peste etapa de user experience research și pornim de la presupunerile pe care noi le avem despre utilizatori, atunci riscăm să construim un produs sau serviciu web pe placul și nevoile noastre (ale echipei de dezvoltare), nu pe placul și nevoile utilizatorilor finali ai acelui produs sau serviciu web.

User Experience Designer-ul este dator să testeze pe utilizatori reali dacă produsul sau serviciul web proiectat de el este ușor de folosit și intuitiv pentru utilizatori. Acest lucru se face prin teste cu utilizatorii, folosind metode:

  • cantitative: task success rate, time on task, error rate, proporția de folosire a navigării versus căutării pe website etc
  • calitative: măsurarea nivelului de satisfacție a utilizatorilor, așteptările și performanțele raportate etc

User Experience Designer-ul este dator să livreze (în primul rând, dar nu numai) un prototip al produsului sau serviciului web. Odată prototipul validat de client (beneficiarul indirect al proiectului) și testat pe utilizatori, proiectul poate trece în următoarea fază de dezvoltare: visual design, în care prototipul capătă forma vizuală finală ce va defini acel proiect (branding, fonturi, culori, forme, imagini etc).

Această pagină trece în revistă doar cele mai importante principii de UXD.

Cum definim o pagină “usable”?

O pagină web se poate numi “usable” dacă ea răspunde simultan la următoarele 3 întrebări:

  1. Cum ajung pe această pagină?
  2. Ce pot face pe această pagină? (acțiuni posibile)
  3. Unde pot să ajung pornind de la această pagină?

Răspunsul la aceste 3 întrebări îl aflăm (în primă etapă) dacă definim mai întâi arhitectura informației (Information Architecture - IA) pentru acel website (aplicație).

1. Arhitectura Informației (IA)

Este arta și știința de a organiza informația pe un website, un intranet, o comunitate online sau un produs software, cu scopul de a asigura partea de usability și findability. [2]

O bună Arhitectură a Informației ajută oamenii să înțeleagă mediul înconjurător și să găsească rapid ceea ce căutau, fie că este vorba de orientarea în lumea reală (într-un supermarket, o gară, un spital etc) sau de orientarea în lumea digitală (un website, o aplicație software). [3]

Arhitectura Informației are 5 mari componente:

  • Sisteme organizaționale: modul în care organizăm informația pe un website
  • Sisteme de etichetare (labels): modul în care reprezentăm informația
  • Sisteme de navigare: modul în care putem naviga într-un website
  • Sisteme de căutare: modul în care căutăm informația pe un website
  • Tezaure, vocabulare controlate, metadata: componente-suport pentru navigare și căutare, invizibile utilizatorului. [4]

1.1 Tipuri de sisteme organizaționale

  • alfabetice (de evitat în majoritatea cazurilor, în favoarea tipurilor de mai jos)
  • cronologice
  • geografice
  • după subiect (topic)
  • după activitate (task)
  • după auditoriu (tipuri de utilizatori)
  • după formatul informației (audio, video, documente text etc)
  • după clasificări sociale (generate de utilizatori): de exemplu, free tag-urile de pe Flickr
  • o combinație între două sau mai multe moduri de mai sus. [4]

1.2 Tipuri de etichetare (labels)

  • link-uri contextuale (hyperlinks)
  • titluri de paragrafe (headings)
  • opțiuni de navigare (exemple de etichete standard: Site map, Contact, FAQ, Help etc)
  • termeni de index (keywords, tags etc)
  • iconițe (etichete vizuale). [4]

Cum creezi etichete eficiente? (checklist)

analizează conținutul website-ului

cere autorilor de conținut (content writers) de pe website să propună etichete

cere sugestii de la utilizatorii avansați ai website-ului (aplicației) sau de la experții în acel domeniu

folosește exerciții de card sorting

analizează search log-urile de pe website (din aplicație)

analizează tag-urile generate de utilizatori. [4]

1.3 Tipuri de sisteme de navigare

  • navigare globală (meniu global): unde mă aflu în cadrul website-ului?
  • navigare locală: ce conținut pot găsi în vecinătatea paginii curente?
  • navigare contextuală: ce conținut pot citi mai departe, pornind de la pagina curentă?
  • navigări suplimentare: site map-uri, indecși de website, tutoriale pentru o activitate anume de pe website etc
  • navigare socială: “Cele mai populare articole”, “Ultimele articole accesate” etc. [4]

Navigarea globală poate fi:

  • broad and shallow (meniul global conține multe secțiuni, dar fiecare secțiune are un submeniu mic, de exemplu website-urile de știri de genul nytimes.com)
  • narrow and deep (meniul global conține puține secțiuni, dar fiecare secțiune are un submeniu vast, de exemplu website-urile de comerț online de genul amazon.com).

Ambele tipuri de navigare globală vin cu avantaje și dezavantaje, prin urmare natura website-ului va determina tipul de navigare globală.

1.4 Sisteme de căutare

Este recomandat să oferi o funcție de căutare în website dacă:

  • website-ul conține foarte multe pagini (de ordinul zecilor)
  • poți (și ai resursele necesare) să optimizezi sistemul de căutare în website (adăugarea de filtre pentru căutare avansată, afișarea rezultatelor căutării în funcție de relevanță/alte criterii, afișarea de sugestii pentru căutările care nu au generat niciun rezultat, indexarea rezultatelor de căutare pentru anumiți etc)
  • website-ul este foarte fragmentat (de exemplu Amazon.com, Wikipedia.com)
  • căutarea este un mod de a învăța nevoile utilizatorilor de pe website (vezi analiza search log-urilor din paragraful anterior)
  • utilizatorii se așteaptă să găsească o astfel de funcție pe website, prin natura website-ului
  • utilizatorii nu sunt dispuși să folosească navigarea pe website, deoarece nu se potrivește nevoilor lor. [4]

Cum proiectezi o interfață de căutare bună? (checklist)

ia în calcul nivelul de expertiză și motivare al utilizatorilor care caută pe website (de exemplu, “utilizator începător” versus “utilizator avansat”)

ia în calcul tipul de nevoie de informare (căutare avansată sau căutare simplă?)

ia în calcul tipul de informație căutat (căutare de pagini, căutare pe texte, căutare pe anumite formate etc)

ia în calcul cantitatea de informație căutată (câte rezultate de căutare să afișăm și în ce ordine, cum filtrăm rezultatele căutării pentru a restrânge căutarea la ceva mai specific etc)

afișează în pagina de rezultate pentru căutare care au fost cuvintele care au definit căutarea (search query)

explică de unde au venit rezultatele căutării (de pe ce pagină, din ce categorie de produse, etc)

explică utilizatorului ce căutare a făcut și cum o poate reface (utilizând filtre, reformulând căutarea, folosind operatori booleeni, afișând numărul de rezultate întoarse de căutare etc)

integrează căutarea cu navigarea în website (de exemplu, prin afișarea categoriilor de produse sau a altui tip de ierarhie pe pagina cu rezultatele căutării)

marchează căutările care nu au generat niciun rezultat prin metodele standard (de exemplu, folosirea paginii 404 pentru paginile căutate care nu există pe website). [4]

1.5 Tezaure, vocabulare controlate, metadata

Tag-urile metadata sunt folosite pentru a descrie documente, pagini, imagini, software, fișiere audio/video și alte obiecte de conținut, cu scopul de a îmbunătăți navigarea și extragerea de informații.

Vocabularele controlate sunt liste de termeni echivalenți (synonym rings) sau liste de termeni preferați (authority file).

Tezaurele sunt un tip de vocabulare controlate în care relațiile de echivalență, de ierarhie și de asociere sunt identificate cu scopul de a îmbunătăți extragerea informației. De exemplu, un tezaur despre vin pornește de la termenul “vin” și conține sub-termenii “vin roșu”, “vin alb”, care la rândul lor conțin sub-termenii “vin dulce”, “vin sec”, “vin demi-sec”, care la rândul lor conțin sub-termenii specifici unui soi anume de vin (“Chardonnay”, “Cabernet Sauvignon” etc). [4]

Aceste componente de IA sunt folosite de obicei când proiectăm baza de date a website-ului (aplicației).

1.6 Cum creezi o bună arhitectură a informației (checklist)

Vorbește cu beneficiarii indirecți a acelui website (aplicație), pentru a defini:

  • tipurile de public-țintă (personas)
  • scopurile website-ului
  • funcțiile necesare website-ului

Identifică scopurile și așteptările utilizatorilor finali ai website-ului (prin user experience research):

  • organizează interviuri cu 7-10 utilizatori reprezentativi ai fiecărui tip de public-țintă (personas)
  • trimite chestionare unui număr cât mai mare de utilizatori finali (necesită zeci sau sute de participanți).

Definește ariile de conținut ale website-ului:

  • analizează conținutul existent deja pe website (dacă acesta există) și decide ce tipuri de conținut vor fi păstrate/șterse/actualizate
  • creează o listă cu toate ariile de conținut pe care dorești ca utilizatorii website-ului să le găsească.

Organizează ariile de conținut folosind exerciții de card sorting pe utilizatori finali.

Creează site map-ul website-ului și testează-l pe utilizatori finali.

Desenează structura navigațională a website-ului, pornind de la site map. Ține cont de navigarea “broad and shallow” versus navigarea “narrow and deep” (explicată la punctul 1.3).

Etichetează ariile de conținut folosind etichete (labels) scurte (de maxim 3 cuvinte) și la obiect.

Creează wireframes pentru a reprezenta grafic organizarea conținutului fiecărei pagini din website. [5]

2. User Experience Research (UX Research)

Este acea ramură din User Experience Design care studiază impactul pe care un design anume îl are asupra unui public-țintă al proiectului web. [6]

Ce scopuri are UX Research-ul?

  • ajută echipa de dezvoltare să nu proiecteze pentru un singur tip de utilizatori (ei înșiși), ci să descopere principalele tipuri de public-țință ale unui proiect web
  • confirmă sau infirmă presupunerile pe care echipa de dezvoltare le are în privința utilizatorilor finali ai unui website (aplicație)
  • ajută echipa de dezvoltare să identifice nevoile, motivațiile, scopurile și modelele mentale (mental models) ale utilizatorilor finali
  • găsește punctele comune ale diferitelor tipuri de public-țintă
  • reduce costurile de dezvoltare web necesare atingerii succesului unui proiect web, prin luarea de decizii de design informate (conforme cu realitatea de pe teren, nu bazate pe presupuneri). [6,7,8]

Când trebuie realizat UX Research-ul? (checklist)

înainte de a începe proiectarea website-ului (aplicației), folosind cerințele de proiect de la beneficiarii indirecți ai proiectului, interviuri, chestionare, observații făcute pe utilizatorii curenți sau posibili ai proiectului, web analytics etc

de-a lungul proiectării website-ului (aplicației), folosind teste de usability, teste cu utilizatorii, A/B testing, card sorting etc

după lansarea website-ului (aplicației), pentru a măsura satisfacția utilizatorilor și nivelul de succes al proiectului. [7]

Principalele metode de UX Research:

  • cantitative (metode prin care putem număra câți utilizatori reacționează pozitiv la design-ul testat):
    • timpul necesar realizării unei activități-cheie de pe website (secunde)
    • rata de succes pentru o activitate-cheie de pe website (procente din numărul total de participanți la teste cu utilizatorii)
    • numărul de erori apărute în timpul realizării unei activități-cheie de pe website
    • web analytics (număr de utilizatori pe website, bounce rate, timpul mediu petrecut într-o pagină, click-through rate, rata de conversie etc) [9]
    • chestionare de satisfacție privind interacțiunea cu website-ul: USE, SUS, NPS etc
  • calitative (metode prin care putem afla de ce utilizatorii reacționează într-un anume fel la design-ul testat):

3. Interaction Design (IxD)

Interaction Design-ul (IxD) este acea disciplină care definește structura și comportamentul sistemelor digitale interactive, cu scopul de a facilita relația dintre utilizatori și acestea, fie că este vorba de calculatoare, telefoane mobile sau aparate electronice (ATM-uri, tonomate de cafea etc). [10,11]

Cele mai comune metodologii de IxD

  • Goal-oriented design: design-ul unui website (aplicație) trebuie să aibă ca prim scop rezolvarea problemelor utilizatorilor (satisfacerea unor nevoi și dorințe specifice); dogme specifice acestei metodologii:
    • proiectează mai întâi, programează după aceea
    • separă responsabilitatea de a proiecta de responsabilitatea de a programa
    • calitatea produsului livrat și satisfacția utilizatorilor cade în sarcina designerilor
    • definește un utilizator specific pentru produsul care trebuie proiectat
    • lucrează în echipe de două persoane [11]
  • The 5 Dimensions:
    • 1D: cuvintele folosite în interfața digitală trebuie să fie simplu de înțeles și să comunice ușor informația către utilizatori
    • 2D: reprezentările vizuale (imagini și grafice) trebuie folosite cu moderație
    • 3D: obiectele fizice sau spațiul se referă la partea hardware a sistemului informatic (mouse, keyboard, cameră web, telefon mobil etc)
    • 4D: timpul este durata în care utilizatorul interacționează cu primele 3 dimensiuni; include modurile de a măsura progresul într-o activitate (sunet, animație etc)
    • 5D: comportamentul se referă la emoțiile și reacțiile utilizatorului în momentul interacțiunii sale cu sistemul [11]
  • Affective interaction design: anumite aspecte ale design-ului pot influența răspunsul emoțional al utilizatorilor (motivația de a folosi un software, curba de învățare a acestuia, feedback-ul venit din interfață, eficiența percepută a acelui software, gradul perceput de usability):
    • iconițe dinamice
    • animații
    • sunete
    • fonturi
    • paleta de culori
    • așezarea în pagină a elementelor [12]

Cum proiectezi pentru interacțiune?

definește modul în care utilizatorii pot interacționa cu interfața:

  • Ce poate face utilizatorul cu mouse-ul, cu degetul, cu stylus-ul, pentru a interacționa direct cu interfața?
  • Ce comenzi poate da utilizatorul (care să nu fie în mod direct parte din produsul software) pentru a interacționa cu acel produs?

oferă utilizatorilor indicii despre modul de comportare a interfeței înainte ca aceștia să ia acțiune:

  • Ce anume din aspectul interfeței (culoare, formă, dimensiune etc) oferă utilizatorului indicii despre cum ar putea funcționa interfața?
  • Ce informație oferi utilizatorului pentru a-l informa ce se va întâmpla în interfață înainte ca acesta să efectueze o acțiune?

anticipează și diminuează erorile:

  • Există constrângeri puse în interfață astfel încât erorile să fie prevenite?
  • Mesajele de eroare oferă vreun mod prin care utilizatorul să corecteze eroarea apărută sau măcar explică de ce a apărut acea eroare?

ia în considerare sistemul de feedback și timpul de răspuns:

  • Ce feedback primește utilizatorul odată ce a efectuat o acțiune?
  • Cât timp trece de când o acțiune a utilizatorului a avut loc până când interfața oferă un răspuns?

gândește-te strategic la fiecare element din interfață:

  • Sunt elementele din interfață de o mărime rezonabilă pentru interacțiunea cu ele?
  • Sunt colțurile și marginile folosite strategic pentru a localiza elemente interactive precum meniurile?
  • Sunt folosite standardele actuale?

simplifică interfața pentru a fi mai rapidă de învățat:

  • Este informația din pagină împărțită în 7 (plus/minus 2) itemi la orice moment dat? (citește despre progressive disclosure)
  • Este partea care ține de utilizator simplificată la maxim?
  • Sunt folosite în interfață formate cunoscute? [13]

Bibliografie

  1. User Experience Design, Wikipedia
  2. Information Architecture, Wikipedia
  3. What is Information Architecture?
  4. Information Architecture: For the Web and Beyond
  5. Guide to Creating Website Information Architecture and Content
  6. User Research Basics
  7. Complete Beginner’s Guide to UX Research
  8. A Crash Course in UX Design Research
  9. Web analytics, Wikipedia
  10. What is interaction design?, The Interaction Design Association
  11. Complete Beginner’s Guide to Interaction Design
  12. Interaction design, Wikipedia
  13. Interaction Design Basics