Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UX Basics, Cosmin Maxim

27 views

Published on

Craf better user experiences through design thinking.

Published in: Design
  • Be the first to comment

  • Be the first to like this

UX Basics, Cosmin Maxim

  1. 1. SALUT! Ana
  2. 2. INSPIRAȚIE uxmag.com uxmastery.com uxdesign.cc nngroup.com - Norman Nilson Group lukew.com - Luke Wroblewski, Product Design director of Google
  3. 3. OBIECTIVELE PREZENTĂRII • schimbarea percepției design = partea estetică • introducerea design-ul în strategia de dezvoltare • designerii și rolul acestora
  4. 4. ARAGAZUL
  5. 5. USA CARE ÎI LOVEȘTE PE TOȚI
  6. 6. EXERCIȚIU DE ÎNCĂLZIRE Desenați un pod
  7. 7. EXERCIȚIU DE ÎNCĂLZIRE Desenați ceva cu care copiii s-ar distra în timp ce ar sări peste un râu
  8. 8. CARE E DIFERENȚA?
  9. 9. UTILIZABILITATE VS. EXPERIENȚĂ
  10. 10. UTILIZABILITATE VS. EXPERIENȚĂ
  11. 11. EXPERIENȚA
  12. 12. PRIMA IMPRESIE E DE MULTE ORI ȘI ULTIMA • Creierul primitiv - responsabil cu emoțiile și reacțiile noastre instinctuale.
  13. 13. din decizia de cumpărare se face prin felul în care clientul se simte în raport cu produsul 70%
  14. 14. DEFINIȚII UX / Experiența utilizatorului Orice interacțiune dintre un utilizator și un produs, sistem sau servicu creează o experiență. Această experiență rămâne întipărită în mintea utilizatorului și după ce interacțiunea s-a încheiat. Design Thinking / User Centred Design Metoda clasică folosită pentru a găsi soluții creative la diferite probleme (nu neapărat probleme de design). Scopul principal fiind acela de a creea produse memorabile pe care utilizatorii le folosesc cu plăcere și în același timp îndeplinesc așteptările business-ului. Design [dizáin] Plan, concept care are la bază un scop.
  15. 15. THE SWEET SPOT
  16. 16. DESIGN = EMPATIZARE
  17. 17. Rolul lor. • Să rezolve probleme • Să asculte, să observe și să înțeleagă utilizatorul • Să își argumenteze obiectiv munca • Să fie curioși și să pună multe întrebări • Să vorbească limba persoanelor cu care interacționează: stakeholderi, devi, graphic desingeri, testeri, marketing, sales, useri Image by Dieter Petereit DESIGNERIIDE EXPERIENTE
  18. 18. DESIGNERI DE URMĂRIT Dieter Rams Paul Rand Don Nroman Chris Do
  19. 19. coffee break 5 minute
  20. 20. Dezvoltare Lansare CUM VISEAZĂ CLIENTUL PROCESUL DE DEZVOLTARE Clientul are o idee
  21. 21. EVRIKA! Clientul are o idee Dezvoltare Clientului îi place? Lansare ModificăriUI Design NuNu arată bine Da
  22. 22. REZULTATUL Timp Energie Bani Speranțe Oameni Documentație
  23. 23. UNDE AM GREȘIT?
  24. 24. Clientul are o idee Dezvoltare Clientului îi place? Lansare ModificăriUI Design NuNu arată bine Da
  25. 25. Construiește Învață Testează
  26. 26. ETAPELE DIN PROCESUL DE DESIGN THINKING Research Prototipare Brainstorming Teste Dezvoltare Analiză
  27. 27. PROCESUL DE UX SE POATE INTEGRA ÎN METODOLOGIA AGILE
  28. 28. Research
  29. 29. TRADUCEREA CERINȚELOR STAKEHOLDERILOR IN LIMBAJ UX Clientul spune Nu suntem siguri ce vor userii noștri. Tot site-ul nostru e încurcat, vizitatorii nu găsesc ce doresc. Nu știm unde se blochează vizitatorii. Site-ul este greu de folosit, nu este intuitiv. Ce aude consultantul UX Interviuri / sondaje / research Audit de content / restructurarea arhitecturii informației Analytics, teste de mouse flow Teste de utilizabilitate / re-design
  30. 30. OUTPUT Compania Personas Empathy map Senariu SchițeUser flow Prototip interactiv Fezabilitate
  31. 31. COMPANY RESEARCH • Interviu cu stakeholderi • Studiu companie (scopul, personalitatea, reputația și cultura brandului, competiția, poziționare pe piață, timp și buget) • Studiu Google Analytics și Social Media • Sondaje
  32. 32. POZIȚIONAREA PE PIAȚĂ
  33. 33. ANALIZAREA COMPETIȚIEI
  34. 34. USER RESEARCH • Interviu • Observarea userului (reacții, emoții, comportament) • Teste de utilizabilitate
  35. 35. CINE NU E UTILIZATORUL Tu Directorul Cumpărătorul Clientul (Stakeholder) Design leadul Product managerul Developerul utilizatorul
  36. 36. CE SE POATE ÎNTÂMPLA CÂND NU ȘTIM CE VOR USERII
  37. 37. CARE CREDEȚI CĂ ESTE NEVOIA ACESTEI FETIȚE?
  38. 38. TEHNICA CELOR 5 DE CE?
  39. 39. TEHNICA CELOR 5 DE CE?
  40. 40. If I had asked people what they wanted, they would have said faster horses - Henry Ford “
  41. 41. NEVOI VS. DORINȚE • Sunt necesitățile fizice și psihice ale unei persoane • În primă fază le vedem ca oportunități, nu ca soluții • Sunt verbe nu substantive Exemple: Ea are nevoie de o scară, de o carte, de o jucarie - Are nevoie să se joace, să fie băgată în seamă Au nevoie de cai mai rapizi - Au nevoie să călătorească mai rapid Avem nevoie de un buton de check-out mai mare - Vrem ca vizitatorii să facă check-out mai ușor Avem nevoie de o aplicație - Vrem să rezolvăm anumita problemă digital
  42. 42. PERSONAS • Reprezentarea bazată pe research a userului din target • Incorporează obiectivele, nevoile, interesele userului pentru o mai bună intuire a comportamentului acestuia și pentru o viziune comună a membrilor echipei despre profilul acestuia. • În toate etapele de design deciziile se vor lua ținând cont de caracteristicile lui. Ce e util sa contină persona: • vârstă, locație, limbă • educație, cultură, experiență, mentalitate, personalitate • ce îi place, obiceiuri, interese, ce nu-i place • ce îl motivează, care este trigger-ul • nevoie și frustrările
  43. 43. PERSONAS
  44. 44. EMPATHY MAP
  45. 45. SCENARIO MAP
  46. 46. USER FLOW User flow-ul este o reprezentare vizuală a pasilor prin care un utilizator trece pentru a îndeplini un scenariu în cadrul aplicației.
  47. 47. STORY MAP
  48. 48. Brainstorming
  49. 49. BRAINSTORMING Tehnica de creativitate în grup menită să rezolve o anumită problemă prin debitarea unei liste de idei spontane de către membrii grupului Design UX Dev Marketing Client
  50. 50. BRAINSTORMING În prima fază Cum s-ar putea face? vs. Cum putem să facem? Se merge pe cantitate Nu criticăm Se poate construi pe ideile altora Se păstrează topicul Se încurajează ideile ciudate În a doua fază Ne focusăm pe ideiile cu adevărat bune Se schițează sumar soluția ca fiecare să fie în aceiași barcă Se votează dacă este necesar 2, 3 idei care trec în faza de concept
  51. 51. SOLUȚIA
  52. 52. REGÂNDIREA PROBLEMEI
  53. 53. MVP VS. MDE Minimum viable product Minimum delightful experience Functional Reliable Usable Delightful Functional Reliable Usable Delightful
  54. 54. FEZABILITATEA SOLUȚIILOR Impact Efort
  55. 55. Prototipare
  56. 56. MOBILE FIRST? 0M 500M 1000M 1500M 2000M 1995 1997 1999 2001 2003 2005 2007 2009 2011 2013 2015 2017 Mobile Desktop
  57. 57. ECRANE
  58. 58. DENSITATEA • 72 pixeli/inch • 163 pixeli/inch randat@1x • 326 pixeli/inch randat@2x • 445 pixeli/inch randat@3x • 577 pixeli/inch randat@4x
  59. 59. REZOLUȚIA 5” 27” 2560 x 1440 px 2560 x 1440 px
  60. 60. CUM SE ADAPTEAZĂ O APLICAȚIE - CASE STUDY
  61. 61. ERGONOMIE
  62. 62. PRIMELE SCHIȚE
  63. 63. WIREFRAMES Wirefraimingul este unul dintre exercitiile cele mai eficiente din procesul de design
  64. 64. USER FLOW
  65. 65. PROTOTIPARE
  66. 66. PRINCIPLE - DEMO
  67. 67. TOOLS Wireframes & Prototipare
  68. 68. Testare
  69. 69. TESTE DE UTILIZABILITATE User: E ok dacă dau click aici? Tester: Tu ce părere ai? U: Cred că aș putea da click, dar nu eram sigur unde sa dau click... T: Ce te-a făcut să te simți nesigur? U: Nu arată ca un buton obișnuit linkul acela...
  70. 70. NAVIGATION APP TESTS
  71. 71. APLICAȚII PENTRU TESTE heat maps & mouse flows hotjar.com, crazyegg.com 5 second tests & blur test usabilityhub.com drunk test theuserisdrunk.com mom test theuserismymum.com
  72. 72. MICROCONȚINUT It takes too long : ”You’re 60 seconds away from creating you account” I'll be blocked into something: ”You can change this at any time later” Make the user to feel like everything they want is just around the corner: “Sign in and start posting.”
  73. 73. EXEMPLE DE MICROCONTENT
  74. 74. MICROINTERACȚIUNI
  75. 75. CONCLUZII
  76. 76. UN PRODUS ARE UN UX BUN CÂND ARE… • Utilizabilitate • Ierarhie • Claritate • Utilitate • Adaptabilitate • Memorabilitate • Eficiență • Este dorit • Este agreabil
  77. 77. Costuri Timp Lansare pe piață Aici se fac majoritatea greșilor
  78. 78. … it is not about U , is is not about Us , it is all about Ux PENTRU CLIENȚI MAI FERICIȚI TREBUIE SĂ ȚII MINTE…
  79. 79. VĂ MULȚUMESC!

×