UX Dizajn i Kako ga (na)učiti
- 1. @@export_scripts@@ @@export_scripts@@ Zahvaljujem se Fakultetu tehničkih nauka i prof. Nedi Milić sa departmana za grafičko inženjerstvo i dizajn na ovoj prilici da gostujem i ispričam studentima svoje iskustvo o dizajnu – Zašto sam pozvan da predajem ovde? – Karijera u razvoju digitalnih proizvoda traje od 1997. – poznajem obe strane medalje - i dizajn i programiranje – Apple, Amazon, Rakuten, UNICEF – Tipovi projekata na kojima sam radio su iz domena marketinga, finansija, medicine, roditeljstva... –
- 2. @@export_scripts@@ Sadržaj Sadržaj Razvoj dizajna korisničkog iskustva – Dizajn - pojam i praksa – Na koga sve utiče naš dizajn? – Gde i kako (na)učiti dizajn? – Pitanja i diskusija – @@export_scripts@@ Studije UX dizajna nisu postojale dok sam radio – predavanje je deo znanja stečeno tokom karijere, nije fakultetsko već iz industrije – Predavač je svedok nastajanja i razvoja discipline UX – razjašnjavamo moderne mitove – najčešći problemi-dileme koje dizajneri imaju u dizajn procesu – Akademsko znanje koje stičete na fakultetu je najvažnije – Pokušaćemo da razjasnimo i neke moderne mitove i da damo dobro polazište-okvir-osnovu za dalje učenje UX-a. –
- 3. @@export_scripts@@ Korisničko iskustvo Korisničko iskustvo @@export_scripts@@ najčešći rezultati na Google-u –
- 4. @@export_scripts@@ Nastanak i razvoj Nastanak i razvoj dizajna korisničkog dizajna korisničkog iskustva iskustva @@export_scripts@@ kako su nastali sami digitalni proizvodi? – Šta je doprinelo da je dizajn postao važan? – Istorija je važna da bismo razumeli koncepte – neće biti dugačko a biće korisno – UGRUBO, ne vezujući se mnogo za godine –
- 5. @@export_scripts@@ 1980.-1990: Računari 1980.-1990: Računari u poslovnom u poslovnom okruženju okruženju @@export_scripts@@ Odlučujući događaji koji su uzrokovali pojavu korisničkog iskustva kao koncepta – Doprineli su omasovljenju kompjutera i digitalnih proizvoda. – Kompjuteri su postojali 40 godina pre toga – otpocela je era dizajna softvera –
- 6. @@export_scripts@@ Dizajn proces... Dizajn proces... @@export_scripts@@ Kako je tada izgledao dizajn digitalnih proizvoda? –
- 7. @@export_scripts@@ 1990.-2000: Internet 1990.-2000: Internet era era @@export_scripts@@ WWW Omasovljenje – nastajanje internet prodavnica i – Google-a. –
- 8. @@export_scripts@@ Web design proces... Web design proces... @@export_scripts@@ Kako je tada izgledao dizajn digitalnih proizvoda? Web designeri su radili mock u Photoshopu ili Ilustratoru. Posle su se pojavile dodatne role. Pojavila se distinkcija rola. –
- 9. @@export_scripts@@ 2000- : "Pametni" mobilni 2000- : "Pametni" mobilni uređaji uređaji @@export_scripts@@ Iphone je ovde prikazan, on nije jedini, ali definitivno je bio odlučujući za mobilne uređaje da probiju tržište. Tako se oformio moderni softver i sa njime moderni dizajn proces, kako ga danas vidimo. Kako izgleda moderni dizajn proces? da ga generalizujemo
- 10. @@export_scripts@@ Dizajn proces... Dizajn proces... @@export_scripts@@ Svodio se najpre na crtanje ekrana – Nakon toga su se razvili napredni alati –
- 11. @@export_scripts@@ Definicije Definicije Dizajna Dizajna @@export_scripts@@ Usaglašavanje oko definicije da bismo razgovarali o dizajnu – Ovo nije filozofska rasprava – Razne su definicije – Ovako ih ja shvatam –
- 12. @@export_scripts@@ Dizajn Dizajn korisničkog korisničkog iskustva iskustva Dizajn digitalnih Dizajn digitalnih proizvoda proizvoda @@export_scripts@@ sve što dizajniramo utiče na korisničko iskustvo – POISTOVEĆUJEM ga sa dizajnom digitalnih proizvoda jer teško može da se razdvoji – Dalje u izlaganju dizajn podrazumeva ovu definiciju – U nastavku ću govoriti o dizajnu uopšte i neću se ograničavati samo na dizajn korisničkog iskustva, jer sve što dizajniramo utiče na korisničko iskustvo: da li je lepo ili pogrešno napisana poruka, da li je ikonica ispravna ili neispravna, da li se sajt sporo ili brzo učitava... – Dizajn nije umetnost. Dizajn nije ni crtanje. –
- 13. @@export_scripts@@ Dizajniranje = Dizajniranje = Osmišljavanje Osmišljavanje @@export_scripts@@ Ja kad objašnjavam šta radim, trudim se da izbacim reč "dizajn" – Svaki dizajn je dizajn korisničkog iskustva. – Sve one aktivnosti koje dovode do nekog digitalnog proizvoda, uključujući i crtanje. – dizajn je analitičan i logičan, nije baziran na mišljenjima ili "ukusu" dizajnera –
- 14. @@export_scripts@@ Dizajniranje Dizajniranje Osmišljavanje Osmišljavanje je nezavisno od je nezavisno od tehnologije tehnologije @@export_scripts@@ Dizajniraš u glavi, ne treba ti tehnologija! – Dizajneri donose niz odluka da bi osmislili digitalni proizvod. – Ovde razbijamo prvi mit: Dizajn == FIGMA –
- 15. @@export_scripts@@ Dizajniranje je Dizajniranje je planiranje planiranje @@export_scripts@@ Dizajn kao artefakt - je jednostavno plan za izradu digitalnog proizvoda. – služi za referencianje kada se krajnji proizvod napiše – Zbog toga ne treba da ulazimo u ljubavnu vezu sa dizajnom –
- 16. @@export_scripts@@ Dizajn je medju- Dizajn je medju- produkt produkt @@export_scripts@@ Ne pravimo kamene spomenike niti bilborde – Dizajn je efemeralna stvar, isto kao i software – kontraverzno – Ograničeno trajanje dizajna – Software is ephemeral-we are building sandle castles on the beach. We are not building stonehenge nor billboards. – Only one deliverable matters – Designers responsibility AT LEAST is to do quality assurance, if not deliver the whole product alongside with the team – “Evo sta se desava kada nemaate design qa ili dizajn uopste” –
- 17. @@export_scripts@@ Dizajn je sredstvo za Dizajn je sredstvo za komunikaciju komunikaciju @@export_scripts@@ Najvažnije je da je jasno prenet plan za izradu digitalnog proizvoda – Communicate effectively. – You may use text, presentation, video overview, email, chimney signals - I don't care, until the message is accurately transmissed on time. –
- 18. @@export_scripts@@ UX - UI dilema i UX - UI dilema i razgraničavanje razgraničavanje @@export_scripts@@ nećemo nikakve grafike ovde niti šeme da crtamo, niti da objašnjavamo – traže se poslovi "UX/UI" tipa ?!? – Kako da se postavimo kada se takva pozicija trazi? – Sta smo zapravo mi: UI ili UX ili UI/UX dizajneri? – Za mene: UI je podskup UX-a, u dizajn procesu. –
- 19. @@export_scripts@@ Koji interfejs je bolji? Koji interfejs je bolji? @@export_scripts@@ Isto pitanje kao i: koji automobil je bolji – ZABLUDA –
- 20. @@export_scripts@@ Korisnici: Korisnici: Interfejs = Interfejs = proizvod proizvod @@export_scripts@@ UI je proizvod - za skoro sve korisnike – UI je manje više svima bitan jer je u glavi korisnika UI u stvari proizvod. – I tehnički pismeni lako upadnu u taj paradoks - pa se nerviramo kada ne možemo nekoga da dobijemo ili nam je ping više od 10 sekundi, sajt spor, kada telefon iz prve ne uspe da nam prepozna otisak prsta ili lice... – iako smo svesni da iza toga postoji jako kompleksna tehnologija, iako smo svesni da signal treba da putuje hiljadama kilometara, to lako zanemarujemo jer je UI proizvod! –
- 22. @@export_scripts@@ Interfejs ≠ Proizvod! Interfejs ≠ Proizvod! @@export_scripts@@ For the most users, ui is the product; – Istorijski, kada se formirao software bio je exposed i sve i vise i vise je bio skrivan, kao vespa primer kad je sakrio motor prvi put –
- 23. @@export_scripts@@ Interfejs = Proizvod Interfejs = Proizvod Crtanje = Dizajn Crtanje = Dizajn @@export_scripts@@ Crtanje == Design Figma == Design Figma tehničar == dizajner Odatle je to pogrešno shvatanje –
- 24. @@export_scripts@@ Fokus na izgled Fokus na izgled -česta greška dizajnera -česta greška dizajnera @@export_scripts@@ Zbog toga što imaju moćan alat u rukama dizajneri se vrlo rano u procesu fokusiraju na output a ne osmišljavanje. – Pa zbog toga nastaje Figma oriented design. – Možete vrlo lako na razgovoru na posao (na primer, kod mene) da dobijete sledeću design vežbu: design Alexa skill for product support. Pitanje dobijamo: “A Šta tu ima da se dizajnira?” – Greška je odmah na design interview-u da se krene da se crta pravougaonik na tabli. – Greška je raditi-crtati "bilo šta" samo da se produkuje i da se dodje do lažnog progresa. –
- 25. @@export_scripts@@ Portfolio je (samo) Portfolio je (samo) slikovnica! slikovnica! @@export_scripts@@ Nepopularno mišljenje – Fokusiran na output a ne na proces – ..ali to traže recruiteri i HR-ovi jer na taj način jedino znaju da prepoznaju kako da zapošljavaju. – Pa kako onda da se zaposlimo? – Portfolio nam je potreban svakako, ali jedina prava stvar je case study!!! –
- 26. @@export_scripts@@ Studija Studija slučaja slučaja potpunije potpunije objašnjava dizajn objašnjava dizajn proces proces @@export_scripts@@ Spomenuti radionice koje radiš, gde se opričavaju portfoliji –
- 27. @@export_scripts@@ Ko sve Ko sve dizajnira? dizajnira? @@export_scripts@@ Everyone communicates ⇒ Everyone is designer ⇒ Everyone solves problems for people. – Everyone is tennis player. – Everyone is a chef. – Pitanje je samo koliko dobar!!! – Svako ima mišljenje o dizajnu - dakle svako je dizajner. – Ne treba mu uskratiti to pravo – Uloga dizajnera je dakle da upravlja mudro tim misljenjima u korist projekta, da facilitateuje razgovote i prikuplja informacije relevantne za projekat. –
- 29. @@export_scripts@@ Na koga sve Na koga sve utiče dizajn? utiče dizajn?
- 30. @@export_scripts@@ Klijent - Vlasnik Klijent - Vlasnik biznisa biznisa @@export_scripts@@ Klijent - ima potrebe biznisa koje treba da reši. – Dizajn najpre utiče na vlasnike biznisa, klijenta i uopšte biznis – Saradnja - komunikacija - dizajnera sa autorom projekta - klijentom – Dizajner treba da zna da intervjuiše – da ga podstakne na razgovor, – da se u razgovoru priča o potrebama a ne o rešenjima. –
- 31. @@export_scripts@@ Modeli rada Modeli rada @@export_scripts@@ Dva osnovna načina rada kako ćete raditi – Samostalno: freelance ili consulting.. –
- 32. @@export_scripts@@ "Odlučićemo između tri "Odlučićemo između tri rešenja..." rešenja..." @@export_scripts@@ freelancer dilema – komunikacija sa stakeholderom – tri rešenja su tri odvojena projekta –
- 33. @@export_scripts@@ @@export_scripts@@ Ako radite u timu - Komunikacija sa stakeholderom: – Tehnike komuniciranja dizajna Figmom, a još bolje videom, moze i dimnim signalima ili bilo čemu drugome. – Ovo ponavljamo zato što je to važno! –
- 34. @@export_scripts@@ Pozitivan scenario se Pozitivan scenario se najčešće pokazuje najčešće pokazuje @@export_scripts@@ happy path illusion when presenting design to stakeholders – Most design presentations focus on a happy path! – Look at Dribble, Behance etc. – Ispricaj ti na pocetku "happy path", ali probaj da adresiras i manjkavosti dizajna ako ih ima i ako ih vidis. Otvorenost u komunikaciji je kljuc! –
- 35. @@export_scripts@@ Dizajner koji Dizajner koji izvršava izvršava naredbe naredbe @@export_scripts@@ "Veži konja gde ti gazda kaže" – You are gatekeeper. – Mi smo plaćeni da donosimo odluke a ne da crtas po uputstvima –
- 36. @@export_scripts@@ Razvoj novih Razvoj novih funkcionalnosti funkcionalnosti - glavna mera - glavna mera napredovanja napredovanja @@export_scripts@@ Values, not outputs; Impacts and Outcomes → How we changed users' life? kao najčešća pojava rada u timu – Aplaudira se napretku, a ne proverenoj tezi za resavanje problema, ne davanju novih vrednosti - outcome-a korisnicima – Sledeci put aplaudirajte onom ko je izneo rezultate testa a ne onom ko je napravio feature unpopular opinion –
- 37. @@export_scripts@@ "Pokazaću dizajn kada "Pokazaću dizajn kada završim..." završim..." @@export_scripts@@ Dizajn nije vrač ni mag koji se sakrije i smućka čarobni napitak – znacaj ranog Checkupa u dizajn procesu – Jesmo li na pravom putu u našem planu? – Bolje je ranije u procesu proveriti da li si na pravom putu nego duboko zagaziti u dizajn koji moze da bude lep, ali je pogrešan – U realnosti opisati kako izgleda ta saradnja, timovi; –
- 38. @@export_scripts@@ @@export_scripts@@ Umesto na alat, dizajner se fokusira na saradnju s svim stakeholderima! – ako se ne komunicira dobro, onda se iznevere očekivanja za dizajn koji treba da se isporuči. –
- 39. @@export_scripts@@ Programer Programer @@export_scripts@@ Bolje je da poznaješ 10% tehnologiju u kojoj ćeš raditi Nego 0% – Arhitekta koji ne poznaje materijale nije arhitekta! – be aware of constraints in production platform from day one – Dizajner = arhitekta; tašna-mašna; crtač; Programer = građevinac; on zna kada treba da dotera kamion, da postavi dizalicu, da dotera viljuškar da istovari, koji majstori dolaze pre a koji posle –
- 40. @@export_scripts@@ Dizajner Dizajner poznaje poznaje platformu za platformu za koju koju dizajnira dizajnira @@export_scripts@@ Dobar arhitekta poznaje materijal u kome radi pa tako pomaze programerima – Tako da on prihvata da radi i nadzor! Malo je grub termin ali na to se svodi - kao da nekog posmatramo dok radi – Dobar građevinac neće da krije svoj rad već će jasno i rado da objašnjava zašto je nešto moguće ili nemoguće – Znati 5% neki programerski framework je neograničeno puta veće nego znati 0% framework. –
- 41. @@export_scripts@@ Isporučivanje dizajna Isporučivanje dizajna @@export_scripts@@ Vruć krompir – ne pomaze programerima mnogo Dobar dizajner ne prebacuje dizajn preko zida, kao vruć krompir, već razume da je njegov dizajn nešto što je određeno za kantu za smeće, pa direktno učestvuje-doprinosi u delivery-ju proizvoda, a ne samo u delivery-ju dizajna. –
- 42. @@export_scripts@@ @@export_scripts@@ A designer is a gatekeeper! –
- 43. @@export_scripts@@ Korisnik proizvoda Korisnik proizvoda @@export_scripts@@ Na njega najviše utiče dizajn! –
- 44. @@export_scripts@@ Razvoj ljudskih odlika je Razvoj ljudskih odlika je nezavisan od razvoja nezavisan od razvoja tehnologije tehnologije @@export_scripts@@ Dobra strana priče – držite se nje a ne tehnologije – proizvodi se prilagođavaju korisniku a ne obrnuto –
- 45. @@export_scripts@@ Dizajner najčešće nije Dizajner najčešće nije korisnik proizvoda koji korisnik proizvoda koji dizajnira. dizajnira. -nepopularan stav @@export_scripts@@ ..."JA bih ovo uradio " - pogrešna premisa – "Sigurno će ovako i ovako da urade..." –
- 46. @@export_scripts@@ Istraživanje prethodi Istraživanje prethodi dizajniranju dizajniranju @@export_scripts@@ razgovor, ne anketa – Analiziramo navike korisnika u prošlosti, a ne u budućnosti! – Dosadno –
- 47. @@export_scripts@@ Proizvod dizajnirate Proizvod dizajnirate da služi da služi realnim realnim korisnicima korisnicima @@export_scripts@@ Proizvod koji dizajnirate nije centar sveta – Dizajnirate da bude alat –
- 48. @@export_scripts@@ "Optimalno korisničko "Optimalno korisničko iskustvo" iskustvo" ...je ...je jedan jedan od kriterijuma za dizajn. od kriterijuma za dizajn.
- 49. @@export_scripts@@ @@export_scripts@@ Ovo nije romansirano – dizajner ne treba radi na pokretnoj traci – Da li je u stvari dizajner uvek u sredini? – Nekad nije ali treba se truditi da jeste – naglasak na delivery proizvoda i outcome-a - impacta, a ne delivery feature-a. –
- 50. @@export_scripts@@ Recenzija dizajna Recenzija dizajna @@export_scripts@@ You are not your design – detaching from your design – Saradnja u dizajn procesu . znati davati i primati kritiku –
- 51. @@export_scripts@@ Dugoročne Dugoročne posledice posledice dizajna... dizajna... @@export_scripts@@ Kako možemo da napravimo tehnološko rešenje koje je win-win za sve? ili je sve samo "Zero-sum" game? – Na čiji račun ovo naše tehnološko rešenje funkcioniše? – Airbnb gde su svi stakeholderi namireni ali onda se utiče na okolinu, na zgrade... na ceo grad, na cenu nekretnina... –
- 52. @@export_scripts@@ Proizvod "dizajniran" da zastari Proizvod "dizajniran" da zastari @@export_scripts@@ kao i svi drugi proizvodi koji imaju bateriju! ...Pogubno za okolinu! –
- 53. @@export_scripts@@ Dizajn uvek funkcioniše u Dizajn uvek funkcioniše u ekosistemu ekosistemu @@export_scripts@@ Često zaboravljamo ovaj uticaj dizajna na ceo svet – Čak iako postoji saradnja na svim nivoima koji su opisani, ne zaboravimo svet – Nismo toliko opsesivni svetom, već živimo u svom balonu, silosu – Designers should care what happens after the product is delivered! – Designers and programmers are great at inventing software. We obsess over every aspect of that process: the tech we use, our methodology, the way it looks, and how it performs. – Unfortunately we’re not nearly as obsessed with what happens after that, when people integrate our products into the real world. They use our stuff and it takes on a life of its own. Then we move on to making the next thing. We’re builders, not sociologists. – Odgovornost dizajnera - sve vreme dok traje proizvod – Dizajner balansira izmedju zainteresovanih strana – Poboljšanje dizajn procesa i učenje novih alata – Šta je spomenuto – šta slušaoci treba da ponesu sa predavanja? – Osvrnuti se na dizajn u svim kontekstima...! –
- 54. @@export_scripts@@ Kako Kako (na)učiti (na)učiti dizajn? dizajn? @@export_scripts@@ Strpljivo, kroz saradnju sa svim navedenim učesnicima u procesu –
- 55. @@export_scripts@@ Kako Kako (ne) (ne) učiti učiti dizajn? dizajn? @@export_scripts@@ Anegdota o "šoferskom" znanju i poređenje sa "znanjem rada u Figmi". –
- 56. @@export_scripts@@ Mit o dizajn Mit o dizajn bootcampovima bootcampovima @@export_scripts@@ Ne daju temeljno znanje – Kako naučiti dizajn za 3 meseca - 10 godina? – Prodaje se priča da se dizajn može naučiti za 3 meseca. – Potrebno je da se znanje "slegne", a za to nam treba neko vreme. –
- 57. @@export_scripts@@ Design Thinking Design Thinking spašava svet spašava svet @@export_scripts@@ "magični proces" koji će da reši sve probleme – Trivijalizuje kompleksan proces na 4-5 koraka i na jedan "checkbox" – komitet odlučuje – Fundamentalizam, kult, preterano uprošćava rešenje – zanemaruje neke korisnike i favorizuje druge – uključuje korisnike samo za vreme procesa, ne i van njega – Pruža iluziju progresa – Fokusiran uglavnom na srećne scenarije – oslanja se samo na izgled a ne na bazičnu funkcionalnost –
- 58. @@export_scripts@@ Junior, Medior, Senior... Pozicije Junior, Medior, Senior... Pozicije @@export_scripts@@ Kad zavrsite faks Niste Senior – Nisam senior ako sam za 3 meseca nesto naucio i to ponavljao 20 godina – Znanje treba da se slegne! – Mocart je bio senior zato što je 10 godina pre toga svirao – Znaćete i sami kada ste senior, ne treba da dobijete poziciju u firmi seniora pa da odjednom postanete senior preko noći. –
- 59. @@export_scripts@@ Fokusiranje Fokusiranje samo na tehnologiju i alate samo na tehnologiju i alate @@export_scripts@@ Primamljivo! – ... a ne na ljude!! – Technology conforms, not vice versa! – Photoshop, Figma, Blokchain, AI... su samo neki od alata iz našeg arsenala –
- 60. @@export_scripts@@ Da li smo sve Da li smo sve spomenuli? spomenuli? @@export_scripts@@ Ima još mnogo toga što nismo spomenuli, spomenuli smo najvažnije ... Kao spisak preko celog ekrana
- 61. @@export_scripts@@ Modeless Interfaces increase usability • Modeless Interfaces increase usability • Design Critique Design Critique techniques techniques • Research artefacts • Communicating • Research artefacts • Communicating decisions • decisions • Aligning design with SCRUM Aligning design with SCRUM • Testing Design • • Testing Design • Interviewing stakeholders • Interviewing stakeholders • Just in time help Just in time help • • Avoiding Avoiding Vanity Metrics Vanity Metrics • Blur screen technique when assessing • Blur screen technique when assessing hierarchy • hierarchy • Myth of Simplicity Myth of Simplicity • • Lorem Ipsum is not design Lorem Ipsum is not design • • Doing Design interviews • Doing Design interviews • Aesthetic Usability effect Aesthetic Usability effect • • Design Quality Assurance • Out of sight, out of mind • Design Quality Assurance • Out of sight, out of mind • Getting out of the common medium Getting out of the common medium • Adequate over • Adequate over consistency • Design Systems • consistency • Design Systems • Prototypes as sales tools Prototypes as sales tools • • Sketching to assess early ideas • Design positions fallacy • Sketching to assess early ideas • Design positions fallacy • If everything is important, nothing is important If everything is important, nothing is important • Design - • Design - Developer Pairing • Passive-agresive voice ruins usability • Developer Pairing • Passive-agresive voice ruins usability • Produce Outcomes over features Produce Outcomes over features • Core product first, then • Core product first, then onboarding • Opinion is the weakest form of user data • onboarding • Opinion is the weakest form of user data • Speak user vocabulary over system vocabulary Speak user vocabulary over system vocabulary • • Eliminating handover • Presenting design Eliminating handover • Presenting design @@export_scripts@@ Ovo su sve tehnike koje mogu da budu deo našeg arsenala –
- 62. @@export_scripts@@ tinyletter.com/mika-jovicic tinyletter.com/mika-jovicic @@export_scripts@@ To što nismo spomenuli, nalazi se u knjizi koju pišem – UX Priručnik, za vanvremenske dizajn tehnike –