2.

4 Diseo de interfaz de usuario

Interfaz de Usuario?
El diseo de interfaces de usuario (HCI Human Computer Interfece o IU Interfaz
de Usuario), es una tarea que ha adquirido relevancia en el desarrollo de un
sistema. La calidad de la interfaz de usuario puede ser uno de los motivos que
conduzca a un sistema al xito o al fracaso. Los principios que se presentan son
de utilidad para creacin de interfaces funcionales y de fcil operacin. A pesar de
no ser capaces de resolver todos los aspectos propios del contexto con el que se
est trabajando, pueden ser combinados con la prototipacin y la aplicacin de
heursticas de evaluacin para facilitar el proceso de diseo. La presente unidad
se centra en los componentes de software de las interfaces de usuario. Lo
anteriormente expuesto se complementa con un caso prctico de diseo de
interfaces de usuario.

El diseo del software requiere de precisin y de creatividad, por parte del

diseador.

El Diseo del sistema es el proceso de describir, organizar y estructurar los

componentes del sistema. Tanto a nivel arquitectnico como a nivel detallado, con
la intencin de construir el sistema propuesto.

Desde el punto de vista de la Ingeniera de Software, la interfaz de usuario juega

un papel en extremo importante en el desarrollo y puesta en marcha de todo
sistema

La Interfaz de Usuario, de un programa es un conjunto de elementos hardware y

software de una computadora que presentan informacin al usuario y le permiten
interactuar con la informacin y con el computadora. Tambin se puede considerar
parte de la IU la documentacin (manuales, ayuda, referencia, tutoriales) que
acompaa al hardware y al software.

Si la IU est bien diseada, el usuario encontrar la respuesta que espera a su

accin. Si no es as puede ser frustrante su operacin, ya que el usuario
habitualmente tiende a culparse a s mismo por no saber usar el objeto.

Los programas son usados por usuarios con distintos niveles de conocimientos,
desde principiantes hasta expertos. Es por ello que no existe una interfaz vlida
para todos los usuarios y todas las tareas. Debe permitirse libertad al usuario para
que elija el modo de interaccin que ms se adece a sus objetivos en cada
momento. La mayora de los programas y sistemas operativos ofrecen varias
formas de interaccin al usuario.
Existen tres puntos de vista distintos en una IU: el del usuario, el del programador
y el del diseador (analoga de la construccin de una casa). Cada uno tiene un
modelo mental propio de la interfaz, que contiene los conceptos y expectativas
acerca de la misma, desarrollados a travs de su experiencia.

El modelo permite explicar o predecir comportamientos del sistema y tomar las

decisiones adecuadas para modificar el mismo. Los modelos subyacen en la
interaccin con las computadoras, de ah su importancia.

Modelo del usuario: El usuario tiene su visin personal del sistema, y espera que
ste se comporte de una cierta forma. Se puede conocer el modelo del usuario
estudindolo, ya sea realizando tests de usabilidad, entrevistas, o a travs de una
realimentacin. Una interfaz debe facilitar el proceso de crear un modelo mental
efectivo.

Para ello son de gran utilidad las metforas, que asocian un dominio nuevo a uno
ya conocido por el usuario. Un ejemplo tpico es la metfora del escritorio, comn
a la mayora de las interfaces grficas actuales.

Modelo del diseador: El diseador mezcla las necesidades, ideas, deseos del
usuario y los materiales de que dispone el programador para disear un producto
de software. Es un intermediario entre ambos.

El modelo del diseador describe los objetos que utiliza el usuario, su

presentacin al mismo y las tcnicas de interaccin para su manipulacin. Consta
de tres partes: presentacin, interaccin y relaciones entre los objetos.

La presentacin es lo que primero capta la atencin del usuario, pero ms tarde

pasa a un segundo plano, y adquiere ms importancia la interaccin con el
producto para poder satisfacer sus expectativas. La presentacin no es lo ms
relevante y un abuso en la misma (por ejemplo, en el color) puede ser
contraproducente, distrayendo al usuario.

La segunda parte del modelo define las tcnicas de interaccin del usuario, a
travs de diversos dispositivos.

La tercera es la ms importante, y es donde el diseador determina la metfora

adecuada que encaja con el modelo mental del usuario. El modelo debe comenzar
por esta parte e ir hacia arriba. Una vez definida la metfora y los objetos del
interfaz, los aspectos visuales saldrn de una manera lgica y fcil.

Estos modelos deben estar claros para los participantes en el desarrollo de un

