Website de impact pentru ONG-ul tău: Introducere în UX
1 like1,376 views
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? Prezentare susținută de Ioana Iordan - [e-spres-oh], pe 7 martie 2017, în cadrul Școlii Digitale pentru ONG-uri: ONG Online. Școala Digitală pentru ONG-uri este un program anual creat de Asociația Techsoup pentru a ajuta angajați și voluntarii organizațiilor neguvernamentale din România și Republica Moldova să beneficieze detraining profesionist și la îndemână online în utilizarea tehnologiei sausoluțiilor online disponibile lor. Mai multe pe www.ongonline.techsoup.ro.
![Multumesc!
Ioana Iordan
UX / UI Designer @ [e-spres-oh]
@ioana_iordanioana iordan ioana.iordan@e-spres-oh.com](https://image.slidesharecdn.com/7-170308123454/85/Website-de-impact-pentru-ONG-ul-tau-Introducere-in-UX-47-320.jpg)
More Related Content
Viewers also liked (15)
Similar to Website de impact pentru ONG-ul tău: Introducere în UX (20)
More from Asociatia Techsoup Romania (20)
Website de impact pentru ONG-ul tău: Introducere în UX
- 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.
- 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