CAPTULO 9

DISEO DE INTERFAZ DE USUARIO

INTRODUCCIN

El diseo de la interfaz es el proceso de definir cmo el sistema interactuar con el externo

entidades (por ejemplo, clientes, proveedores, otros sistemas). En este captulo, nos
centramos en el diseo de interfaces de usuario, pero tambin es importante recordar que a
veces all Son interfaces de sistema que intercambian informacin con otros sistemas. Las
interfaces del sistema generalmente se disean como parte de un esfuerzo de integracin de
sistemas. Se definen en trminos generales como parte de los diagramas de flujo de datos
fsicos (DFD) y en los requisitos no funcionales (requisitos operacionales), y estn diseados en
detalle durante el diseo del programa (vase el Captulo 10) y el diseo de almacenamiento
de datos.

El diseo de la interfaz del usuario define la forma en que los usuarios interactuarn con el
sistema y la naturaleza de las entradas y salidas que el sistema acepta y produce. La interfaz de
usuario incluye tres partes fundamentales. El primero es el mecanismo de navegacin, la
forma en que el usuario da instrucciones al sistema y le dice qu hacer (por ejemplo, botones,
mens). El segundo es el mecanismo de entrada, la forma en que el sistema captura
informacin (por ejemplo, formularios para agregar nuevos clientes). Los El tercero es el
mecanismo de salida, la forma en que el sistema proporciona informacin al usuario o a otros
sistemas (por ejemplo, informes, pginas web). Cada uno de estos es conceptualmente
diferentes, pero todos estn estrechamente entrelazados: todas las pantallas de la
computadora contienen navegacin Los mecanismos y la mayora contienen mecanismos de
entrada y salida. Por lo tanto, la navegacin diseo, diseo de entrada y diseo de salida estn
estrechamente acoplados.

El estudio de la interaccin hombre-computadora (HCI) se centra en mejorar las interacciones

entre usuarios y computadoras haciendo que las computadoras sean ms utilizables y
receptivas a las necesidades del usuario. Algunas organizaciones emplean diseadores
profesionales de HCI, que se especializan en la aplicacin de procesos de diseo para la
creacin de interfaces grficas de usuario e interfaces web.

Este captulo presenta primero varios principios fundamentales de diseo de la interfaz del
usuario. En segundo lugar, proporciona una descripcin general del proceso de diseo de la
interfaz del usuario. A continuacin, proporciona una descripcin general de los componentes
de navegacin, entrada y salida que se utilizan en el diseo de la interfaz Este captulo se
centra en el diseo de interfaces basadas en web y interfaces grficas de usuario (GUI) que
usan ventanas, mens, conos y un mouse (por ejemplo, Windows, Macintosh). Aunque las
interfaces basadas en texto todava se usan comnmente en mainframes y sistemas UNIX, las
GUI son probablemente el tipo ms comn de interfaces que usar, con la posible excepcin
de los informes impresos.

PRINCIPIOS PARA EL DISEO DE INTERFAZ DE USUARIO

De muchas maneras, el diseo de la interfaz del usuario es un arte. El objetivo es hacer que la
interfaz agradable a la vista y fcil de usar, al tiempo que minimiza el esfuerzo que los usuarios
dedican a lograr su trabajo El sistema nunca es un fin en s mismo; es simplemente un medio
para Lograr el negocio de la organizacin.
 Principio Descripcin
Diseo La interfaz debe ser una serie de reas en la pantalla que se utilizan
constantemente para diferentes propsitos, por ejemplo, un rea
superior para comando y navegacin, un rea intermedia para que
la informacin sea ingresada o emitida, y un rea inferior para
informacin de estado.
Conciencia del Los usuarios siempre deben estar conscientes de dnde estn en el
contenido sistema y qu se muestra la informacin
Esttica Los interfaces deben ser funcionales e invitar a los usuarios a travs
del uso cuidadoso de espacio en blanco, colores y fuentes. A
menudo hay un intercambio entre
suficiente espacio en blanco para que la interfaz parezca agradable y
pierda
Mucho espacio en el que la informacin importante no cabe en la
pantalla.
Experiencia de Aunque la facilidad de uso y la facilidad de aprendizaje a menudo
usuario conducen a un diseo similar decisiones, a veces hay un intercambio
entre los dos. Usuarios principiantes o los usuarios poco frecuentes
de software preferirn la facilidad de aprendizaje, mientras que los
frecuentes
Los usuarios preferirn la facilidad de uso.
Consistencia La consistencia en el diseo de la interfaz permite a los usuarios
predecir lo que suceder antes de que realicen una funcin. Es uno
de los elementos ms importantes en facilidad de aprendizaje,
facilidad de uso y esttica.
Minimizar el La interfaz debe ser simple de usar. La mayora de los diseadores
esfuerzo del usuario planean no tener ms de tres clics del mouse desde el men de
inicio hasta que los usuarios realicen el trabajo.

Hemos descubierto que el mayor problema con el que se enfrentan los diseadores
experimentados es Usar el espacio de manera efectiva. En pocas palabras, hay ms
informacin para presentar que la habitacin para presentarlo Los analistas deben equilibrar la
necesidad de simplicidad y apariencia agradable. Contra la necesidad de presentar la
informacin en mltiples pginas o pantallas, lo que disminuye la simplicidad En esta seccin,
discutimos un diseo de interfaz fundamental principios, que son comunes para el diseo de
navegacin, diseo de entrada y salida diseo (figura 9-1).

Diseo

El primer principio del diseo de la interfaz del usuario se ocupa del diseo de la pantalla, la
forma, o informe El diseo se refiere a las reas de organizacin de la pantalla o documento
para diferentes fines y el uso de esas reas de manera constante en toda la interfaz de usuario.
Ms El software diseado para computadoras personales sigue el enfoque estndar de
Windows o Macintosh para el diseo de la pantalla. Este enfoque divide la pantalla en tres
reas principales: el rea superior proporciona al usuario formas de navegar por el sistema; el
rea media (y ms grande) es para mostrar el trabajo del usuario; y el rea inferior contiene
informacin de estado sobre lo que est haciendo el usuario.