producto, de forma que se consiga una interfaz atractiva y a la vez efectiva para el
trabajo con el programa.
Una interfaz no es simplemente una cara bonita; esto puede impresionar a primera
vista pero decepcionar a la larga. Lo importante es que el programa se adapte
bien al modelo del usuario, cosa que se puede comprobar utilizando el programa
ms all de la primera impresin.

Modelo del programador: Es el ms fcil de visualizar, al poderse especificar

formalmente. Est constituido por los objetos que manipula el programador,
distintos de los que trata el usuario (ejemplo: el programador llama base de datos
a lo que el usuario podra llamar agenda). Estos objetos deben esconderse del
usuario.

Los conocimientos del programador incluyen la plataforma de desarrollo, el

sistema operativo, las herramientas de desarrollo y especificaciones. Sin embargo,
esto no significa necesariamente que tenga la habilidad de proporcionar al usuario
los modelos y metforas ms adecuadas. Muchos no consideran el modelo del
usuario del programa, y s sus propias expectativas acerca de cmo trabajar con la
computadora.

"Es la carta de presentacin del sistema y en ocasiones resulta determinante

para la aceptacin o rechazo de todo un proyecto".

En promedio, se estima que del 35% al 45% de los gastos destinados a un

proyecto son direccionados al diseo e implementacin de la interfaz.

La interfaz de usuario es el medio con que el usuario puede comunicarse con

una mquina, un equipo o una computadora, y comprende todos los puntos de
contacto entre el usuario y el equipo

Involucra cualquier medio de interaccin usuario computador: Todas las pantallas,

mens, iconos, atajos de teclado, lenguajes de comando y ayuda en lnea, as
como los dispositivos fsicos tales como botones, diales, palancas, ratones,
teclados, pantallas tctiles, controles remotos, joysticks, game pads, guantes de
datos, etctera.

En algunos casos, la interfaz de usuario puede ser un instrumento muy

poderoso para ayudar en la captura y especificacin de requerimientos

Es muy sencillo disear algunas pantallas, enserselas al usuario para que las
evale y de esta manera aclarar dudas o confusiones en los requerimientos.

Desde este punto de vista, es posible apoyarse en el desarrollo de prototipos

de IU para resolver problemas de requerimientos e inclusive especificar parte
del sistema
La idea fundamental en el concepto de interfaz es el de mediacin, entre
hombre y mquina. La interfaz es la "media", lo que facilita la comunicacin, la
interaccin, entre dos sistemas de diferente naturaleza, tpicamente el ser
humano y una mquina como el computador.

Esto implica, adems, que se trata de un sistema de traduccin, ya que los dos
"hablan" lenguajes diferentes: verbo-icnico en el caso del hombre y binario en el
caso del procesador electrnico.

El diseo de la interfaz de usuario es el proceso de determinar los distintos

componentes, tanto de hardware como de software, sus caractersticas y su
disposicin, que se utilizarn para interactuar con una serie de usuarios
determinados en un medio ambiente determinado

Hoy en da estamos rodeados de interfaces grficas. Un cajero automtico, un

celular, un sitio web, un programa informtico.

En internet, la interfaz grfica no es slo el sitio web y su diseo que se ve en la

pantalla, la experiencia con su producto comienza desde el momento en que sus
clientes teclean su sitio web o le buscan en Google.

La UI puede ser grfica, en forma de texto, audiovisual, dependiendo del hardware

subyacente y su combinacin con el software. La UI puede ser un hardware, un
software o una combinacin de ambos.

El software suele ser ms popular cuando su UI es:

Atractiva

Fcil de usar

De respuesta rpida

Clara de comprender

Coherente en toda la pantalla de interfaz

La UI se divide en dos categoras:

Interfaz de lnea de comandos

Interfaz grfica de usuario (GUI)

Interfaz de lnea de comandos(CLI en sus siglas inglesas)

La interfaz de lnea de comandos, traduccin del ingls command-line interface la
cual es, en realidad, una transcripcin incorrecta de Interfaz de lnea de rdenes,
por el falso amigo command (orden/instruccin), ha sido una gran herramienta de
interaccin con ordenadores haste que llegaron los reproductores de video. La CLI
es la primera opcin de muchos usuarios tcnicos y programadores. La CLI es la
interfaz mnima que un software puede ofrecer a sus usuarios.

La CLI ofrece un smbolo del sistema, el lugar donde el usuario escribe el

comando y alimenta al sistema. El usuario debe recordar la sintaxis del comando y
tambin su uso. Hace un tiempo las CLI no estaban programadas para tratar los
errores del usuario de forma eficiente.

Un comando es una referencia de instrucciones en modo texto, las cuales sern

