I.TE.C. “Fe y Alegría” Capítulo 5: Diseño de la Interfaz de Usuario Lic.

Freddy Ruíz
Ucumari

( Parte 1)

CAPÍTULO 5
DISEÑO DE LA INTERFAZ DE USUARIO
5.1. INTRODUCCIÓN.

El objetivo del capítulo es estudiar algunos aspectos del diseño de la Interfaz Gráfica de
Usuario, GUI, que es importante para el desarrollador de software y el cliente; así mismo se
tendrá conocimiento de los diversos estilos de interacción con el sistema de software, tanto en
la introducción de datos como en la presentación de la información. Al finalizar el capítulo se
comprenderá los principios de diseño generales para obtener una interfaz de usuario amigable.

El diseño de sistemas de información comprende varias actividades, que van desde el análisis
de requerimientos hasta el diseño de la interfaz del usuario, aunque muchos especialistas traba-
jan más en el diseño del software y muy pocos se dedican al diseño de interfaces de usuario.

En el presente capítulo nos dedicaremos al diseño de la GUI, más que en el diseño del software
que implementa la interfaz. La GUI es el mecanismo a través del cual se establece un diá-
logo o comunicación entre el sistema (programa) y el usuario, la GUI es la carta de pre -
sentación de un sistema de información, por tanto se debe prestar mucha atención al diseño.

Para que el sistema tenga éxito, es importante contar con un buen diseño de la GUI. En
los casos donde la interfaz es difícil de utilizar provocará que los usuarios cometan muchos
errores; y si la información se presenta en forma confusa, los usuarios no comprenderán el
significado de la información, lo que puede provocar una falla catastrófica en el sistema.

5.2. PROCESO DE DISEÑO DE LA INTERFAZ DE USUARIO.

El investigador Shneiderman en su libro de Ingeniería del Software sugiere seguir una secuen-
cia esquemática para el diseño de la Interfaz Gráfica de Usuario. En la figura 5-1 se ilustra el
proceso iterativo de diseño de interfaces de usuario; es decir un proceso repetitivo hasta satis-
facer las necesidades del usuario final. El proceso de construcción de prototipos se inicia con
una simple interfaz en papel antes de desarrollar los diseños de las pantallas en el ordenador
que simula la interacción con el usuario. Se utiliza un enfoque centrado en el usuario, donde
los usuarios finales del sistema juegan un rol activo en el proceso de diseño.

Página 44
 I.TE.C. “Fe y Alegría” Capítulo 5: Diseño de la Interfaz de Usuario Lic. Freddy Ruíz
Ucumari

Analizar y comprender los requerimientos

Producir
del usuario
un prototipo de diseño estático Evaluar
en papelel diseño con los usuarios finales

Producir el prototipo del diseño dinámico en

Evaluar el diseño con los usuarios finales
computadora
Diseñar el prototipo en
computadora

Prototipo ejecutable
Implementar la interfaz del usuario final

Figura 5-1. Proceso de Diseño de la Interfaz de Usuario

5.3. CARACTERÍSTICAS PRINCIPALES DE LA GUI.

En la siguiente tabla se describe las características fundamentales de la GUI.

CARACTERÍSTICAS DESCRIPCIÓN

Es el área mayor de trabajo. El uso de ventanas múltiples permite

VENTANAS que se despliegue simultáneamente la información diversa por la
pantalla del usuario. Es en la ventana donde se presenta los distin-
tos objetos y la información del sistema.
Los íconos son objetos generalmente gráficos que representan dife-
rentes tipos de información y aplicación; en algunos sistemas los
ICONOS
iconos representan archivos, en otros procesos, al hacer un clic o
doble clic se accede al proceso asociado.
Un menú es un conjunto de opciones desplegables y relacionadas
entre sí. Los comandos o sentencias de un sistema informático se
MENÚS
seleccionan de un menú de opciones en lugar de teclearse en un
lenguaje de órdenes.
Se denomina también mouse, es un objeto parpadeante que tiene
la forma de │ o  que interactúa con el mouse. Para seleccionar
PUNTERO las opciones de un menú o para indicar elementos de interés en
una ventana, se utiliza el dispositivo denominado ratón. Con un
simple clic o doble clic se accede a la información de un objeto.
Son objetos más explicativos que un texto. Los elementos gráficos
GRÁFICOS se pueden complementar con el texto en el mismo despliegue. Los
gráficos deben guardar relación con el tema de interés.
Son aquellos que nos permiten ingresar datos al sistema y presen-
tar la información procesada, evitando el uso del teclado. Entre
OBJETOS DE E / S
algunos ejemplos tenemos: el radio button, el chek box, combo
box, los cuadros de texto y otros.

