WICC 2014 XVI Workshop de Investigadores en Ciencias de la Computación

Diseño de Interfaz Gráfica de Usuario

M. Claudia Albornoz
Departamento de Informática, Facultad de Ciencias Físico, Matemáticas y Naturales
Universidad Nacional de San Luis, San Luis, Argentina
e-mail: albornoz@[Link]

Resumen aplicación no sólo se debe desarrollar

pensando en cumplir con todos los
requerimientos funcionales que solicita el
En la vida cotidiana interactuamos
cliente sino también se debe programar
constantemente con Interfaces Gráficas de
haciendo evidente a simple vista que la
Usuario (GUI por su nombre en inglés
aplicación cumple con lo solicitado.
Graphical User Interface); no sólo al usar
una computadora sino también en objetos
de uso diario como el celular, el cajero Palabras claves:
automático, etc. entre muchas otras cosas.
Diseño, Construcción, Interfaz Gráfica de
La interfaz tiene un papel
fundamental para que el producto sea o Usuario (GUI).
no competitivo. El producto no será
exitoso si el usuario no consigue
concretar una acción (por ejemplo: una Contexto
transacción económica), o no entiende la
secuencia de pasos a seguir, o cuando no El presente trabajo se enmarca en
encuentra con facilidad cómo concretar la el Proyecto de Investigación: “Ingeniería
acción que necesita (por ejemplo: realizar de Software: Aspectos de alta
una compra) o cuando no considera sensibilidad en el ejercicio de la
atractivo el diseño de la aplicación que profesión de Ingeniero de Software”
está utilizando. [1] código 22/F222 de la Facultad de
El diseño de la GUI suele Ciencias Físico, Matemáticas y
considerarse como tarea secundaria, sin Naturales, de la Universidad Nacional
embargo al analizar porqué algunas de San Luis. Dicho proyecto es la
continuación de diferentes proyectos de
aplicaciones fracasan, se evidencia que el
diseño de la GUI tiene una gran investigación a través de los cuales
se han logrado importantes vínculos con
influencia en esto.
distintas universidades a nivel nacional
La línea de investigación que e internacional. Además, se
presenta éste trabajo expone la encuentra reconocido por el Programa de
importancia de contar con un buen diseño Incentivos.
de GUI en cualquier aplicación. Se
explicarán principios y reglas básicas de
diseño. Al construir, programar una

Página 540 de 1158

WICC 2014 XVI Workshop de Investigadores en Ciencias de la Computación

Introducción Existen tres puntos de vista

distintos en una GUI: el Modelo del
Usuario, el Modelo del Diseñador y el
Modelo del Programador.[2]
Hasta hace algunos años atrás, la
GUI era considerada parte secundaria al  Modelo del Usuario: el usuario tiene
desarrollar una aplicación. Sólo se ponía su propia visión del sistema y espera
énfasis en lograr que la aplicación contara que se comporte de determinada
con todas las funcionalidades requeridas. manera. El modelo de usuario se puede
La GUI simplemente mostraba las conocer estudiándolo a través de test,
entrevistas, realimentación.
acciones que se podían realizar sin dar
importancia a cómo las veía el usuario.  Modelo del Diseñador: el diseñador es
Con el paso del tiempo, las quién se encarga de unir las ideas,
aplicaciones comenzaron a formar parte necesidades y deseos del usuario, con
de la vida cotidiana. Cada vez más las herramientas que dispone el
usuarios, con o sin conocimientos, programador para desarrollar el
necesitaban interactuar con Interfaces de software. Éste modelo consta de tres
Usuario. Justamente, pensando en los partes: la Presentación que es lo
usuarios inexpertos se comenzó a primero que llama la atención del
desarrollar una Ingeniería de Interfaces. usuario; luego adquiere más
importancia la Interacción que es
La Interfaz de Usuario es la parte donde el usuario constata si el
del software que las personas pueden ver, producto satisface sus expectativas. La
oír, tocar, hablar; es decir, donde se tercera y última parte es la de
pueden entender. La Interfaz de Usuario Relaciones entre objetos aquí es donde
tiene esencialmente dos componentes: la se define la relación entre el modelo
entrada y la salida. La entrada es cómo mental del usuario y los objetos de la
una persona le comunica sus necesidades Interfaz.
o deseos a la computadora. Algunos
componentes de entrada comunes son el  Modelo del Programador: es el modelo
teclado, el ratón, un dedo (para pantallas más fácil de visualizar porque se puede
sensibles al tacto: touch screen), y la voz especificar formalmente. Este modelo
de uno (para las instrucciones habladas). consta de los objetos que manipula el
La salida es la forma en que la programador, distintos a los que
computadora transmite los resultados a lo maneja el usuario (el programador
solicitado por el usuario. Hoy en día el maneja una base de datos, el usuario la
mecanismo de salida de la computadora llama agenda o contactos). El usuario
más común es la pantalla, seguido de no ve los objetos que maneja el
mecanismos que aprovechan las programador. Si bien el programador
capacidades auditivas de una persona: de conoce de plataforma de desarrollo,
voz y sonido. sistema operativo, lenguajes y
herramientas de programación,
En la actualidad la GUI es parte especificaciones; no significa que
fundamental de cualquier aplicación, y tenga la habilidad de proporcionar al
por lo tanto tiene tanta importancia como usuario modelos más adecuados.
el desarrollo de la aplicación en sí.
Los distintos modelos nos
permiten conocer cómo visualizan la GUI