ejecutadas por el sistema. Existen modos como macros macro (del griego ,
makro, que significa grande, es una abreviatura de macroinstruccin), scripts
(tambin llamado archivo de rdenes, archivo de procesamiento por lotes o guion),
que facilitan al usuario operar con el software.

La CLI usa menos cantidad de recursos informticos en comparacin con la GUI.

Elementos de la CLI

Command Line Interface (CLI)

Una CLI en forma de texto puede tener los elementos que se exponen a
continuacin:

Smbolo de sistema - Es un notificador en texto que mayormente muestra el

contexto en el que el usuario trabaja. Es generado por el sistema de software.

Cursor - Es una lnea horizontal o una barra vertical de la longitud de la lnea, para
representar la posicin del carcter mientras se escribe. El cursor se encuentra
por lo general en un estado de parpadeo. Se mueve a medida que el usuario
escribe o elimina algo.

Comando(o Orden) - Un comando es una instruccin ejecutable. Puede tener uno

o ms parmetros. El resultado de la ejecucin del comando se muestra alineado
en la pantalla. Cuando se produce una salida, el smbolo de sistema se muestra
en la siguiente lnea.

Interfaz grfica de usuario

La Interfaz grfica de usuario est diseada para interactuar con el sistema. La

GUI puede ser una combinacin de hardware y software. Usando una GUI, el
usuario puede interpretar el software.
Por lo general, la GUI consume ms recursos que la CLI. Con tecnologa
avanzada, los programadores y diseadores diseos complejos de GUI que
funcionan con ms eficiencia, velocidad y precisin.

Elementos de la GUI

La GUI ofrece un conjunto de componentes para interactuar con el software o con

el hardware.

Cada componente grfico ofrece una modo de trabajo con el sistema. Un sistema
de GUI tiene algunos de los elementos mencionados a continuacin:

Graphical User Interface

Ventana - Zona donde se muestran los contenidos de las aplicaciones. Los

contenidos de una ventana se pueden mostrar en forma de iconos o de listas, si la
ventana representa la estructura del archivo. Navegar es ms fcil para el usuario
en el sistema de archivos en una ventana de exploracin. La ventanas se pueden
minimizar, minimizar su tamao, o maximizar a la medida de la pantalla. Se
pueden mover a cualquier lugar de la pantalla. Una ventana puede contener otra
ventana de la misma aplicacin, llamada ventana hija.

Pestaas - Si una aplicacin permite ejecutar ms de una instancia de ella misma,

aparecen en la pantalla en una ventana separada. Navegacin por pestaas Ha
aparecido para abrir ms de un documento en la misma ventana. Esta interfaz
tambin contribuye en la visin del panel de preferencia en la aplicacin. Todos los
exploradores web modernos usan esta caracterstica.

Men - El Men es un despliegue de comandos estndars, agrupados juntos y

colocados en un lugar visible (normalmente en la parte superior) dentro de la
ventana de la aplicacin. El men se puede programar para aparecer o mostrarse
escondido usando los botones del ratn.

Icono - Un icono es una pequea imagen que representa una aplicacin asociada.
Cuando se aprietan estos iconos o con uno o con doble click, la ventana de
aplicacin se abre. Los iconos muestran aplicaciones y programas instalados en
un sistema en forma de pequeas imgenes.

Cursor - Usando dispositivos como el ratn, touch pad (panel tctil), el lpiz digital
son representados en GUI como cursores. En la pantalla el cursor sigue las
instrucciones del hardware casi en tiempo real. Los cursores son tambin
llamados puntero en sistemas de GUI. Se usan para seleccionar mens, ventanas,
y otras caractersticas de la aplicacin.
Componentes GUI para aplicaciones especficas

La GUI de una aplicacin contiene uno o ms elementos que se enumeran a

continuacin:

Ventana de la aplicacin - La mayora de ventanas de la aplicacin usan los

algoritmos de sistemas operadores pero algunas usan su propia creacin de
ventana de usuario para almacenar los contenidos de la aplicacin.

Cuadro de dilogo - Es una ventana hija que contiene un mensaje de peticin para
el usuario para que lleve a cabo una accin determinada. Por ejemplo: Una
aplicacin genera un dilogo para tener confirmacin del usuario para eliminar un
archivo.

caja de dilogo

Caja de texto - Ofrece una zona para que el usuario escriba o para que introduzca
datos en texto.

Botones - Imitan botones de la vida real y se usan para enviar entradas al

software.

Radio-botn

botn de Radio - Muestra opciones de seleccin disponibles. Slo se puede

seleccionar una de entre todas las que se ofrecen.

