ux & usabilidad
TRANSCRIPT
![Page 1: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/1.jpg)
UX & USABILIDADen interfaces
Hacer
Probar
Pensar
![Page 2: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/2.jpg)
UX | UI
• UI - parte visual de la aplicación o sistema con la que el usuario interactúa.
• UX - experiencia que tiene la persona (y cómo se siente) al interactuar no sólo con tu aplicación o sistema, sino con tu producto, servicios, tu gente, toda tu empresa.
![Page 3: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/3.jpg)
UX no se trata de la interfaz (solamente)
Pero se vale de interfaces para brindar experiencias al usuario
![Page 4: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/4.jpg)
USABILIDAD
Medición que determina qué tan fácil de usar es una interfaz.
• Eficiencia
• Satisfacción
• Sencillez
![Page 5: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/5.jpg)
USABILIDAD… ¿CÓMO LOGRARLA?
1. Conoce a tu usuario
2. Prueba
![Page 6: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/6.jpg)
1. CONOCER A TU USUARIO
• Perfil de usuario - Entrevistas, encuestas, métricas.
• Personas - Personaje o usuario modelo.
• UCD (User-Centered Design) - Diseño centrado en el usuario.
![Page 7: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/7.jpg)
Ejemplo
PERFIL DE USUARIO
![Page 8: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/8.jpg)
USO DE PERSONAS Y ESCENARIOS• Personaje definido en
base al perfil de usuarios de tu aplicación.
• Nos ayuda a ponernos en sus zapatos.
• Ubicarlo en distintos escenario nos ayuda a saber en qué circunstancias se usará tu aplicación.
http://fakecrow.com/free-persona-template/
![Page 9: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/9.jpg)
https://blog.mailchimp.com/new-mailchimp-user-persona-research/
Ejemplos de personas
![Page 10: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/10.jpg)
DISEÑO CENTRADO EN EL USUARIO
• Entender las necesidades principales del usuario
• Asegurar mayor facilidad de uso
• Mejorar su experiencia con la interfaz
Se trata de diseñar pensando siempre en el usuario final, quién usará nuestra interfaz.
![Page 11: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/11.jpg)
2. PROBAR
• Observar y analizar el comportamiento del usuario
• Tareas y escenarios de uso
Pruebas
Pruebas
Pruebas
![Page 12: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/12.jpg)
TIPOS DE PRUEBAS
• Evaluación heurística - checklist de los principios de usabilidad.
• Caminata cognitiva - ponte en los zapatos del usuario.
• Con usuarios finales - obsérvalos. Básate en el desempeño del sistema, no preferencias del usuario.
![Page 13: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/13.jpg)
HEURÍSTICAS DE USABILIDAD
1. Visibilidad del estatus del sistema. Feedback inmediato.
2. Relación entre el sistema y el mundo real. Lenguaje familiar, orden lógico y natural de la información.
3. Control y libertad para el usuario. El usuario debe sentir que tiene el control y libertad mientras usa tu aplicación, y facilitarle el deshacer o arreglar sus errores.
![Page 14: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/14.jpg)
HEURÍSTICAS DE USABILIDAD
4. Consistencia y estándares. No hay que reinventar la rueda, usando estándares agilizamos la curva de aprendizaje y le facilitamos la vida al usuario.
5. Prevención de errores. Ayudemos a prevenir que el usuario cometa un error.
![Page 15: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/15.jpg)
HEURÍSTICAS DE USABILIDAD
6. Reconocer antes que recordar. Objetos, acciones y opciones visibles para que el usuario no tenga que recordar qué y cómo.
7. Flexibilidad y eficiencia de uso. Ofrecer aceleradores a los usuarios expertos.
8. Estética y diseño minimalista. Información concisa y relevante.
![Page 16: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/16.jpg)
HEURÍSTICAS DE USABILIDAD
9. Ayuda al usuario a reconocer, diagnosticar y recuperarse de errores. Mensajes de error en lenguaje simple y darle opciones de qué hacer a continuación.
10. Ayuda y documentación. Ofrecer ayuda al usuario, que sea fácil de encontrar y entender, concreta.
http://www.nngroup.com/articles/ten-usability-heuristics/
![Page 17: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/17.jpg)
![Page 18: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/18.jpg)
EJEMPLOS
Visibilidad del estatus del sistema. Feedback inmediato.
![Page 19: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/19.jpg)
EJEMPLOS
Prevención de errores
![Page 20: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/20.jpg)
EJEMPLOS
Manejo de errores
![Page 21: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/21.jpg)
EJEMPLOS
Ayuda
![Page 22: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/22.jpg)
EJEMPLOS
Ayuda
![Page 23: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/23.jpg)
EJEMPLOS
Reconocer antes que recordar
![Page 24: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/24.jpg)
EJEMPLOS
Lenguaje familiar…y algo extra
![Page 25: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/25.jpg)
http://www.slideshare.net/wouterwalgraeve/user-centered-design-user-experience
![Page 26: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/26.jpg)
RESUMIENDO… 5 PUNTOS
1. Conoce al usuario final y tenlo en mente durante todo el proceso de desarrollo
2. Apóyate en los estándares y patrones
3. Menos es más
4. Siempre siempre siempre prueba y prueba y vuelve a probar
5. Los detalles sí IMPORTAN, es la sal y pimienta ;)
![Page 27: UX & Usabilidad](https://reader034.vdocuments.site/reader034/viewer/2022042511/55a8061a1a28abd32f8b4593/html5/thumbnails/27.jpg)
Susana Castillo@skyfenix
GRACIAS=)