Prototipos de

Interfaz

Análisis de
Sistemas
Prototipos de Interfaz
Concepto y propósito de los prototipos
Un prototipo es una versión inicial de un sistema de software que se utiliza
para demostrar los conceptos, probar opciones de diseño y, en general,
conocer más acerca del problema y opciones de solución.

Tal como lo plantea Ian Sommerville (2002), un prototipo de sirve de apoyo

a dos actividades dentro del proceso de ingeniería de requerimientos:

1. Obtención de requerimientos: Los prototipos permiten a los usuarios

experimentar para ver cómo el sistema ayudará a su trabajo. Les
permite adquirir nuevas ideas para los requerimientos y proponer
nuevos requerimientos.
2. Validación de requerimientos: Un prototipo puede revelar errores y
omisiones en los requerimientos propuestos y especificados. Con el
uso de prototipos los usuarios a menudo encuentran que su visión
inicial fue incorrecta o incompleta, entonces la especificación del
sistema puede modificarse para reflejar el cambio en la comprensión
de los requerimientos.

Además de permitir a los usuarios mejorar la especificación de

requerimientos, el desarrollo de un prototipo del sistema tiene otras
ventajas:

• Al demostrar las funciones del sistema se identifican las

discrepancias entre los desarrolladores y los usuarios.

• Durante el desarrollo del prototipo, el personal de desarrollo

puede darse cuenta de que los requerimientos son
inconsistentes y/o están incompletos.

• Aunque limitado, se dispone rápidamente de un sistema que

funciona y demuestra la factibilidad y usabilidad de la
aplicación a administrar.

• El prototipo de utiliza como base para escribir la

especificación para la producción de un sistema de calidad.

1
Por lo general el desarrollo del prototipo conduce a mejorar la especificación
del sistema, pero una vez que el prototipo está disponible también se utiliza
para otros propósitos:

1. Capacitar al usuario: El prototipo se puede utilizar para capacitar a

los usuarios antes que el sistema final esté terminado.
2. Probar el sistema: Los mismos casos de prueba se introducen al
prototipo y al sistema en prueba. Si ambos sistemas dan los mismos
resultados el caso de prueba no detecta una falla. Pero si los
resultados difieren significa que el sistema falla y hay que investigar
las razones de las diferencias.

Construcción de prototipos de interfaz

de usuario
En la actualidad, las interfaces gráficas de usuario (GUI por sus siglas en
inglés) se han convertido en las normas para los sistemas interactivos. El
esfuerzo comprendido en la especificación, el diseño y la implementación de
una interfaz de usuario representa una parte significativa de los costos de
desarrollo de un sistema.

Ian Sommerville (2002) nos plantea que los diseñadores no deben dar su
opinión a los usuarios de lo que debería ser una interfaz de usuario y que el
usuario debe tener una participación activa en el diseño de la misma.

Desde el punto de vista de la Ingeniería de software, la construcción de

prototipos es una parte esencial del proceso de diseño de la interfaz de
usuario. La construcción de prototipos evolutivos con la participación del
usuario final es la única manera sensible para desarrollar interfaces gráficas
de usuario para los sistemas de software.

La siguiente figura nos muestra el proceso de diseño de una interfaz de

usuario, tal como lo presenta Ian Sommerville en su libro “Ingeniería de
Software” (ver bibliografía).

2
Fuente: Libro “Ingeniería de Software” – Ian Sommerville, 2002, Pág. 329.

Ventajas del uso de Interfaz Gráfica de

Usuario (GUI)
Aunque las interfaces basadas en texto aún se utilizan, especialmente en los
sistemas heredados, los usuarios actuales de sistemas informáticos esperan
que las aplicaciones tengan algún tipo de interfaz gráfica de usuario.

Este tipo de interfaces se caracterizan por el uso de los siguientes elementos:

• Ventanas: Las ventanas múltiples permiten que se despliegue

simultáneamente información diversa en la pantalla del usuario.
• Íconos: Los íconos representan diferentes tipos de información. En
algunos sistemas los íconos representan archivos y en otros
representan procesos.
• Menús: Los comandos se seleccionan de un menú en lugar de
teclearse en un lenguaje de órdenes.
• Apuntador: Para seleccionar las opciones de un menú, indicar
elementos de interés en una ventana o dirigirse a alguna parte de la
ventana se utiliza un dispositivo apuntador como el “mouse” (ratón).
• Gráficos: Los elementos gráficos se pueden mezclar con texto en el
mismo despliegue.