Página 541 de 1158

WICC 2014 XVI Workshop de Investigadores en Ciencias de la Computación

cada uno de los ‘actores’. Cada uno de los usuarios podrán adaptarse
éstos son protagonistas al momento del fácilmente.
diseño. Conocer cada punto de vista 4. Las personas difieren en los gustos de
permite comprender los principios y interacción: algunas prefieren trabajar
reglas. con menús, otras con imágenes, otras
En la siguiente sección se con texto, etc. Hasta hay personas que
detallarán una serie de factores que deben prefieren emitir comandos al sistema.
tenerse en cuenta junto a los principios. Cada uno de éstos factores son la
base de los Principios Generales del
Diseño de GUI; por lo tanto deben ser
Diseño de GUI considerados por el diseñador y
transmitidos al programador.
Tal como se mencionó, el usuario
es un ‘actor’ importante al momento de
diseñar la GUI; por lo tanto antes de Principios del Diseño
tomar decisiones respecto al diseño
también se deben tener en cuenta las
capacidades físicas y mentales del mismo. Existe gran cantidad de
Existen numerosos factores humanos que información y bibliografía [2,3,4,5]
no se deben ignorar, algunos de ellos se respecto al diseño de la GUI. Dada la
explican a continuación [3]: extensión permitida para éste trabajo, se
explicaran de manera resumida los
1. Las personas tienen memoria limitada
principios más relevantes:
a corto plazo: se pueden recordar
alrededor de siete elementos de  Familiaridad del usuario: significa que
información (Miller, 1957). Esto la interfaz debe utilizar términos e
significa que si al usuario se le imágenes conocidos por el usuario; y
presenta demasiada información al los objetos que manipula el sistema
mismo tiempo seguramente no podrá deben estar relacionados con el ámbito
asimilarla. de trabajo.
2. Todas las personas cometen errores, en  Uniformidad de la Interfaz: significa
especial cuando se trata de manejar que tanto comandos como menús
demasiada información o se trabaja deben tener el mismo formato. Las
bajo presión. Cuando la aplicación no Interfaces uniformes reducen el tiempo
responde como se espera, o emiten de aprendizaje.
avisos y/o alarmas con mensajes poco
 Mínima sorpresa: el comportamiento
claros, aumenta el estrés de los
del sistema no debe mostrar
usuarios.
situaciones inesperadas. Ante éste tipo
3. Las personas poseen un amplio rango de situaciones el usuario puede mostrar
de capacidades físicas. Algunas ven, u irritabilidad, por lo tanto perder interés
oyen mejor que otras; algunas son en utilizar la aplicación.
daltónicas; otras no tienen una buena
 Recuperación de estados: éste es uno
motricidad fina. El diseño de la GUI
de los principios más importantes al
no debe contemplar las propias
diseñar una Interfaz. Es inevitable
capacidades y suponer que el resto de
cometer errores, por lo tanto el sistema

Página 542 de 1158

WICC 2014 XVI Workshop de Investigadores en Ciencias de la Computación

le debe proporcionar al usuario la operación, reflejar el estado de los

manera de subsanarlos o volver a objetos.
estados anteriores. Éste principio
 Potenciar la sensación de control del
involucra varias acciones como pedir
usuario sobre el sistema, especialmente
al usuario que confirme acciones
para los usuarios sin experiencia: que
destructivas, que el usuario pueda
la interfaz sea intuitiva (utilizar iconos,
deshacer, etc.
modelos, métodos, etc. consistentes
 Guía de usuarios: la Interfaz debe con otras aplicaciones y con el mundo
proporcionar al usuario asistencia, real), facilitar la exploración (todas las
ayuda. No sólo cuando se cometen operaciones deben ser accesibles desde
errores sino también cuando no se sabe el menú principal), permitir cancelar y
qué hacer o cómo hacer alguna tarea. deshacer operaciones, etc.
Esta ayuda debe estar integrada al
 Minimizar la necesidad de