En muchos casos (particularmente en la Web), se utilizan mltiples reas de diseo. La figura

9-2 muestra una pantalla con cinco reas de navegacin, cada una de las cuales est
organizada para Proporciona diferentes funciones y navegacin dentro de diferentes partes
del sistema.

El rea superior proporciona los controles estndar de navegacin y comando del navegador
web. Que cambian los contenidos de todo el sistema. El rea de navegacin en el borde
izquierdo maniobra entre secciones y cambia todo el contenido a su derecha. Las otras dos
reas de navegacin de la seccin en la parte superior e inferior de la pgina proporcionan
otras formas de navegar entre las secciones. El contenido en el medio de la pgina muestra los
resultados. (es decir, artculos de revisin de software) y proporciona navegacin adicional
dentro de la pgina acerca de estas revisiones.

Este uso de mltiples reas de diseo para la navegacin tambin se aplica a las entradas y
salidas. Las reas de datos en informes y formularios a menudo se subdividen en subreas,
cada una de ellas que se usa para diferentes tipos de informacin. Estas reas son casi siempre
de forma rectangular, aunque a veces las restricciones de espacio requieren formas extraas.
Sin embargo, los mrgenes en los bordes de la pantalla deben ser consistentes. Cada una de
las reas del informe o formulario est diseada para contener informacin diferente. Por
ejemplo, en un formulario de pedido (o informe de pedido), una parte se puede usar para el
cliente informacin (por ejemplo, nombre, direccin), una parte para informacin sobre el
pedido en general (por ejemplo, fecha, informacin de pago) y una parte de los detalles de la
orden (por ejemplo, cmo muchas unidades de qu artculos a qu precio cada uno). Cada
rea es autnoma para que La informacin en un rea no se ejecuta en otra.

Las reas e informacin dentro de las reas deben tener un flujo intuitivo natural para
Minimizar el movimiento de los usuarios de un rea a la siguiente. Gente en naciones
occidentales (por ejemplo, Europa, Amrica del Norte) tienden a leer de arriba a abajo, de
izquierda a derecha, de modo que la informacin se debe colocar para que se use en este
orden (por ejemplo, lneas de direccin, seguido de ciudad, estado / provincia, y luego cdigo
postal / cdigo postal). A veces, el La secuencia est en orden cronolgico, o de lo general a lo
especfico, o de la mayora con frecuencia al menos utilizado con mayor frecuencia. En
cualquier caso, antes de que las reas se coloquen en un formulario o informe, el analista debe
tener una idea clara de qu arreglo tiene ms sentido para la forma en que se usar el
formulario o el informe. El flujo entre Las secciones tambin deben ser consistentes, ya sean
horizontales o verticales (Figura 9-3). Idealmente, las reas permanecern consistentes en
tamao, forma y ubicacin para los formularios utilizado para ingresar informacin (ya sea en
papel o en una pantalla) y los informes utilizados para presntelo.

Conciencia del contenido

El conocimiento del contenido se refiere a la capacidad de una interfaz para que el usuario
conozca la informacin que contiene con el menor esfuerzo por parte del usuario. Todas las
partes de la interfaz, ya sea navegacin, entrada o salida, debe proporcionar tanto contenido
conocimiento como sea posible, pero es particularmente importante para formularios o
informes que son usado de manera rpida o irregular (por ejemplo, un sitio web).

El conocimiento del contenido se aplica a la interfaz en general. Todas las interfaces deberan
Tener ttulos (en el marco de la pantalla, por ejemplo). Los mens deben mostrar dnde est el
usuario y, de ser posible, de dnde vino el usuario para llegar all. Por ejemplo, en la Figura 9-2,
la lnea superior en la barra de navegacin del sitio central muestra que el usuario se
encuentra en la seccin del Canal de computacin de la pequea empresa del sitio
winplanet.com.
El conocimiento del contenido tambin se aplica al rea dentro de formularios e informes.
Todas las reas debe ser claro y bien definido (con ttulos si el espacio lo permite) para reducir
las posibilidades que los usuarios se confundan acerca de la informacin en cualquier rea.
Entonces los usuarios pueden ubique rpidamente la parte del formulario o informe que
probablemente contenga la informacin necesitan. Algunas veces, las reas estn marcadas
con lneas, colores o encabezados (por ejemplo, el enlaces de navegacin del sitio en el lado
izquierdo en la Figura 9-2); En otros casos, las reas son solo implcito (por ejemplo, los enlaces
de pgina en el centro de la Figura 9-2).

El conocimiento del contenido tambin se aplica a los campos dentro de cada rea. Los
campos son los Elementos individuales de datos que son de entrada o salida. Las etiquetas de
campo que identifican en los campos en la interfaz deben ser breves y especficos, objetivos
que a menudo entran en conflicto. No debe haber incertidumbre sobre el formato de la
informacin dentro de los campos, ya sea para entrada o visualizacin. Por ejemplo, una fecha
del 05/10/12 significa cosas diferentes, dependiendo de si se encuentra en los Estados Unidos
(5 de octubre de 2012) o en Canad (10 de mayo de 2012). Cualquier campo para el que exista
la posibilidad de incertidumbre o mltiples Las interpretaciones deben proporcionar
explicaciones explcitas.

El conocimiento del contenido tambin se aplica a la informacin que contiene un formulario o

informe. En general, todos los formularios e informes deben contener una fecha de
preparacin (es decir, la fecha impresa o la fecha en que se completaron los datos) para que la
edad de la informacin sea obvia. Del mismo modo, todos los formularios impresos y el
software deben proporcionar los nmeros de versin para que los usuarios, analistas y
programadores puedan identificar materiales anticuados.

La figura 9-4, un formulario de la Universidad de Georgia, ilustra la agrupacin lgica de

campos en reas con un cuadro explcito (arriba a la izquierda), as como un rea implcita con
sin caja (inferior izquierda). Los campos de direccin dentro del rea de direccin siguen un
claro y natural orden. Las etiquetas de campo son cortas donde sea posible (vea la parte
superior izquierda), pero largas donde ms se necesita informacin para evitar malas
interpretaciones (ver la parte inferior izquierda).