Entre las ventajas del uso de interfaces gráficas de usuario podemos

mencionar:

• Son fáciles de aprender y utilizar.

3
 • Para interactuar con el sistema los usuarios cuentan con pantalla
múltiples (ventanas) por lo tanto es posible ir de una tarea a otra sin
perder de vista la información generada durante la primer tarea.
• Es posible interactuar rápidamente y tener acceso inmediato a
cualquier punto de la pantalla.

Elementos de una interfaz gráfica de

usuario
Los diseñadores de interfaces de usuario deben tener en cuenta las
capacidades físicas y mentales de la gente que utilizará el software. Las
personas olvidan fácilmente y cometen varios errores cuando tienen que
manejar demasiada información o están bajo presión, pero poseen un
amplio rango de capacidades físicas.

Las habilidades humanas son la base para los principios de diseño que se
enuncian a continuación y que consisten en una serie de principios generales
que se pueden aplicar a todos los diseños de interfaces de usuario.

• Familiaridad del usuario: La interfaz debe utilizar términos y conceptos

que se toman de la experiencia de las personas que más utilizan el
sistema. Por ejemplo, si en la organización utilizan el término “afiliado”
para referirse a los clientes mantener esta denominación en las
interfaces.

• Consistencia: La interfaz debe ser consistente en el sentido de que las

operaciones comparables se activan de la misma forma. Por ejemplo
todas las ventanas de registro de datos son similares (ventana para
registrar nuevo disco, nuevo sello, nuevo género)

• Mínima sorpresa: El comportamiento del sistema no debe provocar

sorpresa a los usuarios. Utilizar recursos como mostrar una barra de
avance para indicar al usuario que el sistema está procesando algo, por
ejemplo, para que no piense que se ha clavado el sistema.

• Recuperabilidad: La interfaz debe incluir mecanismos para permitir a los

usuarios recuperarse de los errores, como confirmación de acciones
destructivas (siempre solicitar confirmación ante una acción “eliminar”),
proveer un recurso para deshacer (incluir la opción “cancelar” en todas
las ventanas)

4
• Guía al usuario: Cuando los errores ocurren, la interfaz debe proveer
retroalimentación significativa y características de ayuda sensible al
contexto. Mostrar mensaje de error significativo para el usuario que le
den indicación sobre cuál es el error y cómo subsanarlo o cómo continuar
correctamente con la aplicación.

• Diversidad de usuarios: La interfaz debe proveer características de

interacción apropiada para los diferentes tipos de usuarios del sistema.
Hay usuarios que tienen buena memoria y son ágiles con el teclado
numérico de modo que prefieren ingresar por este medio los datos
(como por ejemplo legajos de personal o código de artículos) en vez que
tener que trasladar la mano al mouse para hacer la selección desde un
combo o lista, lo cual se traduce en más tiempo empleado en la
operación si hay que hacer muchos cambios de movimiento de la mano
(del teclado al mouse y de éste al teclado sucesivamente). De modo que
la interfaz debería permitir ambos tipos de acciones: ingreso de datos o
selección de los mismos.

Interacción del usuario

Los diseñadores de interfaces de usuario deben decidir cómo se va a
introducir la información del usuario a la computadora y cómo se presentará
al usuario la información del sistema.

La interacción del usuario implica emitir comandos y datos asociados al

sistema de software. En las primeras computadoras la única forma de hacer
esto era a través de una interna de línea de comandos en la que se utilizaba
un lenguaje de propósito específico. Sin embargo este enfoque sólo lo
utilizaban los expertos por lo que fueron surgiendo otras posibilidades que
les facilitaban las tareas.

Ian Sommerville (2002) en el libro que hemos estado mencionando, cita a

Shneiderman, quien clasificó las diversas formas de interacción del usuario
con la computadora (es decir con la interfaz de usuario) en estos cinco estilos
primarios:

• Manipulación directa: Cómo “arrastrar” para mover o eliminar un

archivo. Es una interacción rápida e intuitiva además de fácil de aprender
pero puede ser difícil de implementar si no hay una representación visual
clara para las tareas y objetos.

• Selección de menús: Seleccionar el archivo y luego seleccionar la acción

“mover” o “eliminar” desde un menú. Evita errores del usuario y

5
 requiere teclear poco, pero puede parecer lenta a usuarios
