Website de impact pentru ONG-ul tău: Introducere în UX

Cum faci mai prietenos website-ul organizației tale? Cum structurezi informația de pe website-ul organizației tale pentru a comunica mai eficient? Unde poți pozitiona butoane pentru a avea mai mulți abonați la newsletter-ul tău sau a primi mai multe donații? Ce înseamnă o conversie? Ce instrumente poți folosi pentru a îmbunătăți drumul urmat de un vizitator pe website-ul tău? Cum poți să crești durata unei vizite pe site?

Pe 7 martie 2017, participanții la webinar au aflat ce trebuie să facă pentru a avea un website de impact pentru ONG-ul lor, de la Ioana Iordan, UX/UI designer la [e-spres-oh].

  • Ce este și la ce se referă User Experience (UX)
  • Cine sunt cei implicați în procesul de UX și care sunt atribuțiile acestora
  • Cum organizezi informația de pe website-ul tău pentru o transmitere eficientă a mesajului
  • Cum interacționează utilizatorii tăi cu website-ul
  • Ce instrumentele poți folosi pentru îmbunătățirea procesului de UX

 Urmărește înregistrarea webinarului pe canalul nostru de Youtube AICI

Prezentarea completă:

 

UX (User Experience) îi ajută pe cei care vor să creeze un website să facă asta cu cât mai puține fonduri și din cât mai puține încercări. Iată și o serie de termeni care ajută la o înțelegere mai bună a explicațiilor acestui subiect:

Un utilizator este acea persoană care are autoritatea de a folosi o aplicație, echipament, facilitate, proces, sistem sau serviciu pentru a obține un beneficiu sau a rezolva o problemă.

Conversia este momentul în care utilizatorul face acțiunea pe care o dorim de la el (ex: donează, se înscrie ca voluntar etc.) pe site. De altfel, acesta este si scopul pe care ni-l dorim, ca rata de conversie a utilizatorilor să fie cât mai mare. Spre exemplu, rata de conversie pe un site cu 2.000 de vizitatori din care au inițiat donații 200 este de 10%.

De ce avem nevoie de un website?

Un ONG se poate folosi de un website pentru a informa publicul despre identitatea organizației sau despre o anumită problemă. În plus, un website servește la crearea unei comunități, poate ajuta la strângerea de fonduri și va oferi voce și credibilitate ONG-ului.

Din perspectiva utilizatorilor, un website îi va ajuta să găsească informația de care au nevoie sau îi va ajuta să îndeplinească o anumită sarcină (ex: să doneze).

Ce este User Experience Design (UX Design)?

User Experience reprezintă toate aspectele interacțiunii unui utilizator cu un produs, un serviciu sau o organizație/companie. În cazul unui website, acesta este doar interfața dintre organizație și utilizator, iar User Experience ține de tot procesul din spate, nu doar de ceea ce vede utilizatorul.

Informația sau serviciul oferit de organizație trebuie, în primul rând, să aducă valoare. Această valoare se obține din mai mulți factori legați de informație sau produs: utilitate, dezirabilitate, accesibilitate, credibilitate, ușurința în localizare (nu trebuie să caute foarte mult) și ușurința în utilizare (ajung ușor la informația pe care o caută).

Procesul de User Experience Design cuprinde mai multe etape: research (cercetare), creare de conținut, arhitectura informației, design de interacțiune, „uzabilitate” (gradul de utilizare) și design vizual. În cadrul procesului de UX design pot fi implicați de la stakeholderi (membrii fondatori ai organizației), marketeri și copywriteri, până la UX designeri, UI designeri, visual designeri și programatori.

La ce ajută procesul de UX?

  • Creșterea ratei de conversie;
  • Îmbunătățirea percepției asupra organizației;
  • Creșterea rank-ului (obținerea unei poziții mai bune) în Google Search;
  • Creșterea satisfacției și a numărului de utilizatori care ajung pe site-ul organizației (o experiență negativă scade șansele ca utilizatorul să se întoarcă pe site);
  • Reducerea costurilor de implementare (un lucru făcut bine de la început necesită apoi mai puține investiții).

Cele cinci elemente UX

  1. Strategia – De ce construim site-ul? Care sunt problemele și nevoile pe care le rezolvă site-ul? Care este publicul țintă?

