DISEÑO DE PRODUCTO
Y USABILIDAD Ismael Viejo
@ismaller Ismael Viejo
Escenario
Cómo crear una estrategia de usuarios
< DISEÑO DE PRODUCTO ESTRATÉGICO >
3
Por qué UX es importante
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Es necesario tener una estrategia de experiencia de usuario Buscar un trabajo, alquilar/comprar una casa, coche, preparar tus vacaciones
4
Por qué UX es importante
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Ser claro en los objetivos INSTAGRAM
✓
Compartir experiencias
✓
Fotos en lugar de miniaturas
✓
Potenciar los comentarios
Instagram sketch, 2010
5
¿Cómo crear una estrategia de usuarios?
Cómo crear una estrategia de usuarios
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Crear, medir y aprender
Brainstorming
Afinar
Entender a nuestros usuarios
Prototipar
Revisar
7
Cómo crear una estrategia de usuarios
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#1 Es necesario comprender a tus usuarios, sus motivaciones, mentalidad y comportamiento
8
Cómo crear una estrategia de usuarios
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#1 Es necesario comprender a tus usuarios, sus motivaciones, mentalidad y comportamiento
9
Cómo crear una estrategia de usuarios
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#2 Debemos ser capaces de contestar preguntas sobre las tareas y objetivos de nuestros usuarios
✓
Hablar de lo que funciona y lo que no, en lugar de funciones y documentos 10
Cómo crear una estrategia de usuarios
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#3 La experiencia de usuario evoluciona constantemente
11
Cómo crear una estrategia de usuarios
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#3 La experiencia de usuario evoluciona constantemente
12
Cómo crear una estrategia de usuarios
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Si cambias muy despacio los usuarios sentirán una experiencia de usuario obsoleta
13
Cómo crear una estrategia de usuarios
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Si cambias muy deprisa, dejarás a tus usuarios atrás
14
¿Qué es la experiencia de usuario?
¿Qué es la Experiencia de Usuario?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Cómo se sienten los usuarios cuando usan nuestras aplicaciones
Estudiamos a los usuarios En un contexto concreto 16
¿Qué es la Experiencia de Usuario?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Es un sentimiento global durante toda la interacción
17
¿Qué es la Experiencia de Usuario?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Cómo se sienten los usuarios cuando usan nuestras aplicaciones
Cubre todos los aspectos de cómo la gente usa los dispositivos y aplicaciones
18
Usabilidad
Usabilidad
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Experiencia de Usuario Estudiamos a los usuarios En un contexto concreto Usabilidad Creamos herramientas Para ejecutar tareas Para conseguir los objetivos
20
Usabilidad
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Se refiere a la facilidad con que las personas puede interactuar
21
Usabilidad
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Cuando el usuario hace lo que quiere hacer y de la manera que esperaba
22
Usabilidad
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Clave: Ausencia de frustración en la experiencia de usuario
23
¿Qué hace que un producto sea más o menos usable? Eficiente, Fácil de aprender, Cumpla las necesidades y Accesible
¿Cómo de usable son sus aplicaciones?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
La interfaz es parte del producto Eficiente, Fácil de aprender, Cumpla las necesidades y Accesible
25
Para ser usable, una app debe ser…
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#1 Eficiente
26
Para ser usable, una app debe ser…
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#2 Fácil de aprender
27
Para ser usable, una app debe ser…
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#2 Fácil de aprender
28
Para ser usable, una app debe ser…
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#2 Fácil de aprender
Iconos y su significado en IOS y Android 29
Para ser usable, una app debe ser…
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#2 Fácil de aprender
Páginas On-boarding 30
Para ser usable, una app debe ser…
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#2 Fácil de aprender
Páginas vacías 31
Para ser usable, una app debe ser…
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#3 Que satisfaga las necesidades
32
Para ser usable, una app debe ser…
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#3 Que satisfaga las necesidades
33
Para ser usable, una app debe ser…
< DISEÑO DE PRODUCTO ESTRATÉGICO >
# 4 Accesible
Focus
Zig zag visual effect 34
Para ser usable, una app debe ser…
< DISEÑO DE PRODUCTO ESTRATÉGICO >
“You know you have achieved perfection in design, not when you have nothing more to add, but when you have nothing more to take away” Antoine de Saint-Exupery. The Little Prince 35
¿Cómo captar la atención de nuestros usuarios? Landings y simples acciones
¿Cómo captar la atención?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
37
¿Cómo captar la atención?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Get a new skill today Once you’ve installed Primer, you can start taking lessons in advertising, content, measurement, and strategy – even when you’re offline. Learn by doing Put your new knowledge to use right away. Each lesson ends with personalized next steps that are automatically saved for you. Fit a lesson in anywhere. Primer is a fast, easy way to learn new marketing skills. You can take our bite-sized lessons wherever and whenever you have 5 minutes free. Get new topics every week. We’re constantly adding more lessons. So whether you need to brush up on the basics or explore advanced subjects, Primer can teach it all to you in a no-nonsense, nojargon way.
38
¿Cómo captar la atención?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Fit a lesson in anywhere. Primer is a fast, easy way to learn new marketing skills. You can take our bite-sized lessons wherever and whenever you have 5 minutes free. Get new topics every week. We’re constantly adding more lessons. So whether you need to brush up on the basics or explore advanced subjects, Primer can teach it all to you in a no-nonsense, nojargon way. Learn by doing Put your new knowledge to use right away. Each lesson ends with personalized next steps that are automatically saved for you. Get a new skill today Once you’ve installed Primer, you can start taking lessons in advertising, content, measurement, and strategy – even when you’re offline.
39
¿Cómo captar la atención?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Fit a lesson in anywhere. Primer is a fast, easy way to learn new marketing skills. You can take our bite-sized lessons wherever and whenever you have 5 minutes free.
40
¿Cómo captar la atención?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
3 puntos claves 1) TEXTO Fit a lesson in anywhere. Primer is a fast, easy way to learn new marketing skills. You can take our bite-sized lessons wherever and whenever you have 5 minutes free. 2) Imagen 3) Acción principal
41
¿Cómo captar la atención?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
3 puntos claves
42
¿Cómo captar la atención?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
43
¿Cómo captar la atención?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
44
¿Cómo captar la atención?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
45
¿Cómo captar la atención?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
46
¿Cómo captar la atención?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
3 puntos claves
47
¿Cómo captar la atención?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
3 puntos claves
48
¿Cómo captar la atención?
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Poco espacio para el contenido principal
49
Retener
< DISEÑO DE PRODUCTO ESTRATÉGICO >
¿Cómo captar la atención de nuestros usuarios? Push notifications
50
Retener
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Tapping en la notification te lleva directamente a los detalles
51
Retener
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Tapping en la notification te lleva directamente a los detalles
52
Retener
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Full screen, offline y rápido
No necesitan pantallazos, etc 53
¿Cómo de usable son nuestras apps? Forms
¿Cómo de usable y social son nuestras apps?< DISEÑO DE PRODUCTO ESTRATÉGICO >
#3 ¿Ayudamos a tomar decisiones?
55
¿Cómo de usable y social son nuestras apps?< DISEÑO DE PRODUCTO ESTRATÉGICO >
Averiguar… ¿Es fácil rellenar un formulario o seguir enlaces?
Hacer clic en un enlace Rellenar formularios
56
¿Cómo de usable y social son nuestras apps?< DISEÑO DE PRODUCTO ESTRATÉGICO >
57
¿Cómo de usable y social son nuestras apps?< DISEÑO DE PRODUCTO ESTRATÉGICO >
Steppers
2 Adultos
Long stepper Radio groups
1 adult
10 €
20 €
40 €
80 €
Switchers Sliders Button inputs
5
10 5
10
20 20
59
¿Cómo de usable y social son nuestras apps?
www.isdi.es
Usar una sola columna
< DISEÑO ESTRATÉGICO >
61
¿Cómo de usable y social son nuestras apps?
www.isdi.es
En formularios, a la hora de elegir opciones, la lectura vertical es más cómoda que la horizontal
< DISEÑO ESTRATÉGICO >
62
¿Cómo de usable y social son nuestras apps?
www.isdi.es
No esconder información relevante
< DISEÑO ESTRATÉGICO >
63
¿Cómo de usable y social son nuestras apps?
www.isdi.es
Botones. Diferenciar acciones principales de secundarias
< DISEÑO ESTRATÉGICO >
64
¿Cómo de usable y social son nuestras apps?
www.isdi.es
Ajustar los formularios al contenido esperado por el usuario
< DISEÑO ESTRATÉGICO >
65
¿Cómo de usable y social son nuestras apps?
www.isdi.es
Marcar los elementos de manera simple y fácil de entender
< DISEÑO ESTRATÉGICO >
66
¿Cómo de usable y social son nuestras apps?
www.isdi.es
Agrupar información relacionada
< DISEÑO ESTRATÉGICO >
67
¿Cómo de usable y social son nuestras apps?
www.isdi.es
Contextualizar errores
< DISEÑO ESTRATÉGICO >
68
No UI is the new UI
No UI
www.isdi.es
Magic
< DISEÑO ESTRATÉGICO >
70
No UI
www.isdi.es
Magic
< DISEÑO ESTRATÉGICO >
71
No UI
www.isdi.es
Magic
< DISEÑO ESTRATÉGICO >
72
No UI
www.isdi.es
Project Soli: gesture recognition
< DISEÑO ESTRATÉGICO >
73
Consejos y buenas prácticas
Buenas prácticas UX
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#4 Funcionalidad y estética que se complementen de forma armónica
75
Buenas prácticas UX
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#5 Crear una lectura intencionada
77
Buenas prácticas UX
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#6 Dar respuesta al usuario
78
Buenas prácticas UX
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#7 Necesitamos ayudar a nuestros ojos a procesar la información
79
Buenas prácticas UX
< DISEÑO DE PRODUCTO ESTRATÉGICO >
Material design
80
Buenas prácticas UX
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#7 Necesitamos ayudar a nuestros ojos a procesar la información Material Design Google
81
Buenas prácticas UX
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#7 Necesitamos ayudar a nuestros ojos a procesar la información
Comportamiento del contenido
82
Buenas prácticas UX
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#8 Interacción y movimiento
83
Buenas prácticas UX
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#9 Reacciones de escenarios
84
Buenas prácticas UX
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#10 Transiciones con significado
85
Buenas prácticas UX
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#10 Transiciones con significado
86
Buenas prácticas UX
< DISEÑO DE PRODUCTO ESTRATÉGICO >
#10 Transiciones con significado
87
Gracias Ismael Viejo
[email protected]