Esttica

La esttica se refiere al diseo de interfaces que son agradables a la vista. Las interfaces hacen
No tienen por qu ser obras de arte, pero s necesitan ser funcionales e invitantes a usar. En La
mayora de los casos, "menos es ms", lo que significa que un diseo simple y minimalista es el
mejor.

El espacio generalmente es un premio en formularios e informes, y a menudo est la tentacin

de exprimir tanta informacin como sea posible en una pgina o una pantalla.
Lamentablemente, esto puede hacer un formulario o informe tan desagradable que los
usuarios no quieren para completarlo En general, todos los formularios e informes necesitan al
menos una cantidad mnima de espacio en blanco que se deja en blanco intencionalmente.

Cul fue tu primera reaccin cuando miraste la figura 9-4? Esto es lo ms Forma desagradable
en la Universidad de Georgia, segn miembros del personal. Su densidad es muy alto; Tiene
demasiada informacin en un espacio demasiado pequeo con demasiado pequeo espacio
en blanco Aunque puede ser eficiente para ahorrar papel al ser una pgina En lugar de dos, no
es efectivo para muchos usuarios.
En general, los usuarios novatos o infrecuentes de una interfaz, ya sea en una pantalla o en
papel, prefiera interfaces con baja densidad, a menudo una con una densidad de menos de
50% (es decir, menos del 50% de la interfaz ocupada por la informacin). Ms experimentado
Los usuarios prefieren densidades ms altas, a veces cerca del 90% ocupado, porque ellos
saben dnde se encuentra la informacin y las altas densidades reducen la cantidad de
movimiento fsico a travs de la interfaz Sospechamos que el formulario en la Figura 9-4 fue
diseado para el personal experimentado en la oficina de personal, que lo usa a diario, en
lugar de para el personal administrativo en los departamentos acadmicos, que tienen menos
personal Experimente y use el formulario solo unas pocas veces al ao.

El diseo del texto es igualmente importante. En general, debe haber una fuente para todo el
formulario o informe y no ms de dos tamaos de esa fuente en el formulario o informe Se
puede usar un tamao de letra mayor para ttulos, encabezados de seccin, etc., y para fuente
ms pequea para el informe o el contenido de la forma. Si se imprime el formulario o el
informe, la fuente ms pequea debe tener al menos 8 puntos de tamao. Se prefiere un
mnimo de 10 puntos si los usuarios sern personas mayores. Para los formularios o informes
que se muestran en el pantalla, considere un mnimo de un tamao de fuente de 12 puntos si
el monitor de pantalla est configurado para una alta resolucin de pantalla Las cursivas y el
subrayado deberan evitarse porque hacer que el texto sea ms difcil de leer.

Serif fonts (es decir, aquellos que tienen letras con serifs, o "colas", como Times Roman o la
fuente que est leyendo en este momento) son las ms legibles para imprimir informes,
particularmente para letras pequeas. Fuentes sin serifas (es decir, sin serifas, tales como
Tahoma o Arial o los que se usan para los ttulos de los captulos en este libro) son los ms
legible para pantallas de computadora y se usa a menudo para encabezados en informes
impresos. Nunca use todas las letras maysculas, excepto, posiblemente, para los ttulos:
letras maysculas "grita" y es ms difcil de leer.

El color y los patrones deben usarse con cuidado y con moderacin y solo cuando servir a un
propsito. (Alrededor del 10% de los hombres son daltnicos, por lo que el uso indebido del
color puede afectar su capacidad de leer informacin). Un viaje rpido por la Web Demuestre
los problemas causados por el uso indiscriminado de colores y patrones. Recuerde, el objetivo
es una legibilidad agradable, no arte; colores y patrones deben ser Sola fortalecer el mensaje,
no abrumarlo. El color se usa mejor para separar y categorizar elementos, como mostrar la
diferencia entre encabezados y texto normal, o para resaltar informacin importante. Por lo
tanto, los colores con alto contraste deberan ser utilizados (por ejemplo, blanco y negro). En
general, el texto negro sobre fondo blanco es l Lo ms legible, con azul en rojo, lo menos
legible. (La mayora de los expertos concuerda en que los antecedentes los patrones en las
pginas web deben evitarse). Se ha demostrado que el color afecta emocin con rojo
provocando emocin intensa (por ejemplo, enojo) y provocacin azul disminuido emociones
(por ejemplo, somnolencia).

Experiencia de usuario

La experiencia del usuario se refiere al diseo de la interfaz de usuario con el nivel de usuarios
de La experiencia de la computadora en mente. Un sistema informtico ser utilizado por
personas con experiencia y por personas sin experiencia; la interfaz de usuario debe ser
diseado para ambos tipos. Los usuarios principiantes generalmente estn ms preocupados
por la facilidad de Aprender: con qu rapidez y facilidad pueden aprender a usar el sistema.
Usuarios expertos Por lo general, estn ms preocupados por la facilidad de uso: qu tan
rpido y fcilmente pueden Complete una tarea con el sistema una vez que hayan aprendido
cmo usarlo. A menudo estos dos objetivos son complementarios y conducen a decisiones de
diseo similares, pero a veces, hay concesiones. Los novicios, por ejemplo, a menudo prefieren
los mens que muestran todas las funciones disponibles del sistema, ya que estos promueven
la facilidad de aprendizaje. Expertos, en Por otro lado, a veces prefieren menos mens
organizados en la mayora de los casos. Funciones de uso comn.

Los sistemas que terminarn siendo utilizados por muchas personas a diario son ms Es
probable que tenga una mayora de usuarios expertos (por ejemplo, sistemas de entrada de
pedidos). Aunque las interfaces deben tratar de equilibrar la facilidad de uso y la facilidad de
aprendizaje, este tipo de sistemas debe poner ms nfasis en la facilidad de uso que en la
facilidad de aprendizaje. Los usuarios deberan poder acceder a las funciones comnmente
empleadas rpidamente, con pocas pulsaciones de teclas o una pequea cantidad de
selecciones de men.

