El documento habla sobre la diferencia entre UX (experiencia de usuario) y UI (interfaz de usuario), resumiendo que UX se enfoca en las emociones y sentimientos que una marca genera en los usuarios, mientras que UI se enfoca en la funcionalidad y estética. También presenta algunos de los errores comunes en UX, como no establecer objetivos de negocio claros, desconocer a los usuarios o no definir escenarios de uso.

1. UX no es lo
mismo que UI
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
@accantu

2. - Especialista UX
- Ex Oracle (UX Fusion apps)
- Egresada de UDEM (LDG, EME)
- He trabajado para clientes como
El Palacio de Hierro, Alen, Grainger,
Gobierno N.L, Tec de Monterrey...
SOBRE MI:
ANDREA CANTÚ
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

3. Pueden seguirme
@accantu
blog.acantu.com
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR

4. 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

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

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

7. vs.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu

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

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

10. 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 @accantu

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

12. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
EJEMPLO
YOUTUBE: FAST LANE - THE SLIDE
@accantu

13. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
EJEMPLO
YOUTUBE: MAQUINA DE LA AMISTAD COCA-COLA
@accantu

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

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

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

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

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

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

20. 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
@accantu

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

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

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

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

26. Es entender:
EL CONTEXTO
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu

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

28. …de un determinado
grupo de personas
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu

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

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

31. 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

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

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

34. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
@accantu

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

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

37. Establecer objetivos
del negocio
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 1.
@accantu

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

39. 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

40. Desconocer a
mis usuarios
ERROR 2.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu

41. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
@accantu

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

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

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

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

46. 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

47. 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

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

49. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
@accantu

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

51. Crear escenarios
de uso
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 3.
@accantu

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

53. 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

54. Dar excesiva
funcionalidad
ERROR 4.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu

55. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
@accantu

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

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

58. Establecer los usos
comunes
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 4.
@accantu

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

60. 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

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

62. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
@accantu

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

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

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

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

67. 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

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

69. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
@accantu

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

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

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

73. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu

74. 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

75. Pedir cosas
innecesarias
ERROR 7.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu

76. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
@accantu

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

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

79. Establecer los campos
indispensables
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
REGLA 7.
@accantu

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

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

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

83. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
@accantu

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

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

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

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

88. 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

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

90. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
@accantu

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

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

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

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

95. 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

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

97. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
Error
@accantu

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

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

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

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

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

103. 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

104. Botones pequeños
ERROR 1.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu

105. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
@accantu

106. No dar feedback visual
ERROR 2.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu

107. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
@accantu

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

109. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
@accantu

110. Tener un mal
affordance
ERROR 4.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu

111. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
@accantu

112. INCONSISTENCIA
ERROR 5.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu

113. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
@accantu

114. Textos miniatura
o ilegibles
ERROR 6.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu

115. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
@accantu

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

117. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
@accantu

118. IGNORAR PATRONES
ERROR 8.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu

119. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
@accantu

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

121. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
@accantu

122. Uso incorrecto
del color
ERROR 10.
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR @accantu

123. NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR
NO SI
@accantu

124. 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

125. ¡Gracias!
@accantu
blog.acantu.com
NO UTILIZARSE O DISTRIBUIRSE SIN PERMISO DEL AUTOR