UX no es lo mismo que UI

1. UX no es UI
NARANYA*LABS, MAYO 2014
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

2. - Estratega UX
!
- Founder en Karmashop
!
- Ex Oracle (UX Fusion apps)
!
- Egresada de UDEM (LDG, EME)
!
- He trabajado para clientes como
Infonavit, Alen, Frisa, Grainger,
Gobierno N.L, Tec de Monterrey...
!
- Amo el té y leer
QUIEN SOY
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

3. TEMA 1. Que es User Experience (UX)
TEMA 2. Los 10 errores comunes en UX
TEMA3. Los 10 errores comunes de UI en móviles
Preguntas TEMARIO

4. Que es User
Experience (UX)
TEMA 1.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

5. Si pudieran elegir
dónde sentarse
ahora...¿Cuál de las
dos elegirían?
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

6. vs.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

7. ¿Cierto?
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
FUNCIONALIDAD + ESTÉTICA

8. UX es la filosofía de
creación de un
producto o servicio.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

9. No depende solo de
factores de diseño,
sino en las emociones
y sentimientos que
crea una marca...
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

10. en lo más
importante:
sus USUARIOS.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

11. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
EJEMPLO
YOUTUBE: FAST LANE VOLKSWAGEN

12. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
EJEMPLO
YOUTUBE: MÁQUINA DE LA AMISTAD COCA COLA

13. ¿Qué emociones les
causaron las marcas?
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

14. Entonces, ¿Qué es
experiencia?
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

15. Usos inesperados
EXPERIENCIA
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Detalles
Subjetiva
Memorias
Aprendizajes
Sabiduría
Sorpresas

16. UX
EXPERIENCIA
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
DESEABLE
USABLE
ÚTIL
NNGROUP 2008

17. La usabilidad es UN
atributo de la
experiencia de usuario
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

18. y se refiere a la
facilidad de uso… pero
OJO no es = a UX
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

19. Es la percepción de que
tan consistente,
organizado, eficiente,
productivo, fácil de usar e
intuitivo es el proceso de
completar una tarea en
particular dentro de un
sistema.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
USABILIDAD

21. Pero frecuentemente
nos quedamos aquí…
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

22. UX
EXPERIENCIA
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
DESEABLE
USABLE
ÚTIL
NNGROUP 2008

23. UX no es una etapa
más al desarrollar un
producto…
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

24. Es entender:
LA SITUACIÓN
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

25. Es entender:
EL CONTEXTO
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

26. Es entender:
LOS HÁBITOS DE USO
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

27. …de un determinado
grupo de personas
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

28. Centrado
en el
diseñador
Centrado
en el
USUARIO
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

29. UI: USER
INTERFACE
CON LO QUE
INTERACTÚA
UX: USER
EXPERIENCE,
QUE SIENTE
MIENTRAS
INTERACTÚA
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

30. TOMADO DE WWW.UXISNOTUI.COM
•Investigación etnográfica
•Entrevistas 1-1
•Creación de test con usuarios
•Recolección y organización de estadísticas
•Creación de personas
•Diseño de producto
•Escritura de funcionalidades
•Artes gráficas
•Diseño de interacción
•Arquitectura de información
•Usabilidad
•Prototipado
•Diseño de interfaz
•Diseño visual
•Creación de taxonomía
•Creación de terminología
•Copywriting
•Presentar y hablar
•Trabajo en conjunto con programadores
•Coordinación de brainstorming
•Evangelización de cultura de diseño
Lo que es UX
•Investigación etnográfica
•Entrevistas 1-1
•Creación de test con usuarios
•Recolección y organización de estadísticas
•Creación de personas
•Diseño de producto
•Escritura de funcionalidades
•Artes gráficas
•Diseño de interacción
•Arquitectura de información
•Usabilidad
•Prototipado
•Diseño de interfaz
•Diseño visual
•Creación de taxonomía
•Creación de terminología
•Copywriting
•Presentar y hablar
•Trabajo en conjunto con programadores
•Coordinación de brainstorming
•Evangelización de cultura de diseño
Lo que la gente cree

