UI ≠ UX

Slides de mi conferencia de UX para Mejorandola [mini] Conferencia

Transcript

1. UI != UX @lulomx #mejorandoux ! mejorando.la conferencia [mini]
2. Human centered design User driven design User experience design Design thinking etc…
7. all the interactions a person has with your product or company over time
8. La experiencia de usuario no se añade a un producto, un producto se diseña pensando en la experiencia de usuario
15. http://littlebigdetails.com
16. BAD UX
20. "Knowing how people will use something is essential.” ! —Donald Norman
21. Preguntas que la interfaz debe resolver: ! Qué quiero lograr? Qué alternativas tengo para lograrlo? Que acción puedo hacer ahora mismo? Cómo lo hago? Qué pasó? Qué significa? He logrado mi objetivo?
22. How to UX sketch wireframe mockup prototype ideas features funcionality layout copy look&feel polish icons animation feature test
23. How to UX sketch wireframe mockup prototype
26. How to UX sketch mockup prototype wireframe
29. @lulomx #mejorandolaux
31. @lulomx #mejorandolaux
32. If you don’t know what the one purpose of the screen is, then get rid of the screen. ! If you think a screen has two primary purposes, you can probably break it into two screens. ! If something on the screen doesn’t support the one purpose, get rid of it. ! If the one purpose does not add to a positive user experience, then get rid of the screen. How to Wireframe
33. solving ux problems through ui wireframe
38. good copywriting is good design The way that you describe and label the product is just as important as the visual design
39. Copywriting is writing copy (text) for the purpose of advertising or marketing. The copy is meant to persuade someone to buy a product, communicate or influence their beliefs.
40. feedback/error copy
41. @lulomx #mejorandolaux
43. F|@ck you Windows!
44. @lulomx #mejorandolaux
45. @lulomx #mejorandolaux STOP!? WTF!!! ???? ??????????? FML :(
47. empatía qué pasó? qué va a pasar? detalles adicionales
49. AND??????? NO 2ND ACTION
50. copy as starting point storytelling
52. People tolerate the unexplained, but not the inexplicable.
53. How to UX sketch mockup prototype wireframe
55. @lulomx #mejorandolaux
56. ui visual identity
62. @lulomx #mejorandolaux
63. icons @lulomx #mejorandolaux
69. Nothing says “this is a link” better than this is a link
71. How to UX sketch mockup prototype wireframe
74. 1. consistency 2. accesibility 3. feedback
75. Pensar en experiencias completas ! Experiencia es la suma del sitio web, app, cuenta de twitter, email, un sticker, callcenter, face to face.
77. UI != UX @lulomx #mejorandoux ! mejorando.la/ux