Diseño: Interface de Usuario

Transcripción

1 Diseño: Interface de Usuario 1

2 Diseño de Interfaces Fácil de Aprender? Fácil de Usar? Fácil de entender? Informática Empresarial, UCR IF 7100 Ingeniería de Software 2

3 Diseño de Interfaces Errores Típicos de Diseño Falta de consistencia Mucha memorización No hay guía o ayuda No sensitivo al contexto Respuesta pobre No amigable Informática Empresarial, UCR IF 7100 Ingeniería de Software 3

4 Reglas de Oro Coloque al usuario bajo control Reducir la carga (sobrecarga) de memoria de los usuarios. Hacer interfaces consistentes 4

5 Coloque al usuario bajo control Definir los modos de interacción del usuario de forma que no se fuerce a estos a realizar acciones innecesarias y no deseadas. Proveer una interacción flexible. Permitir que la interacción del usuario no sea interrumpida. Diseñar la interface para una interacción directa con los objetos que aparecen en la pantalla.

6 Reducir la carga (sobrecarga) de memoria de los usuarios Reducir la demanda a la memoria de corto plazo. Definir valores por defecto (Defaults) significativos. Definir accesos directos shortcuts que sean intuitivos. El diseño visual de la interface debería ser basada en metáforas del mundo real. Divulgue Despliegue la información en una manera progresiva 6

7 Hacer interfaces consistentes Permitir al usuario poner las tareas actuales en un contexto significativo. Mantener consistencia a través de las familias de aplicaciones. Si en el pasado creo modelos interactivos que le crearon expectativas a los usuarios no realice cambios a menos que sean realmente necesarios. 7

8 Modelos de Diseño de Interface de Usuario Modelo de Usuario Un perfil de todos los usuarios finales del sistema. Modelo de Diseño una realización del diseño del modelo del usuario Modelo mental (Percepción del sistema) La imagen mental del usuario de lo que es la interfaz. Modelo de Implementación La interface look and feel junto con la información de soporte que describe la sintaxis de la interface y la semántica. 8

9 9 Proceso de Diseño de Interface de Usuario

10 Análisis de Interfaces Análisis de interface significa entendimiento: (1) Las personas (usuarios finales) quienes interactuarían con el sistema a través de la interface. (2) Las tareas que los usuarios finales deben de realizar para hacer su trabajo. (3) El contenido que es presentado como parte de la interface. (4) El ambiente en el cual estas tareas serán realizadas. 10

11 Análisis de Usuarios Los usuarios son profesionales entrenados, técnicos o trabajadores de manufactura? Que nivel de educación formal tienen en promedio los usuarios? Son los usuarios capaces de aprender de materiales escritos o tienen que expresar los deseos en clases de entrenamiento? Son los usuarios expertos escribiendo o le tienen fobia al teclado? Cual es el rango de edad de la comunidad de usuarios? Son los usuarios representados predominantemente por un solo género? Hacen los usuarios trabajo en horario normal de oficina o hasta que el trabajo se termine? Es el software una parte integral del trabajo de los usuarios o lo utilizan ocasionalmente? Cual es el lenguaje primario entre los usuarios? Cuales son las consecuencias de que los usuarios cometan un error usando el sistema? 11

12 Tareas Análisis y Modelado Responder a las siguientes preguntas Que trabajo podrían realizar los usuarios en circunstancias especificas? Que tareas y sub-tareas podrían realizar los usuarios para realizar su trabajo? Cual es la secuencia de tareas Flujo de Trabajo? Cual es la jerarquía de tareas? Casos de Uso Definir interacción Elaboración de Tareas: refinar tareas interactivas Elaboración de objetos identificar objetos de interface Análisis del flujo de trabajo definir como un proceso de trabajo es completado cuando muchas personas o roles están involucrados. 12

13 Análisis del contenido a desplegar Son los diferentes tipos de datos asignados a ubicaciones consistentes en la pantalla (por ejemplo las fotos siempre aparecen en la esquina superior derecha)? Pueden los usuarios personalizar las ubicaciones del contenido en la pantalla? Si un gran reporte debe de ser presentado, como debería ser particionado este para un fácil entendimiento? Hay mecanismos disponibles para moverse directamente a un resumen de información en una gran cantidad de datos. Las salidas graficas podrían ser modificadas para ajustarse a los limites del dispositivo que el usuario este utilizando? Como los colores pueden ser usados para aumentar el entendimiento del sistema? 13 Como los mensajes de errores y advertencias son presentadas al usuario?

14 Pasos para el diseño de interfaces Usar la información desarrollada durante el análisis de la interface, definir objetos de interface y acciones (operaciones). Definir eventos (Acciones de usuario) que podría causar que el estado de la interface de usuario cambie. Modelo de conducta. Indicar como el usuario podría interpretar el estado del sistema desde la información provista por la interface de usuario. 14

15 Puntos claves Issues del diseño Tiempo de Respuesta Facilidades de Ayuda Manejo de Errores Etiquetado de menús, botones e etiquetas Accesibilidad Internacionalización 15

16 Ciclo de evaluación del diseño preliminary design build prototype #1 interface build prototype # n interface design modifications are made user evaluate's interface evaluation is studied by designer 16 Interface design is complete

17 Principios de diseño web La ley de Fitts Hace referencia a las características que tienen que tener los objetos para que sea más fácil o difícil pulsarlos (o mejor dicho interaccionar con ellos): posición en la que se encuentren, tamaño del mismo, y una característica adicional, la expresividad. Dar feedback al usuario Existen casos en los que una acción por parte del usuario implica modificaciones en la aplicación que no tienen una correspondencia visual que mostrarse al usuario, y si ésta existe no se da ninguna información sobre la acción ejecutada. 17

18 Principios de diseño web Reutilización de la experiencia del usuario Consiste en exponer al usuario ante lo conocido. Actualmente está proliferando en demasía el uso de ciertos elementos que dan a la web mucha flexibilidad y riqueza como es el uso de Flash. Uso del Scroll Es una buena idea hacer que todos los elementos de navegación y la información importante se le muestre al usuario nada más se cargan las páginas sin necesidad de hacer scroll. 18

19 Principios de diseño web Sentencias y párrafos. La gran mayoría de los usuarios lee lo mínimo e imprescindible para obtener aquello que buscan de nuestro web. Incluir sentencias largas y párrafos grandes dificulta generalmente esta actividad con lo que se pierde algo de usabilidad. 19

20 Principios de diseño web Imágenes. Debido a las limitaciones del ancho de banda resulta poco recomendable cargar excesivamente nuestras páginas de imágenes, y si debemos de hacerlo una técnica muy interesante consiste en crear thumbnails (imágenes de muy reducido tamaño que al pulsarse abren otra ventana en la que se carga la imagen original). 20

21 Principios de diseño web Ancho de Banda El web ofrece muchas posibilidades interactivas y multimedia pero hay muchos usuarios que disponen de un ancho de banda reducido y que por lo tanto pueden necesitar bastante segundos (o incluso minutos) en cargar nuestras páginas. 21