experimentados.

• Llenado de formularios: El usuario llena campos de un formulario

(ventana de carga de datos), puede tener menús asociados, botones,
íconos, entre otros elementos gráficos. Implica una forma de
introducción de datos sencilla y fácil de aprender pero ocupa mucho
espacio en pantalla.

• Lenguaje de comandos: El usuario indica un comando especial y

parámetros necesarios (DEL nota.txt). Es una forma de interacción
poderosa y flexible pero puede resultar difícil de aprender.

• Lenguaje natural: Emitir un comando en lenguaje natural (“borrar el

archivo nota.txt”). Resulta accesible a usuarios casuales pero se requiere
teclear más además que se debería disponer de sistemas de
comprensión de lenguaje natural los cuales no siempre resultan fiables.

Respecto de la forma de presentación de la información a los usuarios en la

interfaz, podemos mencionar brevemente.

• Presentación como texto: Utilizada generalmente cuando se requiere

información numérica precisa y la información cambia relativamente
lento.

• Presentación como gráfico: Utilizada generalmente cuando los datos

cambian rápidamente o si las relaciones entre los datos son significantes
(uso de gráficos de barra, curva, torta, por ejemplo).

Uso del color en el diseño de la interfaz

de usuario
En general, los sistemas interactivos permiten despliegues a color y los
diseñadores de interfaces de usuario utilizan el color de diferentes formas.

El uso del color en las interfaces puede resultar de utilidad ayudando a los
usuarios a comprender y manejar la complejidad. Sin embargo, si el color es
utilizado de manera errónea puede conducir a interfaces poco
atractivas, fatigosas para la vista y propensas a errores.

A continuación se listan algunas recomendaciones respecto del uso del color

en las interfaces:

6
 • Limitar el número de colores utilizados, ser conservador al momento
de utilizarlos.

• Utilizar un cambio de color para mostrar un cambio en el estado del

sistema (por ejemplo en un listado de pedidos identificar con azul los
cancelados).

• Utilizar el código de colores para apoyar la tarea que los usuarios

están tratando de llevar a cabo (identificar instancias anómalas o
similitudes).

• Utilizar el código de colores en forma consciente y consistente: Si en

una parte se muestran mensajes de error en color rojo, hacerlo así
en todas las interfaces.

• Ser cuidadoso al utilizar pares de colores: Por la fisiología del ojo las
personas no pueden enfocar el rojo y el azul simultáneamente. La
vista cansada es consecuencia del despliegue de rojo sobre azul.
Otras combinaciones también son perturbadoras o difíciles de leer
(como amarillo sobre negro por ejemplo).

Soporte al usuario
Las interfaces de usuario siempre deben proveer alguna forma de sistema
de ayuda en línea, como mencionamos al enunciar los principios de diseño
de interfaces de usuario.

Los sistemas de ayuda en línea con una faceta de una parte general del
diseño de interfaces de usuario. El soporte al usuario cubre tres áreas:

• Los mensajes producidos por el sistema en respuesta a las acciones

del usuario

• Ayuda en línea

• La documentación suministrada con el sistema

Mensajes de error
Los mensajes de error del sistema son la primera marca que reciben los
usuarios de un sistema de software. Al hacer su trabajo los usuarios

7
inexpertos pueden cometer errores y de manera inmediata debería poder
comprender el mensaje de error resultante.

Los mensajes de error deben tomar en cuenta el conocimiento y la

experiencia de los usuarios. Podemos tener:

• Mensaje orientado al sistema: Como por ejemplo: “Error # 32 en

línea 410” Es un mensaje negativo, no se ajusta a las habilidades y
nivel de experiencia del usuario, tampoco sugiere cómo rectificar la
situación.

• Mensaje orientado al usuario: Como por ejemplo “Cliente no

registrado – utilice la opción: Registrar Nuevo Cliente”. Este tipo de
mensajes son los que se deben utilizar. Deben ser amables, concisos,
consistentes y constructivos.

Diseño del sistema de ayuda

En el caso que el mensaje de error no sea suficiente para el usuario, éste se
dirigirá inmediatamente al sistema de ayuda en busca de más información
para solucionar el inconveniente o duda que se le presenta.

Hay algunos aspectos interesantes a considerar al momento de diseñar la

ayuda en línea:

• Niveles de entrada: Los sistema de ayuda proveen varios puntos

diferentes de entrada a los usuarios.