Casilla de verificacin - Las funciones son similares a las del Cuadro de lista.
Cuando se selecciona una opcin, la casilla aparece como marcada. Se pueden
seleccionar mltiples opciones representadas por casillas de verificacin.

Cuadro de lista - Aporta una lista de los tems disponibles para la seleccin. Se
puede seleccionar ms de un tem.

Lista de caja

Otros componentes soprprendentes de la GUI son:

Sliders

Combo-box (casilla combinada)

Data-grid (Cuadrcula de datos)

Drop-down list (Lista desplegable)

Algunos afirman que el xito comercial del iPod se ha debido en buena medida a
un excelente diseo (y evolucin) de su Interfaz de usuario...

4 factores humanos fundamentales

Memoria a corto plazo limitada: Las personas recuerdan usualmente a corto
plazo 7 elementos de informacin. Si es necesario que memoricen ms,
entonces se vuelven ms propensas a cometer errores.

Las personas se equivocan: Esto es un hecho.

Una respuesta adecuada (alarmas, confirmaciones, colores, etctera) puede

hacer la diferencia entre una buena o una mala interfaz de usuario

Recordar que un error mal manejado puede llevar a otro error... y este puede
llevar a otro y a otro, y as hasta llegar a un error catastrfico.

Las personas son diferentes: No todas las personas tienen las mismas
capacidades o usaran el sistema de la misma forma.

Las personas tienen preferencias diferentes: Algunas personas preferirn

utilizar interfaces grficas, otras usarn interfaces de lnea de comandos,
etctera.

Factores ambientales o del entorno?

Familiaridad: La interfaz debe usar trminos y conceptos familiares al

usuario y al dominio de la aplicacin

Gua de Usuario: Retroalimentacin significativa y coherente al ocurrir errores y

caractersticas de ayuda sensibles al contexto

Mnima Sorpresa: El comportamiento del sistema no debe provocar sorpresa al

usuario. El sistema debera comportarse de la forma ms predecible posible

Diversidad de Usuarios: La interfaz debe estar orientada a todos los tipos de

usuarios del sistema (Novatos, expertos, daltnicos, discapacitados, etctera)

Recuperabilidad: La interfaz debe permitir al usuario recuperarse de errores, o al

menos, ayudarle a evitarlos
Uniformidad: La interfaz debe ser uniforme, operaciones comparables
Consistencia.
deben funcionar de la misma manera
Para lograr una mayor consistencia en la IU se requiere profundizar en diferentes
aspectos que estn catalogados en niveles. Se realiza un ordenamiento de mayor
a menor consistencia:

I.- Interpretacin del comportamiento del usuario: la IU debe comprender el

significado que le atribuye un usuario a cada requerimiento. Ejemplo: mantener el
significado de las los comandos abreviados (shortcut-keys) definidos por el
usuario.

II.- Estructuras invisibles: se requiere una definicin clara de las mismas, ya

que sino el usuario nunca podra llegar a descubrir su uso. Ejemplo: la ampliacin
de ventanas mediante la extensin de sus bordes.

III.- Pequeas estructuras visibles: se puede establecer un conjunto de

objetos visibles capaces de ser controlados por el usuario, que permitan ahorrar
tiempo en la ejecucin de tareas especficas. Ejemplo: cono y/o botn para
impresin.

IV.- Una sola aplicacin o servicio: la IU permite visualizar a la aplicacin o

servicio utilizado como un componente nico. Ejemplo: La IU despliega un nico
men, pudiendo adems acceder al mismo mediante comandos abreviados.

V.- Un conjunto de aplicaciones o servicios: la IU visualiza a la aplicacin o

servicio utilizado como un conjunto de componentes. Ejemplo: La IU se presenta
como un conjunto de barras de comandos desplegadas en diferentes lugares de la
pantalla, pudiendo ser desactivadas en forma independiente.

VI.- Consistencia del ambiente: la IU se mantiene en concordancia con el

ambiente de trabajo. Ejemplo: La IU utiliza objetos de control como menes,
botones de comandos de manera anloga a otras IU que se usen en el ambiente
de trabajo.

VII.- Consistencia de la plataforma: La IU es concordante con la plataforma.

Ejemplo: La IU tiene un esquema basado en ventanas, el cual es acorde al manejo
del sistema operativo Windows.

Interaccin de usuarios
Manipulacin Directa: El usuario interacta directamente con los objetos en la
pantalla

Seleccin de Mens: El usuario selecciona un comando de una lista de

posibilidades (men).
Rellenado de Formularios: El usuario rellena campos de un formulario (Similar a
cuando se rellena una planilla en papel)

Procesos de Diseo de UI
Diseo visual

La intencin del Diseo Visual no es que las aplicaciones se vean bonitas. Un

buen Diseo Visual est centrado en la comunicacin.

La informacin visual es, especficamente, un complemento del diseo estructural

de una aplicacin.

Reglas de oro para una interfaz de usuario

Las siguientes reglas se consideran reglas de oro para el diseo de una GUI.
Fueron descritas por Shneiderman y Plaisant en su libro ('Designing the User
Interface', en espaol 'Diseando interfaces e usuario').

Esfuerzo de coherencia - Las secuencias coherentes de acciones son requeridas

en situaciones similares. Se debe usar terminologa idntica en mens, prompts, y
pantallas de ayuda. Los comandos coherentes deben ser empleados en de punta
a cabo.

Posibilitar el uso de atajos a usuarios frecuentes - El deseo del usuario por reducir
el nmero de interacciones se incrementa con la frecuancia de uso. Las
abreviaciones, funciones clave, comandos escondidos, y facilidades macro son
muy tiles para un usuario experto.

Ofrecer retroalimientacin informativa - Para cada accin del operador, debe haber
alguna retroalimentacin de sistema. Para acciones menors y frecuentes, la
respuesta debe ser modesta, mientras que para acciones no frecuentes y
mayores, la respuesta debe ser ms substancial.

Disear dilogo para permitir el cierre - Las secuencias de acciones se deben

organizar en grupos con un inicio, ncleo, y final. La retroalimentacin informativa
cuando se completa un grupo de acciones da a los operadores una gran
satisfaccin de logro, un sentimiento de alivio, la seal de abandonar planes y
opciones de contingencia de sus mentes, y esto indica que el camino a seguir es
claro y se pueden preparar para el siguiente grupo de acciones.

Ofrecer tratamientos de error simples - Disee tanto como sea posible el sistema
para que el usuario no haga errores graves. Si se comete un error, el sistema
debe poder detectarlo y ofrecer mecanismos simples y comprensibles para tratar
el error.

Permitir dehacer acciones facilmente - Esta caracterstica reduce la ansiedad, ya

que el usuario sabe que los errores se pueden deshacer. Esto motiva la
exploracin de opciones nuevas y no familiares. La unidades de reversibilidad
pueden ser una sola accin, una entrada de datos, o un grupo de acciones.

Permitir la ubicacin interna de control - Los operadores con experiencia desean

de todo corazn poder sentir que tienen el control del sistema y que el sistema
responde a sus acciones. Disee el sistema de modo que los usuarios puedan
iniciar acciones en vez de ser los que responden.

Reducir la carga de memoria a corto plazo - La limitacin humana para procesar

informacin con una memoria a corto plazo hace necesario mantener la pantalla
de forma simple, as como mostrar las pginas de forma coherente, reducir la
frecuencia de 'window-motion' y asignar un tiempo de formacin suficiente para los
cdigos, mnemnicos, y las secuencias de acciones.

Percepcin del Color

Aunque se utilicen convenciones de color en la IU, se deberan usar otros
mecanismos secundarios para proveer la informacin a aquellos usuarios con
problemas en la visualizacin de colores

Aplique un conjunto limitado de colores:

Los colores apagados, sutiles y complementarios suelen ser los ms apropiados
en el diseo de interfaces en aplicaciones de corte empresarial y acadmicas
(andragoga).

Los colores primarios, clidos sin tender a carnavalizar la interfaz se

recomiendan generalmente en caso de que la audiencia sean nios.

En general debe disearse la interfaz en funcin de los intereses de la audiencia:

edad, cultura, conocimientos y conductas previas, etctera

Se estima que un 11% de la poblacin mundial tiene algn desorden de ceguera

nocturna, o baja visin nocturna, daltonismo, deuteranopia, protanopia, tritanopia,
etctera...

Los usuarios con desordenes visuales (ceguera nocturna, o baja visin nocturna,
daltonismo, deuteranopia, protanopia, tritanopia) requieren alternativas para la
asignacin de colores por defecto de una aplicacin
Una buena Interfaz de Usuario se anticipa a estas necesidades, proporcionando
una opcin para la personalizacin de las preferencias del color.

Aun mejor si la aplicacin ya est configurada con una cuidadosa seleccin de

color y contraste por defecto.

El color debe ser considerado como una herramienta adicional en el diseo,

no una necesidad bsica

No dependa de colores para mostrar informacin importante, recuerde que si los

colores no son correctamente percibidos (en casos de que el usuario tenga
sistemas de poca resolucin o posea algn impedimento visual leve), su
aplicacin debe continuar siendo usable