Esta es una presentación utilizada para un taller básico de UX Mobile Design. Junio 2017

1. UX
Mobile
Design
WORKSHOP

4. AGENDA
09:00 am
09:30 am
10:00 am
10:10 am
11:00 am
12:00 md
01:00 pm
01:40 pm
Desayuno liviano
Intro. Eso que llamamos UX
10min break. Snack saludable
Tips para crear mobile apps “usables”
Buenas prácticas aplicadas. Manos en el cel
Almuerzo
Presentaciones de equipo
Cierre

5. Reglas del juego

6. Reglas del juego
líder cronos

7. ¡Entremos en calor!
EJERCICIO

8. Landing page
- Vender 1 produto
- Imagen
- Input (texto)
- CTA button (botón de acción)
- Menú
2 min

9. Soy un súper héroe y mi súper
poder es __________!
INTROS
30 seg

10. Preguntas frecuentes cuando
desarrollo un app
POST IT!
2 min

11. ¿Qué esperás del taller?
POST IT!
1 min

12. Equipo

13. Escogé el nombre de tu equipo
PONELE NOMBRE
1 min

14. Escogé el líder de tu equipo
CORONALO
30 seg

15. Escogé el cronos de tu equipo
CRONOMETREALO
30 seg

16. Eso que llamamos UX
INTRO

17. conceptos

18. User
UX
eXperience
¿qué es?

20. UX
¿Cómo los usuarios pueden
realizar una tarea intuitiva y
eficientemente?

21. User
UI
Interface
¿qué es?

22. UI
Interfaz gráfica con que
interactúa el usuario para
efectuar una tarea

24. - Preguntas claves: ¿Qué?, ¿Cómo?, ¿Por qué?, ¿Dónde?,
¿Quién?
- Es un trabajo en equipo
- La experiencia se relaciona con el entorno, la aplicación es
afectada por el dispositivo y escenarios de uso
- Lo más importante es el problema/necesidad y no la
solución
Resumiendo...

25. “El usuario siempre tiene la razón”

26. Entender al usuario
OBJETIVO

27. Mapa de empatía
HERRAMIENTA

30. Mapa de empatía
POST IT!
5 min

31. UXen mobile

32. UXen mobile
- Patrones de diseño
- Tipografía / Font
- Esquema de color
- Espacio
- Navegación
- Gestures
- Touch area
- Esquemas de diseño
- Pruebas

33. Patrones de diseño
design patterns
Interacciones conocidas a nivel “global” para
ayudar a usuarios a entender el producto

34. error éxito

36. Tipografía
fonts

37. Color

39. Espacio
layout

41. Navegación

42. Gestures

43. Touch area
40px
40px

44. Patrones de diseño
design patterns
pattrns.com
zurb.com/patterntap
dribbble.com
behance.net
material.uplabs.com

45. Sistemas de diseño
design systems
Lenguaje visual e implementación de los patrones
de diseño para un producto en particular

46. Material design
material.io

47. Lightning design
lightningdesignsystem.com

48. Sistemas de diseño
design systems
claridad eficiencia consistencia belleza

49. Guidelines
Reglas del sistema de diseño hechas para una
plataforma o marca

51. Pruebas
testing
Asegurar usabilidad y experiencia del usuario

52. Paper prototyping

53. Prototipos no funcionales
pop (app)
inivision
marvel
flinto
proto.io
principle
webflow
...

54. UXimportancia

55. ¿Por qué UX es importante?
POST IT!
1 min

56. ¡Tiempo de un descancito!
BREAK
10 min

57. Tips para crear mobile apps
“usables”
TIPS

58. Utilizá tabs para opciones muy transitadas

59. Usá bottom navigation para secciones más importantes

60. Utilizá un show more para ocultar opciones poco transitadas

61. Podés usar opciones “scrolleables” si el menú crece

62. Los controles segmentados son otra opción de navegación

63. No ocultés los buscadores

64. Hacé tu call to action claro

65. Evitá dropdowns

66. Usá controles como switches en lugar de dropdows

67. Usá steppers en lugar de dropdows

68. Condensá múltiples select inputs en 1

69. Evitá múltiples columnas

70. No seas repetitivo con campos requeridos

71. Agrupá por categorías

72. Utilizá elementos con áreas apropiadas para “touch”

73. Utilizá date pickers en lugar de dropdowns

74. Sé claro con los requerimientos de contraseña

75. Da opciones de confirmación de password al usuario

76. Da opciones de entrada a la aplicación fáciles

77. Usá passcode o pin si no es necesario un password

78. Utilizá métodos alternativos para autenticar

79. Preguntá en el momento adecuado al pedir un permiso

80. Preguntá en contexto de la acción

81. Informá por qué se necesitás permiso

82. Ayudá al usuario a dar permisos

83. Usá empty states para guiar al usuario

84. Da opciones para iniciar a utilizar la aplicación

85. Informá lo que sucede y da opciones

86. Si es posible permití deshaser acciones al usuario

87. Usá animaciones y transiciones para reforzar una acción

88. Extra Pro Tip

89. Celebrá pequeños logros :)

90. ¡Hora de almorzar rico y saludable!
ALMUERZO
60 min

91. Buenas prácticas aplicadas
PRÁCTICA
-manos en el cel-

92. ¡La hora de la verdad!
APLICÁ

93. E-commerce
- Tomar en cuenta perfil de usuario
- Flujo de check-out
Historia
- Contar historia del flujo de check-out.
- Indicar buenas prácticas aplicadas en
mobile
60 min

95. Landing page
- Vender 1 produto
- Imagen
- Input (texto)
- CTA button (botón de acción)
- Menú

96. Preguntas frecuentes cuando
desarrollo un app
RESPUESTAS

97. ¿Qué esperás del taller?
RESPUESTAS

98. ¿Preguntas?
Q&A

99. Pura Vida! :)

100. yuls walters
yulissa.walters@hulilabs.com
@yulswalters