sistema (algunas además ofrecen
memorización: usar controles gráficos,
ayuda on line) y debe ser clara cuando
limitar la carga de información a corto
el usuario la requiera, sin saturar con
plazo, procurar que la información
información.
necesaria en cada momento esté
 Diversidad de usuarios: se debe tener presente en la pantalla, utilizar
en cuenta los diferentes usuarios que nombres y símbolos auto-explicativos
pueden utilizar la aplicación. Aquellos y fáciles de recordar, etc.
casuales, que necesitan que los guíen,
 Anticipación: la aplicación debe
y aquellos que podrían usarla
anticiparse a las necesidades del
constantemente los cuales necesitarán
usuario, y no esperar a que tenga que
trabajar con métodos abreviados, tan
buscar información.
rápido como sea posible. Además se
podría incluir recursos para mostrar  Percepción de color y tamaño: se debe
diferentes tamaños de texto, tener en cuenta a aquellos usuarios con
reemplazar sonido por texto y al revés, problema de visualización del color,
modificar tamaño de botones, etc. Esto pero es muy útil usar convención de
refleja la noción de Diseño Universal colores. Además al mostrar varios
[6], principio de diseño cuyo objetivo objetos en la pantalla deben estar
es evitar excluir usuarios. distribuidos, debe haber distancia entre
ellos para que así el usuario pueda
 Adoptar el punto de vista del usuario:
percibirlos sin sobrecarga.
se debe ver la interfaz desde fuera y en
relación con las tareas que va a realizar  Legibilidad: no sólo se debe prestar
el usuario. Hay que tener mucho atención a los colores y a los objetos
cuidado en no centrarse en los aspectos que se ven en pantalla sino también a
de implementación que hagan perder la cómo se verá el texto. El tipo y tamaño
perspectiva. de letra debe ser legible, y el color
debe contrastar con el fondo (utilizar
 Realimentación: la interfaz debe dar
letras negras en fondo claro).
inmediatamente alguna respuesta a
cualquier acción del usuario. Por  Valores por defecto: lo ideal es utilizar
ejemplo: movimiento del cursor, ‘valores estándar’. Se debe tener en
resaltar la opción elegida de un menú, cuenta que los valores por defecto
comunicar el éxito o fracaso de una

Página 543 de 1158

WICC 2014 XVI Workshop de Investigadores en Ciencias de la Computación

deben ser opciones inteligentes, Usuario, y uno de los puntos

sensatas y fáciles de modificar. fundamentales es el diseño de la misma.
Es importante conocer y aplicar éstos
 Eficiencia: se debe considerar la
principios del diseño.
productividad como ideal a lograr. El
usuario no debe esperar la respuesta Se propone como futuros trabajos
del sistema por tiempo prolongado; los profundizar la investigación en éste tema.
mensajes de ayuda, menús y etiquetas Mejorar, ampliar los principios aquí
deben ser sencillos y deben utilizar expuestos con la colaboración de los
palabras claves para poder transmitir usuarios.
fácilmente a qué hacen referencia.
Cada uno de estos principios Referencias
ayuda a hacer un buen diseño de la GUI.
Cabe aclarar que éste es un resumen de
los más relevantes, por la extensión de [1]
éste trabajo no se pueden ver [Link]
detalladamente todos los principios
[2,3,4,5].
[2] Gómez, Leopoldo Sebastián M.
Conclusiones y trabajos futuros "Diseño de Interfaces de Usuario
Principios, Prototipos y Heurísticas para
Evaluación."
Al comienzo de éste artículo se
justificó el porqué es necesario un buen
diseño de GUI: una aplicación que cuenta
con una GUI bien diseñada, es más [3] Sommerville, Ian. Ingeniería del
competitiva. Cualquier usuario, en software 7/e. Pearson Educación, 2005.
especial el usuario inexperto, elige
trabajar con aplicaciones con las que
[4] Galitz, Wilbert O. The essential guide
pueda interactuar, las que pueda entender,
to user interface design: an introduction
las que sean agradables a la vista, etc. to GUI design principles and techniques.
El objetivo de éste trabajo es John Wiley & Sons, 2007.
identificar y explicar principios básicos
del diseño para lograr justamente, un
buen diseño. Si bien, por cuestiones de [5]
extensión, no se pueden detallar todos los [Link]/~intgraf/documentos/P
principios; se han explicado los más [Link]
relevantes. Es necesario al momento de
desarrollar una aplicación, tenerlos
presentes. No solo el programador se [6] Preiser, W.F.E. y Ostroff, E. (ed.)
debe enfocar en la funcionalidad del (2001). Universal Design Handbook.
sistema, sino también en cómo se verá el Nueva York: McGraw-Hill.
mismo.
El eje central de la línea de
investigación es la Interfaz Gráfica de

Página 544 de 1158