En muchos otros sistemas (por ejemplo, sistemas de soporte de decisiones), la mayora de las
personas permanecen usuarios ocasionales durante toda la vida del sistema. En este caso,
mayor nfasis puede colocarse en la facilidad de aprendizaje en lugar de en la facilidad de uso.

Aunque la facilidad de uso y la facilidad de aprendizaje a menudo van de la mano, a veces ellos
no lo hacen La investigacin muestra que los usuarios expertos y novatos tienen diferentes
requisitos y patrones de comportamiento en algunos casos. Por ejemplo, los novatos
prcticamente nunca mira el rea inferior de una pantalla que presenta informacin de estado,
pero los expertos consulte la barra de estado cuando necesitan informacin. La mayora de los
sistemas deberan ser diseado para admitir usuarios frecuentes, a excepcin de los sistemas
que se utilizarn con poca frecuencia o aquellos para los que se esperan muchos usuarios
nuevos o usuarios ocasionales (por ejemplo, la Web). Del mismo modo, los sistemas que
contienen funcionalidades que solo se utilizan de vez en cuando deben contener una interfaz
altamente intuitiva o una interfaz que contenga instrucciones explcitas sobre su uso.

El equilibrio entre el acceso rpido a funciones de uso comn y conocidas y la orientacin a

travs de funciones nuevas y menos conocidas es desafiante para el Diseador de interfaz, y
este equilibrio a menudo requiere soluciones elegantes. Microsoft Office, por ejemplo, aborda
este problema mediante el uso de las funciones "mostrarme" que demuestran los mens y
botones para funciones especficas. Estas caractersticas permanecen en segundo plano hasta
que las necesitan usuarios novatos (o incluso experimentados usuarios cuando usan una parte
desconocida del sistema).

Consistencia

La consistencia en el diseo es probablemente el factor ms importante para hacer que un

sistema sea simple de usar, ya que permite a los usuarios predecir lo que suceder. Cuando las
interfaces son consistentes, los usuarios pueden interactuar con una parte del sistema y luego
saber cmo interactuar con el resto, por supuesto, de elementos nicos de esas partes. La
consistencia generalmente se refiere a la interfaz dentro de un sistema informtico, de modo
que todas las partes del mismo sistema funcionan de la misma manera. Idealmente, sin
embargo, el sistema tambin debe ser coherente con otros sistemas informticos de la
organizacin y con cualquier software comercial que se utilice (por ejemplo, Windows). Por
ejemplo, muchos usuarios estn familiarizados con la Web, por lo que el uso de interfaces
similares a la Web puede reducir la cantidad de aprendizaje requerido por el usuario. De esta
forma, el usuario puede reutilizar el conocimiento web, reduciendo as significativamente la
curva de aprendizaje para un nuevo sistema.

La consistencia ocurre en muchos niveles diferentes. Consistencia en la navegacin Los

controles transmiten cmo deben realizarse las acciones en el sistema. Por ejemplo, Usar el
mismo icono o comando para cambiar un elemento comunica claramente cmo los cambios se
realizan en todo el sistema. La consistencia en la terminologa es tambin importante. Esto se
refiere a usar las mismas palabras para elementos en formularios e informes (por ejemplo, no
"cliente" en un lugar y "cliente" en otro). Tambin creemos que La consistencia en el diseo
del informe y la forma es importante, aunque un estudio sugiere que ser demasiado
consistente puede causar problemas. Cuando los informes y formularios son muy Sin embargo,
a excepcin de los cambios menores en los ttulos, los usuarios a veces usan errneamente
informe o formulario incorrectos e ingresa datos incorrectos o malinterpreta su informacin.
La implicacin para el diseo es hacer que los informes y formularios sean similares, pero dar a
ellos algunos elementos distintivos (por ejemplo, color, tamao de ttulos) que permiten a los
usuarios detectar de inmediato las diferencias.

Minimizar el esfuerzo del usuario

Finalmente, las interfaces deberan disearse para minimizar la cantidad de esfuerzo necesaria
para realizar tareas Esto significa usar el menor nmero posible de clics de mouse o
pulsaciones de teclas para pasar de una parte del sistema a otra. La mayora de los diseadores
de interfaces siguen el regla de tres clics: los usuarios deberan poder ir desde el inicio o el
men principal de un sistema a la informacin o accin que desean en no ms de tres clics del
mouse o tres pulsaciones de tecla.

PROCESO DE DISEO DE INTERFAZ DE USUARIO

El diseo de la interfaz de usuario es un proceso de cinco pasos que es iterativo: los analistas a
menudo se mueven hacia adelante y hacia atrs entre pasos en lugar de proceder
secuencialmente desde el paso 1 al paso 5 (figura 9-5). Primero, los analistas examinan los DFD
y usan los casos desarrollados en la fase de anlisis (vanse los Captulos 4 y 5) y entreviste a
los usuarios para desarrollar escenarios de uso que describan los patrones de accin
comnmente utilizados por los usuarios para que La interfaz puede permitir a los usuarios
realizar de forma rpida y sin problemas estos escenarios. Segundo, los analistas desarrollan el
diagrama de estructura de la interfaz (ISD) que define el estructura bsica de la interfaz Este
diagrama (o conjunto de diagramas) muestra todo el interfaces (por ejemplo, pantallas,
formularios e informes) en el sistema y cmo estn conectados. Tercero, los analistas disean
estndares de interfaz, que son el diseo bsico Elementos en los que se basan las interfaces
en el sistema. Cuarto, los analistas crean un prototipo de diseo de interfaz para cada una de
las interfaces individuales en el sistema, tales como controles de navegacin, pantallas de
entrada, pantallas de salida, formularios (incluidos formularios en papel preimpresos) e
informes. Finalmente, las interfaces individuales estn sujetas a la evaluacin de la interfaz
para determinar si son satisfactorios y cmo pueden mejorarse.

