Capacitación YELL. Usabilidad. Jorge Vera Vargas Abril 2012

Transcripción

1 Capacitación YELL Usabilidad Jorge Vera Vargas Abril 2012

2

3 Usabilidad: definiciones formales La Organización Internacional para la Estandarización (ISO) : "La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso" Jakob Nielsen, quien definió la usabilidad como "un atributo de calidad que mide lo fáciles de usar que son las interfaces web".

4 Qué es usabilidad? Conjunto de técnicas que ayudan a los seres humanos a realizar tareas en entornos gráficos de ordenador. Trabajamos para seres humanos, que quieren realizar una tarea de una forma sencilla y eficaz y en este caso particular, la deben realizar frente a un ordenador en un entorno gráfico, la web. La usabilidad ayuda a que esta tarea se realice de una forma sencilla analizando el comportamiento humano, y los pasos necesarios para ejecutar la tarea de una forma eficaz.

5 Principios básicos en los que se basa la usabilidad Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una interacción efectiva con el sistema o producto. Facilidad de Uso: facilidad con la que el usuario hace uso de la herramienta, con menos pasos o más naturales a su formación específica. Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el sistema pueden intercambiar información. También abarca la posibilidad de diálogo. Robustez: es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos. Está relacionada con la capacidad de observación del usuario, de recuperación de información y de ajuste de la tarea al usuario.

6 Arquitectura de información Aspectos visuales: Estética, entradas y respuestas. Técnicas de interacción Organización del menú, organización de botones... Programación Elementos necesarios para cumplir tareas, sus propiedades, comportamientos y relaciones.

7 Experiencia del usuario: análisis por capas Concreto La SUPERFICIE reúne todo junto visualmente. Cómo se ve y se siente el producto terminado? El ESQUELETO hace la estructura concreta. Que componentes permiten a los usuarios interactuar con el sitio web? La ESTRUCTURA da forma al alcance. Cómo están articuladas y se comportan entre sí las diferentes piezas del sitio web? El ALCANCE convierte la estrategia en requerimientos. Qué elementos funcionales y de contenido se requieren para satisfacer a los usuarios? Abstracto La ESTRATEGIA es donde todo comienza. Cuales son los objetivos del sitio Web? Cuáles son las necesidades de nuestros usuarios?

8 Análisis de Usuarios y Tareas Se centran en la comprensión de: Cuales son los objetivos de los usuarios; Qué están intentando conseguir: Información, diversión, otros Qué hacen los usuarios en la actualidad para conseguir estos objetivos. Su manera de pensar en la información, de agruparla y de organizarla. Las expectativas que tienen sobre su sitio. Qué características personales, sociales y culturales aportan a las tareas. Cómo están influenciados los usuarios por su entorno físico. Cómo sus conocimientos y práctica previos influyen en cómo viven su experiencia y los pasos que siguen para realizar sus tareas. invalido Refinar busqueda Pregunta de busqueda buscar valido Resultados Paginas de contenido

9 Diseño Web Centrado en el Usuario El Diseño Web Centrado en el Usuario se caracteriza por asumir que todo el proceso de diseño y desarrollo del sitio web debe estar conducido por el usuario, sus necesidades, características y objetivos. Proceso del DCU:

10 El botón call to action en una landing page Como enfocar un call to action: Usa gráficos, flechas o guías visuales para dirigir al usuario. El call to action debe estar en la primera página (top). Asegure que el color del call to action no se use en otro lugar de la página. Resuma su call to action a una pregunta u oración. Coloque el call to action sobre un fondo simple y que permita que este resalte. Simplifique el texto.

11 Diseño Web Centrado en el Usuario Modelado del usuario: Caso desarrollo de intranet de universidad

12 Diseño Web Centrado en el Usuario Prototipado: wireframing de baja fidelidad

13 Diseño Web Centrado en el Usuario Prototipado: wireframing de alta fidelidad