Página 45
I.TE.C. “Fe y Alegría” Capítulo 5: Diseño de la Interfaz de Usuario Lic. Freddy Ruíz
Ucumari

5.4. VENTAJAS DE LA INTERFAZ GRÁFICA DE USUARIO, GUI.

1.º. Las GUIs amigables son relativamente fáciles de aprender y utilizar sin cometer errores.
Los usuarios sin experiencia pueden aprender a utilizar la interfaz del sistema después de
una sesión breve de capacitación.
2.º. Para interactuar con el sistema de información de manera ordenada, los usuarios cuentan
con pantallas múltiples, esto significa que es posible ir de una tarea a otra sin perder de
vista la información generada durante la primera tarea. Por eso es recomendable utilizar
las pestañas para distribuir mejor la información.
3.º. Es posible interactuar rápidamente y tener acceso inmediato a cualquier punto de la pantalla a
través de los comandos de entras y salida.

5.5. PRINCIPIOS DE DISEÑO DE LA INTERFAZ DE USUARIO.

Los diseñadores de interfaces de usuario deben tomar en cuenta entre otros aspectos las capa-
cidades psicológicas y físicas de la gente que utilizará el sistema, las personas se olvidan rápi-
damente y cometen varios errores, especialmente cuando tienen que manejar demasiada infor-
mación. Los principios de diseño que deben tomarse en cuenta son:
PRINCIPIOS DE
DESCRIPCIÓN
DISEÑO
La interfaz de usuario debe utilizar términos que se toman de la
FAMILIARIDAD DEL experiencia de las personas que más utilizan el sistema. Este prin-
USUARIO cipio sugiere que los usuarios no deben ser obligados adaptarse a
una interfaz solo porque es conveniente implementarla.
Siempre que sea posible, la interfaz debe ser consistente en el
sentido de que las operaciones se activen de la misma forma en las
distintas pantallas. Este principio significa que los comandos y me-
nús del sistema deben tener el mismo formato y la puntuación de
las órdenes debe ser similar. Las interfaces consistentes reducen
CONSISTENCIA
el tiempo de aprendizaje del usuario. Las órdenes con significados
similares en los diversos subsistemas se deben expresar de la mis-
ma forma; es decir, si se utiliza CTRL+C para copiar datos en un
subsistema, en el resto de los subsistemas también debe utilizarse
la misma notación.
El comportamiento del sistema no debe provocar sorpresas des-
agradables a los usuarios, este principio es apropiado debido a que
los usuarios se enojan demasiado cuando el sistema se comporta
MÍNIMA SORPRESA de forma inesperada. Cuando se utiliza un sistema, los usuarios se
construyen un modelo mental de la forma en que trabaja el sistema;
si algo completamente diferente sucede, el usuario se sorprende y
se confunde.

Página 46
I.TE.C. “Fe y Alegría” Capítulo 5: Diseño de la Interfaz de Usuario Lic. Freddy Ruíz
Ucumari

La interfaz de usuario debe incluir mecanismos para permitir a los

usuarios recuperarse de los errores cometidos. Este principio es
importante debido a que los usuarios cometen errores cuando utili-
zan el sistema. Los usuarios pueden recuperarse de los errores de
dos formas:
1.º. Confirmación de acciones destructivas. En este caso se les
preguntará a través de una ventanilla que confirmen la acción a
RECUPERABILIDAD realizar antes de que la información se destruya.
Está seguro de continuar?. La información puede perderse

SI NO CANCELAR

2.º. Proveer un recurso para deshacer. Este recurso debe permi-

tir al sistema regresar a su estado anterior antes de que ocurrie-
ra la acción. Por ejemplo, presionando CTRL + Z, deshace la
acción errónea anterior.
Cuando se presentan errores al ejecutar un sistema, la interfaz de
usuario debe proveer ayudas significativas que colaboren a solucio-
nar el contexto. La interfaz tiene que proveer asistencia técnica al
GUÍA AL USUARIO
usuario o características de ayuda en línea, pueden ser etiquetas
sobre los botones, menús u otros objetos o presionando el botón de
ayuda.

Este principio señala que para muchos sistemas existen diferentes

tipos de usuarios. Algunos son usuarios temporales, que ocasio-
nalmente interactúan con el sistema, los cuales necesitan de inter-
DIVERSIDAD DE faces que los guíen; mientras que otros son usuarios potenciales,
USUARIOS
que utilizan el sistema de manera permanente por varias horas,
éstos requieren de métodos abreviados para permitirles una inte-
racción rápida como sea posible.

5.6. INTERACCIÓN DEL USUARIO – ENTRADA DE DATOS.

