際際滷

際際滷Share a Scribd company logo

Introducere in ux ui design

UPT, Multimedia
UPT, Multimedia

Introducere in procesul de Ux/Ui design. Etapele importante in acest proces. Ce inseamna fiecare dintre ele? Ce inseamna Ui design? @ Mihai Onita - studbox.ro

1 of 31
Download to read offline
Elemente introductive de UX/UI design
Introducere in ux ui design
Introducere in ux ui design
Introducere in ux ui design
De ce avem nevoie de un Site Web?
Juctori Organizaie, companie, ONG etc. Informare despre cine suntem i despre o anumit problem. Crearea unei comuniti, str但ngere de fonduri, voce i credibilitate. Utilizatori Persoana care are autoritatea de a folosi o aplicaie, echipament, facilitate, proces, sistem sau un serviciu pentru a obine un beneficiu sau a rezolva o problem. Gsesc informaia de care au nevoie. Execut o aciune, cumpr un produs (樽ndeplinesc o sarcin).
Rat de conversie a) Numrul utilizatorilor care intr pe site-ul web b) Numrul utilizatorilor care revin pe site-ul web c) Numrul utilizatorilor care fac aciunea dorit
Rat de conversie a) Numrul utilizatorilor care intr pe site-ul web b) Numrul utilizatorilor care revin pe site-ul web c) Numrul utilizatorilor care fac aciunea dorit
Conversie Utilizatorul face ceea ce vrem noi (doneaz, se 樽nscrie ca voluntar, se aboneaz la newsletter, contacteaz asociaia). Rat de conversie: Din 2000 mii de vizitatori ai site-ului, 200 au donat ctre asociaie > 200/2000 = 10% rata de conversie.
UX - User eXperience = toate aspectele interaciunii unui utilizator cu un produs, un serviciu sau o companie/organizaie. Creterea conversiei. mbuntirea percepiei asupra brand-ului. Creterea rank-ului Google Search. Creterea satisfaciei i numrului de utilizatori ce revin pe site. Reducerea costurilor de implementare.
Metodologie design UX Cercetare - cunoaterea utilizatorilor i a problemei, cum rezolvm problemele identificate. Arhitectura informaiei, definirea categoriilor de informaii, definirea fluxului informaional. Schelet aplicaie. Design vizual, prezentare vizual, suprafa - prototip. Testare i distribuie.
Cercetare Identificarea obiectivelor companiei Cine sunt utilizatorii/beneficiarii? Cum 樽i ajut pe acetia site-ul web? Ce dorim s obinem prin intermediul site-ului? Analiza unor site-uri similare. Identificarea obiectivelor utilizatorilor Ce informaii caut? Ce se ateapt s gseasc 樽n site-ul web? De ce ne-ar contacta? Ce reprezint pentru ei o experien bun/proast 樽n mediul online?
Card sorting Focus groups User surveys Stakeholder interviews Design tenets Personas and user profiles Contextual inquiry Heuristic evaluations Competitive analysis Tehnici de cercetare
Cercetare | Scenarii coninut = toate felurile 樽n care un utilizator poate utiliza site-ul web. Strategic - ce tip de coninut se potrivete mai bine? Video, text, imagini, combinaii? Contextual Ce fac utilizatorii c但nd viziteaz site-ul? Ce obiectiv au? Ce pot 樽nv din coninutul nostru? Focusat pe utilizator Reflect nevoile lui i utilizeaz termenii deja cunoscui de acesta.
Arhitectura informaiei Sisteme de organizare. Sisteme de navigare. Sisteme de cutare. Sisteme de etichetare. Organizare, categorisire i prioritizare. Permite utilizatorului s se mite eficient prin coninut.
Arhitectura informaiei | Sitemap https://moqups.com/templates/diagrams-flowcharts/site-maps/ecommerce-shop-sitemap-template/
Arhitectura informaiei | Wireframe = scheletul unei pagini web (schia). Prezentarea informaiei 樽n aa fel 樽nc但t este uor de 樽neles (designul informaiei). Aranjarea elementelor 樽n pagin pentru a permite utilizatorilor interaciunea cu acestea (design de interfa UI). Direcionarea utilizatorilor - unde sunt i unde pot merge 樽n pagin/site (design de navigaie).
Arhitectura informaiei | Wireframe
https://www.grahamtodman.co.uk/blog/category/user-flow/ https://xd.adobe.com/ideas/process/wireframing/benefits-of-annotating-wireframes/ Arhitectura informaiei | Flow + wireframe
Design vizual | Prototip
Principii de design grafic Echilibru i unitate vizual Simetrie i (a)Simetrie Ierarhie vizual (componente) Proximitate, aliniere, repetiie, contrast Fonturi i caracteristici Culori i palete de culori Bunuri vizuale, identitatea vizual Cum citesc utilizatorii informaia 79% scaneaz informaia. Citesc cu 25% mai 樽ncet dec但t pe h但rtie. Doar 28% din cuvinte sunt citite. Ignor marginile Banner Blinders. Sar peste informaia mai puin relevant. Caut elemente precum: aciuni, titluri, link-uri, cuvinte 樽ngroate, liste. Design vizual | Prototip
Web Mobil Design vizual | Prototip
Design vizual | Prototip
Design vizual | Prototip
Testare | Interviuri de testare Evaluarea site-ului web prin observarea utilizatorilor 樽n timp ce acetia 樽ncearc s 樽ndeplineasc unul sau mai multe sarcini. Identificarea utilizatorilor reprezentativi. Crearea de sarcini - 樽i dm de lucru utilizatorului pe site. Utilizatorul poate fi ghidat sau nu. Poate fi rugat s g但ndeasc cu voce tare (reacii, presupuneri). nregistrarea testului.
A/B testing Testare | Preference and five seconds
Testare | Navigation and click
Testare | Instrumente de analiz Unde dau click utilizatorii? Care sunt cele mai accesate pagini? Informaii demografice i geografice. Tipul de dispozitiv care acceseaz site-ul. Scroll map.
Optimizarea graficelor pentru utilizarea 樽n site-ul web. Crearea de specificaii care ajuta dezvoltatorii s construiasc pe basa designului. Revizuirea procesului de design, 樽mbuntairi. Distribuie
Ctrl-D, Articole despre design, https://ctrl-d.ro, accesat 11.11.2019 Iordan Ioana, UX design, https://decodeacademy.ro/cursuri/curs- introducere-in-ux-design, accesat 10.09 2017 Hackdesign, Lectii despre design - teorie i practic, https://hackdesign.org/lessons, accesat 09.09 2019 Hamm Matthew, Wireframing Essentials, An introduction to user experience design, Publisher: Packt Publishing (January 24, 2014), ASIN: B00I2ORNAG, Amazon Digital Services LLC Referine
mihai.onita@upt.ro facebook.com/onitamihai https://studbox.ro @ Alexandra Ungur

