usabilidad en aplicaciones web
DESCRIPTION
Presentación en Simposio de la Usma (2010)TRANSCRIPT
![Page 1: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/1.jpg)
Usabilidad en Aplicaciones Web
Mejorando el diseño de la Interfaz de Usuario en las aplicaciones web
Por: Elsa Canto
![Page 2: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/2.jpg)
¿Qué es la Usabilidad?
![Page 3: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/3.jpg)
UsabilidadCapacidad de una web, o un producto cualquiera, de ser usado fácilmente lo que contribuye a una Experiencia positiva en el Usuario.
La Usabilidad, es un concepto central e inherente a la HCI (Human Computer Interaction). El término es un anglicismo que significa facilidad de uso, y cuya definición formal se refiere al grado de eficacia, eficiencia y satisfacción con la que usuarios específicos pueden lograr objetivos específicos, en contextos de uso específicos (ISO; 1994)
![Page 4: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/4.jpg)
![Page 5: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/5.jpg)
UX: Experiencia del Usuario
La Experiencia del Usuario es el conjunto de factores y elementos relativos a la interacción del usuario, con un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción positiva de dicho servicio o producto.
![Page 6: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/6.jpg)
¿Porqué es importante tomar en cuenta la Experiencia del
Usuario al desarrollar aplicaciones, interfaces,
sistemas, etc?
![Page 7: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/7.jpg)
Ayuda a desarrollar productos que el usuario quiere y necesita
Ventaja estratégica para mejorar el producto
Reduce los tiempos de desarrollo al definir los requerimientos pensando en los objetivos del negocio y necesidades del usuario
Beneficios de UX
![Page 8: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/8.jpg)
Cosas que odian los usuarios al usar una
aplicación web
![Page 9: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/9.jpg)
Cosas que odian los usuarios
Aprender a utilizar nuevas funciones
Las acciones repetidas
Tener que esperar
Tener que buscar
Tener que leer
![Page 10: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/10.jpg)
Cosas que odian los usuarios
Diseño monótono o muy recargado (“look & feel”)
Restricciones a otras plataformas / browsers
Funcionalidad rígida
Errores
Brechas en la seguridad
![Page 11: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/11.jpg)
5 Retos de Usabilidad
Escalabilidad
Diseño Visual
Comprensión
Interactividad
Manejo de Cambios
1.
2.
3.
4.
5.
en aplicaciones web
![Page 12: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/12.jpg)
¿Cómo podemos crear una experiencia positiva
en el usuario?
Evaluación Experta
Modelo UCD: Diseño centrado
en el Usuario
![Page 13: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/13.jpg)
Modelo UCD
Busca responder a preguntas acerca del usuario, tareas y metas, para así desarrollar y diseñar en torno al usuario.
Diseño Centrado en el Usuario
![Page 14: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/14.jpg)
Actividades UCD
Diseño Centrado en el Usuario
![Page 15: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/15.jpg)
Técnica del “Card Sorting”
La técnica de 'card sorting' se basa en la observación de cómo los usuarios agrupan y asocian entre sí un número predeterminado de tarjetas etiquetadas con las diferentes categorías temáticas del sitio web.
De esta forma, partiendo del comportamiento de los propios usuarios, es posible organizar y clasificar la información de un sitio web conforme a su modelo mental.
![Page 16: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/16.jpg)
Diseñar sin fundamento...
![Page 17: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/17.jpg)
Diseño de Interface Visual
Mejoras a la Interface Visual para Aplicación Web de Dichter & Neira
![Page 18: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/18.jpg)
Es una solución de Dichter & Neira que permite auditar los puntos de venta (tienditas, supermercados, farmacias, etc) que maneja un fabricante de consumo masivo en un mercado, con el objetivo de poder brindar información relevante acerca de su distribución y las variables que puedan afectar la misma (si hay producto visible en la tienda, si el producto tiene su publicidad o material de comunicación implementado, si se cumplen estándares del fabricante en el punto de venta, etc.)
Retail Performance TrackerAplicación web
![Page 19: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/19.jpg)
Visualizar el nivel de penetración de su producto y el de su competencia
Conocer niveles de presencia simultánea y exclusiva en los diferentes canales comerciales
Medir la efectividad de distribuidores y la red de mayoreo
Retail Performance TrackerAplicación web
![Page 20: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/20.jpg)
Interface Visual (antes)Retail Performance Tracker
![Page 21: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/21.jpg)
Interface Visual (antes)Retail Performance Tracker
![Page 22: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/22.jpg)
Interface Visual (antes)Retail Performance Tracker
![Page 23: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/23.jpg)
Las pantallas a continuación muestran ubicación del contenido y la navegación, al mejorar la arquitectura ayudamos a que la aplicación sea más clara y fácil de utilizar para el usuario final. Favor no fijarse en colores, formas o iconografías ya que estos serán creados en la fase de diseño visual.
Retail Performance TrackerDiseñando la nueva Interface Visual
![Page 24: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/24.jpg)
Retail Performance TrackerDiseñando la nueva Interface Visual
![Page 25: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/25.jpg)
Diseñando la nueva Interface VisualRetail Performance Tracker
![Page 26: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/26.jpg)
Diseñando la nueva Interface VisualRetail Performance Tracker
![Page 27: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/27.jpg)
Diseñando la nueva Interface VisualRetail Performance Tracker
![Page 28: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/28.jpg)
Diseñando la nueva Interface VisualRetail Performance Tracker
![Page 29: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/29.jpg)
Diseñando la nueva Interface VisualRetail Performance Tracker
![Page 30: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/30.jpg)
10 Guías de Usabilidaden aplicaciones web
Haz las funciones obvias
Crea una jerarquía visual clara
Sigue las convenciones, patrones
Evita utilizar textos innecesarios
Provee una navegación apropiada
Realiza pruebas de usabilidad
Provee toda la información que puedas
1.
2.
3.
4.
5.
Provee accesibilidad
Da importancia al diseño del homepage
Se consistente
6.
7.
8.
9.
10.
![Page 31: Usabilidad en Aplicaciones Web](https://reader034.vdocuments.pub/reader034/viewer/2022051013/547bed61b4af9faa158b4fb3/html5/thumbnails/31.jpg)
Lecturas recomendadas