Diseo de Interfaces con el Usuario

Un Amplio Rango
Disear un sistema computacional incluye:
disear el hardware, disear la base de datos, disear el software de cmputo, disear las interfaces con el usuario.

Todas estas tareas son esencialmente diferentes, pero, salvo el hardware, el ingeniero de software debe abordar todas las restantes. En empresas grandes hoy en da se contrata gente especializada es disear interfaces de usuario, ya que son en parte la imagen de la empresa.
2

Consecuencias de la Interfaz
Una interfaz difcil de usar:
promueve la ocurrencia de errores, puede ser descartada completamente.

Si la informacin se presenta en forma confusa, el usuario puede tomar decisiones inconvenientes. Prcticamente todos los computadores tienen una pantalla color con capacidades grficas:
el usuario espera una interaccin sofisticada con la aplicacin.

Ventajas de una GUI

Las ventajas de una Graphical User Interface (GUI):
los usuarios hallan fcil interactuar con una interfaz grfica tan solo con un breve entrenamiento; el usuario dispone de mltiples ventanas que despliegan informacin simultneamente; es fcil acceder rpidamente a cualquier porcin de la pantalla e interactuar con la aplicacin.

Elementos de una GUI

Caractersticas Ventanas conos Menes Punteros Grficos Descripcin Mltiples ventanas pueden desplegar distinta informacin simultneamente en la pantalla. Representan distintos tipos de informacin: sistemas, archivos, procesos. Los comandos se seleccionan de un men en lugar de escribirlos. Un puntero sirve para elegir elementos de la pantalla: mouse, lpiz ptico, dedo en pantalla sensible. Los grficos y el texto pueden mezclarse en la misma pantalla.
5

Proceso de Diseo de Interfaces

Usuarios del sistema

Funcionalidad

Prototipo

Evaluacin

Principios de Diseo de Interfaces

Principio Familiaridad Consistencia Sorpresa Mnima Recuperable Ayuda Descripcin La interfaz debe usar trminos y conceptos familiares a los usuarios potenciales. Operaciones similares deben ejecutarse con mtodos similares. El comportamiento del sistema debe ser como el usuario lo espera. Los errores deben ser reversibles. La ayuda sensible al contexto es muy importante.
7

Familiaridad
Los usuarios tienen limitaciones fsicas y mentales:
memoria de corto alcance.

Es mejor adaptar el diseo de la interfaz a conceptos manejados por el usuario que dar entrenamiento al usuario en los nuevos conceptos. S:
archivar, editar, borrar, etc.

No:
directorio, identificador de archivo, disco, etc.
8

Consistencia
Objetos similares de la interfaz tienen el mismo formato. El tiempo de aprendizaje es menor y tambin es menor el nmero de errores cometidos. Debe evitarse usar el mismo comando o serie de teclas para realizar operaciones muy distintas:
F12 para guardar un archivo, F12 para salir de la edicin.

Ejemplo:
todas las herramientas de Office tienen casi los mismos conos para:
guardar, abrir, copiar, pegar, deshacer, ortografa, etc.
9

Mnima Sorpresa
Acciones similares por parte del usuario deben tener efectos similares:
los usuarios suelen confundirse e irritarse si no es as.

El uso de sistemas predecibles es ms fluido y eficiente.

10

Recuperacin
Pese a todos los esfuerzos de diseo, siempre se comenten errores en el uso de los sistemas. Existen dos formas de recuperacin de errores:
Confirmacin: cada vez que se solicite una operacin destructiva, el sistema pedir confirmacin del usuario. Deshacer: el sistema tendr la opcin de volver al estado anterior al aplicar la ltima operacin:
puede haber varios niveles de deshacer, esto depende de los recursos disponibles y de la importancia de la recuperacin.

11

Ayuda
El sistema debe contener distintos niveles de ayuda en lnea:
un manual general del sistema, ayuda sensitiva en lugares crticos del sistema.

La ayuda no debe ser nunca excesiva.

12

Interaccin Usuario - Sistema

Interaccin

Interfaz

Presentacin
13

