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

2.
Introducere in UX
Elementele UX-ului
Design Adaptabil
Gradul de Utilizare
Concluzii

3.
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.

4.
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

5.
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?

6.
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

7.
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?

8.
Marketers
Copywriters
UX Designer
UI Designer
Visual Designer
Programatori
Procesul de
USER EXPERIENCE
INTRODUCERE IN UX
Cine este implicat in procesul de UX?
Stakeholders

9.
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?

10.
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?
Strategia
Cum?
• Cum rezolvam problemele
pe care le adresam?
Scopul
Unde?
• Locurile in care se poate
duce utilizatorul - Unde?
Structura
Organizarea elementelor,
cum se leaga unul de altul
Scheletul
Tot ce ceea ce vede
utilizatorul si felul in care
interactioneaza cu
informatia.
Suprafata
Sursa: The Elements of User Experience - Jesse James Garrett

11.
Strategia Scopul Structura Scheletul Suprafata
Strategia

12.
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

13.
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

14.
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?

15.
Scopul
Strategia Scopul Structura Scheletul Suprafata

16.
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

17.
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)

18.
Intrebare
Continutul website-ului nostru trebuie sa fie:
Strategic Contextual Focusat pe utilizatorc.b.a.
(sunt posibile mai multe variante de raspuns)

19.
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

20.
Structura
Strategia Scopul Structura Scheletul Suprafata

21.
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

22.
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

23.
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)

24.
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?

25.
Scheletul
Strategia Scopul Structura Scheletul Suprafata

26.
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

27.
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!

28.
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!

29.
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)

30.
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

31.
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

32.
Suprafata
Strategia Scopul Structura Scheletul Suprafata

33.
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

34.
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

35.
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

36.
Intrebare
Cati romani folosesc dispozitive mobile petru a accesa website-uri?
a. 0% - 20% b. 20% - 40% c. 40 - 60% d. 60% - 80%

37.
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

38.
DESIGN ADAPTABIL
Designul pentru Mobil si Tableta

39.
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

40.
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.

41.
usabilityhub.com
GRADUL DE UTILIZARE
TESTAREA ONLINE

42.
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

43.
Google Analytics Crazy Egg
INSTRUMENTE DE ANALIZA
GRADUL DE UTILIZARE

44.
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

45.
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

46.
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
STIRI
PENTRU
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.

47.
Multumesc!
Ioana Iordan
UX / UI Designer @ [e-spres-oh]
@ioana_iordanioana iordan ioana.iordan@e-spres-oh.com