În această etapă este necesar să se cunoască scopurile ONG-ului, problemele și utilizatorii cărora organizația se adresează. Scopurile ONG-ului se identifică prin intermediul unor interviuri cu membrii fondatori prin care să fie lămurită misiunea website-ului și modul în care acesta ajută organizația. În plus, trebuie să se cunoască exact profilul utilizatorilor și cum îi ajută website-ul. Asta va ajuta la o lămurire clară a ceea ce trebuie obținut prin intermediul website-ului, iar un element ajutător ar putea fi chiar analiza organizațiior similare.

Pentru o înțelegere în profunzime a utilizatorilor se pot face interviuri prin care să aflăm ce fel de informații caută ei pe website, de ce îl folosesc, de ce ar dona organizației noastre, de ce s-ar implica într-o cauză și ce reprezintă pentru ei o bună experiență online.

De obicei, în cazul primei utilizări a unui website sau produs, utilizatorii se întreabă următoarele:

  • Ce este și despre ce este vorba?
  • Este ceea ce așteptam?
  • Pot avea încredere în acest website?
  • Vreau să merg mai departe pe alte pagini?
  • Cum pot afla mai multe?
  • Ce acțiuni pot face?
  • Cum pot contacta pe cineva?
  1. Scopul – Cum rezolvăm problemele sau nevoile adresate?

Pentru a stabili modul în care se rezolvă problemele identificate este necesar să se creeze o serie de cerințe, adică să se definească nevoile, nu soluțiile – nu „vreau să pun un buton de donează”, ci „vreau să găsesc o modalitate prin care utilizatorul să poată dona”.

Cerințele pot fi:

  • Obiective – Ce încearcă utilizatorul să facă? (să doneze, să se implice etc.);
  • Funcționale – Ce trebuie să facă utilizatorul pentru a obține ceea ce își dorește? (să introducă datele personale, să poată face plăți cu cardul pe site etc.);
  • Non-funcționale – Ce constrângeri există? (trebuie strâns un anumit număr de utilizatori pentru a valida o petiție etc.);
  • Cerințe care țin de domeniul organizației (taxe, constrângeri legale etc.)

Un mod simplu de a defini aceste cerințe este realizarea de scenarii de utilizare, adică trebuie gândite felurile (cât mai multe posibile) în care utilizatorul folosește website-ul organizației. Pentru a realiza aceste scenarii este necesar să răspundem la următoarele întrebări:

  • Cine sunt utilizatorii în fiecare moment? (profilul utilizatorului poate varia de la o pagină la alta);
  • De ce informații au utilizatorii nevoie?;
  • Ce acțiuni trebuie să facă utilizatorii pentru a obține acele informații?;
  • Există mai multe metode de a realiza o acțiune?

Conținutul, informația oferită utilizatorului, are un impact major asupra deciziilor de UX. Conținutul are trebui să fie:

  • Strategic – Ce tip de conținut se potrivește mai bine (video, text, imagini) și cât este el de relevant pentru utilizator?;
  • Contextual – Ce fac utilizatorii atunci când folosesc website-ul, ce simt, ce pot învăța din conținutul nostru și care este obiectivul lor?;
  • Concentrat pe utilizator – Trebuie să reflecte nevoile utilizatorului, termenii pe care acesta îi folosește și îi cunoaște.
  1. Structura – Locul unde se poate duce utilizatorul (unde?) ca să rezolve acele probleme sau nevoi.

Arhitectura informațională (structura) este reprezentată de toate lucrurile care există și cu care se interacționează în website/produs. Aceasta organizează, categorizează și prioritizează și permite utilizatorului să se miște eficient prin conținut.

Structura este definită prin următoarele elemente:

  • Sisteme de organizare;
  • Sisteme de navigare;
  • Sisteme de căutare;
  • Sisteme de etichetare.

Două exemple de arhitectură informațională ar fi:

  • Structura de tip hub – există o pagină centrală de pe care se poate pleca pe toate celelalte pagini;
  • Ierahie mai complexă de pe o pagină principală se merge către altele, apoi de pe acele pagini ramificat, ca o structură de arbore, către alte pagini.

Designul de interacțiune (Interaction Design – IxD) face posibil ca utilizatorii sa interacționeze cu arhitectura informațională și definește structura și comportamentul sistemelor interactive. În plus, designul de interacțiune creează o relație semnificativă între utilizator și ceea ce acesta folosește și comunică interactivitatea și funcționalitatea. Tot designul de interacțiune informează utilizatorul de schimbările care au loc (cum ar fi o confirmare de plată, de exemplu) sau previne erorile (de exemplu, prin mesaje de tipul: „dacă părăsiți pagina, plata nu va mai fi realizată”).

  1. Scheletul – Organizarea elementelor și cum se leagă ele unele de altele.

