Ing. Elizabeth Guerrero V.

Interfaz de usuario Principios de diseño de las interfaces de

usuario Recuperabilidad Retroalimentación Tipos de interfaz de usuario Reglas para el diseño de la interfaz de

usuario Lo que no se debe hacer en un diseño El proceso de diseño de la interfaz de usuario

Conjunto de elementos hardware y software de un

computador que presentan información al usuario y le

permiten interactuar con la información y con el

computador.

Principio Descripción

Familiaridad del usuario En la interfaz se debe utilizar términos y conceptos obtenidos de la experiencia de las personas que más utilizaran el sistema

Uniformidad La interfaz debe ser uniforme en el sentido de que las operaciones comparables se activen de la misma forma

Mínima sorpresa El comportamiento del sistema no debe provocar sorpresa a los usuarios

Recuperabilidad La interfaz debe incluir mecanismos para permitir a los usuarios recuperarse de errores

Guía de usuario o Retroalimentación

Cuando ocurran errores, ejecución de acciones que se deban confirmar, etc, la interfaz debe proporcionar retroalimentación significativa y características de ayuda sensible al contexto

Diversidad de usuarios La interfaz debe proporcionar características apropiadas para los diferentes tipos de usuarios del sistema

Tres tipos de recursos para ayudar al usuario a recuperarse de errores: ◦ Confirmación de acciones destructivas: el sistema

debería pedir confirmación antes de ejecutar tal acción

◦ Proporcionar un recurso para deshacer: restablece el sistema al estado previo antes de que ocurriera la acción.

◦ Generar puntos de control: implica grabar el estado de un sistema en intervalos periódicos y permitir que el sistema se restaure desde el último control

La retroalimentación sirve para que el usuario, se entere de que:

• La computadora aceptó la entrada

• La entrada se encuentra en la forma correcta

• La entrada no se encuentra en la forma correcta

• Habrá un retraso en el procesamiento

• La solicitud ha sido concluida

• La computadora es incapaz de concluir la petición

• Se dispone de mayor detalle en la retroalimentación (e indica la manera de obtenerla)

Interfaz en lenguaje natural

Interfaz en lenguaje de comandos

Interfaz de preguntas y respuestas

Interfaz de menu

Formularios de entrada/salida

Interfaz gráfica de usuario (GUI)

Reconocimiento de voz

Pantallas sensibles al tacto

Lápices ópticos

Permiten a usuarios interactuar con la computadora en su lenguaje cotidiano o natural.

No se requieren habilidades especiales de usuarios

lnterfaz en lenguaje de comandos •Permite al usuario controlar la aplicación con una serie de pulsaciones del teclado, comandos, frases o alguna secuencia de estos tres métodos. •Es una interfaz popular entre programadores y administradores linux

Despliega en pantalla una pregunta para el usuario. Para interactuar, el usuario introduce una respuesta (mediante pulsaciones del teclado o un clic del ratón) y la computadora después actúa en esa información de entrada de acuerdo con su programa, normalmente pasando a la siguiente pregunta.

Una interfaz de menú proporciona al usuario una lista en pantalla de las selecciones disponibles.

En respuesta al menú, un usuario está limitado a las opciones desplegadas.

El usuario no necesita conocer el sistema pero tiene que saber qué tarea se debe realizar. Por ejemplo, con un menú típico de procesamiento de texto, los usuarios pueden escoger opciones para editar, copiar o imprimir. Sin embargo, para utilizar el mejor menú los usuarios deben saber qué tarea desean desempeñar.

Los menús no dependen del hardware. Las variaciones abundan. Los menús se establecen para usar el teclado, lápiz óptico o el

ratón. Las selecciones se pueden identificar con un número, carta o

palabra clave. La consistencia es importante en el diseño de una interfaz de

menú.

• De barra

• En cascada

• Contextual o popup

Formularios de entrada/salida Las interfaces de formulario consisten de formularios en pantalla o

formularios que se basan en la Web que despliegan campos que contienen datos o parámetros que necesitan ser comunicados al usuario.

Las interfaces gráficas de usuario (GUIs) permiten la manipulación directa de la representación gráfica en pantalla, la cual se puede realizar con la entrada del teclado, una palanca de juego o el ratón.

La manipulación directa requiere mayor sofisticación del sistema que las interfaces vistas anteriormente.

La clave para las GUIs es la retroalimentación constante que proporcionan.

La retroalimentación continua en el objeto manipulado significa que se pueden hacer rápidamente los cambios o incluso cancelar operaciones sin incurrir en mensajes de error.

• Reconocimiento de voz

• Pantallas sensibles al tacto

• Lápices ópticos

1. El periodo de entrenamiento necesario para los usuarios debe ser

aceptablemente corto.

2. Mantener consistentes las interfaces en las aplicaciones.

3. La interfaz debe ser perfecta para que haya pocos errores y los que ocurran no

sea por un mal diseño.

4. El tiempo que los usuarios y el sistema necesitan para recuperarse de los

errores debe ser corto.

5. Los usuarios poco frecuentes deben poder aprender a usar el sistema en poco

tiempo.

El diseñador debe dar al usuario la posibilidad de hacer su trabajo, en lugar de suponer qué es lo que éste desea hacer. La interfaz debe ser suficientemente flexible para adaptarse a las exigencias de los distintos usuarios del programa.

• Permitir a los usuarios utilizar el teclado o el ratón.

• Permitir al usuario interrumpir su tarea y continuarla más tarde.

• Utilizar mensajes y textos descriptivos.

• Permitir deshacer las acciones, e informar de su resultado

• Permitir una cómoda navegación dentro del producto y una fácil salida del

