Diseño de interfaces gráficas de usuario

Presentación del tema: "Diseño de interfaces gráficas de usuario"— Transcripción de la presentación:

1 Diseño de interfaces gráficas de usuario
Interacción Persona-Ordenador Diseño de interfaces gráficas de usuario

2 Principios fundamentales del diseño
Son conceptos de alto nivel que deberían ser empleados como referencia o guía de diseño. Uno de los clásicos: reglas de oro de Mandel. Agrupa los principios en función de tres objetivos: Colocar a los usuarios en el control de la interfaz. Reducir la carga de memoria de los usuarios. Hacer una interfaz de usuario consistente.

3 Reglas de oro de Mandel: colocar a los usuarios en el control de la interfaz
□ Las directrices a aplicar para conseguir el objetivo son:   Emplear los modos adecuadamente.   Permitir a los usuarios utilizar el teclado y el ratón.   Permitir a los usuarios cambiar la atención.   Mostrar a los usuarios mensajes y textos descriptivos.   Proporcionar retroalimentación.   Proporcionar acciones inmediatas y reversibles. Proporcionar caminos significativos y salidas.   Acomodar a los usuarios con diferentes niveles de habilidad.   Hacer la interfaz de usuario transparente.   Permitir al usuario personalizar la interfaz.   Permitir al usuario manipular los objetos de la interfaz.

4 Emplear los modos adecuadamente
Ventanas modales y no modales. No emplear ventanas modales de forma innecesaria. Utilizarlas cuando: Se ha producido un error crítico que impide a la aplicación seguir ejecutándose. Ejemplo: no hay espacio en disco. El usuario solicite una acción y sea necesario proporcionar datos para su culminación. No utilizarlas cuando: Se produzca un error no crítico y que el usuario no pueda controlar. Ejemplo: cuadro de diálogo abrir.

5 Permitir a los usuarios utilizar teclado y ratón
Aunque es posible optimizar la interfaz para usuarios de ratón, es importante proporcionar una forma alternativa de interacción. Esto dotará a la interfaz de las siguientes ventajas: Facilidad para los usuarios que provengan de otros entornos. Facilidades a los usuarios con necesidades especiales. Continuidad ante fallos o inexistencia del ratón. Este principio no aparece en diversas guías de estilo.

6 Permitir a los usuarios cambiar la atención
Los usuarios deben poder interrumpir sus acciones actuales y continuarlas más tarde. Una vez lanzada una tarea larga y no crítica el usuario debería poder volver a tomar el control de la interfaz La tarea deberá reclamar la atención una vez termine. Cuando sea una tarea en varios pasos no hay que obligar al usuario a completar todos los pasos. Dar la sensación de que el usuario lleva el control.

7 Mostrar a los usuarios mensajes y textos descriptivos
Mensajes claros, útiles descriptivos y fáciles de entender en diálogos, etiquetas y documentación. Evitar el lenguaje excesivamente técnico.

8 Proporcionar retroalimentación
Es necesario informar de los procesos en curso. Mediante mensajes en cuadros de diálogo. Mediante mensajes en barras de estado. Barras de progreso. Adecuado cuando: Se están realizando operaciones largas. Se va a realizar un proceso irreversible. Se debe proporcionar información clara e identificativa.

9 Proporcionar retroalimentación (II)

10 Proporcionar retroalimientación (III)
Los mensajes no deben ser intrusivos. • No deben molestar con información intrascendente.

11 Proporcionar acciones inmediatas y reversibles
Es deseable que todas las operaciones realizadas con los datos sean reversibles. Otorga confianza al usuario. Le anima a investigar sin miedo. Opciones de "deshacer" y "rehacer". Principio del esfuerzo proporcionado. Cuando un proceso es difícil de recuperar, también debe ser más difícil de realizar.

12 Proporcionar caminos significativos y salidas
Permitir la navegación fácil a través de la interfaz. Proporcionar un contexto que indique: Dónde están. Dónde han estado. Dónde pueden ir. Cómo abandonar. En páginas web: Mapas del sitio. Indicadores en las cabeceras de páginas. En aplicaciones de escritorio: Barras de tareas, barras de herramientas. Títulos de las ventanas.

13 Proporcionar caminos significativos y salidas (II)

14 Proporcionar caminos significativos y salidas (III)

15 Acomodar a los usuarios con diferentes niveles de habilidad
No sacrificar a los usuarios expertos por una interfaz más fácil para usuarios ocasionales. Es necesario proporcionar caminos rápidos para los usuarios expertos. Atajos de teclado. Lo ideal: Interfaces personalizables que permitan a los usuarios elegir las opciones disponibles de la interfaz según su nivel de experiencia en la aplicación.

16 Hacer una interfaz de usuario transparente
Una interfaz transparente permite al usuario sentirse como si estuviera manipulando los objetos reales con los que trabaja habitualmente. Buen ejemplo de transparencia: Papelera de reciclaje. Mal ejemplo de transparencia: CTRL+ALT+SUPR para ejecutar el administrador de tareas.

