interfaz de usuario

Diseño de diálogo

Objetivos del diseño de interfaz de usuario

Incrementar la velocidad de aprendizaje y uso.1

Reducir el rango de errores.2

Motivar el rápido recuerdo de cómo usar la interfaz.33

Incrementar su atractivo para posibles usuarios44

La forma y el contenido de los diálogos al usuario En el diálogo computadora-persona se debe

compartir el conocimiento del usuario, no el del diseñador.

El diseñador debe mantener la interfaz de usuario con un vocabulario simple, usando conceptos que el usuario conozca o pueda aprender sencillamente.

Una interfaz puede estar completa pero ser ineficiente.

Componentes de una interfaz Una interfaz se compone de dos lenguajes:

El lenguaje con el que el usuario se comunica con la computadora.

Se expresa mediante acciones aplicadas usando dispositivos de interacción.

El lenguaje con el que la computadora se comunica con el usuario.

Se expresa gráficamente con líneas, cadenas, colores, imágenes y mensajes.

Estilos de interfaz de usuario

La representación con la que interactúa el usuario es la misma que la imagen creada por la aplicación.

- Los objetos, atributos o relaciones que pueden ser manejados, son representados visualmente.- Las operaciones se realizan sobre las representaciones visuales.- Ej: una interfaz de escritorio.

Objetivos de los íconos: Reconocimiento, recuerdo, discriminación.El diseñador puede seleccionar usar íconos o palabras para representar conceptos.

WYSIWYG

Manipulación directa

Interfaz icónica

Otras formas de diálogo

Lenguajes de comandos

Rápida para usuarios experimentados.

Requiere más tiempo de aprendizaje.

Sujeto a errores de recuerdo de memoria.

Menús

Se basa en la memoria de reconocimiento (en contraste con la memoria de recuerdo).

Reducen la carga de memoria del usuario.

Diálogos pregunta-respuesta

La conversación es iniciada por el sistema.

La respuesta del usuario está limitada a un conjunto de posibles respuestas.

Falla común es su inhabilidad de regresar atrás para cambiar una respuesta.

Diálogos en lenguaje natural

Requieren entrenamiento, pueden cometer errores.

El lenguaje usado puede ser ambiguo.

Consideraciones de diseño

Consistencia Ej. de consistencia en la salida:

Los colores siempre se usan de la misma manera.

Los mensajes de estatus se muestran en un mismo lugar lógico.

Los elementos de un menú siempre se muestran en la mismo posición relativa de un menú.

Ej. de consistencia en la entrada: Las teclas siempre tienen la misma función.

Comandos globales que puedan ser invocados en cualquier momento.

Comandos genéricos (Mover, Copiar, Borrar) que sean aplicables con resultados predecibles.

Retroalimentación Cada acción del usuario con un dispositivo de

entrada debe proporcionar retroalimentación. Pulsar una tecla, mover el mouse.

Proporcionar alguna indicación de que el sistema está trabajando con un problema.

Porcentajes, señales de espera.

Tipos de retroalimentación Sobre el dominio del problema.

Se refiere a los objetos manipulados. Apariencia, posición, existencia. Ej: cuando se trata de ver una parte de un dibujo

más grande (al usar zoom y paneo) o usando barras de desplazamiento.

Sobre el dominio del control. Se refiere a los mecanismos para controlar el

sistema. Estatus, valores actuales y default, menús, cajas de

diálogo.

Minimizar posibles errores "No le pongas trampas al usuario".

No permitir opciones que como resultado indiquen que fue algo ilegal.

No permitir que se seleccione Borrar si no hay nada que borrar.

No permitir que el usuario cambie el tamaño de letra si lo seleccionado no es un texto.

No permitir pegar si la papelera está vacía. No permitir copiar si no hay nada que copiar.

Recuperación tras un error Con un buen sistema de recuperación de

errores, el usuario se siente libre de explorar y aprender a usar el sistema.

Tipos: Deshacer. Revierte los resultados de un comando. Abortar. Cuando un comando se encuentra en

proceso y el usuario se da cuenta de un error funcional.

Cancelar. Al llenar formas o seguir (instalar) procesos.

Corrección. Cuando una de las unidades de información necesita un cambio.

Ajuste a distintos niveles de habilidad Ajuste a usuarios novatos y expertos.

Aceleradores. Técnicas de interacción rápidas que reemplazan a las más lentas.

Doble clic o enter para abrir un archivo.

El usuario puede crear algo, pero los detalles para la modificación (complejidad oculta) también le son disponibles de alguna manera.

Diseño visual

Reglas de organización visual

Proximidad.Dos estímulos visuales que están juntos son vistos como que se corresponden.

Similitud.Dos estímulos visuales que tienen una propiedad común deben ser vistos como con correspondencia propia.

Buena continuidad.Dada una unión de líneas, el espectador ve como continuas esas líneas y que se encuentran suavemente conectadas.

Clausura.Si un conjunto de estímulos casi encierran un área o pueden ser interpretados como cerrando un área, el espectador ve esa área.

Objetivo de la organización visual Reforzar las relaciones lógicas.

Minimizar el movimiento de los ojos.

Minimizar el movimiento de la mano.

Codificación visual Significa crear diferencias visuales entre los

distintos tipos de objetos.

Técnicas: Color, forma, tamaño, longitud, tipografía,

orientación, intensidad, textura, ancho de línea, estilo de línea.

Mientras más valores de código se presenten, aumenta la posibilidad de confundir al espectador con otro valor.

Antes de seleccionar un código, se debe conocer cuantos niveles de código serán necesarios.

Si la información codificada es nominal (no tiene noción de mayor o menor),

es ordinal (tiene relación de mayor o menor) o

es una proporción (tiene una medida).

Para los valores de código nominal: «No afecta el orden», el espectador no debe inferir

que exista una importancia en el orden de la información.

En los ordinales y de radio: Debe haber un orden obvio. En los de radio, no se recomienda distinguir por

color.

Principios de ubicación Es el cuidado de donde se ubican los

elementos. Reglas básicas:

Balance. Que la visión del espectador no se concentre a un punto tendencioso.

Principios de ubicación Reglas básicas:

Cuadriculado. Busca equilibrar el contenido haciendo uso del espacio.

Proporción. Se enfoca al tamaño de las áreas.

Referencias Foley James D., Van Dam Andries, Feiner Steven K.,

Hughes John F., Computer Graphics: Principles and Practice in C (2nd Ed), Addison-Wesley Professional, 1995. Capítulo 9.