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.
SALUT!
Ana
INSPIRAȚIE
uxmag.com
uxmastery.com
uxdesign.cc
nngroup.com - Norman Nilson Group
lukew.com - Luke Wroblewski, Product Desi...
OBIECTIVELE PREZENTĂRII
• schimbarea percepției design = partea estetică
• introducerea design-ul în strategia de dezvolta...
ARAGAZUL
USA CARE ÎI LOVEȘTE PE TOȚI
EXERCIȚIU DE ÎNCĂLZIRE
Desenați un pod
EXERCIȚIU DE ÎNCĂLZIRE
Desenați ceva cu care
copiii s-ar distra în timp
ce ar sări peste un râu
CARE E DIFERENȚA?
UTILIZABILITATE VS.
EXPERIENȚĂ
UTILIZABILITATE VS.
EXPERIENȚĂ
EXPERIENȚA
PRIMA IMPRESIE E DE
MULTE ORI ȘI ULTIMA
• Creierul primitiv - responsabil cu
emoțiile și reacțiile noastre
instinctuale.
din decizia de cumpărare se face prin felul în care
clientul se simte în raport cu produsul
70%
DEFINIȚII
UX / Experiența utilizatorului
Orice interacțiune dintre un utilizator și un produs, sistem sau servicu creează ...
THE SWEET SPOT
DESIGN = EMPATIZARE
Rolul lor.
• Să rezolve probleme
• Să asculte, să observe și să înțeleagă utilizatorul
• Să își argumenteze obiectiv munca...
DESIGNERI DE URMĂRIT
Dieter Rams
Paul Rand
Don Nroman
Chris Do
coffee break
5 minute
Dezvoltare
Lansare
CUM VISEAZĂ
CLIENTUL PROCESUL DE
DEZVOLTARE
Clientul are o idee
EVRIKA!
Clientul are o idee
Dezvoltare
Clientului
îi place?
Lansare
ModificăriUI Design
NuNu arată bine
Da
REZULTATUL
Timp
Energie
Bani
Speranțe
Oameni
Documentație
UNDE AM GREȘIT?
Clientul are o idee
Dezvoltare
Clientului
îi place?
Lansare
ModificăriUI Design
NuNu arată bine
Da
Construiește
Învață
Testează
ETAPELE DIN PROCESUL DE
DESIGN THINKING
Research
Prototipare
Brainstorming
Teste
Dezvoltare
Analiză
PROCESUL DE UX SE POATE
INTEGRA ÎN METODOLOGIA AGILE
Research
TRADUCEREA CERINȚELOR
STAKEHOLDERILOR IN LIMBAJ UX
Clientul spune
Nu suntem siguri ce vor userii noștri.
Tot site-ul nostr...
OUTPUT
Compania Personas Empathy map Senariu
SchițeUser flow Prototip interactiv Fezabilitate
COMPANY RESEARCH
• Interviu cu stakeholderi
• Studiu companie (scopul, personalitatea,
reputația și cultura brandului, com...
POZIȚIONAREA PE PIAȚĂ
ANALIZAREA COMPETIȚIEI
USER RESEARCH
• Interviu
• Observarea userului (reacții, emoții, comportament)
• Teste de utilizabilitate
CINE NU E UTILIZATORUL
Tu
Directorul
Cumpărătorul
Clientul (Stakeholder)
Design leadul
Product managerul
Developerul
utili...
CE SE POATE
ÎNTÂMPLA
CÂND NU ȘTIM
CE VOR USERII
CARE CREDEȚI CĂ
ESTE NEVOIA
ACESTEI FETIȚE?
TEHNICA CELOR
5 DE CE?
TEHNICA CELOR
5 DE CE?
If I had asked people what they
wanted, they would have said
faster horses
- Henry Ford
“
NEVOI VS. DORINȚE
• Sunt necesitățile fizice și psihice ale unei persoane
• În primă fază le vedem ca oportunități, nu ca ...
PERSONAS
• Reprezentarea bazată pe research a userului din target
• Incorporează obiectivele, nevoile, interesele userului...
PERSONAS
EMPATHY MAP
SCENARIO MAP
USER FLOW
User flow-ul este o reprezentare vizuală a pasilor prin care un utilizator
trece pentru a îndeplini un scenariu ...
STORY MAP
Brainstorming
BRAINSTORMING
Tehnica de creativitate în grup menită să
rezolve o anumită problemă prin
debitarea unei liste de idei spont...
BRAINSTORMING
În prima fază
Cum s-ar putea face? vs. Cum putem să facem?
Se merge pe cantitate
Nu criticăm
Se poate constr...
SOLUȚIA
REGÂNDIREA PROBLEMEI
MVP VS. MDE
Minimum viable product Minimum delightful experience
Functional
Reliable
Usable
Delightful
Functional
Reliable...
FEZABILITATEA SOLUȚIILOR
Impact
Efort
Prototipare
MOBILE FIRST?
0M
500M
1000M
1500M
2000M
1995 1997 1999 2001 2003 2005 2007 2009 2011 2013 2015 2017
Mobile Desktop
ECRANE
DENSITATEA
• 72 pixeli/inch
• 163 pixeli/inch
randat@1x
• 326 pixeli/inch
randat@2x
• 445 pixeli/inch
randat@3x
• 577 pixe...
REZOLUȚIA
5” 27”
2560 x 1440 px
2560 x 1440 px
CUM SE ADAPTEAZĂ O APLICAȚIE - CASE STUDY
ERGONOMIE
PRIMELE SCHIȚE
WIREFRAMES
Wirefraimingul este unul dintre
exercitiile cele mai eficiente din
procesul de design
USER FLOW
PROTOTIPARE
PRINCIPLE - DEMO
TOOLS
Wireframes & Prototipare
Testare
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 era...
NAVIGATION APP TESTS
APLICAȚII PENTRU TESTE
heat maps & mouse flows
hotjar.com, crazyegg.com
5 second tests & blur test
usabilityhub.com
drunk ...
MICROCONȚINUT
It takes too long : ”You’re 60 seconds away from creating you account”
I'll be blocked into something: ”You ...
EXEMPLE DE
MICROCONTENT
MICROINTERACȚIUNI
CONCLUZII
UN PRODUS ARE UN UX BUN CÂND ARE…
• Utilizabilitate
• Ierarhie
• Claritate
• Utilitate
• Adaptabilitate
• Memorabilitate
•...
Costuri
Timp
Lansare pe piață
Aici se fac majoritatea
greșilor
… 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…
VĂ MULȚUMESC!
UX Basics, Cosmin Maxim
UX Basics, Cosmin Maxim
UX Basics, Cosmin Maxim
UX Basics, Cosmin Maxim
UX Basics, Cosmin Maxim
UX Basics, Cosmin Maxim
UX Basics, Cosmin Maxim
Upcoming SlideShare
Loading in …5
×

UX Basics, Cosmin Maxim

81 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!

×