5 elements of UX design framework

1. The 5 Elements of User Experience
Design
UX Design Team - CIF N26

2. - Predstavljen u knjizi “The elements of User
Experience” pisca Jesse James Garett-a
- Jedan od najpoznatijih framework-a koji
koriste UX dizajneri

3. Elementi su:

4. Činjenice o elementima
1. Elementi su međusobno zavisni
2. Izbori koje dizajner napravi na jednom
elementu utiču na drugi
3. Započeti definisanje elementa kada je
prethodni element već u procesu rada (ovime
smanjujemo probleme kao što su „veoma
često menjanje odluka o dizajnu, donošenje
neinformisanih odluka o dizajnu, itd.)
4. Svaki element mora zadovoljiti i potrebe
korisnika i poslovne ciljeve

5. Prvi: Strategija 💡
Strategy

6. Šta želimo da dobijemo od
ovog proizvoda? (Product
objectives)
Odgovorom na ovo pitanje opisujemo ciljeve
proizvoda koji dolaze iz organizacije.
Definisanje strategije
Šta naši korisnici žele da
dobiju od toga? (User needs)
Odgovor na ovo pitanje se odnosi na potrebe
korisnika, ciljeve nametnute našem proizvodu od
spolja

7. Koraci kod planiranja
Strategije

8. Šta želimo da postignemo sa našim proizvodom?
Razumevanje problema, pre definisanja rešenja
Donosenje odluka sa potpunim razumevanjem posledica
Definisanje uslova za uspeh bez načina kako to postići dovodi do neuspeha
1. Ciljevi projekta (Project objectives)

9. Logo, tipografija, paleta boja
Set emicionalnih reakcija korisnika na naš proizvod
Impresija korisnika koju stvara u interakciji sa proizvodom
1.1 Identitet brenda (Brand identity)

10. Koliko efikasno proizvod zadovoljava ciljeve projekta i potrebe korisnika
nakon lansiranja
Na koji način se koristi naš proizvod (provera putem alata za Analitiku)
1.2 Metrike uspeha (Success metrics)

11. Definisanje ko su korisnici našeg prozivoda
Segmentacija korisnika (grupe korisnika podeljene po njihovim potrebama
i karakteristikama)
2. Potrebe korisnika (User needs)

12. Upotrebljivost je definisanje koliko je lako korisniku da koristi naš proizvod
Ankete, intervjui, korisnički testovi, sortiranje kartica - koriste se za
razumevanje specifičnih aspekata ponašanja korisnika i interakcije sa
našim proizvodom.
2.1 Upotrebljivost i istraživanje
korisnika (Usability and User Research)

13. Fiktivni korisnik koji predstavlja potrebe većeg broja korisnika proizvoda
Persone nam pomažu da uvek imamo korisnike na umu kada kreiramo
dizajn
2.2 Kreiranje persona (Creating personas)

14. Drugi: Obim 🔍
Scope

15. Dobar proces
Rešavaju se potencijalni konflikti i greške na
proizvodu dok je još uvek sve hipotetčkom nivou.
Definisanje šta možemo odmah rešiti od problema,
a šta kasnije.
Definisanje obima
Upotrebljiv proizvod
Definisanje svog posla koji treba da se obavi tokom
projekta i zajednički razgovor o tom poslu.
Definisanje zahteva izbacuje dvosmislenost iz
procesa projektovanja
=

16. Koraci kod planiranja
Obima

17. Šta želimo da prozivedemo?
Šta ne želimo da prozivedemo?
1. Specifikacija zahteva
(Requirement Specification)

18. Specifikacije ne moraju da obuhvate neko buduće stanje proizvoda već
samo odluke koje su donete tokom njegovog kreiranja.
Specifikacije ne moraju da obuhvataju svaki aspekt proizvoda – samo one
koje treba definisati da bi se izbegla zabuna u procesu dizajna i razvoja.
2. Specifikacija funkcija
(Functional Specification)

