introducción usabilidad y ux mejorandola-natalia
TRANSCRIPT
![Page 1: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/1.jpg)
Introducción a Usabilidad para web
María Isabel Murillo Natalia Vivas Velasco
Mejorando.la
![Page 2: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/2.jpg)
“Si la experiencia es satisfactoria, la tecnología es exitosa”.
![Page 3: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/3.jpg)
![Page 4: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/4.jpg)
«En el grado en que una persona logra cumplir una tarea en una aplicación o sitio web, justifica la existencia de éste»
![Page 5: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/5.jpg)
¿Cuál es el propósito, objetivo, necesidad o deseo que tienen los usuarios del software o sitios web que ustedes desarrollan?
![Page 6: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/6.jpg)
![Page 7: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/7.jpg)
![Page 8: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/8.jpg)
![Page 9: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/9.jpg)
![Page 10: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/10.jpg)
Vender
Enterarse Informarse
Conocer
Opinar
Participar
Hablar Expresarse
Mirar
Encontrar
Jugar Buscar
Cotizar
Pagar
Reservar
Comprar
Administrar Agendar
¡Piensa en un verbo!
![Page 11: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/11.jpg)
La antigua computación: Qué puede hacer la tecnología por el usuario
La nueva computación: Qué puede hacer el usuario con la tecnología
![Page 12: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/12.jpg)
Cambio de paradigma
![Page 13: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/13.jpg)
¿Qué es una Interfaz?
“El lugar en que las máquinas y los seres humanos se encuentran”
Nicholas Negroponte
Contexto Teórico
![Page 14: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/14.jpg)
![Page 15: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/15.jpg)
Contexto Humano
![Page 16: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/16.jpg)
¿Qué es Usabilidad?
¿Qué es Usabilidad? «La usabilidad se refiere a la capacidad de un software (objeto) de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso» (9126/9241) http://www.usabilitynet.org/tools/r_international.htm
![Page 17: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/17.jpg)
Es un atributo de calidad de cualquier producto diseñado para el uso y beneficio de los seres humanos que se caracteriza por las condiciones de facilidad con que se entiende, aprende y apropia.
¿Qué es Usabilidad?
![Page 18: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/18.jpg)
La efectividad La eficiencia Y satisfacción
Palabra clave: Tiempo
Con que determinado grupo de usuarios alcanza una tarea específica en un ambiente particular
¿Qué es Usabilidad?
¿Qué es Usabilidad?
![Page 19: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/19.jpg)
Principios Básicos de la facilidad de uso ;)
![Page 20: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/20.jpg)
Los principios a continuación son la base para hacer usabilidad sin usuarios. Sin embargo los últimos 5 años ha habido algunos contradictores como Jared Spool que señalan que estos principios son un pretexto para no hacer investigación con usuarios.
Disclaimer
www.usaria.co
![Page 21: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/21.jpg)
1. Visibilidad del estado del sistema
Principios básicos de usabilidad
www.usaria.co
![Page 22: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/22.jpg)
1. Visibilidad del estado del sistema
![Page 23: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/23.jpg)
1. Visibilidad del estado del sistema
Principios básicos de usabilidad
www.usaria.co
![Page 24: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/24.jpg)
2. Conexión entre el sistema y el mundo real
Principios básicos de usabilidad
www.usaria.co
![Page 25: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/25.jpg)
2. Conexión entre el sistema y el mundo real
![Page 26: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/26.jpg)
www.eltiempo.com
Principios básicos de usabilidad 3. Control y libertad por parte del usuario
www.usaria.co
![Page 27: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/27.jpg)
Principios básicos de usabilidad
www.usaria.co
3. Control y libertad por parte del usuario
![Page 28: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/28.jpg)
www.virtualexito.com
Principios básicos de usabilidad 4. Consistencia y estándares
www.usaria.co
![Page 29: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/29.jpg)
Principios básicos de usabilidad
www.usaria.co
4. Consistencia y estándares
![Page 30: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/30.jpg)
www.colciencias.gov.co - Cvlac
Principios básicos de usabilidad 5. Prevención de Errores
www.usaria.co
![Page 31: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/31.jpg)
Principios básicos de usabilidad
www.usaria.co
5. Prevención de Errores
![Page 32: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/32.jpg)
Principios básicos de usabilidad 6. reconocer antes que recordar
www.usaria.co
![Page 33: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/33.jpg)
6. reconocer antes que recordar
![Page 34: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/34.jpg)
Principios básicos de usabilidad 7. fexibilidad y eficiencia de uso
www.usaria.co
![Page 35: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/35.jpg)
Principios básicos de usabilidad
www.usaria.co
7. fexibilidad y eficiencia de uso
![Page 36: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/36.jpg)
Principios básicos de usabilidad 8. Estética y diseño minimalista
www.usaria.co
![Page 37: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/37.jpg)
Principios básicos de usabilidad
www.usaria.co
8. Estética y diseño minimalista
![Page 38: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/38.jpg)
Principios básicos de usabilidad 9. Ayuda a reconocer, diagnosticar y recuperarse de
errores
www.usaria.co
![Page 39: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/39.jpg)
Principios básicos de usabilidad
10. Ayuda y documentación
www.usaria.co
![Page 40: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/40.jpg)
¿Usabilidad = UX?
www.usaria.co
![Page 41: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/41.jpg)
Piensen: ¿Cuándo han vivido una gran experiencia?
![Page 42: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/42.jpg)
El Contexto UX El Contexto UX
![Page 43: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/43.jpg)
Vivirla [Los Usuarios]
![Page 44: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/44.jpg)
Diseñarla [El equipo]
![Page 45: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/45.jpg)
“An experience occurs when a company intentionally uses services as the stage, and goods as props, to engage individual customers in a way that creates a memorable event”
h,p://hbr.org/1998/07/welcome-‐to-‐the-‐experience-‐economy/ar/1
www.usaria.co
![Page 46: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/46.jpg)
www.usaria.co
![Page 47: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/47.jpg)
Que algo sea fácil de usar no necesariamente es sinónimo de buena experiencia. La experiencia está estrechamente ligada a las emociones.
![Page 48: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/48.jpg)
![Page 49: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/49.jpg)
h,p://uxdesign.smashingmagazine.com/2010/10/05/what-‐is-‐user-‐experience-‐design-‐overview-‐tools-‐and-‐resources/
Experiencia de Usuario Cómo se sienten las personas al interactuar con un sistema.
![Page 50: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/50.jpg)
Imagina que compraste en línea unos zapatos…
…Amor a primera vista <3
![Page 51: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/51.jpg)
El proceso de compra fue muy sencillo y seguro. Ya hasta lo recomendaste a tus amigas.
Recibirás tus zapatos en una semana (qué conveniente porque es tu cumpleaños) :D
Llegó el día y los zapato no aparecieron. Envías un mail y te dicen que esa referencia dejó de producirse hace 6 meses.
Te vendieron algo que no existe :(
![Page 52: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/52.jpg)
Entonces
¿Qué es Diseño de Experiencia de Usuario?
![Page 53: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/53.jpg)
¿Qué es Usabilidad? ¿Qué es Diseño de Experiencia de Usuario?
«La creación y sincronización de los elementos que afectan la experiencia de los usuarios con una empresa en particular, con la intención de influir en sus percepciones y comportamientos»
![Page 54: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/54.jpg)
Ahora,
¿Qué NO es Diseño de Experiencia de Usuario?
![Page 55: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/55.jpg)
10 Mitos más comunes sobre Diseño de UX
Whitney Hess | 10 Most Common MisconcepIons About User Experience Design
Diseño de Experiencia de Usuario NO es:
1. Diseño de interfaz de usuario 2. Un paso en el proceso 3. Acerca de tecnología 4. Sólo acerca de usabilidad 5. Sólo acerca del usuario 6. Caro 7. Fácil 8. El rol de una persona o departamento 9. Una sola disciplina 10. Una elección
![Page 56: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/56.jpg)
Diseño centrado en la organización
![Page 57: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/57.jpg)
Diseño centrado en el ingeniero
![Page 58: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/58.jpg)
Diseño centrado en el diseñador
![Page 59: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/59.jpg)
![Page 60: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/60.jpg)
Metodología de Diseño Centrado en el Usuario
¿Cuál es el proceso para diseñar UX?
![Page 61: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/61.jpg)
El Diseño Centrado en el usuario es un proceso derivado de los estudios en Interacción Humano Computador (Ingeniería) que se apoya en múltiples disciplinas (psicología, sociología, antropología, diseño) y sus técnicas de análisis, observación, ideación y evaluación para: 1. Mejorar la experiencia de la gente con las interfaces UX 2. Asegurar la facilidad de uso de las cosas Usabilidad
3. Comprobar ambas Pruebas con usuarios
¿Qué es Diseño Centrado en el Usuario?
![Page 62: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/62.jpg)
• Durante todo el proceso de diseño, tenga en cuenta en las expecta4vas que él
4ene.
Investigue
Solucione
Analice
Evalúe
Usuarios
![Page 63: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/63.jpg)
«La premisa principal del Diseño Centrado en el Usuario es que los mejores productos de diseño son el resultado de entender las necesidades de las personas que los utilizan» -Design Council
![Page 64: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/64.jpg)
![Page 65: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/65.jpg)
¿Qué es Usabilidad? Un diseñador UX equilibra:
+ +
ü Objetivos de las personas
ü Límites de la tecnología
ü Metas financieras de la
organización
![Page 66: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/66.jpg)
Web Usability MX -‐ Todos los derechos reservados
Lo que tu quieres que haga
¡Que compre!
¡Que me deje sus datos! ¡Que vuelva a comprar!
¡Que le cuente a sus amigos!
Lo que el sistema permite
Buscar
Registrarse Pagar
Lo que el usuario quiere Tener una camisa nueva
UX
![Page 67: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/67.jpg)
Web Usability MX -‐ Todos los derechos reservados
Negocio Tecnología
Personas
Interfaces*
![Page 68: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/68.jpg)
*Aclaro: UX no se trata de la interfaz. Pero se vale de interfaces para posibilitar experiencias, a través de la investigación, análisis y pruebas con usuarios finales. .
![Page 70: Introducción usabilidad y ux mejorandola-natalia](https://reader034.vdocuments.net/reader034/viewer/2022042516/55895005d8b42a18638b459d/html5/thumbnails/70.jpg)