Las evaluaciones de interfaz casi siempre identifican mejoras, por lo que la interfaz El proceso
de diseo se repite en un proceso cclico hasta que no se realicen nuevas mejoras.
Identificado. En la prctica, la mayora de los analistas interactan estrechamente con los
usuarios durante el proceso de diseo de la interfaz, de modo que los usuarios tienen muchas
posibilidades de ver la interfaz, ya que evoluciona en lugar de esperar una evaluacin general
de la interfaz al final de la proceso de diseo de la interfaz Es mejor para todos los interesados
(tanto analistas como usuarios) si los cambios se identifican ms temprano que tarde. Por
ejemplo, si la estructura de la interfaz o los estndares necesitan mejoras, es mejor identificar
los cambios antes de que la mayora de las pantallas que usan los estndares hayan sido
diseadas.

Utilizar escenario
desarrollo

Diseo de la
Evaluacin de
estructura de la
la interfaz
interfaz

Diseo de
interfaces de Diseo de
prototipos estndares de
interfaz

Use el desarrollo de escenarios

Un escenario de uso es un esquema de los pasos que los usuarios realizan para lograr alguna
parte de su trabajo Un escenario de uso es una ruta comnmente utilizada a travs de un uso.
Caso. Recuerde que los casos de uso y los diagramas de flujo de datos pueden incluir mltiples
formas en que se puede completar la respuesta al evento. Por ejemplo, piense en el Busque y
explore el caso de uso de Tunes de la Figura 4-14 en el Captulo 4 que se model en un DFD de
nivel 1 que se muestra en la Figura 5-18 en el Captulo 5. Esta figura muestra el proceso 1.2
(Peticiones de bsqueda de proceso) como distinto del proceso 1.3 (Seleccin de sintona de
proceso). Modelamos los dos procesos por separado y escribimos los programas por separado
porque son procesos separados dentro del proceso 1 (bsqueda y Examinar canciones).

El DFD fue diseado para modelar todos los usos posibles del sistema, es decir, su
funcionalidad completa o todas las rutas posibles a travs del caso de uso. Pero usa escenarios
son solo una ruta a travs del caso de uso. En un escenario de uso, por ejemplo, un usuario
navegar a travs de muchas canciones, al igual que alguien que navega a travs de una msica
real tienda en busca de msica interesante. l o ella buscarn una meloda, escuchar una
muestra, tal vez agregarlo al carrito de compras, buscar ms, y as sucesivamente. Finalmente,
el usuario querr comprar la (s) descarga (s), tal vez eliminando algunas selecciones del carrito
de compras de antemano.

En otro escenario de uso, un usuario querr comprar una meloda especfica. l o ella Ir
directamente a la meloda, el precio, y comprar de inmediato, al igual que alguien corriendo a
una tienda, haciendo una lnea recta para el artculo que l o ella quiere, e inmediatamente
pagando y saliendo de la tienda. Este usuario ingresar la informacin de sintona en la parte
de bsqueda del sistema, observar la informacin de costo resultante e inmediatamente
comprar la descarga o se ir. Cualquier cosa que frene a l o ella se arriesgar perdiendo la
venta Para este escenario de uso, debemos asegurarnos de que la ruta a travs del El DFD
presentado por la interfaz es corto y simple, con muy pocos mens y clics del mouse.
Los escenarios de uso se presentan en una descripcin narrativa simple que est vinculada a la
DFD La figura 9-6 muestra los dos escenarios de uso que acabamos de describir. El punto clave
en el uso utilizar escenarios para el diseo de la interfaz no es para documentar todos los
posibles escenarios de uso dentro de un caso de uso, porque entonces terminas simplemente
repitiendo el DFD de una forma diferente formar. El objetivo es describir el puado de
escenarios de uso ms comunes para que la interfaz se pueda disear para permitir que los
usos ms comunes se realicen de forma simple y sencilla.

Usar escenario: el comprador de Use el escenario: The Hurry-up Shopper

navegacin El usuario sabe exactamente lo que quiere y
El usuario no est seguro de qu quieren lo quiere rpidamente.
comprar y navegar por varias melodas.
1. El usuario buscar un artista especfico o
1. El usuario puede buscar un artista sintonizar (1.2)
especfico o navegar a travs de una 2. El usuario ver el precio y lo suficiente
categora de msica (1.2). Otra informacin para confirmar que la
2. Es probable que el usuario lea la meloda es la meloda deseada (1.3).
informacin bsica 3. El usuario querr comprar la descarga
por varias melodas, as como tambin (proceso 2) o pasar a otra web sitios.
Material de marketing para algunos. l o
ella es probable que escuche muestras de
msica y navegar canciones relacionadas
(1.3).
3. El usuario pondr la cancin en el carrito
de compras.
(1.3) y continuar navegando (1.2).
4. Finalmente, el usuario querr comprar
La descarga, pero probablemente querr
mira a travs del carrito de la compra,
posiblemente descartando algunas melodas
primero (1.3).

Diseo de la estructura de la interfaz

El diseo de la estructura de la interfaz define los componentes bsicos de la interfaz y Cmo

funcionan en conjunto para proporcionar funcionalidad a los usuarios. Se utiliza un diagrama
de estructura de interfaz (ISD) para mostrar cmo se relacionan todas las pantallas,
formularios e informes utilizados por el sistema y cmo el usuario se mueve de uno a otro. La
mayora de los sistemas tienen varios ISD, uno para cada parte principal del sistema.

Un ISD es algo similar a un DFD en que usa cuadros y lneas para mostrar estructura. Sin
embargo, a diferencia de los DFD, no existen normas o estndares comnmente utilizados
para su desarrollo Con un enfoque, cada elemento de interfaz (por ejemplo, pantalla,
formulario, informe) en un ISD se dibuja como un cuadro y se le da un nmero nico (en la
parte superior) y un nombre nico (en el medio). Los nmeros generalmente siguen una
estructura tipo rbol, aunque esto no siempre se hace. A diferencia de los DFD, sin embargo,
los nmeros No significa que todas las pantallas pertenezcan a "padres" ms altas en el rbol;
en cambio, ellos generalmente implican relaciones entre un men y un submen. Las lneas
denotan el habilidad para navegar de un men a otro.
Cada cuadro en el ISD tambin muestra (en la parte inferior) el proceso DFD que es compatible
por la interfaz (figura 9-7). A veces, hay ms de una interfaz para un proceso dado (por
ejemplo, en la figura 9-7, interfaces 1.1 a 1.3 proceso de soporte 1.1.1); En otros casos, solo
hay una interfaz para cada proceso (por ejemplo, interfaces 3.1 a 3.3 los procesos de soporte
1.1.3.1 a 1.1.3.3).