El diseñador de una interfaz de usuario debe enfrentarse a dos preguntas principales:
1.º. ¿Cómo introducirá el usuario los datos al sistema?
2.º. ¿Cómo se presentará la información procesada del sistema al usuario?
Una interfaz de usuario coherente debe integrar tanto la interacción del usuario como la pre-
sentación de la información. La interacción del usuario implica ingresar datos al sistema.
El investigador Shneiderman, en 1998 clasificó estas formas de interacción en SEIS ESTILOS:

Página 47
I.TE.C. “Fe y Alegría” Capítulo 5: Diseño de la Interfaz de Usuario Lic. Freddy Ruíz
Ucumari

1.º. Manipulación Directa: Esto significa que el usuario interactúa directamente con los obje-
tos de la pantalla a través del teclado o el mouse. Por ejemplo, para borrar un archivo, el
usuario puede arrastrar al bote de basura.

2.º. Selección de Menús: Implica que el usuario selecciona un comando de un menú de op-
ciones. Este es el caso cuando se utiliza un objeto de la pantalla y se selecciona el co-
mando que opera sobre ese objeto. Por ejemplo: Inicio Insertar Reportes, o botones
para el efecto.

3.º. Llenado de Formularios: Consiste en que el operador llena los campos de un formulario,
bien desde el teclado o seleccionando con el mouse. Algunos campos tienen menús aso-
ciados, botones que cuando se presiona provocan que se inicie una acción. Se recomien-
da utilizar componentes como combo box, radio button, check box, etc. La utilización de
estos comandos agiliza la introducción de datos con mínimo error. En lo posible se sugie-
re evitar el uso del teclado para ingresar datos al sistema.

4.º. Lenguaje de Comandos: Donde los usuarios emiten un comando especial y los paráme-
tros asociados para indicar al sistema qué hacer. Por ejemplo, para almacenar datos pue-
de presionar el botón GUARDAR que debe estar previamente implementado con funcio-
nes y parámetros.

5.º. Lenguaje Natural: Consiste en que el usuario emite un comando en lenguaje natural (es-
pañol en nuestro caso). Por ejemplo para borrar un archivo el usuario debe teclear “Bo-
rrar el archivo XXX”

6.º. El Atractivo: Implica que a los usuarios les agradará la Interfaz Gráfica de Usuario o se-
rán atraídos al utilizar las pantallas de entrada, estas pantallas deben ser amigables y
fáciles de utilizar a tiempo de ingresar los datos.

5.6.1. VENTAJAS Y DESVENTAJAS DE LOS ESTILOS DE INTERACCIÓN.

Cada uno de los estilos de interacción mencionados tiene ventajas y desventajas y son adecua-
dos para diferentes tipos de aplicaciones y usuarios.

PRINCIPALES VEN- PRINCIPALES DES- EJEMPLOS DE APLI-

ESTILO DE
TAJAS VENTAJAS CACIÓN
INTERACCIÓN
MANIPULACIÓN La interacción es Puede ser difícil Videojuegos.
DIRECTA rápida e intuitiva. implementar si no Sistemas CAD.
Fácil de aprender. se tiene suficientes Sistemas de gestión
y multimedia.
El usuario no re- conocimientos técni-

Página 48
I.TE.C. “Fe y Alegría” Capítulo 5: Diseño de la Interfaz de Usuario Lic. Freddy Ruíz
Ucumari

quiere mucho en- cos,

trenamiento técnico Solo es adecuada
donde existe una
interfaz visual para
las tareas y objetos.
Evita errores del Lenta para usuarios Muchos de los siste-
usuario al ingresar no experimentados. mas de propósito
SELECCIÓN DE datos. Puede llegar a ser general que utilicen
Se requiere teclear menús.
MENÚS compleja si existen
poco. Sistemas de gestión
El ingreso de datos muchas opciones y multimedia.
es rápido. en el menú.
La Introducción de Ocupa mucho espa- Control de almacén.
datos es sencilla. cio en la pantalla. Sistemas de regis-
LLENADO DE tros e inventarios.
Fácil de aprender. Se debe tener cono-
FORMULARIOS Procesamiento de
Evita la interacción cimientos de los
préstamos al perso-
manual. objetos de la GUI. nal.
Poderoso y flexible. Difícil de aprender si Sistemas operati-
Fácil de implemen- no se tiene suficien- vos.
LENGUAJE DE tar en un lenguaje tes conocimientos. Sistemas biblioteca-
rios de recuperación
COMANDOS visual. La administración
de la información.
Utiliza botones en de errores es pobre.
general.
Accesible a usua- Se requiere teclear Sistemas de hora-
rios casuales o más. rios.
LENGUAJE NA- temporales. Los sistemas de Sistemas web de
recuperación de la
TURAL Fácil de ampliar. comprensión de
información.
lenguaje natural no
son fiables.

Página 49