More Related Content

Introducere in ux ui design

  • 5. De ce avem nevoie de un Site Web?
  • 6. Juctori Organizaie, companie, ONG etc. Informare despre cine suntem i despre o anumit problem. Crearea unei comuniti, str但ngere de fonduri, voce i credibilitate. Utilizatori Persoana care are autoritatea de a folosi o aplicaie, echipament, facilitate, proces, sistem sau un serviciu pentru a obine un beneficiu sau a rezolva o problem. Gsesc informaia de care au nevoie. Execut o aciune, cumpr un produs (樽ndeplinesc o sarcin).
  • 7. Rat de conversie a) Numrul utilizatorilor care intr pe site-ul web b) Numrul utilizatorilor care revin pe site-ul web c) Numrul utilizatorilor care fac aciunea dorit
  • 8. Rat de conversie a) Numrul utilizatorilor care intr pe site-ul web b) Numrul utilizatorilor care revin pe site-ul web c) Numrul utilizatorilor care fac aciunea dorit
  • 9. Conversie Utilizatorul face ceea ce vrem noi (doneaz, se 樽nscrie ca voluntar, se aboneaz la newsletter, contacteaz asociaia). Rat de conversie: Din 2000 mii de vizitatori ai site-ului, 200 au donat ctre asociaie > 200/2000 = 10% rata de conversie.
  • 10. UX - User eXperience = toate aspectele interaciunii unui utilizator cu un produs, un serviciu sau o companie/organizaie. Creterea conversiei. mbuntirea percepiei asupra brand-ului. Creterea rank-ului Google Search. Creterea satisfaciei i numrului de utilizatori ce revin pe site. Reducerea costurilor de implementare.
  • 11. Metodologie design UX Cercetare - cunoaterea utilizatorilor i a problemei, cum rezolvm problemele identificate. Arhitectura informaiei, definirea categoriilor de informaii, definirea fluxului informaional. Schelet aplicaie. Design vizual, prezentare vizual, suprafa - prototip. Testare i distribuie.
  • 12. Cercetare Identificarea obiectivelor companiei Cine sunt utilizatorii/beneficiarii? Cum 樽i ajut pe acetia site-ul web? Ce dorim s obinem prin intermediul site-ului? Analiza unor site-uri similare. Identificarea obiectivelor utilizatorilor Ce informaii caut? Ce se ateapt s gseasc 樽n site-ul web? De ce ne-ar contacta? Ce reprezint pentru ei o experien bun/proast 樽n mediul online?
  • 13. Card sorting Focus groups User surveys Stakeholder interviews Design tenets Personas and user profiles Contextual inquiry Heuristic evaluations Competitive analysis Tehnici de cercetare
  • 14. Cercetare | Scenarii coninut = toate felurile 樽n care un utilizator poate utiliza site-ul web. Strategic - ce tip de coninut se potrivete mai bine? Video, text, imagini, combinaii? Contextual Ce fac utilizatorii c但nd viziteaz site-ul? Ce obiectiv au? Ce pot 樽nv din coninutul nostru? Focusat pe utilizator Reflect nevoile lui i utilizeaz termenii deja cunoscui de acesta.
  • 15. Arhitectura informaiei Sisteme de organizare. Sisteme de navigare. Sisteme de cutare. Sisteme de etichetare. Organizare, categorisire i prioritizare. Permite utilizatorului s se mite eficient prin coninut.
  • 16. Arhitectura informaiei | Sitemap https://moqups.com/templates/diagrams-flowcharts/site-maps/ecommerce-shop-sitemap-template/
  • 17. Arhitectura informaiei | Wireframe = scheletul unei pagini web (schia). Prezentarea informaiei 樽n aa fel 樽nc但t este uor de 樽neles (designul informaiei). Aranjarea elementelor 樽n pagin pentru a permite utilizatorilor interaciunea cu acestea (design de interfa UI). Direcionarea utilizatorilor - unde sunt i unde pot merge 樽n pagin/site (design de navigaie).
  • 20. Design vizual | Prototip
  • 21. Principii de design grafic Echilibru i unitate vizual Simetrie i (a)Simetrie Ierarhie vizual (componente) Proximitate, aliniere, repetiie, contrast Fonturi i caracteristici Culori i palete de culori Bunuri vizuale, identitatea vizual Cum citesc utilizatorii informaia 79% scaneaz informaia. Citesc cu 25% mai 樽ncet dec但t pe h但rtie. Doar 28% din cuvinte sunt citite. Ignor marginile Banner Blinders. Sar peste informaia mai puin relevant. Caut elemente precum: aciuni, titluri, link-uri, cuvinte 樽ngroate, liste. Design vizual | Prototip
  • 23. Design vizual | Prototip
  • 24. Design vizual | Prototip
  • 25. Testare | Interviuri de testare Evaluarea site-ului web prin observarea utilizatorilor 樽n timp ce acetia 樽ncearc s 樽ndeplineasc unul sau mai multe sarcini. Identificarea utilizatorilor reprezentativi. Crearea de sarcini - 樽i dm de lucru utilizatorului pe site. Utilizatorul poate fi ghidat sau nu. Poate fi rugat s g但ndeasc cu voce tare (reacii, presupuneri). nregistrarea testului.
  • 26. A/B testing Testare | Preference and five seconds
  • 27. Testare | Navigation and click
  • 28. Testare | Instrumente de analiz Unde dau click utilizatorii? Care sunt cele mai accesate pagini? Informaii demografice i geografice. Tipul de dispozitiv care acceseaz site-ul. Scroll map.
  • 29. Optimizarea graficelor pentru utilizarea 樽n site-ul web. Crearea de specificaii care ajuta dezvoltatorii s construiasc pe basa designului. Revizuirea procesului de design, 樽mbuntairi. Distribuie
  • 30. Ctrl-D, Articole despre design, https://ctrl-d.ro, accesat 11.11.2019 Iordan Ioana, UX design, https://decodeacademy.ro/cursuri/curs- introducere-in-ux-design, accesat 10.09 2017 Hackdesign, Lectii despre design - teorie i practic, https://hackdesign.org/lessons, accesat 09.09 2019 Hamm Matthew, Wireframing Essentials, An introduction to user experience design, Publisher: Packt Publishing (January 24, 2014), ASIN: B00I2ORNAG, Amazon Digital Services LLC Referine