Cada interfaz est vinculada a otras interfaces por lneas que muestran cmo los usuarios
pueden transicin de una interfaz a la siguiente. En la mayora de los casos, las interfaces
forman un jerarqua o un rbol; pero a veces, una interfaz est vinculada a una fuera de la
jerarqua, como lo muestra el enlace de la Forma J a la Forma B (por ejemplo, la capacidad de
actualizar informacin del cliente, como la direccin, al ingresar un nuevo pedido).

La estructura bsica de la interfaz sigue la estructura bsica de la empresa procesarse como se

define en el modelo de proceso. El analista comienza con el DFD y desarrolla el flujo
fundamental de control del sistema a medida que se mueve proceso para procesar Por lo
general, hay varias partes importantes en un sistema de informacin, cada una de ellas
distinta, de la misma manera que hay varios procesos de alto nivel en un DFD. En general, pero
no siempre, hay un ISD para cada uno proceso en el nivel 0 DFD.

El analista luego examina los escenarios de uso para ver qu tan bien soportan el ISD ellos.
Muy a menudo, los escenarios de uso identifican rutas a travs del ISD que son ms
complicado de lo que deberan ser. El analista reelabora el ISD para simplificar el capacidad de
la interfaz para admitir los escenarios de uso, a veces haciendo mayor cambios en la estructura
del men, a veces mediante la adicin de accesos directos.

Diseo de estndares de interfaz

Los estndares de interfaz son los elementos bsicos de diseo que son comunes en todas las
pantallas individuales, formularios e informes dentro del sistema. Dependiendo de la
aplicacin, puede haber varios conjuntos de estndares de interfaz para diferentes partes del
sistema (por ejemplo, uno para pantallas Web, uno para informes en papel y otro para
formularios de entrada). Por ejemplo, la parte del sistema utilizada por los operadores de
entrada de datos puede reflejar otras aplicaciones de entrada de datos en la empresa,
mientras que una interfaz web para mostrar informacin del mismo sistema puede adherirse a
un formato Web estandarizado. Del mismo modo, cada interfaz individual puede no contener
todos los elementos en los estndares (por ejemplo, una pantalla de informe puede no tener
una capacidad de "edicin"), y pueden contener caractersticas adicionales ms all de las
estndares, pero los estndares sirven como piedra de toque que garantiza que las interfaces
son coherentes en todo el sistema.

Metfora de la interfaz En primer lugar, los analistas deben desarrollar la metfora (s)
fundamental de la interfaz que define cmo funcionar la interfaz. Una metfora de la interfaz
es un concepto del mundo real que se utiliza como modelo para el sistema informtico. La
metfora ayuda al usuario a comprender el sistema y le permite al usuario predecir qu
caractersticas podra proporcionar la interfaz, incluso sin usar el sistema. A veces los sistemas
tienen una metfora, mientras que en otros casos hay varias metforas en diferentes partes
del sistema.

En muchos casos, la metfora es explcita. Quicken, por ejemplo, utiliza una chequera
metfora de su interfaz, incluso hasta el punto de tener la informacin de tipo de usuario en
un formulario en pantalla que se parece a un registro de cheques real. En otros casos, el La
metfora est implcita o no expresada, pero est all, no obstante. Muchos sistemas de
Windows usa el formulario o la tabla en papel como metfora.

En algunos casos, la metfora es tan obvia que no requiere reflexin. El tono El sistema de
descarga de msica digital de origen, por ejemplo, usar la tienda de msica minorista como la
metfora (por ejemplo, carrito de compras). En otros casos, una metfora es difcil de
identificar. En general, es mejor no forzar una metfora que realmente no se ajuste a un
sistema, porque una metfora que no encaja confundir a los usuarios al promover
suposiciones incorrectas.

Plantillas de interfaz La plantilla de la interfaz define la apariencia general de todos pantallas

en el sistema de informacin y los formularios e informes en papel que se utilizan. El diseo de
la plantilla, por ejemplo, especifica el diseo bsico de las pantallas (p. ej., donde el rea de
navegacin [s], el rea de estado y el rea de formulario / informe [s] sern colocado) y el (los)
esquema (s) de colores que se aplicarn. Define si Windows se reemplazan unos a otros en la
pantalla o se en cascada uno encima del otro. La plantilla define una ubicacin estndar y un
orden para las acciones comunes de la interfaz (por ejemplo, "Archivo, Editar, Ver "en lugar
de" Archivo, Ver, Editar "). En resumen, la plantilla rene los otros elementos principales de
diseo de la interfaz: metforas, objetos, acciones e conos.

Objetos de interfaz La plantilla especifica los nombres que la interfaz usar para el Los
principales objetos de interfaz, los componentes fundamentales del sistema, como las
entidades y los almacenes de datos. En muchos casos, los nombres de los objetos son sencillos,
como llamar al carrito de la compra el "carrito de la compra". En otros casos, no es simple. Por
ejemplo, Tune Source eligi llamar "melodas" a sus descargas de msica digital. Algunas
personas pueden referirse a las selecciones de msica individuales como "pistas" o "cortes".
Obviamente, los nombres de los objetos deberan entenderse fcilmente y ayudar a promover
la metfora de la interfaz .

En general, en casos de desacuerdos entre los usuarios y los analistas sobre nombres, ya sea
para objetos o acciones (discutidos ms adelante), los usuarios deben ganar. Un nombre ms
comprensible siempre supera a un nombre ms preciso o ms preciso.