31. Los 10 errores
comunes en UX
TEMA 2.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

32. No establecer
objetivos del negocio
ERROR 1.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

33. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error

34. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de
tener claro:
¿Qué quiero lograr?

35. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
¿Aumentar las ventas un 10%?
¿Mayor alcance?
¿Canal de soporte?

36. Establecer objetivos
del negocio
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 1.

37. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Ofrecer
personalización
NIKE:

38. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
1
2
ESTRATEGIA
1. Necesidades del usuario
2. Objetivos del negocio

39. Desconocer a
mis usuarios
ERROR 2.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

40. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error

41. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de
tener claro:
¿Quiénes son mis usuarios?

42. Crear “PERSONAS”
con sus hábitos de uso
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 2.

43. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Servicio de Taxi
a domicilio
UBER:

44. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Cliente /
Conductor
UBER:

45. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
1
2
ESTRATEGIA
1. Necesidades del usuario
2. Objetivos del negocio

46. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
3 4 ALCANCE
3. Especificaciones funcionales
4. Requerimientos de contenido
1
2
ESTRATEGIA
1. Necesidades del usuario
2. Objetivos del negocio

47. No establecer
escenarios de uso
ERROR 3.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

48. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error

49. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de
tener claro:
¿Dónde y cómo se usará
mi producto?

50. Crear escenarios
de uso
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 3.

51. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Se mueve en
una grúa
WMS:

52. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
3 4 ALCANCE
3. Especificaciones funcionales
4. Requerimientos de contenido
1
2
ESTRATEGIA
1. Necesidades del usuario
2. Objetivos del negocio

53. Dar excesiva
funcionalidad
ERROR 4.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

54. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error

55. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de
tener claro:
¿Cuáles son los usos
comunes?

56. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Puedo dar funcionalidad
avanzada, pero darle
prioridad a la más usada

57. Establecer los usos
comunes
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 4.

58. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Identificar
música
SHAZAM:

59. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
3 4 ALCANCE
3. Especificaciones funcionales
4. Requerimientos de contenido
1
2
ESTRATEGIA
1. Necesidades del usuario
2. Objetivos del negocio

60. No dar importancia a
los contenidos
ERROR 5.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

61. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error

62. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de
tener claro:
¿Qué voy a comunicar?

63. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Y no sólo es texto, sino:
imágenes, audio,
video, etc…

64. Definir elementos de
comunicación
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 5.

65. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
VirtualAudio
Fotos
Texto
Call to
Action

66. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
3 4 ALCANCE
3. Especificaciones funcionales
4. Requerimientos de contenido
1
2
ESTRATEGIA
1. Necesidades del usuario
2. Objetivos del negocio

67. No hacer arquitectura
de información
ERROR 6.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

68. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error

69. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de
tener claro:
¿Cómo se va a navegar?

70. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Por producto
Por solución
Por categoría, etc…

71. Hacer wireframes con
flujos de navegación
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 6.

72. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

73. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
5 6 ESTRUCTURA
5. Diseño de interacción
6. Arquitectura de información
1
3 4
ESTRATEGIA
1. Necesidades del usuario
2. Objetivos del negocio
ALCANCE
3. Especificaciones funcionales
4. Requerimientos de contenido

74. Pedir cosas
innecesarias
ERROR 7.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

75. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error

76. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de
tener claro:
¿Qué necesito realmente?

77. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
¿Lo puedo pedir más tarde?
¿Edad?
¿Género?
¿Compañía?

78. Establecer los campos
indispensables
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 7.

79. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Registro MUY
sencillo
MAILCHIMP:

80. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
5 6 ESTRUCTURA
5. Diseño de interacción
6. Arquitectura de información
1
3 4
ESTRATEGIA
1. Necesidades del usuario
2. Objetivos del negocio
ALCANCE
3. Especificaciones funcionales
4. Requerimientos de contenido