19. Kada govorimo o sadržaju, mislimo na tekst. Ali slike, audio i video mogu
biti važniji od propratnog teksta.
Identifikovanje svih tipova sadržaja povezanih sa nekom funkcijom može
nam pomoći da odredimo koji će resursi biti potrebni za proizvodnju
sadržaja.
3. Specifikacija sadržaja
(Content Specification)

20. Treći: Struktura 🧬
Structure

21. Razvoj konceptualne strukture
Nakon što su zahtevi definisani i postavljeni po prioritetima, imamo jasnu sliku šta će biti uključeno u finalni
proizvod. Zahtevi, međutim, ne opisuju kako se delovi uklapaju da bi formirali celinu.
Definisanje strukture

22. Koraci kod planiranja
Strukture

23. Dizajn interakcije se bavi opisivanjem mogućeg ponašanja korisnika i
definisanjem načina na koji će se sistem prilagoditi i odgovoriti na to
ponašanje.
1. Dizajn interakcije (Interaction design)

24. Utisci korisnika o tome kako će se ponašati interaktivne komponente koje
kreiramo poznati su kao konceptualni modeli.
Potrebno je koristiti konceptualne modele koji su poznati korisnicima
Zasnivanje naših konceptualnih modela na metaforama koje uključuju
analogne sistemske funkcije iz stvarnog sveta može biti dragoceno, ali je
važno da naše metafore ne shvatamo previše bukvalno.
1.1 Konceptualni modeli (Conceptual models)

25. Šta sistem radi kada ljudi prave greške i šta sistem može da uradi da
spreči da se te greške dogode?
Svaki sistem ili prozivod treba da obezbedi način za korisnike da se
“oporave” od greške
1.2 Upravljanje greškama (Error Handling)

26. Informaciona arhitektura se bavi kreiranjem organizacionih i navigacionih
šema koje omogućavaju korisnicima da se kreću kroz sadržaj proizoda
efikasno i efektivno.
2. Informaciona arhitektura
(Information architecture)

27. 2.1 Pristupi u arhitekturi
(Architectural Approaches)
Hijerarhijska struktura Struktura matrica

28. 2.1 Pristupi u arhitekturi
(Architectural Approaches)
Organska struktura Sekvencijalna struktura

29. Četvrti: Kostur 󰬬
Skeleton

30. Koncept kostura opisuje postavljanje elemenata kao što su dugmad, tekst i slike... Takođe, kako su povezani
elementi grupisani zajedno, kao i o izgledu i hijerarhiji stranice.
Definisanje kostura

31. Koraci kod planiranja
Kostura

32. Dizajn interfejsa se svodi na odabir pravih elemenata interfejsa za zadatak
koji korisnik pokušava da ostvari i njihovo raspoređivanje na ekranu na
način koji će biti lako razumljiv i lako korišćen.
Koje funkcije završavaju na kojim ekranima je stvar dizajna interakcije,
način na koji se te funkcije realizuju na ekranu je oblast dizajna interfejsa.
1. Dizajn interfejsa (Interface design)

33. Obezbeđuje korisnicima način za prelazak sa jedne tačke na drugu na sajtu
ili u aplikaciji.
Dizajn navigacije mora da obezbedi komunikaciju između elemenata koji
sadrži. Nije dovoljno samo navesti listu veza (link-ova).
Potrebno je da obezbedi komunikaciju između svog sadržaja i stranice koju
korisnik trenutno gleda.
2. Dizajn navigacije (Navigation design)

34. Dopunska navigacija Kontekstualna navigacija
Globalna navigacija Lokalna navigacija

35. Dizajn informacija se svodi na donošenje odluka o tome kako predstaviti
informacije kako bi ljudi mogli da ih koriste ili lakše razumeju.
Ponekad je informacioni dizajn vizuelan. Da li je Pie chart najbolji način da
se ti podaci predstave ili bi Bar chart bio bolji za naše korisnike?
Ponekad dizajn informacija uključuje grupisanje ili raspoređivanje delova
informacija.
3. Dizajn informacija (Information design)