• Navegación de la ayuda: Los usuarios pueden ingresar al sistema de

ayuda en el punto de la jerarquía correspondiente al mensaje y luego
navegar por la estructura de red del sistema de ayuda. Puede pasar que
el usuario comience a navegar por la ayuda y al poco tiempo se
encuentre “perdido”; desplegar la información de ayuda en múltiples
ventanas puede aliviar esta situación.

• Contenido: El texto de un sistema de ayuda se prepara con la ayuda de

especialistas en la aplicación. La ayuda en línea no debe ser simplemente
una reproducción del manual del usuario ya que las personas leen en
papel y en pantalla en forma diferente. El texto, su exposición y estilo
tienen que diseñarse cuidadosamente para permitir su despliegue
legible en una ventana generalmente pequeña.

8
• Herramientas: Respecto de las herramientas que se pueden utilizar para
confeccionar un sistema de ayuda en línea tenemos,

o Conjunto de páginas vinculadas a Worl Wide Web que serán

accedidas mediante un navegador: Son fáciles de implementar y no
necesitan ningún software especial pero pueden ser difíciles de
vincular con las aplicaciones.

o Sistema de hipertexto integrado con las aplicaciones, utilizando

herramientas como por ejemplo WinHelp que produce ayudas
similares a las que están ampliamente difundidas en los sistemas
operativos y aplicativos comerciales.

Documentación del usuario

La documentación del usuario no es estrictamente parte del diseño de la
interfaz de usuario, pero es recomendable diseñar el apoyo de ayuda en
línea junto con la documentación en papel.

Los manuales del sistema proveen información más detallada de la ayuda en

línea y se diseña de tal forma que puedan ser utilizados por diferentes tipos
de usuarios del sistema.

Ian Sommerville (2002) nos recomienda al menos cinco documentos, o

capítulos de un único documento, para entregar junto con el producto de
software:

• Descripción funcional: Describe brevemente los servicios que provee

el sistema.

• Documento de instalación: Provee los detalles de cómo instalar el

sistema, los discos que se entregan con el sistema, los archivos de
estos discos y la configuración de hardware mínima requerida para
que funcione correctamente el sistema.

• Manual Introductorio: Presenta una introducción un tanto informal

del sistema, describiendo su utilización normal. Describe como
iniciar, cerrar sesión de usuarios y cómo utilizar los recursos comunes
del sistema.

• Manual de referencia: Describe todos los recursos del sistema;

provee una lista de los mensajes de error, posibles causas y cómo
recuperarse de los mismos.

9
 • Guía del administrador: Describe los mensajes que se generan por la
interacción del sistema con otros sistemas y cómo reaccionar en
estas situaciones; también cuando el problema puede estar
relacionado con algún elemento de hardware, indicando cómo
reconocer y reparar el problema, de ser posible para el usuario. Este
tipo de documentación sólo está presente en algunos tipos de
sistemas, los que incluyen saturaciones como las que se describieron.

Evaluación de la interfaz
La evaluación de la interfaz es el proceso de valorar la forma en que es
utilizada una interfaz y verificar que cumple sus requerimientos.

Idealmente, una evaluación se compara con la especificación de la usabilidad

que se basa en los siguientes atributos:

• Aprendizaje: Se evalúa cuánto tiempo tarda un usuario nuevo en ser

productivo con el sistema.

• Velocidad de operación: Se considera qué tan bien responde el

sistema a las operaciones de trabajo del usuario.

• Robustez: Se evalúa qué tan tolerante es el sistema a los errores del

usuario.

• Recuperación: Se observa qué tan bien se recupera el usuario de los

errores del usuario.

• Adaptación: Se evalúa qué tan atado está el sistema a un solo

modelo de trabajo.

Para realizar la evaluación de la interfaz de usuario se pueden aplicar las

siguientes técnicas:

• Cuestionarios, que recolectan la opinión de los usuarios acerca de la

interfaz.

• Observación de los usuarios al momento de trabajar con el sistema.

• Videos de sesiones de usuario.

• Código incluido en el software que recolecte información sobre

errores más comunes y recursos más utilizados.

10
Elementos de una interfaz gráfica de
usuario
Se muestran a continuación algunos elementos que están presentes en toda
interfaz gráfica de usuario.

11
12
Bibliografía
Sommerville Ian, “Ingeniería de Sofware” (2002), Ed. Pearson Educación, México,
(2002).

13