17 Permitir al usuario personalizar la interfaz
Los usuarios se encuentran más confortables cuando pueden configurar las características del sistema. Configurar la presentación (colores, fuentes, aspectos internacionales). Configurar el comportamiento (acciones por omisión, botones de la barra de herramientas, etc.). Configurar la interacción (teclas de método abreviado, mnemotécnicos, etc.). Es interesante incluir también una opción que permita restablecer los valores por omisión.

18 Permitir al usuario manipular los objetos de la interfaz
Fomentar que el usuario manipule directamente los objetos de la pantalla además de usar métodos indirectos por medio de teclado y ratón. Algunas veces las interfaces de manipulación directa fallan porque las acciones a realizar con los objetos no son visualmente obvias. No queda claro qué cosas se pueden hacer al arrastrar y soltar objetos por la pantalla. Es necesario hacer más obvias las manipulaciones.

19 Reglas de oro de Mandel: Reducir la carga de Memoria
La reducción de la carga de la memoria facilitará el aprendizaje. Permitirá al usuario recordar, más que aprender, el funcionamiento de la interfaz. Algunos principios para lograr este objetivo: Aliviar la memoria a corto plazo. Confiar en el reconocimiento. Proporcionar pistas visuales. Proporcionar opciones por omisión. Proporcionar atajos de teclado. Promover la sintaxis objeto-acción. Emplear metáforas del mundo real. Emplear la revelación progresiva. Promover la claridad visual.

20 Aliviar la memoria a corto plazo
El usuario realizar en el ordenador varias acciones al mismo tiempo y el estado de cada una de ellas se guarda en la memoria a corto plazo. Es necesario incluir en la interfaz mecanismos que permitan no tener que cargar información en dicha área de memoria. Para este objetivo se puede recurrir a: Incluir acciones de "deshacer" y "hacer". Permiten retornar es estados anteriores sin necesidad de recordar cómo se llegó a ellos. Utilizar las opciones de cortar, copiar y pergar. Permiten almacenar en la memoria del ordenador información que se utilizará más tarde.

21 Confiar en el reconocimiento
Permitir recuperar información de la memoria a largo plazo mostrando los elementos que debe reconocer. Es más fácil seleccionar elementos que recordarlos.

22 Promocionar pistas visuales
El usuario debe saber donde está, qué está haciendo y qué es lo que puede hacer.

23 Proporcionar pistas visuales (II)

24 Proporcionar tareas por omisión
Es conveniente que el usuario pueda restaurar la interfaz a su estado original. Es frustrante llegar a un punto de personalización del que es difícil salir. El restablecimiento de opciones por omisión permite restaurar de modo rápido la configuración original.

25 Proporcionar atajos de teclado
Los atajos de teclado economizan el número de pulsaciones o movimientos de ratón utilizados. Dos formas: Mnemotécnicos. Teclas de método abreviado.

26 Promover la sintaxis objeto-acción
No es necesario diseñar una interfaz totalmente orientada a objetos para seguir este principio. Menús contextuales. Este tipo de sintaxis evitar tener que recordar todas las opciones posibles en cada momento sobre un objeto.

27 Emplear metáforas del mundo real
Una vez elegida una metáfora es necesario mantenerla Es posible ampliarla, pero no cambiarla.

28 Emplear la revelación progresiva
No abrumar al usuario con las funciones de un producto. Mostrar sólo lo que el usuario necesita cuando y dónde lo necesita.

29 Promover la claridad visual
Aplicar principios de diseño visual de la percepción humana. Agrupación. Numeración de elemento. Establecer prioridades en la importancia de los elementos mostrados. No disponer demasiados elementos en la pantalla. Distribuir bien los elementos.

30 Reglas de oro de Mandel: interfaz de usuario consistente
Una interfaz bien diseñada permitirá a los usuarios transferir su conocimiento en el aprendizaje de un nuevo programa. Pero… Debe ser consistente con otros programas que haya utilizado. Dentro de un programa será más fácil su aprendizaje si existe cierto parecido entre las distintas partes de las que esté formado. Algunos principios que fomentan la consistencia: Preservar el contexto de trabajo de los usuarios. Mantener la consistencia dentro y entre productos.

31 Preservar el contexto de trabajo de los usuarios
Los usuarios deben ser capaces de completar trabajos sin necesidad de cambiar de contexto o estilo de entrada. Es incómodo tener que estar cambiando constantemente entre la entrada por teclado y por ratón. El cambio de estilo de entrada debe ser una decisión del usuario.

32 Mantener la consistencia dentro y entre productos
Presentación. Los usuarios deben ver la información y los objetos de la misma forma lógica, visual o física a lo largo del producto. Importancia de las guías de estilo. Dentro de la aplicación aplicar los mismos conceptos de diseño visual a los elementos que realicen acciones parecidas. Comportamiento. Un objeto debería trabajar siempre de la misma forma. El usuario no debe verse sorprendido por el comportamiento de los objetos de la interfaz. Los usuarios tienden a cuestionar su comportamiento, más que el del producto: "comportamiento supersticioso” . Técnicas de interacción. Deben mantenerse a lo largo de aplicación y entre aplicaciones. Los mnemotécnicos y las teclas de método abreviado no deberían cambiar para opciones de menús similares.