36. Wireframe je izgled stranice gde se informacioni dizajn, dizajn interfejsa i
dizajn navigacije spajaju da formiraju jedinstven, kohezivni kostur.
Služi kao referenca za rad na vizuelnom dizajnu i implementaciji. Zbog toga
Wireframeovi mogu da sadrže različite nivoe detalja.
4. Žičani okviri (Wireframing)

37. Peti: Površina 👀
Surface

38. Na ovom nivou se sadržaj, funkcionalnost i estetika spajaju da bi proizveli gotov dizajn koji zadovoljava čula
korisnika dok ispunjava sve ciljeve ostala četiri nivoa.
Definisanje površine

39. Koraci kod planiranja
Površine

40. Vid - Vizuelni dizajn igra ulogu u gotovo svakoj vrsti proizvoda
Sluh - zvučni signali za notifikacije
Dodir - vibracija telefona
Miris i ukus - manje se koriste kod korisničkih iskustva (Miris novog auta)
1. Čula kod ljudi (Senses)

41. Jedan jednostavan način da se proceni vizuelni dizajn proizvoda je da se
zapita: Gde prvo ide oko? Koji element dizajna u početku privlači pažnju
korisnika? Da li ih privlači nešto važno za strateške ciljeve proizvoda?
Dizajneri ponekad koriste sofisticiranu opremu za praćenje očiju kako bi
tačno utvrdili šta ispitanici gledaju i kako se njihove oči kreću po ekranu.
2. Praćenje oka (Follow the eye)

42. Primarni alat koji koristimo da privučemo pažnju korisnika je kontrast.
Dizajn bez kontrasta se vidi kao siva, bezoblična masa, koja uzrokuje da se
oči korisnika pomeraju unaokolo, a da se ne zadrže na bilo čemu posebno.
Kontrast je od vitalnog značaja za privlačenje pažnje korisnika na bitne
aspekte interfejsa, kontrast pomaže korisniku da razume odnose između
elemenata za navigaciju na stranici.
3. Kontrast (Contrast)

43. Važan deo koji treba da osigura da dizajn efikasno komunicira bez
zbunjivanja ili preopterećenja korisnika.
Uniformnost igra različite aspekte vizuelnog dizajna. Na primer,
zadržavanje ujednačenih veličina elemenata može olakšati njihovo
rekombinovanje u nove dizajne kada su potrebni.
4. Uniformnost (Uniformity)

44. Boja može biti jedan od najefikasnijih načina za komuniciranje aplikacije.
Paleta boja treba da sadrži boje koje su pogodne za širok spektar upotreba.
Upotreba fontova ili fontova za kreiranje određenog vizuelnog stila. Bolje je
koristiti jednostavan font. Zato što se naše oči brzo umaraju pokušavajući
da uhvate mnogo teksta na kitnjastijem fontu. Zato su jednostavni fontovi
poput Helvetica ili Times tako široko korišćeni.
5. Palete boja i tipografija
(Color Palettes and Typography)

45. Dokumentacija dizajnerskih odluka koje smo doneli je vodič za stil.
Definiše svaki aspekt vizuelnog dizajna, od najvećeg do najmanjeg. Globalni
standardi koji utiču na svaki deo proizvoda – kao što su design grid, palete
boja, standardi tipografije ili smernice za tretman logotipa – obično su prve
stvari koje treba da se unesu u vodič za stil.
6. Vodič za stilove (Styleguide)

46. Design Thinking vs. 5 Elements of UX Design
Design thinking je user-centered pristup rešavanju problema usmeren na korisnika. Postoji pet faza u
procesu razmišljanja o dizajnu: empatija, definisanje, ideja, prototip i testiranje. Svaka faza okvira
odgovara na određeno pitanje. U zavisnosti od povratnih informacija iz faze testiranja, možda je
potrebno vratiti se na početak procesa razmišljanja o dizajnu, smišljanje novih ideja za rešenja.

47. Hvala na pažnji! 🙏