Manipulacin Directa
Al usuario se le presenta un modelo de la informacin y ste puede realizar acciones sobre ella. Los cambios se presentan inmediatamente al usuario. Ejemplos:
procesador de texto editando un archivo; lista de compras en una caja registradora.

Estas interfaces generalmente requieren gran cantidad de recursos locales:

uso de memoria, disponibilidad de monitores con capacidades grficas, etc.
14

Ventajas y Desventajas
Ventajas:
los usuarios se sienten en control de la aplicacin, no se sienten intimidados, el tiempo de entrenamiento es relativamente corto, obtienen inmediata retroalimentacin de sus acciones, los errores pueden detectarse y corregirse rpidamente.

Desventajas:
no siempre es evidente la forma en que debe disearse la interfaz para que la manipulacin sea as de fcil, en sistemas grandes, la informacin puede no caber en una sola pantalla, si hay muchas pantallas, el usuario puede perderse en la navegacin.

15

Interfaces de Formularios
Los formularios son una serie de etiquetas y campos de datos donde:
se despliega la informacin correspondiente, o se permite al usuario digitar o seleccionar la informacin.

Profesores
Nombre Direccin Cargo Cursos 

Es conveniente asociar controles para chequear que los datos de cada campo sean razonables.

Cancelar

Ok
16

Metfora del Panel de Control

Botones:
click en un botn hace que se desencadene una accin.

Indicadores:
campos de datos que muestran informacin pero no pueden modificarse.

Switches:
eligen una opcin de entre varias de una lista
cms, pulgadas, etc.

Campos de datos:
reas que despliegan datos o grficos; el usuario puede modificar estos datos.

Menes:
coleccin de botones o switches; pueden estar visibles o hacerse visibles con alguna accin.

Barras de Scroll:
usadas para elegir un valor de un rango; en particular el rango de pantalla a visualizar.
17

Sistemas Basados en Menes

El usuario elige una de entre muchas opciones ofrecidas. La eleccin puede hacerse por distintos medios:
tipeando la opcin, cliqueando de un men, apuntando con un lpiz ptico, con el dedo en una pantalla sensible.

Ventajas:
el usuario no tiene que recordar los comandos; el mecanismo de seleccin es rpido; se evitan opciones inexistentes; es fcil proporcionar ayuda contextual.
18

Pull-down y Pop-Up Menes

Pull-down:
est presente el nombre del men; al seleccionarlo, se despliega el men (hacia abajo) con sus opciones. El usuario siempre sabe que estn all para ser usados. Pero existe espacio limitado en la pantalla para poner estos menes.

Pop-up:
estos menes estn asociados a ciertas entidades; se despliegan con alguna accin especial,
con el botn derecho del mouse.

Pueden existir tantos como quiera el diseador. El usuario no siempre sabe dnde encontrarlos.

19

Organizacin de Menes
Puede haber muchsimas opciones para organizar dentro de los menes:
Barras de Scroll:
es prctico si el men tiene 20 opciones pero no si tiene 2000.

Menes Jerrquicos:
cada opcin del men despliega otro men que representa un subrbol de opciones.

Caminar por el Men:

menes jerrquicos que permanecen al desplegar el siguiente nivel.

Paneles de Control Asociados:

al elegir una opcin de men, se despliega un panel de control con muchos otros datos a llenar.
20

Interfaces de Comandos
El usuario escribe cada comando para el sistema. Estos fueron los primeros tipos de interfaces. Requieren muy pocos recursos de pantalla. Los comandos pueden ser:
queries, solicitud de servicios, llamado a otros comandos (macro).

Algunos usuarios prefieren an hoy las interfaces de comandos porque permiten una interaccin ms rpida.
21

Ventajas y Desventajas
Ventajas:
crear un procesador de lenguaje de comandos es ms fcil que uno para una interfaz grfica; con combinaciones de comandos puede ejecutarse cosas complejas,
comandos UNIX;

Desventajas:
los usuarios deben aprender el lenguaje de comandos para interactuar con el sistema; los usuarios cometen errores al tipear los comandos,
manejo de errores como parte del procesamiento de comandos;

interfaces concisas, tanto para el programador como el usuario.

la interaccin es solamente a travs del teclado.

22