mismo.

• Permitir que el usuario personalice.

La interfaz debe evitar que el usuario

tenga que almacenar y recordar

información. Para ello, debe Aliviar la

carga de la memoria de corto alcance

(permitir deshacer, copiar y pegar;

mantener los últimos datos introducidos).

Ejemplo: el porta papeles de Window

Reducir la carga de memoria del usuario

ejemplo: elegir de entre una lista en lugar de teclear de nuevo

Basarse en el reconocimiento antes que en el recuerdo

Proporcionar indicaciones visuales de dónde está el usuario, qué está haciendo y qué puede hacer a

continuación

Utilizar metáforas del mundo real

Considerar las metáforas para definir:

Características Físicas.- Cada persona tiene diferentes características

físicas.

Ambiente.- El lugar donde va a ser usado el sistema. Cada interfaz tiene

que adecuarse al lugar.

Visibilidad.- Tomar en cuenta la cantidad de iluminación del lugar. ¿ Se

refleja el brillo en la pantalla?

Personalidad.- De acuerdo a la edad, nivel socio-económico, etc.

Cultura.- Este factor es importante si el mercado para el sistema es a

nivel internacional.

Hacer clara la presentación visual (colocación/agrupación de

objetos, evitar la presentación de excesiva información)

Mal diseño Buen diseño

Presentar al usuario sólo la información que necesita

Permite al usuario utilizar conocimiento adquirido en otros

programas consistentes con el nuevo programa. Ejemplo: Office:

Construir una interfaz Consecuente

En presentación (lo que es igual debe aparecer igual: color del

texto estático).

En el comportamiento (un objeto se comporta igual en todas

partes).

la interacción (los atajos y operaciones con el ratón se mantienen;

el usuario espera los mismos resultados cuando interactúa de la

misma forma con objetos distintos).

Consistencia dentro del propio producto y de un producto a otro.

Consistencia en los resultados de las interacciones: misma

respuesta ante la misma acción. Los elementos estándar del

interfaz deben comportarse siempre de la misma forma (las barras

de menús despliegan menús al seleccionarse).

Consistencia de la apariencia estética (iconos, fuentes, colores,

distribución de pantallas).

Consistencia

• Manual de usuario

• Tutoriales

• Ayuda en línea

Entrada desde la aplicación

Entrada desde el sistema de mensajes de error

Entrada en el nivel superior

¿Dónde se baja el volumen ?

¿Por donde abro la nevera?

¿A qué velocidad va?

Uso de imágenes que confunden

Interfaz confusa

Un diseñador-programador siempre tiene que tener bien

validado los botones y detectar si el botón podrá usarse

en cierto momento o no. Cuando un botón no esta

disponible, es esencial

que el programador lo DESHABILITE con algún comando como “button.enable=false”.

En este caso en vez de hacer eso lo que hicieron fue dejar el botón tal como esta pero

cuando uno posiciona el cursor encima del botón lo que sucede es que te “avisa” por

medio del statusBar que el botón esta deshabilitado…

1. El ingeniero de software crea el modelo de diseño

2. Cualquier otro ingeniero (o el mismo ingeniero del software)

establece un modelo de usuario

3. El usuario final desarrolla una imagen mental que se suele

llamar modelo de usuario o percepción del usuario

4. Los que implementan el sistema crean una imagen de sistema

El papel del diseñador de interfaz es reconciliar estas

diferencias y derivar una representación consecuente de la interfaz.

El proceso de diseño de las interfaces de usuario es iterativo y se puede representar mediante un modelo espiral. En la figura se puede observar que el proceso de diseño de la interfaz de usuario acompaña cuatro actividades distintas de marco de trabajo: 1. Análisis y modelado de usuarios, tareas y entornos. 2. Diseño de la interfaz 3. Implementación de la interfaz 4. Validación de la interfaz de usuario

La actividad de análisis inicial se concentra en el perfil de los usuarios que van a interactuar con el sistema. Esencialmente, el ingeniero del software intenta comprender la percepción del sistema para cada clase de usuario.

Se identifican, describen y elaboran las tareas que lleva a cabo el usuario para conseguir los objetivos (por encima de la cantidad de pasos iterativos a través de la espiral)

El análisis del entorno de usuario se centra en el entorno del trabajo físico. Entre las preguntas que se formulan se encuentran las siguientes:

¿Dónde se ubicará físicamente la interfaz?

¿Dónde se situará el usuario? ¿Llevará a cabo tareas no relacionadas con el interfaz?

¿Se adapta bien el hardware a las limitaciones de luz, espacio o ruido?

Esta recopilación de información que forma parte de la actividad de análisis se utiliza para crear un modelo de análisis para la interfaz.

El objetivo del diseño de la interfaz es definir un

conjunto de objetos y acciones de interfaz (y sus

representaciones en la pantalla) que posibiliten al usuario

llevar a cabo todas las tareas definidas de forma que

cumplan todos los objetivos de usabilidad definidos por el sistema.

La actividad de implementación comienza normalmente

con la creación de un prototipo que permita evaluar los

escenarios de utilización. A medida que avanza el

proceso de diseño iterativo, y para completar la

construcción de la interfaz, se puede utilizar un kit de

herramientas de usuario.

La validación se centra en:

(1) la habilidad de la interfaz para implementar

correctamente todas la tareas del usuario, para acoplar

todas las variaciones de tareas, y para archivar todos los

requisitos generales del usuario;

(2) el grado de facilidad de utilización de la interfaz y de

aprendizaje,

(3) la aceptación de la interfaz por parte del usuario como

una herramienta Útil en su trabajo.