DÍAZ ARARI AMADEO FINAL CON MARCADORES 3 Diciembre 2013 PDF

Libros de Ctedra
Gua de recomendaciones para

diseo de software centrado en el
usuario
Javier Daz
Ivana Harari
Ana Paola Amadeo
FACULTAD DE
INFORMTICA
GUA DE RECOMENDACIONES PARA DISEO DE
SOFTWARE CENTRADO EN EL USUARIO
Javier Daz
Ivana Harari
Ana Paola Amadeo
2013
Daz, Javier
Gua de recomendaciones para diseo de software centrado en el usuario / Javier Daz ; Ivana
Harari ; Ana Paola Amadeo. - 1a ed. - La Plata : Universidad Nacional de La Plata, 2013.
E-Book:ISBN 978-950-34-1030-1
1. Informtica. 2. Software. 3. Enseanza Universitaria. I. Harari, Ivana II. Amadeo, Ana Paola
III. Ttulo
CDD 005.3
Fechadecatalogacin:28/10/2013
Diseo de tapa: Direccin de Comunicacin Visual de la UNLP
Universidad Nacional de La Plata Editorial de la Universidad de La Plata
47 N. 380 / La Plata B1900AJP / Buenos Aires, Argentina

+54 221 427 3992 / 427 4898
editorial@editorial.unlp.edu.ar
www.editorial.unlp.edu.ar
Edulp integra la Red de Editoriales Universitarias Nacionales (REUN)
Primera edicin, 2013

ISBN 978-950-34-1030-1
2013 - Edulp
Reconocimientos
A la Diseadora en Comunicacin Visual Ariadna Alfano, por su preciosa labor de edicin y diseo de
portadas, conos e imgenes que utilizamos en cada captulo.
A los alumnos que han pasado por la ctedra de Diseo Centrado en el Usuario desde 1992, por sus ideas,
iniciativas y desarrollos, varios de los cuales ilustran los ejemplos de este libro.
A la Facultad de Informtica de la Universidad Nacional de La Plata junto a la editorial, por respaldar y

promover libros de computacin que promulgan la importancia de la participacin activa de los usuarios en el
proceso de ingeniera de software, desde novatos hasta experimentados.
A nuestras familias, por su apoyo permanente e incondicional.
Organizacin de libro
En este libro se aborda toda la temtica relacionada con las interfaces del usuario y su proceso de desarrollo.
Se profundiza sobre la etapa de diseo de interfaces especficas, brindando una serie de recomendaciones
que permitan alcanzar la calidad de uso del producto. El libro presenta una organizacin que consiste en seis
captulos, acompaados por ejercitacin, casos de estudio y referencias especficas a cada uno.
En el captulo 1 se introducen los conceptos bsicos de la Interaccin Hombre Computadora. Se incluye
una breve referencia a su evolucin, se aborda el paradigma de independencia de dilogo y mtricas de
evaluacin de una interfaz. El captulo 2 abarca el proceso de diseo de la interfaz de usuario, haciendo
hincapi en las caractersticas ms importantes, el ciclo de vida de la interfaz de usuario y la prototipacin
como metodologa de desarrollo de una interfaz de usuario. Desde el captulo 3 al 5, el libro se adentra en
recomendaciones de diseo para interfaces especficas como interfaces visuales, icnicas e interfaces para la
Web. En el captulo 6 y ltimo se introducen los conceptos de accesibilidad y las normas internacionales para
construir interfaces accesibles.
Al finalizar cada captulo, se dispone de un conjunto de ejercicios prcticos y un caso de estudio relacionado
con la temtica. En general, versan sobre la aplicacin de las recomendaciones a versiones prototpicas de
sistemas desarrollados por los alumnos durante la cursada de la materia. Se han seleccionado para estos
casos las mejores entregas de las distintas cohortes del dictado de la materia de Diseo Centrado en el
Usuario
Se incluye tambin un anexo con el glosario de trminos y la resolucin de las ejercitaciones planteadas
en cada capitulo.
2- Reconocimientos - Organizacin de libro

Indice Temtico Pginas
pg. 5-6
Prlogo
pg. 7
Organizacion del libro
pg. 7-8
Acerca de los autores
pg. 8
Reconocimientos
pg. 9
introduccin
pg. 10 - 39
Capitulo I
Fundamentos en HCI
I- Qu es HCI?
II- Evolucin del HCI
III- Tipos de Dilogo hombre-computadora
IV- Clasificacin de las Interfaces del Usuario
V- Independencia del Dilogo
nCmo se logra esta estrategia?
nLa aparicin de un nuevo rol. El desarrollador del dilogo
nUna nueva interfaz. Dilogo interno y externo
nComplejidades de la independencia de Dilogo
VI- Componentes de la Interfaz del Usuario
VII- Mtricas de Evaluacin de una Interfaz
nObjetivos de la Interfaz del usuario
nPrincipios de Nielsen
Caso de Estudio
Ejercitacin
Referencias
pg. 40-62
Capitulo II
Proceso de Diseo de la Interfaz del Usuario
I- Introduccin
II- Caractersticas del Proceso de Desarrollo de la UI
III- Ciclo de Vida de la Interfaz del Usuario
IV- Etapa de Requerimientos de la Interfaz
nModelo SSOA
V- Etapa de Diseo de la Interfaz
nCaractersticas del Proceso de Diseo
VI- La interfaz y la Prototipacin
nCaractersticas de la Prototipacin
nVentajas de la Prototipacin
nTipos de Prototipos
VII- Etapa de Implementacin
nHerramientas para el desarrollo de la Interfaz
VIII- La importancia de la Evaluacin de las interfaces del usuario
nMtodos de Indagacin
nMtodos de Inspeccin
Ejercitacin
Referencias
pg. 63-94
Capitulo III
Normas de Diseo de las Interfaces Visuales
I -Introduccin
II -Caractersticas de las Interfaces Visuales
III - Descripcin de las Tcnicas de Interaccin Visual
Indice temtico -3
IV - Las Tcnicas de Interaccin Visual y sus Aspectos de Diseo
nMltiples Ventanas
nMens
nManipulacin Directa
nGestos
nFeedback Visual
nDependencias
nAnimaciones
nExploradores de Objetos
nCajas de Dilogo
Ejercitacin
Caso de estudio
Referencias
pg. 95-114
Capitulo IV
Cualidades de una Interfaz Icnica
I -Introduccin
II -Caractersticas de una Interfaz Icnica
nEl Diseo Icnico y los 7 Pasos de Norman
nEl Diseo Icnico y la Correspondencia
nEl Diseo icnico y la Consistencia
III -Ventajas de una Interfaz Icnica
IV - Complejidad del Diseo Icnico
V - Especificacin Formal de una Interfaz Icnica
VI - Ejercitacin
VII - Caso de estudio
VIII - Referencias
pg. 115-141
Capitulo V
La Interfaz Web y sus Principios de Diseo
I- Introduccin
II- Caractersticas Especficas de un Sitio Web
III- Particularidades en el Desarrollo Web
nActividades previas al Diseo del Sitio
nLa Ingeniera de Usabilidad
IV- Principios de Diseo del Sitio Web
nPrincipios de Diseo a Nivel de Sitio
- La estructura del sitio Web
- La navegacin del sitio Web
- Los hipervnculos
nPrincipios de Diseo a Nivel de Pgina
-Diseo general de las pginas Web
-La pgina inicial
-Pgina con formularios
nPrincipios de Diseo a Nivel de Contenido
-Diseo general del contenido
-Lenguaje empleado
Casos de Estudio
Ejercitacin
Referencias
pg. 142-172
Capitulo VI
Diseo de Interfaces Accesibles
I- Introduccin
II- Accesibilidad en la Interfaz del Usuario
nConsideracin de distintas discapacidades
4- Indice temtico
nAnlisis de herramientas para discapacitados
III- Accesibilidad en la Web: su problemtica
nFalta de Diseo Universal en la Web
nFalta de Cumplimiento de las Normas de Accesibilidad
nProblemticas con los Recursos de Adaptacin
IV- Legislacin y Normas Internacionales sobre Accesibilidad
V- Normas de Accesibilidad en la Web
nPrincipios generales de Accesibilidad
nRecomendaciones de Accesibilidad de la W3C-WAI
-WCAG 1.0
-WCAG 2.0
VI- Comprobacin de la Accesibilidad Web
Casos de Estudio
Ejercitacin
Referencias
pg. 173-174
Conclusiones Generales
pg. 176-187
Apendices
Glosario de trminos utilizados pg. 177-180
Ejercitacion Resuelta pg. 181-187
nCapitulo I
nCapitulo II
nCapitulo III
nCapitulo IV
nCapitulo V
nCapitulo VI
Indice temtico -5
Prlogo
Si usted est a punto de comenzar a desarrollar un sistema de software, - no programe todava!.
Antes de comenzar a escribir las sentencias que constituirn su futuro sistema de software, detngase
a analizar si previamente resolvi cuestiones de diseo fundamentales, para garantizar una mejor
calidad de su producto.
Esto no significa nicamente contar con un anlisis de requerimientos exhaustivo, con el diseo
completo de los algoritmos funcionales y de la representacin de los datos que el sistema va a
gestionar.
Hay otras cuestiones que deben realizarse antes de la etapa de programacin, que es el
tratamiento de la interfaz del usuario como una componente del software autnoma tan importante
como la parte funcional del sistema.
La misma, debe ser analizada y diseada con detenimiento, puesto que constituir el nico medio
que el usuario tendr para acceder y alcanzar la funcionalidad subyacente, ser su puerta de entrada,
su nico ambiente de trabajo y de comunicacin en donde podr llevar a cabo sus intenciones y su
resolucin de problemas.
Hay muchas expresiones por parte de desarrolladores de software, que se han odo en el mbito
informtico, ante la experiencia directa con usuarios finales. Expresiones tales como:
-Pero... por qu critican mi sistema?, si funciona!;
-Por qu despus de instalarle el sistema, el usuario me llama constantemente para que le
explique cmo utilizarlo?!;
-Por qu el usuario se equivoca tanto?... si el sistema realiza bien todas las funciones que me
pidi!, o
-Ya es imposible seguir reabriendo y modificando el cdigo por cuestiones superficiales de
apariencia y comportamiento de la interfaz!.
El objetivo de este libro, es justamente plantear las recomendaciones de diseo a nivel de
interfaz necesarias para que usted justamente no sea el prximo en realizar alguno de estos
planteamientos.
Lo que sucede, es que por siempre se consider al usuario como aquel que especificaba los
requerimientos del sistema y, el que luego se encargaba de la carga de datos para el procesamiento.
El contacto con ellos era en la etapa inicial y al final, para el uso del producto. Pero, hay que tener en
cuenta, que ellos determinan el logro del producto, intervienen en cualquier medida de xito, como
ventas, visitas, quejas, sugerencias. Ellos influyen no slo en la eleccin y utilizacin del software,
sino en el grado de permanencia del mismo, en su vida til.
Es apropiado, entonces, pensar en darle al usuario, otro grado de importancia durante el desarrollo
mas que nada de la componente de interfaz, que rene aspectos subjetivos, tiene en cuenta los
factores humanos y las formas de interaccin adecuadas al perfil del usuario.
Hoy en da, debe existir una mayor reconciliacin, un cooperativismo entre el usuario y el
desarrollador, donde el usuario participe, decida, critique, evale y apruebe en un marco prototpico,
mientras el producto est en vas de desarrollo.
Entonces, a lo largo de esta gua, se van a abordar los temas ms importantes referentes a la
Interfaz del Usuario, sus caractersticas, su proceso de desarrollo y se va a profundizar principalmente
en su etapa de diseo, en el anlisis e investigacin de principios o normas que garanticen una
correcta componente de interaccin.
Esto constituir la base para que el desarrollador pueda contar con un diseo completo y
comprobado ante el usuario, de la interfaz que se va a proveer en el sistema, garantizando una
directa traslacin a la codificacin y una aprobacin final del producto.
Vale aclarar, que mucho del contenido expuesto en este libro, se basa fundamentalmente en
la experiencia vivida a lo largo de una vasta carrera docente y profesional, con ms de diez aos
de formacin e investigacin en temas de Interfaz del Usuario, Interaccin Hombre-Computadora,
Diseo y Prototipacin.
Muchos de los ejemplos y casos planteados como recomendaciones surgen de la actividad
acadmica y profesional, del contacto directo con los alumnos que cursan, o han cursado, las
materias Diseo Centrado en el Usuario e Interfaces Avanzadas en la Facultad de Informtica de la
Universidad Nacional de La Plata, desde el ao 1992 a la fecha.
6- Prlogo
Desde esa fecha, se percibi la necesidad de incluir en la formacin de los profesionales
informticos, la perspectiva del usuario y de incluir dentro de la Ingeniera de Software, en permanente
evolucin, un libro especialmente dedicado a las Interfaces del Usuario.
Muchas gracias.
Prof. Francisco Javier Diaz

Director del rea de investigacin
de Interfaces del Usuario.
Laboratorio de Investigacin
en Nuevas Tecnologas Informticas.
Lic. Ivana Harari

Profesora de Diseo Centrado
en el Usuario e Interfaces Avanzadas
Lic. Ana Paola Amadeo

Jefe de Trabajos Prcticos de Diseo
Centrado en el Usuario e Interfaces Avanzadas
Prlogo -7
Introduccin
Millones de personas utilizan hoy en da recursos informticos tales como computadoras, redes de
computadoras, tablets, smartphones, para solventar problemas de comunicacin, de trabajo o por cuestiones
cotidianas.
A medida que el nmero de usuarios se ampla cada da, incorporando personas de formaciones y culturas
dispares, aumenta a la par la demanda de los mismos de adquirir sistemas de software con mayor nivel de
asistencia y facilidad de uso.
Sistemas interactivos que provean un estilo de comunicacin ms simple, que sean cada vez ms fciles de
utilizar, de instalar, de aprender, sin requerir ningn tipo de entrenamiento especfico en Informtica. Adems,
se pretende que el software brinde mecanismos de interaccin ms inteligentes y que se adapte al usuario en
forma eficiente.
El usuario necesita ver al sistema interactivo que est utilizando en su computadora como una herramienta
capaz de ayudarlo a resolver sus problemas, a concretar sus intenciones. Pero esto no siempre es as. Es
muy comn que se le sume innumerables problemas ms al utilizar el software, debiendo solucionar fallos o
errores producidos cuyas causas no son claras, aprender cuestiones tcnicas imprevistas, incurrir a ciertas
artimaas para sortear obstculos innecesarios, adivinar cmo realizar determinada tarea recurriendo a la
tcnica de prueba y error.
Aunque la componente funcional est correcta y completamente desarrollada, existen un sin nmero de
problemas de interaccin que pueden empaar el acceso y productividad de la misma, provocando en el peor
de los casos, la modificacin general del software o el desuso.
Estos problemas de interaccin residen en una componente del software denominada Interfaz del Usuario,
que se encarga de innumerables cuestiones como la entrada y salida de la informacin, visualizacin de los
datos, soporte, manejo y control del dilogo con el usuario final, entre otros.
La interfaz del usuario o componente de dilogo es una parte del software cuyo diseo afecta el nivel de
productividad del sistema general, incide en el grado de satisfaccin que pueda percibir el usuario, por lo tanto
es determinante para la eleccin, utilidad y evaluacin final del software.
Como la interfaz del usuario se encuentra dentro del sistema de software, su diseo e implementacin est
en manos del especialista informtico, no puede delegarse a un diseador visual o a cualquier otro profesional.
Es obligacin del desarrollador de sistemas atender tanto cuestiones funcionales como de interaccin,
dando el mismo nivel de importancia a cada una de estas partes y responsabilizndose de su integracin,
desarrollo y control.
Es necesario entender que el desarrollo de la interfaz del usuario forma parte del proceso de la Ingeniera
del Software. Como es la nica parte del sistema que interacta directamente con los usuarios, es fundamental
efectuar un estudio completo del comportamiento humano.
Se debe incluir como requerimientos indispensables en la generacin del software parmetros tales como
ergonometra, facilidad de uso, amigabilidad, simpleza (en trminos de reducir el esfuerzo mental del usuario
de llevar a cabo en la mquina la tarea en mente o pensada), flexibilidad, naturalidad (en el sentido que el
usuario a travs de la pantalla vea reflejado o modelado su realidad).
La interfaz del usuario debe ser diseada teniendo en cuenta principios de diseo propios que no coinciden
con la componente de aplicacin. Debe ser planteada bajo la consideracin de factores especficos que inciden
en su gestacin, tales como factores humanos principalmente, perfil de los usuarios, elementos del entorno,
hardware disponible.
Su diseo parte desde un profundo conocimiento de las/los usuarios finales del software y su contexto, ms
que desde los trminos computacionales y algoritmos de programacin.
Debido a que el proceso de diseo est centrado en el usuario, se trabaja con un nivel de incertidumbre y
ambigedad elevados, por lo que hace que el ciclo de vida de la interfaz sea especial y deba ser tratado en
forma independiente. Esta componente se construye con la prctica, necesita ser diseada, evaluada varias
veces hasta alcanzar los requerimientos de los usuarios. Se generan versiones prototpicas de la interfaz que son
puestas a prueba aunque la misma est incompleta y aunque an no tenga acoplada la componente funcional.
En este manual, se va a analizar estas cuestiones, se va a realizar un abordaje desde lo conceptual y
metodolgico y se va a desplegar una serie de normativas que hacen al buen diseo de la componente de
interaccin, teniendo en cuenta distintos tipos de interfaces del usuario. Se incluyen ejemplificaciones y se
analizan casos de uso prcticos concretos.
Mediante el estudio, exploracin y puesta en prctica de estas normas y recomendaciones de diseo, se
logra mejorar significativamente los canales de comunicacin e interaccin con el usuario final, optimizando
la calidad del sistema en general.
8- Introduccin
Fundamentos en HCI
-9
Fundamentos en HCI
La multiplicidad de aspectos, metodologas y de procesos

a considerar para el diseo de una correcta interfaz, que
sea ptima desde el punto de vista del usuario y acorde a la
lgica del objetivo especfico del sistema, hace necesario
conocer todos los conceptos y terminologas que estn
ntimamente relacionados con el rea de HCI.
Temas a Tratar
I- Qu es HCI?
II- Evolucin del HCI
III- Tipos de Dilogo hombre-computadora
IV- Clasificacin de las Interfaces del Usuario
V- Independencia del Dilogo
nCmo se logra esta estrategia?
nLa aparicin de un nuevo rol. El desarrollador del dilogo
nUna nueva interfaz. Dilogo interno y externo
nComplejidades de la independencia de Dilogo
VI- Componentes de la Interfaz del Usuario
VII- Mtricas de Evaluacin de una Interfaz
nObjetivos de la Interfaz del usuario
nPrincipios de Nielsen
Caso de Estudio
Ejercitacin
Referencias
10- Fundamentos en HCI

I - Qu es HCI?
La interaccin hombrecomputadora, comnmente referida con la abreviatura HCI por Human Computer
Interaction, es el intercambio observable de informacin, datos y acciones entre un humano y la computadora,
y viceversa.
Est constituida por el dilogo, la conversacin, la comunicacin que pueda fluir en ambas direcciones,
entre una persona y el sistema de software que est utilizando.
La interfaz del usuario, en cambio es el medio por el cul la interaccin hombre-mquina es establecida,
manejada y controlada. Conforma la parte del software y hardware que permite, que ese intercambio de
informacin y sus distintas secuencias o hilos de dilogo, se produzcan.
Estos dos trminos, interaccin hombre-mquina e interfaz del usuario, estn muy entrelazados en el
proceso de desarrollo y en estos casos se los usa como sinnimos. En muchos contextos ambos conceptos
se refieren a las entradas del usuario final, su tratamiento localizado de las mismas, la visualizacin de los
estados del sistema y la presentacin de las salidas o respuestas.
La transformacin funcional o algortmica de las entradas de la informacin a las salidas del sistema,
pertenece a la componente computacional o de aplicacin. Entonces, a travs de HCI, se despega la lgica
de la interaccin como por ejemplo, la lgica del negocio.
Desde una concepcin ms amplia, se puede definir HCI tambin como una disciplina. Se la considera
un rea dentro de las Ciencias de Computacin que se encarga del diseo, evaluacin e implementacin de
sistemas de computacin interactivos, para el uso humano, incluyendo el estudio de todos los fenmenos
concernientes a ello.
Analizando ms en profundidad esta ltima definicin, los alcances de esta nueva disciplina son muy difusos
y, pueden influir en ella factores muy heterogneos, desde aspectos tecnolgicos vinculados al hardware a
aspectos sociales o psicolgicos del usuario. Inciden adems, cuestiones diversas como facilidad de uso,
productividad, eficacia para expresar distintas posibilidades, capacidad de adaptacin de acuerdo a distintos
usuarios, desde nios a personas de mayor edad, pasando por distintas culturas y caractersticas sociales.
Como es un rea que se centra fundamentalmente en la interaccin entre humanos y mquinas, se pueden
plantear muchas situaciones diferentes. Cuando se refiere a humano, puede considerarse desde un usuario
particular, un grupo de usuarios, una organizacin o corporacin, hasta el mundo entero, como es el caso
de las aplicaciones para Internet. Cuando se refiere a mquina, puede incluirse desde una simple PC, una
workstation, una Intranet o hasta una supercomputadora con mquinas computacionales embebidas.
Adems, HCI se convierte en un rea interdisciplinaria, que puede nutrirse de nociones provenientes de la
Psicologa, por la aplicacin de teoras de procesos cognitivos y el anlisis emprico del comportamiento del
usuario; de la Sociologa y Antropologa, por el estudio de la interrelacin entre la tecnologa, el trabajo y las
organizaciones; del Diseo Industrial, por el estudio y diseo de productos de interaccin; del Diseo Visual,
por el uso de las formas, colores y otros paradigmas visuales y sus diferentes aplicaciones; entre otros.
Otro punto que no hay que olvidar, son los aspectos relacionados con la Tecnologa e Ingeniera, vinculados
a la capacidad grfica de las pantallas y dispositivos, para que el usuario ingrese informacin, ya sea por
teclado, mouse, lpiz ptico, pantalla digital, voz, telfono, entre otros medios.
Entonces, mientras exista el dilogo entre una mquina y un humano, surgirn innumerables factores
relacionados con el HCI, que incluirn todos los aspectos para el diseo y construccin de interfaces del
usuario adecuadas.
A continuacin, se mostrar una figura que resume las interrelaciones entre los diferentes tpicos que
aborda el rea de HCI.
Figura 1.1: Variedad de Tpicos que involucra el HCI
Fundamentos en HCI -11

Los sistemas de computacin existen dentro de un medio social, organizacional y de trabajo. Dentro de
este contexto, se encuentran las aplicaciones. Incorporar computadoras en el trabajo implica un proceso de
integracin.
Adems del uso y contexto social de las computadoras, del lado humano debemos considerar el
procesamiento humano de la informacin, la comunicacin -el lenguaje- y las caractersticas fsicas del usuario
-ergonometra-.
Desde el punto de vista de la computadora, una variedad de tecnologas han sido desarrolladas para
soportar la interaccin con humanos, como los dispositivos de entrada y salida. Existen numerosas tcnicas
para organizar el dilogo y generarlo, las cules sirven para implementar cuestiones ms especficas del mismo.
Ejemplos de estos se encuentran en las tcnicas de visualizacin por computadora, tcnicas para dilogo
multimedial, para dilogo no visual o conversacional, tcnicas de Inteligencia Artificial, de dilogo basado en
agentes, tcnicas para dilogo multi-usuario, entre otras.
Dilogos complejos o interfaces del usuario con caractersticas de avanzada, pueden llevar a consideraciones
de arquitecturas de sistemas necesarias para soportar cuestiones como tiempos de respuesta, interconectividad
de redes, mltiples ventanas, interfaces multiusuarios cooperativas, utilizacin de bases de datos, acceso a
servicios especficos, entre otros.
Finalmente, hay un proceso de desarrollo que incorpora el diseo del dilogo, herramientas de programacin
y tcnicas de evaluacin, cuyos resultados afectan las etapas anteriores, retro alimentndolas, en un proceso
de continua mejora.
II - Evolucin del HCI

Debido a que las formas, los medios, los canales de interaccin entre los humanos y las computadoras se
modifican con el tiempo y evolucionan muy rpidamente, la disciplina de HCI es muy sensitiva a los cambios
y tiempos de respuesta.
Un caso concreto fue el descubrimiento del mouse, creado por Douglas C. Engelbart en el ao 1968. Este
pequeo dispositivo produjo desde el punto de vista del HCI, el surgimiento de un nuevo estilo de interaccin
y de comunicacin, incorporado en las Interfaces Grficas. El usuario pas, de expresar sus intenciones
mediante la escritura de comandos, a demostrarlas manualmente mediante el sealamiento, el cliqueo, el
arrastre de objetos. Adems, trajo como consecuencia toda la programacin grfica basada en el mouse y
sus eventos.
Entonces, la interaccin hombre-mquina o la interfaz del usuario se ve afectada por diversos factores.
Puede variar dependiendo de diferentes situaciones, haciendo sumamente complejo el diseo de la misma.
Proveer el mejor estilo de dilogo en la interfaz, la visualizacin y el comportamiento ms ptimos no es una
tarea fcil, se maneja con informacin incierta, con un alto nivel de ambigedad y variabilidad temporal, que
hace complicado tener parmetros absolutos o estticos, sobre el grado de correccin de la misma.
Se requiere de un proceso de evaluacin permanente y espritu crtico para que la interaccin sea ms
natural. Lo que se percibe como amigable vara con la introduccin de tecnologas y el surgimiento de
actitudes distintas, por ejemplo, la simplicidad y naturalidad con que los nios y adolescentes usan los
mensajes de texto de la telefona celular.
Recordar
rHCI se encuentra ntimamente relacionada con el avance de la tecnologa, de las
comunicaciones y de los efectos sociales que se producen con el tiempo.
Existen muchos elementos que provocan que el modo de interactuar entre un ser humano y una computadora
se modifique y evolucione con el tiempo. Entre los aspectos ms influyentes en la evolucin del HCI, se pueden
mencionar:
Aspectos Explicacin
Influyentes
Cuestiones de nCada vez el usuario podr contar con hardware ms potente, con mayor
hardware capacidad de memoria y velocidad. La interfaz que se disee debe tener en
cuenta aspectos de rapidez, flexibilidad.
Nuevas tecnologas nEl usuario puede conseguir dispositivos no tradicionales como medio de
en dispositivos interaccin, como ser cmaras, anteojos especiales, lpiz ptico, o como es el
caso del surgimiento del telfono celular y PALMs para acceder a aplicaciones
de Internet.

Tamao de las nHay disponibles desde monitores muy grandes, finos y livianos, hasta
pantallas dispositivos como los celulares con pantallas reducidas de hasta 4 a 5 lneas
de texto.
nLos primeros, permitirn desarrollo paper-like, sistemas de interaccin que
se basan en una pantalla parecida a un papel electrnico, mientras que los
segundos, permitirn portabilidad y movilidad llevando la interfaz en el bolsillo.
Incremento e nHay un avance especfico en los medios de entrada, con la aparicin de la
innovacin en voz, gestos, lpiz pticos, celulares.
tcnicas de entrada
Incremento nSe suman da a da potenciales usuarios como nios, adultos mayores,
de usuarios gente con ciertas discapacidades, con distintas formaciones, entrenamiento o
de distintas preparacin.
formaciones nLa interaccin de las mismas con la computadora, presenta caractersticas
muy particulares a considerar dentro de la interfaz.
Inclusin de la nMuchos elementos domsticos como microondas, portones, hasta los
Computacin automviles vienen con caractersticas de programacin y el usuario se
en todos los acostumbra a manejar consolas y visores muy especficos, con interfaces muy
ambientes y distintas entre s.
contextos
Comunicacin en nComputadoras que se comunican a travs de LANs de alta velocidad,
cualquier lugar nacionalmente mediante WANs y va computacin mvil con tecnologas de
infrarrojo, ultrasnico o celular.
nPor lo tanto, servicios de datos y de computacin sern accesibles en cualquier
lugar y momento, alterando las formas de interaccin con la aplicacin.
Sistemas con nCada vez ms son requeridos servicios de asistencia y bsquedas para
gran componente facilitar y ayudar el trabajo de los usuarios.
funcional nLos sistemas interactivos deben incluir manuales, tutoriales interactivos para
un aprendizaje rpido, ayudas contextuales y procesos de inferencia, ya que la
gente no tendr tiempo de aprender en forma tradicional.
Disponibilidad nCada vez ms se aumentar la capacidad de grficos por computadora,
masiva de procesamiento de imgenes, transformaciones de imgenes, animaciones
Computer interactivas, que sern disponibles en chips baratos integrables fcilmente en
Graphics. cualquier computadora.
Interfaces para nLas Interfaces Groupware permiten a grupos de personas coordinarse,
GroupWare. encontrarse y proyectar en forma conjunta, mediante las computadoras.
nLas mismas generan un gran impacto en la naturaleza de organizacin y en
la distribucin de labores y responsabilidades.
Multimedia, nLa utilizacin de mltiples medios de comunicacin como texto, audio,
Hipermedia y grfico, animaciones o video, aplicados en programas multimedia como juegos,
Comunidades enciclopedias, cursos de entrenamientos, hace que la interfaz del usuario deba
Virtuales potenciar estos recursos visuales y brindar mecanismos para operarlos.
nTambin, el surgimiento de las comunidades virtuales, modifican las
caractersticas de la interfaz, brindando mecanismos especficos de interaccin
para que grupos de individuos compartan un inters comn va correo
electrnico, salas de chat, sitios de noticias, blogs o wikies.
Computacin Ubicua nLa disponibilidad de contar con muchas computadoras a travs de un
ambiente fsico, siendo invisibles al usuario, requiere de cuestiones tcnicas
esenciales como consumo de energa, conectividad inalmbrica, ms una
correcta interfaz del usuario.
nConstituye lo que se menciona como el 3er. movimiento en Computacin
-Third Wave-, donde hay n computadoras por usuario. El 1er.movimiento era n
usuarios por computadora mientras que el 2do. fue 1 usuario por computadora.
Acceso gil a Bases nSe requieren de sistemas de visualizacin y mtodos de bsqueda flexibles.
de Datos masivas
El concepto de nUsuarios comunes que tendrn la capacidad de adaptar, personalizar
User tailorability aplicaciones para su propio uso. Podr generar nuevas aplicaciones basadas
en su entendimiento de su propio dominio. Por lo tanto sern como autores de
sus propias aplicaciones.
Tabla 1.1: Aspectos que inciden en la Evolucin del HCI.

III - Tipos de Dilogo Hombre - Computadora
En el ao 1986, E.L.Hutchins, estableci que existen al menos dos metforas o formas en que los humanos
interactan con una computadora: la metfora conversacional y la del modelo del mundo. Estas dos metforas
corresponden unvocamente a dos tipos de dilogo, el secuencial y el asincrnico respectivamente.
En la metfora conversacional, la interfaz del usuario se basa en representaciones implcitas de los objetos.
El usuario debe describir acciones para manipular objetos en forma indirecta. Adems, l debe pasar de una
etapa de dilogo a la siguiente de una manera predecible y preestablecida por el sistema.
Esta metfora, permite tanto a los desarrolladores de software como a los usuarios, visualizar una secuencia
lgica y especfica del comportamiento. Por tal motivo, el dilogo que genera se denomina Dilogo Secuencial.
Este tipo de dilogo est incluido en la interaccin pregunta-respuesta (request-response), lenguajes de
comandos, navegacin a travs de mens y en las entradas de datos.
El dilogo secuencial, est relacionado con la interaccin va el teclado, que generalmente se utiliza en
los lenguajes tradicionales donde las sentencias de entrada y salida, estn intercaladas con el cmputo del
sistema.
En la metfora del modelo del mundo, la interfaz permite que el usuario final realice las acciones directamente
sobre representaciones de los objetos del mundo real. El usuario demuestra sus intenciones, mediante el
desplazamiento y manipulacin de esas representaciones visuales de los objetos. Por tal motivo, el estilo de
interaccin caracterstico de esta metfora, es la Manipulacin directa y el mouse, es el dispositivo fsico
apropiado para esto. Tambin, se lo referencia como Dilogo Asincrnico, pues es el usuario quien decide
cundo iniciar el dilogo y con qu objeto hacerlo.
A diferencia del dilogo secuencial, donde se presenta ante el usuario una tarea por vez, aunque sea elegir
entre varias opciones de un men, en el dilogo asincrnico se dispone de muchas opciones al mismo tiempo.
Es asincrnico desde el punto de vista que la secuenciacin de cada camino es independiente de los dems.
Tambin al dilogo asincrnico se lo denomina Dilogo basado en Eventos, pues son las acciones del usuario
que inician la secuencia del dilogos vistas como eventos de entrada.
Asociados a esta metfora del modelo del mundo, se pueden encontrar los Dilogos no lineales o multi-
thread, que se refieren a la multiplicidad de caminos de dilogo, de hilos de control simultneos, de acciones
alternativas disponibles para el usuario en un determinado momento. Las cajas de dilogo estn relacionadas
estrechamente con este tipo de dilogo.
Otro tipo de dilogo, es el Dilogo Concurrente que es un dilogo multi-thread, en el cul ms de un
hilo de dilogo puede ser desarrollado paralelamente. Por ejemplo, un reloj que est presente mientras que
el usuario est dibujando. Adems, de existir muchas alternativas de dilogo, stas estn abiertas en forma
simultnea.
Entonces, se tienen:
Mundo Conversacional Mundo Modelo
Dilogo secuencial Dilogos asincrnicos,

multi-thread, concurrente
Figura. 1.2: Tipos de dilogos.

En la actualidad, estn surgiendo otras formas de interaccin, como la Interaccin social o grupal, donde
existe un grupo de usuarios que interacta en forma conjunta con la interfaz. Este tipo de interaccin, es el
provisto en las Interfaces para Groupware, que se explicar ms adelante. Se caracteriza por tener que
amoldarse a la complejidad y dinmica del grupo, y por proveer mecanismos especficos para solventar
cuestiones de coordinacin, comunicacin y colaboracin entre los miembros del mismo.
Tambin, emergi el concepto de Interfaz o Interaccin basado en Agentes, infundido por Pattie Maes
[Maes P. Wexelblat A., 1996], en donde el dilogo ya no es iniciado y controlado por el usuario como en
Manipulacin directa, sino que la interfaz tiene la capacidad de hacerlo. La misma puede, tanto empezar una
conversacin como finalizarla, puede guiar, preguntar, sugerir, ensear, interrumpir y dems actitudes, que
no son admisibles en los tipos de dilogos convencionales. Este tipo de interaccin, est basado sobre una
metfora en donde la interfaz se comporta como un interlocutor humano, que tiene por objetivo colaborar con
el usuario en la resolucin de sus problemas.
El concepto de manipulacin directa sigue vigente hoy en da en las aplicaciones que soportan interacin
gestual como las presentes en smartphones, tablets, juegos para XBOX, Wii y PS Move.
IV - Clasificacin de las Interfaces del usuario
Con la llegada de los sistemas de tiempo compartido en la dcada del 70, el dispositivo de interfaz disponible
era el teclado. Esto provocaba el desarrollo de un determinado estilo de interfaz que era totalmente textual,
denominado Interfaz orientada a Comandos.
Un procesador de comandos es un sistema al cul se le ingresa una cadena de caracteres que luego, ser
analizada para determinar la funcin apropiada de la aplicacin a invocar.
Este es el caso de la interfaz del usuario ms elemental, se caracteriza por ser fcil de desarrollar, se
interacta nicamente con la consola y teclado, las pantallas y las salidas del sistema son tradicionales, con
impresiones a cadena de caracteres. Esto tiene ciertas limitaciones, puesto que la entrada desde el teclado
provoca mayor tasa de errores, requiere que el usuario recuerde el conjunto de posibles entradas legales, y
brinda una visin de la aplicacin, del estilo verbo-objeto que no resulta amigable, ya que el usuario percibe
que es la aplicacin la que tiene el control total de la interaccin.
Luego, a medida que se increment la complejidad del hardware, aparecieron las Interfaces orientadas
a Mens, que se caracteriza por presentar un conjunto de opciones, que pueden ser seleccionadas por los
usuarios. Con estas interfaces se permiti abstraer la interfaz de la aplicacin, pues fuerza al desarrollador a
considerar el espacio de comandos y acciones como una entidad independiente.Se caracteriza por ser fcil de
usar y de implementar, la prefirieron la mayora de los usuarios inexpertos, sin entrenamiento previo.
Estudios sobre factores humanos demuestran que el proceso de lectura y eleccin de las opciones del
men, resulta ser ms sencillo que la invocacin a comandos, que requiere recordar la sintaxis de los mismos.
Adems, alienta a la navegacin y exploracin del sistema. Pero tambin, se le atribuyen ciertos inconvenientes
como, por ejemplo, en los casos de presentar listas de opciones demasiado extensas donde resulta una tcnica
engorrosa, o cuando hay demasiados mens anidados que puede provocar la prdida del contexto.
Tanto las Interfaces basadas en Comandos, como las orientadas a Mens, utilizan al texto como el nico
medio de representacin y de interaccin, empleando un dilogo secuencial, por lo tanto estn encuadradas
en lo que se denomina Interfaces Textuales.
A mediados de la dcada de los 80, debido a los grandes avances tecnolgicos, la aparicin de pantallas con
mayor definicin, dispositivos de interaccin grficos, como por ejemplo, el lpiz ptico o el mouse, comenzaron
a desarrollarse para los sistemas de software, un estilo de interfaz ms poderoso que el textual.
As, surgieron las Interfaces Grficas (GUI) o Interfaces Visuales, que se caracterizaron por la utilizacin
de recursos visuales para la representacin de los objetos y por permitir la manipulacin directa de los mismos,
mediante un dilogo asincrnico.
Este tipo de interfaces, adems de incrementar el poder representativo, tambin aument los costos y la
complejidad para gerenciar este tipo de representaciones.
Como una clase especfica de las interfaces visuales, se encuentran las Interfaces Icnicas, que utilizan
como medio de interaccin y representacin visual, exclusivamente al cono. Se puede mencionar, que el cono
es una imagen, una figura, pero que tiene un significado o semntica subyacente. El mismo est determinado
por una imagen que debe ser significativa y fcilmente reconocible por la comunidad de usuarios.
Tanto las Interfaces Visuales como las Icnicas, sern desarrolladas en profundidad, en los Captulos
III y IV, respectivamente.
Tambin, se puede mencionar otro tipo de interfaces que son clasificadas como Interfaces Inteligentes,
puesto que permiten que el comportamiento de la interfaz se acerque an ms al usuario, proveyendo capacidad
de razonamiento, de adquisicin y aplicacin de conocimiento y de comunicacin de ideas.
Dentro de las Interfaces Inteligentes, se pueden citar a las Interfaces con signos de Adaptacin, Interfaces
Evolutivas e Interfaces con Inferencia, que presentan caractersticas dismiles respectos a sus objetivos
particulares, como a su cualidad de inteligentes.
Las Interfaces con signos de Adaptacin, brindan diferentes modos de interaccin que se pueden
seleccionar automticamente de acuerdo al tipo de usuario en cuestin. Son sensibles a los perfiles individuales
de los usuarios y a sus estilos de interaccin.
Las Interfaces Evolutivas, tienen la propiedad de cambiar y evolucionar con el tiempo junto con el grado de
perfeccionamiento que el usuario particular va adquiriendo con el sistema. Pueden acompaar la evolucin o
el crecimiento que presenta el usuario ante el uso del sistema, con nuevas ayudas, mensajes ms especficos,
un estilo de interaccin ms gil, entre otras cuestiones.
Las Interfaces con Inferencia, tienen la capacidad de captar secuencias de acciones que el usuario
repite con frecuencia. Una vez registrado esa costumbre y ante la prxima iniciativa del usuario de realizarla
nuevamente, el sistema se le adelanta y brinda la posibilidad de completar la secuencia de acciones en forma
automtica.
La automatizacin de este tipo de interfaces, se llevara a cabo mediante el reconocimiento y almacenamiento

de patrones observados en el comportamiento de cada usuario. Esta adquisicin de informacin es transparente
para el usuario y conforma una base de conocimiento especializado que, junto con parmetros o criterios de
evaluacin y de los mtodos apropiados para aplicarlo, constituyen un marco apropiado para que la interfaz
provea signos de inteligencia, simplificando la labor del usuario.
Tambin, se encuentran las interfaces presentes en los sitios de la World Wide Web, que debido al espectro
inmensurable de usuarios al que est dirigida, debe tener consideraciones de diseo y desarrollo especiales.
La misma va a ser explicada en detalle, en el Captulo V.
Existen otras interfaces importantes, como las Interfaces Accesibles, Interfaces para Groupware,
Interfaces puramente Conversacionales y las Interfaces Mviles.
Las Interfaces Accesibles, son aquellas que respetan las normas del diseo universal, para que pueda
ser accedida por cualquier usuario, independientemente de sus condiciones fsicas o mentales. Se encuentra
el Captulo VI, en donde se va a explayar ms este tema.
Las Interfaces para Groupware, se caracterizan por interactuar con un grupo de usuarios que tendrn
objetivos comunes, recursos a compartir, un ambiente virtual de reunin. La misma deber tener facultades
para solventar la coordinacin del grupo, como aspectos de colaboracin y comunicacin entre sus miembros.
Las Interfaces puramente Conversacionales, se montan sobre los sistemas telefnicos y se caracterizan
por no contar con una pantalla. El nico medio de salida es la voz y, la entrada puede ser a travs de la voz,
como tambin, a travs de los botones del dispositivo telefnico.
Las Interfaces Mviles, son aquellas presentes en los dispositivos inalmbricos como celulares y PALMs,
que los usuarios utilizan para acceder a la aplicacin. Cuestiones de interrupcin, distraccin, visualizacin de
una pantalla muy reducida, el apremio por acceder a la informacin en ese momento y en ese lugar, hacen
que la interfaz presente caractersticas de diseo muy especiales.
Por ultimo, se pueden citar otras interfaces no tan convencionales como las interfaces hpticas y las
multimodales. Las primeras, utilizan dispositivos que permiten al usuario emplear todos sus sentidos. Ellos
pueden tocar, oler, oir, sentir o manipular objetos simulados en entornos virtuales y sistemas teleoperados.
Adems de la sensacin de inmersin estas interfces proporcionan al usuario la posibilidad de interactuar con
el medio virtual logrando una transferencia bidimensional.
Las interfaces multimodales intentan adaptar el sistema al usuario, combinando distintas tcnicas de entrada
y salida, en conjunto con caractersticas de interfaces tangibles donde objetos reales del entorno del usuario
son convertidos en elementos de interaccin digital.
Vale aclarar, que un sistema interactivo puede proveer una interfaz del usuario que posea algunas
caractersticas de las clases de interfaces definidas anteriormente, y las combine, generando como resultado,
una interfaz hbrida.
Recordar
Las Interfaces del usuario se pueden clasificar en:
rInterfaces Textuales, Grficas e Icnicas
rInterfaces Inteligentes
rInterfaces para la Web y Accesibles
rInterfaces para Groupware
rInterfaces puramente Conversacionales
rInterfaces Mviles, Interfaces Hpticas y multimodales
V - Independencia del Dilogo

La introduccin de un sistema informtico, siempre implica cambios y modificaciones a la forma de trabajo,
los usuarios pueden emplear el tiempo que le resta de realizar sus actividades en forma automatizada, en otros
labores, o en distintas tareas adicionales.
La interfaz de un sistema, tiene que lograr potenciar los aspectos que sean pertinentes para cada trabajo,
ya sea para simplificar el tipeo, infiriendo lo que se est ingresando, para evitar la invocacin errnea de un
comando complejo, utilizando buenos mensajes de aclaracin y confirmacin, entre otras cuestiones.
El concepto es que la introduccin de una solucin informtica, cambia la realidad y que siempre tendr
asociado modificaciones ms o menos significativas, que impliquen fundamentalmente adaptar la interfaz
del usuario, ya sea el look & feel o cambios para mejorar la productividad y eficacia de la interaccin con el
mismo.
Pero, al principio, esta visin del sistema interactivo no se poda aplicar. La forma tradicional de desarrollar
sistemas de software, implicaba que las cuestiones de interfaz y de dilogo con el usuario, estaban fuertemente
ligadas con el software computacional. Las sentencias de entrada y salida al usuario, eran tratadas sin distincin
dentro del resto del cdigo, podan estar inmersas y entremezcladas dentro de sentencias de control, causando
un fuerte acoplamiento entre el flujo de dilogo con el flujo de control del sistema.
Si las cuestiones de interaccin con seres humanos, se encuentran inmersas y ocultas dentro de la
componente computacional del sistema, esto trae como consecuencia, una resistencia muy fuerte al desarrollo
de interfaces del usuario de alta calidad. Esto se debe a que se hace complicado su identificacin y tratamiento,
el dilogo se convierte en una componente cada vez ms resistente a cambios, no se puede profundizar en
las necesidades de adaptacin a cuestiones del usuario, y principalmente, no permite que la interfaz cumpla
con un ciclo de desarrollo especial que la caracteriza, con etapas de diseo, prototipacin y evaluacin, que
se suceden en forma iterativa, a travs de un marco donde las correcciones, modificaciones y refinamientos
son una constante.
En este contexto, H. Rex Hartson, Roger W. Ehrich, en el ao 1981, establecieron una definicin formal
sobre el concepto de Independencia de Dilogo, en donde especificaron que un sistema interactivo, deba
conformarse fundamentalmente, de dos componentes de software igualmente importantes e independientes,
denominadas interfaz del usuario y componente de aplicacin, o componente de dilogo y componente de
cmputos respectivamente, que deben ser tratadas en forma autnoma, desde el inicio del desarrollo del
sistema [Hartson, R. y Hix, D., 1989]
Esta definicin, se basa en el reconocimiento de las cuestiones de interaccin como una componente de
software que debe ser tratada en forma especial y separada del resto del sistema, durante todo el proceso de
desarrollo.
La idea de partida, es la definicin de una estructura del sistema, en donde se evite la modelizacin conjunta
e intercalada, entre la lgica de los procesos y las operaciones de entrada y salida, desde y hacia el usuario.
En la prctica, esto significa que la componente computacional o los procesos referenciados ms recientemente
como la lgica del negocio, se desentienden de todo lo que abarca los aspectos de la interfaz, o sea de cmo
es su estilo de interaccin, cmo son las cuestiones del dilogo y los hilos posibles de conversacin, si provee
un lenguaje de comandos para comunicarse con el usuario final o si est basada en mens o formularios. Se
despreocupa de cmo la entrada es adquirida desde el usuario y de la forma en que le son visualizados los
resultados. Directamente focaliza su inters especficamente en el procesamiento de la informacin.
La independencia del dilogo presenta principalmente dos grandes ventajas. Una, est ntimamente
relacionada con la Ingeniera de Software, debido a que esta separacin es crucial tanto para modificar fcilmente
la interfaz en su proceso iterativo de refinamiento como para su posterior mantenimiento.
Y, otra, es a nivel de factores humanos, debido a que constituye una estrategia en donde las cuestiones
especficas del usuario, como sus preferencias, hbitos, costumbres, manera de ser, caractersticas de sexo o
edad, experiencia particular, entre otros, pueden ser tratadas y evaluadas con nfasis y en forma especial. Esto
es, permite disear el dilogo de una manera que la computadora se adapte a los requerimientos del usuario,
convirtindose en una herramienta que se amolda al estilo particular del mismo.
Desde esta perspectiva, el dilogo podr conjugar la simplicidad de interaccin con la optimizacin en
el proceso de validacin, proveyendo feedback y ayudas eficientes, para asistir al usuario en su trabajo y lo
potencie, guindolo en su proceso de resolucin de problemas.
En este sentido, la Independencia de dilogo da lugar al tratamiento, estudio y evaluacin de aspectos
del usuario, vinculados a la experiencia, motivacin, edad, sexo, formacin, capacidades, suministrndole la
relevancia necesaria, para poder encarar y desarrollar correctamente la componente de interfaz.
Recordar
rIndependencia de Dilogo es una estrategia que permite que las decisiones de diseo que afectan
nicamente a la componente de dilogo, se realicen en forma independiente de aquellas que afectan
a la estructura del sistema de aplicacin y al corazn funcional.
Cmo se logra esta estrategia?

La independencia del dilogo no se implementa simplemente colocando buenos mensajes de error en
uno o dos procedimientos, ni tampoco apartando todo lo relacionado con las entradas y salidas, en mdulos
independientes, separados del resto de las rutinas de cmputo. Esto significa una buena prctica de
programacin, pero no asegura la independencia del dilogo, debido a que los procedimientos orientados al
dilogo, deben estar totalmente desacoplados del cdigo computacional y debe garantizar su modificacin en
forma independiente del resto del programa. An hoy, en muchos casos, el conocimiento relacionado con los
detalles del dilogo siguen inmersos dentro del cdigo de la aplicacin, y la tarea de desarrollar la interfaz,
contina errneamente ligada a una tarea de programacin.
La independencia del dilogo se soporta a travs de la separacin del dilogo y el software de la aplicacin
desde las etapas iniciales del desarrollo. Esto significa que un sistema de aplicacin interactivo, se compone
de una componente de dilogo, a travs de la cual se lleva a cabo toda la comunicacin entre el usuario final
y el sistema, y una componente computacional, que incluye los mecanismos de procesamiento funcional ms
especficos del sistema de aplicacin, mbito en donde no hay una interaccin directa con el usuario final.
La nueva entidad, el protagonismo y la visibilidad que toma la componente de dilogo en el desarrollo de
sistemas, implica un proceso de diseo, rediseo, evaluacin y mantenimiento, particular e independiente al
de la componente funcional, ligndose en el momento que se requiere una rpida prototipacin o ejecucin
del sistema total.
Como principales consecuencias de la Independencia del Dilogo, se pueden mencionar la aparicin de un
nuevo rol, que es la del desarrollador del dilogo, quin se va a responsabilizar de todo el proceso de desarrollo
de la interfaz, y el surgimiento de un dilogo interno entre la componente de interfaz y de la aplicacin, que es
el que permitir el enganche final de ambas partes, conformando el sistema interactivo en su completitud.
La aparicin de un nuevo rol: El desarrollador de dilogo

Por mucho tiempo, los dos principales roles involucrados en el desarrollo del software era el programador
de la aplicacin y el usuario final del sistema.
Estos dos roles diferentes frecuentemente tenan graves problemas en la comunicacin. El programador
impaciente por llegar a la codificacin tena dificultades en entender necesidades del usuario. Similarmente,
el usuario muchas veces no logra comprender los costos o grado de dificultad del desarrollo de determinados
requerimientos para el sistema, ni explicaciones tcnicas sobre determinado comportamiento efectuado por
el mismo.
La aparicin del rol de analista de sistemas, provey un medio de entendimiento entre el programador,
inmerso en un contexto completamente tcnico y el del usuario del sistema.
En los ltimos tiempos, ante la demanda de interfaces del usuario de alta calidad y cada vez ms efectivas,
la aparicin de especialistas en factores humanos fueron adquiriendo una significante importancia en los
equipos de desarrollo de los sistemas de computacin, puesto que focalizan su atencin y estudio a las
necesidades de los usuarios y a la forma de comunicacin con los mismos.
Esto llev al surgimiento de un nuevo rol, denominado desarrollador del dilogo tambin llamado autor,
diseador del dilogo, ingeniero de la interfaz del usuario.
El desarrollador del dilogo, es un especialista en factores humanos que se interesa y se encarga de todas
las etapas del desarrollo del software de la interfaz del usuario, abarcando el diseo, la implementacin y
evaluacin de la forma, contenido, estilo y secuenciacin del dilogo. El est involucrado en todo el ciclo de
vida, incluyendo anlisis de tareas, especificacin de requerimientos del sistema, investigacin y aplicacin
de normas de diseo, cuestiones de factibilidad del desarrollo, direccin de todo el proceso prototpico de la
interfaz.
Durante el diseo e implementacin del dilogo, este desarrollador hace uso de principios psicolgicos y de
factores humanos para construir y, paralelamente, evaluar y refinar una interfaz que soporte una comunicacin
efectiva y simple, entre el ser humano y la mquina.
Debe ser muy sensitivo frente a los requerimientos cognitivos del usuario final y a sus aspectos particulares,
debe profundizar por ejemplo situaciones como:
nFormas particulares en que se reacciona a los distintos colores, segn diferentes sociedades. Este
es el caso del color rojo que en pases orientales no est asociado a situaciones de riesgo;
nLos diferentes hbitos de lectura, que puede afectar en el orden de recorrido de la pantalla y
posicionamiento de los objetos en la misma;
nLas distintas actividades que implican diferentes posturas y costumbres que condicionan el estilo de
la interaccin. Por ejemplo, si es mejor la entrada por voz o por teclado, en un entorno industrial o en
una carga masiva de datos;
nLa postura, el nivel de atencin, los horarios de trabajo, afectan interfaces distintas que deben
apuntar a mejorar la productividad del usuario;
nLa edad y nivel cultural del usuario, que lleva a la utilizacin de distintas metforas para construir la
interfaz, donde su interpretacin depende de grados de madurez y aspectos sociales del mismo.
La Independencia de dilogo, define un marco en donde estas cuestiones como muchas otras ms, pueden
ser profundizadas y consideradas dentro del diseo de la interfaz, permitiendo el refinamiento y revisin de las
mismas, su comprobacin y la realizacin de modificaciones rpidas, por lo que el proceso de evaluacin y el
ciclo de revisin se puede efectuar mltiples veces.
Recordar
El desarrollador del dilogo tiene el rol y la responsabilidad de:
rEfectuar los modelos necesarios sobre los usuarios, el contexto, la aplicacin y aspectos tecnolgicos.
rEfectuar y converger al mejor diseo de la interfaz de acuerdo a los factores humanos analizados.
rEvaluar y refinar la interfaz segn su impacto directo sobre los usuarios.
Una nueva interfaz. Dilogo interno y externo

El dilogo externo es aquel que abarca toda la interaccin entre el usuario final y la componente del
dilogo, es la misma interfaz hombre-computadora.
Pero, la Independencia del Dilogo ha provocado la creacin de una nueva interfaz que toma lugar entre la
componente del dilogo y la computacional, y en consecuencia, esto trae aparejado la aparicin de un nuevo
tipo de dilogo entre ambas.
La componente funcional que no tiene mecanismos propios para la comunicacin directa con el usuario
final, requiere de un dilogo interno necesario con la componente de dilogo.
Este dilogo, se basa principalmente en la definicin concreta del intercambio de informacin entre ambas
componentes, los tipos, formatos de datos que una espera de la otra, si van a estar ya validados o no, cules
son las condiciones estipuladas, cuestiones de excepciones o errores que pueden surgir, quin los trata,
como tambin en qu forma y estructura, se entregarn los resultados entre las partes. Hay que estipular
claramente, cules sern los servicios y las funciones que una componente necesita de la otra y, las cuestiones
protocolares y de sincronizacin necesarias.
Esta nueva interfaz interna, con su dilogo especfico, son las bases para la comunicacin entre el
desarrollador del dilogo y el del software de la aplicacin durante el proceso de diseo del sistema y es un
punto crucial para llevar a cabo la ligazn del dilogo y el cmputo en los tiempos de ejecucin.
El dilogo interno, y su representacin formal en la etapa de diseo constituye una clave esencial para
lograr la Independencia del Dilogo. Tanto la interfaz del usuario o la aplicacin, pueden ser alteradas en
forma independiente siempre y cuando, se mantenga la consistencia en la representacin del dilogo interno
comn a ambas.
Complejidades de la Independencia de Dilogo

Lamentablemente la estrategia de la Independencia de dilogo, no est exenta de inconvenientes y
dificultades.
Uno de los problemas principales que se le atribuye, es que debido a que se cuenta con un nuevo rol
para el desarrollo de la componente de dilogo, aumenta el grado de comunicacin e interaccin entre los
diseadores y los programadores, sumando problemas de ambigedades, malas interpretaciones, deslinde de
responsabilidades, pugna por toma de decisiones, entre otros inconvenientes.
Es necesario para solucionar esto, fijar claramente desde el inicio, los roles que van a intervenir, especificando
puntualmente las responsabilidades de cada uno y sobre qu componente del sistema van a actuar. Como
tambin, la definicin precisa sobre el dilogo interno, estipulando cules son exactamente los datos, de qu
tipo y formato es la informacin que fluir entre la componente de interfaz y la de la aplicacin, como as los
servicios o funciones que se necesitan de cada una.
Otro inconveniente provocado por la Independencia del Dilogo, es que, debido a la existencia de nuevas
componentes y mdulos, puede causar una disminucin en la performance total del sistema, a medida que
aumenta la intercomunicacin entre las mismas, en tiempo de ejecucin. Esto lleva a la consideracin de nuevas
arquitecturas del sistema que enfatice y facilite por ejemplo, la ejecucin concurrente entre la componente de
dilogo y la computacional, y considere hardware innovador para el soporte del dilogo.
En el plano de un dilogo secuencial, la separacin fsica entre la componente de interaccin y la
computacional, desde la etapa de diseo es medianamente directa. Esto se debe a que resulta fcil delinear
un patrn de interaccin sincrnico que considera las etapas de entrada de datos, requerida al usuario final,
del proceso de cmputo de los dichos datos y, de la salida resultante provista por el sistema.
En cambio, en un dilogo con manipulacin directa los costos para lograr la separacin entre las dos
componentes es mucho ms alto, porque el usuario final realiza operaciones y acciones en la interfaz sobre las
representaciones visuales de los objetos de la aplicacin de una manera directa, visual y asincrnica. En este
caso, la ejecucin del dilogo y del cmputo tienden a estar ms interrelacionados y generalmente se comparte
representaciones de datos comunes de los objetos de la interfaz y de los de la aplicacin subyacente.
En un dilogo con manipulacin directa, hay una necesidad de acercamiento entre la interfaz y la semntica
de la aplicacin, por ejemplo para un simple caso de proveer feedback semntico, y esto hace ms difcil la
separacin de las componentes requerida en la Independencia de dilogo. Esto fuerza a importantes cambios
en la arquitectura de los sistemas interactivos.
De todas maneras, a menor o mayor costo, se puede lograr que las decisiones de diseo incluyendo tanto
la apariencia como el comportamiento de la interfaz, puedan mantenerse independiente del software que
manipula las correspondientes estructuras de datos, y en todos los casos, se comprueba que las ventajas de
mantener la independencia del dilogo son mayores que sus posibles dificultades.
VI - Componentes de la Interfaz del Usuario

Uno de los modelos ms conocidos sobre la componente de la interfaz del usuario, es el Modelo Seeheim
o Seeheim Model, definido en el marco de un Workshop efectuado en Seeheim, Alemania, en el ao 1982.
Este modelo, es una descripcin estructural que especifica la manera en que la interfaz del usuario se
relaciona con el sistema de aplicacin, puntualizando la independencia entre ambas partes del sistema.
Adems, describe a la interfaz, mediante dos componentes: la Componente de Presentacin, que conforma
su parte esttica, y la de Control de Dilogo, que describe la componente dinmica de la misma.
Ms tarde, en 1985, el modelo fue modificado por Mark Green, perteneciente a la Universidad de Alberta,
donde le introdujo una tercer componente denominada Modelo Interfaz-Aplicacin, para referenciar el dilogo
interno con la aplicacin [Green, M.,1985].
La versin final del modelo, qued de la siguiente manera:
COMPONENTES CONTROL MODELO

USUARIO DE DE INTERFAZ - APLICACIN
PRESENTACIN DILOGO APLICACIN
Figura 1.3: Modelo de Seeheim, Versin modificada por M.Green
La componente de presentacin es la responsable de la visualizacin de la interfaz, especifica las pantallas

que se presentarn al usuario y el estilo de interaccin. Los colores, ubicaciones de la pantalla, figuras, mens
son conceptos relacionados con esta componente. En ella, se definen los siguientes aspectos:
nSe especifica el aspecto y apariencia de la interfaz. O sea, se define la parte del look, del concepto
de look&feel de la interfaz.
nSe define el estilo de interaccin, tipos de dilogo y de interfaz.
nSe identifican los objetos de interaccin.
nSe establece el esquema de ventanas.
nSe definen los dispositivos de hardware, asociados a la entrada y salida, a incorporar en la interfaz.
La componente de Control de Dilogo, est a cargo del manejo de la secuencia de eventos y del control de
las tcnicas de interaccin provistas en la interfaz. Establece y define la parte dinmica de la misma. En esta
componente, se establecen fundamentalmente, las siguientes cuestiones:
nSe especifica el comportamiento de la interfaz. O sea, la parte del feel, del concepto de look&feel
de la interfaz.
nSe define el manejo, control, secuenciacin y lgica del dilogo.
nSe controlan y se manejan los objetos de interaccin presentes en la interfaz.
nSe controla y se maneja el sistema de ventanas.
nSe definen aspectos de navegacin e interaccin entre las diferentes ventanas o pginas que
conformen el sistema.
nSe establece la estructura, secuencia, el proceso del intercambio de informacin entre el usuario y
la aplicacin.
nSe identifican, controlan y manejan los objetos computacionales necesarios a nivel de interfaz del
usuario, tales como objetos sintcticos.
nSe definen los servicios propios de interfaz del usuario, o sea funciones sintcticas.
nSe controla y se administra el hardware interactivo que incluye la interfaz.

nSe especifica el tipo de asistencia, sistemas de bsqueda, tipo de feedback, que la interfaz va a
proveer.
nSe especifican las cuestiones de avanzada a incorporar dentro de la interfaz, como ser aspectos
de adaptacin, inteligencia, colaboracin que deben ser manejados y controlados a travs de esta
componente.
Finalmente, la componente denominada Modelo de Interfaz-Aplicacin es la representacin de la aplicacin

desde el punto de vista de la interfaz. Contiene tanto una visin de la aplicacin desde la interfaz como una
visin de la interfaz desde la aplicacin. Incluye lo siguiente:
nEspecifica el dilogo interno entre la interfaz y la aplicacin.

nPermite por un lado la abstraccin de la forma en que el usuario consulta y provee informacin a la
aplicacin y, por otro, independiza las acciones de la aplicacin de las implementaciones particulares
de las entradas y salidas del sistema.
nEspecifica la relacin entre los eventos de la interfaz y las funcionalidades de la aplicacin.
nEstablece la forma de comunicacin entre ambas partes. Puede ser va llamados a procedimientos
o mtodos, o mediante el uso de estructuras de datos comunes.
VII - Mtricas de Evaluacin de una Interfaz

Gracias a la Independencia de dilogo, filosofa que establece una separacin entre la componente de
interaccin o interfaz del usuario con la componente de cmputos o aplicacin, se puede profundizar ms
especficamente sobre las normas de diseo y objetivos preliminares que son propios a cada componente.
En el rea especial de HCI, existen objetivos particulares que el desarrollador debe tener en cuenta, como
as tambin principios bsicos de diseo de interfaz que deben ser incluidos, si se pretende mejorar la calidad
de la interaccin con el sistema.
Estos aspectos no slo deben ser considerados en el momento de disear una interfaz del usuario sino que
adems pueden ser utilizados en los procesos evaluativos de la misma, durante su desarrollo o al final, una
vez que ya se encuentra en un estado productivo.
Objetivos de la Interfaz del Usuario

Mientras que dentro de la componente de aplicacin, se consideran objetivos tales como eficiencia,
portabilidad, legibilidad, entre otros aspectos, la interfaz del usuario presenta otros objetivos especiales que
estn ntimamente relacionados con los factores humanos ms que con cuestiones tcnicas o requerimientos
impuestos por el sistema.
Por ser una componente que dialoga con seres humanos, se le exige cualidades como simpleza, amigabilidad,
naturalidad, flexibilidad y otras caractersticas que afectan el grado de utilidad de la interfaz y por consiguiente
la productividad general del resto del sistema interactivo.
La conjuncin de todas las cualidades exigidas a la componente de dilogo es sintetizada con el trmino
de Usabilidad. Para referenciar a este trmino se utiliz en la dcada del 90 el trmino Amigabilidad, y
actualmente en la bibliografa ms reciente, se utiliza Calidad de Uso.
El estndar ISO/IEC 9241 define a la usabilidad como la efectividad, eficiencia y satisfaccin con la que un
producto alcanza sus objetivos especficos para los usuarios. El ISO/IEC 9126 hace nfasis en las caractersticas
internas y externas de las aplicaciones que actan en la usabilidad.
Los objetivos mencionados en este apartado, como los principios que se presentan en las prximas secciones,
apuntan a mejorar la calidad de las interfaces provistas por los sistemas interactivos en pos de lograr un alto
grado de satisfaccin y conformidad por parte del cliente o usuario. Llevando, como consecuencia, a una segura
productividad y extensa vida til del software, finalidad que todo desarrollador de software deseara alcanzar.
Entre los principales objetivos tenemos:
a. Simplicidad:
El sistema interactivo debe ser simple de instalar, de aprender, de usar, de configurar.
Al usuario no se le puede exigir un entrenamiento sobre Computacin para poder utilizar el sistema, ni que
se lo someta a posteriores cursos de aprendizaje para interactuar con la interfaz.
El sistema interactivo debe proveer un dilogo natural, un ambiente amigable donde el usuario pueda
encontrar toda la asistencia necesaria para resolver su problema y llevar a cabo sus intenciones.
Esto satisface a la gran demanda por parte de los usuarios de contar con sistemas de software que
realmente funcionen como herramientas destinadas a simplificar el trabajo cotidiano, no a complicarlo an
ms con requerimientos fsicos del sistema.
b. Confiabilidad:
Este objetivo hace referencia a que la interfaz del usuario debe ser consistente tanto en su forma de
expresin como de presentacin.
No puede contener dilogos ambiguos, que lleven a falsas interpretaciones o que genere dudas al usuario.
Tampoco puede existir desorganizacin en la visualizacin de los datos ni heterogeneidad en los mecanismos
de utilizacin de los servicios provistos.
El usuario debe interactuar con un ambiente integral, que presente un diseo coherente, estudiado, con un
tratamiento similar en todos sus contextos y transacciones.
Esto ayuda a que los usuarios perciban una interfaz seria, cuidadosamente diseada, en la que puedan
confiar sus datos y delegar el manejo de los mismos.
c. Flexibilidad:
La interfaz del usuario debe comportarse de una manera maleable, dcil, donde el usuario pueda concretar
sus intenciones en forma autnoma.
La misma debe ser tolerante a un cierto grado de error que pueda presentar el usuario y condescendiente
ante equivocaciones frecuentes efectuadas por l. Puede ayudar brindando mecanismos de sugerencias o de
correccin automtica, ms que informarle un mensaje de error.
No puede comportarse como un agente interlocutor controlador, rgido e inflexible, debe ser abierta y
aceptar los tiempos y las formas que el usuario requiera.
Debe permitir que el usuario sea quien decida cundo comenzar un dilogo y cundo culminarlo, y sea
quien dirija la conversacin.
d. Transparencia:
La componente de interfaz no puede actuar como una caja negra, donde el usuario nicamente ingrese
los datos y espere los resultados.
En todo momento, la interfaz debe comunicarle al usuario sobre los detalles de la transaccin y de los
cmputos realizados, debe indicar el porcentaje de realizacin, ndices del progreso e informacin del tiempo
que falta para culminar la funcin que est ejecutando.
Tambin debe proveer mecanismos para poder interrumpir, suspender o deshacer lo efectuado por el
sistema y alcanzar un estado previo deseado por el usuario.
Esto hace que la interfaz se comporte como un agente abierto, comunicador, que se manifiesta
permanentemente, que informa sobre su accionar ante el usuario.
e. Ergonoma:
Este objetivo se refiere a la capacidad que presente la interfaz para amoldarse, adaptarse al estilo propio
del usuario, brindando mecanismos de configuracin y personalizacin.
La misma puede estudiar al usuario mientras est sesionando con el sistema en pos de adecuarse a su
forma de interaccin o tambin se le puede incorporar modelos computacionales con informacin sobre los
perfiles de los usuarios, previamente investigada en las etapas preliminares del desarrollo.
De esta manera, la interfaz es percibida como un agente inteligente, que conoce al usuario, sus preferencias,
sus hbitos y se acondiciona adecuadamente a l.
Recordar
La interfaz del usuario debe cumplir con los objetivos de:
rSimplicidad
rConfiabilidad
rFlexibilidad
rTransparencia
rErgonoma
La suma de todas estas cualidades genera una interfaz usable, con un alto porcentaje de productividad
y principalmente con un elevado grado de satisfaccin por parte de los usuarios.

Principios de Nielsen
En este punto, se van a considerar los Principios de Nielsen. Consisten en un conjunto de diez reglas de
diseo, que estipulan la forma correcta de disear el dilogo provisto en una interfaz del usuario, teniendo en
cuenta aspectos de usabilidad.
Estos principios, considerados tambin como heursticas, fueron definidos por Jakob Nielsen, en el ao
1990, junto con la colaboracin de Rolf Molich [Nielsen, J. y Mack, R., 1994].
Aunque estas normas inicialmente fueron estipuladas para interfaces textuales, sirven de base para el
diseo preliminar de cualquier otro tipo de interfaz, desde la ms sencilla a la ms compleja.
Los principios de Nielsen, se puntualizan de la siguiente manera:
Dilogo simple y natural

En este punto se estipula la forma en que la interaccin debe llevarse a cabo. El dilogo presente en
los prompts o preguntas del sistema, en los ttulos, en los contenidos de las pantallas, en la solicitud de las
entradas, como en la muestra de los resultados.
Especficamente, hay que tener en cuenta las siguientes reglas:
Recomendaciones Explicacin
Evitar abuso de nEs desprolijo que el usuario vea permanentemente sobre las pantallas del
abreviaturas software, palabras abreviadas como cd., impr.,art., que hacen referencia
respectivamente a cdigo, imprimir y artculo.
Evitar uso nHay estudios realizados en donde demostraron que el dilogo expresado en
excesivo de letras maysculas se asemeja al hablar en voz muy alta, como gritando.
maysculas nAdems de ser intimidatorio, tambin se le atribuye dificultad en la lectura y por
consiguiente en la futura interpretacin del texto.
nSi se emplea todo el texto en maysculas con la intencin de demostrar
importancia, en realidad lo que se est provocando es intimidacin y complejidad
visual.
Evitar errores de nEl desarrollador del sistema no puede dejar plasmado en las pantallas del
tipeo software, errores de ortografa, errores gramaticales ni aquellos cometidos por
un mal tipeo.
nEsto da la idea de que el sistema no fue revisado, o que no se le dio importancia
a su desarrollo.
Distribuir bien la nDebe planificarse el diseo general de las pantallas de un sistema.
informacin nLas pantallas deben tener un marco en comn, con zonas bien diferenciadas
para los ttulos, contenidos, comandos, informacin, mensajes de error y dems
componentes de dilogo.
nLa consistencia en el diseo visual de estos elementos, reduce la posibilidad de
errores de interpretacin y facilita encontrar la informacin.
Analizar la nLos dilogos deberan contener nicamente la informacin ms importante.
informacin nLos datos innecesarios que se encuentran en un dilogo, compiten de alguna
relevante y evitar manera con la informacin relevante y esto provoca la disminucin de su
la innecesaria visibilidad.
El control del nSe debe evitar que el usuario en su interaccin tenga que someterse a
dilogo debe estar esquemas de dilogo absurdos exigidos por el sistema.
dirigido por el nPor ejemplo, que el usuario tenga que apretar dos enter y un escape para salir
usuario de una situacin determinada.
nEl usuario debe ser dueo de la interaccin, debe poder iniciar el dilogo,
cancelarlo, reiniciarlo segn sus tiempos y necesidades.
Emplear estilos de nEvitar prompts o preguntas del sistema que incluyan frases complejas con
prompts simples operadores lgicos como o, y, no, que dificultan la tarea interpretativa del
usuario.
nPor ejemplo, evitar la siguiente frase Salir sin Guardar
Unificar el empleo nLas teclas funcionales como F1, F2,... o combinaciones de teclas, deben estar
de las funciones utilizadas en forma homognea en todo el sistema y en toda circunstancia.
predefinidas
Tabla 1.2: Recomendaciones de Dilogo Simple y Natural.

Emplear el lenguaje del usuario
Con este principio, se recomienda al diseador de la interfaz, no trasladar su propio lenguaje, dialecto
y costumbres dentro de la componente de interaccin. La misma debe utilizar trminos, frases o formas de
dilogo, que sean familiares al a los usuarios del sistema.
Por lo tanto, se recomienda los siguientes puntos:
Utilizar el nEs necesario emplear el dialecto de las/los usuarios, de acuerdo a su
lenguaje, idioma, formacin, costumbres, hbitos y preferencias.
dialecto y jerga
segn el usuario
Evitar uso nPalabras como exit, logout, loggueate, no deben ser empleadas.
de lenguaje
extranjero
Evitar uso de nHay que evitar palabras como indexar, campo, registro, que en el
lenguaje tcnico marco del usuario puede tener connotaciones diferentes.
nEl dilogo debe referirse a conceptos entendidos por el usuario, ms que a
la implementacin de la operacin del sistema.
Evitar el uso del nExpresiones como ch o vos o palabras porteas, cuyo significado
lenguaje regional puede ser desconocido por algunos usuarios.
por parte del
programador
Evitar el nToda la informacin que sea cargada por el usuario, debe verse a lo largo
truncamiento de de todo el sistema de la misma manera.
palabras nPor ejemplo, al cargar un dato con una longitud permitida de 30 caracteres
no debera luego verse truncado a 10.
Permitir al usuario, nNo se debe utilizar excesivo detalle para experimentados como tampoco
configurar el escasa informacin para principiantes. La misma debe ser balanceada.
grado o cantidad
de informacin que
se maneja.
Permitir cargas nEl orden de ingreso de la informacin en un formulario debe ser libre.
parciales de datos nEl usuario debera poder comenzar a completar un formulario desde
cualquier punto, como tambin tener la posibilidad de suspenderlo, seguirlo
despus.
nNo debe presentar restricciones o condicionamientos sin sentido.
Tabla 1.3: Recomendaciones sobre Emplear el Lenguaje del Usuario
Minimizar el uso de la memoria del usuario

En este punto, se pretende evitar que el usuario esfuerce su memoria para interactuar con el sistema.
Esto significa que el usuario no debera recurrir a carpetas manuales para recordar algn cdigo o nmero
de artculo solicitado obligatoriamente por el sistema, ni acudir a un tercero, para obtener asistencia respecto
al uso del sistema. Esto implicara un fracaso para el desarrollador de la interfaz.
Para evitar esto, se debe seguir las siguientes recomendaciones:
Brindar nSe debe indicar en todo contexto, en dnde se encuentrael usuario, desde
informacin de dnde vino y hacia dnde puede ir.
contexto nSe puede adems mostrar datos importantes cargados en pantallas previas,
si es que el usuario debe continuar interactuando con datos relacionados.
1
Palabras porteas: se refiere a trminos y jerga utilizada en la zona del puerto de Buenos Aires, Capital Federal, Argentina.
Brindar nSe debe mostrar informacin de la sesin, cules fueron las ltimas
informacin de la actividades, por qu sectores estuvo trabajando. As podr tener presente
navegacin y de la informacin sobre la navegacin y la interaccin efectuada.
sesin actual nSaber por dnde se lleg a un determinado punto de la interaccin, es
importante por si se desea volver, revisar puntos anteriores o deshacer pasos.
nEl usuario puede ser interrumpido, por ejemplo por telfono y debe contar
con la informacin necesaria para continuar desde el mismo punto, sin perder
datos ni tiempo.
Visualizar los nMostrar en los campos de entrada, los posibles datos que se pueden
rangos de entrada ingresar y que ya son admisibles por el sistema, es una ayuda importante
admisibles por el para el usuario ya que se evitara el tipeo de los mismos.
sistema nBrindar ejemplos, formatos de entrada esperados, datos por defecto no slo
ayudan al usuario a evitar errores, sino que adems le ensean cmo son los
mecanismos de dilogo requeridos.
Brindar mecanismos nEl usuario no debera por ningn motivo, acceder a ayuda extra a la
de asistencia y otorgada por el sistema o inclusive, utilizar medios manuales para buscar
bsqueda cierta informacin requerida por el software.
nEl sistema debe brindar todos los mecanismos de asistencia y medios de
bsqueda necesarios para que el usuario pueda encontrar la informacin que
no recuerda, en forma simple.
nEs importante que el usuario sienta que el sistema est bajo su control y no
a la inversa.
Tabla 1.4: Recomendaciones sobre Minimizar el uso de la memoria del usuario
Consistencia
La consistencia es un punto clave para ofrecer confiabilidad y seguridad al sistema. Se refiere a que tanto
el dilogo, el aspecto visual, el aspecto terminolgico, el comportamiento del sistema, se presenten ante el
usuario en forma homognea y consistente, sin ambigedades.
Los usuarios, no deberantener que adivinar si diferentes palabras, situaciones o acciones, significan lo
mismo en distintos contextos. O, por el contrario, que un mismo trmino adquiera diferentes interpretaciones,
a lo largo del sistema. Todas estas situaciones hacen que la interfaz se considere inconsistente, el usuario se
desconcierta y no sabe qu actitud tomar.
El poder garantizar consistencia, adquiere mayor importancia, en sistemas extensos o, cuando son
desarrollados por distintas personas y en distintos momentos.
A continuacin, se mostrar la tabla de recomendaciones respectivas a este punto:
Debe existir una nEl concepto de una funcin, comando, tecla o botn, debe ser siempre el
consistencia mismo en todo el sistema.
terminolgica nSiempre se debe utilizar el mismo trmino, frase o imagen para un
determinado concepto y viceversa.
nDebe conformar una relacin 1 a 1, entre la representacin y el significado
de cada objeto o funcin.
nDe esta manera se evitan falsas interpretaciones.
Debe existir una nEn todas las pantallas debe utilizarse los colores, espacios, distribucin,
consistencia visual tamaos, ubicaciones, sonidos y formatos en forma coherente y homognea.
nEl usuario no debe notar grandes diferencias visuales ni tratamientos
dismiles entre los contextos de un mismo sistema.
Tabla 1.5: Recomendaciones sobre Consistencia
Feedback
En este principio, se apunta a que el sistema siempre debera mantener al usuario informado de lo que est
sucediendo, ms que nada cuando ste manipula los objetos directamente sobre la pantalla.
El mecanismo para lograr la comunicacin desde el sistema y hacia el usuario, esutilizando una tcnica
llamada feedback o retroalimentacin.

Cuando se provee feedback, la interfaz da una respuesta grfica o textual sobre la pantalla, frente a
una accin del usuario. El feedback se refiere al efecto o reaccin del sistema, que se produce por alguna
operacin del usuario.
El feedback, debe disearse de acuerdo a las siguientes consignas:
Brindar avisos nSe debe informar al usuario, sobre qu puede realizar en un determinado
informativos momento, sobre el grado de actualizacin de la informacin que se
despliega, sobre el tamao o volumen de datos con el que va a trabajar,
entre otras cosas.
Brindar mensajes nLa interfaz del usuario debe servir tambin como un medio para aclarar,
aclaratorios explicar, detallar sobre informacin o comportamiento esperados del
usuario.
Brindar mensajes nAl usuario se le debe advertir sobre posibles situaciones indeseables que
preventivos puedan ocurrir.
vTambin, se le debe informar, por ejemplo, tiempos de acciones que
demanden varios minutos.
Dar mensajes de nEl usuario debe tener la posibilidad de confirmar cada transaccin o
confirmacin actividad importante que haya realizado, o donde se maneje informacin
sensible.
Brindar mensajes nSe debe indicar cmo finalmente culmin una actividad efectuada por el
de cierre usuario.
nSe debe indicar si una transaccin fue realizada exitosamente o no.
Realizar nEl sistema debe validar la informacin ingresada por el usuario mientras
validaciones l est interactuando en una manera natural.
nNo sera correcto indicar que existen datos errneos despus de un largo
perodo de tiempo de interaccin o cuando el usuario ya se encuentra en
otro contexto o haciendo otra cosa.
nEntonces, apenas se pueda dar retroalimentacin al usuario, debe
hacerse.
Dar informacin nSe debe informar sobre cmo va el proceso que el sistema est realizando,
sobre los estados por dnde va y cunto falta para culminar.
de los procesos nEsto es importante en el caso de impresiones, actualizaciones,
indexaciones o almacenamiento de gran volumen de informacin.
Dar informacin nSe debe indicar el estado en que se encuentra el usuario o el sistema. Por
sobre el estado ejemplo, si est realizando cierta labor o esperando que se corrija un error.
del sistema y del
usuario
Tabla 1.6: Recomendaciones sobre Feedback
Salidas evidentes
Este principio, se refiere a que el usuario en todo momento tenga al alcance una opcin de salida de
emergencia, que est fcilmente identificable y accesible.
Esta posibilidad que le brindara el sistema de salir del estado en que se encuentra, brinda la sensacin de
seguridad al usuario, pues le permitira dejar cuanto antes alguna situacin no deseada.
Las salidas deben ser siempre evidentes y se deben poder encontrar a simple vista. Las recomendaciones
para ellas, son:
Recomendaciones
nBrindar avisos informativos
nBrindar salidas en cada pantalla
nBrindar salidas en cada contexto
nBrindar salidas en cada operacin, tarea o transaccin
nBrindar salidas en cada estado
nBrindar salidas en cada momento
Tabla 1.7: Recomendaciones sobre Salidas Evidentes

Las salidas por lo general, se manifiestan como una opcin de Salir propiamente dicha, pero tambin
como opciones de Volver, Cancelar, Deshacer, Reestablecer, Suspender, Modificar, que deben estar
todas o algunas, dependiendo del caso.
Hay que considerar que proveer salidas es importante para que el usuario pueda interrumpir la interaccin
con el sistema, por ejemplo, ante la presencia de eventos externos que requieran su atencin urgente.
Mensajes de error
Eventualmente,cuandolos usuariosrealizan alguna combinacin errnea de funciones provistas por
el sistema, ste suele responder con mensajesde error.
Los mensajes de error constituyen un tipo de interaccin que fluye de la mquina al usuario. Es el feedback
del sistema ante la presencia de un error.
Estos mensajes de error, deben ser expresadosenun lenguaje natural, su contenido debe indicar en
forma clara y precisa, cul es el problema, ellugar donde se efectu,y sugerir alguna solucin alternativa.
Hay que considerar que el usuario lleg a un punto crtico del sistema, el mismo percibe inseguridad,
incertidumbre por desconocer qu hizo bien, qu hizo mal y en qu grado, el error cometido, puede afectar a
los datos.
Los desarrolladores de sistemas, no deberan proveer mensajes de error en forma mecnica e impensada,
sino que deben analizar cada situacin de error, investigar sus posibles causas y consecuencias.
El primer cuestionamiento que el desarrollador del sistema se debe hacer, es por qu se permiti que el
usuario llegue a ese punto. Quizs ante la presencia de mensajes aclaratorios, buena informacin o ms
control, el error se hubiera evitado. En principio, se debera prevenir la presencia de errores de gravedad.
Otra cuestin que se debe plantear, es que si el usuario ya se encuentra en ese punto crtico, de qu forma
se lo puede ayudar para salir de l, lo ms eficientemente posible.
Sobre este punto, se pueden dar las siguientes sugerencias:
Debe existir nEl sistema debe detectar situaciones de error y poder avisarlas en el debido
mensajes de error momento y lugar.
Brindar nComo mnimo, el mensaje de error debe incluir claramente el motivo del
informacin del error, explicar la causa del mismo.
error
Evitar mensajes de nNo debe mostrarse al usuario mensajes que no dicen nada en concreto o,
error vagos que presenten ambigedades.
nPor ejemplo, el empleo de frases como campo invlido, nmero
inexistente, formato errneo, no indican el tipo de informacin esperada.
Debe dar nNo slo se debe dar a conocer cmo se lleg hasta una situacin de error
alternativas a sino cmo salir de all.
seguir nInclusive, se debe brindar comandos para deshacer, volver a un punto
anterior seguro, u ofrecer mecanismos de solucin automatizados.
No debe existir nNo son aconsejables mensajes que emitan sonidos, o que utilicen un dilogo
mensajes de error que alarme al usuario.
que intimiden al nTampoco se debe utilizar reprimendas, amenazas ni sanciones.
usuario
Se debe nLos mensajes de error, deben ser clasificados segn sean advertencias, o
categorizar los si dan informacin sobre errores cometidos, sobre errores severos o crticos,
diferentes tipos entre otras posibilidades.
de mensajes
Se debe nHay que determinar claramente, a qu tipo de accin se le van a vincular los
determinar mensajes de error. Si se lo asocia a acciones elementales, compuestas o a
el grado de transacciones ms generales.
intervencin del nEsto afectar al grado de interrupcin y de control determinado por el
sistema. sistema.
Tabla 1.8: Recomendaciones sobre Mensaje de error

Prevencin de errores
A veces, es preferibleque en vez deproveer buenosmensajes de error,se brinde un diseo ms
cuidadoso queprevenga problemas, para que directamente estos no ocurran,as la persona no se encuentra
en situaciones inesperadas.
En este principio, se establece la necesidad de evitar que el usuario llegue a una instancia de error. El
desarrollador del sistema, deberia saber cules son las partes ms crticas del software, con mayor posibilidad
de error, y por lo tanto, debera afianzar los mecanismos de asistencia y feedback, para que estos no se
produzcan.
Generalmente, la prevencin debe estar presente en la carga de datos como tambin, en las transacciones
ms relevantes y crticas, como ser eliminaciones, transferencias y modificaciones.
Algunos mecanismos de prevencin son:
Recomendaciones
nBrindar rangos de entradas posibles, para que el usuario seleccione y no tipee.
nMostrar ejemplos, valores por defecto, formato de entradas admisibles.
nBrindar entradas de datos preformateadas, con caracteres fijos como barras /, @, -, o
cualquier smbolo nescesario para evitar el tipeo de los mismos.
nBrindar mecanismos de correccin automtica en el ingreso de los datos.
nSer flexibles, aceptando una letra o por un cero, una letra i por un 1 y dems errores que un
usuario puede cometer con frecuencia.
nCuando se busca por un trmino, que el sistema busque expresiones similares, a fin de darle al
usuario ms informacin relacionada, evitndole molestias y prdida de tiempo.
Tabla 1.9: Recomendaciones sobre Prevencin de errores
Atajos
Los atajos, son mecanismos que provee el sistema, para reducir el nmero de pasos necesarios para
disparar ciertas acciones.
Aqu, se pide que el sistema muestre ciertos aspectos de adaptacin, que considere la posibilidad de
dialogar con usuarios que pueden tener distinto grado de conocimiento, formacin y experiencia en el uso de
aplicaciones.
Por ello, la interfaz debera proveer alternativas de manejo para que resulte cmodoy amigable, tantopara
usuarios novatoscomo para los muy experimentados, proveyendo de esta manera mecanismos de adaptacin
a travs de atajos o mediante la definicin de macros.
Para esto, se sugiere lo siguiente:
Recomendaciones
nBrindar caminos alternativos para acelerar la interaccin con el sistema.
nBrindar posibilidad de reorganizar barras de herramientas, mens, colocando sus tems, de
acuerdo a la necesidad del usuario.
nBrindar mecanismos de macros, atajos, definicin de teclas de funcin, para acelerar el acceso a
las funciones.
Tabla 1.10: Recomendaciones sobre Atajos
Ayudas
Las ayudas son componentes de asistencia muy importantes para el usuario, y esto debe ser tenido en
cuenta por el desarrollador del sistema. Muchas veces no se incorpora ningn tipo de ayudas, o se construye
a la ligera sin prestar demasiada atencin a las mismas.
Existe mucho anlisis sobre cmo deben ser diseadas las ayudas de un software, ms an porque estn
constituidas por texto o informacin, que debe ser interpretada en forma rpida y eficiente.
Cuando un usuario ingresa a una ayuda, lo hace porque duda, desconoce, quiere consultar, o teme por
realizar alguna accin errnea. Tiene la presin de entrar a la misma para buscar, aprender, leer, interpretar,
entender sobre la problemtica que le aqueja. Por lo tanto, un mal diseo de las mismas puede llegar a
entorpecer, y dificultar este proceso, ms que esclarecerle o asistirlo realmente.
Actualmente, los sistemas de ayuda son considerados el manual en lnea del software, y tienen un objetivo
explicativo, ilustrativo y de capacitacin, que excede el marco de ayuda puntual, para integrarse ms al sistema
como un todo.
En el momento de disear las ayudas del sistema, se debe considerar las siguientes recomendaciones:
Las ayudas deben nEl sistema interactivo debe ofrecer ayudas tanto a nivel del sistema en
existir general presente en la portada del sistema- como en cada pantalla, contexto,
transaccin o ante una instancia de dilogo complicada.
nLa misma debe indicar la informacin necesaria para que el usuario pueda
llevar a cabo sus intenciones en forma correcta.
Brindar diferentes nDebe existir tipos de ayuda apropiadas para cada caso, como ser Tips
tipos de ayuda para ciertos botones, el botn ? para ciertas cajas de dilogos, asistencia
contextual en lnea, entre otros.
Disear bien el nLas ayudas deben incluir informacin sintctica propia del uso de sistema
contenido de las de software- como informacin semntica propia del aplicativo en cuestin.
Ayudas
Organizacin del nEl contenido de las ayudas, debe ser organizado mediante una estructura
contenido simple, que facilite la navegacin y exploracin del mismo.
nLa estructura de organizacin de la ayuda, debe ser lgicamente planificada
y representada visualmente en forma coherente.
nSe deben evitar grafos hiper-conectados de pginas de informacin, ciclos,
estructuras no balanceadas, entre otros.
Proveer nProveer mecanismos de acceso a travs de la navegacin como de acceso
diferentes formas directo. Permitir tambin una lectura secuencial.
de lectura
Diseo global de nConsiderar la forma de organizacin del texto, al identacin, el desplazamiento

las ayudas de pginas, el tipo de letra apropiado, los tamaos de los prrafos.
nSe debe brindar formas visuales eficientes para resaltar los puntos ms
importantes, el tamao de las pginas
Brindar diferentes nBrindar diferentes mecanismos de asistencia, como bsquedas, soporte en

servicios de lnea, comunicacin con el soporte tcnico mediante el correo o fax, acceso a
comunicacin las preguntas frecuentes o FAQs por Frequently Asked Question, entre otros.
asistencial
Tabla 1.11: Recomendaciones sobre Ayudas
Recordar
rLos Principios de Nielsen son normas de diseo aplicables a cualquier tipo de interfaz.
rLos mismos pueden ser utilizados tambin, como heursticas de usabilidad, en un marco de evaluacin
de sistemas de software, ya desarrollados y en pleno uso.

Caso de Estudio 1 - Fundamentos en HCI
En esta seccin presentaremos un caso de estudio realizado por alumnos de la ctedra Diseo centrado
en el Usuario, materia correspondiente al plan de estudios de la carrera Licenciatura en Informtica, de la
Facultad de Informtica de la Universidad Nacional de La Plata http://www.info.unlp.edu.ar
Objetivo
El objetivo de este caso de estudio es presentar una prctica donde los estudiantes analizan la interfaz
de usuario de un sistema implementado por su pares antes de cursar la materia, a la luz de los nuevos
conceptos adquiridos al momento. Reflexionar y evaluar requiere de un nivel de comprensin de la temtica
imprescindible para continuar con los nuevos temas a abordar.
Caractersticas del Caso de estudio

La prctica consisti en la evaluacin de un sistema de gestin de la Comisin Universitaria sobre
Discapacidad de la Universidad Nacional de La Plata. La aplicacin permite administrar integrantes, reuniones
y eventos organizados por comisin y obtener los correspondientes reportes. Este trabajo se desarroll como
trabajo final en el dictado de la materia Proyecto de Software, materia correlativa de Diseo Centrado en
el Usuario. El informe que se presenta fue desarrollado por Juan Manuel Castro (su perfil en Facebook es
juan.m.castro.7186) y Jos Luis Larroque en la cursada del ao 2010.
Desarrollo del Caso de estudio

Al comenzar la instalacin del sistema, se encuentran problemas de dilogo simple y natural. Al crear
una cuenta para el administrador se encuentran 2 opciones en las cuales no se puede interpretar a que
hace referencia: la opcin donde se debe elegir un color y otra para elegir si el panel lo queremos ubicar a la
derecha o izquierda, como se puede observar en la figura 1.1
Figura 1.1: Pantalla de instalacin del software con problemas de dilogo simple y natural
Cuando se est creando la cuenta no es posible identificar a que panel hace referencia, ni tampoco a qu
aplicara el color seleccionado. Este error estara incluido en el principio 1 de dilogo simple y natural dado
que estas caractersticas deberan poder configurarse una vez que el usuario haya tenido acceso al sistema y
pueda saber qu es lo que va a modificar.
Cuando se ingresa como invitado en la seccin del panel de de configuracin se brinda la posibilidad de
realizar algunos cambios. Sin embargo, si se intenta cambiar el color o la orientacin del panel se despliega
un mensaje de error: Los datos no son correctos, como se observa en la figura 1-2.
Figura 1.2: Problemas al actualizar informacin como usuario invitado con mensajes de error poco claros.
30- Caso de Estudio 1-Fundamentos en HCI

Este error estara incluido en el principio 8 de proveer buenos mensajes de error, ya que el mensaje podra
ser mas especifico. Tambin en el 9 para prevenir mediante un buen diseo la aparicin de problemas ya
que el invitado no puede realizar ciertas modificaciones. Una forma de evitar el error seria deshabilitar esta
seccin cuando se loguea como invitado.
En la seccin de Contacto existe un caja de dilogo (Para) donde se debera escribir el nombre de la persona
a quien va dirigido el mensaje. Pero como se ve en la figura 1.3, es posible escribir cualquier caracter en el
campo de entrada y es aceptado. Una posibilidad de solucin sera poder elegir del una lista de destinatarios
y eliminar este campo, validando las entradas ingresadas por le usuario. Este error estara incluido en el
principio 3 de minimizar la memoria del usuario.
Cuando se ingresa como invitado en la seccin del panel de de configuracin se brinda la posibilidad de
realizar algunos cambios. Sin embargo, si se intenta cambiar el color o la orientacin del panel se despliega
un mensaje de error: Los datos no son correctos, como se observa en la figura 1-2.
Figura 1.3: Problemas de validacin de los campos de entrada.
La pantalla para agregar integrantes tambin presenta problemas. El botn Editar agrega al integrante
cuando los datos estn completos. No edita, sino que cumple la misma funcin del botn Agregar lo cual no
es consistente.
Figura 1.4: Problemas de consistencia ya que el botn Agregar y Editar poseen la misma funcionalidad
Este error estara incluido en el principio 1 de diolog simple y natural, donde la informacin debe tener un
orden natural y lgico, y el principio 4 referido a la consistencia visual y terminolgica.
La pgina para agregar reuniones tambin presenta problemas de diseo. Cuando se agrega una reunin
es posible ingresar cualquier valor en los campos de entrada, como se puede observar en la figura 1.5.
Caso de Estudio 1-Fundamentos en HCI -31

Figura 1.5: Problemas de validacin de los campos de entrada
Este error estara incluido en el principio 9 de prevencin de errores. Se podra evitar este tipo de error
desplegando un calendario para seleccionar la fecha. Esto mismo podra aplicarse a la seleccin del horario.
En la seccin eventos encontramos el mismo error.
Otro problema se encuentra en la pgina de Agregar una Reunin est relacionado con el botn Cancelar.
Este botn en realidad vuelve a la seccin anterior, no cancela la operacin que estamos realizando. Este
error estara incluido en el principio 6 de salidas evidentes. Se debe proveer claramente la manera de cancelar
la tarea actual. Adems, debera estar separada la funcin cancelar del botn volver.
Otro error detectado relacionado con el feedback adecuado. Registrar reuniones y eventos no se actualizan
en el calendario en forma automtica. En las figuras 1.6 y .17 se pueden observar el registro de 2 eventos a
realizarse en el mes de abril.
Figura 1.6: Reunin registrada en el mes de abril
Figura 1.7 Evento registrado en el mes de abril
En la figura 1.8 se puede observar el calendario sin actualizaciones.
Figura 1.8: Problemas de feedback en la visualizacin del calendario

32- Caso de Estudio 1-Fundamentos en HCI
Finalmente en la seccin de Bsqueda, como usuario invitado, no distingue entre el ttulo y el resultado
obtenido, como se puede observar en la figura 1.9 La informacin resultante no es clara, infringiendo el
principio 1 de dilogo simple y natural, presentando adems informacin irrelevante.
Figura 1.9: Problemas con la forma de visualizar la informacin y presencia de informacin irrelevante.
Podemos concluir entonces que un sistema desarrollado sin tener en cuenta los principios bsicos de diseo
de interfaces trae aparejados problemas de usabilidad que se pueden prevenir facilmente. La evaluacin de
pares es una actividad productiva y muy valorada en las encuestas finales de los distintos cursos.
Caso de Estudio 1-Fundamentos en HCI -33

Ejercitacin
A-Indicar si las siguientes expresiones son verdaderas o falsas. Tachar lo que no corresponda:

nLa disciplina de HCI trata solamente cuestiones de software. v f
nLa construccin de una interfaz del usuario es responsabilidad exclusivamente del profe- v f
sional informtico.
nEn una interfaz del usuario, puede existir un nico tipo de dilogo. v f
nLa interfaz icnica es una interfaz visual.

v f
nEl rol del desarrollador del dilogo, incluye la organizacin, planteo y realizacin de los v f
modelos de usuarios, del contexto y de aspectos tecnolgicos, que conforman la etapa de
requerimientos de la interfaz.
nLa independencia entre la componente de interfaz y la de aplicacin, slo se debe aplicar v f
en la etapa de programacin de ambas.
nLos principios de Nielsen constituyen normas de diseo que pueden aplicarse en un pro- v f
ceso evaluativo de la interfaz.
B - Indicar especficamente a qu componente de Green se est refiriendo en cada caso:

Particularidades de la UI Componente de Green
Definicin de las dependencias entre
objetos de interaccin.
Diseo de las tarjetas magnticas que
permitirn el ingreso al sistema.
Definicin de las mscaras y formatos de
entrada.
Definicin de las condiciones que llevan a
la aparicin de un mensaje de error.
Diseo de las tablas de bases de datos donde
se registraran los perfiles de usuario.
C- Explicar y justificar la relacin entre los principios de Nielsen y los objetivos de la interfaz del usuario.
34- Ejercitacin-Fundamentos en HCI

Referencias
rBaber, C. (1997). Beyond the Desktop: Designing and Using Interaction Devices, San Diego, CA:
Academic Press.
rBaecker, R. M.; Grudin, J.; Buxton, W. A. S. y Greenberg, S. (1995). Readings in Human-computer
Interaction: Toward the Year 2000. Morgan Kaufmann Publishers: San Francisco, CA.
rBarnard, P. J. (1987). Cognitive resources and the learning of human-computer dialogs. Interfacing
Thought: Cognitive Aspects of Human-Computer Interaction. MIT Press, Cambridge, MA.
rBrad A. Myers (1994). Challenges of HCI Design and Implementation. ACM Interactions. vol. 1, no. 1.
rButter, Keith A. (1996). Usability Engineering Turns 10. Interactions.
rHartson, Rex, Hix, Deborah (1989). Human-computer interface development: concepts and systems for
its management. ACM Press, New York, NY, USA.
rMark Green, (1985). Report on Dialogue Specification Tools. User Interface Management Systems,
Berlin: Springer-Verlag, pp. 9-20.
rNielsen, Jakob (1989). Coordinating User Interfaces for Consistency.
rNielsen, Jakob (1994). Usability Engineering.
rNielsen, Jakob. (2000). Designing Web Usability: The Practice of Simplicity.
rNielsen, Jakob; Mack, Robert (1994). Usability Inspection Methods.
rNorman, D. (1991). Cognitive Engineering in User Centered System Design.
rNorman, D. A. (1983). Some observations on mental models. Lawrence Erlbaum Associates, Hillsdale,
NJ.
rOlsen, S. E. (1987). CATOOL: A computer-based tool for investigations of categorical information in
mental models. Human-Computer Interaction INTERACT 87. North-Holland, Amsterdam.
rReason, J. (1988). Framework models of human performance and error. En Tasks, Errors and Mental
Models. Taylor & Francis, London.
rReason, J. (1990). Human Error. Cambridge University Press, Cambridge, England.
rReisner, P. (1981). Formal grammar and human factors design of an interactive graphics system. IEEE
Transactions on Software Engineering, SE-7(2).
rRouse, W. B. (1981). Human-computer interaction in the control of dynamic systems. ACM Computing
Surveys, 13 (1).
rShneiderman, B. (1987). Designing the User Interface: Strategies for Effective Human-Computer
Interaction. Addison-Wesley, Reading, MA.
rWahlstrm, B. (1988). On the use of models in human decision making. En Tasks, Errors and Mental
Models, cap. 10. Taylor & Francis, London.
rWilliam Buxton, (1983). Lexical and Pragmatic Considerations of Input Structures. Computer Graphics,
(17)1.
rPattie Maes, Alan Wexelblat, (1996). Software Agents. CHI 96 Tutorial.
rDouglas Engelbart (1963). Conceptual framework for the augmentation of Mans Intellect.
Referencias-Fundamentos en HCI -35

Proceso de Desarrollo de la Interfaz del Usuario
36-
Proceso de Desarrollo
de la Interfaz del Usuario
La interfaz del usuario requiere de un proceso de desarrollo

especial. Se forma con la prctica, con sucesivas
modificaciones y testeos frente a los usuarios potenciales
del producto. As, se garantizar la calidad de la misma.
Temas a Tratar
I- Introduccin
II- Caractersticas del Proceso de Desarrollo de la UI
III- Ciclo de Vida de la Interfaz del Usuario
IV- Etapa de Requerimientos de la Interfaz
nModelo SSOA
V- Etapa de Diseo de la Interfaz
nCaractersticas del Proceso de Diseo
VI- La interfaz y la Prototipacin
nCaractersticas de la Prototipacin
nVentajas de la Prototipacin
nTipos de Prototipos
VII- Etapa de Implementacin
nHerramientas para el desarrollo de la Interfaz
VIII- La importancia de la Evaluacin de las interfaces del usuario
nMtodos de Indagacin
nMtodos de Inspeccin
Ejercitacin
Referencias
Proceso de Desarrollo de la Interfaz del Usuario -37

I - Introduccin
Las aplicaciones informticas abarcan cada vez ms reas, es decir, es difcil encontrar disciplinas que no
cuenten con herramientas computacionales que faciliten el trabajo cotidiano.
A raz de que el espectro de usuarios se ampla, es necesario utilizar estrategias que favorezcan el uso de
las aplicaciones proveyendo un estilo de comunicacin ms simple, que reduzca el tiempo de aprendizaje, que
sea fcil de usar sin requerir ningn entrenamiento especfico en informtica.
Por lo tanto, la componente de Interfaz del usuario se convierte en un factor decisivo tanto en la eleccin de
estos sistemas de software como en su posterior utilizacin y aprobacin. Ella afecta en forma directa al grado
de satisfaccin de los usuarios.
En pos de proveer una interfaz del usuario de calidad, es necesario entender que su construccin y diseo,
forma parte de la Ingeniera de software y que requiere un proceso de desarrollo especial, que est centrado
en el usuario, en todas sus etapas de gestacin. La temtica de HCI y el tratamiento de toda la problemtica
involucrada dentro de la componente de Interfaz, figura explcitamente en la currcula de ACM (The ACM SIGCHI
Curricula for Human-Computer Interaction), que es una recomendacin internacional de sumo prestigio en las
Ciencias de Computacin.
Como es una porcin del sistema que debe interactuar directamente con los usuarios, es fundamental
efectuar un estudio completo del comportamiento humano. Se debe incluir como requerimientos indispensables
en la generacin del software, parmetros tales como ergonoma, facilidad de uso, amigabilidad, simpleza, en
trmino de reducir el esfuerzo mental del usuario de llevar a cabo en la computadora la tarea que tena en mente,
flexibilidad y naturalidad en el sentido que el usuario a travs de la pantalla vea reflejado o modelado su realidad.
A pesar de esto, la mayora de los diseadores de software estn ms compenetrados con las computadoras
que con el aspecto humano, estn ms capacitados en resolver el problema en trminos computacionales,
buscar los mejores algoritmos de programacin, las mejores estructuras de datos, que en proveer un buen estilo
de interaccin.
Adems, resultamuy difcil saberel significado de lo que es proveer una interfaz del usuario ptima de
acuerdo a los factores humanos. No se cuenta an con metodologas tericas que abarquen todo el desarrollo
y diseo de las mismas, y no hay todava mtricas exactas establecidas para su evaluacin.
Las interfaces del usuario, se construyen mediante un proceso iterativo de diseo. Ellas se forman con
la prctica, necesitan ser diseadas, modificadas, prototipadas y evaluadas varias veces hasta alcanzar los
requerimientos de los usuarios.
En este captulo, se describirn las caractersticas del ciclo de vida de la interfaz del usuario, cmo se
compone y en qu consiste cada etapa de desarrollo.
II - Caractersticas del Proceso de Desarrollo de la UI

Disear, por lo general, es un proceso difcil y, ms an si se disean cada vez sistemas ms complejos,
ms avanzados tecnolgicamente.
Ahora bien, disear bajo la conciencia en HCI, tambin es complicado. Los diseadores de la interfaz del
usuario, se deben preocupar sobre los factores humanos y ergonmicos, deben estudiar sobre los efectos del
sistema en los usuarios, grupo de trabajo, empresa, o en el contexto particular, y deben investigar sobre las
mejores representaciones y formas de interaccin que va a proveer el sistema.
Adems, la interfaz del usuario, al constituir una parte del software, requiere para su construccin, de todas
las etapas de desarrollo tales como anlisis, diseo, implementacin y evaluacin. Como es una componente
que va a ser usada y manipulada en forma explcita por parte de usuarios y va a interactuar directamente
con ellos, necesita que estas etapas se desarrollen de una manera no tradicional. La misma requiere por
ejemplo, que los bosquejos de diseo sean probados ante los usuarios en forma prematura y aunque estn
incompletos, llevando a lo que se denomina el desarrollo de prototipos, que se explicarn detalladamente
luego en este mismo captulo.
En el momento de emprender el desarrollo de una interfaz, el informtico debe entender y conocer las
caractersticas de esta componente de software y tratar toda su complejidad mientras se encuentra en vas
de desarrollo. Esto le permitir encarar correctamente este proceso y poder sobrellevar las problemticas que
presenta.
Entonces, se puede decir que el proceso de desarrollo de la interfaz se caracteriza por las siguientes
cuestiones:
a. Constituye un Proceso Iterativo:

El desarrollo de la interfaz conforma un proceso constante e iterativo de refinamientos sucesivos.
Como se va a explicar en la siguiente seccin, la interfaz del usuario no presenta una naturaleza de
38- Proceso de Desarrollo de la Interfaz del Usuario
desarrollo analtica ni secuencial.
La misma requiere para su construccin, ser evaluada frente a usuarios potenciales y modificada en forma
sistemtica. Esto implica que se pueden saltear o reiterar las etapas de desarrollo.
b. Presenta una Etapa de Requerimientos incompleta:

La etapa de requerimientos de la interfaz del usuario por lo general es ausente e incompleta. A los usuarios
le resulta ms fcil expresar las especificaciones computacionales que los requerimientos de visualizacin,
dilogo hombre-computadora.
Se dan muy pocos casos, en que los usuarios o clientes logran especificar claramente lo que desean a nivel
de elementos de interfaz, objetos de interaccin a utilizar, tipos de feedback, entre otros aspectos. Entonces,
es inusual obtener de ellos un enunciado fehaciente sobre los requerimientos a nivel de la componente de
dilogo.
c. Presenta una Naturaleza Bottom-up:

A diferencias de la componente de aplicacin, en donde el desarrollador tiene una visin global del problema
y a partir de all, intenta refinarlo en problemas ms pequeos, la interfaz del usuario se va originando a partir
de diferentes puntas de informacin muy detalladas.
Inicialmente, el desarrollador de la interfaz contar con mucha informacin heterognea tales como
caractersticas del usuario, del ambiente, de la aplicacin, informacin de los estndares del mercado, de los
aspectos tecnolgicos, de dispositivos para interactuar con el sistema, entre otras cuestiones.
Esto significa, que el mismo deber comenzar a trabajar con informacin muy puntualizada y dismil, por lo
que deber tratarla realizando generalizacin, filtrado, abstraccin y sintetizado de datos, en pos de converger
a una versin de diseo de la interfaz apropiada.
d. Requiere un Mecanismo de Representacin Especial:

La componente de interfaz necesita ser evaluada y probada por diferentes tipos de usuarios. Entre ellos,
se encuentran los usuarios finales que son los destinatarios del software, los programadores que la van a
desarrollar, los evaluadores externos que la van a criticar, como tambin otros profesionales idneos en temas
afines, a saber socilogos, diseadores visuales, ingenieros electrnicos.
Adems, se trabaja con diversas visiones del tema que son complementarias. Aunque cada aspecto tiene
aristas que le son propias, tambin comparte aspectos comunes a coordinar.
Por tales motivos, la interfaz requiere un mecanismo de representacin entendido por todos los roles,
necesita de notaciones o esquemas representativos ms simples, no tan formales ni tan tcnicos. No es lo
mismo que la componente de la aplicacin, cuya representacin o diseo debe ser entendido e interpretado
por el programador, por lo tanto se puede utilizar diagramas, notaciones tcnicas tradicionales.
e. Requiere de Mtodos de Diseo Especficos:

La interfaz del usuario est conformada, como se explic en el Captulo I, por componentes tales como la
de presentacin, la componente de control de dilogo y la de modelo interfaz-aplicacin. Las cules involucran
muchos aspectos diferentes que deben disearse y desarrollarse.
Es completamente distinto, disear las cuestiones de visualizacin que los mecanismos de interaccin, o
la componente de control de dilogo con el enlace con la aplicacin.
Por la diversidad de aspectos que aborda la interfaz del usuario, ser necesario emplear varios mtodos
de diseo que sean especficos a cada rea. Por ejemplo, los mtodos de anlisis de tareas, describen ac-
ciones del usuario y conducta de la interfaz, pero no sirven para disear el control del dilogo. En cambio, la
tcnica de diagramas de transicin y estados o de eventos, describen la interaccin y control de dilogo, pero
no ofrecen tcnicas de representacin para las pantallas del sistema.
f. Existe una Anticipacin de las Etapas de Desarrollo:

El desarrollo de la interfaz del usuario, es un proceso en donde se anticipan las etapas de desarrollo.
Este es el caso de la etapa de diseo de la interfaz, que no se puede completar hasta que no se implemente
o se desarrollen prototipos de la misma. La misma necesita informacin futura, que no se puede obtener de
ninguna forma hasta que no se ponga en marcha el/los bosquejos de diseo.
Lo mismo sucede con la etapa de requerimientos o de anlisis. Cmo saber qu es lo que pretende o
necesita el usuario a nivel de interfaz, sino se le muestra bosquejos de diseo para discutirlo?
Entonces, se da el caso en que se requiere predecir el estado futuro de un producto basado en informacin
actual, pero donde esta informacin corriente se obtiene poniendo en marcha o en prctica, las predicciones
realizadas.
El motivo de este fenmeno, se debe fundamentalmente a que, por tratarse de una componente en contacto
directo con seres humanos, permanentemente se trabaja con informacin imprecisa, incierta, subjetiva, verstil,
durante todo el proceso de desarrollo, y es necesario entonces, anticipar las etapas de diseo o de evaluacin
para concretar, redondear dicha informacin.
g. Prelacin de la Etapa de Evaluacin:

La etapa de evaluacin, en el caso del desarrollo de la componente de interfaz, es fundamental para probar
la correccin y completitud de etapas previas, como las etapas de requerimientos o la de diseo.
A diferencia de la componente de aplicacin, donde la evaluacin se puede dejar al final del proceso de
desarrollo, en el caso de la interfaz, la misma se aplica en todas las etapas. Se la utiliza para completar la
etapa de requerimientos, para comprobar lo correcto de los bosquejos de diseo, para evaluar las versiones
prototpicas, como tambin para revisar los aspectos de implementacin.
La etapa de evaluacin, permite adecuar la interfaz, cuando no se est tan condicionado por la estructura
del sistema. Permite encarar e incorporar adecuadamente, todas las modificaciones que sugieren los usuarios
cuando prueban la interfaz, mientras sta an se encuentra en vas de desarrollo.
h. Requiere Participacin Activa de los Usuarios:

Por una cuestin que los factores humanos deben ser considerados en todo el proceso de desarrollo, el
usuario debe participar en forma efectiva y sistemtica.
El mismo se debe sentir comprometido con las decisiones de diseo, se le debe consultar y se lo debe
incluir en la mayora de las pruebas de usabilidad efectuadas en el sistema.
El usuario se convierte en coartfice o coautor del diseo de la interfaz que l va a utilizar, por lo tanto se
garantiza un alto grado de satisfaccin personal. El usuario va a disminuir su desconfianza ante un sistema
que no sea rgido y se adecue ms a sus preferencias.
i. Es un Proceso Interdisciplinario:
La creacin de la interfaz del usuario constituye un proceso interdisciplinario, con expertos en Ingeniera de
Software, Factores Humanos, Diseo Visual, Expertos en Multimedia, Psicologa, Comunicacin Social, entre
otros. Cada uno de los cules, tiene su propio lenguaje, sus diferentes visiones, interpretaciones, y esto puede
complicar la comunicacin entre los mismos.
Es necesario organizar un marco de trabajo con pautas claras de participacin y toma de decisiones, con
una firme definicin de roles y una eficiente coordinacin.
Importante
nEl desarrollo de la interfaz del usuario, es un proceso especial, en donde las etapas de desarrollo
se suceden en forma iterativa. Se las necesita evaluar y refinar para lograr la completitud y
veracidad de las mismas.
nSe requiere utilizar una metodologa apropiada, que soporte esta concurrencia y anticipacin de
etapas.
nTambin, es necesario encontrar las tcnicas o mtodos de diseo adecuados, para delinear las
caractersticas de visualizacin, de presentacin, como de interaccin y control del dilogo que
incluye la interfaz del usuario.
nMuchos diseadores expertos han efectivamente desarrollado sus propios mtodos de diseo
basados en sus experiencias personales con ciertos dominios, tcnicas y situaciones. Por lo
general, se basan en sentido comn, en conocimientos que estn implcitos y en experiencia
personal.
nEl empleo de mtodos informales suelen ser difciles de transmitir y no permiten la reusabilidad
de casos existosos.
III - Ciclo de Vida de la Interfaz del Usuario

Algunos desarrolladores de software posponen la construccin de la interfaz solamente a la etapa de
implementacin, pero como se explic en la seccin anterior, existen descripciones, detalles, consideraciones
presentes en la interfaz que intervienen y afectan a todo el proceso de ingeniera del sistema y que deben ser
encaradas desde el principio.
Tanto la interfaz del usuario como la parte del cmputo, se desarrollan en etapas que consisten de una
fase de especificacin, diseo, implementacin y de un proceso de evaluacin. Pero, la forma en que se
manifiestan estas etapas en la interfaz difiere radicalmente con la de la aplicacin.
Mientras que, segn la Ingeniera de Software clsica [Pressman Roger,1996], la componente de la
aplicacin requiere, que cada etapa de desarrollo culmine en forma correcta y completa antes que comience
la siguiente, la interfaz del usuario necesita que las mismas se realicen en forma simultnea y concurrente, y
que estn en constante estado de evaluacin y modificacin.
La diferencia reside, en que en el diseo centrado en el usuario, el usuario juega un rol preponderante en
todas las etapas de desarrollo, desde la etapa inicial donde se lo modela, hasta participar en evaluaciones del
producto, o en sugerir aspectos de diseo.
El ciclo de vida de la interfaz, requiere de un proceso iterativo de refinamientos sucesivos, donde las etapas
se solapan, se adelantan y se regeneran, constituyendo lo que se denomina Ciclo de Vida Prototpico [Reilly
J.P., 1996], a diferencias del ciclo de vida tradicional en cascada.
En el ciclo de vida prototpico, las etapas iniciales de requerimiento y de diseo se desarrollan en forma
incompleta y se implementan parcialmente generando lo que se denominan prototipos del sistema.
Como el prototipo comienza mostrando la confeccin parcial del producto, se los utiliza para proveer una
visin temprana del sistema, y as se lo puede poner a prueba anticipadamente frente a usuarios. Esto permitir
obtener informacin ms concreta sobre las necesidades del usuario, preferencias, modos de trabajo, errores
que comete, dificultades que presenta y dems cuestiones observables, que completarn y corregirn los
requerimientos y diseos iniciales.
A medida que al prototipo se lo corrige, y se le van agregando en forma gradual nuevos elementos de
interfaz, comportamiento, servicios y hasta, en el caso de los prototipos evolutivos, componentes funcionales
de la aplicacin, se van generando nuevas versiones prototpicas de mejor calidad de uso y que cuentan con
la aprobacin garantizada de los usuarios.
Tambin, se podran utilizar prototipos descartables o revolucionarios, donde una vez que se determina lo
que los usuarios realmente esperan y desean de la componente de interfaz, son empleados solamente como
un medio de representacin del bosquejo final de la misma, y luego, son descartados.
Todo este proceso se desarrolla mediante un esquema metodolgico denominado Prototipacin, que
consiste en la generacin sistemtica de versiones prototpicas del software, que se van evaluando mediante
la participacin activa de los usuarios y que se van mejorando progresivamente.
El ciclo de vida culmina, cuando las evaluaciones de las versiones avanzadas del prototipo van arrojando
resultados positivos, es decir, cuando el usuario o dems roles evaluadores, aceptan el diseo expresado y
simulado a travs del prototipo.
Importante
nEs importante decir, que los requerimientos iniciales de una interfaz del usuario, son por lo
general incompletos, y que esta tcnica tiende a anticipar problemas, obteniendo mayores
precisiones de lo que el usuario espera del sistema.
A continuacin, se ilustra el ciclo de vida prototpico de la interfaz, teniendo en cuenta un prototipado

tipo evolutivo, en donde la ltima versin prototpica converge al sistema de software completo, totalmente
culminado y aprobado. Se muestra aqu, cmo ocurren las diferentes etapas de desarrollo de la interfaz, a
travs del tiempo:
PROTOTIPACIN
tiempo
anlisis
diseo
implementacin
testeo
entrenamiento
conversin
insatalacin
Figura 2.1: Ciclo de Vida Prototpico de una Interfaz del Usuario.
Como se muestra en el grfico, ni bien se obtiene algunas especificaciones iniciales de lo que se pretende
de la interfaz, constituyendo una etapa de requerimientos o de anlisis incompleta, se comienza con el diseo
de la misma.
Estos bosquejos de partes parciales de la interfaz, son implementados en forma de prototipos para ser
evaluados ante el usuario, y poder as obtener ms informacin de l, frente a un material concreto.
Con la informacin obtenida de las evaluaciones, se completa y corrige an ms las etapas de anlisis y
diseo. Por ello, estas etapas se establecen en forma casi simultnea.
Una vez que se desarrolle el prototipo final evolutivo, donde se incluye tanto la componente de dilogo
como la funcional, y los testeos del mismo arrojen resultados positivos, culminaran en forma conjunta todas
las etapas cruciales de desarrollo.
La etapa de entrenamiento, comienza desde las versiones prototpicas iniciales, donde el usuario comienza
a conocer, probar, usar el producto y familiarizarse con l desde el principio.
El tiempo asociado al entrenamiento se puede extender un poco ms, una vez que el producto haya sido
terminado. Hay que considerar, que por lo general, no se trabaja con todos los usuarios, sino con una muestra
de ellos, y en esta etapa, se extiende la capacitacin a todos los usuarios involucrados.
Las etapas de conversin e instalacin, se refieren a la puesta a punto del producto sobre las mquinas
que se destinan para la utilizacin del software. En el caso que se mejora o se reemplaza un producto de
software anterior, hay un proceso de transferencia, adaptacin de datos e informacin, que constituyen la
etapa de conversin.
Existen otros esquemas ilustrativos, del ciclo de vida de una interfaz, como el Modelo en Espiral [Barry W.
Boehm, 1988] y el Modelo de Estrella [Deborah Hix y J.Hartson, 1989], que se muestran a continuacin:
ANLISIS
DISEO
PROTOTIPACIN
IMPLEMENTACIN
IMPLEMENTACIN ANLISIS
EVALUACIN
EVALUACIN
ESQUEMA EN ESPIRAL
J. COUTAZ Y L. BASS PROTOTIPACIN DISEO
Figura 2.2: Modelo en Espiral y Modelo de Estrella.
Ambos diagramas, expresan la filosofa prototpica, ya que en el caso de la espiral, cada giro de la misma
est constituido por el diseo, desarrollo y evaluacin de una versin prototpica. En el caso de la estrella,
muestra al proceso de evaluacin como eje central, a partir del cul se refinan las dems etapas de desarrollo.
Recordar
rEl diseo centrado en el usuario, implica adems de conocer al usuario y modelarlo, hacerlo partcipe
de muchas actividades de desarrollo de la interfaz.
rEl usuario juega un rol fundamental en la modificacin, evaluacin y diseo de la interfaz, y es artfice
de que el ciclo de vida prototpico se logre adecuadamente.
IV - Etapa de Requerimientos de la Interfaz

En el desarrollo de un sistema de software, la componente de la interfaz del usuario debe ser tratada en
forma independiente. La misma presentar particularidades y caractersticas propias, que deben ser tratadas
y consideradas en forma autnoma, si se pretende brindar una componente de interaccin de calidad.
La interfaz del usuario debe ser analizada especialmente, su forma y su comportamiento dependern de
mltiples factores que la harn nica e irrepetible.
La etapa de requerimientos es esencial para descubrir e investigar dichos aspectos y todo tipo de informacin
que pueda ser til e influir en el futuro diseo de la componente de dilogo.
Esta etapa no se puede saltear, debe ser responsabilidad del diseador de la interfaz encararla
correctamente para averiguar los requerimientos del usuario a nivel de interaccin, por lo que no basta con
tener un enunciado completo de lo que se pretende a nivel funcional.
Puntualmente, el desarrollador de la interfaz del usuario, debe realizar las siguientes actividades antes de
comenzar con el diseo de la misma:
a. Anlisis Funcional del Sistema:

El desarrollador de la componente de interfaz del usuario no puede comenzar a disear, si no analiza
previamente las caractersticas de la componente funcional.
Se debe tener claro conocimiento de los requerimientos funcionales, el objetivo del sistema de software y
las caractersticas que se pretenden de la aplicacin.
Hay que tener en cuenta, que no es lo mismo disear la interfaz de un sistema educativo que la de un
sistema informativo o, por ejemplo, la interfaz de un sistema telefnico que la de un sistema de transacciones
comerciales.
El tipo de aplicacin es, entonces, otro aspecto que afectar en el diseo de la interfaz que se va a proveer.
El desarrollador de la interfaz puede, obteniendo del analista de sistemas el enunciado completo de los re-
querimientos funcionales, realizar sus propios modelos funcionales, prestando inters solamente en aquellas
funciones que va a ser utilizada, accedida o percibida por el usuario.
Cualquier mtodo de anlisis, tal como diagramas de Entidades y Relaciones (E-R Diagrams), de flujo de
datos (DFD), o modelo de tareas, pueden ser de utilidad para que el diseador de la interfaz comprenda las
futuras actividades que el usuario tendr en la vida til del software.
b. Anlisis del Usuario:

Es fundamental que el diseador conozca al usuario e investigue sus caractersticas individuales, si
pretende brindarle una interfaz adecuada para l.
Esta etapa, constituye la esencia del Diseo Centrado en el Usuario. Muchos autores formulan este
concepto, mencionando que los sistemas interactivos deben ser centrados en el usuario [Norman D.,1986],
o que conocer al usuario significa que el diseador pueda tener la capacidad de decidir qu nivel de soporte
requerir el usuario, tanto semntico como sintctico [Schneiderman B.,1987].
Es importante estudiar la clase de usuarios que van a interactuar con el sistema y categorizar a los mismos.
Se debe considerar si son usuarios novatos o con experiencia, si han utilizado computadoras con anterioridad
o no, qu edad tienen. Si son tmidos, curiosos o ansiosos. Si prefieren el aprendizaje mediante el uso de
documentaciones y manuales o, a travs de pruebas y testeos con el propio software. Si necesitan ser guiados y
controlados o, por el contrario, encaran los inconvenientes con sus propios medios, entre otras caractersticas.
Por ejemplo, la interfaz del usuario usada por nios debe tener un diseo completamente distinto a la que
es utilizada por adolescentes. En el primer caso, las letras deben ser redondeadas, grandes, de colores vivos
como rojo, azul, verde y amarillo, y debe emplearse un lenguaje claro y sencillo. Mientras que, en el caso de
los adolescentes, se utilizan otro tipo de tipografas ms modernas, un lenguaje ms informal y con colores
ms oscuros.
Entonces, hay que realizar estudios y modelos sobre la comunidad de usuarios a la que est dirigido el
sistema, teniendo en cuenta factores humanos, sus conocimientos sintcticos y semnticos, su experiencia
y formacin. Para esto, se construye un modelo del usuario que es una descripcin de las caractersticas y
propiedades individuales de la interaccin entre el usuario y la mquina, permitiendo registrar y modelar sus
hbitos y sus reacciones.
A grandes rasgos, se puede identificar dos tipos de modelos del usuario: aquellos que son conceptuales
y los cuantitativos.
Modelos Explicacin
Modelo nLos modelos conceptuales del usuario se caracterizan por representar los
conceptual procesos cognitivos humanos e identificar las estrategias y estructura involucrada
en la interaccin humano-computadora.
nSe compone de elementos conceptuales, las operaciones que se ejecutarn
sobre los mismos y tambin de sus relaciones y restricciones.
nCodifica lo que el usuario conoce o entiende de la aplicacin y del uso de
sistemas interactivos en general, o sea determina el grado de conocimiento
semntico y sintctico, a saber:
Conocimiento nEl conocimiento dependiente del dominio que es
Semntico incluye: inherente a la aplicacin especfica en cuestin.
nEl conocimiento dependiente de los sistemas interactivos,
inherente a los conceptos generales del funcionamiento
de los sistemas de software.
Conocimiento nLas convenciones lingsticas y modales que el operador
Sintctico incluye: debe conocer para poder comunicarse con el sistema.
Modelo nLos modelos cuantitativos tratan con la representacin numrica del rendimiento
Cuantitativo del usuario frente a la computadora.
nVarias caractersticas del usuario pueden ser modeladas: desde sus gustos o
preferencias, su experiencia, hasta sus motivaciones u objetivos, y en cada caso
ser de informacin til para disear la interfaz del usuario apropiada.
Tabla 2.1: Tipos de Modelos de Usuarios.

Existen ciertas tcnicas de cmo adquirir el conocimiento del usuario [Gould J. D., 1995], de cmo
organizarlo, registrarlo e interpretarlo para posteriormente, desarrollar una modelacin del mismo, que
constituir una descripcin, tanto de sus caractersticas y propiedades individuales, como de su interaccin
con la mquina.
Entre las tcnicas de recoleccin de datos ms comunes, se encuentran, las entrevistas, cuestionarios,
observacin directa de la interaccin del usuario frente a un software, filmaciones (video-taping) del usuario
en su mbito de trabajo, Video Tracking, sesiones Thinking-aloud, donde se insta al usuario a explayarse
sobre los problemas e inconvenientes que tienen con el sistema vigente, entre otros.
Recordar
rEs imprescindible conocer al usuario destinatario del sistema, su personalidad, su experiencia, su
formacin. Se debe analizar y entender la representacin mental que l conlleva.
rConocer al usuario, es la nica manera de proveer el diseo de la interfaz, ms adecuada para l.
c. Investigacin del Ambiente:

El ambiente o contexto, que rodear al usuario mientras interacta con el sistema, tambin debe ser
estudiado cuidadosamente y afectar notablemente el diseo de la interfaz.
Se tienen que realizar estudios sobre:
El Ambiente Explicacin
Caractersticas nHay que realizar un modelo del ambiente, estudiar el lugar fsico donde se va
del Ambiente a montar el sistema.
Fsico nHay que analizar el grado de concurrencia, ruido, interferencias, nivel de
distraccin, cuestiones de luminosidad.
nPor ejemplo, no se podra aprovechar una interfaz con sonido, si el sistema
se va a instalar en un lugar pblico, donde concurre mucha gente y hay mucho
ruido.
Caractersticas nSe debe modelar al usuario dentro de un marco organizativo, que puede ser su
de la oficina, su estudio, su laboratorio, su casa, una empresa.
Organizacin y nSe debe estudiar su posicin, su rol en la organizacin, sus responsabilidades.
del nSe debe estudiar el grupo que lo rodea, su formacin, el nivel de conocimiento
Entorno de los dems.
Grupal nPor ejemplo, la interfaz del usuario debera ofrecer conocimiento y asistencia
ms detallada, si el usuario es el nico que sabe Computacin dentro de su
entorno.
Caractersticas nSe debe investigar las caractersticas tcnicas y los recursos que el o los
Tcnicas usuarios cuenten en el momento que se instale el sistema.
nSe debe inventariar el tipo de mquinas que poseen, el tipo de monitor,
resoluciones posibles, tipos de conexiones que tienen y dems aspectos
tecnolgicos.
nSe debe considerar los dispositivos de hardware que se van a destinar para la
interaccin hombre-computadora.
nPor ejemplo, es intil planificar el diseo de una interfaz muy cargada de
imgenes, si el usuario cuenta con mquinas de poca capacidad grfica.
Tabla 2.2: Actividades involucradas en la Modelacin del Ambiente.
Todo este anlisis, debe ser realizado cada vez que se encare el desarrollo de un software. Debe ser
desarrollado en forma extensiva y completa, conformando una etapa de requerimientos especfica a la interfaz
del usuario.
Este proceso determina los pre-requisitos bsicos para recin comenzar con la etapa de diseo, donde
se decidir en base a ello, qu tipo de interfaz se va a proveer y qu tipo de dilogo ser necesario brindar.
Importante
nEs imprescindible disear la interfaz del usuario en base a los modelos efectuados de los
usuarios, del contexto y de la aplicacin.
nEl diseador puede tener su estilo, pero el diseo de la interfaz debe estar acorde a los modelos
analizados anteriormente.
nLa estandarizacin, el estilo de interfaz que se encuentre en la mayora de los sistemas en el
mercado, puede ser considerado como un punto de partida, pero no como el objetivo del diseo
de la interfaz.
A partir de aqu, el diseador empezar con la etapa propiamente de diseo, donde ser fundamental, analizar
las polticas de diseo que se deben emplear y aplicarlas segn el tipo de interfaz que se desee proveer.
Modelo SSOA
El modelo SSOA [Schneiderman B., 1992], es el Modelo Sintctico-Semntico del conocimiento del usuario.
Provee un marco de definicin sobre las diferentes formas y grado de conocimiento que un usuario puede
emplear al interactuar con un sistema.
La distincin entre las sintaxis y semntica, surgi a partir de la definicin de compiladores, donde se
separ el proceso de compilacin de la entrada de texto o comando, denominado anlisis sintctico, del
proceso de interpretacin del mismo, denominado anlisis semntico.
Los diseadores de los sistemas interactivos tambin pueden contar con un modelo sintctico semntico,
pero aplicado al conocimiento del usuario.
Como se explic en la fase de requerimientos, el conocimiento sintctico se refiere al entendimiento de
detalles dependientes al uso de los dispositivos. El conocimiento semntico, incluye informacin conceptual
concerniente a la aplicacin -objetos y acciones del dominio de la tarea- y al uso general de los sistemas
interactivos.
Por ejemplo, puede existir el caso de una persona que sea experta en conceptos computacionales pero
novata en conceptos propios de la aplicacin.
De acuerdo al grado de conocimiento semntico y sintctico que el usuario posea, se puede realizar una
clasificacin general de los mismos en tres categoras:
Clasificacin Explicacin
SSOA de Usuarios
Usuario Novato nNo tienen ningn conocimiento sintctico.
nCuentan con un conocimiento semntico pobre sobre el uso de sistemas
interactivos.
nMedianamente tienen un entendimiento de la aplicacin.
Usuario Intermedio nTienen buen conocimiento semntico tanto del uso de sistemas de
software como del dominio de tareas.
nPresentan inconvenientes a nivel de cmo se llevan a cabo las tareas en
el sistema, con problemas en recordar detalles de conocimiento sintctico.
Usuario Experto nEstn muy familiarizados con todos los aspectos sintcticos y semnticos
del sistema.
Tabla 2.3: Modelo SSOA
Es necesario aclarar que los conceptos de conocimiento sintctico y semntico tienen una correspondencia
directa con las capas que presenta el software. El corazn funcional procesa informacin semntica mientras
que el procesamiento de informacin sintctica pertenece a las capas propias de la interfaz del usuario.
En la figura siguiente se muestra cmo el conocimiento semntico es transformado en formas y
especificaciones sintcticas para ser presentadas y manipuladas por el usuario final.
conocimiento
semntico
ms concreto conocimiento
sintctico
Figura 2.3: El conocimiento semntico y sintctico de acuerdo a las capas de abstraccin del software de la Interfaz del Usuario.

Importante
nEl modelo SSOA, puede ser aplicado y considerado por los diseadores, si los mismos no pueden
realizar una modelizacin y clasificacin de usuarios finales del sistema, ms detallada o precisa.
V - Etapa de Diseo de la Interfaz

El objetivo de la etapa de diseo es expresar los resultados abstractos del anlisis, en especificaciones
computacionales tangibles. El propsito inicial no es tan slo solidificar el anlisis, sino tambin estimar su
validez. Las especificaciones son necesarias para estimar tanto las posibilidades tcnicas, como los costos
de desarrollo.
Si el modelo conceptual del usuario es considerado por el diseador, entonces podr definir para la interfaz,
un claro mapeo entre las tareas y los objetos semnticos con los representados en la pantalla, y permitir que
el conocimiento requerido al usuario para utilizar el sistema, sea lo ms mnimo posible.
Ms an, si el diseador trabaja no slo con el modelo del usuario sino con los dems estudios realizados,
tanto sobre el ambiente como sobre la aplicacin, podr lograr soluciones a nivel de interaccin muchas ms
adecuadas y coherentes.
Sabiendo que, por lo general, no se podr contar con especificaciones a nivel de interfaz completas, entonces
en esta fase, el diseador deber partir con un proceso de anlisis, integracin, refinacin, conjugacin de los
modelos que se crearon en la etapa de anlisis, en pos de lograr una aproximacin inicial de la misma.
Entonces, en este proceso de diseo se integran y se refinan los modelos del usuario, del sistema y del
entorno, adquiridos en la fase anterior.
La interfaz, especificada a travs de diferentes medios como prototipos, escenarios, expresar las nociones
extradas de dichos modelos, y permitir la evaluacin por parte de los usuarios, de la usabilidad y legibilidad
del diseo.
Como consecuencia del proceso de evaluacin de la interfaz, se puede requerir modificaciones tanto en
el diseo de la misma como en los modelos definidos. En estos casos, es el rol del diseador de la interfaz,
refinar el modelo del usuario y los aspectos de diseo, mientras que, si se requiere modificar algn aspecto de
la funcionalidad, ser necesario acudir al diseador del sistema.
Este constante refinamiento, es influenciado por las interacciones que el usuario va teniendo con el sistema
en el proceso de evaluacin, formando un proceso en espiral, donde nuevas modificaciones permitirn volver
a redefinir etapas anteriores.
En cada momento, se re-analiza la interfaz diseada, se re-disea y se re-evala analizando los costos
y beneficios de la interaccin. En cada paso, se puede descubrir nueva informacin que fue desconocida o
pasada por alto en pasos previos, que debe ser incluida afectando decisiones de diseo ya tomadas.
Tambin, adelantarse a las siguientes etapas puede ser adecuado. Por ejemplo, investigar sobre
caractersticas del hardware, nivel de servicios de las herramientas de software disponibles, es muy til para
determinar la factibilidad y los costos del diseo especificado.
En definitiva, la tarea del diseador es un proceso de revisin iterativa refinando el paso actual como los
anteriores, y adems, puede incorporar conocimientos de pasos posteriores, que influirn en sus decisiones
actuales.
iseo, las fuentes de informacin consideradas pueden ser modelos realizados en la etapa de anlisis
como tambin versiones previas de diseo desarrollados y evaluados anteriormente:
modelo modelo modelo modelo diseo resultados de

funcional del usuario del ambiente de la interfz de la interfz la evaluacin
diseo de la interfz
Figura 2.4: Fuentes de informacin de la Etapa de Diseo.

En este figura se visualizan distintas vertientes de informacin, que debe considerar el diseador de la
interfaz en cada versin prototpica de su diseo.
Esto implica, como consecuencia, una constante comunicacin entre los diferentes roles involucrados.
Hay una interaccin cclica entre el diseador del sistema con el diseador de la interfaz, ste a su vez con el
programador de la interfaz, adems se puede incluir al rol del evaluador que conjuntamente con el usuario es
fuente de modificaciones.
En todo este contexto y arquitectura de trabajo, el diseador tendr bsicamente que disear en forma
gradual y decidir en forma metdica, sobre mltiples cuestiones de la interfaz, a saber:
Decisiones de diseo Explicacin

Determinar el estilo de nEs necesario elegir qu estilo de interaccin se proveer en el
interaccin sistema. Que puede ser un dilogo secuencial, con manipulacin
directa, concurrente o basado en comandos.
nTambin puede ser combinaciones de tipos diferentes de dilogo.
Decidir sobre el tipo de vAnalizar si el sistema contar con una interfaz textual, visual, icnica
interfaz a proveer o con caractersticas hbridas. Si brindar aspectos de adaptacin,
evolucin, y/o de inteligencia.
nTambin, dependiendo del tipo de aplicacin, si es una interfaz
para un sitio de Internet, o para aplicaciones mviles o para sistemas
telefnicos.
Decidir cuestiones de nDebe disear los aspectos de las pantallas y representacin de la
visualizacin informacin, de los estados, de las entradas y salidas.
nDebe decidir sobre los paradigmas y objetos de interaccin.
nTambin, se debe analizar sobre el diseo de las ayudas.
Analizar aspectos de nSe tiene que decidir sobre los elementos de hardware que se
hardware necesitarn, destinados a la interaccin entre el hombre y la mquina.
nSi no son tradicionales, por ejemplo, una alfombra que detecte
la presencia de un usuario, se debe diagramar todo el bosquejo y
especificar los requisitos necesarios para que un ingeniero la pueda
crear.
nLo mismo, si se pretende utilizar por ejemplo, algn sistema
biomtrico de voz en aplicaciones mviles.
Especificar cuestiones nEs responsabilidad del desarrollador de la interfaz, no slo
de comportamiento especificar cuestiones de visualizacin, sino detallar la forma en que
la interfaz se va a comportar frente a los usuarios.
nSe debe planificar el comportamiento de los objetos, el feedback,
el control de la interaccin, el sistema de asistencia, el manejo de
errores.
nSe debe analizar la correlacin de las diferentes pantallas del
sistema, modos de activacin y cierre, o el mapa de navegacin de
pginas en caso de ser un sitio Web.
nSe debe planificar la adaptacin que se desee proveer o cuestiones
no tradicionales como aspectos inteligentes, de inferencia, de
evolucin.
nSe debe plantear tambin, la relacin de la interfaz con la aplicacin,
definiendo formas de integracin e invocacin de funciones.
Disear las nTodos los aspectos dinmicos y comportamiento de la interfaz
funcionalidades y deber ser programado, por lo tanto requerir un previo proceso de
servicios a nivel de diseo.
interfaz nEn el caso de las interfaces con signos de adaptacin, se debe
analizar la lgica de la adaptacin y su aplicacin, como tambin su
mecanismo de recoleccin de la informacin del usuario y de sus
sesiones.
Disear el nMucha informacin de la interfaz debe ser registrada para poder ser
almacenamiento externo usada en las prximas sesiones. Por ejemplo, informacin de algn
en bases de datos o en estado que el usuario quiere posteriormente reanudar, acciones que
archivos fueron suspendidas.
nTambin se puede almacenar perfiles de los usuarios y sus
caractersticas. Preferencias, hbitos, comportamiento del usuario.
Tabla 2.4: Decisiones de Diseo.

Por lo que se concluye de la tabla anterior, la complejidad del desarrollo de la interfaz reside fundamentalmente
en la heterogeneidad y multiplicidad de las cuestiones que deben decidirse en el diseo, adems de la
arquitectura prototpica en la que se trabaja y de la coordinacin de los diferentes roles que participan en
ella.
Recordar
rEl proceso de refinamiento iterativo de la interfaz, hace que el diseador requiera de representaciones
de diseo flexibles.
rLos conceptos de la aplicacin no estn expuestos a grandes cambios pero, la expresin o visualizacin
de los mismos es muy probable que s vaya adquiriendo diferentes alternativas.
Caractersticas del Proceso de Diseo

La etapa de diseo es un proceso complejo, donde pueden visualizarse tres etapas importantes, que son:
nLa divergencia: est determinada por el espacio de bsqueda de todas las posibles soluciones. La parte
esencial para esta etapa, es la coleccin de informacin necesaria para el proceso de diseo y la investigacin
de posibles alternativas. Se recolecta informacin de los modelos de usuarios analizados, del ambiente, de la
aplicacin, se investiga en el mercado propuestas similares, los estndares existentes, entre otras cuestiones.
La etapa es puramente exploratoria y mucha de la informacin que se maneja aqu, es incierta.
nEtapa de Transformacin: aqu la informacin, los datos, objetivos propuestos en la etapa anterior, son
utilizados para disminuir la complejidad del problema. En esta etapa, se sintetiza la informacin, se descartan
datos irrelevantes, se refina y se postula un nuevo delineamiento del diseo. Es importante, investigar sobre
normativas de diseo o recomendaciones publicadas, que sean apropiadas para el caso y poder aplicarlas en
el bosquejo.
nEtapa de Convergencia: la misma apunta a determinar una solucin de diseo bien definido, a partir del
estado inicial inestable.
Estas etapas, pueden observarse en el siguiente grfico:
Comienzo del diseo

Divergencia: Coleccin de la Informacin
Transformacin: Procesamiento y sntesis de la informacin
Convergencia: Gestacin de un nuevo diseo sobre la informacin recolectada

Fin del diseo
Figura 2.5: Etapas involucradas en el Diseo de la Interfaz.
La transformacin de los problemas ms complejos a ms sencillos se logra, recolectando informacin

til sobre el espacio de diseo. La recoleccin de ejemplos, estereotipos, estndares permite reestructurar
el problema en nuevas formas, disminuyendo as la complejidad del problema inicial y su nivel de
incertidumbre.
Obviamente, el proceso de diseo no es tan simple y directo, por ejemplo, durante la etapa de convergencia
puede suceder que ciertos aspectos queden sin resolver, por lo que ser necesario reformular las etapas
previas y comenzar a recaudar mayor informacin.
Importante
nLas etapas del proceso de diseo, denominadas divergencia, transformacin y
convergencia, se desarrollan cada vez que se redisee la interfaz, o sea que se efectan en
cada iteracin del ciclo de vida prototpico.

VI - La interfaz y la Prototipacin
Los mtodos convencionales para el desarrollo de sistemas interactivos tienen una naturaleza analtica,
exacta y presentan un proceso secuencial, donde las etapas de desarrollo de suceden una tras otra, una vez
que estn completas y correctas.
Esta metodologa tradicional, puede ser adecuada para el desarrollo de la parte de la aplicacin del sistema,
pero presenta una gran rigidez cuando se la considera para desarrollar la interfaz del usuario, porque deben
incorporarse los factores humanos y es necesario realizar testeos con los usuarios, desde el principio.
El diseo de la interfaz constituye un proceso permanente e iterativo de correccin con la participacin de
los usuarios, y esta esencia iterativa impone la necesidad de cambios en el tradicional y lineal ciclo de vida
del software.
Es necesario una propuesta metodolgica que permita trabajar en forma experimental, debido a que no
existe una teora suficientemente firme que prevea y asegure, sobre una interfaz que an no est construida,
cules sern concretamente los posibles efectos que ella puede ocasionar sobre los distintos usuarios, o cmo
ser el comportamiento de los mismos frente a las futuras interacciones con el sistema. Ms an, cuando
sobre dicha teora, se deban sustentar la fundamentacin del diseo y del resto de las etapas de desarrollo.
Dentro de la comunidad de HCI, y como forma de sustentar el diseo centrado en el usuario, se introduce
a los prototipos como uno de los conceptos esenciales para el gerenciamiento de las interfaces del usuario.
Se establece la necesidad de desarrollar prototipos sobre la componente de interaccin, para ser evaluados,
reconstruidos y refinados hasta que la interfaz final haya sido diseada. El usuario se ve como la parte integral
de todo este proceso.
La Prototipacin es un proceso que se caracteriza por una secuencia de prototipos que son construidos
hasta que se obtenga un buen entendimiento de los requerimientos del software. Es utilizada cuando la forma
que debe tomar la interaccin hombre mquina no est inicialmente definida [Pressman, 1991]. A travs de
ella, los ingenieros en software pueden adquirir una idea clara del producto a desarrollar.
Cuando los especialistas en HCI desarrollan los prototipos, se convierten en contribuyentes claves para la
conformacin de la fase de requerimientos de la interfaz como tambin, posiblemente de la aplicacin.
El proceso prototpico puede involucrar la gestacin de varias versiones del sistema, donde cada una de
ellas constituye un ambiente para la correccin, evaluacin y testeo, cuyos resultados servirn y se utilizarn
para que la versin siguiente sea ms detallada, completa y correcta que la anterior, teniendo en cuenta la
perspectiva del usuario.
Dentro de este proceso, cada vez que se genera una versin prototpica de la interfaz, se debe redefinir el
prototipo utilizado, modificarlo y volverlo a evaluar. Por lo tanto, el prototipo, a medida que se va corrigiendo y
perfeccionando, debe cumplimentar las siguientes etapas que se ilustran a continuacin:
DEFINICIN DEL PROTOTIPO
CONSTRUCCIN DEL PROTOTIPO
EJERCITACIN DEL PROTOTIPO
EVALUACIN DEL PROTOTIPO
Figura 2.6: Etapas de un Prototipo.
Si uno analiza las etapas de desarrollo de los prototipos, puede encontrar una correspondencia con las
fases de la ingeniera de la interfaz. La etapa de Definicin del prototipo, tiene una estrecha relacin con
el proceso de especificacin de requerimientos. La etapa de Construccin, abarca las etapas de diseo
y de representacin del bosquejo de la interfaz. En la etapa de Ejercitacin, se incluyen las etapas de
implementacin y, posiblemente, las de conversin e instalacin. Por ltimo, la etapa de Evaluacin, presenta
ciertas analogas con las etapas de testeo de usabilidad y entrenamiento de la interfaz del usuario, slo que
en estos casos estamos trabajando con versiones incompletas del sistema.
Caractersticas de la Prototipacin
En su concepcin ms amplia, la Prototipacin puede ser considerada una metodologa de desarrollo
de software [Reilly, J.P., 1996], mientras que, para otros autores es considerada un mtodo o tcnica de
representacin de diseo de la interfaz. Este es el caso de la Ingeniera de Usabilidad [Nielsen, J.,1994],
donde se la incluye dentro de la Fase de Diseo.
En ambos casos, la misma permite desarrollar una visin prematura del sistema, donde se puntualiza
en un principio, la visualizacin, la interaccin y el comportamiento global del mismo, abstrayndose de las
caractersticas computacionales y proveyendo un marco para que los futuros usuarios del sistema puedan
observar el comportamiento del mismo e interactuar con l antes de que sea finalmente desarrollado.
El proceso de testeo y de verificacin en el desarrollo del software es muy importante, porque permite
analizar si los requerimientos de especificacin iniciales son satisfechos por el sistema.
Como dicho proceso, clsicamente se encuentra como una de las etapas ya finales del ciclo de vida
tradicional del software, los problemas o errores encontrados en esos trminos son muy difciles y costosos
de solucionar, pues requieren modificaciones en todas las etapas anteriores, que estn concluidas casi en su
totalidad.
En cambio, con la Prototipacin, hay una concurrencia entre las etapas del desarrollo del sistema, la
interaccin del usuario con una versin prematura e incompleta de la interfaz, permite evaluar anticipadamente
los requerimientos iniciales de la misma. De esta manera, las modificaciones o cambios requeridos, podrn
ser incorporados en las prximas versiones del diseo.
La Prototipacin puede ser conceptuada como una metodologa, pues determina un marco en donde todas
las etapas de desarrollo de la interfaz, se suscitan. A travs de ella, se representa el diseo, se evala, se
redisea, se implementa parcialmente, y hasta, se descubren los requerimientos del usuario.
Este ltimo aspecto, es una de las caractersticas ms importantes de la Prototipacin como proceso
metodolgico y es que, a travs de ella, se va construyendo el modelo del sistema a desarrollar. Cuando se
plantea el problema en la etapa de requerimientos, no requiere la realizacin de un modelo completo. Tiene,
por filosofa, que ste nunca alcanzar la completitud hasta que no sea evaluado y analizado, rediseado
iterativamente, con la participacin directa y activa del usuario y del resto de los roles.
Entonces, es una metodologa que puede partir desde un modelo inicial incompleto hasta posiblemente,
ausente. Los requerimientos, que constituyen la base para la correcta construccin de los sistemas, son
desarrollados y completados mediante la propia participacin y experiencia que los usuarios van adquiriendo
con el prototipo.
El modelo es evolutivo, dinmico, se va completando en las sucesiones versiones que se generan del
sistema, y adems en las etapas concurrentes de anlisis, diseo e implementacin, que estn muy unidas y
donde la realimentacin es una constante.
Entonces, el mismo modelo es utilizado para disear, implementar y testear el sistema pero, a su vez,
los resultados de estas etapas permitirn modificarlo para completarlo an ms. As sucesivamente, hasta
alcanzar la completitud del mismo.
Ventajas de la Prototipacin
Una de las ventajas atribuidas a esta metodologa, es una mejora importante en la comunicacin entre los
usuarios del sistema y el equipo que desarrolla el software.
Se evitan muchos problemas de comunicacin, desentendimientos, malas interpretaciones que surgen entre
ellos debido fundamentalmente a que cuentan con profesiones, formaciones o conocimientos esencialmente
distintos.
Al usuario le cuesta mucho desde su perspectiva, formular sus ideas y comunicar las especificaciones
completas del sistema, y muchas veces, esas descripciones son traducidas a trminos computacionales por
los analistas o diseadores, en forma incorrecta.
Adems, los sistemas desarrollados mediante la Prototipacin tienden a garantizar la calidad de uso
y satisfaccin de los usuarios, en el sentido que los mismos usuarios fueron los que participaron en las
distintas evaluaciones en donde se analizaron, entre otras cuestiones, si los requerimientos iniciales fueron
considerados.
Otra de las ventajas importantes, es que reduce el costo total del desarrollo del sistema. Esto est muy
relacionado con la capacidad que ofrece de adelantar y superponer el proceso de evaluacin y testeo, con el
resto de las etapas. As, los problemas o errores encontrados, pueden ser detectados a tiempo y solucionados,
mientras el sistema est desarrollndose.

Tipos de Prototipos
Los prototipos se pueden clasificar de diferentes maneras, de acuerdo a su tipo de evolucin, medios
utilizados, tcnicas empleadas, grado de fidelidad.
De acuerdo a su tipo de evolucin, los prototipos pueden ser revolucionarios o evolutivos:
Clasificacin segn Explicacin

Tipo de Evolucin
Prototipo nEl prototipo es diseado, construido, evaluado y es utilizado hasta
Revolucionario que se alcanza la completitud del modelo del sistema, una vez que
esto sucede se comienza desde cero con la implementacin del
producto final.
nEs un prototipo que se descarta, una vez que sea utilizado como
herramienta representativa del diseo de la interfaz del usuario.
Prototipo Evolutivo nEl prototipo evoluciona y se va optimizando mediante las
modificaciones iterativas hasta alcanzar la implementacin completa
del sistema de software final.
nEn las versiones finales del prototipo se debern incluir los
algoritmos funcionales de la componente de aplicacin.
Tabla 2.5: Clasificacin del Prototipo segn grado de Evolucin.
Si tenemos en cuenta las tcnicas empleadas en el proceso de construccin de prototipos, se pueden

distinguir los siguientes tipos:

Tcnicas empleadas
Prototipos MockUps nSon prototipos muy sencillos que nicamente describen
interacciones particulares con el sistema. Permiten implementar un
escenario, una situacin particular de una interaccin o un dilogo
con el sistema.
nConsiste de una serie de diseos de pantallas presentadas al
usuario en papel o por computadora, a travs de las cules son
analizadas y evaluadas heursticamente.
nEs la tcnica de prototipacin ms simple, menos costosa y es
utilizada comnmente en etapas iniciales.
Escenarios nPueden ser impresos en papel o en video, describen la situacin
actual de un proceso de trabajo.
nSon utilizados en las entrevistas realizadas a los usuarios.
Glosarios nSon documentaciones que especifican la terminologa del lenguaje
profesional del dominio de la aplicacin.
nOfrecen referencias a objetos relevantes usados en el dominio de
aplicacin.
Manuales del usuario nProveen documentacin y detalles especficos de las operaciones
tempranos provistas y reflejan los diferentes modos de uso.
Herramientas de nBasado en una tcnica de representacin formal, define una
software versin ejecutable del sistema.
nHay prototipos para interfaces representadas por diagramas de
transicin y estado, hay prototipos basados en gramticas BNF en
mecanismos orientados a eventos.
Tabla 2.6: Clasificacin del Prototipo segn Tcnicas utilizadas

Cualquiera de estas tcnicas permiten de diferente manera, la realizacin de evaluacin de usabilidad de
la interfaz, se presta a un juego de comparaciones y testeos basados en un conjunto de criterios u objetivos
ya preestablecidos.
Adems, los prototipos pueden realizarse utilizando medios como el papel o mediante un graficador,
procesador de textos, software presentacionales como PowerPoint, software de instrucciones asistida como
Adobe Director, sitios para diseo y testeo de bocetos o wireframes como Cacoo, Pencil, Balsamik. Existen
prototipos programados mediante lenguajes de programacin como Java, Delphi, Visual Basic, Toolbook,
entre otros, donde se permite adems representar el control de dilogo.
Finalmente, los prototipos se pueden clasificar por su grado de fidelidad. La fidelidad depende de ciertos
factores como ser, del medio utilizado para la representacin prototpica, de las caractersticas representadas
en la interfaz, del grado de completitud funcional que presenta, como ser, si incluye validaciones, ayudas,
mensajes de error, funciones sintcticas, entre otros.
Con respecto a la fidelidad de los prototipos, los mismos pueden ser:

Fidelidad
Prototipo de Baja nSon una sucesin de pantallas estticas en papel o por
Fidelidad computadora.
nLa sucesin de pantallas y el flujo, efecto de acciones del usuario
deben ser contadas textualmente o representadas a mano.
nSon ms fciles de realizar, ms rpidos pero menos eficientes.
Prototipo de Alta nSon considerados especificaciones ejecutables del diseo.
Fidelidad nDescriben el comportamiento y los aspectos dinmicos de la
interfaz.
nRepresentan la interaccin, el control del dilogo y el estilo del
dilogo.
nEn ellos se ve reflejado las dependencias en vivo, el asincronismo,
el flujo de control de aberturas y cierres de contextos, el feedback,
que incluya validaciones, ayudas y mensajes de error.
nSon ms difciles de realizar, pero ms expresivos, ms verdicos
y mejores en la comunicacin y presentacin.
Tabla 2.7: Clasificacin del Prototipo segn Fidelidad.
Importante
nEn un proceso de ingeniera de la interfaz del usuario, se pueden utilizar prototipos de diferente
fidelidad.
nLos prototipos de baja fidelidad, pueden ser utilizados al principio para presentar ante el usuario
diferentes propuestas de diseo de la interfaz. Cuando el usuario elige una, se comienza entonces
con el ciclo de vida prototpico completo, desarrollando las sucesivas versiones en alta fidelidad.
VII - Etapa de Implementacin

En esta seccin, se va a describir cmo es la estructura del software necesaria para generar una interfaz
del usuario y cmo est compuesta. Adems, se van a analizar, las herramientas de desarrollo que surgieron
para construir la componente de interaccin de un sistema.
Una vez que est desarrollado el diseo de la interfaz, que haya sido analizado, testeado, aceptado por los
usuarios del sistema, se procede a la etapa de implementacin. La programacin de una interfaz del usuario
alcanza usualmente, grandes proporciones de cdigo, ocupando ms del 50% de la codificacin total del
sistema.
La complejidad no reside slo en la extensin del cdigo, sino en cmo se estructura el software necesario,
para generar una interfaz del usuario y cmo est compuesta.
Una manera de estructurar el software de la interfaz, es definirla como una jerarqua de mquinas
abstractas, cada una proveyendo servicios determinados a las capas superiores y requiriendo servicios de las
capas inferiores.
La modularizacin del software en capas de abstraccin, permite tener independencia entre las capas,
respecto a las implementaciones de cada una de ellas, tener un mecanismo de proteccin y ocultamiento de
la informacin que cada una maneja.
As, se define una taxonoma del software de la interfaz del usuario en donde se divide al sistema interactivo,
en los siguientes niveles:
CORAZN
FUNCIONAL CONTROL
DE DILOGO
OBJETOS DE
INTERACCIN SISTEMAS
DE VENTAS MANEJADORES
DE
DISPOSITIVOS
MAYOR ABSTRACCIN
Figura 2.7: Software de la Interfaz del usuario dividido en diferentes capas de abstraccin
Las capas de abstraccin del software, entonces son:
Capas del software Explicacin

Manejadores de nManejan los requerimientos especficos de entrada y salida,
dispositivos realiza el control del dispositivo fsico.
nPor ejemplo, el manejador de dispositivos enva instrucciones a
nivel de pixeles para mostrar el cursor en una determinada posicin.
Sistema de ventanas nControla los recursos reales involucrados en la interaccin, maneja

los recursos de dispositivos fsicos de entrada y salida.
nProvee las abstracciones utilizadas para la interaccin.
nPor ejemplo, el sistema de mltiples ventanas.
Objetos de interaccin nCapa que maneja y controla los objetos de interaccin con el cul
el usuario interacta.
nEs una entidad que el usuario puede percibir y manipular con
dispositivos de interaccin fsicos tales mouse, teclado.
nUn objeto de interaccin incluye una componente de presentacin
(output) y una componente de interaccin (input).
El controlador del nEs una porcin del software de la interfaz que controla el medio
dilogo utilizado y la secuenciacin de las interacciones del usuario.
nDetermina la lgica de los eventos.
nPor ejemplo, determina cundo un objeto de interaccin, est
habilitado para el usuario.
nTambin, controla el estilo de la interaccin, por ejemplo, controla
multidilogos abiertos en una caja de dilogos.
Corazn funcional nPertenece a la aplicacin. Permanece totalmente ignorante de la
forma en que sus estructuras de datos y funciones son expuestas al
usuario, va los objetos de interaccin.
nDebe ignorar tanto el medio usado para la entrada y salida, como
la forma especfica en la cul la informacin es trasmitida.
nPor ejemplo, no debera saber si en un sistema de ventanas se
utiliza el audio o grficos en la salida, o qu lenguaje es usado para
presentar el texto, si las entradas fueron ingresadas por teclado o
con reconocimiento de voz.
Tabla 2.8: Capas del Software.

Cada capa, funciona como una mquina abstracta, que provee ciertos servicios. El usuario de estos
servicios se denomina cliente, y el proveedor de los mismos se denomina servidor. Cada capa intermedia,
debe controlar una porcin del total de la interfaz, y debe proveer un mapeo entre las capas inferiores y
superiores a ella.
Entonces, proporcionan al diseador del dilogo, una manera de especificar la interfaz en un alto nivel de
abstraccin, automatizando todo el proceso de traduccin al cdigo resultante y facilitando todo el desarrollo
del ciclo de vida prototpico de la interfaz.
Herramientas para el Desarrollo de la Interfaz

Como se dijo anteriormente, crear una buena interfaz del usuario para un sistema es una tarea difcil. El
software para soportar estas interfaces, usualmente es muy extenso, complejo y difcil de refinar.
Adems, como la ingeniera de una interfaz del usuario, generalmente consiste en una repeticin del
ciclo de diseo, prototipacin y evaluacin, hasta que los requerimientos del usuario sean satisfechos, esta
iteracin encarece mucho el proceso de desarrollo.
En pos de reducir el alto costo de diseo e implementacin de la misma, surgieron softwares dedicados al
gerenciamiento de las interfaces.
Una herramienta de software para el desarrollo de una interfaz del usuario puede ir desde una simple rutina,
a un ambiente completo para el anlisis, representacin, diseo, implementacin y evaluacin de la interfaz.
Surgen, as los denominados UIT, User interface Toolkits, que son libreras de rutinas que pueden ser
invocadas para implementar ciertos aspectos de la interfaz, de bajo nivel.
Particularmente, estas libreras proveen la implementacin de algunos objetos de interaccin como
calendarios interactivos, grficos estadsticos, con el manejo de sus dispositivos fsicos asociados. Los toolkits,
solamente cubren la etapa de la implementacin de alguna parte o componente de la interfaz del sistema.
Por otro lado, se encuentran los UIMS, sistemas para el gerenciamiento de las interfaces del usuario.
Estos son completos ambientes interactivos, generalmente basados en un conjunto de herramientas para
proveer e integrar la mayora de las etapas del desarrollo de la interfaz.
En particular, los UIMS pueden soportar la mayora de las fases del ciclo de vida de la interfaz del usuario,
como su diseo, prototipacin, ejecucin, evaluacin, modificacin y mantenimiento.
Estos sistemas, administran los detalles de la pantalla, sus entradas y salidas asociadas y la interaccin
con el resto del programa. Proveen tcnicas de interaccin, permiten manipular la secuencia de eventos, el
control del dilogo, ms todo el manejo de dispositivos de hardware.
Adems, permiten que todo este proceso de desarrollo lo pueda realizar los propios desarrolladores del
dilogo, quienes pueden no ser puramente programadores.
Importante
nEl trabajo de los UIMS, tienen por objetivo simplificar el desarrollo de las interfaces del usuario
grficas. Lo mismo ocurri en la dcada del 70 con el surgimiento de administradores de base
de datos, DBMS que contribuyen en la gestin de toda informacin almacenada en bases de
datos.
La siguiente figura, describe las componentes de un UIMS:
cdigo
de aplicacin
descripcin de
dilogo manejador de
presentacin
de dilogo dilogo
descripcin
de presentacin
manejador
de lxico
sistemas de
ventanas
Figura 2.8: Componentes de un UIMS.

El UIMS separa el cdigo, de la lgica de la aplicacin de la de la interfaz del usuario, introduciendo un
controlador de dilogo entre ambos. Es posicionado al tope del paquete grfico de las ventanas, pero cabe
aclarar que hay implementaciones de UIMS, que proveen su propio sistema de ventanas.
El manejador lxico, procesa las entradas del usuario convirtiendo las entradas a eventos lgicos y los
pasa al controlador del dilogo. Este controlador es la descripcin del dilogo, es la interpretacin semntica
de las secuencias de eventos lgicos, que recibe desde el manejador lxico. El manejador del dilogo luego
produce comandos para invocar las funciones de la aplicacin correspondientes.
En el proceso de la salida, el mdulo de presentacin de datos acepta las notificaciones, establece la
descripcin perceptiva de la interpretacin y realiza llamados a funciones del sistema de ventanas o del
paquete grfico.
La interfaz semntica, entre el manejador del dilogo y la aplicacin, permite independencia del dilogo
que facilita el desarrollo y la consistencia.
Desde el punto de vista de la usabilidad, la arquitectura UIMS, permite aplicaciones interactivas, con control
externo fluyendo desde y hacia la interfaz.
Los constructores de interfaces grficas basados en UIMS, son la primer generacin de herramientas que
focalizan el diseo centrado en el usuario. Permiten especificaciones o modificaciones del dilogo, rpidas
y visuales. La capacidad de programacin visual, es especialmente adecuada para soportar diseo iterativo.
Soportan el desarrollo y refinamiento de interfaces, con editores visuales y componentes reusables.
VIII - La importancia de la Evaluacin de la Interfaz

La evaluacin, juega un papel importante en la ingeniera de interfaz, en todas las etapas del ciclo de vida.
La evaluacin puede servir para varios propsitos, dependiendo en la madurez del sistema.
Durante la investigacin y desarrollo, la evaluacin centrada al usuario, es muy importante para descubrir
y validar conceptos iniciales. El equipo de desarrollo necesita feedback creble para testear la adecuacin del
diseo y saber cmo mejorarlo. Los desarrolladores adems, necesitan comparar alternativas de diseo.
Durante la evolucin del diseo, tcnicas de evaluacin de usabilidad pueden aplicarse para estimar
requerimientos de entrenamiento. Adems, se requieren datos confiables para determinar cuando el diseo
iterativo ha alcanzado los objetivos de usabilidad.
Es importante, para efectuar los diferentes procesos de evaluacin, la identificacin precisa de los usuarios
potenciales del producto y el poder establecer una buena comunicacin con ellos.
Por lo general, se trabajan con muestras de ms de 20 personas, que deben ser lo ms representativas
posibles a la comunidad de usuarios a la que est dirigido el sistema. La contratacin de usuarios para
cumplimentar el rol de evaluadores, debe ser proporcional y compatible, a los perfiles detectados en la
modelizacin de usuarios.
Hay dos tipos principales de mtodos de evaluacin, que han emergido en el rea de HCI, que difieren en
el tipo de evaluadores que intervendrn en ella: Los Mtodos de Indagacin y los Mtodos de Inspeccin.
Ambos pueden ser utilizados en un mismo proyecto y en diferentes etapas de desarrollo.
Mtodos de Indagacin
En este tipo de evaluacin, son los potenciales usuarios del sistema quienes llevarn a cabo el proceso
evaluativo. Ellos, cumplirn el rol de evaluador de la interfaz.
Los mtodos de indagacin, son los ms utilizadas en el ciclo de vida prototpico, tanto para conformar la
etapa de requerimientos, como en los tests de mercado.
La tcnica de evaluacin de indagacin ms importante en el rea de HCI, es el Test de Usabilidad o
Test Emprico del Usuario.
El test emprico del usuario, involucra la recoleccin de datos sobre la interaccin del mismo con el bosquejo
de diseo, durante el desarrollo de escenarios de tareas.
Los estudios empricos y experimentos en laboratorios, dan informacin precisa sobre cuestiones
especficas. Pueden ser utilizados para comparar la efectividad de alternativas de diseo, identificar y
diagnosticar problemas de usabilidad, o para validar que el diseo ha satisfecho sus objetivos.
Para generar feedback, los usuarios generalmente prueban prototipos y participan en entrevistas sobre el
contexto de su ambiente de trabajo.
Una definicin de trabajo de usabilidad para testeos empricos, puede ser determinado en trminos de
eficiencia y xito de la performance de las tareas que el usuario debe realizar en el sistema.
Generalmente, estas mediciones reflejan el grado de usabilidad y productividad registrando, variables tales

como tiempo empleado en tareas, errores, patrones de comportamiento durante las sesiones de testeo. Los
datos subjetivos de los usuarios tambin son informativos para chequear satisfaccin y diagnosticar problemas
de usabilidad.
El proceso de entrenamiento, es un aspecto crtico de usabilidad. Esto se debe a que los usuarios, ya en
sus primeras experiencias en la interaccin con el sistema, intentan y se esfuerzan en aprender a operarlo.
Se presentan problemas de memorizacin, evidenciado por usuarios que repetidamente intentan recordar
los comandos y procedimientos, agravndose la situacin en aquellos sistemas que no han sido diseados
cuidadosamente. Dificultades en el entrenamiento puede tambin reflejar un nmero de otros problemas
generales, como la desorientacin.
Los reportes verbales pueden ser tambin registrados mientras el usuario est efectivamente evaluando
el sistema. La ventaja de estas tcnicas de pensar en alto es que los usuarios permiten a los diseadores
conocer lo que ellos piensan, sus problemas, sus temores respecto al uso del sistema.
Los reportes verbales se utilizan en combinacin con los datos recogidos en la observacin del
comportamiento, as se obtiene un alcance mayor de informacin. Esta tcnica es muy til para evaluar
aspectos de diseo de alto nivel, por ejemplo su mapeo con el modelo conceptual diseado.
Las tcnicas de recoleccin de datos, para tests empricos de usuarios han sido descriptos por Schneiderman
[Schneiderman, 1988]. Mltiples cmaras de video son generalmente utilizadas para registrar la performance
de los usuarios frente a la realizacin de tareas y para obtener comentarios de los usuarios. Pasar videos de
usuarios experimentando problemas de interaccin son pruebas suficientes y poderosas para convencer a los
programadores de la importancia de optimizaciones de diseo.
Mtodos de Inspeccin
En los mtodos de inspeccin, se contrata a evaluadores externos que sean expertos en HCI, para
cumplimentar el proceso de testeo de la interfaz. Por los costos que esto conlleva, por lo general, se los
organizan, una vez que se tienen versiones prototpicas bastantes avanzadas y completas.
Estos mtodos, constituyen revisiones de diseo de software y son comunes en proyectos de desarrollo,
como tambin, para establecer estndares en interfaces del usuario.
El tipo ms popular de tcnicas de inspeccin es el llamado Evaluacin heurstica, en donde participa un
pequeo equipo de expertos que independientemente examinan el sistema.
Ms que chequear el sistema sobre estndares inflexibles, ellos buscan las partes de la interfaz donde se
han desobedecido algn principio de diseo. La evaluacin heurstica ha mostrado ser la mejor tcnica para
la deteccin de problemas de interaccin.
Los expertos concluyen con un informe donde se puntualizan todos los sectores de la interfaz que presentan
fallas a nivel de usabilidad, se detalla la normativa que se infringe y pueden incluir posibles soluciones o
alternativas de depuracin.
Importante
nLas evaluaciones pueden ser de campo, de laboratorio o de mercado.
nLas evaluaciones de campo, significa que se probar el sistema frente a usuarios
en el lugar de trabajo de los mismos.
nEn las de laboratorio, los usuarios deben acudir a la oficina donde los desarrolladores
de software estn trabajando.
nEn la de mercado, la evaluacin se efecta una vez que el sistema est siendo
usado por los usuarios, estando en modo productivo.

Ejercitacin
A - Cite al menos 5 caractersticas de la interfaz de usuario que justifiquen la siguiente afirmacin:
La metodologa de Prototipacin es adecuada para el diseo e implementacin
de la interfaz del usuario.
______________________________________________________________________________________
_______________________________________________________________________________________
______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
B - Cite al menos 3 tareas, que debe realizar un desarrollador de software previo al diseo de la interfaz.
______________________________________________________________________________________
_______________________________________________________________________________________
______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
C.Dadas las siguientes afirmaciones, responder Verdadero o Falso.

nLos testeos empricos del usuario se llevan a cabo a travs de expertos que evalan la v f
interfaz segn estndares de diseo.
nEl feedback generado por los usuarios durante las evaluaciones heursticas refleja el v f
grado de usabilidad y productividad del sistema.
nEl lenguaje de programacin Java provee su propio paquete para el diseo de componentes v f
de la interfaz.
nEn la etapa de diseo se verifica lo que el usuario conoce del dominio de la aplicacin y v f
del uso de la computadora.
nLas evaluaciones de campo permiten evaluar la interfaz del sistema mientras los usan v f
usuarios reales en entornos controlados.
Ejercitacin - Proceso de Desarrollo de la Interfaz del Usuario -57

Referencias
rBaecker, R. M., Grudin, J., Buxton, W. A. S., and Greenberg, S. (1995). Readings in Human-computer
Interaction: Toward the Year 2000. Morgan Kaufmann Publishers: San Francisco, CA.
rBailey, R. W. (1989). Human Performance Engineering: Using Human Factors/Ergonomics to Achieve
Computer System Usability. Englewood Cliffs: Prentice Hall.
rBarry W. Boehm (1988). A Spiral Model of Software Development and Enhancement. IEEE Computer.
rBass, Len, Coutaz, Jolle (1991). Developing Software for the User Interface. Reading, MA, Addison-
Wesley Publishing.
rCaroll, J. M. (1995). Scenario-based Design: Envisioning Work and Technology in System Development.
Wiley: New York, NY.
rCoutaz, J. (1991). Architectural Design for User Interfaces. Proceedings of ESEC91.
rDavid N. Card and Robert L. Glass (1990). Measuring Software Design Quality. Prentice Hall, Engewood
Cliffs, New Jersey.
rGould, J. D. (1995). How to Design Usable System. Morgan Kaufmann Publishers.
rHix,D., and Hartson, H. R. (1993). Developing User Interfaces: Ensuring Usability through Product and
Process. John Wiley and Sons.
rIsensee, S., and Rudd, J. (1996). The Art of Rapid Prototyping. International Thomson Computer Press,
ISBN 1-85032-215-5.
rJohn, Bonnie E., Bass, Len (2001). Usability and software architecture. In Behaviour and Information
Technology, p. 329-338.
rLaurel, Brenda (1990). The Art of Human-Computer Interface Design. Addison-Wesley Publishing Co.
rNielsen, Jakob (1994). Usability Engineering.Nielsen, Jakob; Mack, Robert (1994). Usability Inspection
Methods.
rNorman, Donald (1991). Cognitive Engineering in User Centered System Design.
rPfleeger, Shari (1991). Software Engineering: The Production of Quality Software. Macmillan.
rPreece, Jenny (1994). Human-computer interaction. Addison-Wesley.
rPressman, Roger (1996). Software Engineering: A Practitioners Approach. McGraw-Hill.
rReilly, J. P. (1996). Rapid Prototyping: Moving to Business-centric Development. Thomson Computer
Press: Boston, MA.
rRudd, Jim, Stern, Ken, Scott I (1996). Low vs.High Fidelity Prototyping Debate. Interactions 96.
rRuoff, C., and Horowitz, E. (1995). A System for Specifying and Rapidly Prototyping User Interfaces.
rShneiderman, B. (1987). Designing the User Interface: Strategies for Effective Human-Computer Interac-
tion. Addison-Wesley, Reading, MA.
58- Referencias - Proceso de Desarrollo de la Interfaz del Usuario

Capitulo III
Normas de Diseo de Interfaces Visuales
-59
Normas de Diseo de Interfaces Visuales
El diseador de la interfaz del usuario puede hacer uso de

importantes recursos visuales y multimediales, tales como
imgenes, videos, sonido, fotos. Pero, ser indispensable
analizar y aplicar normas de diseo especficas para lograr
un mejor aprovechamiento del espacio, forma, color y
contenido.
Temas a Tratar
I -Introduccin
II -Caractersticas de las Interfaces Visuales
IV - Las Tcnicas de Interaccin Visual y sus Aspectos de Diseo
nMltiples Ventanas
nMens
nManipulacin Directa
nGestos
nFeedback Visual
nDependencias
nAnimaciones
nExploradores de Objetos
nCajas de Dilogo
Ejercitacin
Caso de estudio
Referencias
60- Normas de Diseo de Interfaces Visuales

I - Introduccin
Desde cierto punto de vista, se requiere un entrenamiento mayor y ms especfico para leer un libro que
para contemplar y apreciar una pintura, aunque la forma de construccin de la imagen puede ser tanto o ms
compleja que la confeccin de un texto escrito.
La eficiencia comunicacional como su impacto visual y el grado de informacin transmitido en un instante
de tiempo, se debe medir desde la percepcin del usuario y no desde la complejidad de las herramientas
utilizadas.
En el rea de Informtica, a mediados de la dcada de los 80, se produjeron importantes cambios que
revolucionaron la forma de representar y expresar el dilogo hombre-computadora, sustituyendo al texto,
utilizado hasta ese momento como nico recurso de interaccin.
Debido a los grandes avances tecnolgicos, la aparicin de pantallas con mayor definicin, dispositivos de
interaccin grficos como el ratn -inventado en 1968 por Douglas Engelbart- o el lpiz ptico, comenzaron a
desarrollarse para los sistemas de software, un estilo de interfaz ms poderoso que el textual.
De esta manera, surgieron las denominadas Interfaces Grficas o Interfaces Visuales, denotadas
comnmente con las siglas GUI (de Graphical User Interface) o VUI (de Visual User Interface)
respectivamente.
Este tipo de interfaces incrementaron exponencialmente el poder representativo de la informacin
como tambin los posibles medios de expresin por parte de los usuarios. Esto ltimo mediante mltiples
mecanismos de interaccin como el movimiento, la voz, el sealamiento de objetos, el arrastre, buscan facilitar
las analogas con el mundo real. Ejemplos de esto son los carteles de advertencia o de error como el cartel
de pare de la circulacin vehicular.
Esto trajo aparejado consecuentemente una acentuada evolucin en el campo de los sistemas operativos
para el soporte de este tipo de interfaces, como tambin de los lenguajes de programacin que se adecuaron
para poder desarrollarlas minimizando los costos y la complejidad que se les atribuyen.
Desde el punto de vista metodolgico tambin hubo cambios importantes, surgi el concepto de
Independencia de Dilogo que, como se explic en el Captulo 1-Seccin 5, estipula una nueva forma de
encarar y tratar los sistemas interactivos. Es una estrategia que realiza una separacin desde los tiempos
iniciales del desarrollo, entre la interfaz del usuario o componente de dilogo y la aplicacin o componente de
cmputos, dando lugar a nuevas arquitecturas del software.
Esto provoc por parte de los desarrolladores una mayor autonoma para tratar temas especficos de la
interfaz, una necesidad de especializacin en el tema de factores humanos y de investigacin sobre principios
de diseo acordes a este tipo de representaciones visuales.
II - Caractersticas de las Interfaces Visuales

Es muy difcil expresar una definicin concreta de lo que una Interfaz del Usuario Visual significa. Los lmites
entre una interfaz del usuario visual y la textual, aunque parezcan interfaces muy contrapuestas, pueden ser
difusos y llevar a realizar ciertos cuestionamientos como ser: qu es lo que debe ser visual, los datos o el
dilogo?, es suficiente con poner dibujitos en los resultados del sistema?, es suficiente con programar en
un lenguaje visual, para que la interfaz del usuario sea visual?
Fundamentalmente en el proceso de transicin, en el cul la interfaz del usuario textual deja de ser la
interfaz tradicional y se impone la interfaz grfica como tal, surgieron muchsimas interfaces del usuario
hbridas, o sea que en parte pueden considerarse textual y en parte visual. Hoy en da, tambin puede ocurrir
esto, donde ambos tipos de interfaces siguen vigentes y hasta pueden convivir en un mismo producto. Este
es el caso de algunos celulares con interfaz textual que no admiten manipulacin directa pero que presentan
algunos conos.
Entonces, especficamente qu caractersticas debe cumplir una interfaz del usuario para considerarse
visual?. Hay autores que son ms estrictos y la definen con ms restricciones y condicionamientos. Otros, en
cambio, son ms generales en su definicin.
Aqu, se va a abordar una de las concepciones ms amplias que se le atribuyen a las Interfaces Visuales,
en donde se estipula que una interfaz del usuario visual es aquella que se encuentra presente en sistemas
de computacin que soportan algunas de las siguientes caractersticas: visualizacin, interaccin visual, o
programacin visual.
Estas caractersticas que se mencionan en la definicin, hacen referencia a qu componente o parte
de la interfaz debe estar dotada de cualidades visuales, si la componente de presentacin debe ser visual
visualizacin-, o el dilogo que provee la misma debe serlo interaccin visual- o, si el usuario tiene la
posibilidad de programar algoritmos, consultas, estrategias de bsquedas, que la interfaz le permita hacerlo
en forma visualprogramacin visual-.
Normas de Diseo de Interfaces Visuales -61
Para aclarar un poco ms estos conceptos, se va a explicar cada uno de ellos a continuacin.
Visualizacin:
Se entiende por visualizacin al uso de representaciones visuales para ilustrar los datos y entidades que
intervienen en los programas, como tambin las entradas y salidas del sistema. Estas representaciones
visuales pueden ser grficos como diagrama de tortas o grficos estadsticos, imgenes como la imagen de un
usuario o avatar en un sistema de mensajera instantnea, secuencias de animacin como por ejemplo una
presentacin o demostracin automtica de una funcionalidad de un sistema donde se ilustra una secuencia
de acciones.
En la visualizacin, son los objetos los que tienen asociado una representacin visual, pero no es obligatorio
que la interaccin hombre-mquina o el modo de dialogar con el sistema tambin sean visuales.
El dominio de aplicacin de estos sistemas puede verse incluido dentro de procesamiento de imgenes,
robtica, manejo de base de datos de imgenes, entre otros.
Por ejemplo, en la figura siguiente se muestra la pantalla de un Sistema de Escrutinio de Votos, donde la
interaccin con el mismo es secuencial, basada en mens funcionales, pero la representacin de los resultados
electorales se realiza visualmente mediante diagramas de tortas.
GRFICO DE LOS RESULTADOS ELECTORALES

TOTAL MESAS ESCRUTADAS 111
DIP. NACIONALES DIP. PROVINCIALES CONSEJALES
69 69
3 3
3
37
37 93
93
93
TOTAL DE VOTOS TOTAL DE VOTOS TOTAL DE VOTOS

491 422 199
Figura 3.1: Representacin visual sobre los resultados de un escrutinio de votos.
Interaccin Visual: Interaccin Visual:

Una interfaz del usuario no slo se compone de la representacin de los datos de entrada, resultados y de
los estados del sistema.
En una interfaz del usuario se encuentra tambin la comunicacin, la conversacin entre el usuario y el
sistema, cuestiones de comportamiento que deben ser expresados y representados de alguna manera.
Una interfaz provee interaccin visual cuando el usuario para comunicarse con el sistema y llevar a cabo
sus intenciones, utiliza dilogo asincrnico, basado en manipulacin directa y en eventos. El usuario puede
expresarse seleccionando, sealando, arrastrando, moviendo objetos presentes en la pantalla. Un ejemplo
sera un aplicativo de geometra donde el usuario puede mover, arrastrar, dimensionar figuras geomtricas.
Por otra parte, la interfaz tambin debe utilizar mecanismos visuales para expresarse ante el usuario,
esto es en el caso de dar indicaciones, aclaraciones, mensajes de error u otro tipo de dilogo que vaya
dirigido desde la mquina al usuario. Entonces, una interfaz visual debe utilizar grficos, colores, movimientos,
animaciones, sonido para transmitirle informacin al usuario del sistema.
El dominio de aplicacin donde se encuentra interaccin visual est constituido por las interfaces basadas
en manipulacin directa, interfaces gestuales, interfaces icnicas, video juegos, entre otros.
Por ejemplo, en la figura siguiente se muestra la pantalla de un Sistema para la Confeccin de Carteles, en
donde en el momento de la impresin, se muestra una animacin sobre la progresin de este proceso:
Figura 3.2: Interaccin visual en el proceso de impresin de un Sistema de Confeccin de Carteles

Programacin Visual: gramacin Visual
Se entiende por programacin visual al uso de expresiones visuales en donde intervienen conos gestos
durante el proceso de la programacin.
Aqu, tanto el lenguaje como sus constructores de programacin deben tener una representacin visual
en vez de textual. Las reglas y sus sentencias deben ser representados grficamente para especificar los
algoritmos en un lenguaje visual.
Los datos, parmetros u objetos que puedan intervenir en los algoritmos no necesariamente deben ser
visuales, aunque por lo general para mantener coherencia con el lenguaje provisto, son representados
grficamente, siempre y cuando esto sea factible.
El dominio de aplicacin para estos lenguajes de programacin visual incluye diseo visual de interfaces
del usuario, programacin visual de consultas a bases de datos, manejo de formularios y diseo asistido por
computacin.
Como ejemplo, se puede ilustrar al lenguaje de programacin procedural IconAuthor, que presenta
tanto sus constructores como sus sentencias en forma visual mediante el uso de conos representativos.
El programador, para confeccionar sus algoritmos, tiene que realizar una serie de selecciones, arrastres de
conos, elegir algunas opciones, completar algunos datos en forma visual, desentendindose de cuestiones
sintcticas.
Figura 3.3: Programacin visual en el lenguaje IconAuthor.
Importante
nSobre el concepto de Interfaz del Usuario Visual hay algunos autores que indican la necesidad de
cumplir con todas las caractersticas de visualizacin, interaccin y programacin visual para definirla.
Otros, en cambio, estipulan que con solo proveer alguna de ellas ya es condicin suficiente.
nLo esencial es que se trate de disear sistemas que minimicen los costos de interpretacin y ejecucin
por parte de los usuarios.

Una vez que el concepto general de interfaz visual sea entendido claramente, se profundizar en las
tcnicas de interaccin visual que conforman o pueden conformar una interfaz del usuario.
Se entiende por tcnica de interaccin visual, al conjunto de formas que pueden ser empleadas o combinadas
por el diseador de la interfaz del usuario para especificar un aspecto, un comportamiento visual o un estilo de
interaccin que adoptar la interfaz frente a los usuarios del sistema interactivo.
Entonces, las tcnicas de interaccin visual son los recursos o los mecanismos que el diseador emplea
para confeccionar una interfaz del usuario visual, afectando fundamentalmente el proceso y representacin
del dilogo ms que a nivel de apariencia de la interfaz.
Entre las tcnicas visuales ms comnmente utilizadas, se pueden mencionar a:
A- Mltiples ventanas:a:
Esta tcnica ha sido una de las tcnicas visuales ms populares de los ltimos aos.
La revolucin realmente ocurri cuando el concepto de manipular ventanas result apropiado en el mundo
de las estaciones de trabajo.
Es una tcnica que permiti implementar la Metfora de escritorio, creada por Xerox Park en 1970, en
donde se trat de construir una ilusin al usuario, de visualizar al sistema como una oficina, con un montn de
papeles o actividades en desarrollo, con la simulacin de los objetos y servicios propios de las mismas.
A nivel de factores humanos, esta metfora permite que el usuario perciba un ambiente que le resulta familiar,
mediante la visualizacin de elementos, el acceso a funciones fcilmente y la localizacin de contextos lgicos,
pudiendo apreciar a la computadora como una herramienta de fcil utilizacin y entendimiento. Un ambiente
en donde por ejemplo, el usuario asocia el concepto de guardar un objeto en un fichero naturalmente.
Ahora, qu se entiende realmente por ventana?. Especficamente, una ventana es definida como un rea
rectangular, que contiene una aplicacin de software o un archivo de informacin. Permite la definicin de un
contexto independiente, donde se agrupan subtareas o datos, del mismo nivel de abstraccin.
Por su definicin, se puede decir que con la utilizacin de varias ventanas en una interfaz del usuario, se
permite multiplexar y compartir el uso de la pantalla, que muchas veces la misma resulta ser muy limitada
cuando se debe expresar gran cantidad de informacin.
Adems, ofrece un poder significativo para la organizacin de la informacin y el control de presentacin,
con sus ttulos, bordes y colores de fondo que denotan agrupamientos particulares.
Entre sus principales ventajas se encuentran la optimizacin del uso del estado real de la pantalla, la
facilidad de movimiento de un contexto a otro para trabajar simultneamente en diferentes tareas como por
ejemplo tener una planilla de clculo separada del correo electrnico y, la posibilidad que el programa de
aplicacin pueda entablar distintos hilos de dilogo o de ejecucin con los usuarios, como por ejemplo permitir
el llenado de ms de un formulario a la vez.
A continuacin, se muestra una pantalla con mltiples ventanas sobre un sistema de Taller Mecnico
desarrollado por alumnos de la ctedra, en donde se tiene informacin detallada de cada empleado que
atendi la reparacin del automvil seleccionado.
Figura 3.4: Ejemplo mltiples ventanas
B- Mens:
Una interfaz orientada a mens, notoriamente reemplaz en la dcada del 80al lenguaje de comandos,
puesto que le ofreca al usuario la posibilidad de elegir entre una serie de opciones, la funcin que necesitaba
ejecutar, ms que escribir el comando textualmente.
Desde el punto de vista de los factores humanos, los mens disminuyen el esfuerzo mental y el entrenamiento
exigido al usuario de definir secuencias complejas de comandos, le evitan el empleo de una sintaxis restringida,
y de memorizar cuestiones tcnicas y del lenguaje.
Entonces, se puede decir que un men es una lista limitada de opciones que pueden ser seleccionadas
por el usuario y que estn disponibles dentro de un marco visual comn.
Existen diferentes estilos de mens, se encuentran los mens horizontales -comnmente denominados
menu bar-, que tienen sus opciones organizadas en una lnea plana. Los mens verticales que por el contrario,
presentan sus opciones, una encima de la otra. Los mens pull-down combinan los dos anteriores, puesto
que se componen de un men horizontal del cul se despliega para cada una de sus opciones en un men
vertical.
Los mens jerrquicos son aquellos donde el conjunto de opciones estn distribuidas en varios niveles de
mens anidados, formando una estructura en cascada o en multinivel. El usuario dentro de un determinado
men tiene dispuestas opciones destinadas a la apertura de otros.
Tambin, se encuentran los mens pop-up que se caracterizan por no estn presentes en la pantalla, son
invocados cuando se necesitan, mediante una combinacin de teclas o mediante el botn derecho del mouse.
Por el contrario, se puede citar los mens de pantalla completa o full screen, que disponen su conjunto de
opciones de una forma que ocupa casi la totalidad de la pantalla.
Adems, los mens presentan una serie de caractersticas como ser su capacidad de deslizar sus opciones
-mens deslizables o con scrolling-, de permitir seleccionar ms de una opcin mens de seleccin mltiple,

de presentar dos versiones, una con un contenido mnimo de opciones ms utilizadas y otra en forma completa,
de permitir el uso de atajos o combinacin de teclas para seleccionar alguno de sus tems.
A los mens se les puede atribuir funciones sintcticas importantes como ser la configuracin de su
aspecto, los colores, el fondo, el tipo y tamao de letras utilizados, como tambin ofrecer diferentes criterios
de ordenacin de las opciones, reorganizacin general de los mens, el agregado o quite de opciones dentro
de un men, entre otros.
Entre las ventajas principales de esta tcnica visual, se encuentran la facilidad de acceso a las funciones,
simplicidad de manejo, reduccin del espacio de la pantalla destinado a la muestra de funciones, pero se les
atribuye por el contrario, que tienden a ser ineficientes, que la interaccin con muchos mens anidados resulta
ser engorrosa, fundamentalmente para los usuarios experimentados del sistema.
La pantalla siguiente muestra como ejemplo un sitio educativo sobre el Desarrollo de Huertas, desarrollado
por alumnos de la ctedra, en donde se visualiza un men pull-down.
Figura 3.5: Ejemplo de Mens.
C- Manipulacin directa:
En el Captulo 1-Seccin 3, se explicaron los diferentes tipos de dilogo humano-computadora y se
presentaron dos modelos de interaccin: la metfora de Modelo del Mundo y la Conversacional.
Entonces, la manipulacin directa es una tcnica de interaccin que responde a la metfora de Modelo
del mundo, en donde el usuario tiene a disposicin objetos que pueden ser accionados de mltiples maneras,
como ser mediante el arrastre, seleccin, mltiple seleccin, cliqueo, entre otros.
A diferencia del mundo conversacional, donde se tiene una descripcin lingstica de los objetos y de las
acciones a realizar sobre los mismos, con la manipulacin directa, el usuario directamente demuestra sus
intenciones en vez de escribirlas.
En el Modelo del Mundo, electrnicamente se hace mmica de los objetos del mundo real y de sus formas
de uso.
Desde el punto de vista de los factores humanos, la Manipulacin Directa responde a pensamientos
psicolgicos tales como los expresados por los filsofos Jean Piaget [Piaget, 1947] y Jerome Bruner
[Bruner, 1984] que indican que nuestro entendimiento del mundo est fundamentalmente relacionado con
una estimulacin visual y experiencia tctica sobre los objetos, donde uno combina habilidades activas
-manipulacin de objetos-, icnicas -reconocimiento visual para tender a la comparacin y contraste- y,
simblicas -entender grandes secuencias de razonamiento visual.
Tambin, varios investigadores han analizado los factores cognitivos subyacentes de este estilo de interfaz
y encontraron dos aspectos positivos muy importantes desde la percepcin del usuario: la nocin de distancia
y la de unin.
Factores relacionados Explicacin

con Manipulacin
Directa
Nocin de Unin nLa nocin de unin es el sentido de manipular e interactuar con
los objetos directamente sobre la pantalla, ms que realizar una
conversacin sobre ellos.
nPermite a los usuarios sentir la sensacin de estar involucrado
directamente con el mundo de los objetos, sin intermediarios.
Nocin de Distancia nLa nocin de distancia se refiere al esfuerzo mental del usuario
necesario para trasladar sus pensamientos e intenciones a los
requerimientos fsicos del sistema que est usando.
nEn una interfaz del usuario, esta distancia est reflejada por la
relacin entre la tarea que el usuario tiene en mente y la forma en
que esta tarea debe ser realizada va la interfaz.
nUn uso efectivo de manipulacin directa significa elegir una
apropiada representacin grfica para los objetos y acciones del
problema, as la interfaz le brinda la posibilidad al usuario de reducir
su esfuerzo cognitivo para desarrollar sus tareas.
Tabla 3.1: Factores relacionados con la Manipulacin Directa
En la siguiente pantalla, se muestra un sistema sobre una Sala de Pediatra desarrolllado por alumnos de
la ctedra, en donde el usuario puede arrastrar la imagen del beb a alguna de las camas disponibles de la
sala, mediante la tcnica de manipulacin directa.
Figura 3.6 Ejemplo de Manipulacin Directa.
D- Feedback visual:
No todo el dilogo se establece del usuario hacia la mquina. Frente a las acciones del usuario, la interfaz
debe reaccionar actuando, explicando, respondiendo, asistiendo o cualquier otro tipo de manifestacin, que
va dirigida hacia el usuario. Se requiere de una tcnica que soporte planeamiento de tareas, deteccin de er-
rores y recuperacin de errores, por lo tanto se requiere que la interfaz tenga indicadores explcitos del estado
del sistema [D.Norman, 1986].
Entonces, se denomina al feedback visual, a una reaccin de la interfaz frente a un estmulo. Es el proceso
de reflejar sobre la pantalla el resultado de alguna operacin realizada por el usuario, realizndose esto de una
manera grfica o mediante algn recurso visual.
En el contexto de HCI, el feedback es una expresin de salida producida por el sistema luego de procesar
la entrada de un usuario. El usuario luego interpreta el feedback, evala la situacin y acta en base a ella.
El feedback es esencial para que el usuario no se sienta a merced de la aplicacin. Cuando una accin
conlleva mucho proceso interno es necesario que el usuario est informado de ello, as puede disponer de su
tiempo y anticipar claramente sus acciones.
Existen dos tipos de feedback: el feedback superficial y el semntico.
Tipos de Feedback Explicacin

Feedback Superficial nUn feedback superficial es aquella respuesta del sistema que
suministra informacin propia de la entrada y salida, y de los
elementos que conforman las pantallas.
nLa misma se constituye a travs de informacin que se maneja a
nivel de interfaz del usuario.
nPor ejemplo, indicar que un casillero en blanco debe ser
completado.
Feedback Semntico nUn feedback semntico es aquella respuesta en donde se debe
extraer informacin de la aplicacin para lograr una respuesta ms
apropiada, significativa, ms completa y relacionada al dominio de
la aplicacin.
nPor ejemplo, mostrar informacin sobre el estado y progresin de
una determinada transaccin.
Tabla 3.2: Tipos de Feedback.
Un feedback informativo e inmediato permite hacer del sistema una sucesin de estados explcitos, permite
responder mediante confirmaciones, validaciones, detecciones de errores, rechazos, demoras, aclaraciones.
Hay que tener en cuenta que los indicadores de error o mensajes de error son un tipo especfico de
feedback.
A continuacin, se muestra un ejemplo de feedback informativo, que los alumnos aplicaron sobre un sitio
de Turismo.
Figura 3.7: Ejemplo de Feedback.
E- Gestos:
En el entorno de HCI, gestos es una marca, estela o camino que traza el usuario sobre la pantalla, para
expresar alguna informacin o representar alguna accin que quiera realizar.
Una interfaz que admite gestos como forma de interaccin por parte del usuario, implica que el mismo puede
realizar una manipulacin cuyo trazo o camino que genere en ese movimiento, es analizado e interpretado por
la interfaz, punto por punto.
Entonces, se puede decir que una sesin de entrada gestual consiste de una secuencia o un camino
de puntos logrado por determinadas acciones que el usuario desempea mediante dispositivos fsicos
como el teclado o el mouse. Es similar a una sentencia de comandos, ya que se compone de operaciones y
parmetros.
El sistema luego, trata de realizar el anlisis sintctico de los gestos y de los objetos que intervienen en la
sesin de entrada y los transforma en llamados a procedimientos semnticos.
En los siguientes ejemplos, se muestra el uso de gestos para especificar las operaciones de borrado (A)
e insercin de textos (B), que el sistema debe interpretar.
CANSADOS
NOS RETIRAMOS A NOS RETIRAMOS A
-A- O
Figura 3.8: Ejemplos de Interaccin Gestual.

La interfaz que admite este poderoso recurso, est basada en una tecnologa de reconocimiento de
imgenes, en donde el sistema es capaz de entender la configuracin significativa de trazos, puntos, que
constituyen la informacin del camino.
Se puede observar que hoy en da las interfaces del usuario adoptaron la interaccin gestual, ya que es
mas natural donde los humanos estn acostumbrados a interactuar mediante gestos y usar herramientas
tocandolas. La tecnologa ha avanzado lo suficiente como para que el poder de clculo disponible alcance
para que un ordenador pueda interpretar los gestos. Existen cascos, anteojos, muequeras, u otros dispositivos
o comandos para hacer efectivos los gestos, hasta inclusive las cmaras web son muy tiles para detectar e
interpretar movimientos de la cara, manos o cualquier otra parte del cuerpo.
F- Dependencias:
Muchas veces, un mismo concepto semntico es representado sobre el espacio de la pantalla de varias
maneras, para enfatizar su grado de importancia.
Por ejemplo, puede suceder que la variable temperatura de una caldera sea visualizada mediante diferentes
mecanismos, a travs de un casillero textual, de la imagen de un termmetro y de un rectngulo que se va
coloreando de acuerdo al calor de la misma.
En estos casos, hay que mantener siempre una coherencia entre los valores que expresan estas diferentes
representaciones, puesto que hay una dependencia significativa entre ellas.
Su definicin formal es la siguiente, una dependencia especifica una relacin causal que debe ser
siempre mantenida. Sucede cuando al manipular un objeto de la pantalla puede significar consecuencias
en la aplicacin que, a su vez, causen efectos directos o indirectos sobre otros objetos de la misma pantalla.
Esta herramienta es muy poderosa y permite que el sistema, ante la manipulacin de un objeto determinado,
ajuste todas las partes, como as tambin, los objetos que dependen de l.
Por ejemplo, en la siguiente pantalla, se muestra el sistema de Ruleta realizado por alumnos de la ctedra,
en donde el jugador Seba puede observar su estado de situacin o balance, a travs de diferentes objetos
dependientes, como ser el cuadro de Balance Gral, la carita amarilla triste, el cuadro Seba con su saldo negativo.
Figura 3.9: Ejemplo de Dependencias
G- Animacin:
La animacin es una tcnica de interaccin que visualiza el proceso interno de un sistema dinmico.
Es una parte integral en la interfaz visual donde los cambios en el sistema estn provocados por acciones
autnomas del propio objeto animado que complementa las operaciones del usuario.
Mediante la animacin, la interfaz es capaz de simular el comportamiento complejo de problemas
dinmicos. Presenta como ventaja, la posibilidad de representar una gran cantidad de informacin en un
perodo reducido de tiempo y de garantizar la comprensin de determinadas caractersticas que no son obvias
con los grficos nicamente. La capacidad expresiva de una animacin es muy significativa y puede ser muy
til para el feedback de la interfaz en el caso de representar visualmente el estado y el progreso de un proceso
en curso, como por ejemplo, animar el proceso de desfragmentacin de archivos del disco.
A continuacin, se muestra una pantalla con una animacin para representar el estado de una impresin
de un cartel.

Figura 3.10: Ejemplo de Animacin.
H- Explorador de Objetos:
La organizacin de la informacin en la pantalla es un problema muy complicado y ms an cuando se
trata de datos masivos. La tcnica visual de explorador de objetos o grillas interactivas permite mostrar un
gran caudal de datos en una manera ordenada y categorizada, donde el usuario puede manejar y consultar la
informacin en forma agrupada dentro de un contexto particular.
La misma se define como una tcnica de interaccin que permite visualizar una lista de objetos compuesto
por varios atributos. Se visualiza como una tabla donde cada fila es la especificacin de cada objeto y en
las columnas se muestran los valores de sus atributos y caractersticas. Adems, se caracterizan por su
condicin de interactividad, o sea el usuario puede manipular, seleccionar, editar, desplazar filas, entre otras
cuestiones.
Adems el explorador puede proveer al usuario funciones sintcticas que optimicen su manejo, como ser
la ordenacin de sus filas mediante diferentes criterios, el filtrado de filas, el agregado y quite de columnas, la
configuracin visual del mismo, entre otras.
A continuacin, se muestran ejemplos de grillas pertenecientes a un sistema de Cursos a Distancia
desarrollado por alumnos de la ctedra. El primero de ellos, es utilizado para la carga de participantes a un
curso, por lo que es editable. Mientras que la segunda grilla, muestra resultados de bsquedas realizadas, que
en este caso, es hallar informacin sobre los cursos tomados por un alumno, cuyo apellido es Garca. Este
explorador presenta como caractersticas que no es editable pero es de seleccin mltiple.
Figura 3.11: Ejemplo de Grillas
I- Cajas de Dilogo:
La apariencia de una caja de dilogos es muy parecida a la de un formulario de oficina, donde hay casilleros
a completar, tems a seleccionar, entre otros elementos.
En el rea de HCI, una caja de dilogos constituye un contexto rectangular, donde el usuario puede
especificar opciones y acciones usando botones y controles tales como listas, casilleros de entrada, listas
deslizables, botones para tildar, entre otros.
El usuario, a travs de una caja de dilogos tiene agrupados ciertos controles y mecanismos visuales que
le permiten dialogar con el sistema en forma bidireccional y mediante manipulacin directa.
Tiene presentes campos de entrada para ingresar texto, puede seleccionar, arrastrar, puede ver mensajes
a travs de una regin de salida y puede contar con una asistencia especfica por cada control y objeto de
interaccin presente.
Habitualmente, los distintos campos son evaluados independientemente pero la confirmacin o cancelacin
se realiza a nivel de caja de dilogo en general.
En la figura siguiente, se presenta una caja de dilogo en donde el usuario debe interactuar con diferentes
Figura 3.12: Ejemplo de una Caja de dilogo.
Una vez analizadas las tcnicas de interaccin visual ms importantes, se puede concluir que la combinacin
y utilizacin de estos recursos visuales constituyen la esencia de una interfaz visual.
Las bases conceptuales de estos paradigmas como el concepto general de las interfaces grficas, fueron
desarrolladas por Xerox Parc que, desde fines de la dcada del 70, pregonaba sobre ideas tales como
mltiples ventanas, manipulacin directa, uso de conos como carpetas, documentos y el uso del mouse.
De esta manera, surgieron estilos de interfaces grficas estndares como Interfaces WYSIWYG que son
las iniciales en ingls de What You See Is What You Get, o sea todo lo que ves es lo que puedes tomar, e
Interfaces WIMP, iniciales de Windows, Icons, Menus And Pointing Device, o sea ventanas, conos, mens y
dispositivo de sealamiento.
La primera hace referencia explcita a la tcnica de manipulacin directa, donde todo lo que el usuario ve, lo
puede tocar o manipular, mientras que en las interfaces WIMP hace referencia a las tcnicas de interaccin
ms importantes como ventanas, mens y manipulacin directa.
Una cuestin que hay que tener en cuenta respecto a las tcnicas de interaccin visual, es que la mayora
de estos recursos vienen ya desarrollados e implementados, encapsulados mediante componentes en libreras
de objetos de interaccin, incluidos en los lenguajes de programacin visuales o incorporados dentro de los
sistemas operativos, como es el caso de los sistemas de ventanas.
En estos casos, ya viene estipulados sus atributos particulares, su funcionamiento y un comportamiento
predefinido, slo resta que el desarrollador de la interfaz los incluya en su diseo, los integre y los aplique
adecuadamente en pos de mejorar y simplificar la interaccin con el usuario.
En las prximas secciones se van a analizar recomendaciones de diseo importantes referente a cada
tcnica de interaccin visual, de modo que permita la gestacin de interfaces visuales de calidad.
Importante
nTener en cuenta que el mal empleo de las tcnicas de interaccin puede hacer que decaiga
considerablemente el poder representativo y expresivo de las mismas, por lo tanto las normas que
acompaanan cada tcnica son esenciales y deben ser aplicadas adecuadamente.

IV- Tcnicas de interaccin Visual: Aspectos de Diseo
Las normas de diseo para Interfaces Visuales, son especficas a cada paradigma de interaccin visual
utilizado en la misma. Fundamentalmente, se basan en analizar cada uno de los recursos visuales explicados
y en definir ciertas pautas de diseo para aprovechar al mximo, los beneficios a nivel de factores humanos
atribuidos a cada uno.
Por ello, se van a listar a continuacin, los aspectos de diseo para cada paradigma de interaccin visual.
Mltiples Ventanas
Esta tcnica visual como se explic en la seccin anterior, ofrece dos ventajas muy importantes, permite
optimizar el uso real de la pantalla y segundo, permite que el usuario pueda llevar a cabo mltiples dilogos
con el sistema teniendo en cuenta contextos particulares fcilmente reconocibles.
Respecto al diseo de las mismas, vale aclarar que mucho de sus aspectos y comportamientos van a estar
delineados y definidos por el sistema operativo subyacente al software que se est desarrollando.
En la mayora de los casos, es el sistema operativo quien se encarga del sistema de ventanas gestionando
cuestiones de control, apariencia y funcionamiento de las mismas.
De todas maneras, muchos elementos de las ventanas pueden ser configurados y adaptados en manos
del desarrollador de la interfaz, por lo que es muy til analizar una serie de consideraciones de diseo para
que se pueda aprovechar al mximo este importante recurso visual. A continuacin se mostrar la tabla de
recomendaciones respectivas a este punto:
Recomendaciones sobre Explicacin

mltiples ventanas
Analizar las nHay funciones sintcticas de las ventanas pre-establecidas, tales
funcionalidades como maximizar, minimizar, redimensionar, mover y cerrar.
sintcticas nHay que analizar si estas funciones son adecuadas para el
contexto o parte de la interfaz que se est diseando, sino habra
que deshabilitarlas o quitarlas directamente.
nEn el caso que las mismas estn disponibles, hay que garantizar
su utilizacin correcta, analizando cmo queda el contenido de las
ventanas cuando el usuario las manipula con estas funciones.
Considerar el modo de nTodas las ventanas del sistema interactivo en cuestin, deben
apertura de la ventana ser activadas de igual forma. Va combinacin de teclas, mediante
un men funcional, una barra de botones.
nSe debe proveer un modo de acceso homogneo a las mismas.
nHay que analizar si la ventana se abre en modo exclusivo o no,
dependiendo de lo que es beneficioso para el usuario y para el tipo
de dilogo que se quiera establecer.
nEn el caso del modo exclusivo, todos los eventos sern atendidos
slo por una ventana, desactivando todas las dems, hasta que el
usuario culmine el dilogo con la misma.
vPor ejemplo, si se trata de una ventana de ayuda o asistencia, el
usuario necesitar tenerla abierta en forma permanente mientras
est sesionando con otras ventanas, por lo que el modo de apertura
exclusivo no sera adecuado para este caso.
Definir el mbito de la nEn el caso que la ventana se pueda mover, hay que establecer
ventana sobre qu rea de la pantalla se permite dicha movilidad.
nPuede ser que la ventana pueda moverse nicamente dentro del
espacio de la ventana en donde se produjo el llamado, o dentro
del radio del ambiente del sistema, o en caso contrario, o tener un
grado de independencia y estar en cualquier parte de la pantalla.
Analizar el cierre de las nHay que pensar el significado que se le va a dar a la funcin de
ventanas cerrar una ventana.
nA veces puede suceder que cerrar una de ellas implique cerrar
otras ventanas que se abrieron anteriormente. Hay que analizar en
qu casos esto es conveniente.
nPor ejemplo, puede ser que la ventana que se cierra sea la ltima
de una cadena de ventanas que constituyen una transaccin por
lo que es lgico pensar en que se cierren todas las ventanas
intermedias tambin.
Disear el contenido de nEl usuario en su proceso de aperturas y cierres de ventanas,
las ventanas se encuentra inmerso en una estructura de navegacin, que debe
estar lgica y concientemente diseada.
nLa navegacin entre ventanas debe estar sustentada mediante
una estructura balanceada y equilibrada. El anidamiento excesivo
de ventanas en alguna parte del sistema, dificulta la interaccin
y el acceso a dicho sector, como tambin induce a la prdida de
contexto.
nEl usuario debe percibir el sentido en que fueron organizadas las
ventanas, debe poder entender el mapa de navegacin subyacente
y bajo qu criterios se estructur la navegacin de ese modo.
Analizar la estructura nTodas las ventanas del sistema deben estar cuidadosamente
de navegacin de las diseadas, estableciendo claramente las zonas de ttulos, de
ventanas funciones, de mensajes, rea de contenido, el marco.
nPuede existir categorizacin de ventanas con sus diseos
particulares, como ser ventanas de formularios, ventanas de
mensajes, ventanas de resultados, ventanas de funciones.
Tabla 3.3: Recomendaciones de diseo para Mltiples Ventanas.
Importante
nEl diseador de la interfaz del usuario, no debe verse influenciado por cuestiones preestablecidas
sobre el sistema de ventanas, impuestas por el sistema operativo que utilice ni por el lenguaje de
programacin. Se debe tener claro conocimiento sobre los costos y el grado de factibilidad de poder
llevar a cabo su diseo propuesto.
Mens
Los mens presentan la posibilidad al usuario de poder elegir entre una serie de opciones en vez de
escribirlas textualmente, evitndole definitivamente cometer innumerables errores sintcticos y de tipeo.
Pero, a pesar que se les atribuye la cualidad de ser simples de usar, en el caso de la combinacin de
un men bar con mens jerrquicos comnmente utilizados en los sistemas interactivos actuales, pueden
complicar el acceso a las opciones si no fueron pensados a travs de una lgica de diseo apropiada.
Por lo tanto, existen para los mens, una serie de recomendaciones a tener en cuenta en el momento de
disearlos e incluirlos en la interfaz del software.
Analizar el contenido del nUn men debe estar compuesto de opciones claras, significativas.
men nLas mismas no deben llevar a interpretaciones errneas ni que genere
ambigedad ante el usuario.
nAl usuario no le debe insumir costo alguno, el entendimiento de las
opciones desplegadas en un men.
nPueden estar acompaadas por hints, o mensajes explicativos.
Analizar el orden de nEl usuario, al interactuar con el men, debe entender la forma en
aparicin de las opciones que el diseador organiz la lista de las opciones, debe encontrarle un
motivo o criterio de ordenacin de las mismas.
nLas opciones pueden desplegarse ordenadas alfabticamente.
Analizar el acceso a las nEl usuario siempre debera poder acceder a las opciones de un men
opciones aunque no cuente en ese momento con el mouse.
nSe deben proveer mecanismos va el teclado para la activacin del
men como de alguna de sus opciones.
Analizar el nivel de nUn men debe contener una serie de opciones que tengan el mismo
abstraccin nivel de abstraccin, el mismo nivel de detalle.
nNo pueden existir opciones ms generales que otras, tampoco debe
existir interseccin entre opciones ni que la definicin de una de ellas
incluya a otra.
nPor ejemplo, que en un men estn las opciones Consultar y debajo
Consultar Saldos.

Determinar una nEn el caso de un men bar, donde de cada opcin se despliegue un
organizacin adecuada de men jerrquico, hay que analizar la forma en que fueron organizados.
las opciones nSe debe establecer una organizacin que simplifique el acceso a las
tareas, que sea entendible y natural para el usuario.
nDebe existir un sentido en el agrupamiento de las opciones en distintos
mens, debe haber una estructuracin semntica, significativa.
nPuede ser que las opciones horizontales del men bar, sean objetos
mientras que las verticales sean funciones asociadas a los mismos. O al
revs, que horizontalmente se desplieguen los procesos y verticalmente
los objetos a los que se los aplican.
nLos mens jerrquicos deben proveer una misma cantidad de niveles
de profundidad. No deben estar desbalanceados o desnivelados ni
tampoco proveer anidamientos engorrosos.
nEstudios revelan que no es conveniente superar ms de siete opciones
por men y proveer ms de tres niveles de anidamiento.
nAdems, hay que definir un criterio para los diferentes niveles de
mens, que haya una organizacin por nivel de detalle, por nivel de
importancia o por otro tipo de lgica.
Analizar funciones nA los usuarios se les puede proveer funciones para configurar los
sintcticas asociadas mens del sistema, modificando su aspecto, tamao, tipo y colores
de letras de las opciones, como su feedback asociado para la opcin
seleccionada, la opcin que denota un men, la opcin por donde el
mouse est pasando, entre otros.
nTambin, puede proveer funciones de adaptacin donde el usuario
pueda agregar o quitar opciones, adelantarlas y cambiarlas de lugar,
modificar la jerarqua, cambiar el orden de aparicin de las mismas,
entre otras cuestiones.
Tabla 3.4: Recomendaciones de diseo para Mens.
Manipulacin Directa
La manipulacin directa determina un lenguaje de interaccin muy particular y poderoso, que tiene atribuido
ventajas muy importantes desde el punto de factores humanos.
Debido a la representacin grfica de los objetos y a su disponibilidad en el mbito de la pantalla, brinda
una estimulacin visual que motiva a que el usuario los accione o los manipule en pos de expresar sus
intenciones.
El usuario en una interfaz con manipulacin directa, demuestra lo que pretende hacer con el sistema
mediante acciones representativas, en vez de escribir expresiones o comandos relativos a ello. Pero, de todas
maneras, si la manipulacin directa est mal aplicada, por ejemplo el usuario no entiende qu significan esos
objetos grficos, ni sabe qu pueden hacer con ellos, muchas de sus ventajas se vuelven en contra.
Entonces, hay cuestiones de diseo referidas a la manipulacin directa que deben ponerse en prctica,
para garantizar sus mltiples beneficios.
Analizar la nHay que estudiar si la representacin grfica de los objetos permite el
representacin grfica reconocimiento de los mismos.
nEl usuario debe entender qu informacin representan los objetos
presentes en la pantalla.
Analizar los costos de la nSe refiere a si la interaccin mediante la manipulacin directa
manipulacin disminuye claramente el esfuerzo cognitivo y manual del usuario para
llevar a cabo sus intenciones.
nPor ejemplo, si requiere mucha puntera, se necesita tener pulso o se
debe arrastrar sobre lugares muy pequeos, la manipulacin se vuelve
costosa de realizar, demasiado rgida y puede terminar en desuso.
Determinar si la nHay que comprobar que la manipulacin que se le permita al usuario
manipulacin es explcita sea obvia y est explcitamente representada.
nEsto significa que hay que denotar con colores, formas u otros recursos
visuales, los elementos que se pueden mover, los lugares admisibles
de la manipulacin, los movimientos permitidos, entre otras cuestiones.
nPuede que la misma est acompaada por algn mensaje que incite
a la realizacin de movimientos, selecciones y arrastres.
Proveer distintos medios nAnalizar y brindar diferentes mecanismos para realizar la manipulacin.
para la manipulacin nQue la manipulacin sea posible tanto mediante el ratn como
mediante el teclado, u otro dispositivo de interaccin.
Combinar manipulacin nSe debe reflejar el estado previo y posterior a una manipulacin, como
directa con feedback tambin los movimientos que son admisibles, los objetos que se pueden
manipular y las zonas permitidas para llevar a cabo la manipulacin.
nSe debe representar visualmente las manipulaciones no vlidas, por
ejemplo trasladar un objeto sobre otro no permitido, que ste se inhiba
o visualice una seal de rechazo.
Que sea obvia nLa interfaz debe expresar de alguna manera que la manipulacin
existe y debe incentivar al usuario a realizarlas.
nLa manipulacin directa debe estar acompaada de algn mensaje
que incite a la realizacin de dicho movimiento.
Alcance de la nEl usuario debe tener claro mediante la interfaz, los lmites de la
manipulacin manipulacin. Si realmente, puede manipular objetos entre distintas
ventanas, entre distintas reas de la misma o no.
Tabla 3.5: Recomendaciones de diseo para Manipulacin Directa.
Feedback Visual
Al feedback se lo puede describir como las respuestas que da el sistema frente a actividades que realiza el
usuario. Es la expresin del estado resultante del sistema luego de acciones efectuadas por el usuario.
El feedback puede estar presente antes de la realizacin de una accin, en forma de feedback preventivo,
durante ella, o al finalizarse, manifestndose a travs de los mensajes de error o de cierre.
El feedback debe mostrar las variables fsicas del sistema, puede surgir cuando ciertas acciones o datos
fueron olvidados, cuando se necesita informar sobre la evolucin de un proceso cuyo tiempo de respuesta es
demasiado largo, o cuando se cometieron errores.
Antes de analizar cmo disear de la mejor manera el feedback del sistema, se deben considerar dos
cuestiones: la inmediatez y la granularidad del feedback.
Aspectos del Feedback Explicacin

Inmediatez nHace referencia a la rapidez en que surge el feedback respecto a la
accin correspondiente efectuada por el usuario.
nDetermina el lapso de tiempo entre la accin y la reaccin.
Granularidad nSe refiere al tipo de accin a la que est asociado el feedback.
nSi el feedback surge ante acciones muy elementales, entonces el
feedback tiene una granularidad muy fina, si surge ante transacciones,
se dice que es de grano grueso.
Tabla 3.6: Aspectos relacionados al Feedback.
Entonces, respecto a los aspectos de diseo, se debe considerar las siguientes recomendaciones:
Analizar la informacin nEl feedback debe ser informativo.
expresada nDebe expresar claramente el estado del sistema, el estado del proceso
o del dilogo que se est llevando a cabo con el usuario.
nDebe dar datos precisos, correctos, adecuados al contexto, a la sesin
y a la actividad que est realizando el usuario.
Determinar categora o nEs importante que el usuario cuente con diferentes clases de feedback
clases de feedback en su interaccin con el sistema.
nDebe existir al menos un feedback para aclaraciones, para
confirmaciones, para los procesos -tanto en su iniciacin, duracin
como en su finalizacin-, para los estados del sistema, para los errores.
Disear la visualizacin nSe debe representar al feedback de la manera ms entendible y
adecuada significativa para el usuario.
nLa representacin visual puede ser compleja como en el caso de
visualizar la progresin de un proceso en marcha, en donde se recurre
a animaciones.
nLa forma en que se visualiza el feedback debe ser homogneo ante
circunstancias similares, o ante cada categora de feedback.
Analizar la inmediatez nLa aparicin del feedback debe ser inmediato a la accin que lo
produce, debe dar una respuesta rpida ante la misma.
nSe debe evitar respuestas lentas donde el usuario ya comienza a
concentrarse en otros objetivos o entra en otros contextos.
Analizar la granularidad nHay que determinar a qu tipo de operaciones o acciones se le va a
y aparicin del feedback asociar el feedback y cundo es necesario que aparezca.
nHay que identificar las actividades a confirmar, validar, rechazar,
corregir, aclarar o que determinan un procesamiento significativo.
nSi se asocia al feedback a operaciones muy elementales grano fino-,
el dilogo con el sistema termina siendo muy interrumpido y controlado.
nHay casos donde es necesario proveer feedback de grano grueso, a
nivel de transacciones o actividades ms generales.
Disear el feedback ante nComo regla general, los errores deben ser reportados al usuario tan
una situacin de error rpido como se haya concretado, efectivamente producido y detectado,
para facilitar la posibilidad de reparacin del mismo.
nHay que analizar cundo realmente es necesario que surja el mensaje
de error para evitar tanto una interfaz rgida y controladora, como por el
contrario una interfaz descuidada.
nPor ejemplo, ante una entrada de datos incompleta por parte
del usuario, la interfaz debera esperar. Puede que el usuario deje
momentneamente los casilleros por la mitad y luego los culmine.
nHay que determinar la mejor forma de representar visualmente el
error cometido y el estado errneo resultante. Se puede incluir una
animacin de lo ocurrido, con atajos donde el usuario pueda saltar a
un estado previo seguro.
Disear un feedback nEn una interfaz visual, los conceptos, funciones, objetos son
preventivo representados visualmente ante el usuario, por lo que hay una relacin
entre los elementos de la aplicacin con sus representaciones dentro
de la interfaz.
nA veces por determinadas circunstancias que pueden surgir dentro de
la interfaz como desde la componente de cmputos, el acceso a estos
elementos no est permitido, por lo que este estado debe reflejarse en
las representaciones de los mismos.
nLa interfaz del usuario debe visualmente manifestar la habilitacin o
inhabilitacin de los elementos en las pantallas.
nDebe mostrar claramente lo que est activo de lo inactivo, lo
permitido de lo restringido, para evitar que el usuario realice actividades
infructuosas.
nHay que analizar la forma visual que tomar el feedback preventivo.
Se puede indicar la accin no permitida de alguna manera, con algn
color o cono, puede verse inhabilitada, por lo que no va a reaccionar
ante el clic del mouse, o directamente puede no ser mostrada en forma
momentnea.
Proveer feedback para nEs fundamental que se le informe al usuario qu est sucediendo ms
las demoras que nada cuando los tiempos de respuestas de algn proceso en curso,
son largos.
nHay que tener en cuenta que todo sistema tiene un determinado ritmo
de trabajo y de respuesta que el usuario se va acostumbrando. Esto
hace que el usuario construya cierta expectativa sobre los tiempos de
demora del sistema.
nCuando el sistema tarda ms que de costumbre, la interfaz debe darle
al usuario un feedback indicando que el sistema no est muerto y est
procesando.

Analizar el uso de nEl feedback tambin puede utilizarse para reflejar el modo en que
feedback para reflejar el est funcionando la interfaz del sistema.
modo corriente nPuede ocurrir que, en un determinado momento, la interfaz o alguna
de sus componentes est funcionando en modo de edicin o no, si
permite mltiple seleccin o no, si admite modificacin o no, si permite
arrastre o no, entre otros.
nPor ejemplo, hay editores que tratan la entrada de textos como
comandos si estn en modo input.
nEn general, los modos no se pueden evitar pero un feedback explcito
debera mostrar el actual modo.
Analizar el uso nEsto se refiere a que al cursor del mouse o de cualquier otro dispositivo
de las diferentes de apuntamiento, se le puede asociar diferentes imgenes dentro del
representaciones del espacio de la pantalla.
cursor como feedback nEsto puede aprovecharse para manifestar determinados estados o
transmitir cierta informacin.
nPor ejemplo, el cursor mano denota la posibilidad de cliquear esa
opcin, mientras que el cursor en forma de anteojos puede expresar
el estado de consulta en vez de edicin.
Tabla 3.7: Recomendaciones de Diseo del Feedback.
Importante
nEl feedback es un recurso muy importante que debe ser aprovechado al mximo, puesto que de l
depende la confiabilidad del sistema y su capacidad de transparencia.
nUn mal diseo del feedback puede llevar a malas interpretaciones del estado del sistema y permitir
adems, que el usuario contine interactuando en un estado inseguro y errneo.
Gestos
Al igual que en el caso de manipulacin directa, el gesto debe estar diseado de tal manera que simplifique
la interaccin del usuario y no la complique an ms.
Por lo tanto, debe ser diseado con cautela respectando las siguientes consideraciones:
Analizar los gestos nHay que estudiar cules sern los trazos que el usuario podr hacer y
admitidos por el sistema que sern admitidos e interpretados por el sistema.
nEstos trazos deben ser significativos y representativos para el usuario
y para la accin o concepto que l pretende expresar a travs de los
mismos.
nSi para el usuario es natural realizar determinado gesto, por ejemplo
el de borrar parte de un dibujo con una goma, y el sistema se lo permite,
sentir un alto grado de satisfaccin y lo incentivar a seguir utilizando
este mtodo visual.
Determinar la simplicidad nEsto significa evaluar de alguna manera, si la entrada de gestos
de realizacin del trazo simplifica la interaccin del usuario con el sistema.
nSi se requiere del usuario un muy buen pulso, o realizar un grafismo o
marca demasiado delineada, que implique varios intentos de su parte,
esto determina una cierta complejidad que debe ser evitada.
Establecer los nLos gestos por lo general son realizados por el usuario a travs de
dispositivos de dispositivos de interaccin como mouse, lpiz pticos u otros comandos.
interaccin a utilizar Pero tambin, deben estar disponibles a travs de otras alternativas
como el teclado o el dedo en el caso de pantallas digitales.
Analizar la direccin de nPor lo general, los gestos es una interaccin que va del usuario al
los gestos sistema, pero por cuestiones de homogeneidad puede que la interfaz
tambin se exprese en forma gestual.
nHay que analizar si es necesario que la interfaz tambin utilice este
recurso, determinando un lenguaje gestual bidireccional.

Analizar el alcance de nLa interfaz debe expresar claramente dnde y cundo se admite la
los gestos realizacin de gestos.
nEl usuario debe tener en claro, si un gesto puede sobrepasar una
ventana, si puede ir de un objeto de interaccin a otro, si puede marcar
ciertos elementos de la pantalla.
Establecer las funciones nLos gestos deben estar acompaados de funciones sintcticas que
sintcticas asociadas permitan su control y manejo.
nSe puede proveer funciones donde se permita borrar los trazos
realizados, desmarcar, permitir que las marcas sean imprimibles.
Tabla 3.8: Recomendaciones de diseo para Gestos
Dependencias
Una dependencia es una relacin entre dos o ms objetos de la pantalla que debe estar visualmente
establecida y mantenida coherentemente a lo largo del tiempo.
Es muy importante que el usuario sepa de la existencia de estos objetos dependientes puesto que al
modificar uno de ellos, se modificarn los restantes tambin. Se deben considerar fundamentalmente las
siguiente cuestiones:
Visualizacin implcita nEs necesario contar con elementos o recursos visuales que distingan
de la dependencia los objetos relacionados.
nSe puede utilizar colores comunes, fondos especficos, bordes,
lugares o mensajes que denoten la dependencia entre los objetos.
Duracin de la nHay que analizar hasta cundo dura la relacin de dependencia

dependencia entre los objetos, si durante una sesin, en todas ellas, mientras tenga
sentido, mientras sea necesario.
Alcance de la nHay que analizar la distancia permitida entre los objetos que estn
dependencia involucrados en una dependencia.
nLos mismos pueden pertenecer a diferentes ventanas, diferentes
pginas o estar en distintos marcos, generando costos adicionales para
la interfaz que debe manejar y controlar la dependencia entre ellos.
Configuracin de la nSe refiere a si se permite activar o desactivar esos vnculos entre los
dependencia objetos que estn determinados por la dependencia.
Tabla 3.9: Recomendaciones de diseo para Dependencias
Animacin
Las animaciones establecen un mecanismo visual que es muy poderoso y expresivo para denotar
situaciones dinmicas en espacios limitados. Pero sus principales ventajas se logran especficamente cuando
el usuario tiene el foco de atencin en la animacin, o sea mientras l la est observando.
En el caso que el usuario est desarrollando una determinada tarea y estn activadas ciertas animaciones
no relacionadas con la misma, puede provocar distraccin y molestias al usuario. Es necesario seguir una
serie de recomendaciones de diseo para lograr un buen uso de las mismas:
Analizar la legibilidad nHay que evaluar si la animacin est bien diseada y expresa
y claridad de la claramente el proceso dinmico que represente.
animacin nHay que analizar si los cuadros son suficientes para representar el
proceso animado y si la velocidad es la adecuada, o hace confusa la
interpretacin de la animacin.
Aplicacin de la nHay que evaluar en qu casos es importante recurrir a una animacin
animacin para expresar un concepto. Puede ser apta para mostrar conceptos
dinmicos, para las demoras, ayudas que indiquen cmo se hace tal
actividad, mensajes de error que repitan las acciones efectuadas y
marquen dnde y cmo se efectu el error.

Repeticin de la nEn algunos casos puede que sea necesario que la animacin se
animacin repita ms de una vez, para poder reflejar correctamente el mensaje
que representa.
Arranque de la nPor lo general, la animacin no debe estar siempre activada llamando
animacin la atencin en forma permanente. El usuario debera decidir cundo
activar la animacin y cundo culminarla.
nLos mecanismos tradicionales para activar una animacin es al
cliquearla, al tocarla o mediante un clic explcito de un botn de arranque.
nSe podra proveer mecanismos automatizados para la activacin que
detecten el foco de atencin del usuario.
Funciones nAnalizar las funciones necesarias para que el usuario pueda controlar
sintcticas de la y manejar la animacin.
animacin nSe pueden proveer funciones que agreguen o quiten cuadros, que
aumente o disminuya la velocidad de la misma, que se configure
las veces de repeticin, que se pueda programar sus arranques y
duraciones, entre otros.
Tabla 3.10: Recomendaciones de diseo para Animaciones
Exploradores de Objetos
Los exploradores o grillas interactivas son componentes de interaccin bastantes complejos que permiten
presentar gran cantidad de informacin en manera concentrada y organizada. Los mismos pueden tener
ciertas capacidades a nivel de cada celda, filas, columnas y browser en general. Se deben considerar
ciertas recomendaciones de diseo para que estas capacidades y servicios puedan ser aprovechados por el
usuario.
Analizar si el contenido nHay que analizar si la informacin est bien expresada, si efectivamente
es adecuado visualiza los mltiples datos con una correcta descripcin de sus
atributos.
nHay que verificar la correcta representacin de los tipos de datos
asociados a las celdas, que tengan el formato adecuado.
nHay que evaluar la necesidad de permitir celdas con ciertas
capacidades o servicios incluidos, como el acceso a una calculadora
desde una celda numrica, o el acceso a un calendario desde una celda
fecha.
Determinar el estado del nEl usuario debe tener en claro cul es el estado actual de la grilla
explorador con la que est interactuando.Si est en modo edicin, o slo puede
ser consultado, si se permite mltiple seleccin o simple seleccin, si
puede eliminarse filas, si se pueden renombrar las columnas, etc.
Establecer funciones nEl explorador debe proveer funciones a nivel de celdas, de filas, de
sintcticas asociadas columnas y a nivel de grilla en general.
nSe debe permitir la ordenacin por determinados criterios, mover
objetos de lugar, permitir copiar y pegar celdas.
nTambin debe permitir el agregar, mover y quitar filas o columnas,
filtrar, proveer funciones de bsquedas y accesos directos.
nA nivel de grilla debe tener funciones de asistencia, aceptacin,
cancelacin, impresin de los datos, entre otros.
Configuracin visual del nEl usuario debe poder configurar al explorador de acuerdo a su estilo
explorador y preferencias.
nSe le debe permitir cambiar tipos de letras, tamaos, colores,
fondos, hacer un zoom del contenido, determinar la cantidad de filas a
desplegar, etc.
Configuracin por nDebe contar con configuraciones predeterminadas a la que pueda
defecto recurrir el usuario si quiere deshacer sus configuraciones personales.
Tabla 3.11: Recomendaciones de diseo para Exploradores de Objetos.

Cajas de Dilogo
Las cajas de dilogo es un recurso visual compuesto por varios objetos de interaccin.
Dentro de ellas, se pueden encontrar casilleros de texto, listas seleccionables, listas deslizables, botones,
imgenes, animaciones, que a su vez tienen sus propias cuestiones de diseo.
En el momento de disear una caja de dilogos es recomendable tener en cuenta las siguientes
cuestiones:
Analizar el contenido de nEs necesario analizar el uso adecuado de los controles y objetos de
la caja de dilogos interaccin que componen la caja de dilogos.
nHay que evaluar si son correctos para cada concepto semntico que
representen.
Distribucin de los nLas componentes de la caja de dilogo deben estar bien diagramadas
objetos de interaccin y dispuestas.
nDeben tener el tamao y ocupacin dentro del rea acorde a la
longitud de la informacin a representar.
nNo debe existir superposicin o poco espacio entre las mismas, que
provoque una visualizacin engorrosa del contenido.
Analizar la ordenacin nLa forma de ordenacin y disposicin de los elementos de una caja de
de los elementos dilogos debe ser significativa.
nPuede agruparse en forma alfabtica, por orden de importancia, por
nivel de prioridad, por grado de uso.
nEl usuario debe percibir una lgica de sectorizacin o un criterio de
ordenacin.
Funciones sintcticas nLa caja de dilogos debe proveer servicios a nivel de componente
asociadas como a nivel de caja en general.
nA nivel de componente, se puede proveer valores por defecto, ayudas
contextuales, ejemplos, acotaciones configurables.
nA nivel de caja de dilogo, se debe permitir una ayuda general, salida,
cancelacin, estado por defecto, impresin, suspensin, guardado,
entre otros.
Analizar el feedback nHay que determinar el tipo de feedback que se va a proveer y el
asociado alcance del mismo.
nCon respecto al tipo de feedback, se refiere a si se provee validaciones,
confirmaciones, mensajes de error, aclaraciones.
nMientras que, el alcance significa si es a nivel de control o componente
o a nivel de la caja en general.
Determinar aspectos de nLa caja de dilogos debe estar visualmente definida, con una correcta
visualizacin eleccin de los colores, fondo, formato, tipografa, botones, ttulos.
Tabla 3.12: Recomendaciones de diseo para Cajas de Dilogo.

Caso de Estudio 3 - Normas de Diseo de Interfaces Visuales
En esta seccin se presenta un caso de estudio, donde trabajaron alumnos de la ctedra Diseo centrado
en el Usuario - ciclo lectivo 2005. Esta materia pertenece al plan de estudios de la carrera Licenciatura en
Informtica de la Universidad Nacional de La Plata.
El caso descripto ilustra como debera analizarse la interfaz de sistema segn los Principios de Diseo para
Interfaces Visuales.
Objetivo
El objetivo de este trabajo fue que los alumnos tuvieran que aplicar los principios de diseo para Interfaces
Visuales en un proceso de evaluacin de la interfaz de usuario de un sistema de gestin de una Clnica
Mdica. La evaluacin se realiz en pequeos grupos y luego, entre todos los integrantes del curso, se
debatieron y propusieron diferentes alternativas de solucin.

El sistema facilita la gestin administrativa de una clnica mdica: altas, bajas, consultas y modificaciones
de pacientes, profesionales, turnos, guardias y consultorios. Este sistema fue desarrollado por un grupo de
alumnos en forma personal y fue expuesto en la ctedra para su evaluacin. Siempre es mejor la experiencia
si se evalan sistemas que otros alumnos hayan desarrollado o utilizan habitualmente. La pantalla inicial del
sistema es la siguiente:
Figura 3.13
Desarrollo del Caso de estudio

A continuacin se presentar la evaluacin realizada por un grupo de estudiantes, identificando el
cumplimiento o no de cada uno de los principios de diseo para Interfaces Visuales. Describe cada
recomendacin y muestra las partes del sistema que presentan inconvenientes.
Ventanas
Respecto a las funcionalidades sintcticas, todas las ventanas del sistema proveen minimizacin,
maximizacin, redimensin, movimiento, incluso aquellas donde no es necesario.
Figura 3.14
80- Caso de Estudio 3 - Normas de Diseo de Interfaces Visuales

El cambio de tamao de la ventana no va acompaado de una re distribucin de los elementos que la
componen.
Figura 3.15
La mayora de las ventanas son accedidas mediante la barra de mens de la aplicacin - figura 3.16- y en
algunos casos a travs de botones - figura 3.17
Figura 3.16
Figura 3.17
Respecto al modo de activacin de las ventanas, todas se abren en modo exclusivo y no posee una lista
de ventanas activas.
Figura 3.18
En cuanto a el mbito de la ventana, se abren dentro de la ventana madre, pero pueden desplazarse fuera
de sta.
Caso de Estudio 3 - Normas de Diseo de Interfaces Visuales -81

El contenido de las ventanas, en general no es homogneo y no estn bien distribuidos. Por ejemplo,
supongamos que se desea dar de alta un consultorio. Seleccionamos la opcin del men principal Consultorio
-> Crear . La ventana que se despliega es la siguiente:
Figura 3.19
Al presionar los distintos botones, aparecen ms componente dentro de la misma ventana que no estn
bien distribuidos y dificultan la interaccin. Por ejemplo si presionamos sobre el botn Cambiar Estado,
aparecen ms componentes:
Figura 3.20
Luego si se quiere cambiar el nombre del consultorio se agregan a la ventana estos componentes.
Figura 3.21
La ventana posee componentes que no se encuentran alineados y no se sabe a qu accin (Creacin,

Cambio de estado o de Nombre) pertenecen. Hay un problema de diseo en cuanto a las operaciones
disponibles y la forma en que pueden llevarse a cabo en la ventana. Un ejemplo de formato no homogneo
se ilustra a continuacin. Las ventanas son muy diferentes entre s. Las componentes no estn posicionados
siempre en el mismo lugar.

Figura 3.22
Figura 3.23
No todos los listados poseen un ttulo, y aquellos que lo tienen poseen distinto formato de fuente y posicin
dentro de la ventana, e incluso se titulan diferente dependiendo del contexto.
Figura 3.24
Figura 3.25
Figura 3.26

Mens
Este criterio presenta algunos inconvenientes. El orden en que aparecen las opciones no es el ms natural
ya que por ejemplo el alta de cualquier entidad debera ir antes de la modificacin y la baja.
Figura 3.27
Los nombres de las acciones no son entendibles, no tienen mensajes explicativos asociados y tampoco
el mismo nivel de abstraccin. Por ejemplo en el men Pacientes de la imagen superior, la opcin Cancelar
significa cancelar el turno de un paciente. Semnticamente debera estar en el men Turnos.
El men Turnos tampoco es muy sencillo de entender, porque se mezcla la disponibilidad del mdico con el
alta baja y modificacin del turno para un paciente. Adems se agrega la posibilidad de registrar una guardia
(que es sin turno) y de registrar la atencin de un paciente, que tampoco tiene que ver con el turno.
Figura 3.28
Los mens no tienen un nivel superior de anidamiento de 2 niveles
Figura 3.29
Respecto a la categorizacin, en los puntos superiores hemos visto ejemplos concretos donde este aspecto
no est considerado. Por ejemplo cancelar un turno a travs de la opcin Pacientes -> Cancelar, o registrar
una atencin del servicio de Guardia a travs del men Turnos (ver figura 3.29).
Las opciones del men se acceden utilizando el mouse, desde una nica opcin dentro del Men. Sin
embargo, encontramos algunas excepciones: dar de alta un turno o listar los turnos, donde la misma ventana
se encarga de ambos aspectos.
Figura 3.30

dem las opciones Materiales, Consultorio, y Empleados donde una misma ventana se encarga de todas
las funciones.
No brinda mecanismos para modificar la jerarqua o la categorizacin de los mens, es decir, no brinda
ningn mecanismo de reconfiguracin de las opciones.
Feedback
El sistema no posee un feedback homogneo, ni a nivel de ventana ni de accin.
Por ejemplo las operaciones de alta de un material, empleados, servicios informan a travs de una ventana
el xito o no de la operacin.
Figura 3.31
Sin embargo la operacin de dar de alta un informe en una carpeta mdica no brinda ningn mensaje que
informe el xito de la operacin.
En la ventana Interfaz_Servicios, que permite agregar, modificar y eliminar servicios, informa solo acerca
del xito de la operacin agregar y no de las restantes.
Los mensajes de notificacin de error o altas o bajas generalmente tienen el mismo formato. Por ejemplo
el mensaje de confirmacin de cambio de estado de un consultorio es el siguiente:
Figura 3.32
En este punto tampoco es homogneo. No siempre es correcto y adecuado al contexto. Por ejemplo aqu
el sistema notifica que el paciente existe, pero no es as. En realidad se est escribiendo como DNI letras y no
un nmero y ese es el motivo del error.
Figura 3.33
Otro ejemplo claro: en esta ventana se informa que hay un error pero no dnde.
Figura 3.34
En cuanto a la aparicin de feedback, en todos los casos aparece al finalizar la operacin y no luego
de completar ciertos campos. Las respuestas son rpidas. Respecto a la necesidad del feedback, como
mencionamos previamente, el sistema realiza las validaciones al confirmar los datos ingresados. Sin embargo
la notificacin de los errores es secuencial, no indica de una sola vez todos los errores cometidos.
Por ejemplo, la operacin de registrar un turno. La ventana, como vemos a continuacin, solicita varios
datos. Muchos de ellos son obligatorios y no solo no estn resaltados, sino tampoco se validan e informan a
la vez.
Figura 3.35
Luego de completar los datos solicitados, an faltan datos obligatorios como el horario. La confirmacin de
los datos de la ventana vuelve a emitir un mensaje de error, pero ahora respecto al horario.
Figura 3.36
Este punto est contemplado en algunos puntos, por ejemplo la seleccin de las fechas se realizan a
travs de la seleccin de la misma en un calendario, o el tipo de documento siempre se realiza a travs de la
seleccin entre los disponibles.
Figura 3.37
Sin embargo existen casos donde, si bien el feedback preventivo est contemplado, su implementacin
no es clara. Por ejemplo, la ventana que permite manipular los consultorios oculta/visualiza componentes de
acuerdo a la operacin que se desea realizar (ver figuras 3.19, 3.20 y 3.21).

No se informa al usuario el grado de avance de ninguna de las operaciones. Por ejemplo, la ventana que
permite realizar un Backup no brinda ninguna informacin acerca del grado de avance de la operacin. El
sistema queda como muerto. Tampoco existe el feedback que refleje el modo corriente o mapee movimientos
de dispositivos de apuntamiento.
Manipulacin Directa
No existen botones conos en el sistema. Los botones son fciles de apuntar y seleccionar. El sistema est
diseado para interactuar a traves del mouse, exceptuando la entrada de datos o cuadros de texto que se
realiza por teclado. La tecla Tab no se encuentra programada, no tiene una secuencia lgica dentro de una
ventana que facilite la entrada de datos.
No brinda mecanismos de arrastrar y soltar para ninguna de sus componentes.
Gestos
No hay manejo de gestos en el sistema.
Dependencias
En algunos casos, las dependencias se encuentran correctamente programadas y en otro no. Por ejemplo,
la operacin para cambiar el nombre a un servicio es un ejemplo donde este criterio no se respeta. En primer
lugar seleccionamos el nombre del servicio a modificar de la lista de disponibles y escribimos el nuevo nombre
en el casillero inferior.
Figura 3.38
Sin embargo, al desplegar la lista vemos el nombre modificado.
Figura 3.47
Animaciones
El sistema no provee animaciones

Exploradores de Objetos
Numerosas ventanas muestran todos los datos en grillas, por ejemplo la figura 3.17, la 3.30, la 3.35.
Ninguna de ellas posee funciones sintcticas asociadas que permitan ordenacin por diferentes criterios,
mover objetos de lugar, copiar y pegar.
La configuracin del explorador es esttica en todos los casos. El nmero de columnas, el tipo de letras, la
cantidad de filas, etc. es fijo y no se ofrecen operaciones para cambiarlo.
Es editable a nivel de celdas, pero no es posible registrar ningn cambio. Puede modificarse el largo de la
columna, no el ancho de la fila. No soporta mltiple seleccin.
Conclusiones
A modo de conclusin de la evaluacin de este sistema, los alumnos abordaron a la siguiente tabla de
clasificacin:
Principio Calificacin
Ventanas Bien
Men Regular
Feedback Regular
Manipulacin directa Bien
Gestos ---------
Dependencias Bien
Animaciones --------
Explorador de Objetos Regular

Ejercitacin
A. Indicar si las siguientes expresiones son verdaderas o falsas. Tachar lo que no corresponda:
nLa manipulacin directa es un tipo de dilogo secuencial. v f
nPara proveer mltiples hilos de dilogo entre el usuario y el sistema, es necesario que la v f
interfaz tenga mltiples ventanas.
nLos mensajes de error son un tipo especial de feedback. v f
nLos mens permitieron aislar a los usuarios de cuestiones sintcticas. v f
nEl usuario es quien debe controlar y mantener las dependencias entre los objetos v f
relacionados.
nLas animaciones siempre optimizan la interaccin humano-computadora. v f
nLos browsers permiten una organizacin centralizada de la informacin. v f
nEl usuario al interactuar con una caja de dilogo debe percibir un criterio de ordenacin en v f
la disposicin de los objetos que la componen.
B- La interfaz del usuario es el software que soporta el dilogo bidireccional entre el usuario y el sistema.
Indicar con una cruz, qu direccin del dilogo asocia cada uno de los paradigmas de interaccin: si va del
usuario al sistema, del sistema al usuario, en ambas direcciones o en ninguna.
Paradigmas de interaccin visual
Mens
Manipulacin directa
Feedback
Dependencias
Animaciones
Explorador de objetos
Cajas de dilogo
Ejercitacin - Normas de Diseo de Interfaces Visuales -89

Referencias
rFoley, Jim; Dam, Van (1991). Fundamentals of Interactive Computer Graphics.
rCaroll J.M. Mack R.L. y Kellog, W.A. (1997). Interface Metaphors and User Interface Design. Human-
Computer Interaction INTERACT 87. North-Holland, Amsterdam.
rHutchins, E.L, Hollan, J.D., and Norman, D. A. (1986) Direct Manipulation Interfaces, in D. A. Norman and
S. W. Draper (eds), User-Centered System Design, Lawrence Erlbaum, 87124.
rShi Kuo Chang (1985) Image Information Systems. Proceedings of the IEEE on Visual Communications
Systems, Vol. 73.
rShi Kuo Chang (1986). Image Database Systems. Academic Press.
rShi Kuo Chang (1987). Visual Languages: A Tutorial and Survey. IEEE Software Magazine, Vol. 4.
rShi Kuo Chang (1990).Principles of Visual Programming Systems, (ed.), Prentice-Hall.
rShi Kuo Chang (1990).Visual Languages and Visual Programming. Plenum Publishing Corporation.
rShi Kuo Chang (2001). Software Engineering and Knowledge Engineering. Columbia University Press.
rKevin Mullet y Darrell Sano. (1995). Designing Visual Interfaces.Sun Microsystems Inc.
90- Referencias - Normas de Diseo de Interfaces Visuales

Capitulo IV
Cualidades de una interfz icnica
-91
Cualidades de una Interfaz Icnica
Desde la percepcin humana, se requiere un entrenamiento

mayor y ms especfico para leer un libro que para contemplar
y apreciar una pintura, aunque la forma de construccin de la
imagen puede ser tanto o ms compleja que la confeccin de
un texto escrito.
Si la imagen posee un enorme poder de expresin y
comunicacin, el cono lo supera an ms.
Temas a Tratar
I -Introduccin
II -Caractersticas de una Interfaz Icnica
nEl Diseo Icnico y los 7 Pasos de Norman
nEl Diseo Icnico y la Correspondencia
nEl Diseo icnico y la Consistencia
III -Ventajas de una Interfaz Icnica
IV -Complejidad del Diseo Icnico
V -Especificacin Formal de una Interfaz Icnica
Ejercitacin
Caso de estudio
Referencias
92- Cualidades de una Interfz Icnica

I - Introduccin
En el captulo anterior, se pudo observar las caractersticas de las Interfaces Visuales y cules son sus
beneficios desde el punto de vista de los factores humanos. Entre las ventajas ms interesantes, se pueden
apreciar:
nEl usuario dispone de una representacin permanente de los objetos y de las funciones de inters.
nEl usuario se abstrae de emplear una sintaxis compleja para expresar sus intenciones a cambio de utilizar
recursos visuales como seleccin, arrastre, clics de objetos.
nEl usuario puede realizar mltiples operaciones simultneas, cada una reflejando una ejecucin y efecto
inmediatos.
Estas cualidades an pueden ser ms elocuentes si se exige que las representaciones visuales que se
utilicen para los objetos, como la manipulacin de los mismos, estn regidas mediante un diseo cuidadoso,
bien estudiado y que sea comprensible dentro de la realidad del usuario.
Este es el caso de las interfaces icnicas, que estn encuadradas dentro de las interfaces visuales. Son
una clase especial de las mismas, en donde se le exige una visualizacin significativa y un comportamiento
fiel, respecto al objeto representado.
Veamos la diferencia entre una interfaz visual y una icnica, mediante un ejemplo. Supongamos que en
una parte de la pantalla, se necesita mostrar la temperatura de un ambiente. En el caso de las interfaces
visuales, se podra utilizar un rectngulo con diferentes tonalidades de naranja para indicar el grado de calor
y de violeta, para el fro. Esta sera una representacin visual vlida, puesto que se utilizan recursos visuales
como figuras geomtricas y el uso del color.
Pero, en el caso de un diseo icnico, esto no alcanzara, no sera una representacin correcta. Para el
concepto de temperatura, sera necesario utilizar una visualizacin ms familiar, ms representativa. Por
consiguiente, se debera en primera medida, utilizar colores que universalmente simbolizan el calor y el fro,
que seran la gama del rojo y del azul, respectivamente. Y segundo, se debera reemplazar la figura del
rectngulo, por una imagen ms significativa como la de un termmetro, directamente.
En un diseo icnico, se trabaja con un nivel muy elevado de representatividad, utilizando recursos visuales
ms elaborados como conos, smbolos, metforas, signos, demostraciones o simulaciones extradas de la
realidad del usuario.
A travs de estos recursos se deben representar icnica o metafricamente todas las componentes del
sistema y sus funcionalidades, sus estados, datos de entrada, de salida, sus entidades.
Adems, el diseo icnico puede aplicarse tanto en el lenguaje de interaccin provisto por el sistema, en
la representacin de la informacin, como tambin dentro de los constructores u operadores de un lenguaje
de programacin.
Se puede aplicar este diseo sobre todas las tcnicas de interaccin siempre y cuando sean modificadas
para mantener y reflejar la coherencia y representatividad icnica obligatoria.
Los telfonos celulares actuales, la televisin digital y los distintos dispositivos que podemos encontrar
en la actualidad que disponen de pantallas reducidas han potenciado el uso de conos como metfora para
el acceso a distintas aplicaciones. Adems la potencia de clculo y las pantallas tctiles han facilitado el
desarrollo de interfaces gestuales que se complementan con los conos para enriquecer la experiencia de los
usuarios. Por ejemplo, para eliminar una foto en un telfono celular con cmara alcanza visualizar la foto en
miniatura en el album de fotos del celular, pincharla con el dedo y arrastrarla hacia la papelera simbolizada
claramente con un cono.
II - Caractersticas de una Interfaz Icnica

El diseo icnico de una interfaz del usuario se distingue del diseo visual por la calidad y la semntica
expresada a travs de los recursos visuales que se emplean en l.
La filosofa icnica parte de proveer una imagen del sistema que concuerde fielmente con la representacin
mental que el usuario tenga sobre el problema. Apunta fundamentalmente a que el usuario perciba que su
mundo real con el representado son compatibles.
Esto significa que se debe trabajar profundamente sobre modelos de usuarios para poder detectar cmo es
su mundo, cmo l ve las entidades que maneja, cmo interacta, de qu manera l trabaja con ellas.
De esta manera, el diseador podr ser capaz de construirle as, una simulacin o una proyeccin casi
real de ese mundo, sobre el espacio de la pantalla.
Como su nombre lo indica, en un diseo icnico, el instrumento visual ms importante que se utiliza, tanto
para visualizar la informacin como para expresar el dilogo, es el cono.
Pero, qu se entiende por el concepto de cono?. En este contexto, un cono es mucho ms que una
pequea imagen dentro de un botn de una barra de herramientas.
La definicin ms adecuada de cono fue especificada por Grittins [86] y Rogers [89], que lo describen
Cualidades de una Interfz Icnica -93
como una imagen, una figura o un smbolo que representa un concepto subyacente.
Tambin, fue definido por Shi Kuo Chang [90] como un par (parte fsica, parte lgica), en donde la parte
fsica sera la imagen del mismo y la parte lgica, su significado.
A travs de esta ltima definicin, se puede inferir que lo que distingue al cono de una imagen tradicional,
es que tiene una semntica o parte lgica asociada que debe estar coherentemente solidificada a su parte
fsica, a lo largo de toda la existencia del mismo.
Ahora bien, otra duda que uno se puede cuestionar es dnde se aplica realmente el diseo icnico?
solamente en la representacin?. La respuesta correcta a estos interrogantes, es no.
Anlogamente al diseo visual, el diseo icnico puede estar presente en cualquier parte de la interfaz.
Puede ser aplicado en:
La Visualizacin Icnica:
En este caso, se utiliza al cono como un medio de representacin, para modelar metafricamente tanto el
dominio de la aplicacin como los conceptos que se manejan a nivel de interfaz.
Se puede visualizar icnicamente todas las componentes y entidades del sistema, sus funcionalidades,
datos de entrada, de salida, sus estados posibles.
Por ejemplo, se puede mostrar en la siguiente pantalla, la representacin icnica de una sala de hospital,
con el estado de libre u ocupado de sus camas.
Figura 4.1: Ejemplo de visualizacin icnica
O tambin, es el caso del diseo icnico de un sistema groupware sobre conferencias, donde se visualiza
claramente el estado de las butacas, si estn libres u ocupadas, y el de los participantes, si solicitan o no
permiso para hablar.
Figura 4.2: Otro ejemplo de visualizacin icnica
La Interaccin Icnica:
El diseo icnico aplicado en la interaccin entre el hombre y la mquina, da lugar a un dilogo asincrnico.
Este dilogo puede estar acompaado por la seleccin de conos, por una manipulacin directa que debe ser
significativa, por un feedback semntico, por gestos metafricos, por una animacin representativa, por mens
icnicos, dependencias, mediante el cul los usuarios llevan a cabo sus tareas en una forma natural y simple.
A travs de la visualizacin e interaccin icnica, el usuario interacta con un ambiente casi real, donde se
muestra reflejado y proyectado todo su mundo sobre el espacio de la pantalla.
Un ejemplo de una interaccin icnica se puede demostrar en la siguiente pantalla, donde para guardar un
escrito, el usuario debe trasladarlo desde el escritorio hacia el archivo de papeles, mediante el arrastre.
Figura 4.3: Ejemplo de interaccin icnica
La Programacin Icnica:
En este caso, se debe representar icnicamente cada constructor, sentencia u operador del lenguaje de
programacin. Esto trae como consecuencia, que la accin de programar se convierta en un proceso de en-
samblado y armado de piezas icnicas que conforman las partes del programa.
Por ejemplo, como trabajo de grado en la Facultad de Informtica de la UNLP, se construy un lenguaje
icnico para consultar bases de datos relacionados, denominado CLAIV, donde se representaron tanto las
tablas de datos como los operadores del lgebra relacional, mediante conos representativos.
Figura 4.4: Ejemplo de programacin icnica
En la mayora de estos casos, la interfaz del usuario se convierte en un sistema icnico, a partir del cul se
provee un lenguaje especial conformado por la disposicin, manipulacin, arrastres, movimientos, acciones,
gestos, animaciones de conos, que conviven dentro de dicho sistema.
El lenguaje utilizado en este tipo de interfaces, llamado lenguaje icnico, consiste en un conjunto de
sentencias icnicas construidas a partir de una sintaxis y semntica ya definida.
Estas sentencias se definen como un arreglo u ordenamiento espacial de conos (miembros del sistema)
puesto que surgen de una manipulacin de los mismos sobre el espacio de la pantalla.
Como en cualquier lenguaje donde se realizan anlisis sintctico y semntico de las sentencias, aqu
tambin se debe analizar e interpretar las sentencias icnicas en pos de alcanzar las acciones semnticas.
El anlisis sintctico de una sentencia icnica, denominado compilacin espacial, es el anlisis del arreglo
espacial de conos que determina la estructura sintctica interna. Y, el anlisis semntico consta de una
interpretacin de la sentencia icnica para determinar su significado. El mismo es denominado interpretacin
espacial.
Todo esto constituye un ambiente icnico que puede ser utilizado como una capa superior de otros sistemas
tradicionales permitiendo la traduccin de sentencias icnicas, movimientos y manipulacin de conos sobre la
pantalla a comandos propios del lenguaje subyacente.
Estas interfaces a parte de proveer las ventajas atribuidas a los interfaces visuales respecto de las mejoras
en la interaccin con el usuario, actan como filtros donde muchos errores pueden ser detectados en ese nivel
superior, permitiendo la generacin de sentencias internas correctas.
Antes de comenzar con las ventajas de un diseo icnico, es importante analizar la relacin entre el mismo
con respecto a los 7 Pasos de Norman.
El Diseo icnico y los 7 Pasos de Norman

El concepto de los 7 Pasos de Norman, introducido por Donald Norman en 1988, hace referencia a las
etapas que suceden dentro de la mente humana cuando un usuario interacta con un sistema de cmputos
en pos de resolver un problema.
Estos pasos se pueden describir mediante el siguiente grfico:
1. FORMULACIN DEL OBJETO
2. FORMACIN DE LA INTENCIN 7. EVALUACIN DEL RESULTADO
3. ESPECIFICACIN DE LA ACCIN 6. INTERPRETACIN DEL ESTADO
4. EJECUCIN DE LA ACCIN 5. PERCEPCIN DEL ESTADO
IMAGEN DEL SISTEMA
Figura 4.5: Los 7 pasos de Norman
Aqu, se puede observar que el usuario, frente a una actividad a desarrollar en la computadora, plantea
un objetivo principal (paso 1), que para llevarlo a cabo debe formular una intencin (paso 2). La misma se
transformar en una accin que deber ser ejecutada, afectando la imagen del sistema (pasos 3 y 4).
El estado del sistema frente a esta accin del usuario, se modifica. Dicho cambio debe ser detectado e
interpretado por el usuario (pasos 5 y 6). Y finalmente, debe evaluar si el resultado de su accionar, satisface
su objetivo inicial, o sea si realmente hizo lo que quera (paso 7).
Pero, de qu manera se puede relacionar el diseo icnico con este proceso?. Uno puede partir sobre
la definicin del diseo icnico y analizar que, si en el mismo se insta a utilizar representaciones visuales y
mecanismos de interaccin que concuerden con la realidad del usuario, la imagen del sistema, su manipulacin
y la manifestacin del feedback, debera ser conocido y entendido por l.
Entonces, mediante una interaccin fcilmente manejable y de una representacin fsica fcilmente
perceptible, el diseo icnico intenta por definicin, reducir el esfuerzo mental que el usuario debe llevar a
cabo tanto en la ejecucin de sus acciones como en la interpretacin de las consecuencias de las mismas.
El Diseo Icnico y la Correspondencia

Hay que tener en cuenta que, el esfuerzo mental que el usuario debe emplear, cuando traslada su intencin
en requerimientos propios del sistema, se denomina distancia de Ejecucin. Y, el que el usuario debe realizar
cuando analiza el estado del sistema en trminos de su representacin mental, se denomina distancia de
evaluacin, (en ingls, Gap of Execution y Gap of Evaluation, respectivamente).
Unos de los principios bsicos de diseo de interfaces, que permite minimizar los gaps de ejecucin y
evaluacin, es el concepto de Correspondencia Directa, especificado por Hutchins y D.Norman, en 1986.
Este principio determina el grado de representatividad de los objetos que intervienen en el proceso
interactivo, estipulando que debe existir concordancia entre los objetos computacionales y no computacionales.
Pero, qu se entiende por objetos computacionales?. Los objetos computacionales son los conceptos,
entidades, datos, funciones extrados del problema real, que sern registrados, representados y manejados
dentro del sistema. Por lo tanto, los elementos, funciones, conceptos extrados del mundo real, son los
objetos no computacionales, que sern representados y automatizados dentro del sistema, por los objetos
computacionales.
Entre los objetos computacionales, tenemos:
nLos objetos semnticos: son las entidades, datos o funciones del dominio, representadas dentro del
corazn funcional. Ellos viven dentro de la aplicacin. Por ejemplo, el concepto de alumno, representado
como un registro de datos.
nLos objetos sintcticos: son conceptos, datos o funciones que la interfaz necesita para procesar alguna
actividad interna a ella. No es propia al dominio semntico. Por ejemplo, el concepto de nmero de visitas de
una pgina.
nLos objetos de interaccin: son los elementos que conviven dentro de la interfaz del usuario y que son
reflejados al usuario. Determinan la representacin de los objetos semnticos y sintcticos dentro del espacio
de la pantalla. Por ejemplo, la imagen de una ficha de datos para representar el concepto de alumno.
Entonces, lo que indica este principio, es que los objetos reales deben ser fielmente modelados por los
objetos semnticos y que stos, ms los sintcticos deben ser coherentemente reflejados ante el usuario,
mediante los objetos de interaccin.
Los diseadores deben lograr que el usuario vea en el espacio de la pantalla, una simulacin de su mundo
real o, de la representacin mental que l posea de ese mundo, y el diseo icnico presenta las cualidades
esenciales para lograrlo.
Se puede clarificar a la correspondencia directa mediante el siguiente grfico ilustrativo:
Figura 4.6: Correspondencia directa
El diseador debe definir una interfaz del usuario que compatibilice los modelos del usuario, con el funcional
y con la imagen del sistema, permitiendo que las expectativas del usuario, sobre una buena representacin
propuesta por el sistema, sea satisfecha.
El diseo icnico justamente parte de trabajar ntimamente con la representacin mental del usuario, cmo
l ve y maneja los conceptos y funciones de su problema real, y tiene por objetivo, aplicar ese conocimiento
del usuario en pos de proveer la representacin ms significativa dentro de la interfaz.
Por lo tanto, dentro de la filosofa icnica se incluye y se aplica el concepto de correspondencia directa
analizada.
El Diseo Icnico y la Consistencia
La consistencia es una de los objetivos ms importantes que la interfaz del usuario debe respetar.
La misma estipula que la interfaz del usuario debe seguir ciertos patrones de conducta, de interaccin y
de visualizacin homogneos, coherentes en todas las partes del sistema, donde se reduzca la posibilidad de
ambigedades y falsas interpretaciones.
Cuando se analiza el diseo icnico y se profundiza sobre la definicin ms compleja de cono, especificada
por Shi Kuo Chang, se describe al cono como una dupla (parte lgica, parte fsica) donde el autor, adems
denota una relacin unvoca entre la imagen y el significado. Esto significa que ambas partes deben tener una
correspondencia uno a uno, o sea una imagen est asociada a un nico concepto especfico y viceversa.
En base a esta descripcin, no sera admisible en un diseo icnico, tener dos conos con igual imagen pero
diferente significado, o por el contrario, representar un mismo concepto mediante dos imgenes distintas.
De esta manera, se puede entrever que las interfaces icnicas tienden a proveer un mayor grado de
consistencia que cualquier otro tipo de interfaz, debido a que est incorporada desde su concepcin.
I
III Ventajas de una Interfaz Icnica
El diseo icnico, se caracteriza por promover el uso de imgenes y otros recursos visuales con un alto
nivel semntico que finalmente, derivan en el concepto general de cono.
Es lgico pensar, que mediante estas representaciones visuales significativas y mecanismos de
interaccin cuidadosamente diseados, el usuario dialoga con una interfaz en donde el simbolismo, el alto

grado de representatividad y familiaridad, la comparacin inmediata, el contraste entre imgenes fcilmente
identificables, son aspectos muy positivos que vienen incorporados y ya cultivados en ella.
Debido a esto, y sumado a la consistencia que se impone entre la imagen y el significado de los mismos,
se puede afirmar que, desde el punto de vista de factores humanos, este tipo de interfaces corren con ms
ventajas que las interfaces visuales tradicionales.
Entre las ventajas ms importantes, se tienen:
Aspectos positivos del Explicacin

Diseo Icnico
Reconocimiento Inmediato nLos conos, gracias a su fuerte conexin con su significado, reduce
la distancia semntica entre los objetos modelados y los objetos
reales, permitiendo un fcil reconocimiento de los mismos.
nPermite una identificacin instantnea de las entidades o
funcionalidades modeladas a travs de sus imgenes, captando en
forma automtica, el concepto asociado.
Simplicidad de Ejecucin nEn estas interfaces se reduce el esfuerzo mental del usuario para
llevar a cabo sus acciones.
nMediante un diseo icnico de los gestos, manipulacin directa,
movimientos de conos se logra proyectar las acciones reales del
usuario en la computadora.
nAs, el usuario puede trasladar los pensamientos o tareas en mente a
los requerimientos fsicos del sistema, a muy bajo costo.
Reduccin del uso de la nEl ser humano es mejor reconociendo que memorizando. Y, en
memoria del usuario este tipo de interfaces, se aprovecha al mximo el impacto visual de
comunicacin de los conos.
nLos usuarios trabajan directamente con objetos familiares en vez de
tener que memorizar el significado de ciertas expresiones textuales o
de visualizaciones insignificantes.
Alto nivel de Expresividad nEs muy conocido el dicho que una imagen vale ms que mil palabras,
y esto se magnifica aun ms cuando la imagen es icnica, o sea tiene
un significado subyacente.
nEl cono expresa su significado subyacente con el nivel ms alto y
nico de detalle y de abstraccin, que es su propia imagen.
Mayor poder de Sntesis nLos conos condensan espacio e informacin porque expresan ideas,
significados a travs de sus imgenes significativas.
nEn una representacin textual, existe el problema de analizar el
caudal de texto a utilizar. Si se emplean pocas palabras puede llevar a
ambigedad, si se emplean muchas, puede provocar cansancio y falta
de inters.
nEn representaciones visuales no icnicas, se debe recurrir a otros
medios para poder explicar qu se quiso expresar en ellas.
nEn cambio, los conos con sus imgenes ms elaboradas y detalladas,
optimizan el uso del espacio de la pantalla.
Transmite ms informacin nEl caudal de informacin que se obtiene de una expresin icnica es
que la original an mayor a la explcitamente visualizada.
nPermite a los usuarios extraer ms informacin por observacin
directa, comparacin y contraste.
nEl texto es incremental, mientras mayor informacin se tenga que
expresar, mayor cantidad de palabras se debe agregar.
Entendimiento Universal nEl diseo icnico provee un medio de comunicacin entendido
universalmente. Trascienden las fronteras, los hbitos y costumbres.
nSe evitan los problemas de traduccin y de adecuaciones para cada
regin e idioma.
Mayor Confiabilidad nCuando el usuario trabaja con representaciones difciles de distinguir
y de comprender, se encuentra en una situacin de total inseguridad e
insatisfaccin y lo lleva a cometer errores de interpretacin.
nEn las interfaces icnicas, el usuario acta y maneja representaciones
fieles a su realidad, que deben ser consistentes en todo el sistema.

Mayor Flexibilidad nEl usuario es quin controla la interaccin con el sistema, mediante
acciones asincrnicas de los conos representados.
nPara llevar a cabo una tarea, los usuarios tienen la libertad de
seleccionar, manipular, probar, combinar los conos que crea apropiados
en forma directa, sin referencias implcitas y sin tener que respetar una
sintaxis compleja.
Mejora aspectos de nLa transparencia es una condicin de la interfaz del usuario, la cul
Transparencia debe reflejar claramente sobre la pantalla, los estados del sistema, los
procesos que estn en curso, con sus etapas de inicio, ejecucin y
finalizacin.
nComo son caractersticas complejas que ataen al usuario
considerablemente, se requiere la utilizacin de animaciones, smbolos
e conos que sean fielmente representativos, como se estipula en un
diseo icnico.
Reduccin de la tasa de nAl minimizar la entrada de datos, los errores de tipeo y de sintaxis
errores desaparecen.
nEn un marco icnico, se trabaja con una validacin y correccin a
nivel espacial o visual, donde el usuario no percibe el concepto de error
como en las interfaces tradicionales.
nAqu, indicar que un cono fue movido a un lugar incorrecto o que
una combinacin de conos no est permitida, se refleja mediante
la inhabilitacin de dichos conos o a travs de una animacin que
deshaga el movimiento realizado.
Tabla 4.1: Ventajas del Diseo Icnico
IV Complejidad del Diseo Icnico

Intentar reflejar el mundo real del usuario o su representacin mental del problema sobre el espacio de la
pantalla, no es una tarea sencilla.
El alto grado alto de percepcin y de expresin que pueden proveer las interfaces icnicas, implica un
importante trabajo de diseo para obtener el mejor aprovechamiento de esas cualidades.
Debido a las restricciones y condicionamientos impuestos dentro de la definicin de diseo icnico sobre
las representaciones visuales a utilizar y la manipulacin a proveer, es lgico pensar sobre las dificultades que
un diseador puede atravesar en el momento de encarar el diseo de una interfaz icnica.
Fundamentalmente, el costo mayor reside en la etapa de diseo. Mientras ms tiempo, cautela y dedicacin
se destina a esta etapa, mayor rendimiento a nivel de factores humanos, se puede obtener de la misma.
Con respecto al desarrollo, se puede aclarar que hay una falta de herramientas especficas para la
construccin de interfaces icnicas, por lo que cuestiones de representatividad, fidelidad, construccin de
simulaciones, mantenimiento de consistencia, deben estar totalmente a cargo del desarrollador de la misma.
A continuacin, se listarn las principales complejidades a nivel de diseo que se le atribuyen a las interfaces
icnicas:
Complejidades del Explicacin

Diseo Icnico
Dificultad en la nHay entidades y conceptos en donde se hace difcil encontrar la mejor
Visualizacin de ciertas imagen que represente a los mismos.
entidades nEn estos casos, la parte lgica ya est determinada, pero se complica
hallar la mejor parte fsica asociada, puesto que no tienen una imagen
inherente, ni siquiera extrada desde el mundo real del usuario.
nLas situaciones posibles donde esto puede ocurrir, pueden ser:
-Cuando las entidades o los conceptos a representar tienen un alto
grado de abstraccin o generalizacin. Por ejemplo, el concepto de
globalizacin.
-Cuando el concepto a expresar es complejo, y requerira una
construccin de imagen ms elaborada como una animacin o
simulacin.

-Cuando el concepto a expresar est compuesto por una
secuencia de otras definiciones. Por ejemplo, representar icnicamente
el concepto de reenviar en un correo electrnico, que implica la suma
de los procesos de recibir y de enviar.
Costos en proveer nEs costoso independizar la relacin imagen-significado del contexto
consistencia teniendo en en el cual el cono se encuentra.
cuenta el contexto nPor ejemplo, uno puede asociar al concepto de borrar con la imagen
de una goma. De esta manera, en un sistema de alumnos, este cono
debera estar presente tanto en un contexto de administracin de
alumnos como en un contexto de carga de notas. Pero, es muy distinto
borrar un alumno que una nota del mismo.
nEn ciertos casos es preferible comprometer el grado de consistencia,
mostrando diferentes imgenes en determinados contextos.
Costos en la Integracin nEn el caso que el sistema icnico deba interactuar con otros sistemas
con otros sistemas de software, sean o no icnicos, se complica la uniformidad en la
representatividad de los conceptos que debe prevalecerse en la filosofa
icnica, arriesgando el nivel de consistencia.
Procesos extras nEn este tipo de interfaces, es necesario proveer y controlar los procesos
de validacin e de validacin e interpretacin de los movimientos y manipulaciones de
interpretacin espacial los conos, como de otros recursos icnicos.Por lo tanto, se dificulta la
forma de manejar y controlar el dilogo.
Incremento de los niveles nPor lo general, la interfaz icnica provee un lenguaje de comunicacin
de conversin intermedio entre el usuario y el resto del sistema.
nMientras ms se acerca al mundo del usuario, ms se aleja de
las especificaciones internas, por lo que se complica el proceso de
traduccin de las acciones del usuario, a procedimientos internos del
sistema, aumentando los niveles de conversin.
Tabla 4.2: Complejidades del Diseo Icnico
Importante
nA pesar de las dificultades atribuidas a las interfaces icnicas, es importante aclarar que en HCI, se
debe apuntar a lograr la mayor eficiencia comunicacional. Esta eficiencia debe ser medida desde la
percepcin del usuario y no desde la complejidad de su desarrollo.
V - Especificacin Formal de una Interfaz Icnica

En esta seccin, se analizar a la interfaz icnica desde un punto de vista formal. Esta formalizacin
permitir conocer an ms la filosofa icnica y puede ser utilizada como un medio de especificacin y
descripcin de la interfaz, y ser desarrollada en tiempos previos a su diseo. Formalmente, se define al cono
como un objeto con una representacin dual compuesta de una parte lgica y una parte fsica. La parte lgica
describe el significado del objeto mientras que su parte fsica denota su imagen. Por lo tanto, a un cono se lo
puede describir como el par ordenado (xl,xf), donde xl referencia la parte lgica y xf la fsica.
Cuando en una interfaz se utiliza como medio de expresin y representacin al cono, la misma se
convierte en un sistema icnico. Este sistema inicialmente contar con un conjunto de conos estructurados
denominados conos primitivos. Estos conos presentes en la interfaz, pueden ser manipulados o combinados
de alguna manera, que traiga como consecuencia la generacin de nuevos conos que intervendrn en el
sistema en forma transitoria o permanente.
Por lo tanto, el cardinal del conjunto de conos presentes en una interfaz puede ser incrementado mediante
la creacin de nuevos conos, que surgen de alguna composicin o combinacin de los conos miembros
de dicho conjunto. Estos conos generados de otros ya existentes se denominan conos complejos pues
expresan un concepto visual ms elaborado.
Las combinaciones y relaciones entre conos con el propsito de generar otros, estn regidas mediante
determinadas reglas. En dichas reglas intervienen ciertos operadores que, por ser aplicados o por operar
sobre los conos, son llamados operadores icnicos.
En definitiva, a un sistema icnico formalmente, se lo puede definir como un sistema compuesto de un
conjunto de conos primitivos o conjunto generador, ms un conjunto de operadores icnicos.

A un sistema icnico descrito de esta manera, se lo puede describir o especificar formalmente, a travs
de una gramtica. Pero, cmo estar compuesta esta gramtica?. Principalmente, al sistema icnico se lo
puede describir como una quntupla G formada por las siguientes componentes:
n Un conjunto de objetos lgicos o conceptos, denominado VL;
n Un conjunto de objetos fsicos o imgenes, denominado VF;
n Un conjunto finito y no vaco de nombres de conos, denominado S;
n Un elemento de S inicial, que denota el nombre del cono axioma, o sea el cono principal a describir,
denominado x0;
n Un conjunto de reglas icnicas, denominado R. Las mismas permiten la correspondencia entre las
imgenes y los conceptos. Por lo tanto, es una funcin que va desde S a LxVF, donde L es el conjunto de
partes de VL U S.
Entonces, se puede decir que un sistema icnico es una quntupla G=(VL, VF, S, x0, R).
Ahora bien, qu se puede decir de los conos primitivos y de los complejos, cuando se analiza el sistema
icnico de esta manera?.
Lo que se puede observar que, los conos primitivos se caracterizan porque su parte lgica xl est incluido
totalmente en el conjunto VL y su interseccin con S es vaco. Tienen la forma ({rtulo},imagen), donde
los rtulos pueden denotar nombres de objetos, procedimientos u operadores de acuerdo a lo que el cono
represente. En cambio, los conos complejos se caracterizan porque la interseccin de xl con S ya no es vaco,
esto significa que el cono complejo apunta a otros conos y define relaciones icnicas. El formato de este
tipo de conos es ({OP,y1,y2,..,yn},imagen), donde OP es un operador icnico que opera sobre los subconos
y1,y2,..,yn para crear un nuevo cono.
Para los conos complejos, se necesita profundizar un poco ms sobre cmo se crean, cmo se aplican
determinados operadores a sus subconos. Para ese fin, se va a explicar los principales operadores icnicos,
que dependern del tipo de manipulacin que se desee proveer.
Los operadores icnicos operan sobre los conos y modifican tanto la parte lgica (su significado), como la
parte fsica (la imagen) del cono resultante, en forma simultnea.
El concepto de dualidad del cono, es esencial y la aplicacin de los operadores la sigue preservando. Una
caracterstica importante de los conos es que su parte lgica y fsica son mutuamente dependientes, por lo
tanto la modificacin de una de ellas afectar la otra y viceversa.
Entre los operadores icnicos, se encuentran:
Operadores Icnicos Explicacin

Operadores MAT y DMA nEl operador MAT, se denomina de materializacin y devuelve la
imagen de un cono.
nEl operador DMA, se denomina de desmaterializacin y devuelve la
parte lgica de un cono.
Operador SUP nSe aplica a dos subconos argumento y da como resultado, un
cono cuya parte fsica es la superposicin de las imgenes de los
conos argumentos y la parte lgica es una mezcla conceptual de los
significados de los mismos.
Operador CON nEs un operador n-ario y determina una disposicin de los conos
argumentos en donde los mismos se deben tocar o rozar.
nSu parte lgica es una combinacin conceptual a definir.
Operador VER y HOR nEl operador VER es un operador binario que da como resultado un
cono cuya parte fsica ser las imgenes de sus argumentos
combinadas verticalmente.
nEl operador HOR, en cambio da como resultado un cono cuya
parte fsica ser las imgenes de sus argumentos combinadas
horizontalmente.
nEn ambos casos, una mezcla conceptual de los significados de sus
argumentos determinar la parte lgica del cono resultante.
Operador CXT nEste operador realiza una interpretacin contextual.
nEl nuevo significado depender de ambos conos argumentos
mientras que la parte fsica slo coincidir con la del primero.
nLa interpretacin conceptual puede introducir, obviamente, una gran
cantidad de atributos adicionales al cono resultante.
nEste operador es muy til en sentencias icnicas cuya interpretacin
vara con el tiempo.

Otros operadores nDe acuerdo a la manipulacin que se le permite a los conos, se
debe especificar el tipo de operador. Pueden existir operadores para
la seleccin, arrastre, cliqueo, doble cliqueo, cliqueo contextual, entre
otros.
Tabla 4.3: Operadores icnicos
Ejemplo de la Especificacin formal de un Diseo Icnico

Para poder entender aun ms la especificacin formal de un sistema icnico, vamos a trabajar con un
ejemplo concreto.
A continuacin, se va a describir parcialmente, al sistema CLAIV. Este sistema, realizado en un marco
investigativo, provee un lenguaje icnico para consultar bases de datos relacionales.
Los usuarios, sin la necesidad de tener conocimientos previos del lgebra relacional, podrn a travs de
CLAIV, realizar cualquier tipo de consulta. El mismo para efectuarla deber seleccionar, mover conos que
representan las tablas y los operadores relacionales, y la misma interfaz, realizar las validaciones y las
conversiones necesarias para trasladar dicha consulta a una expresin SQL correcta.
En la Figura 4.7, se ilustra una pantalla de CLAIV, donde el usuario realiz una consulta para averiguar los
nombres y apellidos de los pilotos que son empleados de una determinada aerolneas.
Vale aclarar que las partes fsicas de los conos eran realizadas por los mismos usuarios en un proceso
de configuracin, donde adems se le provea de una librera grfica. En cambio, las partes lgicas, eran en
estos casos, los atributos de las tablas iniciales.
El usuario, en su proceso de realizacin de la consulta, tiene que llevar al rea central, las tablas y los
operadores necesarios. En el caso de las proyecciones y condiciones a los atributos, el usuario debi utilizar
los mecanismos de doble cliqueo y cliqueo contextual respectivamente.
Una vez que el usuario confeccionaba la consulta, la misma poda ser ejecutada o guardada. En este caso,
como la consultas de tablas generan nuevas tablas, esto implicaba la creacin de un cono complejo, cuya
imagen se deba definir y su significado era la especificacin de dicha consulta.
Figura 4.7: Ejemplo de una consulta icnica realizada en CLAIV
Veamos, entonces, a grandes rasgos cmo sera la especificacin formal de CLAIV, definida a travs de la
gramtica G= (VL, VF, S, x0, R).
nVL, es el conjunto de partes lgicas, o sea el esquema de las tablas relacionales, adems de los conos
operadores.
nVF, es el conjunto de partes fsicas, o sea las imgenes de los conos elaboradas por el mismo usuario
del sistema.
vS, es el conjunto de nombres de conos, que en este caso seran los nombres de cada tabla provista ms
los nombres posibles a las consultas especficas que se pueden hacer como ser, <consulta-unin>, <consulta-
interseccin>, <consulta-proyeccin>, etc.
nX0, es el axioma, que en este caso sera una consulta general en CLAIV

nR, sera el siguiente conjunto de reglas:
Conjunto de reglas R
<consulta-CLAIV>::= <tabla> / <consulta>;
<tabla>::= <Pilotos> / <Empleados> / <Vuelos> / <Ciudades> ....;
<consulta>::= <consulta-INTERSECCION> / <consulta-UNION> / <consulta-PROYECCION> /
<consulta-WHERE> .....;
<consulta -INTERSECCION>::= CON(<consulta-CLAIV>, <icono-INTERSECCION>, <consulta-CLAIV>);
<consulta -UNION>::= CON(<consulta-CLAIV>, <icono-UNION>, <consulta-CLAIV>);
...
<tabla>::= <icono-PILOTOS> / <icono-EMPLEADOS> /<icono-VUELOS>.....;
<icono-PILOTOS>::= ( , esquema de PILOTOS);
<icono-EMPLEADOS>::= ( , esquema de EMPLEADOS);
...
<icono-INTERSECCION>::= ( , INTERSECT);
<icono-UNION>::= ( , UNION);
Aqu, se puede visualizar ciertas partes de la interfaz icnica, cmo se van describiendo las diferentes
componentes de la misma, y las manipulaciones que se pueden hacer entre los conos participantes a travs
de los operadores icnicos necesarios.

Caso de Estudio 4 - Interfaces Icnicas
El caso de estudio consiste en el anlisis de la interfaz icnica un de prototipo de sistema para la gestin
comercial de una galera de arte a travs de la Web.
El prototipo fue desarrollado por el estudiantes Julin Grigera durante la cursada del ao 2005.
Objetivo
El objetivo de este caso de estudio es analizar una interfaz icnica a partir del estudio de sus componentes
de visualizacin e interaccin abordadas en este captulo. En particular, los conos utilizados para representar
el dominio de la aplicacin, los conceptos que se manejan a nivel de interfaz as como tambin el dilogo
asincrnico que da lugar a este tipo de interfaz.

El objetivo de este sitio web es la venta de cuadros por Internet. Cuenta con dos secciones: la galera y el
taller. En la galera el usuario podr visualizar las obras expuestas, comprar lminas o comprar un cuadro. En
la seccin del taller podr enmarcar una lmina entre las disponibles en la galera o incorporar una nueva. En
este contexto tambin podr efectivizar una compra.
El sistema provee un mecanismo de registracin para la gestin interna de la galera y el taller.
En la figura 4.8 se presenta la pgina principal.
Figura 4.8: Pgina principal del sistema icnico para la Galera de Arte
Desarrollo del Caso de Estudio

Cmo evidencia el diseo icnico?
El diseo icnico se evidencia desde la pgina inicial, donde se presentan las dos alternativas a seguir dentro
del sistema: la galera de arte y el taller. La visualizacin icnica de estos dos conceptos es la siguiente:
GALERIA TALLER
Figura 4.9: Iconos para representar las secciones principales del sistema
Cuando el usuario mueve el mouse sobre las imgenes de galera y taller se obtiene como feedback la
iluminacin de cada opcin. Este mecanismo de feedback, que contribuye a la transparencia de la interfaz, es
utilizado a lo largo de todo el sistema para destacar la opcin a seleccionar. En la siguiente figura se muestra
como se ilumina la galera, si es que el mouse se encuentra sobre ella, o sobre el taller.
104- Caso de Estudio 4 - Cualidades de una Interfz Icnica
Figura 4.10: Ejemplo de transparencia de la interfaz a travs de la iluminacin de la seccin seleccionada.
Ingresando a la galera, la pgina que se despliega es la siguiente:
Figura 4.11: Pgina de la seccin Galera
En el centro de la pantalla aparecen las lminas disponibles, en tamao miniatura. En la parte superior
izquierda se mantuvo el icono de la galera. De esta forma el usuario no tiene dudas acerca de la seccin del
sistema donde se encuentra, mejorando la confiabilidad en el mismo. La barra de herramientas de la derecha
presenta las operaciones que el usuario puede realizar en este contexto. Los conos que representan la
funcionalidad disponible se presentan a continuacin:
Enviar una imagen al taller para Incorporar una nueva imagen a la

seleccionar un marco adecuado. galera.
Comprar la lmina. Salir de la galera.
Caso de Estudio 4 - Cualidades de una Interfz Icnica -105

La ventana del taller es la siguiente:
Figura 4.12: Pgina de la seccin Taller
La distribucin de los objetos de interaccin en la pantalla y el diseo de los conos utilizados es coherente
con la visualizacin de la galera, garantizando la consistencia en todo el sistema. En la parte central se
encuentra el espacio de trabajo del usuario, donde podr componer sus propios cuadros y realizar compras.
Una nueva barra lateral se visualiza para presentar los distintos marcos disponibles.
Figura 4.13: Marcos a seleccionar a travs de drag and drop
Como mencionamos previamente, desde la galera y el taller el usuario puede realizar compras. La ventana
de compras, que se accede a travs del carrito, es la siguiente:
Figura 4.14: Pgina para realizar compras
106- Caso de Estudio 4 - Cualidades de una Interfz Icnica

Los conos de la galera, el taller y la salida del sistema se mantienen en esta seccin, en forma consistente.
En este contexto, el centro de la pantalla visualiza los productos adquiridos por el usuario y aparecen nuevos
conos para anular la compra o efectivizarla.
Que mecanismos de interaccin posee?

El mecanismo de interaccin en todas las pginas es el sugerido para este tipo de interfaz: seleccin
de conos, feedback semntico y menus conicos. De esta manera los usuarios utilizan el sistema en forma
natural y simple. Para realizar una operacin, el usuario siempre tendr disponible la manipulacin directa de
los objetos de la interfaz por medio de la tcnica de drag and drop. Por ejemplo, en el contexto de la galera,
las lminas se seleccionan y se arrastran hacia el taller para elegir un marco. O se arrastran hacia el carrito
para registrar una compra.
Figura 4.15: Ejemplo de manipulacin a travs de drag and drop para seleccionar una lmina.
En el contexto del taller el usuario elige el marco de preferencia y lo arrastra hacia la lmina elegida.
Mediante esta interaccin, se muestra el diseo final del cuadro, con la lmina y el marco seleccionados por
el usuario.
Figura 4.16: Ejemplo de drag and drop para elegir un marco. A la izquierda se puede observar la lmina y a la derecha el cuadro terminado.
Otro mecanismo de interaccin es el clic sobre el objeto, por ejemplo para cargar una nueva imagen o salir
del sistema.
Caso de Estudio 4 - Cualidades de una Interfz Icnica -107

Ejercitacin
El sistema sobre el que se realizar la prctica, fue diseado por alumnos de la ctedra Diseo centrado
en el Usuario, a partir de la siguiente especificacin:
Se desea disear icnicamente un sistema para el servicio de una Clnica Veterinaria.

La clnica cuenta con dos reas: venta de productos y atencin de animales. Esta ltima
involucra dos salas: animales en observacin y terapia intensiva. Cada sala cuenta con 5
camillas. Asociado a cada camilla tenemos la ficha del animal, donde figuran sus datos, el
veterinario a cargo y el tratamiento a suministrar. El tratamiento especifica un registro de
medicamentos, dieta, actividades y horarios.
Disee un prototipo del sistema teniendo en cuenta, como mnimo la siguiente
funcionalidad:
Vista de las salas, camillas y estados de las mismas.
Altas, Bajas de un animal con su correspondiente ficha.
Reservas, ocupacin y desocupacin de las camillas.
Manejo gestual de la ficha, donde deber proveer funciones para altas, bajas, modificaciones
y consultas de medicamentos ( inyecciones, pastillas, jarabe, suero, pomadas, etc) con sus
dosis, dieta, actividades (masajes, caminar, etc) y estudios pendientes (anlisis, placas, etc.)
Debe quedar
registrado el nombre de la persona que brindo el tratamiento, fecha y horario.
Considerando las figuras que se presentan a continuacin, responder las siguientes preguntas:
1. Cmo evidencia el diseo icnico? Identificar, marcando con un crculo, los elementos icnicos de
la interfaz de la pantalla inicial del sistema para una Veterinaria.
2. Qu mecanismo de interaccin le parece adecuado? Proponer al menos tres actividades que podr
realizar el usuario final del sistema e indicar como las llevara a cabo.
3. De acuerdo a sus respuestas dadas en el punto anterior, qu caractersticas debera tener el usuario
final para obtener el mayor beneficio posible del sistema?
4. De acuerdo a las recomendaciones de diseo vistas en este captulo, qu problemas encuentra?

cmo los solucionara?
Figura 4.17
108- Ejercitacin - Cualidades de una Interfz Icnica

Figura 4.18
Figura 4.19
FIGURA 4.20
Ejercitacin - Cualidades de una Interfz Icnica -109

Referencias
rJean Piaget (1988). Piaget en el aula. Cuadernos de Psicologa Nro. 163.
rJean Piaget (1977). La psicologa de la inteligencia. De la Pedagoga. Editorial Paids.
rJerome S. Bruner (1984). Accin, pensamiento y lenguaje. Editorial Alianza.
rFoley, Jim; Dam, Van (1991). Fundamentals of Interactive Computer Graphics.
rCaroll J.M. Mack R.L. y Kellog, W.A. (1997). Interface Metaphors and User Interface Design. Human-
Computer Interaction INTERACT ?87. North-Holland, Amsterdam.
rHutchins, E.L, Hollan, J.D., and Norman, D. A. (1986) Direct Manipulation Interfaces, in D. A. Norman and
S. W. Draper (eds), User-Centered System Design, Lawrence Erlbaum, 87124.
rShi Kuo Chang (1985) Image Information Systems. Proceedings of the IEEE on Visual Communications
Systems, Vol. 73.
rShi Kuo Chang (1987). Visual Languages: A Tutorial and Survey. IEEE Software Magazine, Vol. 4.
rShi Kuo Chang (1990).Principles of Visual Programming Systems, (ed.), Prentice-Hall.
rShi Kuo Chang (1990).Visual Languages and Visual Programming. Plenum Publishing Corporation.
rShi Kuo Chang (2001). Software Engineering and Knowledge Engineering. Columbia University Press.
rKevin Mullet y Darrell Sano. (1995). Designing Visual Interfaces.Sun Microsystems Inc.
110- Referencias - Cualidades de una Interfz Icnica

Capitulo V
-111
La calidad de un sitio Web no est determinada por la complejidad,

la cantidad de recursos y elementos de avanzada que se incluyan en
ella, sino por los principios que se hayan respetado en su diseo.
Aplicar las correctas normas de diseo es lo nico que garantizar
la usabilidad del sitio y el sobrevivir en un mundo de tanta
competitividad.
Temas a Tratar
I- Introduccin
II- Caractersticas Especficas de un Sitio Web
III- Particularidades en el Desarrollo Web
nActividades previas al Diseo del Sitio
nLa Ingeniera de Usabilidad
IV- Principios de Diseo del Sitio Web
nPrincipios de Diseo a Nivel de Sitio
- La estructura del sitio Web
- La navegacin del sitio Web
- Los hipervnculos
nPrincipios de Diseo a Nivel de Pgina
-Diseo general de las pginas Web
-La pgina inicial
-Pgina con formularios
nPrincipios de Diseo a Nivel de Contenido
-Diseo general del contenido
-Lenguaje empleado
Casos de Estudio
Ejercitacin
Referencias
112- La interfaz Web y sus Principios de Diseo

I - Introduccin
Hoy en da, desarrollar un sistema de software implica adems desarrollar un conjunto de productos
adicionales, tales como un manual del usuario interactivo, un instalador que sea amigable, soporte en lnea,
descargas automticas de actualizaciones, servicios de FAQs o preguntas frecuentes, correo electrnico,
entre otros. Herramientas que en forma integral y desde diferentes lneas, intentan simplificar tareas, asistir,
guiar y comunicarse con los usuarios finales del sistema.
Sumado a esto y debido al crecimiento exponencial de usuarios de Internet, tambin es usual incluir el
desarrollo de un sitio Web para complementar con ms informacin y servicios, y para tener finalmente,
presencia en Internet.
Independientemente si el sitio es un medio de comunicacin complementario o no, deber hacer el
mejor aprovechamiento posible de las ventajas de comunicacin que ofrece Internet, que comprende una
multitudinaria comunidad de usuarios con caractersticas, costumbres, formaciones y culturas diferentes.
Sin embargo, el desarrollador Web deber saber que su producto no ser el nico en Internet, sino que va
a formar parte de un sin fin de pginas con servicios y contenidos similares, que se va a enfrentar a una gran
competitividad, tan compleja que puede poner en riesgo la futura vida til de su sitio.
Estos sitios pueden variar en su magnitud, su complejidad, sus servicios o en su aspecto. El usuario puede
navegar desde pginas estticas, hasta tener la posibilidad de llenar formularios, realizar transacciones a
bases de datos, como tambin acceder a aplicaciones colaborativas como mensajera, foros, encuentros
virtuales, cursos a distancia.
No importa si ofrece pginas simples o complejas, con objetos de interaccin tradicionales o ms
complicados, pero lo que s importa es el grado de permanencia en Internet y su poder de aprehensin, o sea
su capacidad de poder capturar la atencin del usuario de tal manera, que se convierta en un lector asiduo
del sitio.
Pero cmo se lograra esto?. El adornar las pginas con colores, animaciones e imgenes atrayentes,
lamentablemente no es la clave para garantizarlo. No es una cuestin de centrar la atencin exclusvamente
en los efectos visuales. Lo que s puede hacer la diferencia, es un adecuado diseo, que sea acorde al
usuario conectado, al contexto, al contenido del sitio y a su aplicacin subyacente.
Partiendo de sitios con servicios e informacin similares, cuestiones de diseo son determinantes para que
el usuario pueda distinguir uno de otro, percibir su calidad trayendo como consecuencia que el usuario lo elija,
se sienta cmodo y satisfecho con l. Sitios, cuyo diseo debe efectuarse bajo normas y recomendaciones
especficas, que ayuden a lograr una integracin coherente entre una estructura simple, un buen contenido,
una representacin visual efectiva, una interaccin personalizada y una navegacin intuitiva.
El diseo es lo que garantizar la usabilidad del sitio o calidad de uso, que es ni ms ni menos, lograr la
mejor productividad de todo el sistema, basndose en un alto grado de satisfaccin por parte de los lectores
del mismo.
II -Caractersticas especficas de un Sitio

El surgimiento de Internet, como tecnologa de comunicacin entre usuarios, abri las puertas a nuevas
posibilidades de interaccin y cooperacin. Aplicaciones de groupware y trabajo cooperativo como encuentros
virtuales, comunicacin cara a cara, educacin a distancia, modificarn radicalmente los patrones de
comunicacin y afectarn completamente nuestra vida cotidiana.
Desde el punto de vista del ser humano, el usuario se adecuar a estas nuevas pautas de interaccin,
utilizando las aplicaciones para obtener comunicacin en lnea con otras personas ubicadas remotamente, en
pos de compartir recursos, colaborar en actividades grupales y transmitir ideas.
Desde la perspectiva de la Ingeniera de Software, esto significa reformular todos los mecanismos y
metodologas involucradas en el desarrollo de la interfaz del usuario. Partiendo desde tcnicas de anlisis,
aspectos de diseo, recomendaciones, mecanismos de prototipacin, implementacin y testeos de usabilidad,
que deben ser adecuados a estas nuevas potencialidades.
Las polticas de diseo que se deben emplear en la interfaz de un sitio Web, no coinciden con la de
interfaces grficas, ni multimediales, ni tampoco con los principios considerados al desarrollar un boletn o
suplemento informativo desde un procesador de textos o herramienta para publicaciones.
Entonces, como las interfaces del usuario presentes en las pginas Web tienen caractersticas y
particularidades propias, la misma debe ser construida basada en delineamientos particulares y mediante
patrones de diseo que debern ser reconsiderados especficamente para este caso.
A continuacin, se analizarn cules son las cuestiones especficas que caracterizan a las interfaces de
La Interfaz Web y sus principios de Diseo -113

sitios Web, que las distinguen del resto de las interfaces y que es fundamental que el diseador las tenga en
cuenta al momento de encarar la construccin de un sitio.
Respecto al Perfil del Usuario:

En primera medida, hay que tener en cuenta que los usuarios de Internet presentan caractersticas muy
heterogneas, pueden ser de cualquier nacionalidad, con diferencias socio-culturales muy grandes, pueden
contar con distinto grado de formacin y pueden acceder mediante distintos recursos tecnolgicos.
Para esto, se va a analizar posteriormente cmo acotar el espacio de usuarios hacia una comunidad de
lectores ms especfica, trabajando directamente con uno o ms perfiles de usuarios a la que va estar dirigido
el sitio, y realizando estudios y modelos descriptivos de dichos lectores destinatarios, apropiados para lograr
una correcta interaccin con ellos.
Lo que s se puede determinar en trminos generales, es cules son los aspectos comunes que cualquier
usuario de Internet posee y cul es su comportamiento habitual frente a un sitio.
Principalmente, el usuario pasa de leer toda una informacin ya establecida y pautada como en el caso
de diarios, revistas y libros, a seleccionar informacin y a construirla basndose en movimientos, acciones,
desplazamientos y cliqueos. Por ello, la informacin est expresada en forma temporal y se genera como parte
de la interaccin y movimientos del usuario.
El look & feel, o sea la apariencia y percepcin de una interfaz para la Web difiere de las interfaces
tradicionales, debido a que en este caso el feel domina completamente la experiencia del usuario. El usuario
pasa de leer a hacer, generando emocionalmente un impacto ms fuerte.
El usuario de Internet se comporta ms impaciente en lnea, y requiere motivacin para el movimiento,
exploracin y bsqueda de la informacin.
Tiempos medios de lectura de carga, cantidad de cliqueos para acceder a la informacin requerida, tiempos
de navegacin, entre otros, son valores que en el diseo de los sitios Web toman mayor preponderancia. Por
ejemplo, Google Analytics (http://www.google.com/analytics) que es un servicio gratuito de estadsticas de
sitios Web, permite analizar un sitio desde determinadas mtricas con el objeto de obtener una versin ms
optimizada del mismo. Para realizar el monitoreo, Google Analytics aade un JavaScript a cada una de las
pginas que desea analizar y carga la informacin al servidor Google almacenndola en la cuenta del usuario.
Existen mtricas como time on page y time on site, tiempo en pgina y tiempo en sitio para analizar
el perfil del usuario, por ejemplo su lugar de origen o desde donde se consulta para obtener informacion mas
representativa y til. El tiempo en pgina permiten tener nocin sobre promedios de duracin que un lector
se encuentra en una pgina antes de saltar a la siguiente. El tiempo en sitio en cambio, da una idea sobre el
tiempo de visita o la permanencia del usuario dentro del sitio.
Respecto a Cuestiones de Diseo:

En este caso, hay que analizar especficamente las cuestiones de multimedia y de navegacin para la
Web, que no coinciden con el desarrollo de hipermedia.
Con respecto a la multimedia, sta debe ser restringida. La necesidad de ser modernos en la Web, -en
ingls referenciado con el trmino to be cool-, que implica tomar ventaja de las aspectos tecnolgicos ms
recientes y novedosos, se ha credo por mucho tiempo ser el causa ms importante para lograr la permanencia
en Internet.
Sin embargo, numerosos estudios de usabilidad han comprobado que muchas veces utilizar nuevas
tecnologas, tales como mapas de imgenes, animaciones, elementos Shockwave u otros efectos visuales
atrayentes, complican considerablemente la interaccin con el sitio, producen distracciones, molestias,
demoras, y hasta son considerados difciles de utilizar.
Adems, como se ver en las prximas secciones, las reglas del buen diseo restringen las cuestiones
tecnolgicas ya que, por ejemplo, se recomienda minimizar el tiempo de carga y ancho de banda de tal forma
que el acceder a la prxima pgina del sitio, no consuma ms tiempo que el de dar vuelta la pgina de un
diario o revista.
Tambin, se recomienda tener consideraciones especiales en el contenido e ilustracin. Se aconseja texto
estructurado y resaltando slo lo ms importante, imgenes chicas, poca carga visual, diseo esttico pero
minimalista.
Por tal motivo, los diseadores han sido forzados a utilizar nuevas tecnologas pero nicamente en forma
alternativa o complementaria a un diseo ms moderado y simple.
Con respecto a la navegacin, su problema inherente de prdida de contexto, se agrava an ms en
un entorno de la Web, donde existen varias lneas de navegacin. En un sitio, pueden estar disponibles la
navegacin por contenido, por estructura, navegacin atrs y adelante, navegacin adaptada y otras ms, que
se describirn posteriormente en este captulo.

Debido a esto, hay que considerar que el modelo de navegacin de la Web difiere del de las aplicaciones
que no son para Internet. Esta diferencia causa confusin a los usuarios y los diseadores necesitan trabajar
especficamente con normas de diseo especiales para la navegacin, en pos de ayudar a los usuarios a
utilizar la aplicacin Web satisfactoriamente.
Adems, hay que tener en cuenta que, dentro del entorno de la Web, la navegacin tiene una fuerte relacin
con la forma en que la misma es percibida por los usuarios. La navegacin se ve afectada por la apariencia
de los hipervnculos, por su ubicacin, por la visualizacin de su entorno, por la informacin que acompaa
la estructura de la navegacin y por otros recursos, haciendo an ms complicado su diseo y tratamiento.
Respecto a los Objetivos:

Al desarrollar un sitio Web, el diseador de la interfaz debe proponerse ciertos objetivos que son especficos
para este entorno, adems de los que se plantean a nivel de interfaz general.
Es importante pretender que la interfaz Web sea simple, amigable, flexible, transparente como se plante
en el Captulo I, pero adems hay que tener en cuenta ciertos propsitos especiales.
En el mundo tan competitivo de la Web, donde se plantea el concepto de user engagement, que implica
captar al usuario mediante un diseo eficiente de la presentacin y contenido del sitio, el objetivo de usabilidad
ser crucial para la supervivencia de los sitios.
Las tcnicas de Ingeniera de Usabilidad, permiten la creacin de sitios Web ms fciles de usar, ayudando
a los desarrolladores a focalizar su atencin en el usuario ms que en la tecnologa.
Analizar las necesidades de los usuarios, sus objetivos, sus pretensiones respecto a las actividades que se
desarrollarn dentro del sitio, se considera ms importante que el adoptar los ltimos aspectos de avanzada.
Desde ya que, si la ltima tecnologa va acorde al perfil de los usuarios y ayuda a concretar sus intenciones
frente al sitio, no habra problemas en ser incorporada, pero utilizarla por una cuestin de estar a la moda,
es actualmente, inaceptable.
Jacob Nielsen, precursor del concepto de Usabilidad, especifica como complemento a la usabilidad, otros
objetivos importantes para el diseo Web que deberan ser considerados, como ser:
Objetivos propios al Explicacin
Diseo Web
Legibilidad nHay que brindar informacin fcilmente comprensible, que sea
accesible desde diferentes circunstancias.
Expresividad nDebe existir autenticidad y veracidad en la informacin que se
publica. Adems, la escritura y la expresin debe ser correcta.
Localizacin nEl usuario debe encontrar fcilmente los objetivos del sitio, la
funcionalidad, los servicios o la informacin, con pocos cliqueos.
nConsiderar la Ley de Fitts [Paul Fitts, 1964] sobre el tiempo para
alcanzar un objetivo con el mouse, que depende de la distancia y el
tamao del mismo.
Navegabilidad nSe deben habilitar diferentes mecanismos de exploracin y se
deben flexibilizar e incentivar los movimientos a travs del sitio.
Visibilidad nHay que disear el sitio en forma atractiva pero simple, con patrones
de visualizacin previamente estudiados y testeados.
Interaccin nSe debe flexibilizar el dilogo entre el usuario y el sitio, hacindolo
adaptable segn el perfil del lector.
nHay que evitar molestar y distraer al usuario con elementos
emergentes como pop-ups.
Progresividad nEl sitio debe estar estructurado de forma escalable, que permita su
propio crecimiento y evolucin.
nHay que trabajar en la actualizacin de contenidos e informar sobre
la antigedad de la informacin que se publica.
Caractersticas de Internet nDisear especficamente para Internet, con sus caractersticas de
universalidad, seguridad, accesibilidad.
nConsiderar cuestiones de indexacin, con criterios para ser
multireferenciados entre diferentes sitios.
nHay que tener en cuenta estndares de intercambio, como ser en
noticias, anuncios, foros, debates, carteleras.
nConsiderar como punto de partida, la estandarizacin del diseo
de las aplicaciones especficas de Internet, como ser de gobierno
electrnico, comercio electrnico, educacin a distancia, etc.
Presencia en Internet nSi se escribe para la Web, es porque se quiere ser encontrado.
Jacob Nielsen [Nielsen, 2006] dice que si el usuario no te encuentra
primero en los resultados de un buscador Web, pensar que
directamente no ests en la Web.
Tabla 5.1: Objetivos del Diseo Web
Importante
nEn la construccin de la interfaz de un sitio Web, no son aplicables las cuestiones de diseo del
desarrollo de las interfaces grficas, de boletines informativos, ni de un documento hipermedial.
nLa interfaz Web presenta sus caractersticas propias, por lo que debe ser tratada especficamente
en todas sus etapas de desarrollo.
III - Particularidades en el Desarrollo Web

Es importante que los desarrolladores comprendan que un sitio Web es un software que presenta
particularidades especficas, que cuenta con sus propios objetivos, con un caudal de usuarios muy importante
y heterogneo, y que presenta inherentemente ciertos problemas de diseo.
Estas caractersticas particulares, que deben ser consideradas a lo largo de todo el proceso de desarrollo
de la interfaz del sitio, hacen que el mismo se vea afectado y traiga en consecuencia algunas modificaciones
puntuales respecto del desarrollo tradicional de una interfaz del usuario.
Uno de los puntos distintivos del desarrollo Web, es sugerir a los diseadores a ahondar an ms, en la
etapa de requerimientos de la interfaz del sitio, complementando con ciertas actividades especficas que sern
de gran utilidad para posteriormente encarar un correcto diseo del mismo.
Adems de esto, el desarrollador Web, deber tener en cuenta que existe una propuesta metodolgica que
apunta a la construccin de sitios usables, que l puede incorporar y aplicar como proceso de desarrollo.
Este esquema metodolgico es denominado Ingeniera de Usabilidad, fue creado por Jacob Nielsen y ser
introducido posteriormente.
Otro aspecto importante y caracterstico que el diseador no podr saltear, es la investigacin, el estudio y
seleccin de las normas especficas para el diseo de una correcta interfaz para la Web.
Se tiene destinado para ello, la ltima seccin de este captulo, donde se listarn y explicarn los principios
de diseo ms importantes que deben ser considerados por los desarrolladores Web.
Actividades Previas al Diseo de Sitios Web

Para poder encarar eficientemente el desarrollo del sitio con todas sus dificultades y particularidades, es
sumamente necesario tratar esta complejidad antes de comenzar con el proceso de diseo.
Para ello, se sugiere encarar una serie de actividades complementarias a las de la etapa de requerimientos
o pre-diseo, de las interfaces del usuario tradicionales, en pos de comprender an ms la problemtica
inherente a la Web y poder paliarla adecuadamente.
Determinar la Comunidad Destinataria de Lectores:

En el sitio de la BBCMundo.com indica que actualmente Internet cuenta con ms de miles de millones de
usuarios de todo el mundo. Los mismos podran ser los futuros lectores del sitio que se est desarrollando.
La masividad de usuarios, el alto grado de heterogeneidad y diversidad entre los mismos, no debe desalentar
al diseador y provocar pasar por alto, a la modelizacin de usuarios. Se pone el valor en el diseo centrado
en el usuario pero trabajando principalmente en acotarlo a una comunidad ms especfica.
Hay que tener en cuenta que la mayora de los sitios Web, son construidos para una determinada audiencia,
a la que se le destina y se le dedica los servicios, la informacin y las funcionalidades provistas. Pueden ser
alumnos, mdicos, clientes, consumidores, amas de casa, adultos mayores, hinchas de un club de ftbol.
Adems, hay que considerar que, cualquier medicin de xito de un sitio, se plantea en base a dicha
audiencia, es decir nmero de visitas, permanencia en el sitio del visitante, nmero de revisitas, ventas,
ranking, opiniones, quejas. Por lo tanto, es lgico pensar en profundizar la atencin hacia esos usuarios
destinatarios, y utilizar este anlisis, en pos de ofrecer el mejor diseo y el ms adecuado, para los mismos.
Contar con un entendimiento profundo sobre quines sern los usuarios destinos del sitio, cules son sus
perfiles, qu es lo que ellos quieren hacer en el sitio y cmo ellos tienden a comportarse, no es necesariamente
un proceso complicado, y ms an, en funcin de las ventajas que se pueden alcanzar al encararlo en forma
sistemtica y consistente. Este proceso fundamentalmente, consiste de los siguientes puntos:

Especificacin de la Explicacin
Audiencia del sitio
Formular y reconocer la nDebido a la masividad de personas que utilizan Internet hay que
audiencia de usuarios analizar y definir la audiencia a la que est dirigido el sitio, definiendo
perfiles de usuario.
Analizar el comportamiento nHay que determinar qu es lo que se pretende que los usuarios
esperado de la audiencia realicen dentro del sitio y en qu tiempos. Por ejemplo, si se quiere
principalmente que los usuarios entren al sitio a investigar o bajar
informacin, o para comunicarse con otros, o para informarse.
nAdems, analizar si se pretende capturar usuarios tempordicos o
permanentes.
Mantener contacto previo nEs necesario saber que la audiencia debe ser detectada en pos de
con la audiencia mantener un contacto directo con ella. Por ello, se deben planificar
correctamente citas, encuentros sistemticos, entrevistarlos, analizar
su entorno y perspectiva.
nSi no se puede establecer una comunicacin con los usuarios
finales del sitio, se puede trabajar con muestras de usuarios, que
presenten las mismas caractersticas que los patrones considerados
en la audiencia.
Recolectar informacin del nSe debe verificar las hiptesis planteadas sobre los usuarios.
usuario nSe debe comprender lo que ellos necesitan de la informacin,
formas de pensamiento sobre organizacin y agrupamiento de la
informacin, expectativas del sitio, entre otras cuestiones.
nHay que estudiar principalmente cmo son, cules son sus niveles
de conocimiento sobre la materia, su grado de experiencia con la
Web y tipos de sitios similares.
nAl trabajar con usuarios, uno puede reunir escenarios reales y
aprender qu es lo que hace que el sitio Web funcione bien o no.
Participacin de los nPermitir que los usuarios ayuden en la construccin del sitio.
usuarios involucrados nHacerlos participar en decisiones, teniendo en cuenta sus opiniones,
crticas y sugerencias.
nExplicitar la poltica de manejo de la informacin del usuario.
Tabla 5.2: Pasos en la especificacin de usuarios destinatarios del sitio Web
Planificar el sitio web:

El reconocimiento y modelizacin de los lectores a los que se les destina el sitio, es fundamental para
desarrollar un producto a la medida y necesidad de los mismos.
Pero adems, hay que considerar de suma importancia, al proceso de planificacin del sitio, que
esencialmente consiste en que el desarrollador tenga en claro cul ser el sentido del sitio y sus objetivos
principales. Permite determinar actividades de usabilidad, que son determinantes para el desarrollo de un sitio
exitoso.
El desarrollador Web, previo al diseo del sitio, debera pensar principalmente en los siguientes
cuestionamientos:
Planteos en la Explicacin
Planificacin del Sitio
Plantear los objetivos del nEs fundamental que los objetivos propios del sitio estn claramente
sitio especificados.
nLa finalidad del sitio puede ser puramente comercial, educativa,
financiera, informativa, de contacto de usuarios, para recolectar
informacin, entre otros.
nLos diferentes roles que intervienen en el desarrollo del sitio,
diseadores, programadores, especialistas en usabilidad, especialistas
en contenido, el lder del proyecto, los usuarios destinatarios, deben
tener en claro para qu y por qu, el sitio se va a desarrollar.
Analizar concordancia nHay que plantear los objetivos principales del sitio, teniendo
entre los objetivos del consideracin sobre las expectativas y finalidades de los usuarios.
sitio y de los usuarios a nEllos accedern al sitio por algn motivo, por alguna necesidad que
los que est dirigido el sitio debe satisfacer en la forma ms directa posible.
Analizar posibles nA causa de la heterogeneidad de posibles lectores del sitio, ser
contextos del usuario necesario considerar diferentes escenarios de posible uso.
nHay que considerar que los usuarios debern poder acceder al
sitio desde diferentes lugares, distintos medios y mediante diferentes
recursos tecnolgicos.
nEl sitio deber adecuarse y funcionar correctamente a estos
diferentes contextos.
Realizar anlisis nSe debe analizar sitios similares que estn en el mercado, desde
competitivo diferentes aspectos, su diseo, su contenido, cmo ofrece los
servicios que presta.
nActualizar la estrategia del sitio para evolucionar junto a los
competidores.
nDiscutir sobre formas y aspectos que optimicen los valores
tradicionales, para ser incorporados en el futuro sitio Web.
Plantear medidas de xito y nHay que fijar mediciones que permitan analizar cundo se considera
fracaso que el sitio es exitoso y cundo no. Por ejemplo, puede que se
determine que el xito depender de la cantidad de registrados o
asociados al sitio, ms que del nmero de visitas del mismo.
Planificar actividades que nEl proceso de planificar el sitio para y con los usuarios, constituye
promulguen la usabilidad de por s, una actividad de usabilidad.
nAdems de organizar futuros testeos de usabilidad, tambin hay
que planear otras formas de involucrar a los usuarios dentro del
proceso de desarrollo del sitio.
nHay que determinar formas para obtener informacin de los usuarios
previo a la etapa de diseo, como tambin recolectar, averiguar,
probar formas de comunicacin y de transmisin de contenido,
adecuado para ellos.
nTambin, hay que planear cmo se van a desarrollar y suscitar los
prototipos del sitio que se organizarn para los usuarios.
nTener en cuenta que la Prototipacin, ser esencial para llevar a
cabo estas actividades de usabilidad.
Tabla 5.3: Planteos en la Planificacin del sitio Web.
Pensar en la Prototipacin:
Es fundamental que los diseadores Web, se preparen y se organicen para aplicar en forma efectiva, la
Prototipacin durante el proceso de diseo del sitio.
La Prototipacin es fundamental para trabajar con todo lo que se ha planificado del sitio, constituye un
medio poderoso de representacin y de comunicacin de las distintas alternativas de diseo y, establece un
marco adecuado para la puesta en marcha de ideas y toma de decisiones.
Adems, a travs de los prototipos, que son versiones parciales del software que se est desarrollando, se
puede obtener de antemano la comprobacin y corroboracin de cuestiones de usabilidad.
Ellos son de gran utilidad para la organizacin y realizacin de evaluaciones, donde se puede obtener
parmetros sobre la performance de los usuarios y su grado de satisfaccin, previamente a invertir el tiempo
necesario, esfuerzos y los costos, para la construccin final del sitio.
Partiendo de las definiciones que se detallaron en el Captulo II, y teniendo en cuenta el contexto de la Web,
un prototipo ser entonces una versin incompleta del sitio, donde reflejar parcialmente ciertos contenidos y
servicios.
Por lo general, se inicia con un prototipo de la pgina principal y alguna de sus pginas secundarias, para
que el usuario vaya observando y percibiendo el diseo general del sitio. Luego, se van confeccionando
versiones prototpicas ms avanzadas y completas, donde la estructura de la navegacin y cuestiones de
interaccin pueden ser probados frente a los usuarios.
Importante
nLa Prototipacin es una metodologa que permite trabajar con cuestiones de interfaz en forma
separada del aplicativo subyacente, respetando la estrategia de Independencia de Dilogo.
nEl separar el look & feel de un sitio respecto de sus aplicativos funcionales, desde las etapas
iniciales del desarrollo durante su diseo y en el testeo, permitir un esquema de trabajo ms
organizado, eficiente, que va a incidir favorablemente en la calidad del producto final.

Ingeniera de Usabilidad
La usabilidad o calidad de uso, es uno de los objetivos ms importantes de la interfaz del usuario. La misma
especifica el grado de efectividad que tiene la interaccin que se provee entre los usuarios y el sistema.
Es una conjuncin de proveer simplicidad en la interfaz, que sea fcil de usar y aprender, brindar eficiencia
y productividad en la utilizacin e interaccin y lograr satisfaccin subjetiva por parte de los usuarios.
Jacob Nielsen [Nielsen, 1994] es el promotor de este concepto y l introdujo a la Ingeniera de Usabilidad
como una metodologa de desarrollo adecuada a la construccin de sitios Web.
Esta metodologa implica encarar el proceso de desarrollo de un sitio donde se tiene en cuenta cuestiones
de usabilidad desde el principio y a lo largo del mismo.
Mediante este esquema metodolgico, se ayuda a los desarrolladores a focalizar su atencin en los
usuarios ms que en la tecnologa. Por ello, provee una estructura clara para la participacin efectiva de los
usuarios, mejorando la calidad y el trabajo de reingeniera.
Est constituido por un conjunto de procesos, tales como:
n Conocimiento del usuario
n Definicin de objetivos de usabilidad
n Anlisis heursticos, Anlisis competitivo
n Diseo iterativo, Diseo paralelo, Diseo participativo
n Diseo coordinado de la interfaz del usuario global
n Prototipacin
n Testeo emprico
n Recoleccin de feedback o informacin de retorno sobre el uso real del sitio
Hay procesos que ya lo hemos explicado en el captulo de Desarrollo de la Interfaz del usuario, pero hay
otros que requieren cierta explicacin, como los que se van a detallar a continuacin:
Procesos de la Explicacin
Ingeniera de Usabilidad
Definicin de objetivos de nImplica la definicin de metas para poder alcanzar la usabilidad.
usabilidad nSe incluye como mnimo los objetivos generales de la interfaz.
Anlisis heursticos nPara alcanzar un grado de usabilidad en un sitio se requiere realizar
determinado anlisis heurstico como ser:
-Seguir recomendaciones publicadas
-Investigar heursticas especificas al tipo de interfaz
-Utilizar tcnicas como testeo emprico.
Anlisis competitivo nEs un proceso en el cul se presentan casos presentes en el
mercado, considerando aspectos del diseo y se analizan sus
caractersticas, ventajas y desventajas.
Diseo iterativo, nEs un proceso que se adecua a la cultura de la Web, donde los
participativo y paralelo sitios se encuentran en constante cambio.
nLa percepcin de un usuario de un sistema cambia con el tiempo. El
uso del sistema va generando nuevos requerimientos que surgen en
funcin del mismo uso y limitaciones funcionales del sistema antes
no detectadas.
nSe organizan tests de usabilidad para evaluar el sitio frente a
usuario, tcnicas de focus group para analizar pros y contras.
nSe analizan y se prueban varias propuestas de diseo.
nEs un proceso de reingeniera donde el usuario tiene una
participacin activa.
Testeo emprico nImplica el desarrollo de tests evaluativos para medir la adecuacin
del diseo.
nPermite fundamentar futuros desarrollos prototpicos.
nSe emplea durante y al final del desarrollo iterativo.
Recoleccin de feedback de nHace referencia a seguir obteniendo la participacin del usuario
los usuarios una vez que el producto haya sido instalado y puesto en marcha.
nEs crucial para permitir el rediseo del mismo.
nEntre las prcticas comunes se encuentran opciones de correo,
registro interno de informacin de usuarios, sugerencias, preguntas
frecuentes que realizan, entre otros.
Tabla 5.4: Explicacin de ciertos Procesos de la Ingeniera de Usabilidad
En el ciclo de vida de la Ingeniera de Usabilidad intervienen ciertos procesos que anteriormente fueron
explicados y que denotan tres estadios dentro del desarrollo, la fase de pre-diseo, de diseo propiamente
dicho y de post-diseo.
En la siguiente ilustracin, se muestran los estadios y los procesos que lo conforman:
Figura 5.1: Estados de la Ingeniera de Usabilidad
Estos estadios tienen una correspondencia, con las etapas tradicionales del desarrollo del software, en
donde se tienen las etapas de requerimientos, diseo, implementacin y evaluacin principalmente.
La relacin entre estas etapas y las fases de la Ingeniera de Usabilidad, se visualizan en el siguiente
grfico:
Figura 5.2: Relacin con las etapas tradiciones de desarrollo de software.
IV - Principios de Diseo de un Sitio Web

Todos las actividades, anlisis y planificaciones que los desarrolladores Web pueden llevar a cabo en la
etapa inicial de requerimientos, son determinantes para encarar correctamente el diseo del mismo.
Otra tarea preliminar que incidir enormemente en la calidad del producto final, es la investigacin y el
recopilado de los principios y recomendaciones de diseo, que existen actualmente para la Web.
Hay innumerables normas y sugerencias sobre el buen diseo, que se aconsejan cumplir dentro del
desarrollo del sitio Web, mayormente publicadas en la World Wide Web Consortium, http://www.w3c.es.
Este consorcio promueve y desarrolla los estandares de la Web, como HTML 4 y 5, este ultimo de reciente
publicacin. HTML5 mejora en forma significativa cuestiones de accesibilidad y semntica del contenido de
la Web. Para mas informacin sobre la Web semntica se puede acceder a la seccin de web semntica de
la W3C. Las cuestiones de accesibilidad se abordan en el siguiente capitulo. Otro ejemplo de definicin de
estandares de la W3C es la recomendacin sobre el uso de hojas de estilo en cascada, o CSS por sus siglas
en ingls Cascading Style Sheets. Las hojas de estilo permiten separar la visualizacin del contenido de un
sitio Web y asegurar la misma continuidad visual en todo el sitio. Facilitan diferentes formas de presentacin,
por ejemplo al ser accedido desde diferentes dispositivos o para ajustarse a las preferencias de los usuarios,
sin necesidad de modificar los cientos de pginas que conforman el sitio Web. Se recomienda usar una nica
hoja de estilo para todas las pginas del sitio, en un archivo separado. Por cuestiones de accesibilidad, es
importante tener en cuenta que el sitio debe poder visualizarse correctamente an sin hojas de estilos, no usar
atributos que ignoren las preferencias de los usuarios, no usar ms de dos tipos de letras diferentes.
Otra recomendacin es el considerar el desarrollo de polticas P3P, Platform for Privacy Preferences. El
mismo es un proyecto de la W3C que fomenta la publicacin de las polticas de privacidad de los sitios Web
en un formato estndar, que sea entendido por los clientes y los sitios Web. Los clientes Web deberan brindar
una herramienta amigable para configurar sus opciones de privacidad y luego, al navegar por los diferentes
sitios se bloquearan las cookies en forma puntual, y no en forma general como es el comportamiento hasta
ahora. Los sitios Web deben definir sus polticas de privacidad en forma abierta y los clientes Web deberan
mostrrselas al usuario en forma amigable para que las configure segn sus preferencias. Existe un debate
sobre si su uso es adecuado o no, sobre las leyes que lo respaldan y la dificultad de configuracin, e incluso
algunos navegadores muy usados recomiendan que sean deshabilitadas.
Las normas de accesibilidad propuestas por la WAI -Web Accesibility Initiative- perteneciente a la W3C,
tambin constituyen una gua de recomendaciones para el diseo Web. Constituyen un estndar que agrupan
estrategias, guas y recursos para permitir que la Web sea accesible para todos, ms all de las capacidades
psico-fisicas de los usuarios, el equipamiento disponible, velocidad de conexin y entorno desde donde lleva a
cabo la interaccin. Es recomendable tener en cuenta estas guas desde el inicio del desarrollo del sitio Web.
En el captulo VI se analizarn estas normas con mayor profundidad.
La W3C tambin hace referencia a las consideraciones sobre Web mvil, el sitio Web soportar acceso a
travs de dispositivos inalmbricos del tipo telfono celular o PALMs? Las Mobile Web Best Practices (MWBP)
constituyen una gua para hacer sitios web usables desde dispositivos mviles. Las interfaces mviles ameritan
un captulo aparte, que no han sido incluidas en este libro. Si desea obtener ms informacin consultar en
http://www.linti.unlp.edu.ar/tiki-page9419.html?pageName=pubRec-2006.
Es importante tambin considerar otras cuestiones tcnicas especficas a la Web, como es la seguridad
en las aplicaciones Web. Hoy en da es fundamental implementar aplicaciones seguras, a fin de garantizarle
al usuario que sus transacciones se realizan de forma confiable y evitar ataques clsicos, como virus y
gusanos, robo de identidad y datos personales a travs de programas espas o spyware; o direcciones de
correo electrnico que solicitan que confirmen determinados datos personales almacenados en un dominio,
por ejemplo una entidad bancaria, y en realidad la informacin reenviada es destinada a personas ajenas
(phishing).
Si bien los usuarios deben conocer estas cuestiones y actuar responsablemente durante su navegacin,
es importante brindar desde el sitio Web que se est diseando un conjunto bsico de aspectos de seguridad.
Por ejemplo, para recoger informacin sensible en lnea, se recomienda implementar algn mecanismo de
seguridad adecuado, por ejemplo certificados SSL (Secure Socket Layer), particularmente si el sitio Web
contiene formularios o actividades transaccionales. Utilizar firma digital y disear mensajes de advertencia
claros para los usuarios al acceder a sitios no seguros. Minimizar la complejidad de las contraseas, tanto
como sea posible. Es muy comn encontrar un papel adherido a los monitores con las credenciales para
acceder al sistema. Solicitar como identificacin de usuario la direccin de correo electrnico, as se garantiza
la unicidad y rpida memorizacin. Si el sitio funciona como puerta de entrada para otros sistemas que
requiere autenticacin, intentar implementar single-sign on, es decir, el usuario ingresa sus credenciales una
nica vez y estas le abren la puerta a las otras aplicaciones asociadas. Por ejemplo, el sitio Web para la
gestin de alumnos que brinda operaciones transaccionales, como escribirse a una mesa de examen, podra
interconectase con el sistema de bibliotecas y el sistema de la plataforma virtual y el alumno podr navegar
entre los tres sistemas sin necesidad de tener que ingresar las credenciales al cambiar de contexto.
La seguridad es un tema complejo, pero que es importante considerar determinados aspectos, an cuando
no tengan que ver estrictamente con cuestiones de usabilidad.
Las polticas de uso aceptable y de confidencialidad de la informacin tambin deberan ser consideradas,
cuidadosamente elaboradas y publicadas en forma visible y comprensible. Las polticas de uso aceptable,
abreviado AUP por Acceptable Use Policy, se denominan tambin trminos del servicio o trminos de uso.
Constituyen un conjunto de normas que indica como debe usarse un servicio en lnea, por ejemplo que ante
determinadas acciones no adecuadas del usuario puede suspendrsele el servicio. En general son escritos
por los creadores de sitios web, empresas, universidades, etc. principalmente para reducir las potenciales
acciones legales que pueden ser tomadas por un usuario. Las polticas referidas a la confidencialidad de los
datos, determinan qu informacin que el usuario brinda al sitio, por ejemplo edad, telfono, direccin de correo
electrnico, gustos personales u ocupacin, pueden ser compartidas a terceras partes. Existen organizaciones
independientes, como TRUSTe y Better Business Bureau, entre otras, que certifican que las polticas de
confidencialidad son cumplidas, responden a estndares internacionales, y adems resuelve disputas de
privacidad de la informacin de particulares.
El diseador puede, luego de un proceso de anlisis general, acotar las reglas que va a considerar,
armndose su propio repertorio de normas de acuerdo al objetivo del sitio que se va a encarar, al tipo de
pginas y componentes que contendr y, de acuerdo al tipo de contenido que se pretende proveer.
En esta seccin, se van a listar los principios de diseo ms importantes que por lo general, se recomienda
aplicar y cumplir dentro de la interfaz del usuario del sitio Web. Para mayor claridad, se presentarn estas
normas en forma organizada y clasificada, de acuerdo a las siguientes categoras:
nNormas a nivel de sitio: donde aqu, se analizarn aquellas normas especficas
tanto a la estructura del sitio, a la navegacin como a los hipervnculos.
nNormas a nivel de pgina: aqu se van a tratar las reglas de diseo para las
pginas que conformarn el sitio, agrupando las normas para el diseo general de las mismas,
especficamente en la pgina inicial y en la de formularios.
nNormas a nivel de contenido: se explicarn las normas que deben ser
aplicadas a nivel de la informacin que se va a transmitir, teniendo en cuenta caractersticas del
lenguaje, formas de dilogo, de organizacin del texto y dems cuestiones.
Principios de Diseo a Nivel de Sitio

Como se dijo anteriormente, las normas que se refieren al sitio en general van a ser agrupadas a su vez,
en normas de diseo a nivel de estructura del sitio, a nivel de navegacin y a nivel de hipervnculos.
LaRespecto
Estructura del sitio
a la Estructura Web
del Sitio:
Uno de los puntos ms importantes a considerar dentro del diseo del sitio en general, es la estructura del
mismo.
En un ambiente tan visual como la Web, el buen diseo de la interfaz tiene mucho que ver con el sentido
y el grado de expresividad de dicha visualizacin, no slo aplicada en la representatividad de la informacin,
sino a la estructura organizativa del sitio.
Construir y mantener una relacin coherente y estrecha entre la arquitectura y la interfaz, es decir, entre
la lgica de la estructura y el significado visual, es fundamental para lograr la mejor adecuacin e interaccin
del usuario respecto al sitio.
Muchas veces los usuarios se pierden dentro de un sitio Web, simplemente por el hecho que el mismo
carece de un delineamiento organizado o estructurado, o sea que cuestiones estructurales no fueron encaradas
desde el principio, en forma deliberada.
En ciertos casos, los diseadores comienzan a construir sistemtica e irreflexivamente numerosas pginas
de distintas clases y tamaos, enganchadas entre s mediante una cantidad de hipervnculos, sin analizar una
lgica general de organizacin.
Esto se manifiesta posteriormente dentro de la interfaz, provocando innumerables problemas de navegacin
e interaccin, muy difciles de subsanar una vez que el sitio ya ha sido desarrollado.
Como es sabido, la forma de organizacin de la informacin inherente a la Web es la organizacin
hipermedial, o sea que las pginas y sus hipervnculos son representados y tratados internamente como
nodos y arcos de un hipergrafo.
No slo se proveen hipervnculos para relacionar contenido, sino para acceder a las funciones principales,
a servicios secundarios, adicionales, a informacin no tan relevante o de relleno, para ir atrs y adelante,
arriba o abajo, para enlazar pginas por acceso directo o acortamientos, para acceder a otros sitios, o por
otras cuestiones.
Por ello, para poder paliar esta situacin, el desarrollador debe primeramente definir y trabajar con una
estructura bsica, en donde se consideren nicamente las pginas ms relevantes del sitio y los hipervnculos
esenciales para poder acceder a dicha informacin.
Esta estructura, ms simple y reducida que el grafo anterior, es la que debe ser visualizada y transmitida
al usuario, para que el mismo pueda percibir al sitio a travs de una perspectiva ms sencilla y pueda a partir
de all, entender la lgica y el significado de esta estructuracin inicial.
Una vez definido el esqueleto estructural del sitio, el diseador podr agregar la restante informacin
adicional y todos las hiper-conexiones que crea necesarias, por lo que esta estructura bsica debe estar
definida de tal forma, que soporte las futuras extensiones y amplificaciones.
Entonces, el diseador deber trabajar arduamente en el diseo general del sitio y en la definicin de una
estructura elemental del mismo, como se explican en las siguientes normas:

Principios de Diseo a Explicacin
Nivel de Estructura
Organizar el contenido del nSe debe analizar la cantidad de informacin a publicar en el sitio, y
sitio, previo a la carga del estudiar formas de organizacin hipermedial.
mismo
Definir la estructura nSe debe fijar una estructura simple de organizacin del sitio, que
elemental del sitio sea lgica y significativa, constituida por las pginas e hipervnculos
ms relevantes del sitio.
nHay que construir una infraestructura slida para soportar el nivel
de actividad y dinamismo de los usuarios.
nSe puede optar como estructura principal del sitio, alguna de los
siguientes esquemas:
Secuencial nlas pginas principales se vinculan en forma
lineal.
Jerrquica nlas pginas se vinculan en forma de rbol.
en Estrella nlas pginas se vinculan a travs de una pgina
central.
de bsqueda nhay una bsqueda central para el hallazgo y
acceso directo de las pginas ms importantes.
Grafo nlas pginas se encuentran hiperconectadas
reducido mediante una profundidad y anchura moderados.
Hacer que la estructura nPara hacer que la estructura sea usable, hay que considerar
sea usable conjuntamente, los siguientes aspectos:
Visualizacin nla estructura debe tener una visualizacin aparente
y acorde a ella.
Prioridad ndentro de la estructura debe posicionarse primero
lo ms importante.
Consistencia nse debe hacer el look&feel de la interfaz acorde
a la estructura.
Flexibilidad nla estructura debe brindar distintas alternativas
y permitir diferentes caminos para alcanzar la
informacin que el usuario requiere.
Inmediatez nla estructura debe solventar cuestiones de acceso
directo y acortamientos, permitiendo que el usuario
realice sus intenciones en pocos pasos.
Evaluar si la estructura es nHay que comprobar que la estructura analizada permita y soporte
extensible escalabilidad, crecimiento y posibles cambios en el sitio.
Tabla 5.5: Normas de diseo a nivel de estructura.
La Navegacin del sitio Web
La navegacin se refiere a la forma en que los usuarios construyen su exploracin a travs del sitio,
mediante la utilizacin de los hipervnculos, que constituyen el medio para trasladarse y recorrer los diferentes
puntos del mismo.
El usuario podr navegar dentro de una misma pgina o entre varias pginas que pueden pertenecer a un
mismo sitio o no.
Si uno tiene en cuenta la organizacin hipermedial de la Web, entonces, se puede decir que la navegacin
implicara la determinacin y recorrido de un camino dentro del grafo subyacente, conformado por aquellos
nodos y arcos que respectivamente, son las pginas visitadas y los hipervnculos activados.
En la siguiente tabla, se resumirn las recomendaciones de diseo ms importantes para el proceso de

navegacin:

Nivel de Navegacin
Definir diferentes tipos de nEn un sitio, se pueden proveer diferentes tipos de navegacin que
navegacin deben ser estar bien definidos y tratados coherentemente:
Navegacin ndeterminada por los hipervnculos que permite
por recorrer las pginas ms importantes del sitio. Es
estructura denominada cross-referencing
Navegacin npermitir al usuario navegar hacia delante y atrs
de la sesin en el sitio, sin acceder al historial del navegador.
nSe la denomina cross-navigation
Navegacin nmantener la nocin el contexto. Nocin de la
contextual ubicacin del usuario, con informacin de los pasos
anteriores, actual y posteriores.
Navegacin nadaptar la navegacin al usuario, adelantando
adaptada hipervnculos, segn estudios que se realizan
durante las sesiones.
nse debe trabajar con tcticas que identifiquen la
direccin IP del usuario en pos de customizar su
interfaz, utilizando tcnicas como IP-Sensing.
Navegacin nse puede ayudar en la navegacin del usuario
interactiva en forma interactiva, mediante preguntas sobre las
intenciones del usuario y acceso directo.
Establecer la mejor nSe debe especificar la mejor manera de visualizar los diferentes
visualizacin de la tipos de navegacin que se proveen.
navegacin o feedback nCada tipo de navegacin debe ser visualizados con un color, tipo de
navegacional letra, fondo, ubicacin, que sea especfico para l y que lo identifique
a lo largo de todo el sitio.
nSe puede trabajar con distintas barras de navegacin o cualquier
otra forma visual, pero cada tipo de navegacin debe estar claramente
distinguido, agrupado, localizado y visualizado.
Tratar los problemas nA la navegacin en general se le atribuyen ciertos problemas que
inherentes a la navegacin deben ser considerados y tratados a nivel de diseo.
nEntre los problemas ms importantes, se tiene:
Prdida de nse debe informar al usuario sobre dnde se
contexto encuentra, de dnde viene y hacia dnde puede ir.
nse los debe ayudar en una transaccin, indicando
en qu paso est, qu es lo que hizo y qu le resta
hacer
nno interrumpir la navegacin generando ventanas
nuevas.
Dependencia nse debe evitar que el usuario acceda a las
con el funciones del navegador.
navegador ndebe existir unin entre datos y control dentro del
mismo sitio.
Demora en la nhay que paliar el problema de las demoras,
navegacin mediante informacin de contexto, mensajes
informativos, ayudas.
Prdida del nel usuario debe identificar los hipervnculos
usuario externos, o sea los que acceden a otros sitios.
nhay que informarlo y advertirlo de esto.
Analizar cuestiones nPermitir accesos directos, complementarlo con un sistema de

especficas bsqueda.
nConsiderar la regla de 3 clicks, para alcanzar un objetivo.
nProveer un mapa de navegacin accesible en todo momento.
nProveer un tour dentro del sitio, que lleve al usuario a los puntos
ms sobresalientes del mismo.
Tabla 5.6: Normas de diseo a nivel de navegacin.

Los Hipervnculos
Un hipervnculo es una palabra, frase, imagen o smbolo, que permite a los usuarios saltar de un lado a otra
ubicacin del mismo sitio o de algn sitio externo.
Como en el resto de los casos, existen normas especficas a tener en cuenta en el diseo de los hipervnculos,
que se van a resumir a continuacin:

Nivel de Hipervnculos
Destinar una ubicacin nLos hipervnculos deben estar ubicados en forma independiente.
independiente para los nSi son hipervnculos asociados a la informacin, no deben estar
hipervnculos entremezclados al texto, para evitar distraccin e interrupcin y
facilitar la lectura local. Pueden ubicarse al costado o al final.
nLo mismo sucede con los hipervnculos asociados a un tipo de
navegacin.
Distinguir semnticamente nCada hipervnculo debe estar referenciado por un trmino o imagen
los hipervnculos de acuerdo al significado y al destino del mismo.
nNo debe existir ambigedad, interseccin o inclusin entre
hipervnculos.
nEvitar el uso de la frase Cliquee aqu o ms info
Categorizar los nLos hipervnculos deben ser claramente distinguibles y clasificados
hipervnculos segn estn asociados al contenido, a los servicios, a la funcionalidad,
a los distintos tipos de navegacin.
nAdems, hay que diferenciar hipervnculos internos de los externos
que permiten al usuario abandonar el sitio.
Proveer informacin nSe debe brindar informacin sobre el destino del hipervnculo
complementaria -descripcin, tamao- para que el lector pueda predecir hacia donde
se dirige.
nSe debe proveer informacin de los hipervnculos en la barra de
estados
nSe puede utilizar texto en los hipervnculos o grficos acompaados
por texto para clarificar el sentido de los mismos.
Considerar aspectos de nHay que analizar el aspecto visual del hipervnculo, su color,
visualizacinn disposicin, tamao, longitud que debe ser acorde al sentido del
mismo.
nSe debe controlar el tamao del hipervnculo. Si es textual, no debe
superar ms de 15 caracteres.
nSe deben utilizar colores significativos para los diferentes estados
de los hipervnculos. El usuario debe percibir claramente el estado
del hipervnculo, si fue visitado, seleccionado, si est habilitado o no.
nSe puede recurrir a estructuras visuales como tablas, mens o
ndices de hipervnculos.
Proveer Consistencia y nSe debe mantener consistencia entre el nombre del hipervnculo y
homogeneidad del ttulo de la pgina destino.
nAspectos de visualizacin de los hipervnculos como lugar, imagen,
tipografa utilizada para los mismos deben mantenerse homogneos
en todas las partes del sitio.
Proveer Correctitud nSe deben proveer hipervnculos correctos. Si son externos deben
saltar a pginas de sitios que realmente existan en la Web.
nHay que mantener actualizada las referencias URL que puedan
dirigir ciertos hipervnculos.
Tabla 5.7: Normas de diseo a nivel de hipervnculos.

Principios de Diseo a Nivel de Pgina
En esta seccin, se van a listar las recomendaciones de diseo a nivel de pgina, separando las normas
segn el diseo general, la pgina principal y para aquellas que provean formularios.
En el caso que el diseador desee proveer otro tipo de pginas como ser, de transacciones, de contacto,
publicitarias, entonces va a tener que reunir las normas especficas de acuerdo a ello y respetarlas en su
diseo del sitio.
Mediante estas normas se recomienda al diseador comenzar con definiciones de moldes o templates de
pginas, teniendo en cuenta cada tipo de pgina que el sitio proveer.
Esto constituye un buen esquema de trabajo grupal, puesto que provee una gua de diseo de cmo deben
construirse las pginas del sitio que el equipo de trabajo deber respetar, y fundamentalmente para garantizar
consistencia a lo largo de todo su desarrollo.
Diseo general de las Pginas

Todas las pginas del sitio deben construirse a partir de la definicin de un modelo, estipulado y diseado
bajo determinados lineamientos.
El mismo consistir en la definicin de pautas relacionadas con la diagramacin general, sectorizacin,
organizacin del contenido, aspectos de visualizacin como el logo, especificacin del tipo de letra general, su
tamao, fondos y colores a utilizar.
Este modelo conformar el diseo general de pginas que deber estar definido, a parte de la definicin de
moldes ms especficos para diferentes tipos de pginas.
Con respecto al diseo general de las pginas, se deben respetar las siguientes recomendaciones:
Principios de Diseo Explicacin

General de Pginas
Clasificar el contenido nToda pgina de un sitio debera tener como contenido cierto tipo de
informacin, clasificada de la siguiente manera:
Contenido nconformado por el ttulo, subttulos, objetivos,
primario descripcin de la pgina.
Contenido nconformado por la misma informacin que se
informativo desea transmitir en la pgina.
Contenido ncon los servicios que se brinda y la funcionalidad.
funcional
Contenido nconformado por otras funciones e informacin
secundario adicional.
Contenido nformado por propagandas, artculos, sugerencias,
contextual relacionadas con la informacin publicada.
Otros nservicios adicionales como ayudas, salidas,
impresin, guardado, de comunicacin como e-mail,
FAQs, contactos, entre otros.
Sectorizar de acuerdo al nLas pginas deben ser sectorizadas claramente de acuerdo al tipo
contenido de contenido analizado en el punto anterior.
nDeber tener un sector para ttulos, un sector funcional, otro para el
contenido informativo, otro para servicios adicionales, etc.
Diagramacin general nSe debe establecer cuestiones generales de cmo sern las
pginas del sitio, definiendo tipo de contenido y sectores que va a
tener, la especificacin de un rea comn.
nSe deben tomar decisiones sobre formas de organizar el contenido
informativo, con prrafos extensos o no, si se van a preferir brindar
pginas extensas o sintticas pero aumentando el nmero de
hipervnculos.
nSe deben especificar las cuestiones de visualizacin, tipografa,
fondos, tamaos, y gama general de colores a utilizar.
nRecordar la recomendacin sobre el uso de hoja de estilos
mencionada en el seccin de principios de diseo de un sitio.

Especificar un rea comn nCualquier pgina del sitio, debe contener un sector o contar con un
marco comn que identifique al sitio.
nEn este marco comn, puede tener un logo, un men con ciertas
opciones e informacin que permanecer en todas las pginas.
Proveer homogeneidad nSe debe proveer un diseo homogneo en todo el sitio.
nEl sitio debe ser consistente en dos aspectos:
Visual nVisual significa utilizar para los mismos tipos de
pginas, el mismo tipo de letra, colores, fondos y
dems recursos visuales.
Conceptual nEmplear terminologa, conceptos, definiciones
consistentemente a lo largo de todo el sitio.
Aprovechar los recursos nLos recursos visuales pueden transmitir informacin y denotar
visuales para denotar ciertos significados.
significado nPor ejemplo, la semntica del color rojo para denotar peligro, o el
amarillo para precaucin.
nPor lo tanto, hay que considerar las siguientes cuestiones:
-Utilizar la tipografa adecuada acorde al contenido del sitio.
-Usar colores para denotar importancia y capturar atencin.
-Usar la nocin de tamao para transmitir importancia y permitir
distinto grado de reconocimiento y memorizacin.
-Emplear la localizacin de objetos para transmitir importancia
o secuencia de acciones. Lectura de izquierda a derecha y de
arriba abajo.
-Usar la nocin de agrupamientos y criterios de ordenacin.
-Utilizar metforas, explicar conceptos mediante asociaciones,
analogas, ejemplos, conceptos familiares al usuario.
Evitar sobrecarga visual nEl diseo debe ser esttico y minimalista, combinar el buen gusto
con utilizacin de mnimos recursos por parte del cliente.
nUsar imgenes pequeas inferiores a 40 Kb y multimedia solamente
como medio alternativo e incluyendo el soporte necesario.
nUtilizar escasas animaciones y movimientos, slo para denotar
conceptos muy importantes pues atraen mucho la atencin. Adems,
deben contener funcionalidad sintctica para interrumpirlos,
reasumirlos, configurarlos.
Considerar aspectos de nTener pensamiento global, distintos formatos de archivos,
diseo universal adecuacin a distintas conexiones, tipos de monitor, tipos de
navegadores y cuestiones de internacionalizacin.
nRespecto a este ltimo punto, en la W3C existe un grupo de trabajo,
el W3C Internationalization (I18n), que intenta asegurar un conjunto
de formatos y protocolos que puedan utilizarse en todos los idiomas
y culturas, garantizado el acceso universal.
Probar el sitio desde nHay que analizar el sitio desde distintos aspectos tcnicos,
diferentes situaciones probando velocidad de carga, volumen de informacin, desde
diferentes recursos y medios.
nEl tiempo de navegacin de una pgina a otra, debera aproximarse
al de la vuelta de pgina de un libro.
nTener en cuenta la compatibilidad entre diferentes navegadores
dado que ciertas etiquetas HTML o funciones de JavaScript no se
visualizan de la misma manera en la familia Mozilla y en el Internet
Explorer de Microsoft.
nRecordar las normas WAI recomendadas en el seccin de
principios de diseo de un sitio para brindar acceso universal.
Permitir signos de nEl usuario debe adaptar, personalizar, modificar ciertas
adaptacin del sitio caractersticas de visualizacin, interaccin y utilizacin del sitio.
nDebe mantenerse esta configuracin a lo largo de la sesin y en las
prximas sesiones.
Tabla 5.8: Normas de diseo a nivel de diseo general de pginas.

la Pgina Inicial
La pgina inicial es sumamente importante, no slo por ser la primera impresin que el usuario tiene del
sitio entero, sino por ser la puerta de entrada, la que lo introduce al mismo y se lo presenta.
Habitualmente, el usuario tiene como expectativas de la pgina inicial, el obtener en forma directa un
panorama general de lo que el sitio ofrece, y de lo que se puede hacer en l.
Los principios correspondientes a nivel de pgina inicial, son:

Nivel de Pgina Inicial
Proveer informacin nSe debe claramente especificar lo que se ofrece en el sitio.
general del sitio nHay que proveer una pgina inicial clara y sinttica que puntualice
el objetivo del sitio y provea un ndice de los temas abordados en l.
Definir el aspecto y nEl aspecto y la organizacin que se percibe en la pgina inicial,
diagramacin inicial da una primera perspectiva de lo que se puede encontrar en todo el
sitio.
nLa pgina inicial debe estar diagramada y visualizada acorde al
diseo general del sitio, aunque posea ciertos rasgos distintivos,
para sobresalirla del resto.
Visualizar el marco comn a nDesde la pgina inicial debe estar presente el marco comn a todo
todas las pginas el sitio, aunque en sta tenga un aspecto distinguible.
nDebe visualizarse el logo, el nombre del sitio, funciones principales,
mens, que estarn siempre presentes a lo largo de todo el sitio.
Dar informacin sobre la nSi el sitio requiere que el usuario se registre en forma obligatoria,
registracin antes de navegar, entonces debe dar informacin de ello en la pgina
inicial.
nSe debe sugerir al usuario cmo debe proceder, informndole
sobre los beneficios de registrarse, y donde se observe el estado de
inhabilitacin de los servicios e hipervnculos previo a ello.
Dar informacin sobre el nSe debe informar permanentemente sobre el estado del sitio y de
estado del sitio los servicios.
nSe debe indicar si hay pginas en construccin o no y cundo van
a completarse.
nSe debe sealar fecha de ltimos cambios o de actualizaciones.
Definir reas prioritarias nHay que promover reas prioritarias que se desea que el lector
visite, recomendaciones, pginas ms importantes, ms visitadas,
entre otras.
Permitir el acceso a la nSe debe ir fcilmente a la pgina inicial desde cualquier punto del
pgina inicial sitio.
Proveer servicios nProveer ayuda general del sitio, un sistema de bsqueda para el
adicionales acceso directo, un mapa del sitio, un tour recomendado por el autor,
un asistente interactivo, ayuda en lnea, entre otros.
Tabla 5.9: Normas de diseo a nivel de pgina inicial.
Pgina con Formularios

Un formulario es una componente visual que permite reunir un conjunto de diferentes objetos de interaccin,
en pos de permitir la entrada de datos por parte del usuario.
El mismo puede estar compuesto de casilleros de entrada de textos, ttulos, listas de seleccin, botones,
casilleros de chequeo, entre otros.
Existen normas especficas a pginas que posean formularios, como las siguientes:

Principios de Diseo de Explicacin
Formularios
Proveer un diseo flexible nEl usuario puede comenzar a completar el formulario desde
de formulario cualquier punto del mismo, suspenderlo, reasumirlo, ir hacia el
principio o hacia el final del mismo, sin inconvenientes.
nPermitir un orden arbitrario o flexible de llenado de datos.
Proveer funciones nBrindar funciones especficas de formularios, como ser soporte
sintcticas para suspender el llenado, reanudarlo, guardarlo, imprimirlo, obtener
ayuda.
Brindar medios nPermitir la activacin de los casilleros a travs del teclado, con la
alternativos de activacin tecla <Tab> por ejemplo.
de los casilleros nO mediante acceso directo a los mismos con teclas de funcin o
atajos.
Distincin visual nDistinguir entre entradas obligatorias de las que no lo son, entradas
importantes de las que no lo son.
Proveer validacin nProveer validaciones lxicas, sintcticas asociadas a cada casillero
de entrada y a todo el formulario.
Proveer feedback adecuado nProveer mensajes aclaratorios, ayudas, ejemplos, rango de posible
valores de entrada para el ingreso de datos
nAnalizar la frecuencia e inmediatez de aparicin
Disear mensajes de error nBrindar mensajes claros, no ambiguos, que den alternativas a
eficientes seguir, que sugieran formas de solucionar el conflicto y salir de l.
nAnalizar que el tiempo entre la aparicin del mensaje respecto del
momento en que se cometi el error sean apropiados.
Considerar el diseo nTener en cuenta aspectos de diseo a nivel de cada componente
de las componentes del del formulario y de la disposicin y visibilidad de las mismas.
formulario nEn el caso de los botones radiales, no se puede utilizar ms de 5
opciones.
nEn el caso de los casilleros de entrada de texto, se recomienda
proveer el tamao adecuado, no truncar, no utilizar scrolling, mostrar
estados posibles como ser de edicin o no.
Considerar cuestiones de nLa informacin que se intercambia entre el cliente y el servidor debe
seguridad contar con algn mecanismo de encriptacin. Bajo ningn concepto
debe viajar un texto plano.
Tabla 5.10: Normas de diseo a nivel de pgina de formularios.
Principios de Diseo a nivel de Contenido

Escribir para la Web, es muy distinto que el realizar publicaciones en papel. Por ejemplo, est comprobado
que la lectura horizontal y la presencia de los monitores decrecen la velocidad de lectura en un 25 %.
Por lo tanto, es necesario considerar ciertos aspectos de diseo a nivel de contenido, que permita mejorar
el grado de comunicacin y de percepcin.
Se van a presentar recomendaciones de diseo a nivel general como tambin del lenguaje empleado.
Diseo general del Contenido

general
de contenido
Organizar y visualizar el nSe debe capturar la atencin al usuario sobre la informacin
contenido acorde a su nivel importante, por lo tanto la ubicacin y visualizacin debe estar
de importancia diseados para resaltar lo relevante y distinguirlo de lo que no lo es.
Proveer el contenido nSe debe brindar informacin y servicios acorde al objetivo.
apropiado nEl contenido de la pgina debe ser coherente con el ttulo y con el
hipervnculo que permite su acceso.
nEl contenido de una pgina debe tener el mismo nivel de abstraccin.

Publicar contenido nLa gramtica a utilizar, la forma de expresin debe ser simple, que
comprensible no complique la interpretacin por parte del usuario.
nEl usuario no debe acudir a la navegacin para entender qu se
quiso decir en un determinado punto, o cul es su significado.
Aprovechar diferentes nAprovechar el uso de fragmentaciones del texto como frases,
recursos visuales para prrafos, tabulaciones, listados, tablas.
expresar el contenido nUtilizar objetos de interaccin como mens, ventanas, ficheros
interactivos o tab-set, capas o layers para sintetizar espacio.
Proveer una visualizacin nUsar tipo de alineacin estndar a izquierda, letra de tamao
estndar adicional habitual 12 y de tipo sans serif aunque sea como configuracin
alternativa.
Relacionar contenido con nCada nivel de navegacin debe significar mayor nivel de detalle.
la navegacin nEl contenido debe ser progresivo acorde a la navegacin.
Considerar el diseo nHay que considerar que cada objeto de interaccin cuenta con su
particular de los objetos propio repertorio de reglas de diseo, como ser:
de interaccin Respecto a los nno se puede mostrar ms de 10 opciones,
mens ni con ms de 3 niveles de jerarqua
nse debe diferenciar seleccin mltiple o
simple
nvisualizar los tems seleccionados,
visitados, habilitado
Respecto al rea nvisualizar el estado de edicin o lectura.
de texto nproveer funciones sintcticas
Respecto a las nvisualizar el estado que puede ser
Tablas y listas seleccionable/no, editable/no.
nproveer funciones sintcticas de
ordenamiento, filtrado, proyeccin, seleccin
En el caso nse debe visualizar claramente cul es el
del fichero tab activo.
interactivo o nse debe ordenar el fichero en forma
Tab set acorde con la informacin mostrada.
ndiferenciar funciones a nivel de ficha y de
fichero
Respecto a los nanalizar feedback sobre su existencia.
Layers nanalizar funciones provistas y
dependencias con la hoja contendedora.
Tabla 5.11: Normas de diseo a nivel general de contenido.
Lenguaje Empleado
a Nivel del Lenguaje
empleado
Proveer un lenguaje nEmplear un lenguaje apropiado al objetivo de la pgina, utilizar una
acorde al objetivo y a la terminologa acorde al tipo de informacin que se publica.
informacin a transmitir
Utilizar un lenguaje acorde nEmplear un lenguaje acorde al perfil o perfiles de usuarios al que
al usuario est dirigido.
nNo utilizar palabras tcnicas ni extranjeras
Utilizar expresiones nNo deben mostrarse errores de ortografa ni gramaticales.
correctas nNo deben emplearse expresiones confusas, complejas ni que estn
compuestas por varias frases y muchos conectores lgicos.
nNo abreviar ni truncar expresiones.
Manejar aspectos de nEl lenguaje debe manifestarse a travs de colores, tipografa,
visualizacin tamaos en forma coherente.
nDebe ser acorde a la informacin que se expresa y al perfil de
usuarios a quin est dirigido.
Tabla 5.12: Normas de diseo a nivel de Lenguaje empleado.
Caso de Estudio 5 - La interfaz web y sus principios de diseo
El objetivo de este caso de estudio es presentar una prctica donde los estudiantes analizan un sitio Web
que sea de su inters, segn los nuevos conceptos adquiridos al momento. Evaluar un sitio Web que usan
habitualmente segn las pautas de un buen diseo Web promueve la reflexin al visitarlo desde otro punto
de vista, y evita la demora que conlleva el anlsis de un sitio que no se conoce desde su objetivo hasta las
formas de interaccin.
Objetivo
La prctica consisti en la evaluacin de un sitio Web de eleccin de cada estudiante teniendo en cuenta
las consideraciones de diseo trabajadas en las clases tericas. Uno de los informes destacados fue el
realizado por los alumnos Alan Vido (alanvido@yahoo.com) y Facundo Manual Quiroga durante la cursada
2010, sobre el portal de la Biblioteca de la Facultad de Informtica. La aplicacin permite llevar adelante la
gestin completa de libros y usuarios, y obtener los correspondientes reportes.
Es importante destacar que el sitio fue re programado durante el ao 2011 y en las etapas avanzadas de la
implementacin se realizaron testeos de usabilidad que mejoraron notoriamente la interaccin con el usuario
final. El sitio actual puede consultarse en http://catalogo.info.unlp.edu.ar/
A continuacin se presenta un resumen del informe. La entrega completa puede consultarse en el repositorio
de trabajos de alumnos de la Facultad, http://dpsace.linti.unlp.edu.ar

Se analiz el sitio institucional de la biblioteca de la Facultad de Informtica de la UNLP, http://biblioteca.info.
unlp.edu.ar/, as como el catlogo online de dicha institucin, http://catalogo.info.unlp.edu.ar/. La evaluacin
se realiz considerando los principios de diseo a nivel sitio de ambos sitios por separado, y luego de los
principios a nivel de pgina y de contenido de los 2 sitios juntos.
Los dos sitios evaluados se utilizan con distintos fines en la misma institucin y sin embargo los estilos son
diferentes, como se puede obervar en la figura 5.1 y 5.2 Para el caso de estudio se presentan los resultados de
la evaluacin del catlogo, por tener mas funcionalidades y componentes de interaccin aunque se incluyen
algunas referencias al sitio de la biblioteca.

Se analiz el sitio institucional de la biblioteca de la Facultad de Informtica de la UNLP, http://biblioteca.info.
unlp.edu.ar/, as como el catlogo online de dicha institucin, http://catalogo.info.unlp.edu.ar/. La evaluacin
se realiz considerando los principios de diseo a nivel sitio de ambos sitios por separado, y luego de los
principios a nivel de pgina y de contenido de los 2 sitios juntos.
Los dos sitios evaluados se utilizan con distintos fines en la misma institucin y sin embargo los estilos son
diferentes, como se puede obervar en la figura 5.1 y 5.2 Para el caso de estudio se presentan los resultados de
la evaluacin del catlogo, por tener mas funcionalidades y componentes de interaccin aunque se incluyen
algunas referencias al sitio de la biblioteca.
Figura 5.1 Pgina inicial de acceso al ctalogo de libros. Es posible Figura 5.2 Pgina de acceso a la informacin institucional de la
consultar e interactuar con el sitio de esa fecha a travs de webback Biblioteca. Es posible consultar e interactuar con el sitio de esa fecha
machine, en http://goo.gl/tsNum a travs de webback machine, en http://goo.gl/wXzHr

En la figura 5.3 se presenta el mapa del sitio para la gestin del catlogo de libros. Como se puede obser-
var, la aplicacin contiene distintas secciones con contenido claramente identificado.
Figura 5.3: Estructura del catlogos de libros de la Facultad de Informtica
Principios de diseo a nivel sitio De los catlogos virtuales

La organizacin del sitio es clara y concreta. Presenta una estructura de bsqueda, ya que es el servicio
ms importante que provee, aunque tambin es posible navegar la informacin por temas o tipo mediante los
estantes virtuales, organizados jerrquicamente. Esta estructura brinda flexibilidad en las bsquedas dado
que puede encontrar informacin a travs de la bsqueda comn, la avanzada, los estantes virtuales, los
favoritos, y el historial de prstamos. La barra de bsqueda que se encuentra la parte superior todo el tiempo
colabora con la inmediatez. Desde la pgina de un libro podemos acceder directamente a una lista de todos
los libros del autor o de los temas del libro, como as tambin en ciertos casos a la bibliografa de la materia
que lo utiliza.
Sin embargo, presenta ciertos problemas con determinadas recomendaciones referidas a que la estructura
sea usable. La visualizacin no es adecuada dado que no hay un orden ni tampoco se comunica al usuario
que el principal medio de interaccin es la bsqueda. Desde la pgina inicial, se presenta como primera opcin
la bsqueda que es el elemento de interaccin principal con el sitio, junto con l inicio de sesin del usuario.
Luego, si bien la barra de bsqueda est siempre visible, toma un lugar secundario en la interfaz.
Respecto a definir diferentes tipos de navegacin, la principal es la navegacin por estructura, a travs
del proceso de bsqueda se encuentran enlaces iniciales que pueden ser seguidos descubriendo nueva
informacin. La navegacin contextual aplica, pero el sitio es muy simple y no hay procesos que lleven varios
pasos.
No se observan prdidas de contexto, dependencia del navegador o demora en la navegacin que conlleve
la prdida del usuario y problemas inherentes a la navegacin. Se cumple la regla de los 3 clics. Sin embargo,
presenta problemas de feedback navegacional dado que no hay ninguna distincin visual importante entre la
navegacin por bsqueda, mediante los estantes virtuales, los favoritos y a travs del historial de prstamos
como se puede observar en las figuras 5.4,5.5,5.6, 5.7
132- Caso de Estudio 5 - La interfaz Web y sus Principios de Diseo

Figura 5.4: Resultados de bsqueda Figura 5.5: Estantes Virtuales
Figura 5.6: Favoritos Figura 5.7: Historial de prstamos
Respecto a la localizacin de navegacin, si bien la posicin de los elementos de navegacin es consistente

en todo el sitio, no hay una clara razn por la cual se utilizan 2 mens en vez de uno solo, siendo tan pocos
sus elementos. No hay mapa de navegacin, y tampoco sera posible tener uno ya que la estructura del sitio
no es clara y el mismo no es tan extenso.
A nivel de Hipervinculos se encuentan varios problemas que cumplen a medias estas recomendaciones.
Por ejemplo en la lista de resultados que se ilustran en la figura 5.4,5.5,5.6 y 5.7, los nombres de los libros y de
los autores sirven tambin como enlaces, lo cual no es apropiado en ocasiones ya que pueden ser muy largos.
No hay distincin sintctica entre enlaces internos y externos, aunque se infiere fcilmente su destino por
el contexto, como se puede observar en la figura 5.8. Tampoco hay diferencia de color entre los enlaces no
visitados y el texto plano, pero s entre visitados, no visitados y seleccionados.
Figura 5.8: No existe una distincin entre hipervnculos internos y externos.
Caso de Estudio 5 - La Interfaz Web y sus principios de Diseo -133

Tampoco provee informacin complementaria suficiente. En la pgina de resultados (figura 5.4), para cada
libro se muestra el autor, si tiene ejemplares disponibles y la edicin. Podran agregarse iconos para mostrar si
el libro tiene varios autores, para distinguir entre libros, trabajos de tesis, etc., y para reconocer ms fcilmente
la cantidad de ejemplares disponibles.
Principios de diseo a nivel Pgina

Respecto a la clasificacin del contenido, todas las paginas tienen contenido primario como ttulo y subtitulo,
pero las paginas ayudas e instructivos y noticias no tienen objetivos, descripcin ni contenido y no se
informa de este problema. Idem para contenido informativo y funcional. El contenido contextual es provisto
por la barra lateral derecha y es fijo. La informacin adicional est provista en todas las pginas, permite
impresin, envi por mail y cambiar el tamao de la fuente. En catlogos se permite la impresin y exportacin.
No estn disponibles en el formulario de contacto, mapa del sitio y tampoco en buscar. Las FAQ estn vacas.
La sectorizacin se respeta en la mayora de las paginas, excepto en catlogos y mapa del sitio que tienen
un aspecto totalmente distinto.
Respecto a la diagramacin general, a grandes rasgos la diagramacin es respetada por todas las pginas,
pero Catlogos no la respeta en ninguno de sus aspectos. La forma de organizar el contenido es dispar
principalmente en institucional en donde no se respetan convenciones tipogrficas ni de aspecto en texto
presentado as como tampoco en los hipervnculos.
Respecto a la homogeneidad, no se provee una homogeneidad visual a lo largo del sitio, las principales
falencias estn en Catlogos e Institucional en donde no se respeta ninguna convencin de aspecto. Los
recursos visuales se utilizan de manera poco eficaz y en algunas situaciones de manera confusa como es el
caso de la seccin institucional en donde no se respetan los colores y tamaos de fuente que representan
a cada entidad en la pgina. El sitio hace escaso uso de imgenes y/o animaciones y las presentes no son
pesadas en general, no es el caso de galera de fotos (5.3Mb)
Con respecto al idioma, no se presenta la posibilidad de cambiarlo o cambiar los formatos en los que se
presenta la informacin, con respecto a la adecuacin a distintas conexiones el sitio en general es bastante
liviano y puede ser accedido fcilmente, Excepto por la galera de fotos. Al no hacer uso intensivo de imgenes
y animaciones el sitio se presenta bien sin imgenes, los textos alternativos son poco explicativos. El sitio en
general no provee caractersticas de adaptacin. Los tiempos de carga de las pginas rondan los 2 segundos,
excluyendo la principal 10 segundos (489Kb) y la galera de fotos 100 segundos (5.3Mb). el servidor que lo
aloja aborta conexiones y produce que las pginas se vean incompletas.
Principios de diseo a nivel de Contenido

A nivel de pgina inicial, el sitio presenta problemas relacionados con proveer informacin general de un
sitio. Como se puede observar en la figura 5.1, la pgina inicial especifca vagamente lo que se puede hacer
en el sitio, el usuario debe descubrirlo navegando. No provee un ndice de los temas/funciones que se pueden
encontrar en el sitio.
Tambin en la definicin del aspecto y diagramacin inicial. La pgina inicial respeta en general la
diagramacin del sitio, pero esto difiere mucho al buscar en la seccin catlogos en la cual el aspecto es
totalmente distinto. El marco, mens y dems elementos comunes que se visualizan en la pgina principal, se
visualizan en todas las secciones menos cuando se est buscando en los catlogos, lo que da la impresin
de haber salido del sitio.
Respecto a informacin sobre el estado del sitio, la pgina inicial no informa sobre la fecha de ltima
actualizacin ni sobre el estado del sitio, paginas en construccin, etc. As como tampoco define areas
prioritarias.
Respecto a proveer servicios adicionales, el mapa del sitio provisto es poco intuitivo (figura 5.9), la seccin
de ayudas y preguntas frecuentes est vaca. No se provee un tour ni asistentes interactivos
Figura 5.9 (Mapa del sitio): Es poco intuitivo

Los formularios identifican en color rojos los campos obligatorios, con una clara distincin visual. Sin
embargo presentan varios problemas de usabilidad ya que permiten un orden de llenado arbitrario, pero si no
se completa un campo requerido y se guarda, muestra un mensaje de error y se debe volver a completar todo
el formulario.. El sistema, en general, no provee validacin de entradas ni ayudas. El nico formulario que las
provee es el de contacto. Esto atenta contra la flexibilidad.
El sitio no provee funciones sintcticas especficas de los formularios, no permite guardar y reanudar,
suspender y si se comete un error hay que volver a completar todos los datos. El nico formulario que provee
funciones sintcticas es el de contacto. Las nicas ayudas como puede ser imprimir o cambiar el tipo de fuente
son provistas por el marco.
Se permite la navegacin por los campos pero luego de pasar por todos los otros elementos de la pgina,
al obtener el foco estos elementos no producen feedback, as, hasta que no se est posicionado sobre un
campo del formulario, el usuario no sabe dnde se encuentra el foco. Es decir, no brinda medios alternativos
de activacin de los casilleros.
El sitio no provee ningn tipo de validacin en los campos del formulario, lo que vuelve engorroso su uso.
El nico formulario que provee funciones sintcticas es el de contacto.
El sitio solo provee feedback cuando se enva en formulario que contiene errores, los mensajes aclaratorios
son vagos, no se provee feedback mientras se completa el formulario. El nico formulario que provee feedback
es el de contacto.
Los mensajes de error son vagos y aparecen cuando el usuario ya envo el formulario, y lo obligan a tener
que re completar todo el mismo. En el caso del formulario de contacto los mensaje de error aparecen en color
rojo y de manera intimidatoria (Figura 5.10)
Figura 5.10 (Formulario-contacto): Los mensajes de error aparecen en rojo, son intimidatorios y vagos a la vez
Principios de diseo general de contenido y del lenguaje empleado

Este principio no present mayores dificultades dado que, en general, la organizacin del contenido es
correcta. El contenido que se provee respeta las normas y es coherente con su ttulo y/o hipervnculo. Teniendo
el sitio tan poca informacin, se respeta el nivel de abstraccin del contenido. Hay pginas que no proveen
contenido, como ayudas y noticias. El sitio respeta la relacin entre especificidad de contenido y pasos de
navegacin. Igual que en los puntos anteriores los excesivos mens dificultan su uso.
La gramtica es correcta, la forma de expresin es simple. Se aprovechan recursos simples como prrafos,
tabulaciones y tablas. No se utilizan recursos como tab-sets o layers para desplegar informacin y sintetizar
espacio. El formato de la visualizacin es estndar, respeta el tipo de la fuente y los tamaos aproximados.
Respecto a los objetos de interaccin, los mens estn bien diseados, respetan las normas de profundidad
y contenido, lo que dificulta la navegacin es que hay 3 barras de mens dos de las cuales tienen prcticamente
las mismas opciones. Ninguna de estas barras provee feedback. Solo la central para el elemento seleccionado.
Respecto a las tablas y vistas, no se visualiza el estado de las tablas y las escasa funciones sintcticas
provistas carecen de funcionamiento.
En general, la terminologa y el lenguaje empleado a lo largo del sitio son apropiados y consistentes y no
se detectan errores de ortografa y/o gramaticales.
Caso de Estudio 5 - La Interfaz Web y sus principios de Diseo -135

Conclusiones
Al finalizar esta evaluacin queda en evidencia que no seguir las recomendaciones bsicas para el diseo
de un sitio web conlleva directamente a reducir su usabilidad, provocando una mala experiencia en los
usuarios, esto produce lo abandonen pronto o incluso que directamente dejen de usarlo.
Como corolario se puede extraer que antes de poner un sitio web en produccin, se debe evaluarlo,
testearlo y corregirlo hasta que cumpla con las normas que se pretende cumplir y su funcionamiento cumpla
los objetivos especificados.
En lo personal este trabajo nos ha mostrado muchos errores que se cometen con frecuencia al desarrollar
un sitio web y como estos reducen su usabilidad, posibilitndonos mejorar a la hora de enfrentar nuevos
proyectos.

Ejercitacin
A.Citar al menos cinco diferencias entre disear la interfaz de un sitio Web y la interfaz WYSIWYG (What
You See Is What You Get).

______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________
______________________________________________________________________________________
B. Responder verdadero o falso.

nEl tipo de informacin que se publica en un sitio Web no afecta al diseo de la interfaz del v f
mismo.
nAl disear un sitio Web hay que pensar en un perfil de usuario general v f
nEs recomendable enriquecer el sitio Web con presentaciones Flash muy coloridas y v f
animadas.
nRealizar testeos empricos del sitio Web forma parte de la Ingeniera de Usabilidad v f
nEs fundamental facilitar el rediseo de los sitios Web v f
nUna vez publicado el sitio no es necesario tomar muestras de la interaccin del usuario con v f
el mismo.
C.Unir con flechas la actividad de la izquierda con las etapas previas al diseo del sitio Web de la
derecha.

Actividades Etapas
Analizar sitios similares Determinar la Comunidad Destino
Comprobacin y corroboracin de
cuestiones de usabilidad.
Determinar las actividades que
llevarn a cabo los usuarios
Recoleccin de feedback de Planificar el Sitio
usuarios
Considerar que los usuarios
pueden acceder desde diferentes
lugares, distintos medios y
mediante diferentes recursos
tecnolgicos.
Estudiar el grado de experiencia
del usuario con la Web.
Establecer mediciones de cuando Prototipacin
se considera un sitio exitoso y
cuando no.
Atender las sugerencias de los
usuarios
Ejercitacin - La Interfaz Web y sus principios de Diseo -137

Referencias
rTognazinni, B. First Principles.

rNielsen, Jakob (1994). Usability Engineering.
rNielsen, Jakob. (2000). Designing Web Usability: The Practice of Simplicity.
rNielsen, Jakob; Mack, Robert (1994). Usability Inspection Methods.
rNielsen, Jakob; Loranger, Hoa (2006). New Riders Press.
rNiederst, J.; Gustafson, Aaron (2007). Learning Web Design: A Beginners Guide to (X)HTML, StyleSheets,
and Web Graphics.
rLopuck, Lisa (2006). Web Design For Dummies.
rNiederst, J.; Gustafson, Aaron (2006). Web Design in a Nutshell: A Desktop Quick Reference.
rSmith, Jim (2007). How to Start a Home-Based Web Design Business.
rJul, Susanne; Furnas, George. Navigation in Electronic World.
rDevi, Michael; Conrad, Frederik. Usability Testing of World Wide Web Sites.
rBachiochi, D.;Berstene, M. Usability Studies and Designing Navigational Aids for the Web.
rhttp://www.w3c.es
rhttp://www.useit.com
rhttp://www.jnd.org
rhttp://www.cs.umd.edu/~ben/
rhttp://www.asktog.com/basics/firstPrinciples.html
rhttp://usableweb.com/
rhttp://msdn.microsoft.com/en-us/library/ms537341(VS.85).aspx
rhttps://bugzilla.mozilla.org/show_bug.cgi?id=366611
rhttp://www.linti.unlp.edu.ar/tiki-page9419.html?pageName=pubRec-2006
rhttp://www.useit.com/alertbox/20041025.html
rhttp://www.useit.com/alertbox/20001126.html
rhttps://www.atccapitalmarkets.com/securitisation-services/security-trustee
rhttp://www.w3c.es/divulgacion/guiasbreves/internacionalizacion
rhttp://www.w3.org/International/
rTRUSTe http://www.truste.org/
rBetter Business Bureau http://www.bbb.org/
rhttp://www.roirevolution.com/blog/2008/05/time_on_page_and_time_on_site_how_
confident_are_yo.html
rhttp://www.google.com/analytics
138- Referencias- La interfaz Web y sus Principios de Diseo

Capitulo VI
Accesibilidad en la Web
-139
Accesibilidad en la Web
Realizar un sitio que pueda funcionar bajo condiciones

ptimas nicamente, implica excluir millones de personas que
no podrn accederlo, y que tienen el derecho de ser usuarios
del mismo.
Internet debe ser para todos, donde la palabra todos no
significa slo usuarios con las mejores herramientas, los
ltimos navegadores, las mquinas ms rpidas, y las mejores
condiciones fsicas y mentales.
Temas a Tratar
I- Introduccin
II- Accesibilidad en la Interfaz del Usuario
nConsideracin de distintas discapacidades
nAnlisis de herramientas para discapacitados
III- Accesibilidad en la Web: su problemtica
nFalta de Diseo Universal en la Web
nFalta de Cumplimiento de las Normas de Accesibilidad
nProblemticas con los Recursos de Adaptacin
IV- Legislacin y Normas Internacionales sobre Accesibilidad
nPrincipios generales de Accesibilidad
nRecomendaciones de Accesibilidad de la W3C-WAI
-WCAG 1.0
-WCAG 2.0
VI- Comprobacin de la Accesibilidad Web
Casos de Estudio
Ejercitacin
Referencias
140- Accesibilidad en la Web

I - Introduccin
Internet, considerada como la red mundial de informacin sin fronteras, que revoluciona el rea de las
comunicaciones y que permite un acercamiento cada vez mas estrecho entre las diferentes culturas y razas
del mundo, es considerada para muchos otras personas, como una nueva barrera a afrontar.
Personas que, por su condicin socio-econmica, por discapacidades que posean u otras limitaciones
propias del ser humano, no cumplen con las condiciones y requisitos necesarios que demandan la mayora de
los sitios Web, quedando excluidas de este importante avance tecnolgico.
Por ejemplo, analicemos el caso de las personas con discapacidad visual. Segn datos estadsticos
proporcionados por la OMS Organizacin Mundial de la Salud-, se estima que hay acerca de 85 millones de
personas ciegas y dbiles visuales en el mundo.
Ahora bien, estas personas, que les resultara sumamente til y provechoso poder comunicarse, hacer
trmites, estudiar, investigar a travs de Internet, realmente, pueden hacerlo?
Los desarrolladores Web, consideran a las personas con ciertas discapacidades visuales, fsicas o
mentales, como posibles usuarios de su sitio?. Si Internet debe ser para todos, ellos efectivamente trabajan
en un diseo universal?
La respuesta lamentablemente es, no. La mayora de los sitios presentan un diseo nicamente visual,
con elementos llamativos, uso de animaciones y presentaciones en Flash, que en el caso de los disminuidos
visuales y ciegos, les puede resultar imposible de acceder aunque estn dotados de herramientas auxiliares
de adaptacin.
Debido a esto, surge el concepto de Accesibilidad en la Web, que significa que todo sitio debe ser
construido y diseado de manera tal, que pueda ser accedido por cualquier persona, independientemente de
su condicin fsica, mental, o recursos tecnolgicos que posea.
Esto implica contemplar los requisitos de todos los posibles usuarios desde las primeras fases de los
diseos de productos, de manera que las personas ms excluidas, generalmente, aquellas de bajos recursos,
gente de mayor edad, o minusvlidos, se conviertan en una parte importante de los posibles clientes.
Organizaciones internacionales como la WAI, (Web Accesibility Initiative), perteneciente a la W3C (World
Wide Web Consortium), se ocupan especficamente de establecer y publicar normas de accesibilidad, para
garantizar el diseo universal del sitio y el uso de elementos estndares.
Adems, recomiendan sobre la utilizacin de herramientas de diseo y promueven sistemas de validacin,
para que los desarrolladores Web puedan evaluar el nivel de accesibilidad de su sitio. En algunos casos, se
les detecta errores de diseo y se les presenta alternativas de solucin.
En este capitulo, especficamente se va a tratar el tema de la accesibilidad en la Web teniendo en cuenta
las diferentes discapacidades que un usuario puede padecer. Para ello, en primer instancia, se va a analizar
lo que significa una interfaz del usuario accesible y cules son sus alcances. Luego, se va a profundizar sobre
los problemas que presenta Internet respecto a las cuestiones de accesibilidad y por ltimo, se van a listar las
normas ms importantes que hacen al diseo accesible de un sitio.
II - Accesibilidad en la Interfaz del Usuario

El concepto de accesibilidad en Informtica puede ser muy amplio y tener muchas aserciones, porque
puede aplicarse tanto al soporte fsico o sea al hardware de una computadora, como al soporte lgico o
software.
Entonces, elementos muy heterogneos entre s pueden ser accesibles, dispositivos de hardware como un
teclado, una impresora, un ratn, como tambin diferentes tipos de software que pueden ir desde plataformas
o sistemas operativos, herramientas de autor, administradores de contenido o CMS hasta aplicaciones de
gran envergadura o pginas Web.
Aunque en todos los casos, la accesibilidad hace referencia a proveer un diseo universal en los productos
que se estn desarrollando, para que pueda ser entendido y utilizado por cualquier clase de persona, puede
existir sutiles diferencias en sus definiciones y ser tratadas mediante normas de accesibilidad especficas, de
acuerdo al tipo de elemento que se est tratando.
Entonces, si profundizamos sobre el rea de interaccin hombre-mquina y aplicamos la definicin de
accesibilidad especficamente a la componente de la interfaz del usuario, se puede abordar a la siguiente
concepcin:
Una interfaz del usuario es accesible si para su construccin, diseo e implementacin, se han tenido en
cuenta los requisitos necesarios, para que pueda ser utilizada por la mayor cantidad de personas posibles.
Esto es, independientemente de cuestiones de discapacidad, barreras del lenguaje, recursos tecnolgicos, o
cualquier otro obstculo posible.
Accesibilidad en la Web -141
Como en este captulo, se va a abordar especficamente la problemtica del discapacitado y su interaccin
con la Web, entonces, situados en este contexto particular, se puede ahondar an ms en la definicin, y
establecer que Una interfaz accesible para la Web, es aquella que permite una interaccin y representacin
del contenido del sitio, diseados de tal manera que pueden ser adquiridas, percibidas y operadas por cualquier
persona que padezcan algn tipo de discapacidad, aunque sea mediante herramientas especiales.
Ahora bien, una vez que individualizamos y entendemos el concepto al que debemos respetar, pueden
surgir innumerables inquietudes y cuestionamientos sobre cmo alcanzar esta definicin?, cmo lograr
realizar una interfaz con estas caractersticas?, cul es realmente el nuevo escenario que hay que considerar,
donde se contemple al usuario discapacitado con sus problemticas?, cules sern las normas o principios
de diseo especficos que hay que analizar y aplicar en el futuro producto?, entre otros.
A lo largo de todo este captulo, se va a intentar responder todos estos interrogantes, pero en principio, lo
que se debe hacer desde el equipo de desarrollo del sitio, es adquirir conciencia y asumir que dentro de la
comunidad de usuarios destino, se debern incluir a personas que pueden no poseer todas las capacidades
psquicas, fsicas o funcionales, en condiciones ptimas, o que no posean los recursos tecnolgicos ideales
para acceder al sitio. O sea, deben dejar de considerar al usuario potencial de su producto, nicamente como
aquel con facultades y circunstancias ideales.
Para ello, en la etapa de modelizacin, se debe incorporar un proceso de anlisis de distintos perfiles de
usuarios discapacitados, en donde se estudie su problemtica especfica, y donde tambin se indague sobre
los recursos y herramientas de adaptacin que ellos pueden utilizar en su ordenador para poder interactuar
con las aplicaciones.
Por lo tanto, se pueden distinguir dos actividades fundamentales que se adicionan, desde las etapas
iniciales de la interfaz accesible, que son:
nConsideracin e investigacin de las distintas discapacidades, y
nConocimiento y anlisis de las herramientas de adaptacin que ellos usualmente pueden emplear en pos
de comunicarse con el ordenador.
Adems, como en todo desarrollo de un sitio Web, en donde se debe probar el sitio frente a distintos
recursos, tipos de monitor, diferentes navegadores, comprobando su buen funcionamiento, ahora hay que
extender y profundizar ms este proceso de evaluacin, considerando e incluyendo las distintas soluciones
informticas que existen de adaptacin, tanto de hardware como de software.
Figura 6.1: Soluciones informticas de adaptacin.
Entonces, el desarrollador Web, deber afrontarse a una mayor complejidad y diversificacin tanto en el
soporte fsico como lgico de una computadora para uso del discapacitado, teniendo en cuenta este panorama
de accin y todas sus consideraciones.
Consideracin de las Distintas Discapacidades

Como se dijo anteriormente, una interfaz Web accesible es aquella que debe presentar su contenido y proveer
un comportamiento tal, para que pueda ser percibida, entendida y utilizada adecuadamente, por personas con
diferentes condiciones y capacidades. La misma debe reconoce diferentes clases de interlocutores, y debe
amoldarse a sus necesidades y formas de interaccin.
La personas con discapacidad, podrn entonces acceder al sitio accesible pudiendo captar mediante
diferentes modos, la informacin que all se publique y haciendo uso de la funcionalidad provista.
Hay que comprender que ese sitio adems de convertirse en su herramienta de trabajo, constituir un
elemento fundamental en el proceso de su integracin social.
Las discapacidades que un usuario puede padecer son muy variadas y cada una determinan problemticas
de acceso y de interaccin muy especficas.
En la siguiente tabla, se detallarn algunas de las diferentes discapacidades que un ser humano puede
adolecer y que un sitio Web deber contemplar afectando su diseo, y se considerarn cules son sus
realidades o complejidades respecto a lo que al uso de Internet se refiere:
Tipos de Discapacidades Problemtica respecto al Uso de Internet
Humanas
Discapacidad Visual nEstn incluidos los usuarios minusvlidos visuales, aquellos que
posean cierta afeccin visual como daltonismo y los ciegos.
Por el diseo visual de la Web, son los ms afectados en el uso de
Internet y los ms excluidos.
nMuchas personas ciegas utilizan herramientas que facilitan una
descripcin hablada o convertidas a Braille de las pginas, pero
no todos los sitios permiten que estas herramientas funcionen
correctamente, ni tampoco proveen ellos mismos los medios auditivos
necesarios.
nLas personas con problemas de visin, que no son ciegas, necesitan
aumentar el tamao, el contraste o las caractersticas generales de
visibilidad en funcin de sus necesidades visuales, pero muy pocos
sitios proveen estas funcionalidades de adaptacin, ni tampoco
estn preparados para que el discapacitado pueda hacerlo desde
mecanismos propios.
Discapacidad Auditiva nEstn incluidas las personas sordas, sordomudas y con dificultades
auditivas.
nEstas personas son las que menos problemas tienen al acceder
a Internet, a menos que se utilicen mecanismos de interaccin
exclusivamente auditivos.
nLas personas con dificultades auditivas que no alcanzan la sordera
tienen problemas con los cambios y determinados rangos de
frecuencia y para localizar y distinguir determinados sonidos.
nEllos como los sordos, necesitan que los videos, audio clips,
mensajes auditivos que ofrezca el sitio, sean subtitulados o provean
una versin alternativa en texto.
nAdems de tener problemas para detectar informaciones auditivas,
los usuarios sordos pueden no ser capaces de hablar correctamente.
Para ellos y en el caso directo de los sordomudos, el uso de
reconocimiento de voz, deber ser analizado especialmente.
Discapacidad Motriz nLas dificultades de las personas con problemas fsicos suelen ser
derivados de su falta de coordinacin, su debilidad, la dificultad para
alcanzar las cosas o la imposibilidad de mover alguna o algunas
extremidades.
nEstos usuarios pueden tener problemas con el uso del mouse,
rapidez requerida para realizar una determinada accin, presin
simultnea de teclas.
nSe puede presentar casos donde la nica manera que tienen para
operar una PC, es mediante un nico dedo, mouse de pie, licornios.
Discapacidad Cognitiva nAqu se incluyen los discapacitados mentales, psicolgicos como
gente depresiva, como tambin con problemas de adiccin como
drogadictos.
nEllos presentan diferentes capacidades de razonamiento,
memorizacin, comprensin y distintos grados de rapidez mental.
nLes puede costar la realizacin de tareas complejas, anidadas,
transacciones de varios pasos, como tambin la interpretacin de
mucho caudal de informacin en un instante determinado de tiempo
nAspectos visuales como animaciones, objetos parpadeantes pueden
afectarles, producindoles ciertas perturbaciones no deseables.
Tabla 6.1: Tipos de discapacidades y sus problemticas.

Anlisis de las herramientas para discapacitados
Los usuarios discapacitados necesitan contar con herramientas tanto de hardware como de software que,
de acuerdo al tipo de afeccin que posean, le permitan suplir las facultades que tienen condicionadas y los
ayuden a llevar a cabo sus intenciones frente al sitio Web.
Estos elementos auxiliares de hardware o software que se encuentran en el mercado para asistir al
discapacitado, se los conocen comnmente bajo los siguientes nombres: herramientas informticas de
adaptacin, adaptaciones informticas, o ayudas tcnicas.
Estas herramientas presentan caractersticas y formas de uso muy diferentes entre s. Determinan una
serie de complejidades propias del uso de herramientas adicionales. En el caso del software de adaptacin, el
mismo debe instalarse en el ordenador y funcionar correctamente, mientras que en el caso del soporte fsico
de adaptacin, adems de instalarlo y configurarlo, tambin hay que comprobar la correcta conexin al mismo.
Respecto al software de adaptacin, el mismo se puede clasificar en las siguientes categoras:
nLos Revisores de Pantallas: trabajan directamente sobre la salida del monitor. Se componen de:
- Los Ampliadores de Imgenes
- Los Lectores de Pantalla.
nLos Revisores de Documentos: trabajan directamente sobre los archivos de datos. Abarcan a:
- Los Lectores de Documentos,
- Los Reconocedores de Caracteres (OCR), y
- Los Navegadores de Internet Especializados
nLos Tomadores de Notas
nLos Software de Presentacin
nSoftware especiales de sonido
En la siguiente tabla, se explicarn los sistemas de software de adaptacin ms importantes a considerar

en el desarrollo de un sitio accesible:
Herramientas de Explicacin
software de adaptacin
Ampliador de imgenes nEs una herramienta de tipo revisor de pantalla, ideal para
discapacitados visuales.
nEs un software que permite capturar la salida al monitor y dar
diferentes grados de ampliacin y zooming.
nSe tiene al ZoomText de la compaa estadounidense Ai Squared,
Supernova de Dolphin Computer Access, que incluye capacidades
adicionales de lectura de documentos.
Lector de pantalla nEs muy utilizado por usuarios ciegos, puesto que es un software que
reconoce y describe oralmente la presencia de distintas componentes
de interaccin, como ser texto, cuadros de edicin, botones, mens,
lista de opciones, entre otros.
nEste programa sirve de interfaz entre la tarjeta de vdeo, los
sistemas de sntesis de voz y/o los terminales de lectura Braille, y el
usuario de la computadora.
nLos lectores de pantalla actuales ms populares son el Hal de
Dolphin, el JAWS del grupo Freedom Scientific, el Orca y NVDA de
software libre. Tambin, se encuentra el pequeo lector de pantalla
Narrator de Microsoft incorporado en Windows XP.
Lector de documentos nEs un programa que tiene como finalidad la transmisin por voz
del contenido de archivos de texto, y que suelen ir acompaados de
otras herramientas como deletreo de palabras.
nLo integran aquellos programas llamados de texto hablado o Text-
to-Speech, como puede ser el TextAssist o el Monologe de First Byte.
Tambin est el TextAloud de NextUp Technologies, que permite el
guardado de archivos de sonido.
Reconocedor de caracteres nTiene la capacidad de digitalizar pginas de texto. Esta funcionalidad
denominada OCR (Optical Character Recognition), es lo que utilizan
los ciegos para acceder a informacin escrita en papel, mediante el
ordenador.
nEjemplos son OmniPage de Caere, TextBridge de Xerox, y el
popular Open Book de la empresa norteamericana Arkenstone.
Navegador especializado de nEstos programas suelen incluir voz y ampliacin de imagen, facilitan
Internet en gran medida la lectura correcta del contenido Web, acceso a
hipervnculos y dems componentes de una pgina.
nUn ejemplo es el navegador pwWebSpeak de la sociedad
norteamericana The Productivity Works.
nIBM, realiz el producto Home Page Reader, que se lo incorpora a
un navegador convencional, para proveer la adaptacin.
Tomador de notas nSe tratan de pequeos ordenadores porttiles diseados
especialmente para discapacitados visuales, para asistirlos en la
escritura de distintos tipos de notas.
Software de presentacin nPor ejemplo, se tiene el software de presentacin del teclado en
pantalla, donde es totalmente configurable para adaptarse a las
necesidades del usuario.
nEstos pueden operarse desde el ratn o mediante un pulsador.
Software especiales de nPara las personas sordas, que necesitan tener informacin visual o
sonido textual de sonidos que utiliza el ordenador.
nPor ejemplo, la funcin ShowSounds que proveen algunos
sistemas operativos.
Tabla 6.2: Herramientas Informticas de Adaptacin.
Entre los productos de hardware, se pueden considerar:
Hardware de Adaptacin Explicacin

Sintetizador de voz nEs un dispositivo para equipar la PC, el cul permite convertir texto
en lenguaje hablado.
nOfrece diferentes idiomas y distintas formas de interlocucin.
Magnificadores de imgenes nSon adaptadores destinados para personas que tengan disminucin
para TV y monitores de PC visual, pues se encargan de agrandar los caracteres, imgenes y
dems contenidos de una pantalla.
nSon aparatos que toman la salida del televisor o monitor y las
transforma, generalmente aumentando la imagen transmitida.
nLos primeros equipos de ampliacin que aparecieron, como el Vista
de Telesensory Systems, se componan de una tarjeta de interfaz
que se insertaba dentro del ordenador, a la cual se conectaba
internamente la tarjeta de vdeo y externamente el monitor, y que
haca de puente lupa entre una y otro.
Equipos de multifunciones nTrae incorporados varias funcionalidades de adaptacin en forma
integrada. Como mnimo incluye sintetizador de voz y amplificador
de pantalla.
Sistema de lectura nEs un aparato que se comporta como una fotocopiadora parlante.
Graficadores de relieve nSon dispositivos que permiten preparar y generar grficos tctiles.
Reconocedores pticos nTienen la capacidad de detectar y leer cdigo Braille.
Braille nPueden realizar conversiones de cdigo Braille a formato digital, o
a lenguaje hablado, etc.
Dispositivos de entrada nComo ser teclado Braille, emuladores de teclado y mouse.
especiales nTeclados ergonmicos para una sola mano.
nComo licornios, mouse operados con el pie, para el mentn.
Otros insumos especiales nSon elementos especialmente diseados para no videntes, como
para no videntes por ejemplo termmetros parlantes, lentes sonares, los cuales emiten
un sonido particular al detectar un obstculo.
Dispositivos para el nMuy utilizados por personas con dificultades motrices, que no
Seguimiento de ojos pueden usar el mouse.
nTambin se encuentran para ellos, los punteros alternativos
licornios, punteros de manos, entre otros.
Tabla 5.3: Productos de Hardware de Adaptacin.

III-Accesibilidad en Internet: su problemtica
En la sociedad de la informacin en que nos hallamos inmersos, todas las personas deberan tener la
posibilidad de acceder a la informacin que nos ofrece Internet, sin que los usuarios con discapacidad sean
una excepcin.
Para ellos, este medio resulta muy interesante, ya que permite el acceso a diferentes recursos como
catlogos o bases de datos, tanto desde su propio domicilio como desde bibliotecas o centros de documentacin.
Pero lamentablemente, la situacin actual de Internet hace muy notoria la brecha digital entre los usuarios
que pueden acceder a la informacin digital y los que no, haciendo an mayor las dificultades que las personas
con algn impedimento tienen que sortear, para poder acceder a esta herramienta tan poderosa.
Los problemas ms graves que presenta Internet respecto a lo que Accesibilidad se refiere y que se van a
tratar en esta seccin, son:
nFalta de diseo universal en la Web,

nIncumplimiento de las normas de Accesibilidad, y
nProblemas con las Herramientas de Adaptacin.
Falta de Diseo Universal en la Web

Cuando el discapacitado interacta con sitios Web, se encuentra con un diseo general que es
predominantemente visual, y que en la mayora de las discapacidades que un ser humano pueda padecer,
perjudica y dificulta an ms la interaccin con el mismo.
Desde su concepcin, le es inherente a la Web, la utilizacin de elementos llamativos, con pginas que
incluyen animaciones, videos, elementos de control, marcos, tablas, sonido, texto parpadeante, imgenes de
fondo, y otras componentes que pueden poner en riesgo la accesibilidad del sitio.
Esto hace referencia, a que por ejemplo, las animaciones y los elementos titilantes no son adecuados para
algunas discapacidades mentales, o utilizar ciertas combinaciones de colores y contrastes no son aptos para
personas daltnicas o con disminucin visual.
Lo que se sugiere no es abolir los recursos visuales sino que estos no sean los nicos medios de
comunicacin provistos y que al menos vengan acompaados por texto para su descripcin y explicacin.
Se menciona al texto como una alternativa estndar, puesto que muchas herramientas informticas de
adaptacin proveen funcionalidad para convertir de texto a otros medios de comunicacin como sonido o
sistema Braille.
Como se ver ms adelante, las normas de accesibilidad son recomendaciones que hacen mucho hincapi
en la utilizacin de medios alternativos de comunicacin y de representacin de la informacin, como tambin,
en el uso del texto como una alternativa fundamental que debe estar siempre vigente.
Hasta el momento, la tendencia general es que el desarrollador Web apunte ms a proveer un mayor
impacto visual y poner en la interfaz la mejor artillera de avanzada que el lograr mejorar la audiencia, ampliar
la comunidad de usuarios destinataria y poder agradar a todos.
Pero esta conducta est cambiando o deber revertirse en poco tiempo. No se puede disear para la Web
con restricciones sino bajo un pensamiento universal que unifique a todos.
Adems, hay que tener bien en claro que uno no se puede apartar de la filosofa de la Web, que es
justamente compartir, publicar para todos, estar conectados globalmente, ms all del tiempo y del espacio.
Y, lo que se debe incluir en esa filosofa es que debe ser ms all de las condiciones fsicas o mentales
que tengamos.
Que Internet sea para Todos es una afirmacin que depende fundamentalmente del desarrollador Web.
Incumplimiento de las Normas de Accesibilidad

Otro problema que existe es que, aunque las pginas presenten una preponderancia del diseo visual,
si al menos cumplieran con ciertas normas de accesibilidad, se podra asegurar que el discapacitado pueda
accederla e interactuar con ella utilizando ciertas herramientas de adaptacin.
Por lo general las pginas no estn normalizadas, no respetan las distintas pautas de estandarizacin y
accesibilidad establecidas.
Profesionales y expertos de todo el mundo conformaron consorcios y organizaciones internacionales, la
mayora en Estados Unidos y Canad, las cules se ocupan de establecer y publicar normas de accesibilidad,
en pos de preparar y orientar a los desarrolladores Web en una cultura universal.
La ms importante es la organizacin WAI, de la W3C Consortium, que orienta y estructura el desarrollo
global de la WWW centrndose en el desarrollo tecnolgico, presenta recomendaciones y pautas para la
creacin de pginas accesibles.
Tambin trabajan en este campo, EASI (Equal Access to Software and Information), WeABLE, DOIT,
NCAM (National Center for Accesible Media), ATRC (Adaptive Technology Resource Centre de la Universidad
de Toronto), Include (Finlandia dependiente de la Unin Europea), Microsoft Enable, Starling Access Services
(Canad), entre otros.
A pesar que hubo avances e iniciativas en esta rea desde la dcada del 90, la existencia de estas normas
no es ninguna garanta de que los desarrolladores de hardware y software la respeten. Existe una falta de
inters, de conocimiento y de aplicacin de normas de accesibilidad por parte de los diseadores Web.
Entre los diversos factores que llevan a esta situacin de incumplimiento, se puede mencionar:
Causas posibles de Explicacin

incumplimiento de normas
de accesibilidad
Falta de legislacin nAn faltan muchos paises que cuenten con alguna legislacin
vigente la cul se ocupe o haga referencia al tema de la accesibilidad
en plataformas y sistemas informticos.
nEs sumamente necesario y ms an, en Internet, que se cuente
con normativas legales, para exigir a los desarrolladores a proveer
alternativas de diseo de su sitio, que sean accesibles.
nEn la seccin 4 de este Captulo se explicar con ms detalle
cuestiones de legislacin.
Desinters nLos diseadores y programadores Web, en su afn de lograr
sitios cada vez ms espectaculares, pasan por alto la problemtica
que presentan muchas discapacidades humanas y sus respectivas
normas de accesibilidad, incurriendo en un acto de discriminacin.
Problemas de Difusin nLos organismos encargados de establecer las distintas normas y
pautas de accesibilidad, carecen en cierto sentido, de la capacidad
de dar a conocer el valioso trabajo que estn realizando.
nLos estndares permanecen generalmente ocultos a la mayora de
los programadores.
Prejuicios Infundados nLa mayora de los diseadores Web, suponen que una pgina
adaptada a los diferentes tipos de discapacidades que pueda
presentar un usuario puede quitar esttica a la misma y ocasionar
su futuro fracaso.
nPero tales preconceptos son totalmente infundados puesto que un
sitio accesible permite el acceso a una mayor cantidad de usuarios.
Tabla 6.4: Causas posibles al Incumplimiento de Normas de Accesibilidad.
Debido a estas y otras posibles causas, resulta complejo incorporar de manera natural y universal los
estndares de accesibilidad, por ello la mayora de los sitios Web y pginas se ven posicionados en un lugar
de difcil acceso por parte de los discapacitados.
Problemticas con herramientas de adaptacin

Otro punto que el diseador Web por lo general omite en su proceso de desarrollo, es el anlisis de la
problemtica del discapacitado y del estudio de los diferentes recursos que el minusvlido puede utilizar en
pos de adaptar su PC para poder acceder a Internet.
El desarrollador debe tener en cuenta que pueden existir miles de personas que utilizan herramientas de
adaptacin, por lo que l debera en primer instancia conocer esta situacin y luego, evaluar el comportamiento
de su sitio frente a las mismas.
Estas personas discapacitadas, adems del tipo de afeccin o limitacin que tienen que padecer, deben
contar con las herramientas de adaptacin adecuadas y lidiar con los problemas que stas pueden acarrear,
al integrarlas y utilizarlas desde cada sitio, simplemente por el mero hecho de querer acceder a Internet.
Con datos recopilados directamente de los mismos usuarios afectados, como en forma indirecta,
incursionando entre las listas de discusin y preguntas frecuentes, se puede sintetizar la problemtica que
ellos afrontan respecto al uso de adaptaciones informticas, de la siguiente manera:
Problemas con las Explicacin
Herramientas de
Adaptacin
Problemas de nEl usuario discapacitado a veces debe sufrir complicaciones de
Incompatibilidad incompatibilidad entre las distintas herramientas que l instala en su
ordenador.
nTambin, la herramienta de adaptacin puede presentar
incompatibilidad con ciertas funciones del sistema operativo o con el
navegador subyacente, generando conflictos con los programas ya
instalados.
Generacin de Versiones nA medida que la tecnologa avanza, proporcionalmente se
ms avanzadas de un sitio desarrollan versiones de sitios ms complejos, que incluyen
componentes FLASH, estilos, applets, layers.
nMuchas veces, las herramientas que posee el discapacitado queda
obsoleta, teniendo que adquirir y aprender otras herramientas o
nuevas versiones de la misma.
Manejo Heterogneo de los nEl usuario discapacitado en su interaccin con sus diferentes
perifricos herramientas de adaptacin instaladas, ms el sitio que est
accediendo, debe recordar qu teclas usar, si se le permite o no usar
el teclado para acceder a los hipervnculos, qu dispositivo emplear
en un determinado momento.
nEsto se debe a que interacta con distintos tipos de softwares
desarrollados por diferentes personas o empresas.
Falta de ayudas o nParadjicamente, hay herramientas de adaptacin que tienen
tutoriales accesibles escasa ayuda, que es totalmente insuficiente y que adems no son
accesibles.
nLo mismo ocurre con los sitios Web que por lo general no incluyen
un buen sistema de ayuda, y que si lo hacen, tampoco presentan
caractersticas accesibles.
Problemas de Portabilidad nUn discapacitado puede contar con las mejores herramientas
auxiliares en su hogar, las cules pueden mejorar su calidad de
vida. Pero, qu pasa cuando esta persona intenta salir al mundo
exterior?. Los lugares de concurrencia masiva no estn preparados
en este sentido.
Tabla 6.5: Problemas con las Herramientas de Adaptacin.
Estos problemas que presentan muchas de las herramientas auxiliares pueden llegar a ser complicados
hasta para usuarios no discapacitados. La gravedad es an mayor, al tratarse de herramientas informticas
destinadas a personas minusvlidas, estos problemas se transforman en obstculos que son difciles de
enfrentar.
Esta es una realidad que est en manos del desarrollador Web en revertirla aunque sea incluyendo ya en
el sitio algunos servicios de adaptacin para ellos. Por ejemplo, si el sitio acompaa cada texto con mensajes
hablados, si para cada imagen hay una explicacin textual y oral de la misma, si la letra se puede ampliar, si
los colores se pueden configurar, si los videos estn subtitulados, entonces personas ciegas, sordas o con
otras problemticas podran acceder sin complicaciones y sin necesidad de instalar recursos extras.
Lo que se pretende en definitiva, es que as como el diseador est a la espera de nuevas tecnologas para
incorporarla en sus futuros sitios, que tambin est a la vanguardia de lo que va surgiendo en concepto de
Accesibilidad, desarrollando as sitios novedosos pero que adems estn aptos para discapacitados.
Importante
nHay que tener en cuenta que un sitio Web puede manifestar su capacidad de accesibilidad de dos
maneras:
-El sitio es diseado, desarrollado considerando recomendaciones de accesibilidad y es probado
teniendo en cuenta posibles herramientas de adaptacin, permitiendo el buen funcionamiento e
integracin de las mismas.
-El sitio se desarrolla desde cero, con medios alternativos de comunicacin, con funcionalidades
de adaptacin y configuracin necesarias, para que los manejen las personas con casi todo tipo
de discapacidad, sin necesidad de utilizar ningn tipo de accesorio.

IV- Legislacin sobre Accesibilidad
En cuesiones de legislacin y normas internacionales sobre Accesibilidad, existen varios pases que ya
impartieron leyes o reglamentos que colocan a la Accesibilidad en la Web como una obligacin legal. Ejemplos
de esto se encuentra la Seccin 508 de Estados Unidos, realizada en 1986 pero modificada en los aos
92 y 98, y la Ley 34/2002 de dicho pas sobre servicios de la sociedad de la informacin y de comercio
electrnico (LSSICE), que establece que las Administraciones Pblicas tomen las medidas necesarias para
que la informacin disponible en sus respectivas pginas de Internet, sean accesibles.
En Japn, se encuentra el programa e-Japan Priority Policy Program, confeccionado en el 2001, en Italia
se encuentra la legislacin Stanca Act y la BITV perteneciente a Alemania.
Espaa se caracteriza por ser el propulsor en esta temtica pues brind la primera norma existente en
todo el mundo, haciendo referencia a la creacin accesible de pginas Web. La primer norma fue la espaola
UNE 139802:1998 EX, denominada Informtica para la salud. Aplicaciones informticas para personas con
discapacidad. Requisitos de accesibilidad de las plataformas informticas. Soporte lgico. Esta norma fue
revisada y ampliada, dividindose en dos y dando lugar a las normas UNE 139802:2003 y UNE 139803:2004.
Actualmente, Espaa cuenta con AENOR que es un organismo para la Normalizacin y Certificacin y que
acta como el garante de la disponibilidad del documento y su estabilidad, asegurando un proceso formal de
cambio.
Por otra parte, cabe aclarar que aunque no se trata de una norma en s, la Unin Europea ha acordado
tomar como norma de facto las Directrices de Accesibilidad que produce la iniciativa WAI de la W3C. Estas se
explicarn en la seccin Guas de Accesibilidad de la W3C-WAI del presente captulo.
Muchas de estas normativas pertenecientes a diferentes Naciones, pueden tener concordancia. Por
ejemplo, las normas de AENOR garantizan plena compatibilidad con la WCAG 1.0 de la WAI, e incluso
contiene un anexo en el que se presenta la equivalencia entre los puntos de las normas espaolas y los de
dichas directrices.
Existe una Convencin sobre los derechos de las personas con discapacidad, aprobada por las Naciones
Unidas el 13 de diciembre de 2006. Fue abierta a la firma a partir del 30 de marzo de 2007, fecha en que fue
firmada por Argentina y debe ser ratificada por el Congreso Nacional.
La Convencin recoge la accesibilidad como uno de sus principios generales. Indica que los Estados que
forman parte de la misma, se obligan a asegurar y promover el pleno ejercicio de todos los derechos humanos
y las libertades fundamentales de las personas con discapacidad, sin discriminacin alguna por motivos de
discapacidad. A tal fin, en cuanto a la accesibilidad y participacin de las personas con discapacidad en la
Sociedad de la Informacin y del Conocimiento, se obligan especficamente a:
nEmprender o promover la investigacin y el desarrollo, y promover la disponibilidad y el uso de
nuevas tecnologas, incluidas las tecnologas de la informacin y las comunicaciones, ayudas para la
movilidad, dispositivos tcnicos y tecnologas de apoyo adecuadas para las personas con discapacidad,
dando prioridad a las de precio asequible;
nProporcionar informacin que sea accesible para las personas con discapacidad sobre ayudas a la
movilidad, dispositivos tcnicos y tecnologas de apoyo, incluidas nuevas tecnologas, as como otras
formas de asistencia y servicios e instalaciones de apoyo;
Por otra parte, el artculo 9 est completamente dedicado a la accesibilidad en general, lo que incluye la
accesibilidad en el medio fsico y la accesibilidad en los sistemas de informacin y comunicacin.
En Argentina, a fines del 2010 se aprob por unanimidad en la Cmara de Senadores de la Nacin la Ley
n26.653 sobre accesibilidad en los contenidos de pginas web, que obliga a las entidades gubernamentales
o dependientes de ella a proveer sitios accesibles a todos los usuarios.
Desde el Estado Nacional argentino, a travs del Decreto 378/2005 se aprobaron los lineamientos
estratgicos para el Plan Nacional de Gobierno Electrnico y los Planes Sectoriales, en donde se ha impulsado
notablemente el uso de las TICs -Tecnologas Informticas y de Comunicacin- aplicado a mejorar la gestin
y los servicios de la administracin pblica nacional, garantizar la transparencia, la participacin y facilitar el
acceso a la informacin pblica.
En base a esto, la ONTI, Oficina Nacional de Tecnologas de la Informacin de Argentina, entidad que brinda
el marco de apoyo, asesoramiento y delineamientos generales, gener un documento oficial, titulado Sitios
y Portales de Internet para la Administracin Pblica Nacional en donde da una serie de recomendaciones
a administradores y diseadores de sitios web pblicos, tratando especficamente el tema de usabilidad y
accesibilidad Web.
La ONTI adems es la entidad que debe asesorar, controlar y monitorear la aplicacin de la Ley n26.653
mencionada anterioremnte.

En la actualidad, hay una gran variedad de documentos tcnicos que abordan la problemtica del acceso
a la Informtica por parte de personas con discapacidad y ofrecen diferentes soluciones para la accesibilidad
a plataformas informticas. Pero este tipo de documentos suelen ser internos a los propios entornos que los
generan, suelen tener dificultades de difusin, sufren cambios con bastante frecuencia, crecen en demasiada
e inmanejable documentacin o resultan difciles de conseguir.
En cambio, lo que se intenta realizar desde los organismos internacionales que tratan el tema de
Accesibilidad, es la estipulacin de normas que permiten un mayor grado de estandarizacin y centralizacin.
Una norma es un documento pblico al que pueden consultar todas las personas interesadas en el acceso
a la ltima informacin. El organismo normalizador pertinente, es el garante de la disponibilidad del documento
y su estabilidad asegurando un proceso formal de cambio.
Adems, poniendo las miras un poco ms lejos, si algn da se consiguiera promulgar una ley que
garantizara la accesibilidad a la informtica a todos los ciudadanos argentinos, resultara conveniente tener
una normativa ya desarrollada, sobre la que se pudiera apoyar la ley.
Por lo tanto, el objetivo de la definicin de normas es doble, conseguir un documento formalmente estable
y preparar el camino a una posible legislacin futura.
Importante
nEs importante aclarar que los repertorios de normas o guas de recomendaciones de accesibilidad
deben considerarse en los diferentes estados de gestacin del software, en el diseo, implementacin
y evaluacin.
Principios generales de Accesibilidad

Debido a la cantidad considerable de normas de accesibilidad que se publican para la Web, aqu se va a
realizar una seleccin de las ms importantes y van a estar organizadas mediante el siguiente esquema:
nPrincipios de Accesibilidad para el Software: aqu, se analizarn las normas que est dirigidas a las
aplicaciones en general. Hay que tener en cuenta que el navegador como el mismo sitio, si es que
tiene una aplicacin subyacente, estara encuadradas dentro de esta categora.
nPrincipios de Accesibilidad especficas para el Sitio Web: aqu se van a tratar las reglas de diseo
tanto a nivel de sitio como a nivel pgina.
nPrincipios de Accesibilidad especficos a HTML: aqu se van a mencionar las normas de accesibilidad
de acuerdo a las diferentes componentes que pueden conformar una pgina HTML. Se va a considerar
especficamente, la accesibilidad en Listas,Tablas, Imgenes y grficos de datos, Objetos Multimedia
y otras Componentes.
Hay que tener en cuenta, que una norma puede estar diseada para beneficiar ms a un tipo de discapacidad
que a otra. Por lo tanto, cuando se mencionen cada una, se va a especificar para qu grupo de discapacitados
hace referencia. Se va a utilizar una convencin o nomenclatura para clasificar los distintos impedimentos que
un ser humano pueda sufrir. La tabla 6.6 muestra esta nomenclatura.
Las normas de accesibilidad tienen como principal objetivo incentivar al diseador Web, en una cultura
universal de diseo. La mayora de ellas, apuntan principalmente, a disear el sitio con determinados principios
que garanticen que el mismo, pueda ser utilizado correctamente por las herramientas de adaptacin que usan
las diferentes personas discapacitadas.
Nomenclatura sobre Explicacin
Tipos de Discapacidades
LF nIncluye a personas con limitaciones motrices.
LP nEspecifica al grupo de personas con limitaciones psquicas.
LA nHace referencia a personas con limitaciones auditivas de leves a
moderadas.
LS nIncluye a personas con limitaciones auditivas severas.
LV nIncluye a personas con limitaciones visuales.
LC nIncluye a personas que sufren ceguera.
LSC nHace referencia a personas sordo-ciegas.
Tabla 6.6: Nomenclatura para Referenciar las distintas Discapacidades.
Principios de Accesibilidad para el Software
Estos principios de accesibilidad se pueden aplicar sobre cualquier software en general. En el contexto
de la Web, serviran para aplicarlas dentro del navegador como tambin para todo sitio que tenga alguna
aplicacin subyacente.
Dentro de estas normas, se encuentran reglas que hacen referencia a la accesibilidad de ciertas
componentes de interaccin generales como ser botones de accin, ventanas, mens, feedback, entre otros.
No tiene alcance sobre cuestiones ms especficas como la codificacin en HTML.
Los principios que se pueden aplicar a cualquier aplicativo para que aseguren un nivel de accesibilidad,
son:
Normas de Accesibilidad Generales Tipo de Discapacidad

que hace referencia
nLa visualizacin de la informacin en la pantalla, como la nLF, LP, LA, LS

interpretacin de la misma, no debe estar sujeta a requisitos
temporales. No se puede fijar un tiempo determinado para la
lectura de la informacin.
nSi estos requisitos temporales existieran, debe ofrecerse la
posibilidad de configurar el tiempo asociado.
nNo imponer la reaccin del usuario en un tiempo mximo nLF, LP, LA, LS
predeterminado. Tales mecanismos afectan el acceso
a personas con limitaciones motoras en los miembros
superiores.
nLa informacin en pantalla no debe ser transmitida a travs nLV
de los colores o la forma de sus elementos.
nCuando exista una forma de visualizacin de textos, como nLV, LC, LSC
ser a travs cuadro de textos, se debe poder recorrer con el
cursor su contenido.
nSe debe evitar el uso de grficos que tengan dibujado el nLC, LSC
texto como parte de ellos.
nEl texto debe ser independiente del grfico de fondo, as
podr ser accedido por las herramientas de adaptacin.
nTodos los botones deben tener asociada una etiqueta de nLV, LC, LP, LSC
texto y se debe facilitar una opcin para que slo se vea la
etiqueta.
nTodas las funciones que se pueden realizar en la aplicacin a nLF
travs del ratn deben tambin ser accesibles por teclado.
nTodos los mens deben ser accesibles desde el teclado, nLF
incluyendo su activacin y el movimiento por sus opciones
nLos mens de la aplicacin deben ser circulares, es decir, nLF, LV, LC, LSC
al alcanzar el ltimo elemento se debe pasar al primero y
viceversa.
nEste sistema de movimiento circular debe aplicarse tambin
a los diferentes sectores de la ventana, recorrido de opciones,
mens, barras de herramientas o de hipervnculos.
nLas barras de herramientas, paletas, cajas de dilogo o nLF
cualquier otro elemento de la interfaz, deben ser accesibles por
teclado y tener etiquetas textuales, aunque sea opcionales.
nEl manejo de las ventanas deben posibilitar el ajuste de nLF
su tamao y localizacin en pantalla tambin accesibles por
teclado.
nSi se debe realizar acciones simultneas, como mantener nLF
apretada una tecla mientras se pulsa otra, se debe
proporcionar un mtodo alternativo ms simple, para lograr lo
mismo.

nSe deben emplear medios alternativos para expresar el nLA, LS
feedback, aunque sean opcionales. Por ejemplo, cualquier
aviso o alarma sonora debe proporcionarse en forma visual y
textual.
nEl feedback multimedial debe producirse inmediatamente nLP, LV, LC, LSC
despus de que ocurra el evento que la genera, para evitar
confusiones.
nSe debe ofrecer funciones que permitan manejar los distintos nLF, LP, LA, LS, LV, LC, LSC
medios alternativos de comunicacin, como tambin realizar
conversiones entre ellos. Por ejemplo, permitir la posibilidad de
enviar a salida de audio cualquier informacin textual.
nLas caractersticas de accesibilidad de los navegadores nLF, LP, LA, LS, LV, LC, LSC
debern cumplir los mismos requisitos que cualquier otro
programa de usuario
nLas aplicaciones provistas dentro de los sitios Web, como nLF, LP, LA, LS, LV, LC, LSC
ser programas CGl, Java, applets, scripts, entre otros, debern
cumplir los mismos requisitos de accesibilidad que cualquier
otro programa de usuario.
Tabla 6.7: Principios de Accesibilidad para el Software.
Principios de Accesibilidad Especficas para sitio Web

El sitio Web, al ser una clase especial de software, debe cumplir con las normas generales de accesibilidad,
mencionadas en la seccin anterior. Pero, adems cuenta con su propio repertorio de normativas.
Se van a presentar las normas de accesibilidad ms importantes a nivel de sitio y a nivel de pgina, que se
encuentran en las tablas 6.8 y 6.9 respectivamente. Accesibilidad a Nivel de Sitio:
Normas de Accesibilidad a Nivel de Sitio Tipo de Discapacidad

Destinataria
nEstablecer un diseo general del sitio simple, prolijo, que siga LF, LP, LA, LS, LV, LC, LSC
una lnea de definicin y lgica de organizacin.
nUsar una estructura de navegacin clara, consistente nLF, LP, LA, LS, LV, LC, LSC
permanente en todo el sitio.
nOfrecer una barra de navegacin, que pueda ser expresada nLF, LP, LA, LS, LV
alternativamente como texto.
nEspecificar el idioma en el que esta escrito el sitio. nLF, LP, LA, LS, LV, LC, LSC
nProveer una descripcin del sitio y cmo se navega por l, nLF, LP, LA, LS, LV, LC, LSC
mediante un mapa del mismo.
nProveer versiones del mapa mediante distintos medios de
comunicacin.
nAsegurar que todos los elementos y componentes del sitio, nLF, LP, LA, LS, LV, LC, LSC
puedan ser operados desde el teclado estndar como tambin
de dispositivos adaptados.
nCada hipervnculo debe tener una identificacin nica, nLF, LP, LA, LS, LV, LC, LSC
que pueda ser interpretada mediante diferentes medios de
comunicacin.
nUsar listas verticales de enlaces y que se encuentren fuera nLF, LP, LA, LS, LV, LC, LSC
de los prrafos.
nQue cada enlace tenga una explicacin acotada y nLF, LP, LV, LC, LSC
significativa, pues esta informacin es la que podr captar la
herramienta de adaptacin que el discapacitado tenga.
nColocar espacios o caracteres separando cada hipervnculo. nLV, LC, LP
nLos enlaces deben estar agrupados por una lgica de nLF, LP, LA, LS, LV, LC, LSC
organizacin que sea clara y coherente.
Tabla 6.8: Principios de Accesibilidad a Nivel de Sitio.
Normas de Accesibilidad a Nivel de Pgina Tipo de Discapacidad
Destinataria
nLas pginas deben cumplir las normas de accesibilidad o nLF, LP, LA, LS, LV, LC, LSC
ser construidas de tal manera que puedan ser normalizadas
fcilmente por servicios que cumplen tal fin.
nEvitar fondos en mosaicos llamativos ya que el texto puede nLP, LV
oscurecerse, ni utilizar colores oscuros, ni brillantes.
nOfrecer un alto grado de contraste entre el texto y el fondo.
nEvitar texto parpadeante o con algn otro efecto visual nLV, LC, LP
molesto. Evitar efectos de marquesinas.Dificulta la lectura y
hasta puede provocar ataques de epilepsia.
nOfrecer informacin adicional al comienzo de los prrafos, nLF, LP, LV, LC, LSC
listas encabezados, etc.
nUsar los encabezados (H1, H2, H3, etc.) para expresar la nLF, LP, LA, LS, LV, LC, LSC
estructura de la pgina. No usarlos solo para definir tipografas
en diferentes tamaos o estilos.
nSe debe evitar el uso de textos verticales, emoticones, nLV,LC,LP
fechas abreviadas.
nProveer ttulos y aclaraciones a cualquier agrupamiento de nLV,LC,LP
informacin, como ser captulos, secciones, como tambin
acrnimos y abreviaturas.
Tabla 6.9: Normas de Accesibilidad a Nivel de Pgina.
Principios de Accesibilidad especficos a HTML

En esta seccin, se van a listar las normas de accesibilidad ms importantes que se aplican a cada
componente, que pueda conformar una pgina HTML. Por lo tanto, se tratar la accesibilidad especficamente
en las listas de opciones, tablas, imgenes, otros objetos multimedia, y dems elementos. Cada una de ellas
se explicarn en tablas independientes que van desde la tabla 6.10 hasta la tabla 6.15.
Normas de Accesibilidad para Listas Tipo de Discapacidad

Destinataria
nIncluir un ttulo descriptivo de la lista. nLF, LP, LA, LS, LV, LC, LSCLC, LP
nRotular numricamente los elementos de la lista para facilitar nLP, LV
su ubicacin, tambin en el caso de las listas anidadas.
nPor ejemplo: rotular el primer nivel con nmeros y los
subitems con letras, o rotular en forma jerrquica: 1, 1.1, 1.2,
1.2.1
nIncluir un salto de lnea entre los elementos de la lista, para nLF, LP, LA, LS, LV, LC, LSC
diferenciar bien cada tem.
nLa lista debe poder ser manipulada por el teclado, mouse o nLF, LP, LA, LS, LV, LC, LSC
cualquier otro dispositivo de sealamiento.
nFinalizar todas las sentencias, encabezados, tems de lista nLF, LP, LV, LC, LSC
con algn smbolo de puntuacin apropiado, para ayudar a
interpretarlas.
Tabla 6.10: Normas de Accesibilidad para Listas.
Normas de Accesibilidad para Tablas Tipo de Discapacidad

Destinataria
nUtilizar las tablas slo para diagramar contenido, no para nLV, LC
sectorizar la pgina.
nUtilizar encabezamiento de fila y columna en forma nLF, LP, LA, LS, LV, LC, LSC
consistente. No usarlos para alterar tipografa o alineacin.

nSi una tabla tiene dos o mas filas de ttulos, usar marcas nLF, LP, LA, LS, LV, LC, LSC
jerrquicas para identificarlas.
nAsegurarse de que la informacin tenga sentido si se la lee nLP, LV, LC, LSC
lnea por lnea a travs de la tabla.
nEsto es debido a que algunos Lectores de Pantalla o Texto
pronuncian la informacin lnea por lnea.
nAcompaar la tabla con un hipervnculo a una pgina que nLP, LV, LC, LSC
contenga una versin lineal y textual de la informacin.
TABLA 6.11: Normas de Accesibilidad para Tablas.
Normas de Accesibilidad para Imgenes Tipo de Discapacidad

Destinataria
nLos grficos internos (formato GIF) o grficos que necesiten nLV, LC, LP
visualizadores externos (JPEG), deben incluir un texto
alternativo que describa su contenido.
nLos caracteres alfanumricos contenidos dentro de las
imgenes y los grficos, no deben reemplazar el texto
alternativo.
nLas imgenes utilizadas como vietas deben llevar como nLF, LP, LA, LS, LV, LC, LSC
texto alternativo un asterisco (*). Esta es una convencin
difundida internacionalmente.
nDar nombre a los archivos que tengan relacin con su nLF, LP, LA, LS, LV, LC, LSC
contenido.
nSi el contenido de una imagen o el grfico es muy nLP, LV, LC, LSC
importante, se debe hacer un resumen del mismo en otra
pgina y enlazarla utilizando un hipervnculo.
nSi se utilizan mapas sensibles hay que poner una lista de nLP, LV, LC, LSC
todos los enlaces a los que se puede acceder a travs de l, o
se puede dar una pgina alternativa en modo texto.
Tabla 6.12: Normas de Accesibilidad para Imgenes y Grficos de Datos.
Normas de Accesibilidad Objetos Multimedia Tipo de Discapacidad
nLas piezas de audio que vayan en una pgina debern tener nLV, LC, LP
un enlace a una pgina con descripcin textual del mismo.
nIncluir un texto alternativo que provea una descripcin nLF, LP, LA, LS, LV, LC, LSC
general de la animacin utilizada.
nEsta norma se aplica a los siguientes formatos: Gif
animados, Videos, Animaciones mediante scripts o applets.
nCada vez que se incluyan elementos sonoros, indicar su nLA, LS
aparicin y funcin con algn elemento visual.
nDar relato en modo texto en forma sincronizada.
nIncluir como opcin para el usuario, el subtitulado o una nLA, LS
transcripcin de los elementos de sonido y voz del vdeo.
Tabla 6.13: Normas de Accesibilidad para Objetos Multimedia.
Normas de Accesibilidad para Mapas de Tipo de Discapacidad

Imgenes
nToda rea activa de la imagen debe poseer un texto nLV, LC, LP
alternativo que describa el hipervnculo al que enlaza.
nHacer que los hipervnculos sea accesibles para personas nLF, LP, LA, LS, LV, LC, LSC
con discapacidad visual mediante el desplazamiento con la
tecla Tab o flechas.
nUsar solo mapas de tipo cliente. nLA, LS
nSi no se ha logrado una versin accesible del mapa de nLA, LS
imagen como opcin alternativa o adicional, se puede:
- Crear en algn lugar de la pgina una lista en
formato texto de todos los hipervnculos provis-
tos mediante el mapa de imgenes.
- Agregar un texto alternativo de toda la imagen
que sostiene el mapa indicando, por ejemplo,
mapa de imagen, ver abajo lista de vnculos.
TABLA 6.14: Normas de Accesibilidad para Mapas de Imgenes.
Normas de Accesibilidad para otras Tipo de Discapacidad

Componentes
nSi se utilizan hojas de estilo, organizar los documentos de nLF, LP, LA, LS, LV, LC, LSC
modo que puedan ser ledos de forma comprensible, aun si el
navegador no soporta esta caracterstica.
nPermitir definir estilo por lector.
nLos formularios deberan estar acompaados de una nLP, LV, LC, LSC
informacin de audio.
nEn los formularios se debe poner la etiqueta a la izquierda nLC
y alineada horizontalmente con la primera lnea de campo de
entrada o visualizacin de datos.
nCon respecto a los marcos, se recomienda minimizar o evitar nLV, LC, LP
el uso de los mismos.
nEs conveniente colocar para cada marco el atributo title o nLF, LP, LA, LS, LV, LC, LSC
name. Adems, debe referenciar a un archivo html.
Tabla 6.15: Normas de Accesibilidad para otras Componentes
Importante
nEn estas secciones, se detallaron principios de diseo ms importantes que inducen a garantizar
la accesibilidad tanto en un software general como especfico a un sitio Web.
nSe pretende que el sitio siga funcionando bien y que la informacin est disponible, aunque sea
operado por distintos dispositivos de interaccin o mediante herramientas de adaptacin.
nVale destacar la gran importancia que se concede a la utilizacin de medios alternativos segn el
caso de discapacidad en cuestin.
Recomendaciones de Accesibilidad de la W3C-WAI

En esta seccin, se van a explicar una serie de pautas de accesibilidad publicadas por la Iniciativa de
Accesibilidad en la Web -WAI-, rea perteneciente al Consorcio Internacional de la W3C.
Estas pautas conforman una Gua de Accesibilidad para Contenido Web, la misma es comnmente
referenciada por WCAG, que son las iniciales en ingls de Web Content Accessibility Guidelines. Actualmente,
se encuentra la versin WCAG 1.0, que estuvo vigente desde el ao 1999 y una nueva versin WCAG 2.0 que
fue lanzada en abril de 2008.
El objetivo de la elaboracin de estas Guas de Accesibilidad, es apuntar a una especificacin de diseo
universal explicando cmo hacer accesible el contenido de los sitios Web y promover su utilizacin en pos
de lograr mayor funcionalidad y universalidad. Conforma un documento estable y puede ser utilizado como
material de referencia por parte de los desarrolladores de contenidos de la Web, creadores de pginas y
diseadores de sitios, como tambin para los desarrolladores de herramientas de creacin.
El respetar estas pautas har la Web ms accesible para todos los usuarios incluyendo las personas que
sufren alguna discapacidad, como para aquellas que utilizan diferentes aplicaciones de usuario, que acceden
desde distintos navegadores y desde diferentes dispositivos, mediante acceso mvil como celular o PALMS,
desde el auto. Tambin facilitar el acceso a aquellos usuarios que se conectan a Internet con recursos
limitados, como monitores blanco y negro, conexiones telefnicas lentas, entorno de manos libres o alguna
otra condicin no ptima, que generalmente no son consideradas en el momento de disear una pgina Web.
Cabe aclarar que estas pautas no desalientan a los desarrolladores en la utilizacin de imgenes, vdeo,
ni de otros recursos multimediales, por el contrario explican cmo hacer los contenidos multimedia ms
accesibles a una amplia audiencia.
El documento WCAG 1.0, es parte de una serie de pautas de accesibilidad publicadas por la WAI, que
incluye su nueva versin WCAG 2.0, como tambin las Pautas de Accesibilidad de las Aplicaciones de Usuario
WAI-User Agent y las Pautas de Accesibilidad para Herramientas de Creacin WAI-Autools.
En las secciones siguientes, se van a explicar en rasgos generales, las caractersticas de la Gua de
Accesibilidad WCAG 1.0 y su nueva versin, la WCAG 2.0.
WCAG 1.0
Descripcin:
La Gua de Accesibilidad para Contenido Web WCAG 1.0, es un documento conformado por 14 pautas o
normas de accesibilidad recomendadas por la WAI.
Las pautas tratan los aspectos de accesibilidad y proporcionan soluciones de diseo. Intentan que el
desarrollador Web considere otras situaciones y otros contextos que el usuario puede estar inmerso en el
momento de acceder al sitio Web y que no sean justamente circunstancias ideales.
Estas pautas se fundamentan en base a dos aspectos generales: asegurar una transformacin correcta,
que se tratan principalmente en las pautas 1 a 11, y hacer el contenido comprensible y navegable, recogido
por las pautas 12 a 14.
El asegurar una transformacin correcta significa construir el sitio de tal manera que permita la viabilidad
de su utilizacin bajo diferentes circunstancias. Apunta principalmente a:
nque el desarrollador separe el contenido de la estructura y de la presentacin, utilice las etiquetas
en su concepcin original, trabaje con independencia de dispositivos. Esto ltimo se refiere a que las
pginas deben poder ser usadas por personas que no dispongan de ratn, con pantallas pequeas,
de baja resolucin, en blanco y negro, etc.
nimpulsar el resurgimiento del texto, puesto que pueden ser interpretados por la mayora de los
mecanismos de navegacin y de los diferentes recursos de hard y software. El texto puede ser
presentado al usuario como una voz sintetizada, en braille y en texto visible.
nconsiderar la importancia de medios alternativos, o sea crear sitios que funcionen mediante diferentes
canales de comunicacin, as el lector que puede tener distintas capacidades sensoriales, pueda
acceder a la informacin.
Respecto a hacer comprensible y navegable el contenido, se refiere a promover un lenguaje claro,

proporcionar mecanismos de navegacin simples, proveer informacin de orientacin y contexto, para evitar
que el usuario se desoriente o se retrase en el acceso a la informacin.
Contenido de la Gua WCAG 1.0:

Como se menciona anteriormente la recomendacin WCAG 1.0, est organizada por 14 normas o pautas
de accesibilidad que constituyen los principios generales para alcanzar el diseo accesible de un sitio Web. A
continuacin se van a presentar cada una de ellas con una breve descripcin:
1. Proveer medios alternativos equivalentes: esta pauta recomienda el uso de texto para todo
elemento no textual, proporcionar descripciones auditivas a la presentacin especficamente visual,
subtitular vdeos o pelculas presentes en la pgina Web, etc.
2. No depender del color, forma o imagen para expresar contenido: aqu la gua sugiere que toda
informacin transmitida a travs del color, tambin est disponible sin l, que los colores utilizados entre
el fondo y el primer plano tengan buen contraste o tambin, que el contenido se perciba correctamente
en monitores blanco y negro, etc.
3. Usar hojas de estilo y marcado apropiadamente: la W3C sugiere utilizar hojas de estilo para
controlar la presentacin de los documentos Web como tambin crear documentos vlidos a nivel
de gramticas formales publicadas. Se recomienda en esta pauta utilizar unidades relativas en los
valores de los atributos o propiedades, para que se vean correctamente desde cualquier resolucin de
monitor.
4. Aclarar los lenguajes utilizados: aqu se recomienda aclarar el idioma principal del documento
como tambin identificar claramente los cambios de idioma que existan dentro del contenido Web.
5. Proveer tablas accesibles: en este punto, la gua WCAG 1.0 sugiere utilizar las tablas slo para lo
que originalmente fueron concebidas, es decir para representar en forma tabular la informacin. No se

admite utilizarlas para diagramar o sectorizar una pgina.
6. Asegurar que las pginas que utilizan nuevas tecnologas se transformen correctamente: esto
significa que si el sitio trabaja con hojas de estilo, scripts, applets u otros objetos, tambin pueda ser
ledo correctamente en caso que el navegador no acepte dichas tecnologas.
7. Asegurar control del usuario en contenido que depende de cambios temporales: esta pauta apunta
principalmente a evitar destellos, parpadeos, movimientos continuos en pantalla que el usuario no
pueda controlar.
8. Asegurar accesibilidad en interfaces del usuario incrustadas: aqu se refiere a que el desarrollador
Web debera trasladar todas estas recomendaciones de accesibilidad a elementos de programacin
como applets, scripts que estn incorporados en la pgina.
9. Disear para independencia de dispositivos: esta norma promueve el acceso independiente del
dispositivo, o sea que el sitio pueda ser usado con otros dispositivos que no sea slo el ratn y la
pantalla. Adems se debe asegurar que el sitio pueda ser operado correctamente a travs del teclado.
10. Usar soluciones generales o perpetuas de accesibilidad: esta pauta tiene por objetivo que el sitio
Web pueda ser operado correctamente tanto desde diferentes herramientas de adaptacin como
desde los navegadores ms antiguos.
11. Usar las guas y tecnologas recomendadas por la W3C: la W3C a travs de un proceso consensuado
lista las tecnologas recomendadas. Por ejemplo, sugiere utilizar documentos en formato HTML, o TXT
en vez de DOC o PDF, para evitar exigir al lector tener instalado productos de software especficos.
12. Proveer informacin de contexto y de orientacin: aqu se recomienda la utilizacin correcta de
ttulos, agrupamientos, etiquetas, de informacin de contexto.
13. Proveer claros mecanismos de navegacin: esta pauta sugiere proporcionar mecanismos de
navegacin claros y coherentes, informacin de orientacin, barras de navegacin, mapa del sitio,
entre otros, para incrementar la probabilidad de que una persona encuentre fcilmente lo que est
buscando dentro del sitio.
14. Asegurar que los documentos sean simples y claros: esto apunta a que la estructura de las pginas
sea coherente, que los grficos sean reconocibles e incluyan una descripcin y que el lenguaje sea
fcilmente comprensible.
Cada una de estas pautas presenta puntos de verificacin que son principios de diseo ms especficos
que describen la misma. Los puntos de verificacin de una norma, tienen asignada una prioridad que puede
ser entre 1 y 3.
El significado de las prioridades es el siguiente:

nLa prioridad 1: significa que ese punto de verificacin tiene que ser cumplido por el desarrollador
de contenidos.
nLa prioridad 2: se refiere a que el punto de verificacin debe ser cumplido.
nLa prioridad 3: presenta el menor nivel de exigencia, indicando que el punto de verificacin puede
ser cumplido por el sitio Web.
Cada punto de verificacin pretende ser lo suficientemente especfico, como para que cualquiera que
revise una pgina o sitio pueda comprobar que dicho punto haya sido satisfecho.
Es importante aclarar que la WAI incluye un documento adicional, titulado Tcnicas para las Pautas de
Accesibilidad al Contenido en la Web 1.0 que explica cmo aplicar los puntos de verificacin de cada norma.
El mismo trata cada punto de verificacin con ms detalle y proporciona ejemplos usando el Lenguaje de
Marcado de Hipertexto (HTML), las Hojas de Estilo en Cascada (CSS), el Lenguaje de Integracin Multimedia
Sincronizada (SMIL) y el Lenguaje de Marcado Matemtico (MathML). Este documento se encuentra disponible
en el sitio http://www.discapnet.es/web_accesible/wcag10/WAI-WEBCONTENT-19990505_es.html#ref-
TECHNIQUES y ha sido diseado para seguir los cambios en la tecnologa y es de esperar que sea renovado
con frecuencia.
Niveles de Conformidad o Adecuacin:

Una vez que el desarrollador Web consider, analiz y aplic las normas de accesibilidad en su sitio Web,
puede incorporar una identificacin que indique que su sitio es accesible.
La WAI presenta una serie de niveles de conformidad o adecuacin de accesibilidad, de acuerdo a las
prioridades de los puntos de verificacin que se hayan cumplido. Esto es:
nAdecuacin de nivel A (A): se satisfacen todos los puntos de verificacin de prioridad 1.
nAdecuacin de nivel Doble A (AA): se satisfacen todos los puntos de verificacin de prioridad 1 y 2.

nAdecuacin de nivel Triple A (AAA): se satisfacen todos los puntos de verificacin de prioridad 1, 2
y 3.
WCAG 2.0
Descripcin:
La gua de accesibilidad WCAG 2.0, intenta sustituir, ampliar y mejorar a la especificacin 1.0, versin
vigente desde 1999. La misma consta de una serie de documentos y recursos que comprende, entre otros,
las pautas, listas de comprobacin, documentos para la comprensin de WCAG, tcnicas para la correcta
aplicacin en diversos casos de uso.
En esta gua, la W3C asegura que se alcanz un mayor consenso que la primera vez que se realizaron las
WCAG 1.0, teniendo mucho ms en cuenta las aportaciones de las personas con discapacidad.
La WCAG 2.0 es ms robusta, fcil de evaluar, y soporta ms tipos de informacin que su versin anterior.
Otra importante diferencia frente a ella, es la neutralidad tecnolgica.
La WCAG 1.0 se basa fundamentalmente en escenarios con HTML, mientras que en esta nueva versin, se
intenta dar respuesta a un mayor nmero de situaciones y aplicaciones, independientemente de la tecnologa
empleada.
Contenido de la Gua WCAG 2.0:

La WAI sostiene en su alegato que existen hoy en da muchas personas y organizaciones que utilizan las
guas WCAG como referente normativo, incluyendo a diseadores y desarrolladores Web, alumnos, docentes,
encargados de formular polticas, entre otros.
Con el objeto de solventar las diferentes necesidades de cada perfil, se provee una organizacin de la gua
en capas de recomendacin, las cuales incluyen principios generales, pautas, criterios de comprobacin y un
conjunto de tcnicas obligatorias y de asesoramiento.
Tambin incluye documentacin sobre errores comunes, acompaado de ejemplificaciones, hipervnculos
a recursos y lneas de cdigo.
Las capas mencionadas son:
Niveles en Capas de la WCAG Explicacin

2.0
Principios La WCAG 2.0 se funda en 4 principios de diseo, que son:
nPerceptibilidad, en el sentido de promover contenido que sea visible,
aparente.
nOperabilidad, o sea asegurar que los elementos de la interfaz
permitan una correcta interaccin.
nComprensin que hace referencia a proveer contenido y controles
que sean claros, simples y semnticamente ricos.
nRobustez: en pos de asegurar que el contenido Web sea lo
suficientemente consistente como para permitir su uso con las
tecnologas actuales, anteriores y las venideras.
Las Pautas nDebajo de los principios, se encuentran las pautas. Estas son en total
12 normas que proveen los objetivos bsicos con que el desarrollador
debe trabajar para garantizar el contenido Web accesible.
nEstas normas proveen un marco terico que no se puede testear,
por ende, constituyen el cimiento para poder entender los criterios e
implementar mejor las tcnicas propuestas.
Criterios de comprobacin nCada pauta tiene asociado un conjunto de criterios de xito o de
comprobacin.
nSon 60 criterios en total que se deben cumplir y que tienen como
caractersticas que s son comprobables o testeables.
nEstn ordenados segn su nivel de cumplimiento asociado.
-El nivel 1 o A significa que el criterio ha sido cumplido con los
requisitos mnimos,
- El nivel 2 o AA y
- El nivel mayor de cumplimiento es el nivel 3 o AAA,
nCada criterio cuenta adems con informacin sobre ejemplos,
errores comunes y un conjunto de tcnicas para resolverlos. Las
tcnicas conforman la cuarta capa de recomendacin.
Tcnicas obligatorias y de nPara cada norma y criterio de comprobacin, la WCAG 2.0 presenta
asesoramiento una serie de tcnicas
nLas cules pueden ser:
- las tcnicas obligatorias que son suficientes como para alcanzar
el criterio de xito y
-las tcnicas de asesoramiento que van ms all de lo que se
requiere objetivamente, las mismas no son testeables y su utilidad
depende del contexto y circunstancia en que se las emplee.
Tabla 6.16: Capas de la Gua de Accesibilidad WCAG 2.0
Partiendo de 4 principios bsicos, la W3C organiza la Gua WCAG 2.0 como una jerarqua de elementos
de distintos niveles de abstraccin.
Los criterios de comprobacin que pertenecen a las pautas y stas a su vez a alguno de los 4 principios,
estn compuestos de tcnicas y son elementos bsicos para comprobar la accesibilidad y poder determinar el
nivel de cumplimiento de la misma.
Por la neutralidad de la tecnologa atribuida a la WCAG 2.0, de alguna manera con la cuarta capa, la de
las tcnicas, se alcanza la especificidad y ejemplificacin necesarias para cada tecnologa particular. Hay
tcnicas generales, pero tambin hay tcnicas para HTML y XHTML, CSS, tcnicas para Scripting del lado del
cliente, del lado del servidor, entre otros.
Niveles de Conformidad o Adecuacin:

Existen tres niveles de conformidad:
nWCAG 2.0 Nivel A: cuando se cumplen todos los criterios de xito de nivel 1 (A) de todas las
directrices o se proporciona una versin alternativa conforme al nivel A.
nWCAG 2.0 Nivel AA: cuando se cumplen todos los criterios de xito de nivel 1 (A) y de nivel 2 (AA)
de todas las directrices, o se proporciona una versin alternativa conforme al nivel AA.
nWCAG 2.0 Nivel AAA: cuando se cumplen todos los criterios de xito de nivel 1 (A), de nivel 2 (AA)
y de nivel 3 (AAA) de todas las directrices, o se proporciona una versin alternativa conforme al nivel
AAA.
La W3C brinda un documento comparativo entre las dos versiones de la WCAG, denominado Comparacin
de los puntos de verificacin de la WCAG 1.0 y la WCAG 2.0, el mismo se encuentra en la direccin URL:
http://www.w3.org/TR/2006/WD-WCAG20-20060427/appendixD.html
VI- Comprobacin de la Accesibilidad

Los consorcios internacionales como la WAI, recomiendan adems de las Guas de Accesibilidad, la
utilizacin de herramientas automticas para evaluar la accesibilidad de los sitios Web. Las mismas son
referenciadas con el nombre de validadores o revisores de Accesibilidad.
Estos revisores son aplicativos que toman un sitio Web, lo analizan respecto a determinadas normas con
las cules trabajan y dan un reporte sobre los errores encontrados y principios que se han infringido.
Existen un gran nmero de estas herramientas las cules presentan diferentes caractersticas que deben
ser consideradas en un proceso de seleccin.
En primera medida, hay que considerar con qu normativas trabaja la herramienta. Si considera las normas
WCAG 1.0, las WCAG 2.0, las de Seccin 508 o sigue los estndares de Japn, de Italia, u otros. Hay
que analizar los tipos de tecnologas Web que soporta, si simplemente HTML y XHTML, o aquellas ms
sofisticadas como SMIL, SVG, o MathML.
Es fundamental tener conocimiento si es una herramienta de software libre o es un producto propietario.
Tambin, verificar qu plataforma soporta y cmo se puede integrar dentro del ambiente de desarrollo
utilizado, si mediante plug-ins en el navegador o como utilitarios dentro del editor o sistema de administracin
de contenido Web.
Tambin, hay que analizar el tipo de soporte que brinda la herramienta respecto al chequeo de errores, si
genera reportes o no, si muestra a travs de feedback visual conos o remarca las etiquetas errneas sobre la
misma pgina, si permite o no el mecanismo de evaluacin paso a paso.
En el caso de herramientas ms avanzadas, stas permiten realizar transformaciones sobre el diseo del
sitio, por ejemplo convertirlo totalmente a modo textual.

La mayora de los revisores clasifican los errores de accesibilidad en dos tipos:
nErrores automticos: fueron detectados por la herramienta con seguridad. Tiene como alternativa de
solucin modificar el cdigo del sitio. Por ejemplo, utilizar valores absolutos.
nAdvertencias: la herramienta no puede garantizar su existencia. Es el ser humano quin debe
comprobar si el error existe realmente y solucionarlo posteriormente. Por ejemplo, constrastes de color
de fondo y de texto poco distinguibles.
La W3C ofrece un listado de herramientas que permanentemente actualiza, en las que se destacan:
nHerramientas de revisin automtica de la accesibilidad: TAW, Cynthia, Bobby, Wave
nHerramientas de revisin de sintaxis: como el Validator del W3C, W3C CSS Validation Service, RDF
Validation Service, XML schema validator
nHerramientas para la revisin Manual de la accesibilidad: HERA, HERA-XP, EDIPO
nHerramientas reparadoras: A-Prompt, LIFT, AccVerify, AccRepair y AccMonitor
nNavegadores alternativos y emuladores: como ser Amaya, Braillesurf, IBM HomePage Reader. Lynx
y el emulador Lynxme, Mozilla y Firefox, Opera, Safari, WebTV Emulator
nBarras de revisin de la accesibilidad para navegadores: Barra para Internet Explorer, para Mozilla,
para Firefox, etc.
En la figura siguiente se muestra la pantalla del revisor de accesibilidad TAW, validando el sitio Web de la
Matanza, una importante localidad de la Pcia.de Buenos Aires de la Repblica Argentina.
Figura 6.2: Imagen del Revisor de Accesibilidad TAW
En la imagen se perciben los conos indicadores de error, con una numeracin y color que determinan la
prioridad del error. La ubicacin de los mismos es significativa pues indican el lugar donde el error es cometido.
Al cliquear en alguno de estos conos, se muestra el cdigo HTML que provoc el error y la recomendacin
de accesibilidad para solucionarlo.
En el cuadro superior derecho, se muestran totales de cantidad de errores producidos en la pgina
clasificados por tipo de prioridad y sin son errores manuales o automticos.
Vale aclarar que este proceso de validacin automtica no debe ser el nico mecanismo de comprobacin
de la accesibilidad de un sitio. Es un proceso complementario que debe acompaar evaluaciones manuales.
Teniendo en cuenta un marco metodolgico para la comprobacin de la accesibilidad, todo desarrollador
Web debera considerar bsicamente los siguientes pasos, que son previos a la puesta en produccin y
publicacin del sitio Web:
nRevisar el sitio con herramientas de evaluacin de accesibilidad automticas como las mencionadas
anteriormente. Tener en cuenta que a veces detecta advertencias que deben ser comprobadas en
forma manual.
nSolucionar los problemas detectados por el revisor hasta alcanzar un nivel de conformidad de
accesibilidad. Tener en cuenta que implementar la accesibilidad puede implicar modificacin de cdigo,
alteracin del aspecto visual del sitio como tambin la construccin de pginas alternativas accesibles.
nValidar el sitio con diferentes resoluciones de monitores
nProbar el sitio desde diferentes navegadores y tipos de conexin
nUtilizar el sitio totalmente con el teclado
nUtilizar el sitio solamente con mouse, verificando el llenado de formularios con teclados virtuales
nComprobar la operabilidad del sitio con alguna herramienta de adaptacin, como el JAWS, Hal, Orca
u otro lector de pantalla, con algn magnificador de pantalla, lector de documentos, entre otros
Lograr accesibilidad en un sitio es un proceso costoso, que todo desarrollador debe enfrentar para garantizar
el acceso a la informacin a todos, sin discriminaciones.

Caso de Estudio 6
A continuacin se presentar una sntesis de un estudio de accesibilidad realizado durante el mes de mayo
de 2008, sobre los sitios Web de ministerios y municipios de la Provincia de Buenos Aires. El resultado de este
informe se present en las Jornadas Argentinas de Computacin, JAIIO 2008, y result ganador del Premio
Nacional de Gobierno Electrnico, en el marco del Simposio de Informtica en el Estado.
Objetivo
El objetivo de este caso de estudio es presentar una sntesis del artculo Evaluacin de Accesibilidad
de Sitios Web Oficiales: Ministerios y Municipios de la Provincia de Buenos Aires. Al travs del sitio Web
Wayback Machine http://www.archive.org/web/web.php pueden consultarse los sitios Web analizados, con la
informacin y el formato del perodo durante el cual se realiz la evaluacin.

Hoy en da, se ha impulsado notablemente el uso de las Tecnologas de la Informacin y la Comunicacin
aplicado a mejorar la gestin y los servicios de la administracin pblica nacional, garantizar la transparencia
y la participacin y facilitar el acceso a la informacin pblica. Esto se vio reflejado desde el Estado Nacional,
a travs del Decreto 378/2005, donde se aprobaron los lineamientos estratgicos para el Plan Nacional de
Gobierno Electrnico y los Planes Sectoriales.
A partir de entonces, importantes aplicaciones oficiales se desarrollaron y actualizaron, contando con un
marco de apoyo, asesoramiento y delineamientos generales, provisto por la ONTI, la Oficina Nacional de
Tecnologas de Informacin.
La Provincia de Buenos Aires cuenta con una comunidad de 13.760.969 de habitantes y 134 municipios
bonaerenses. Provee ms de 100 sitios oficiales pertenecientes a dichos municipios y ms de 30 sitios oficiales
de ministerios, secretaras y de otros organismos. Datos que evidencian la presencia de una gran cantidad de
usuarios Web.
El artculo describe un proceso de evaluacin de accesibilidad de los sitios oficiales de la provincia de
Buenos Aires, teniendo en cuenta una muestra de 9 sitios ministeriales y 22 sitios municipales, entre los que
incluye partidos con un alto nivel de poblacin como La Matanza. La monografa intenta brindar un aporte
significativo, que motive la reflexin y autocrtica el pos de lograr el espritu expresado desde el gobierno
nacional: que la informacin est al alcance de todos.

En esta seccin describir el proceso de evaluacin de accesibilidad de sitios oficiales pertenecientes a la
Provincia de Buenos Aires.
Las normas internacionales de accesibilidad aplicadas en el proceso fueron las otorgadas por la WAI,
denominada Gua para la accesibilidad y la autora de pginas. Como mencionamos en este captulo, la
misma es referenciada comnmente con las siglas WCAG y su versin vigente es la WCAG 1.0.
Los consorcios internacionales como la WAI, recomiendan adems la utilizacin de herramientas
Validador de accesibilidad utilizado: TAW On Click
automticas para evaluar la accesibilidad de los sitios Web. Existen un gran nmero de estas herramientas las
cules presentan diferentes caractersticas. Luego de un proceso de anlisis, se seleccion para este trabajo,
la herramienta de validacin de accesibilidad TAW On Click, que es simple de utilizar, viene en lenguaje
espaol y es de libre licencia, adems puede instalarse como una extensin al navegador Mozilla Firefox. En
la figura siguiente se muestra el sitio del municipio de La Matanza, luego de evaluar su accesibilidad mediante
la herramienta TAW.
162- Caso de Estudio 6 - Accesibilidad en la Web

Figura 6.3: Pantalla del sitio de la Matanza evaluado por el validador de accesibilidad TAW.
Como se explic en el Captulo 6, en la parte superior derecha, presenta un cuadro con la cantidad de
errores encontrados, de tipo automtico o manual y segn su prioridad.
Los errores automticos son aquellos que la herramienta detecta dentro del cdigo HTML y asegura su
presencia. Los errores manuales son advertencias en donde la herramienta sugiere que el propio evaluador
realice el testeo pertinente para verificar si el error existe o no.
En la parte inferior central, la herramienta muestra el sitio Web analizado y con colores puntualiza la
ubicacin de los errores detectados por ella. Es importante destacar que cuando la herramienta encuentra
0 (cero) errores de tipo automtico y prioridad 1, se puede argumentar que el sitio cumple con un nivel de
accesibilidad bsico.
Sitios Evaluados
La evaluacin parte de una muestra de 31 sitios oficiales, de los cuales 9 pertenecen a ministerios y 22 a
municipios, que incluyen partidos de ms de un milln de personas como es La Matanza.
En las siguientes tablas, se muestran los sitios analizados y se incluye informacin sobre su condicin de
accesible o no, luego de haberlos expuesto al validador de accesibilidad TAW.
Sitios Ministeriales de la Provincia de Buenos Aires:
Descripcin Es Accesible?
Ministerio de Infraestructura No es accessible
Ministerio de Justicia No es accessible
Ministerio de Salud No es accessible
Gobierno de la Pcia de Buenos Aires Nivel A
Ministerio de Seguridad No es accessible
Ministerio de Asuntos Agrarios No es accessible
Ministerio de Economa No es accessible
Ministerio de Jefatura de Gabinete y Gobierno No es accessible
Ministerio de Desarrollo Social No es accessible
Tabla 6.17: Sitios Ministeriales de la Provincia de Buenos Aires
Sitios Municipales de la Provincia de Buenos Aires:
Descripcin Es Accesible?
Almirante Brown No es accessible
Avellaneda No es accessible
Azul No es accessible
Caso de Estudio 6 - Accesibilidad en la Web -163
Baha Blanca No es accessible
Bragado No es accessible
Brandsen No es accessible
Campana No es accessible
Carlos Casares No es accessible
Chascoms Nivel A
Escobar No es accessible
Esteban Echeverra Nivel A
Florencio Varela No es accessible
General Pueyrredn No es accessible
General San Martn No es accessible
La Matanza No es accessible
La Plata No es accessible
Lanas No es accessible
Moreno No es accessible
Morn No es accessible
Pilar No es accessible
Quilmes No es accessible
Tabla 6.18: Sitios Municipales de la Provincia de Buenos Aires
Registro de los resultados

Se dise y confeccion una base de datos, que permiti almacenar los resultados arrojados por la
herramienta TAW, de cada sitio Web evaluado. Se trabaj con dos tablas, una de Sitios Analizados, donde
se registraron la cantidad de errores detectados en los sitios, ya sean manuales o automticos y por prioridad
1, 2 o 3 (en las prximas secciones se mencionarn como P1, P2 y P3 respectivamente). La otra tabla es la
de DetalleAccesibilidad donde para cada sitio se contabiliza la cantidad de ocurrencias de error cometidas
en cada norma. Luego, se realizaron consultas que se trasladaron a planillas de clculo para realizar grficos
y funciones estadsticas.
Anlisis de los Resultados de la Evaluacin de Accesibilidad

En este apartado, se van a mostrar algunos de los resultados obtenidos a partir de la evaluacin realizada.
Resultado sobre Accesibilidad respecto del total de sitios

evaluados
Accesibles No Accesible
3 28
Tabla 6.19: Resultado sobre Accesibilidad respecto al Total de Sitios evaluados
La tabla permite visualizar el alto ndice de sitios inaccesibles dentro de la provincia de Buenos Aires,
demostrando una problemtica que existe y excede ms all de los mbitos de la provincia y de las entidades
gubernamentales.
qAnlisis comparativo de errores automticos y manuales por

prioridad, teniendo en cuenta sitios municipales y ministeriales
Errores Automticos entre Municipios y Ministerios
Tipo de Sitio P1 P2 P3
Ministerios 433 3667 325
Municipios 425 2315 361
Tabla 6.20: Errores Automticos por tipo de Sitio evaluado

Figura 6.4: Grfico comparativo de errores automticos
Respecto a este grfico, vale aclarar que los errores automticos requieren para su solucin indefectiblemente
la modificacin del cdigo HTML en que fue desarrollado el sitio Web. Se puede percibir a simple vista que,
para lograr un nivel bsico de accesibilidad (Nivel A), donde requiere que los errores automticos de prioridad
1 sean resueltos, no implicara grandes esfuerzos. Pero esta posibilidad se complica, al querer tratar los
errores de prioridad 2, que son muy elevados tanto en los sitios municipales como ministeriales.
Comparacin Manuales entre Municipios y Ministerios

Tipo de Sitio P1 P2 P3
Ministerios 1651 2628 748
Municipios 2156 3064 862
Tabla 6.21: Cuadro comparativo de errores manuales
Figura 6.5: Grfico comparativo de errores manuales
Con respecto a los errores manuales, son considerados por la herramienta como advertencias, y no son
tenidos en cuenta en el momento de designar una clasificacin de accesibilidad. De todas maneras, estos
errores deben solucionarse. Los mismos requieren de un gran esfuerzo por parte de los evaluadores, puesto
que deben realizar una revisin manual de cada error y corregirlas en el cdigo. Se detecta un alto ndice
detectado de errores manuales de prioridad 1 y 2.
qAnlisis sobre errores automticos y manuales por Municipio
Figura 6.6: Grfico de errores automticos por municipio

Este grfico muestra la tasa de errores automticos por municipio, esto nos permite observar el alto nivel
de problemas de prioridad 2, por lo que los costos para obtener un intermedio de accesibilidad (Nivel AA) son
muy significativos.
Figura 6.7: Grfico de errores automticos por municipio
Aqu, podemos visualizar sitios con un alto nivel de error de prioridad 1, 2 y 3, como ser el de Florencio
Varela, Avellaneda, Moreno, Lomas de Zamora y Gral. San Martn. El trabajo para revertir esta situacin
implica retocar y modificar la mayor parte del cdigo de los mismos.
qAnlisis de los errores de accesibilidad ms cometidos por

Prioridad
Segn los resultados arrojados en la evaluacin, los errores ms cometidos teniendo en cuenta el total de
sitios analizados, son:
De prioridad 1
nNo se proporcion un texto equivalente para todo elemento no textual: este error de tipo automtico
que implica la necesidad que todo elemento multimedial est acompaado por texto, fue cometido con una
ocurrencia de 160 veces.
nNo es seguro que las pginas sigan siendo utilizables sin scripts, applets u otros objetos programados:
este error de comprobacin manual fue cometido una 195 veces. Implica que los sitios deben poder ser
accedidos aunque el navegador utilizado no acepte scripts, applets u otros objetos de programacin.
nEl documento no puede ser ledo sin hoja de estilo: Este error fue cometido 158 veces e implica que el
sitio debe ser visto con y sin la tecnologa de estilos CSS.
De Prioridad 2
nSe usa caractersticas desaconsejadas por las tecnologas W3C: Este error automtico fue hallado 1073
veces. Significa que los sitios deben por ejemplo proveer informacin adicional en formato HTML o texto, no
en .PDF o Word.
nNo usar valores absolutos: este error es muy cometido. Fue detectado 459 veces y significa que se deben
trabajar con coordenadas relativas, as funciona en diferentes resoluciones de monitor.
nNo usa hojas de estilo: La W3C aconseja el uso de hojas de estilo pero adems el sitio debe funcionar
bien en situaciones donde el navegador no las reconozca. Se detect la ausencia de hojas de estilo 322 veces.
nPoco contraste entre el fondo y la letra: Este de comprobacin manual fue hallado 287 veces.
De Prioridad 3
nNo se proporciona resmenes de las tablas: este error automtico detecta falta de informacin adicional
a tablas utilizadas en el sitio. Detect 205 ocurrencias.
nNo se proporcion texto lineal alternativo: Este error fue detectado 207 veces y apunta a proveer
alternativas textuales para presentar la informacin.

Conclusiones
Este trabajo de investigacin y anlisis que muestra con datos concretos la ausencia notable de sitios
accesibles, nos hace pensar en la falta de conciencia por parte de responsables en el desarrollo Web, de la
necesidad de hacer accesibles sus sitios. Se destaca de los resultados que la mayora ni siquiera cumplen con
principios de prioridad 1, necesarios para garantizar un mnimo grado de accesibilidad.
Como trabajo futuro, se continuarn analizando los municipios y organismos pblicos, se desarrollarn
propuestas de difusin, formacin y asesoramiento desde la UNLP, que desde el ao 1995, viene acumulando
una vasta experiencia en temas de accesibilidad Web.
Adicionar a las aplicaciones de e-gobierno presentes en Internet, la cualidad de accesibilidad permitir
garantizar que la administracin e informacin pblica est efectivamente al alcance de todos, acortando
significativamente la brecha digital existente. Esto estara en consonancia con iniciativas para crear sitios
accesibles que promueve la Unin Europea.

Ejercitacin
A. Responder verdadero o falso.
nLa accesibilidad apunta nicamente a las diferentes discapacidades de un usuario. v f
nLa WAI, pertenece a la W3C y se ocupa especficamente de establecer y publicar normas de v f

accesibilidad, para garantizar el diseo universal del sitio y el uso de elementos estndares.
nLas ayudas tcnicas hacen referencia a las herramientas de adaptacin que utilizan los usuarios v f
con distintas discapacidades
nEl diseo universal intenta abolir el uso de multimedia en el diseo de sitios Web v f
nLa gua de accesibilidad WCAG 2.0 tiene la misma organizacin que la WCAG 1.0 v f
B. Indicar los problemas que pueden surgir cuando un usuario ciego quiere instalar un producto que lo
asista en su navegacin por la Web.
C. Indicar las comprobaciones necesarias desde el punto de vista de accesibilidad, que un desarrollador
Web debe realizar antes de publicar su sitio Web.
168- Ejercitacin - Accesibilidad en la Web

Referencias
rAbascal,J. The use of guidelines to automatically verify Web accessibility.

rArrue, I Fajardo (2004). Universal Access in the Information Society. Springer
rPaciello, M. (2000). Web Accessibility for People with Disabilities.
r Lazar J. A. Improving web accessibility: a study of webmaster perceptions.
rSponaugle, Dudley (2004). Computers in Human Behavior. KD Greenidge.
rY.Hassan Montero (2006) Factores del diseo web orientado a la satisfaccin y no-frustracin de uso.
rRevista espaola de Documentacin Cientfica.
rRovira, C. Libre acceso en Europa: anlisis y valoracin de la accesibilidad.
rMarcos, M.; Codina L (2007). El Profesional de la Informacion.
rCasals, Alicia (1997). Ajuts Tecnolgics per a disminuts fsics.
rEgea Garca, Carlos y Sarabia Snchez, Alicia (2001). Diseo Accesible de Pginas Web.
rVanderheiden y Katherine R. Vanderheiden (1999). Accesible Design of Consumer Products.
rPrez Alonso, Beatriz (1997). Internet sin barreras.
rGregg C. Vanderheiden (1998). Aplication Software Design Guideline.
rNovtica: Informtica y discapacidades. Monografa; Nmero 136. 1998.
rSitios y Portales de Internet para la Administracin Pblica Nacional. Documento oficial de la ONTI,
Oficina Nacional de Tecnologas de la Informacin de Argentina. http://www.sgp.gov.ar/contenidos/onti/etap/
sitio_etap/docs_y_varios/GuiasTecnicas/Pautas_para_Sitios_y_Portales_en_Internet_para_la_APN.pdf
rPlan nacional de Gobierno Electronico. Decreto N 378/2005: http://www.argentina.gov.ar/argentina/
portal/documentos/decreto378.pdf
rhttp://www.magnifiers.org/
rhttp://www.dolphinusa.com/support/
rhttp://www.fbyte.com/
rhttp://www.microsoft.com/enable/guides/vision.htm
rhttp://www.svpal.org/assistive/
rhttp://www.sidar.org
rhttp://www.aenor.es
rhttp://www.legislaw.com.ar
rhttp://www.access-board.gov/sec508/guide/act.htm
rhttp://www.congreso.es/public_oficiales/L7/CONG/BOCG/A/A_068-13.PDF
rhttp://www.kantei.go.jp/foreign/it/network/priority-all/index.html
rhttp://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505
rhttp://www.w3.org/WAI/intro/wcag10docs.php
rhttp://www.w3.org/WAI/intro/wcag20.php
rhttp://qweos.net
rhttp://www.w3.org/WAI/eval/Overview.html
rhttp://www.w3.org/WAI/ER/existingtools.html
rhttp://www.tawdis.net/taw3/cms/es
rhttp://www.cynthiasays.com/
rhttp://www.watchfire.com/products/desktop/accessibilitytesting/default.aspx
rhttp://www.firefoxflicks.magnify.net/
rFundacin de Ciegos Manuel Caragol: www.funcaragol.org
rOrganizacin Nacional de Ciegos de Espaa: www.once.es
rDecreto N 378/2005 Plan Nacional de Gobierno Electrnico. http://www.argentina.gov.ar.
rONTI. http://www.sgp.gov.ar/contenidos/onti/onti.html
rBuenos Aires. La Provincia. http://www.gba.gov.ar/
rValidadores de Accesibilidad http://www.w3.org/WAI/ER/existingtools.html
rAW On Click. http://www.tawdis.net/taw3/cms/es
Referencias - Accesibilidad en la Web -169

Conclusiones Generales
La ciencia y la tecnologa avanzan y con su proceso, modifican la vida de cada ser humano. Sus horizontes,
sus metas, sus propsitos se ven afectados. Muchas personas, con distintas formaciones, edades, experiencias,
formas de ser, interactan con algn sistema de software en su trabajo, en su hogar o para estudiar. Cabe
aqu preguntarse cmo proveer la mejor interfaz del usuario que permita que el ser humano pueda aprovechar
al mximo las herramientas tecnolgicas que se le presentan, sin aumentarle las complicaciones.
Nuestras aspiraciones no se limitan a la formacin del lector respecto a las conceptualizaciones ms
importantes relacionadas con la temtica de HCI, sino ms bien, promover un ser conciente de su rol de
desarrollador de sistemas de software, las cuales deben estar al alcance, al acceso y al servicio de seres
humanos.
El eje trasversal de este libro y que circula desde diferentes perspectivas en los distintos captulos, es la
misma interfaz del usuario. Es la componente de software que soporta el dilogo, la conversacin que fluye
entre un usuario y el sistema de software en ambas direcciones. Se encarga de dialogar con el usuario, de pedir
datos de entrada y de mostrar los resultados o las salidas del programa. La interfaz del usuario constituye un
puente, un nexo indispensable y nico entre el usuario y la componente funcional del sistema. Es un concepto
amplio y complejo, puede tomar diferentes dimensiones y se ve afectado por mltiples factores que se intent
analizar y explorar a lo largo de todo este material.
Se aborda toda la problemtica de la interaccin entre el usuario y el ordenador. Se ensean caractersticas
y diferentes estilos de dilogo, como tambin normas de diseo especficas para desarrollar interfaces del
usuario que sean simples de utilizar y fcil de aprender por parte de los seres humanos.
Fundamentalmente, se promueve un proceso de ingeniera de la interfaz que permita la participacin del
usuario no slo al final del desarrollo de la misma, cuando l comienza a probar y utilizar el sistema, sino en
todas las etapas de gestacin.
La interfaz se construye por y para los/las usuarios/as, teniendo en cuenta desde aspectos de visualizacin,
servicios, estilo de interaccin, formas de dilogo, comportamiento que debe ser acorde a sus necesidades.
El usuario se lo analiza como el agente principal para garantizar la calidad de uso del sistema. Es imposible
analizar grados de satisfaccin, eficiencia, cuestiones de uso y de gustos, sin la intervencin directa y continua
del actor usuario.
En los ltimos captulos del libro, se cubri un panorama de diferentes tipos de interfaces del usuario,
prestando atencin a cuestiones especficas de diseo para que el lector pueda comprender la magnitud de
problemticas, costos y recomendaciones a tener en cuenta en el momento de encararlas.
El libro incluye ejemplos, casos de estudio, ejercitacin, permitiendo una lectura dinmica y participativa
del lector. Se seleccionaron trabajos realizados por alumnos avanzados de la ctedra de Diseo Centrado en
el Usuario de la Fac.de Informtica de la Universidad Nacional de La Plata, Argentina. A travs de los cules
los alumnos jugaron con el rol de diseador y evaluador, pero tambin con el rol de usuario, experimentando
problemticas que sufre cualquier persona que se encuentra frente a un producto de software que quiere
utilizar.
Otro punto a aclarar es que en este libro, se ha abarcado los conceptos bsicos sobre diseo centrado
en el usuario y presentado un conjunto de recomendaciones para el diseo de interfaces tradicionales. Sin
embargo, esto es slo el comienzo. La disciplina HCI contina creciendo y, junto con el desarrollo de nuevo
hardware con nuevas prestaciones y mayor potencialidad de clculo, se plantean nuevos desafos que aos
atrs se imaginaban slo como parte de la ciencia ficcin.
Respecto de las nuevas tendencias en las interfaces se pueden mencionar algunas ms novedosas que
otras, que no han sido incluidas en esta edicin por cuestiones de espacio, pero que permitir al lector tener
una visin del estado del arte de la disciplina, son:
Pen-centric Computing: El objetivo de pen-centric computing es tomar ventaja de la
habilidad que tenemos las personas para expresar, con un lpiz, las ideas que rondan en nuestra mente. No
es slo reemplazar el mouse por el lpiz, como es el objetivo de pen computing, sino que es hacer con l las
operaciones que se realizan con un lpiz tradicional sobre una hoja de papel, por ejemplo tachar una palabra
de un texto implica eliminarla.
Surface Computing: Representa una nueva forma de interaccin con el contenido digital.
Los canales de entrada tradicionales, como mouse y teclado, desaparecen para dejar paso a la manipulacin
directa de los objetos de informacin por medio de gestos naturales con las manos sobre una mesa digital.
Esta interaccin es posible llevarla a cabo en solitario o con otras personas en simultneo. La pantalla tctil
que constituye la mesa digital tambin reconoce objetos fsicos que se ubican sobre ella. As, es posible ubicar
dos telfonos celulares sobre la mesa digital e intercambiar contactos, fotos y dems informacin que reside
170- Concluciones Generales
en cada uno de los dispositivos. Las posibilidades se amplan a lmites impensados.
Interfaces Hpticas: La tecnologa hptica permite implementar interfaces de usuario
donde el sentido del tacto es el protagonista. Utiliza distintos recursos fsicos, como aplicacin de fuerza,
vibraciones y/o movimientos, como mecanismos de entrada y/o de salida. Esta estimulacin mecnica permite
crear objetos virtuales y manipular distintos dispositivos en forma remota.
Interfaces Sociales - Supple interfaces: La Web 2.0 incluye aplicaciones
que permiten construir redes sociales a travs de la Web, donde es el usuario quien publica el contenido, se
relaciona con otros usuarios a quienes conoce fsicamente o no, comparten intereses, responden a diferentes
motivaciones, organiza sus relaciones y actividades, estableciendo una forma de interaccin con el sitio que
responde a su forma de ser en la vida real.
Interfaces mviles: Los dispositivos mviles, particularmente los telfonos celulares,
smartphones y Palms, se han vuelto muy populares en todo el mundo. A travs de ellos es posible no slo
comunicarse va telefnica con otras personas, sino tambin consultar la hora, registrar alarmas o citas
programadas, enviar y recibir mensajes, consultar el correo electrnico, navegar por la Web, acceder al servicio
de GPS (Global Positioning System), escuchar msica y realizar otras actividades sumamente tiles.
Esperamos que el libro permita familiarizar a los lectores con un tema actual y de gran dinamismo donde, en
mayor o menor medida es posible participar activamente en un mundo donde los sistemas de Internet permiten
comunicarse con ms de mil de millones de personas y ms de tres mil millones que usan telefona celular, y
sin embargo decisiones errneas pueden inhibir el uso por parte de ciertos sectores de la sociedad.
Conclusiones Generales -171

Apendices
172-
Apndices
Temas a Tratar
Glosario de trminos utilizados
Ejercitacin Resuelta
nCaptulo I
nCaptulo II
nCaptulo III
nCaptulo IV
nCaptulo V
nCaptulo VI
-173
Glosario de trminos utilizados
7 pasos de Norman Concepto introducido por Donald Norman. Hace referencia a la mente humana
durante la interaccin con un sistema de cmputos para resolver un problema.
Accesibilidad Concepto que hace referencia a proveer un diseo universal en los productos que
se estn desarrollando, para que pueda ser entendido y utilizado por cualquier clase
de persona. Ver Interfaz accesible.
Animacin Tcnica de interaccin que visualiza el proceso interno de un sistema dinmico.
Es una parte integral en la interfaz visual donde los cambios en el sistema estn
provocados por acciones autnomas del propio objeto animado que complementa
las operaciones del usuario
Browser Tcnica de interaccin que permite visualizar una lista de objetos compuesto por
varios atributos. Se visualiza como una tabla donde cada fila es la especificacin
de cada objeto y en las columnas se muestran los valores de sus atributos y
caractersticas.
Caja de dilogo Contexto rectangular, donde el usuario puede especificar opciones y acciones usando
botones y controles tales como listas, casilleros de entrada, listas deslizables, check
buttons o radio buttons.
Conocimiento El conocimiento dependiente del dominio, que es inherente a la aplicacin especfica.
semntico
Conocimiento Convenciones lingsticas y modales que el operador debe conocer para poder
sintctico comunicarse con el sistema.
Consistencia La interfaz debe seguir ciertos patrones de conducta, de interaccin y de visualizacin
homogneos y coherentes en todas las partes del sistema.
Controlador del Porcin del software de la interfaz que controla el medio utilizado y la secuenciacin
dilogo de las interacciones del usuario. Determina la lgica de eventos.
Dependencias Tcnica de interaccin visual. Especifica una relacin causal que debe ser siempre
mantenida. Sucede cuando al manipular un objeto de la pantalla puede significar
consecuencias en la aplicacin que, a su vez, causen efectos directos o indirectos
sobre otros objetos de la misma pantalla.
Dilogo secuencial Forma en que los humanos interactan con una computadora. La interfaz se basa
en representaciones implcitas de los objetos. Se pasa de una etapa de dilogo
a la siguiente de una forma preestablecida por el sistema. Este tipo de dilogo
incluye interaccin pregunta-respuesta (request-response), lenguajes de comandos,
navegacin a travs de mens y entradas de datos.
Dilogo sincrnico Forma en que los humanos interactan con una computadora. El usuario muestra
qu hacer mediante el desplazamiento y manipulacin de representaciones visuales
de los objetos. El estilo de interaccin caracterstico es la manipulacin directa y el
mouse. La secuenciacin de cada camino de interaccin es independiente de los
dems.
Dilogo basado en Ver Dilogo asincrnico.
eventos
Dilogo Dilogo multi-thread, en el cul ms de un hilo de dilogo puede ser desarrollado
Concurrente paralelamente. Adems de haber muchas alternativas de dilogo, estas estn
abiertas simultneamente.
Dilogo no lineal Multiplicidad de caminos de dilogo, de hilos de control simultneos, de acciones
alternativas en un determinado momento.
Diseo centrado en Metodologa para el desarrollo de un sistema de computadora donde el usuario
el usuario participa activamente en todas las etapas de principio a fin.
Distancia de Esfuerzo mental que hace el usuario cuando traslada su intencin en requerimientos
ejecucin propios del sistema.
Distancia de Esfuerzo mental que realiza el usuario cuando analiza el estado del sistema.
evaluacin
Estilo de Mecanismo implementado por la interfaz para comunicarse con el usuario: secuancial,
interaccin manipulacin directa, concurrente o basada en comandos.
FAQs Preguntas frecuentes. Servicio adicional recomendado para utilizar en los sitios Web.
174- Glosario
Interfaz de usuario Medio por el cual se lleva a cabo la interaccin entre el usuario y la computadora.
Componente de software y hardware que soporta el dilogo bidireccional entre el
usuario y el sistema.
Look and feel Apariencia y percepcin de la interfaz de usuario.
Manipulacin Tcnica de interaccin que responde a la metfora de Mundo Modal, en donde el
directa usuario tiene a disposicin objetos que pueden ser accionados de mltiples maneras,
como ser mediante el arrastre, seleccin, mltiple seleccin, cliqueo, entre otros.
Manual de usuario Proveen documentacin y detalles especficos de las operaciones provistas por el
sistema y reflejan los diferentes modos de uso.
Mens Lista limitada de opciones que pueden ser seleccionadas por el usuario y que estn
disponibles dentro de un marco visual comn
Metfora del Permite que el usuario perciba a travs de la computadora, un ambiente que le resulta
desktop familiar, mediante la visualizacin de elementos, el acceso a funciones fcilmente y
la localizacin de contextos lgicos, pudiendo apreciar a la computadora como una
herramienta de fcil utilizacin y entendimiento.
Mtodos de Mtodo de evaluacin llevado a cabo por los potenciales usuarios del sistema.
indagacin
Mtodos de Mtodo de evaluacin llevado a cabo por expertos en HCI.
inspeccin
Modelo de usuario Descripcin de las caractersticas y propiedades individuales de la interaccin entre
el usuario y la mquina, permitiendo modelar sus hbitos y reacciones.
Modelo en espiral Ciclo de vida de una interfaz, definido por Boehm. Cada giro de la espiral est
formado por el diseo, desarrollo y evaluacin del prototipo.
Modelo en estrella Ciclo de vida de una interfaz, definido por Hix y Hartson. La evaluacin es el proceso
central, a partir del cual se refinan las siguientes etapas de desarrollo.
Modelo SSOA Modelo Sintctico-Semntico del conocimiento del usuario, definido por
Schneiderman.
Objetos Conceptos, entidades, datos, funciones extrados del problema real, que sern
computacionales registrados, representados y manejados dentro del sistema.
Objetos de Elementos que conviven dentro de la interfaz del usuario y son reflejados al usuario.
interaccin Incluye una componente de presentacin y otra de interaccin.
Objetos no Revisar en interfaces icnicas
computacionales
Paradigma de Recursos o mecanismos que el diseador emplea para confeccionar una interfaz de
interaccin visual usuario visual.
Perfil del usuario Preferencias, hbitos y comportamiento de la persona que interactuar con el
sistema.
Prototipacin Metodologa de desarrollo o mtodo o tcnica de representacin de diseo. Permite
desarrollar una visin prematura del sistema, donde se puntualiza en un principio la
visualizacin, la interaccin y el comportamiento global del sistema. Permite acatar
cuestiones de interfaz , en forma separada del aplicativo subyacente.
UI Interfaz del usuario
UIMS Sistemas para el gerenciamiento de la interfaz de usuario grficas que focalizan en
el diseo centrado en el usuario
UIT User Interface Toolkit, libreras de rutinas que pueden ser invocadas para implementar
ciertos aspectos de la interfaz.
User tailorability Capacidad del usuario de adaptar y personalizar aplicaciones segn sus gustos y
necesidades.
Usabilidad Conjuncin de todas las cualidades exigidas a la componente de dilogo: simplicidad,
confiabilidad, flexibilidad, transparencia y ergonoma.
Ventana Area rectangular que contiene una aplicacin de software o archivo de informacin.
Permite la definicin de un contexto independiente, donde se agrupan subtareas o
dato del mismo nivel de abstraccin.
W3C World Wide Web Consortium. Foro internacional en el que participan unidades
acadmicas y empresas de todo el mundo y tiene por objetivo desarrollar tecnologas
interoperativas para guiar a la red a su mximo potencial. Define estndares
presentes en este libro, como PGP, guas de accesibilidad, entre otros.
Glosario -175
Feedback visual Reaccin de la interfaz frente a un estmulo. Es el proceso de reflejar sobre la
pantalla el resultado de alguna operacin realizada por el usuario, realizndose esto
de una manera grfica o mediante algn recurso visual
Formulario Componente visual de una interfaz, que permite reunir un conjunto de diferentes
objetos de interaccin en pos de permitir la entrada de datos por parte del usuario
Funciones Facilidades de configuracin y personalizacin que poseen ciertas tcnicas de
sintcticas interaccin visual. Por ejemplo la posibilidad de configurar el ancho de las columnas,
el orden y la tipografa de un browser.
Gestos Marca, estela o camino que traza el usuario para expresar alguna informacin o
representar la interaccin del mismo
Independencia de Estrategia que permite que las decisiones de diseo que afectan nicamente a la
dilogo componente de dilogo se realicen en forma independiente de aquellas que afectan
a la estructura del sistema de aplicacin y al corazn funcional.
Interfaz Accesible Interfaz que respeta normas de diseo de universalidad para que pueda ser accedida
por cualquier usuario independientemente de sus capacidades fsicas, mentales.
Interfaz para Interfaz social o grupal, que facilita el trabajo en grupo, permitiendo la coordinacin,
groupware comunicacin y proyeccin entre todos los integrantes a travs de la computadora.
Interfaz basada en Interfaz capaz de comenzar el dilogo y finalizarlo. Se comporta como un interlocutor
agentes humano.
Interfaz con Interfaz que posee la capacidad de captar secuencias de acciones que el usuario
inferencia repite con frecuencia.
Interfaz con signos Interfaz sensible a los perfiles individuales de los usuarios y sus estilos de interaccin.
de adaptacin
Interfaz Interfaz que se monta sobre los sistemas telefnicos.
conversacional
Interfaz evolutiva Interfaz que tienen la propiedad de cambiar y evolucionar con el tiempo, junto con el
grado de perfeccionamiento que el usuario particular va adquiriendo con el sistema.
Interfaz icnica Interfaz visual especfica, que utiliza como medio de representacin visual
exclusivamente al cono. Se puede especificar tanto visualizacin icnica como
programacin icnica.
Interfaz inteligente Interfaz con capacidad de razonamiento, de adquisicin y aplicacin del conocimiento
y de comunicacin de ideas.
Interfaz mvil Interfaz de aplicaciones donde el usuario utiliza dispositivos inalmbricos como
celulares y PALMs para acceder a la funcionalidad del sistema.
Interfaz para Interfaz social o grupal, que facilita el trabajo en grupo, permitiendo la coordinacin,
groupware comunicacin y proyeccin entre todos los integrantes a travs de la computadora.
Interfaz para la Interfaz presente en los sitios Web.
Web
Interfaz textual Interfaz que utiliza el texto como nico medio de representacin y de interaccin.
Como ejemplos se pueden citar las interfaces basadas en comandos y las basadas
en mens.
GUI Interfaz de usuario grfica, que soporta alguna de las siguientes caractersticas:
visualizacin, interaccin o programacin visual.
HCI Interaccin hombre-computadora. Es el intercambio observable de informacin,
datos y acciones, entre un humano y la computadora, y viceversa.
Conforma una disciplina dentro de las Ciencias de Computacin.
heurstica Mtodo de evaluacin realizada por expertos en HCI, a partir de un conjunto de
pautas bien definidas.
Hipervnculo Palabra, frase, imagen o smbolo que permite a los usuarios saltar de un lado a otra
ubicacin del mismo sitio o un sitio externo.
Icono Imagen, figura o smbolo que representa un concepto subyacente.
Par (parte fsica, parte lgica) donde la parte fsica sera la imagen y la parte lgica
su significado. Relacin unvoca entre imagen y significado.
Ingeniera de Metodologa de desarrollo adecuada para sitios Web, promovida por Jacob Nielsen.
usabilidad Consiste en tener en cuenta las cuestiones de usabilidad durante todo el proceso
de desarrollo.
176- Glosario
WIMP Windows, icons, menus and pointing device. Estilo de interfaz que hace referencia a
las tcnicas de ventanas, conos, mens y manipulacin directa
WYSIWYG What You See Is What You Get Estilo de interfaces grficas estndares, donde todo
lo que el usuario ve, lo puede tocar o manipular.
Glosario -177
Ejercitacin Resuelta capitulo I
A. Indicar si las siguientes expresiones son verdaderas o falsas.
nLa disciplina de HCI trata solamente cuestiones de software. v f
Falso. Los alcances de esta nueva disciplina son muy difusos y pueden influir en ella x
factores muy heterogneos, desde aspectos tecnolgicos vinculados al hardware a aspectos
sociales y psicolgicos del usuario.
nLa construccin de una interfaz del usuario es responsabilidad exclusivamente del v f
profesional informtico. x
Falso. Es el desarrollador del dilogo, especialista en factores humanos, que se interesa
y se encarga de todas las etapas del desarrollo del software de la interfaz del usuario,
abarcando el diseo, la implementacin y evaluacin de la forma, contenido, estilo y
secuenciacin del dilogo.
nEn una interfaz del usuario, puede existir un nico tipo de dilogo. v f
Falso. Pueden convivir distintos tipos de dilogos.
x
nLa interfaz icnica es una interfaz visual.
v f
Verdadero. Es una clase especfica de las interfaces visuales que utilizan como medio
de representacin visual exclusivamente al cono. Se puede especificar tanto visualizacin x
icnica como programacin icnica.
nEl rol del desarrollador del dilogo, incluye la organizacin, planteo y realizacin de los
v f
modelos de usuarios, del contexto y de aspectos tecnolgicos, que conforman la etapa de
requerimientos de la interfaz. x
nLa independencia entre la componente de interfaz y la de aplicacin, slo se debe aplicar

v f
en la etapa de programacin de ambas.
Falso. Se debe aplicar en toda la etapa de desarrollo del sistema de software. x
nLos principios de Nielsen constituyen normas de diseo que pueden aplicarse en un v f

proceso evaluativo de la interfaz.
x
B. Indicar especficamente a qu componente de Green se est refiriendo en cada caso:
Particularidades de la UI Componente de Green

Definicin de las dependencias entre Control de Dilogo
Diseo de las tarjetas magnticas que Componente de Presentacin
permitirn el ingreso al sistema.
Definicin de las mscaras y formatos de Componente de Presentacin
entrada.
Definicin de las condiciones que llevan a Control de Dilogo
la aparicin de un mensaje de error.
Diseo de las tablas de bases de datos Modelo Interfaz- Aplicacin
donde se registraran los perfiles de
usuario.
178- Ejercitacin Resuelta capitulo I

Ejercitacin Resuelta capitulo II
A. Cite al menos 5 caractersticas de la interfaz de usuario que justifiquen la siguiente afirmacin:
La metodologa de Prototipacin es adecuada para el

diseo e implementacin de la interfaz del usuario.
n Los requerimientos iniciales de una interfaz de usuario son en general incompletos. A partir de ellos, y de
los requerimientos funcionales se realiza un diseo inicial, que luego se ir refinando hasta llegar a la versin
completa y definitiva. Cada bosquejo podr ser evaluado por el usuario y as obtener ms informacin de l.
n Durante la etapa de diseo de una interfaz de usuario deben decidirse numerosas cuestiones, como
tipo de interfaz a proveer, cuestiones de visualizacin y comportamiento, entre otras. Involucran diferentes
actores, como expertos en factores humanos, diseadores visuales, comunicadores sociales, etc. Es por
esto las interfaces son proclives a sufrir numerosos cambios hasta obtener la versin definitiva.
n La expresin y visualizacin de los conceptos de una aplicacin estn expuestas a cambios, que
surgirn a medida que el usuario interacte con el sistema.
n La comunicacin entre los futuros usuarios y el equipo de desarrollo de software es fundamental, y
la prototipacin aporta una mejora importante en este sentido al contar con versiones prematuras del
software.
Permite solapar las etapas de evaluacin y testeo, de manera que errores y problemas encontrados
puedan ser solucionados antes de colocar el sistema en produccin.
B. Cite al menos 3 tareas, que debe realizar un desarrollador de software previo al diseo de la interfaz.
n Anlisis funcional: determinar el tipo de aplicacin a desarrollar y las actividades que el usuario realizar
con el sistema durante la vida til del software.
n Modelado de usuarios: es fundamental que el diseador conozca al usuario e investigue sus caractersticas
individuales a fin de realizar modelos cuanti y cualitativos del mismo. Conocer al usuario es la nica manera
de proveer una interfaz que se adecue a sus necesidades.
n Investigacin del ambiente: contexto donde interactuar con el sistema. Entre otras cuestiones debemos
dar respuesta a los siguientes interrogantes: hay mucho ruido? cul es el rol del usuario dentro de la
organizacin? cules son las caractersticas tcnicas de las mquinas donde se utilizar el sistema?
C.Dadas las siguientes afirmaciones, responder Verdadero o Falso.
nLos testeos empricos del usuario se llevan a cabo a travs de expertos que evalan la interfaz v f
segn estndares de diseo.
x
Falso. Los testeos empricos los llevan a cabo los usuarios potenciales.
VEl feedback generado por los usuarios durante las evaluaciones heursticas refleja el grado de v f
usabilidad y productividad del sistema.
x
Falso. Las evaluaciones heursticas las llevan a cabo expertos en HCI.
nEl lenguaje de programacin Java provee su propio paquete para el diseo de componentes de la v f
interfaz. x
Verdadero. La mayora de los lenguajes visuales proveen este tipo herramientas.
nEn la etapa de diseo se verifica lo que el usuario conoce del dominio de la aplicacin y del uso de v f
la computadora. x
Falso. Esta verificacin se realiza en la etapa de pre diseo.
nLas evaluaciones de campo permiten evaluar la interfaz del sistema mientras los usan usuarios v f
reales en entornos controlados. x
Falso. Las evaluaciones de campo son en entornos reales.
Ejercitacin Resuelta capitulo II -179

Ejercitacin Resuelta capitulo III
A. Indicar si las siguientes expresiones son verdaderas o falsas. Tachar lo que no corresponda:
nLa manipulacin directa es un tipo de dilogo secuencial. v f

Falso. Es un paradigma de interaccin visual asincrnico y libre, donde el usuario expresa
x
sus intenciones por medio de la manipulacin de los objetos de interaccin.
nPara proveer mltiples hilos de dilogo entre el usuario y el sistema, es necesario que la
v f
interfaz tenga mltiples ventanas.
Falso. A travs del dilogo multi-thread pueden concurrir ms de un hilo de dilogo en x
forma paralela. Por ej. un reloj que est presente en la interfaz mientras el usuario dibuja.
nLos mensajes de error son un tipo especial de feedback. v f
x
nLos mens permitieron aislar a los usuarios de cuestiones sintcticas. v f

Verdadero. Los mens disminuyen el esfuerzo mental y el entrenamiento exigido al
x
usuario de definir secuencias complejas de comandos, le evitan el empleo de una sintaxis
restringida, y de memorizar cuestiones tcnicas y del lenguaje.
nEl usuario es quien debe controlar y mantener las dependencias entre los objetos
v f
relacionados.
Falso. Es el sistema quien debe controlar y mantener las dependencias entre los objetos x
relacionados.
nLas animaciones siempre optimizan la interaccin humano-computadora. v f
Falso. Las animaciones es un recurso que es necesario disearlo adecuadamente a fin de no
x
entorpecer el dilogo.
nLos browsers permiten una organizacin centralizada de la informacin.
v f
Verdadero. La tcnica visual de browsers permite mostrar un gran caudal de datos, en una
manera ordenada y categorizada, donde el usuario puede manejar y consultar la informacin x
en forma agrupada dentro de un contexto particular.
nEl usuario al interactuar con una caja de dilogo debe percibir un criterio de ordenacin en v f
la disposicin de los objetos que la componen. x
Verdadero. La forma de ordenacin y disposicin de los elementos de una caja de dilogos
debe ser significativa.
B - La interfaz del usuario es el software que soporta el dilogo bidireccional entre el usuario y el
sistema.
Indicar con una cruz, qu direccin del dilogo asocia cada uno de los paradigmas de interaccin: si va del
usuario al sistema, del sistema al usuario, en ambas direcciones o en ninguna.
Paradigmas de interaccin visual
Mltiples ventanas x
Mens x
Manipulacin directa x
Feedback x
Dependencias x
Animaciones x
Browsers x
Cajas de dilogo x
180- Ejercitacin Resuelta capitulo III

Ejercitacin Resuelta capitulo IV
1. Cmo evidencia el diseo icnico? Identificar, marcando con un crculo, los elementos icnicos de
la interfaz de la pantalla inicial del sistema para una Veterinaria.
FIGURA 4.17
2. Qu mecanismo de interaccin le parece adecuado? Proponer al menos tres actividades que podr
realizar el usuario final del sistema e indicar como las llevara a cabo
El mecanismo de interaccin adecuado es el sugerido para este tipo de interfaz: arrastrar y soltar.
n En la pantalla inicial se visualiza claramente el escritorio, donde la zona en blanco invita a arrastrar
hacia all las fichas en blanco (a la derecha) para dar de alta un nuevo paciente.
n En la ficha de un paciente, solapa de datos de medicacin, arrastrar el frasco de pastillas a la zona de
prescripciones habilitar un nuevo rengln para completar una medicacin con remedios en presentacin
de pastillas.
n Arrastrar el catlogo de productos al escritorio permite acceder a la base de datos de productos a la venta.
3. De acuerdo a sus respuestas dadas en el punto anterior, qu caractersticas debera tener el usuario
final para obtener el mayor beneficio posible del sistema?
El usuario debe tener conocimientos en informtica y del dominio del problema, as como tambin todas
sus aptitudes psicomotrices en condiciones ptimas.
4. De acuerdo a las recomendaciones de diseo vistas en este captulo, qu problemas encuentra?

cmo los solucionara?
Los principales problemas se encuentran en:
nReconocimiento inmediato: ciertos conos no son muy representativos, por ejemplo los conos para
representar la sala de terapia intensiva y la de observaciones. Se podran solucionar diseando animaciones
o simulaciones.
nEntendimiento universal: los conos mencionados previamente tampoco respetan esta recomendacin.
nTransparencia: en la ficha de un paciente, solapa de datos de medicacin no es claro que tiene que
arrastrar los remedios de la derecha al panel de la izquierda para que se habilite un nuevo rengln de carga
de datos.
Ejercitacin Resuelta capitulo IV -181

Ejercitacin Resuelta Capitulo V
A.Citar al menos cinco diferencias entre disear la interfaz de un sitio Web y la interfaz WYSIWYG (What
You See Is What You Get).
n Comunidad destino: considerar que los usuarios pueden acceder desde diferentes lugares, distintos
medios y mediante diferentes recursos tecnolgicos.
n Objetos de interaccin.
n Regla de 3 clicks: no ms de tres clicks para alcanzar el objetivo.
n Alto grado de actualizacin y posibles rediseos.
n Tener en cuenta cuestiones sobre la red, como ancho de banda y disponibilidad.
B. Responde verdadero o falso.

nEl tipo de informacin que se publica en un sitio Web no afecta al diseo de la interfaz del v f
mismo.
x
Falso. La informacin a mostrar debe ser tenida en cuenta a fin de clasificar el contenido y
realizar una sectorizacin adecuada.
nAl disear un sitio Web hay que pensar en un perfil de usuario general v f
Falso. Es necesario modelar a los lectores destinatarios, trabajando con perfiles de usuarios. x
nEs recomendable enriquecer el sitio Web con presentaciones Flash muy coloridas y animadas. v f
Falso. Numerosos estudios han demostrado que utilizar este tipo de recursos complican la
x
interaccin y hasta son considerados difciles de interactuar.
nRealizar testeos empricos del sitio Web forma parte de la Ingeniera de Usabilidad
Verdadero. Permiten medir la adecuacin del diseo. Se emplean durante y al final del v f
desarrollo iterativo del sitio Web.
x
nEs fundamental facilitar el rediseo de los sitios Web
Verdadero. Los sitios se encuentran en constante cambio. v f
x
nUna vez publicado el sitio no es necesario tomar muestras de la interaccin del usuario con el
mismo. v f
Falso. Es necesario recolectar el feedback de los usuarios para determinar si cumple con los
x
medidas de xito propuestas, y si es necesario realizar ajustes o no.
C.Unir con flechas la actividad de la izquierda con las etapas previas al diseo del sitio Web de la
derecha.
Actividades Etapas
Analizar sitios similares Determinar la Comunidad Destino
Comprobacin y corroboracin de
cuestiones de usabilidad.
Determinar las actividades que
llevarn a cabo los usuarios
Recoleccin de feedback de Planificar el Sitio
usuarios
Considerar que los usuarios
pueden acceder desde diferentes
lugares, distintos medios y
mediante diferentes recursos
tecnolgicos.
Estudiar el grado de experiencia
del usuario con la Web.
Establecer mediciones de cuando Prototipacin
se considera un sitio exitoso y
cuando no.
Atender las sugerencias de los
usuarios
182- Ejercitacin Resuelta capitulo v

Ejercitacin Resuelta Capitulo VI
A. Responde verdadero o falso.
nLa accesibilidad apunta nicamente a las diferentes discapacidades de un usuario. v f
Falso. La Accesibilidad en la Web significa que todo sitio debe ser x
construido y diseado de manera tal, que pueda ser accedido por cualquier persona,
independientemente de su condicin fsica, mental, recursos tecnolgicos que posea como
versiones de navegador, tipo de monitor, formas de conexin que utiliza para acceder a la
Web. y desde diferentes dispositivos, mediante acceso mvil como celular o PALMS,
desde el auto, etc.
nLa WAI, pertenece a la W3C y se ocupa especficamente de establecer y publicar normas de v f
accesibilidad, para garantizar el diseo universal del sitio y el uso de elementos estndares.
x
Verdadero
nLas ayudas tcnicas hacen referencia a las herramientas de adaptacin que utilizan los usuarios v f
con distintas discapacidades.
x
Verdadero
nEl diseo universal intenta abolir el uso de multimedia en el diseo de sitios Web v f
Falso. Las pautas sobre diseo universal no desalientan a los desarrolladores en la utilizacin
x
de imgenes, vdeo, ni de otros recursos multimediales, por el contrario explican cmo hacer los
contenidos multimedia ms accesibles a una amplia audiencia. Se apoyan en el uso alternativo
de texto para que las ayudas tcnicas o adaptaciones informticas puedan tener informacin
adicional de esos recursos multimediales.
nLa gua de accesibilidad WCAG 2.0 tiene la misma organizacin que la WCAG 1.0
v f
Falso. La Gua de Accesibilidad WCAG 2.0 provee una organizacin
en capas de recomendacin, las cuales incluyen 4 principios generales, 12 pautas, criterios de x
comprobacin o de xito dentro de estas pautas, y un conjunto de tcnicas obligatorias y de
asesoramiento. Mientras que la Gua WCAG 1.0 se organiza en 14 pautas que incluye puntos
de verificacin.
B. Indique los problemas que pueden surgir cuando un usuario ciego quiere instalar un producto que lo
asista en su navegacin por la Web.
nProblemas de Incompatibilidad: El usuario discapacitado a veces debe sufrir complicaciones de

incompatibilidad entre las distintas herramientas que l instala en su ordenador. Hay ciertas funciones
del sistema operativo o del navegador subyacente, que pueden generar conflictos con los programas ya
instalados.
nGeneracin de Versiones ms avanzadas de un sitio: A medida que la tecnologa avanza,
proporcionalmente se desarrollan versiones de sitios ms complejos, que incluyen componentes FLASH,
estilos, applets, layers. Muchas veces, las herramientas que posee el discapacitado queda obsoleta,
teniendo que adquirir y aprender otras herramientas o nuevas versiones de la misma.
nManejo Heterogneo de los Perifricos: El usuario discapacitado en su interaccin con sus diferentes
herramientas de adaptacin instaladas, ms el sitio que est accediendo, debe recordar qu teclas usar,
si se le permite o no usar el teclado para acceder a los hipervnculos, qu dispositivo emplear en un
determinado momento.
nFalta de ayudas o tutoriales accesibles: hay herramientas de adaptacin que tienen escasa ayuda, que
es totalmente insuficiente y que adems no son accesibles.
nProblemas de Portabilidad: Los lugares de concurrencia masiva no estn preparados para ser utilizados
por personas con discapacidad. No suelen tener instalado adaptaciones informticas.
C. Indique las comprobaciones necesarias desde el punto de vista de accesibilidad, que un desarrollador
Web debe realizar antes de publicar su sitio Web.
nRevisar el sitio con herramientas de evaluacin de accesibilidad automticas como el TAW. Tener en
cuenta que a veces detecta advertencias que deben ser comprobadas en forma manual.
Ejercitacin Resuelta capitulo vi -183

nSolucionar los problemas detectados por el revisor hasta alcanzar un nivel de conformidad de
accesibilidad. Tener en cuenta que implementar la accesibilidad puede implicar modificacin de cdigo,
alteracin del aspecto visual del sitio como tambin la construccin de pginas alternativas accesibles.
nValidar el sitio con diferentes resoluciones de monitores
nProbar el sitio desde diferentes navegadores y tipos de conexin
nUtilizar el sitio totalmente con el teclado
nComprobar la operabilidad del sitio con alguna herramienta de adaptacin, como el JAWS, magnificador
de pantalla, lector de documentos, entre otros.
184- Ejercitacin Resuelta capitulo vi

Acerca de los autores
Lic. Francisco Javier Daz es Licenciado en Matemtica
Aplicada de la Universidad Nacional de La Plata (UNLP) as como tambin posee
el ttulo de Calculista Cientfico de dicha Universidad. Es Investigador Adjunto sin
director de la Comisin de Investigaciones Cientficas de la Provincia de Bs. As.
(CIC-BA) desde 1990.
Fue el primer Decano electo de la Facultad de Informtica de la Universidad
Nacional de La Plata en 1999 y actualmente mantiene el cargo en dicha Facultad,
habiendo sido reelecto en el ao 2004.
Actualmente es el Director General, Cientfico y Tecnolgico del Centro de
Procesamiento de la Informacin (CeSPI) de la UNLP. Este centro se encarga de la
administracin de la red acadmica, administrativa y de investigacin de la UNLP
y tiene adems la responsabilidad de administrar la conexin de esta red con el
Backbone (apoyo) RIU nacional y con el enlace Internacional a Internet. Al mismo
tiempo el CeSPI maneja los servicios administrativos de la Universidad, por ejemplo
el sistema de alumnos y la liquidacin de sueldos.
Es Profesor Titular Ordinario de la Facultad de Informtica de la UNLP. El Lic.
Daz es asimismo Director del Laboratorio de Investigacin de Nuevas Tecnologas
en Informtica (LINTI) de la Facultad de Informtica de la UNLP, en el que trabajan
50 personas dedicadas a la investigacin y es la base de 10 ctedras pertenecientes
a la carrera de Licenciatura en Informtica y tambin es el sostn de estudios
prcticos en el Master de Redes de Datos, del que el Lic. Daz es tambin director.
http://www.linti.unlp.edu.ar
Lic. Ivana Harari es Licenciada en Informtica de la Universidad

Nacional de La Plata (UNLP/1992) y Especialista en Docencia Universitaria
(UNLP/2012). Se encuentra desarrollando la tesis final de la Maestra en Redes de
Datos (UNLP/2002). Trabaja en el de tema de investigacin denominado Interfaces
Hombre Computadora, Accesibilidad y Usabilidad. Como integrante del Laboratorio
de Investigacin en Nuevas Tecnologas Informticas de la UNLP, ha participado
de numerosos proyectos de evaluacin de sistemas desde el punto de vista de
comunicacin hombremquina, para distintas organizaciones pblicas y privadas.
Ha dirigido tesinas de Licenciatura en Informtica y de Maestra. Ha dictado cursos
sobre la temtica en distintas universidades nacionales, como la Universidad Nacional
de La Patagonia Austral y la Universidad Nacional del Litoral. Ha publicado artculos
en prestigiosos eventos cientficos nacionales e internacionales. Actualmente se
desempea como Profesor Adjunto de la ctedra Diseo Centrado en el Usuario y
de Interfaces adaptadas para dispositivos mviles de la Facultad de Informtica de
la Universidad Nacional de La Plata.
Lic. Ana Paola Amadeo es Licenciada en Informtica de la

Universidad Nacional de La Plata (UNLP/2001) y Profesor Autorizado de la UNLP
(2007). Actualmente se encuentra realizando el Doctorado en Ciencias Informticas
en la UNLP. Como integrante del Laboratorio de Investigacin en Nuevas Tecnologas
Informtica - LINTI, ha participado de proyectos de evaluacin de sistemas desde
el punto de vista de comunicacin hombre mquina, para distintas organizaciones
pblicas y privadas. Ha dictado cursos sobre la temtica en distintas universidades
nacionales, como la Universidad Nacional de La Patagonia Austral y la Universidad
Nacional del Litoral. Ha publicado artculos en prestigiosos eventos cientficos y
revistas, nacionales e internacionales. Actualmente se desempea como Jefe de
Trabajos Prcticos de la ctedra Diseo Centrado en el Usuario de la Facultad de
Informtica de la Universidad Nacional de La Plata y Profesor Adjunto de Seminario
de Lenguajes y Proyecto de Desarrollo en la misma unidad acadmica.
Acercade los autores

-185

DÍAZ ARARI AMADEO FINAL CON MARCADORES 3 Diciembre 2013 PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

DÍAZ ARARI AMADEO FINAL CON MARCADORES 3 Diciembre 2013 PDF

Caricato da

Copyright:

Formati disponibili

Libros de Ctedra

Gua de recomendaciones para

Diseo de tapa: Direccin de Comunicacin Visual de la UNLP

Universidad Nacional de La Plata Editorial de la Universidad de La Plata

47 N. 380 / La Plata B1900AJP / Buenos Aires, Argentina

Edulp integra la Red de Editoriales Universitarias Nacionales (REUN)

Primera edicin, 2013

A la Facultad de Informtica de la Universidad Nacional de La Plata junto a la editorial, por respaldar y

A nuestras familias, por su apoyo permanente e incondicional.

2- Reconocimientos - Organizacin de libro

Ejercitacion Resuelta pg. 181-187

Prof. Francisco Javier Diaz

Lic. Ivana Harari

Lic. Ana Paola Amadeo

La multiplicidad de aspectos, metodologas y de procesos

10- Fundamentos en HCI

Figura 1.1: Variedad de Tpicos que involucra el HCI

Fundamentos en HCI -11

II - Evolucin del HCI

12- Fundamentos en HCI

Fundamentos en HCI -13

Dilogo secuencial Dilogos asincrnicos,

Figura. 1.2: Tipos de dilogos.

Fundamentos en HCI -15

V - Independencia del Dilogo

Cmo se logra esta estrategia?

La aparicin de un nuevo rol: El desarrollador de dilogo

Una nueva interfaz. Dilogo interno y externo

Complejidades de la Independencia de Dilogo

VI - Componentes de la Interfaz del Usuario

COMPONENTES CONTROL MODELO

Figura 1.3: Modelo de Seeheim, Versin modificada por M.Green

La componente de presentacin es la responsable de la visualizacin de la interfaz, especifica las pantallas

20- Fundamentos en HCI

Finalmente, la componente denominada Modelo de Interfaz-Aplicacin es la representacin de la aplicacin

nEspecifica el dilogo interno entre la interfaz y la aplicacin.

VII - Mtricas de Evaluacin de una Interfaz

Objetivos de la Interfaz del Usuario

22- Fundamentos en HCI

Dilogo simple y natural

Fundamentos en HCI -23

Minimizar el uso de la memoria del usuario

Fundamentos en HCI -25

26- Fundamentos en HCI

Fundamentos en HCI -27

Diseo global de nConsiderar la forma de organizacin del texto, al identacin, el desplazamiento

Brindar diferentes nBrindar diferentes mecanismos de asistencia, como bsquedas, soporte en

Fundamentos en HCI -29

Caractersticas del Caso de estudio

Desarrollo del Caso de estudio

30- Caso de Estudio 1-Fundamentos en HCI

Figura 1.3: Problemas de validacin de los campos de entrada.

Caso de Estudio 1-Fundamentos en HCI -31

Figura 1.6: Reunin registrada en el mes de abril

Figura 1.7 Evento registrado en el mes de abril

En la figura 1.8 se puede observar el calendario sin actualizaciones.

Figura 1.8: Problemas de feedback en la visualizacin del calendario

Caso de Estudio 1-Fundamentos en HCI -33

nLa interfaz icnica es una interfaz visual.

B - Indicar especficamente a qu componente de Green se est refiriendo en cada caso:

34- Ejercitacin-Fundamentos en HCI

Referencias-Fundamentos en HCI -35

La interfaz del usuario requiere de un proceso de desarrollo