81. Hacer zoom out de mi
sitio web para móvil
ERROR 8.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

82. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error

83. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de
tener claro:
LEGIBILIDAD

84. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
¿Los objetivos desde
móvil son los mismos
que desde web?

85. Establecer objetivos
para móvil
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 8.

86. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Scan & GoWALMART:
http://www.jslpublishing.com/wal-mart-app-user-leaves-mobile-author-in-her-dust/

87. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
7 8
9
ESQUELETO
7. Diseño de la interfaz
8. Diseño de navegación
9. Diseño de información
1
2
3 4
5 6
ESTRATEGIA
1. Necesidades del usuario
2. Objetivos del negocio
ALCANCE
3. Especificaciones funcionales
4. Requerimientos de contenido
ESTRUCTURA
5. Diseño de interacción
6. Arquitectura de información

88. No diseñar la
información
ERROR 9.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

89. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error

90. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de
tener claro:
¿Cómo puedo simplificar?

91. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
¿Necesito todos esos datos?
¿Puedo esconder algunos?
¿Puedo mostrar gráficas?

92. Planear el diseño de
información
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 9.

93. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Dashboard con
analytics
COUNTLY:

94. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
7 8
9
ESQUELETO
7. Diseño de la interfaz
8. Diseño de navegación
9. Diseño de información
1
2
3 4
5 6
ESTRATEGIA
1. Necesidades del usuario
2. Objetivos del negocio
ALCANCE
3. Especificaciones funcionales
4. Requerimientos de contenido
ESTRUCTURA
5. Diseño de interacción
6. Arquitectura de información

95. No medir o probar con
usuarios reales
ERROR 10.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

96. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error

97. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
SIEMPRE debo de
tener claro:
¿Fue fácil de usar?

98. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
¿La experiencia fue buena?
¿Hubo frustración?
¿Completaron las tareas?

99. Hacer pruebas de
usabilidad reales
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 10.

100. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Pruebas con
usuarios REALES

101. Los 10 errores
comunes de UI
en móviles
TEMA 3.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

102. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
1
2
3 4
5 6
7 8
9
10
ESTRATEGIA
1. Necesidades del usuario
2. Objetivos del negocio
ALCANCE
3. Especificaciones funcionales
4. Requerimientos de contenido
ESTRUCTURA
5. Diseño de interacción
6. Arquitectura de información
ESQUELETO
7. Diseño de la interfaz
8. Diseño de navegación
9. Diseño de información
SUPERFICIE
10. Diseño visual

103. Botones pequeños
!
ERROR 1.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

104. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI

105. No dar feedback visual
!
ERROR 2.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

106. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI

107. Excesivas
notificaciones (push)
ERROR 3.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

108. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI

109. Tener un mal
affordance
!
ERROR 4.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

110. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI

111. INCONSISTENCIA
!
ERROR 5.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

112. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI

113. Textos miniatura
o ilegibles
ERROR 6.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

114. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI

115. Mal diseño de
formularios
ERROR 7.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

116. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI

117. IGNORAR PATRONES
!
ERROR 8.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

118. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI

119. Querer “innovar” en
símbolos predefinidos
ERROR 9.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

120. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI

121. Uso incorrecto
del color
ERROR 10.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

122. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI

123. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
PLANOS UX
J.J. GARRETT 2002
1
2
3 4
5 6
7 8
9
10
ESTRATEGIA
1. Necesidades del usuario
2. Objetivos del negocio
ALCANCE
3. Especificaciones funcionales
4. Requerimientos de contenido
ESTRUCTURA
5. Diseño de interacción
6. Arquitectura de información
ESQUELETO
7. Diseño de la interfaz
8. Diseño de navegación
9. Diseño de información
SUPERFICIE
10. Diseño visual

124. ¿Preguntas?
!
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

125. Gracias :)
¿QUIERES APLICAR LO QUE VIMOS? > UXSTARTUPS.COM
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR