CAPTULO 11 DISEO DE LA INTERFAZ DE USUARIO

11.1 Las reglas doradas 266

Si deseas crear interfaces memorables y libres de frustraciones para los
usuarios, te recomendamos seguir las 8 reglas de oro de Ben Shneidermans.
El es cientfico y profesor de Interacciones entre humanos y computadoras en
la Universidad de Meryland y sus reglas han sido aplicadas por grandes
compaas como Apple, Google y Microsoft. En realidad, estas reglas doradas
constituyen la base de un conjunto de principios de diseo de la interfaz de
usuario que guan este aspecto tan importante del diseo del software.
1. Consistencia
2. Atajos. Permite que los usuarios frecuentes usen atajos
3. Retroalimentacin informativa
4. Dilogo. Disear textos de dilogo para cerrar procesos
5. Manejo de errores. Ofrece una forma sencilla de corregir errores
6. Permite la facilidad de regresar sobre sus propios pasos
7. Fomenta la sensacin de control
8. Reduce la carga de memoria a corto plazo
11.1.1 Dejar el control al usuario 266
Durante una sesin para recabar los requerimientos d un nuevo y gran sistema de
informacin se pregunt a una usuaria clave acerca de los atributos de la interfaz grfica
basada en ventanas. La mayor parte de limitaciones y restricciones que impone un
diseador pretende simplificar el modo de interaccin. Definir modos de interaccin de
manera que no se obligue al usuario a realizar acciones innecesarias uno deseadas Un
modo de interaccin es el estado actual de la interfaz por ejemplo si en el men de un
procesador de texto se selecciona revisar ortografa el software pasa al modo de revisin
de la ortografa. No hay razn para obligar al usuario a permanecer en este modo si
acaso desea hacer una pequea edicin del texto el usuario debe poder entrar y salir
del modo con poco o ningn esfuerzo. Dar una interaccin flexible. Debido a q diferentes
usuarios tienen distintas preferencias para la interaccin debe darse la posibilidad de
elegir. Por ejemplo el software debe de permitir q el usuario interacte por medio d
comandos introducidos con el teclado el ratn una pluma digitalizadora una pantalla
sensible al tacto o un mecanismo d reconocimiento d voz. Permitir q la interaccin del
usuario sea interrumpible y tambin reversible El usuario debe poder suspender la
secuencia d su trabajo (aun cuando consista en una secuencia de acciones) para hacer
otra cosa (sin perder el trabajo realizado hasta ese momento) tambin debe poder
"deshacer" cualquier accin.

11.1.2 Reducir la necesidad de que el usuario memorice 267

Entre ms cosas tenga que recordar el usuario, ms fcil ser que cometa
errores.
Es por esto que una interfaz de usuario bien diseada no sobrecarga la memoria
del usuario.
Siempre que sea posible, el sistema debe recordar la informacin pertinente y
ayudar al usuario con un escenario de interaccin que lo ayude a recordar.
Reducir la demanda de memoria de corto plazo. Cuando los usuarios se
involucran en tareas complejas, la demanda de memoria de corto plazo es
significativa.
Hacer que lo preestablecido sea significativo. Lo que al principio se d por
preestablecido debe tener sentido para el usuario promedio, pero ste debera
poder especificar sus preferencias individuales
Definir atajos que sean intuitivos. Cuando se utilice nemotecnia para ejecutar
una funcin del sistema (como la secuencia Ctrl-B para invocar la funcin de
buscar), debe estar ligada con la accin, de modo que sea fcil de recordar.
La distribucin visual de la interfaz debe basarse en una metfora del
mundo real. Por ejemplo, un sistema de pagos debe usar una metfora de
chequera y talonario que gue al usuario a travs del proceso de pago.
Revelar informacin de manera progresiva. La interfaz debe estar organizada
de manera jerrquica. Es decir, la informacin acerca de una tarea, objeto o
comportamiento debe presentarse primero en un nivel de generalizacin
elevado. Despus de que con el ratn el usuario manifieste inters, deben darse
ms detalles.
11.1.3 Hacer consistente la interfaz 268
Toda la informacin debe organizarse de acuerdo con reglas de diseo que se
respeten en todas las pantallas desplegadas.
Los mecanismos de entrada se limitan a un conjunto pequeo usado en forma
consistente en toda la aplicacin.
Los mecanismos para pasar de una tarea a otra se definen e implementan de
modo consistente.
Permita que el usuario coloque la tarea en curso en un contexto significativo.
Muchas interfaces implementan capas complejas de interacciones con decenas
de imgenes en la pantalla. Es importante dar indicadores (ttulos en las
ventanas, iconos grficos, cdigo de colores consistente, etc...
Mantener la consistencia en toda la familia de aplicaciones. Todas las
aplicaciones (o productos) que hay en un grupo deben implementar las mismas
reglas de diseo a fin de que se mantenga la consistencia en toda la interaccin.
11.2 Anlisis y diseo de la interfaz de usuario 269
Comienza con la creacin de diferentes modelos del funcionamiento del sistema
(segn se percibe desde fuera).
Se empieza delineando las tareas que se requieren a fin de obtener el
funcionamiento del sistema, para luego considerar los aspectos que se aplican
a todos los diseos de interfaz.
Se emplean herramientas para hacer prototipos e implementar el modelo del
diseo, y los usuarios finales evalan la calidad.
11.2.1 Anlisis y modelos del diseo de la interfaz 269
El modelo final de la interfaz de usuario se ve influenciado por 4 modelos (que
pueden ser diferentes) que son resultado de distintas perspectivas. El ingeniero
humano establece un modelo del usuario, el ingeniero del software crea un
modelo del diseo, el usuario final desarrolla una imgen mental (modelo mental
del usuario o percepcin del sistema) y quienes implementan el sistema crean
un modelo de la implementacin. Entonces entra en juego el papel del diseador
de la interfaz, quien debe reconciliar estas diferencias y derivar en una
representacin consistente de la interfaz.
El modelo de usuario establece el perfil de los usuarios finales del sistema. Es
decir que todo diseo debe empezar por la comprensin de quines son los
usuarios de destino.
El modelo mental del usuario (percepcin del sistema) es la imagen del sistema
que los usuarios llevan en la mente.
El modelo de implementacin combina la apariencia de la interfaz con toda la
informacin de ayuda (libros, manuales, etc.) que describe la sintaxis y
semntica del sistema.
Cuando coincide el modelo de implementacin con el modelo mental de usuario,
los usuarios se sienten a gusto con el software y lo usan con efectividad. Para
ello el modelo de diseo debi desarrollarse para incluir la informacin del
modelo del usuario, y el modelo de implementacin debe reflejar con exactitud
la informacin sintctica de la interfaz.
11.2.2 El proceso 271
El proceso de anlisis y diseo de las interfaces de usuario es iterativo y se
representa con un modelo en espiral como describe la figura siguiente.

De la figura se observa que el proceso abarca cuatro actividades distintas de

marco de trabajo:
1. Anlisis y modelado de usuarios, tareas y entornos.
2. Diseo de la interfaz.
3. Construccin (implementacin) de la interfaz.
4. Validacin de la interfaz.
11.3 Anlisis de la interfaz 272
El anlisis de la interfaz se concentra en el perfil de los usuarios que tendrn
contacto con el sistema. Registrndose as el grado de habilidad, comprensin
del trabajo y la disposicin frente al nuevo sistema.

Luego se identifican, describen y elaboran las tareas que el usuario realiza para
cumplir los objetivos del sistema. La informacin reunida como resultado del
anlisis se utiliza para crear un modelo para la interfaz, que se tomar como
base para iniciar la actividad de diseo. El objetivo del diseo de la interfaz es
definir un conjunto de objetos y acciones que permitan que el usuario realice
todas las tereas definidas, de manera tal que cumplan con todos los objetivos de
facilidad de uso que presenta el sistema (S.Pressman, 2010)
11.3.1 Anlisis del usuario 272
Un aspecto clave de todos los modelos del proceso de la ingeniera de software
es ste: entender el problema antes de tratar de disear una solucin. En el
caso del diseo de la interfaz de usuario, entender el problema significa
comprender:
1. A las personas (usuarios finales) que interactuarn con el sistema a
travs de la interfaz.
2. Las tareas que los usuarios finales deban realizar como parte de su
trabajo.
 3. El contenido que se presenta como parte de la interfaz y el ambiente en
el que se efectuarn estas tareas.
11.3.2 Anlisis y modelado de la tarea 273
La meta del anlisis de la tarea es responder las siguientes preguntas:
Qu trabajo realizar el usuario en circunstancias especficas?
Qu tareas y sub tareas se efectuarn cuando el usuario haga su trabajo?
Qu dominio de problema especfico manipular el usuario al realizar su labor?
Cul es la secuencia de las tareas (el flujo del trabajo)?
Cul es la jerarqua de las tareas?
Casos de uso. En captulos anteriores se aprendi que el caso de uso describe
la manera en la que un actor (en el contexto del diseo de la interfaz de usuario,
un actor siempre es una persona) interacta con el sistema. Cuando se utiliza
como parte del anlisis de la tarea, el caso de uso se desarrolla con objeto de
mostrar la forma en la que un usuario final lleva a cabo alguna tarea especfica
relacionada con el trabajo. En la mayora de las veces, el caso de uso se escribe
en un estilo informal (un simple prrafo) en primera persona.
Elaboracin de la tarea. En el captulo 8 se vio la elaboracin paso a paso
(tambin llamada descomposicin de funciones o refinamiento stepwise o por
etapas) como un mecanismo para mejorar las tareas del procesamiento
requeridas para que el software realice alguna funcin deseada. El anlisis de la
tarea para el diseo de la interfaz utiliza un enfoque de elaboracin para ayudar
a entender las actividades humanas que la interfaz de usuario debe incluir.
Elaboracin del objeto. En vez de centrarse en las tareas que debe realizar un
usuario, puede examinarse el caso de uso y la dems informacin obtenida del
usuario para extraer los objetos fsicos que usa el diseador de interiores. Estos
objetos se dividen en clases: se definen los atributos de las clases, y la
evaluacin de las acciones aplicadas a cada objeto proporciona una lista de
operaciones. Por ejemplo, la plantilla de muebles se traduce en una clase
llamada (Pressman, 2010)
11.3.3 Anlisis del contenido de la pantalla 277
Para las aplicaciones modernas, el contenido de la pantalla vara de reportes
basados en caracteres (como una hoja de clculo), grficas (histograma, modelo
tridimensional, fotografa de alguien) o informacin especializada (por ejemplo,
archivos de audio o video).
Se asignan diferentes tipos de datos a sitios consistentes en la geografa
de la pantalla (por ejemplo, las fotografas aparecen siempre en la esquina
superior derecha)?
El usuario puede personalizar la ubicacin del contenido en la pantalla?
 Se asigna una identificacin apropiada a todo el contenido que hay en la
pantalla?
Si se presenta un reporte grande, cmo debe dividirse para facilitar su
comprensin?
Se dispondr de mecanismos para pasar directamente a informacin
resumida de grandes conjuntos de datos?
Las salidas grficas estarn a escala para que se ajusten a los bordes
del dispositivo de pantalla que se utilice?
11.3.4 Anlisis del ambiente de trabajo 278
Las personas no realizan aisladas su trabajo. Estn influidas por la actividad que
las rodea, las caractersticas fsicas del sitio de trabajo, el tipo de equipo que
usan y las relaciones laborales que tienen con las dems personas. Si los
productos que usted disea no se ajustan al ambiente, su uso ser difcil o
frustrante.
En ciertas aplicaciones se coloca la interfaz de usuario de un sistema basado en
computadora en una ubicacin amigable (con iluminacin adecuada, buena
altura de la pantalla, acceso fcil al teclado, etc.). (Arcos, 2011)
11.4 Etapas del diseo de la interfaz 278
Una vez concluido el anlisis de la interfaz, todas las tareas (u objetos y
acciones) requeridas por el usuario final habrn sido identificadas en detalle y
comenzar la actividad de diseo de la interfaz. El diseo de la interfaz, como
todo el de la ingeniera de software, es un proceso iterativo.

1. Definir objetos y acciones de la interfaz (operaciones) con el uso de la

informacin desarrollada en el anlisis de la interfaz.
2. Definir eventos (acciones del usuario) que harn que cambie el estado de
la interfaz de usuario. Hay que modelar este comportamiento.
3. Ilustrar cada estado de la interfaz como lo vera en la realidad el usuario
final.
4. Indicar cmo interpreta el usuario el estado del sistema a partir de la
informacin provista a travs de la interfaz.

11.4.1 Aplicacin de las etapas de diseo de la interfaz 279

Una etapa importante del diseo de la interfaz es la definicin de objetos de la
interfaz y de las acciones que se aplican a ellos. Es decir, se escribe un caso de
uso. Se aslan los sustantivos (objetos) y verbos (acciones) a fin de crear una
lista de objetos y acciones.

Caso de uso preliminar: Quiero tener acceso a mi sistema de Casa Segura a

travs de internet, desde cualquier lugar remoto. Con el uso de un software de
navegacin que opere en mi computadora porttil (cuando estoy en el trabajo o
de viaje), determino el estado del sistema de alarma, activo o desactivo el
sistema, vuelvo a configurar zonas de seguridad y veo diferentes habitaciones
de la casa por medio de las cmaras de video instaladas.

Con base en este caso de uso, se identifican las siguientes tareas del propietario,
objetos y datos:

acceder al sistema Casa Segura

introducir una identificacin y clave que permitan el acceso remoto
comprobar el estado del sistema
activar o desactivar el sistema Casa Segura
mostrar el plano y las ubicaciones de los sensores
mostrar las zonas del plano
cambiar las zonas en el plano
11.4.2 Patrones de diseo de la interfaz de usuario 280
Las interfaces de usuario grficas se han vuelto tan comunes que ha surgido una
amplia variedad de patrones de diseo de ellas.

Un patrn de diseo es una abstraccin que prescribe una solucin de diseo

para un problema de diseo bien delimitado.
11.4.3 Aspectos del diseo 281
A medida que evoluciona una interfaz de usuario, casi siempre surgen cuatro
aspectos comunes del diseo: tiempo de respuesta del sistema, herramientas de
ayuda para el usuario, manejo de informacin errnea y leyendas de los
comandos. Desafortunadamente, son muchos los diseadores que no enfrentan
estos aspectos hasta que es relativamente tarde en el proceso de diseo (a
veces sucede que la primera sospecha de que existe un problema no ocurre
hasta que ya existe un prototipo operativo).

Tiempo de respuesta. El tiempo de respuesta del sistema es la queja principal

en muchas aplicaciones interactivas. En general, se mide desde el momento en
el que el usuario ejecuta alguna accin de control (por ejemplo, oprime la tecla
de enter o hace clic en el ratn) y hasta que el software responde con la salida
o accin deseada.

Herramientas de ayuda. Casi siempre, todo usuario de un sistema interactivo

basado en computadora requiere ayuda ocasional. En ciertos casos, una simple
pregunta dirigida a un colega conocedor lo resuelve. En otros, la nica opcin es
la bsqueda detallada en muchos manuales del usuario.

Manejo de errores. Los mensajes de error y las advertencias son malas

noticias que llegan a los usuarios desde sistemas interactivos cuando algo sale
mal. En el peor de los casos, los mensajes de error y advertencias dan
informacin intil o equvoca y slo sirven para aumentar la frustracin del
usuario. Son pocos los usuarios de computadoras que no se han encontrado con
un error del tipo siguiente:

Accesibilidad de la aplicacin. Conforme las aplicaciones de la computacin

se hacen ubicuas, los ingenieros de software deben asegurarse de que el diseo
de la interfaz incluya mecanismos que permitan el acceso fcil de las personas
con necesidades especiales. La accesibilidad para los usuarios (e ingenieros de
software) que tengan discapacidades fsicas es un imperativo por razones ticas,
legales y comerciales.

Internacionalizacin. Los ingenieros de software y sus gerentes

invariablemente subestiman el esfuerzo y aptitudes que se requieren para crear
interfaces de usuario que incluyan las necesidades de lugares e idiomas
diferentes. Con demasiada frecuencia, las interfaces se disean para una
localidad y lenguaje y despus se adaptan para funcionar en otros pases

11.5 Diseo de una interfaz para webapps 284

Toda interfaz de usuario diseada para una web App, aplicacin de software
tradicional, producto de consumo o dispositivo industrial debe tener las
caractersticas de usabilidad que se estudiaron en este captulo.

Dnde estoy? La interfaz debe: 1) dar una indicacin de la web App a la que se
ha accedido y 2) informar al usuario de su localizacin en la jerarqua del
contenido.

Qu puedo hacer ahora? La interfaz siempre debe ayudar al usuario a entender

sus opciones actuales: cules funciones estn disponibles, qu vnculos estn
vivos, qu contenido es relevante, etctera.

Dnde he estado, hacia dnde voy? La interfaz debe facilitar la navegacin.

Para ello, debe disponer un mapa (implementado en forma tal que sea fcil de
entender) que indique.

11.5.1 Principios y lineamientos del diseo de la interfaz 285

La interfaz de usuario de una web App es la primera impresin que se recibe.
Sin importar el valor de su contenido, ni la sofisticacin de sus capacidades y
servicios de procesamiento, as como el beneficio general de la web App en s,
una interfaz mal diseada decepcionar al usuario potencial y en realidad har
que ste vaya a cualquier otro sitio. Debido al enorme volumen de webapps
competidoras en virtualmente toda rea temtica, la interfaz debe atrapar de
inmediato al usuario potencial.

Previsin. Una webapp debe disearse de modo que prevea el siguiente

movimiento del usuario.

Comunicacin. La interfaz debe comunicar el estado de cualquier actividad

iniciada por el usuario.

Consistencia. El uso de controles de navegacin, mens, iconos y esttica

(color, forma y distribucin) debe ser consistente en la webapp.
Autonoma controlada. La interfaz debe facilitar el movimiento del usuario a
travs de la webapp,

Eficiencia. El diseo de la webapp y su interfaz deben optimizar la eficiencia del

trabajo del usuario, no la del desarrollador que la disea y construye ni del
ambiente cliente-servidor que la ejecuta.

Flexibilidad. La interfaz debe tener flexibilidad suficiente para permitir que

algunos usuarios realicen tareas directamente, y que otros exploren la webapp
en forma aleatoria.

Centrarse. La interfaz de la webapp (y el contenido que presente) debe

mantenerse centrada en las tareas en curso del usuario.

Ley de Fitt. El tiempo para llegar a un objetivo est en funcin de la distancia

que hay hasta l y del tamao que tenga.

Objetos de la interfaz humana.

Reduccin de la latencia.
Aprendizaje.

11.5.2 Flujo de trabajos para el diseo de la interfaz de webapp 289

Una vez identificadas las tareas del usuario, se crean y analizan los escenarios
del usuario (casos de uso) con objeto de definir un conjunto de objetos y acciones
de la interfaz.
11.6 Evaluacin del diseo 290
Se debe de tener en cuenta que, luego de haber completado el diseo, se deber
generar un prototipo de primer nivel el cual tomaremos como inicio para que el
usuario tomo como referencia y de su opinin sobre su eficacia.
Basndose en la informacin proporcionada del usuario, se realizan las
modificaciones y se crea un prototipo de segundo nivel, as sucesivamente
generando un ciclo de evaluacin continua hasta que sean innecesarias mas
modificaciones.
Los criterios de evaluacin a tener en cuenta en las primeras revisiones:
1. Longitud y complejidad del sistema y su interfaz indica la cantidad de
aprendizaje para el usuario
2. El nmero de tareas del usuario y el promedio por acciones de tarea
indican el tiempo de interaccin y eficacia global del sistema
3. La cantidad de acciones, tareas y estados del sistema se relaciona con la
carga de memoria que recae en los usuarios
4. El estilo de la interfaz, las funciones de ayuda y el protocolo de manejo de
errores indican la complejidad de la interfaz y el grado de aceptacin del
usuario

Bibliografa
Arcos, J. (14 de julio de 2011). Analisis y Diseo de Sistemas de Informacion . Obtenido de
http://site.ebrary.com/lib/uagrariaecsp/reader.action?docID=10491474

Pressman, R. S. (2010). Ingenieria de Software . Septima Edicion .

S.Pressman, R. (2010). Ingenieria de Software . Septima Edicion .