Scheletul reprezintă elementele care construiesc ecranul, adică forma pe care o aplicăm funcționalităților. Tot din schelet face parte felul în care este prezentat și manipulat conținutul (introducerea treptată a informației, încurajarea navigării și a explorării.

În cadrul scheletului website-ului, numărul de opțiuni ar trebui să fie cât mai mic pentru că timpul de reacție crește proporțional cu numărul de opțiuni (mai multe despre acest proces, care poartă denumirea de „Legea lui Hick” puteți găsi aici). Scheletul mai cuprinde utilizarea de modele de interacțiune comune, pe care utilizatorul le poate recunoaște ușor (ex: ideea de formular e una clasică și recognoscibilă).

Designul de interfață (UI) presupune aranjarea elementelor în pagină pentru a permite utilizatorilor interacțiunea cu acestea. Pe lângă organizarea conținutului în pagină, designul de interfață stabilește și layout-ul paginii, felul în care se interacționează cu elementele (atât de pe desktop, cât și de pe mobil) și modul de utilizare a conținutului video și audio.

Designul de interfață e foarte important pentru că un website greu de folosit nu va fi folosit.

Atribute pe care ar trebui să le aibă designul de interfață:

  • Previzibil – în momentul în care se apasă un buton sau se inițiază o acțiune trebuie să se întâmple ceea ce utilizatorul se așteaptă să se întâmple;
  • Consecvent– principalele elemente (ca meniul) trebuie să se afle pe toate paginile în același loc – un site nu poate avea meniul sus pe unele pagini și pe altele jos;
  • Introduce informația treptat;
  • Intuitiv – trebuie să fie clar că, de exemplu, un buton este acționabil, nu ar trebui ca utilizatorul să descopere din greșeală acest lucru;
  • Prezintă contextul și ierarhia – în orice moment, utilizatorul trebuie să știe că se află într-un anumit punct din site.

Designul navigației este cel care le spune utilizatorilor unde sunt pe site și unde pot merge mai departe de pe pagini. Practic, utilizatorul trebuie să înțeleagă în fiecare moment următoarele aspecte: unde este, cum a ajuns acolo, ce poate face pe acea pagină, unde poate merge de pe acea pagină (anticipare), cum găsește informația (căutare, filtrare).

Designul informației este cel care face ca prezentarea informațiilor să fie făcută în așa fel încât să fie ușor de înțeles. Reprezintă aranjarea la un nivel micro a informațiilor.

Atribute ale designului informației:

  • Creează o organizare relevantă (alfabetic, pe categorii, în funcție de locații etc.);
  • Asigură o formă relevantă pentru informație;
  • Prezentarea informațiilor în mod piramidal (cea mai importantă informație este prima);
  • Introducerea treptată a informației;
  • Legea lui Hick – prea multe opțiuni întârzie decizia utilizatorului.

Tot scheletul poate fi pus într-o formă vizibilă cu ajutorul unui wireframe (pe care îl creează designerul). Wireframe-ul arată prioritatea/ierarhia elementelor pe ecran, demonstrează interactivitatea, arată ideea designerului de amplasare a elementelor în pagină, dă indicii despre funcționalitate, comportament și feedback. De regulă, wireframe-ul nu folosește fonturi speciale, culori sau alte elemente vizuale, fiind doar o schemă care se concentrează pe conținut  și interacțiune.

  1. Suprafața – Tot ceea ce vede utilizatorul și felul în care interacționează cu platforma.

Aici este etapa în care se creează designul vizual, deci se creează limbajul vizual.

În această etapă se definitivează, în detaliu:

  • Layout-ul – formatare, proporții, organizare;
  • Corpurile de literă;
  • Imagini simboluri, iconițe;
  • Succesiunea informației, felul în care se „leagă” povestea;
  • Identitatea vizuală.

Câteva principii de design vizual:

  • Aliniamentul – este cel care ghidează privirea și creează structură (de exemplu, un text aliniat la stânga va fi întotdeauna mai ușor de citit);
  • Proximitatea – elementele sunt grupate prin distanță. Spațiul alb din jurul grupurilor ajută la gruparea lor vizuală;
  • Repetiția – elementele de același tip trebuie să-și păstreze culoarea, comportamentul, forma etc. (de exemplu, un buton care are o anumită funcție pe o pagină trebuie să aibă aceeași funcție și pe alte pagini);
  • Contrastul – contrastul asigură lizibilitatea.

Cum citesc utilizatorii informația?

  • 79% scanează informația;
  • Ritmul de citire este cu 25% mai încet decât pe hârtie;
  • Doar 28% dintre cuvinte sunt citite;
  • Utilizatorii ignoră marginile (fenomen numit „banner blindness”) unde ar putea fi reclame;
  • De obicei sar peste informația care nu pare interesantă sau relevantă;
  • Caută elemente precum: acțiuni, titluri, link-uri, cuvinte îngroșate, liste.

Design adaptabil (pentru smartphone și tabletă)

Date despre obiceiurile de consum al conținutului în funcție de dispozitiv:

  • 53% (peste 10 milioane de oameni) de români utilizează smartphone-ul la finalul lui 2016;
  • 85% dintre utilizatorii de smartphone accesează internetul zilnic;
  • 30% dintre căutările inițiate de pe dispozitive mobile sunt legate de motive practice (adică utilizatorul se află undeva pe stradă, în autobuz etc.);
  • Se preconizează că în 2017 căutările inițiate de pe mobil le vor depăși pe cele de pe desktop.

Designul adaptabil înseamnă că elementele se reconfigurează și rearanjează în funcție de dimensiunea ecranului (astfel că site-ul va arăta bine și pe desktop și pe mobil sau tabletă).

Gradul de utilizare

Desfășurearea unui interviu de testare se face urmând pașii de mai jos:

  • Identificarea utilizatorilor reprezentativi;
  • Creare de task-uri (ce rugăm utilizatorul să facă pe site-ul nostru – să caute informații, să doneze etc.);
  • Efectuarea testului – utilizatorul va fi lăsat să finalizeze task-ul fără a fi ghidat și poate fi rugat să gândească cu voce tare pentru a-i surprinde reacțiile și presupunerile;
  • Înregistrarea testului (pentru a putea permite evaluarea acestuia ulterior).

O altă metodă de testare este A/B testing. Această metodă presupune compararea a două versiuni diferite ale aceluiași website pentru a vedea care dintre ele are mai mult succes. Acest gen de testare se poate aplica și pe elemente separate (de exemplu, două versiuni de butoane, două versiuni de titlu de secțiune etc). În cadrul unei analize ulterioare a rezultatelor se va stabili care dintre variante a avut o rată de conversie mai mare.

Un instrument online de testare a website-ului este Usabilityhub care oferă mai multe tipuri de teste și ajută mai ales în fazele incipiente de design de website;

Analizarea interacțiunii

După lansarea website-ului și trecerea unei perioade de timp (câteva luni) este recomandată o analiză a interacțiunii. Aceasta vizează evaluarea website-ului prin analizarea comportamentului utilizatorilor.

Instrumentele de analiză pot viza următoarele aspecte:

  • Unde dau click utilizatorii;
  • Care sunt cele mai accesate pagini;
  • Informații demografice și geografice;
  • De pe ce dispozitive este accesat website-ul;
  • Scroll map: unde se opresc din scroll utilizatorii.

Exemple de instrumente folosite pentru analiză: Google Analytics și CrazyEgg.

Concluzii

  • Prin înțelegerea problemei și a utilizatorului putem crea un website care să îi ofere informația de care are nevoie;
  • Satisfacția utilizatorului este direct proporțională cu rata de conversie;
  • Un website greu de utilizat va scădea șansele ca utilizatorul să revină pe el;
  • Testarea și analizarea utilizării sunt esențiale pentru crearea unui site de succes;
  • Website-ul ar trebui să fie accesibil și optimizat pentru orice dispozitiv (dispozitivele mobile sunt în continuă creștere).

Resurse pentru UX design

Înscrie-te în Programul TechSoup pentru a avea acces la peste 170 de produse software sau servicii cloud și traininguri gratuite despre tehnologie.

MĂ ÎNSCRIU

 





Click pe imagini pentru vizualizare

Trainer

  • [e-spres-oh]

    Ioana Iordan

    Cu o experiență de peste 4 ani în domeniul digital, Ioana Iordan activează în prezent ca și UX/UI designer la [e-spres-oh].