Acciones de interfaz La plantilla tambin especifica el idioma de navegacin y comando estilo

(por ejemplo, mens) y gramtica (por ejemplo, orden de accin de objeto; consulte "Diseo
de navegacin" ms adelante en este captulo). La plantilla da nombres a la interfaz ms
utilizada acciones en el diseo de navegacin (por ejemplo, "comprar" frente a "comprar" o
"salir" frente a "dejar").

conos de la interfaz Los objetos y acciones de la interfaz, y tambin su estado (por ejemplo,
eliminado, error), puede ser representado por iconos de interfaz. Los iconos son imgenes que
aparecen en los botones de comando, as como en los informes y formularios para resaltar
importantes informacin. El diseo de iconos es muy desafiante porque significa desarrollar un
simple imagen de menos de la mitad del tamao de un sello que necesita transmitir un
significado a menudo complejo. El enfoque ms simple y mejor es adoptar conos
desarrollados por otros (p. Ej., Una pgina en blanco para indicar "crear un nuevo archivo", un
disquete para indicar "guardar"). Esto tiene la ventaja de un rpido desarrollo de conos, y es
posible que los iconos ya estn Bien entendido por los usuarios porque los usuarios los han
visto en otro software.
Los comandos son acciones que son especialmente difciles de representar con conos. Porque
estn en movimiento, no estticos. Muchos conos se han hecho famosos a partir de El uso
generalizado, pero los conos no se comprenden tan bien como al principio se crea que seran.
El uso de iconos a veces puede causar ms confusin que insight. (Por ejemplo, sabas que
una imagen de un pincel de barrido en Microsoft Word significa "pintor de formatos"?) Los
significados de los iconos se vuelven ms claros con el uso, pero debido a que A menudo son
crpticas, muchas aplicaciones ahora ofrecen sugerencias de herramientas de texto que
aparecen cuando puntero se cierne sobre un cono Esta funcin explica el propsito del cono
en palabras.

Diseo de interfaces de prototipos

Un prototipo de diseo de interfaz es una maqueta o una simulacin de una pantalla de

computadora, formulario o informe. Se prepara un prototipo para cada interfaz en el sistema
para mostrar el los usuarios y los programadores cmo funcionar el sistema. En los "viejos
tiempos", un prototipo de diseo de interfaz generalmente se especificaba en un formulario
en papel que mostraba lo que se mostrara en cada parte de la pantalla. Los formularios en
papel todava se usan hoy, pero ms y ms prototipos de diseo de interfaz se estn
construyendo con herramientas de computadora en lugar de en papel. Los tres enfoques ms
comunes para la creacin de prototipos de diseo de interfaces son guiones grficos,
prototipos HTML y prototipos de lenguaje.

Guin grfico En su forma ms simple, un prototipo de diseo de interfaz es un storyboard

basado en papel. El guin grfico muestra imgenes dibujadas a mano de cmo se vern las
pantallas. y cmo fluirn de una pantalla a otra, de la misma manera que un storyboard para
una caricatura muestra cmo la accin fluir de una escena a la siguiente (Fig. 9-8). Los guiones
grficos son la tcnica ms simple porque lo nico que necesitan es papel (a menudo en un
rotafolio) y un lpiz y alguien con alguna habilidad artstica.

Prototipo HTML Uno de los tipos ms comunes de prototipos de diseo de interfaz utilizados
hoy en da es el prototipo HTML. Como su nombre indica, un prototipo HTML se crea con el
uso de pginas web creadas en HTML (lenguaje de marcado de hipertexto). El diseador usa
HTML para crear una serie de pginas web que muestran las partes fundamentales del
sistema. Los usuarios pueden interactuar con las pginas haciendo clic en los botones e
ingresando datos pretextados en formularios (pero debido a que no hay un sistema detrs de
las pginas, los datos nunca se procesan). Las pginas estn vinculadas entre s para que,
cuando el usuario haga clic en los botones, aparezca la parte solicitada del sistema. Los
prototipos HTML son superiores a los storyboards ya que permiten a los usuarios interactuar
con el sistema y obtener una mejor idea de cmo navegar entre las diferentes pantallas. Sin
embargo, HTML tiene limitaciones: las pantallas que se muestran en HTML nunca aparecern
exactamente como las pantallas reales del sistema (a menos que, por supuesto, el sistema real
sea un sistema web en HTML).

Prototipo de idioma Un prototipo de idioma es un prototipo de diseo de interfaz construido

en el idioma real o por la herramienta real que se utilizar para construir el sistema. Los
prototipos de idiomas estn diseados de la misma manera que los prototipos HTML.
(Permiten al usuario moverse de una pantalla a otra, pero no realizan un procesamiento real).
Por ejemplo, en Visual Basic, es posible crear y ver pantallas sin asociar realmente el cdigo del
programa a las pantallas. Consulte la Figura 9-9 para obtener un ejemplo de prototipo del
lenguaje Visual Basic. Los prototipos de idiomas tardan ms en desarrollarse que los
storyboards o los prototipos HTML, pero tienen la clara ventaja de mostrar exactamente cmo
sern las pantallas. El usuario no tiene que adivinar la forma o la posicin de los elementos en
la pantalla.

Seleccionando las Tcnicas Apropiadas Los proyectos a menudo usan una combinacin de
diferentes tcnicas de prototipos de diseo de interfaz para diferentes partes del sistema.
Storyboarding es el ms rpido y menos costoso, pero proporciona la menor cantidad de
detalles. La creacin de prototipos de idiomas es el enfoque ms lento, ms costoso y ms
detallado. Los prototipos HTML caen entre los dos extremos. Por lo tanto, el storyboarding se
usa para partes del sistema en las que la interfaz se entiende bien y cuando se considera que
los prototipos ms caros son innecesarios. Los prototipos de HTML y los prototipos de idioma
se utilizan para partes del sistema que son crticas, pero que no se comprenden bien.

Evaluacin de la interfaz

El objetivo de la evaluacin de la interfaz es comprender cmo mejorar la interfaz diseo. El

diseo de la interfaz es subjetivo; no hay frmulas que garanticen una gran interfaz de usuario.
La mayora de los diseadores de interfaces disean intencionalmente o sin intencin un
interfaz que cumple con sus preferencias personales, que puede o no coincidir con
preferencias de los usuarios El mensaje clave, por lo tanto, es tener tantas personas como
posible evaluar la interfaz, y cuantos ms usuarios, mejor. La mayora de los expertos
recomiendan involucrar al menos a 10 usuarios potenciales en el proceso de evaluacin.

Muchas organizaciones guardan la evaluacin de la interfaz para el ltimo paso en el SDLC

antes de instalar el sistema. Idealmente, sin embargo, la evaluacin de la interfaz debera
realizarse mientras se est diseando el sistema, antes de que se construya que cualquier
problema importante de diseo puede ser identificado y corregido antes de la hora y el costo
de la programacin se ha gastado en un diseo dbil. No es poco comn para que el sistema
experimente uno o dos cambios importantes despus de que los usuarios vean el primero
prototipo de diseo de interfaz, porque identifican problemas que se pasan por alto por el
equipo del proyecto.

Al igual que con los prototipos de diseo de interfaces, la evaluacin de interfaces puede
tomar diferentes formularios, cada uno con diferentes costos y diferentes niveles de detalle.
Cuatro comunes Los enfoques son la evaluacin heurstica, la evaluacin paso a paso, la
evaluacin interactiva, y pruebas formales de usabilidad. Al igual que con el prototipo de
diseo de interfaz, las diferentes partes de un sistema puede evaluarse mediante diferentes
tcnicas.

Evaluacin heurstica Una evaluacin heurstica examina la interfaz comparndola con un

conjunto de heursticas, o principios, para el diseo de la interfaz. El equipo del proyecto
desarrolla una lista de comprobacin de los principios de diseo de la interfaz, de la lista al
comienzo de este captulo, por ejemplo, as como de las listas de principios en las secciones de
diseo de navegacin, entrada y salida. Al menos tres miembros del equipo del proyecto
trabajan individualmente a travs del prototipo de diseo de interfaz, examinando cada
interfaz para asegurarse de que cumple con cada principio de diseo en la lista de verificacin
formal. Despus de que cada miembro haya analizado el prototipo por separado, todos se
renen en equipo para analizar su evaluacin e identificar las mejoras especficas que se
requieren. Debido a que esta tcnica no involucra a los usuarios, se considera el tipo de
evaluacin ms dbil.
Evaluacin paso a paso Una evaluacin de diseo de interfaz de paso a paso es una reunin
realizada con los usuarios que tendrn que operar el sistema en ltima instancia. El equipo del
proyecto presenta el prototipo a los usuarios y los gua por las diversas partes de la interfaz. El
equipo del proyecto muestra el guin grfico o, en realidad, muestra el prototipo HTML o de
idioma y explica cmo se utilizar la interfaz. Los usuarios identifican mejoras en cada una de
las interfaces que se presentan.

Evaluacin interactiva Con una evaluacin interactiva, los propios usuarios realmente trabajan
con el prototipo de HTML o lenguaje en sesiones individuales con miembros del equipo del
proyecto. (Una evaluacin interactiva no puede utilizarse con un guin grfico). A medida que
el usuario trabaja con el prototipo (a menudo examinando los escenarios de uso o navegando
a voluntad a travs del sistema), le dice a los miembros del equipo del proyecto qu le gusta y
no le gusta y qu informacin adicional o funcionalidad se necesita. A medida que el usuario
interacta con el prototipo, los miembros del equipo registran la situacin cuando el usuario
parece no estar seguro de qu hacer, comete errores o malinterpreta el significado de un
componente de interfaz. Si el patrn de incertidumbre, errores o malas interpretaciones se
repite en varias sesiones de evaluacin con varios usuarios, es una clara indicacin de que esas
partes de la interfaz necesitan mejoras.

Prueba de usabilidad formal Las pruebas formales de usabilidad se realizan comnmente con
productos de software comercial y productos desarrollados por grandes organizaciones que
sern ampliamente utilizados a travs de la organizacin. Como su nombre lo indica, es un
proceso muy formal, casi cientfico, que solo se puede usar con prototipos de idiomas (y
sistemas que han sido completamente construidos y estn pendientes de instalacin o envo)
.6 Al igual que con la evaluacin interactiva, las pruebas de usabilidad se realizan en una -Son
sesiones en las que un usuario trabaja directamente con el software. Sin embargo,
normalmente se realiza en un laboratorio especial equipado con cmaras de video y software
especial que registra todas las pulsaciones de teclas y la operacin del mouse para que se
puedan reproducir para ayudar a comprender exactamente lo que hizo el usuario.

Al usuario se le asigna un conjunto especfico de tareas para realizar (generalmente los

escenarios de uso), y despus de algunas instrucciones iniciales, los miembros del equipo del
proyecto no estn permitidos para interactuar con el usuario para proporcionar asistencia. El
usuario debe trabajar con el software sin ayuda, lo que puede ser difcil para el usuario si se
confunde con el sistema. Es crtico que los usuarios entiendan que el objetivo es probar la
interfaz, no sus capacidades, y si no pueden completar la tarea, la interfaz, no el usuario, ha
fallado la prueba. Se utilizan varias medidas de rendimiento, como el tiempo para completar la
tarea, la tasa de error y la satisfaccin del usuario.

Las pruebas formales de usabilidad son muy costosas. Cada sesin de un usuario (que
generalmente dura entre una y dos horas) puede demorar entre uno y dos das para analizar
debido al volumen de detalles recopilado en los registros de la computadora y en las cintas de
video. La mayora de las pruebas de usabilidad involucran de 5 a 10 usuarios. Menos de 5
usuarios hacen que los resultados dependan demasiado de los usuarios individuales
especficos que participaron, pero ms de 10 usuarios a menudo son demasiado caros de
justificar (a menos que trabaje para un desarrollador de software comercial grande).

DISEO DE NAVEGACIN

Pag. 334