website de impact pentru ong-ul tău: introducere în ux
TRANSCRIPT
Website de impact pentru ONG-ul tău:
Introducere în UX
Introducere in UX
Elementele UX-ului
Design Adaptabil
Gradul de Utilizare
Concluzii
Intrebare
Ce intelegem prin rata de conversie?
Numarul utilizatorilor care intra pe website-ul nostru.
Numarul utilizatorilor care revin pe website-ul nostru
Numarul utilizatorilor care fac actiunea pe care o dorim noi (Doneaza, Contacteaza, Cumpara, etc)
c. b.a.
UTILIZATOR:
Persoana care are autoritatea de a folosi o
aplicatie, echipament, facilitate, proces, sistem
sau un serviciu pentru a obtine un beneficiu
sau pentru a rezolva o problema.
Utilizatorul face ceea ce vrem noi.
(doneaza, se inscrie ca voluntar, da subscribe la
newsletter, contacteaza asociatia,etc)
CONVERSIE:
INTRODUCERE IN UX
Termeni
Rata coversie:
Din 2000 de vizitatori ai site-ului, 200 au donat catre
asociatie - > 200/2000 = 10% rata de conversie
ONG UTILIZATOR
Pentru a gasi informatia de care au nevoie.
Pentru a indeplini un task.
Informare despre cine suntem
Informare despre o anumita problema
Crearea unei comunitati
Strangere de fonduri
Ne poate oferi o voce si credibilitate
INTRODUCERE IN UX
De ce avem nevoie de un Website?
Folositor
Dezirabil
Accesibil
Credibil
Usor de localizat
Usor de folosit
INTRODUCERE IN UX
Ce este User Experience Design?
USER EXPERIENCE
= toate aspectele interactiunii unui
utilizator cu un produs, un serviciu
sau o companie/organizatie.
VALOARE
Research
Creare de Continut
Arhitectura informatiei
Design de interactiune
Uzabilitate
Design Vizual
USER EXPERIENCE
= toate aspectele interactiunii unui
utilizator cu un produs, un serviciu
sau o companie/organizatie.
INTRODUCERE IN UX
Ce este User Experience Design?
Marketers
Copywriters
UX Designer
UI Designer
Visual Designer
Programatori
Procesul de USER EXPERIENCE
INTRODUCERE IN UX
Cine este implicat in procesul de UX?
Stakeholders
cresterea conversiei
imbunatatirea perceptiei asupra brand-ului
cresterea rank-ului Google search
creste satisfactia si numarul de utilizatori care revin pe site
reduce costurile de implementare
O experienta negativa slabeste
sansele ca utilizatorul sa se
intoarca pe site.
INTRODUCERE IN UX
Cum ne ajuta procesul de UX?
ELEMENTELE UX-ULUI
Cele 5 elemente ale UX-ului
Ce? • De ce construim site-ul? • Care sunt problemele/
nevoile pe care le adresam si cui ne adresam?
StrategiaCum? • Cum rezolvam problemele
pe care le adresam?
ScopulUnde? • Locurile in care se poate
duce utilizatorul - Unde?
StructuraOrganizarea elementelor, cum se leaga unul de altul
ScheletulTot ce ceea ce vede utilizatorul si felul in care interactioneaza cu informatia.
Suprafata
Sursa: The Elements of User Experience - Jesse James Garrett
Strategia Scopul Structura Scheletul Suprafata
Strategia
ELEMENTELE UX-ULUI
STRATEGIA: Cunoasterea utilizatorilor si a problemei
Interviewuri cu stakeholderii - care este golul website-ului, cum ajuta organizatia?
Cine sunt utlizatorii/beneficiarii?
Cum ii ajuta organizatia/website-ul pe utilizatori?
Analiza unor organizatii similare
Ce dorim sa obtinem prin intermediul website-ului nostru?
Identificarea golurilor ONG-ului
ELEMENTELE UX-ULUI
STRATEGIA: Cunosterea utilizatorilor si a problemei
Ce informatii cauta?
Ce se asteapta sa gaseasca pe website-ul nostru?
De ce folosesc website-uri similare?
De ce ar dona organizatiei? De ce s-ar implica intro cauza?
Ce reprezinta pentru ei o experienta buna/proasta in mediul online?
Identificarea golurilor utilizatorilor
Interviuri cu posibili utilizatori
ELEMENTELE UX-ULUI
STRATEGIA: Cunosterea utilizatorilor si a problemei
ce e este asta? despre ce e vorba?
este ceea ce asteptam?
pot avea incredere in acest website?
vreau sa merg mai departe in alte pagini?
cum pot afla mai multe?
La prima utilizare a unui website/produs, utilizatorul se intreaba urmatoarele:
ce actiuni pot face?
cum pot contacta pe cineva?
Scopul
Strategia Scopul Structura Scheletul Suprafata
Reprezinta nevoile, nu solutiile - ce anume rezolvam pentru utilizatorul nostru?
ELEMENTELE UX-ULUI
SCOPUL: Cum rezolvam problemele identificate?
Obiective: ce incearca utilizatorul sa faca? (sa se informeze, sa se implice)
Functionale: ce trebuie sa faca pentru a obtine ceea ce-si doreste? (sa introduca datele personale, sa poata plati cu cardul pe site, etc)
Non-functionale: ce constrangeri exista? (trebuie sa aiba un anumit numar de utilizatori pentru a valida o petitie)
Care tin de domeniul organizatiei: taxe aplicate, constrangeri legale.
Cerinte
ELEMENTELE UX-ULUI
SCOPUL: Cum rezolvam problemele identificate?
User Scenarios - Scenarii de utilizare
UTILIZATOR 1 GOOGLE SEARCH ADOPTIE PISICA WEBSITE ONG BROWSE PISICI SELECTARE CONTACT
UTILIZATOR 2
Cine sunt utilizatorii in fiecare moment?
De ce informatii au ei nevoie?
Ce actiuni trebuie sa faca?
Exista mai multe metode de a realiza o actiune?
= toate felurile in care un utilizator foloseste website-ul (ajuta la crearea cerintelor)
Intrebare
Continutul website-ului nostru trebuie sa fie:
Strategic Contextual Focusat pe utilizatorc. b.a.
(sunt posibile mai multe variante de raspuns)
ELEMENTELE UX-ULUI
SCOPUL: Cum rezolvam problemele identificate?
Continut STRATEGIC • ce tip de continut se potriveste mai bine? (video, text, imagini)
• cat este de relavant pentru utilizator?
Continutul are un impact major asupra decizilor de UX - ce tip de content folosim, care este scopul sau si cine il creaza?
CONTEXTUAL • ce fac utilizatorii atunci cand folosesc website-ul? ce simt?ce pot invata din continutul nostru? care este obiectivul lor?
FOCUSAT PE UTILIZATOR • sa reflecte nevoile utilizatorului, termenii pe care acesta ii foloseste/cunoaste
Structura
Strategia Scopul Structura Scheletul Suprafata
ELEMENTELE UX-ULUI
STRUCTURA: Definirea categoriilor de informatii
Arhitectura informationala
Toate lucrurile care exista si cu care se interactioneaza in website/produs
organizeaza, categorizeaza si prioritizeaza
permite utilizatorului sa se miste eficient prin continut
este definita de urmatoarele elemente:
• Sisteme de organizare • Sisteme de navigare • Sisteme de cautare • Sisteme de etichetare
Mai multe informatii despre AI: CTRL-D, Arhitectura informaţională – obiective și utilizatori, de Ana-Maria Bogdan
ELEMENTELE UX-ULUI
STRUCTURA: Definirea categoriilor de informatii
Arhitectura informationala
Toate lucrurile care exista si cu care se interactioneaza in website/produs
Diagrama tip hub Ierarhie complexa
Mai multe informatii despre AI: CTRL-D, Arhitectura informaţională – obiective și utilizatori, de Ana-Maria Bogdan
ELEMENTELE UX-ULUI
STRUCTURA: Definirea categoriilor de informatii
Design de interactiune (IxD - Interaction Design)
Prezinta informatia in asa fel incat utilizatorii pot interactiona cu aceasta.
defineste structura si comportamentul sistemelor interactive
creaza o relatie semnificativa intre utilizator si ceea ce folosesc
comunica interactivitatea si functionalitatea
informeaza utlizatorul de schimbarile care au loc (ex: mesaje de succes - mesajul a fost trimis, plata a fost realizata)
previne erorile (ex: daca parasiti pagina plata nu va fi realizata)
ELEMENTELE UX-ULUI
EXERCITIU - CARD SORTING
• Notati pe fiecare bilet cate o pagina/ sectiune de continut
• Introduceti jocul prin explicarea continutului de pe bilete
• Explicati contextul - crearea website-ului • Rugati participantii sa aranjaze biletele intr-un mod care
are sens pentru ei (sa le grupeze, sa le organizeze ierarhic)
• atunci cand au realizat o grupare, rugatii sa eticheteze grupurile.
• Timp: 1h • Structura grupului: Echipe mici • Rezultat: Etichetare, structurare informatii • Pe cine implica: Utilizatori • De ce avem nevoie: Post-its, Markere
Ce?
Cum?
Scheletul
Strategia Scopul Structura Scheletul Suprafata
ELEMENTELE UX-ULUI
SCHELETUL: Componentele care construiesc ecranul
forma pe care o aplicam functiunilor
felul in care este prezentat si manipulat continutul: introducerea treptata a informatiei, incurajarea navigarii si a explorarii.
reducerea numarului de optiuni - legea hick-Hyman - timpul luarii unei decizii creste cu cat numarul optiunilor creste (http://dana-damoc.eu/blog/legea-lui-hick-in-ux-design/)
utilizarea de modele de interactiune comune, pe care utilizatorul le recunoaste usor
Design de interfata (UI)
Aranjarea elementelor in pagina pentru a permite utilizatorilor interactiunea cu acestea.
Organizarea continutului in pagina
Layout-ul paginii/ecranului.
Felul in care se interactioneaza cu elementele - atat pe desktop cat si pe mobil.
Utilizarea continutului de tip video si audio.
ELEMENTELE UX-ULUI
SCHELETUL: Componentele care construiesc ecranul
Un website greu de folosit nu va fi folosit!
Design de interfata (UI)
Aranjarea elementelor in pagina pentru a permite utilizatorilor interactiunea cu acestea.
Previzibil
Consistent
Introduce informatia treptat
Intuitiv
Prezinta contextul si ierarhia
ELEMENTELE UX-ULUI
SCHELETUL: Componentele care construiesc ecranul
Un website greu de folosit nu va fi folosit!
Design-ul navigatiei
Le spune utilizatorilor unde sunt si unde pot merge.
Unde este utilizatorul?
Cum a ajuns aici?
Ce poate face aici?
Unde poate merge de aici? (anticipare)
ELEMENTELE UX-ULUI
SCHELETUL: Componentele care construiesc ecranul
Cum gaseste informatia? (cautare, filtrare)
Design-ul informatiei
Prezentarea informatiei in asa fel incat este usor de inteles.
Organizare relevanta (alfabetic,categorii, locatii)
Forma relevanta (un anumit tip de chart)
Prezentarea informatiei in mod piramidal (cea mai importanta informatie este prima)
Introducerea treptata a informatiei
Legea lui Hick - prea multe optiuni intarzie decizia
ELEMENTELE UX-ULUI
SCHELETUL: Componentele care construiesc ecranul
Wireframe
Reprezinta scheletul paginii - prototip cu nivel de detaliu scazut
arata prioritatea elementelor pe ecran
demostreaza interactivitatea
arata idea designerului de amplasare a elementelor in pagina
functionalitate, comportament si feedback
de regula nu foloseste fonturi speciale, culori, sau alte elemente vizuale
ELEMENTELE UX-ULUI
SCHELETUL: Componentele care construiesc ecranul
Suprafata
Strategia Scopul Structura Scheletul Suprafata
Design Vizual
Crearea limbajului vizual/grafic.
layout-ul - formatare, proportii, organizare
tipografie
imagini, symboluri, iconite
succesiunea informatiei, felul in care se leaga “povestea”
identitatea vizuala
ELEMENTELE UX-ULUI
SUPRAFATA: Prezentarea vizuala
Design Vizual
Crearea limbajului vizual/grafic.
Aliniament • Ghideaza privirea si creaza structura
Proximitate • elementele sunt grupate prin distanta • spatiul alb din jurul grupurilor ajuta la gruparea vizuala
Repetitie • elementele de acelasi tip trebuie sa isi pastreze culoarea, comportamentul, forma, etc
Contrast • contrastul asigura lizibilitatea
ELEMENTELE UX-ULUI
SUPRAFATA: Prezentarea vizuala
Cum citesc utilizatorii informatia?
79% scaneaza informatia
Citesc cu 25% mai incet decat pe hartie
Doar 28% din cuvinte sunt citite
ELEMENTELE UX-ULUI
SUPRAFATA: Prezentarea vizuala
Sar peste informatia care pare mai putin relevanta sau interesanta
Cauta elemente precum: • Actiuni • Titluri • Link-uri • Cuvinte ingrosate • Liste
Ignora marginile - “Banner Blindness” - unde ar putea fi reclame
Intrebare
Cati romani folosesc dispozitive mobile petru a accesa website-uri?
a. 0% - 20% b. 20% - 40% c. 40 - 60% d. 60% - 80%
53% din populatia Romaniei utiliza smartphone-uri pana la sfarsitul anului 2016 (peste 10milioane de oameni)
84% din utilizatori de smartphone acceseaza internetul zilnic
Cautarile efectuate pe mobil de catre utilizatorii de internet le vor depasi pe cele efectuate prin intermediul calculatorului in 2017
DESIGN ADAPTABIL
Designul pentru Mobil si Tableta
30% din cautarile de pe mobile sunt legate de motive practice (utilizatorul este pe strada, in autobuz, etc)
Sursa: http://www.startupcafe.ro/stiri-ecommerce-21350798-Statistici-telefoane-mobile-Romania-2016.htm
DESIGN ADAPTABIL
Designul pentru Mobil si Tableta
INTERVIURI DE TESTARE Identificarea utilizatorilor reprezentativi
Creare de task-uri - Ce rugam utilizatorul sa faca pe website-ul nostru? • ex: sa gaseasca o anumita informatie, sa doneze
Inregistrarea testului permite evaluarea acestuia
GRADUL DE UTILIZARE
TESTAREA
Evaluarea website-ului prin observarea utilizatorilor in timp ce acestia incearca sa indeplineasca unul sau mai multe task-uri.
Efectuare testului • utilizatorul este lasat sa finalizeze task-ul fara a fi ghidat
• utilizatorul poate fi rugat sa gandeasca cu voce tare, pentru a surprinde reactii, presupuneri
A/B Testing Crearea a 2 variante diferite
Putem testa pozitia unui buton, titlul unei sectiuni, modelul de navigare, etc
A/B testing cu Google Analytics
GRADUL DE UTILIZARE
TESTAREA
Metoda de comparare a 2 versiuni a unui website pentru a vedea care are mai mult succes. Analiza ulterioara ne arata care dintre variante a
avut o conversie mai buna.
Analizarea interactiunii
Unde dau click utilizatorii
Care sunt cele mai accesate pagini
Folosirea instrumentelor de analiza ne arata:
INSTRUMENTE DE ANALIZA
Evaluarea website-ului prin analizarea comportamentului utilizatorilor.
Informatii demografice si geografice
De pe ce dispozitive este accesat website-ul
Scroll map: unde se opresc din scroll utilizatorii
GRADUL DE UTILIZARE
Google Analytics Crazy Egg
INSTRUMENTE DE ANALIZAGRADUL DE UTILIZARE
Prin intelegerea problemei si a utilizatorului putem crea website-ul care sa ii ofere informatia necesara
Satisfactia utilizatorului duce la cresterea conversiei
Testarea si analizarea utilizari sunt cele mai importante instrumente in crearea unui website de succes.
CONCLUZII
Un website greu de utilizat scade sansele revenirii utilizatorului
Website-ul trebuie sa fie accesibil pe orice dispozitiv - utilizarea pe dispozitive mobile este in continua crestere
The Elements of User Experience - Jesse James Garrett
Noţiuni de bază în UX Design, de Sorin Bechira, Articol CTRL-D
UX Design: The Definitive Beginner’s Guide (UXPin e-book)
An Introduction to User Experience Design (hackdesign.org)
Resurse pentru UX Design
Tema
Folosind exemplul din fig. 1, realizati o diagrama a arhitecturii informationale pentru website-ul dumneavoastra.
Instrumente pentru diagrame:
https://www.draw.io/
Microsoft Powerpoint / Keynote (Mac), Microsoft Excel, Microsoft Paint
Hartie si creion :)
fig. 1
HOMEPAGE
DESPRE NOI PROGRAME SI SERVICII
PENTRU PACIENTI STIRIPENTRU
PRACTICIENI CONTACT
ISTORIE SI MISIUNE
ECHIPA
LOCATIE
TERAPIE
ELECTRODIAGNOZA
OVERVIEW
EDUCATIE ARHIVA
LISTARE STIRI
FORMULAR CONTACT
LOCATIE, TELEFON
TERMENI CARIERE
TESTIMONIALE
AJUTOR
PLANURI DE ASIGURARE
Grupati continutul in pagini, subpagini, sectiuni
Stabiliti ierarhia continutului.
Stabiliti legatura dintre elemente - de aici pot ajunge acolo.
