DOSSIER ACADÉMICO

DE
INTERFACES DE USUARIO

ELABORADO POR: LIC. EN ING. DE SISTEMAS

ALEX CASILLA CONDORI

COCHABAMBA - BOLIVIA
 1
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

ÍNDICE

ÍNDICE ...................................................................................................................... 1

PRESENTACIÓN DEL DOSSIER ACADÉMICO...................................................... 7

UNIDAD TEMÁTICA I ............................................................................................... 8

FUNDAMENTOS EN HCI ......................................................................................... 8

1.1. ¿QUÉ ES HCI? ............................................................................................ 8

1.2. EVOLUCIÓN DE LA HCI. .......................................................................... 11

1.3. TIPOS DE DIÁLOGO HUMANO - COMPUTADORA. ............................... 13

1.4. INDEPENDENCIA DEL DIÁLOGO. ........................................................... 16

1.5. ¿CÓMO SE LOGRA ESTA ESTRATEGIA? .............................................. 19

1.6. LA APARICIÓN DE UN NUEVO ROL: EL DESARROLLADOR DE

DIÁLOGO............................................................................................................. 20

1.7. DIALOGO INTERNO Y EXTERNO. .......................................................... 22

1.8. COMPLEJIDADES DE LA INDEPENDENCIA DEL DIÁLOGO................. 23

UNIDAD TEMÁTICA II ............................................................................................ 26

UI ............................................................................................................................. 26

2.1. ¿QUÉ ES UNA INTERFAZ? ...................................................................... 26

2.2. TIPOS DE INTERFAZ. ............................................................................... 26

2.2.1. INTERFACES DE LENGUAJE NATURAL. ........................................ 27

2.2.2. INTERFACES DE PREGUNTA Y RESPUESTA. ............................... 28
2.2.3. LAS INTERFACES DE HARDWARE.................................................. 29
2.2.4. INTERFACES DE RED (NETWORK INTERFACES). ........................ 29
2.2.5. INTERFACES DE ENTRADA/SALIDA (I/O INTERFACES). .............. 29
2.2.6. INTERFAZ DE USUARIO EN DISPOSITIVOS MÓVILES (MOBILE
UI). 30

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 2
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
2.2.7. INTERFACES TÁCTILES (TOUCH INTERFACES). .......................... 30
2.2.8. INTERFACES DE REALIDAD AUMENTADA (ARUI) Y REALIDAD
VIRTUAL (VRUI)............................................................................................... 30
2.2.9. INTERFACES DE HOLOGRAFÍA (HOLOGRAPHIC INTERFACES). 31
2.2.10. INTERFACES CEREBRO - COMPUTADORA (BCI - BRAIN -
COMPUTER INTERFACES). ........................................................................... 31
2.2.11. INTERFACES DE CONTROL POR GESTOS (GESTURE - BASED
INTERFACES). ................................................................................................. 33
2.2.12. INTERFACES DE USUARIO ADAPTATIVAS (ADAPTIVE UI). ......... 33
2.2.13. INTERFACES MULTIMODALES. ....................................................... 34
2.2.14. INTERFAZ DE LÍNEA DE COMANDOS (CLI). ................................... 34
2.2.15. INTERFAZ DE PROGRAMACIÓN DE APLICACIONES (API). ......... 34
2.2.16. INTERFAZ DE VOZ (VUI). .................................................................. 35
2.2.17. INTERFAZ DE USUARIO (UI). ........................................................... 36
2.2.18. INTERFAZ GRÁFICA DE USUARIO (GUI). ....................................... 36
2.3. ¿QUÉ ES UI? ............................................................................................. 36

2.4. COMPONENTES DE UNA UI.................................................................... 37

2.5. MÉTRICAS DE EVALUACIÓN DE UNA INTERFAZ................................. 39

2.6. OBJETIVOS DE UI. ................................................................................... 40

2.6.1. SIMPLICIDAD. .................................................................................... 41

2.6.2. CONFIABILIDAD. ................................................................................ 41
2.6.3. FLEXIBILIDAD. ................................................................................... 42
2.6.4. TRANSPARENCIA. ............................................................................. 42
2.6.5. ERGONOMÍA. ..................................................................................... 43
2.7. FUNCIONES DE UI. .................................................................................. 43

2.8. PRINCIPIOS DE NIELSEN. ....................................................................... 44

2.8.1. DIÁLOGO SIMPLE Y NATURAL. ....................................................... 44

2.8.2. EMPLEAR EL LENGUAJE DEL USUARIO. ....................................... 45
2.8.3. MINIMIZAR EL USO DE LA MEMORIA DEL USUARIO. ................... 46
2.8.4. CONSISTENCIA. ................................................................................ 46

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 3
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
2.8.5. FEEDBACK. ........................................................................................ 47
2.8.6. SALIDAS EVIDENTES. ....................................................................... 48
2.8.7. MENSAJES DE ERROR. .................................................................... 49
2.8.8. PREVENCIÓN DE ERRORES............................................................ 51
2.8.9. ATAJOS............................................................................................... 51
2.8.10. AYUDAS. ............................................................................................. 52
UNIDAD TEMÁTICA III ........................................................................................... 54

PROCESO DE DESARROLLO DE LA INTERFAZ DEL USUARIO ....................... 54

3.1. CARACTERÍSTICAS DEL PROCESO DE DESARROLLO DE LA UI. ..... 55

3.2. CICLO DE VIDA DE LA INTERFAZ DEL USUARIO. ................................ 60

3.3. ETAPA DE REQUERIMIENTOS DE LA INTERFAZ. ................................ 65

3.3.1. ANÁLISIS FUNCIONAL DEL SISTEMA. ............................................ 65

3.3.2. ANÁLISIS DEL USUARIO. .................................................................. 66
3.3.3. INVESTIGACIÓN DEL AMBIENTE..................................................... 68
3.4. MODELO SSOA......................................................................................... 69

3.5. ETAPA DE DISEÑO DE LA INTERFAZ. ................................................... 71

3.6. CARACTERÍSTICAS DEL PROCESO DE DISEÑO. ................................ 75

3.7. LA INTERFAZ Y LA PROTOTIPACIÓN. ................................................... 76

3.8. CARACTERÍSTICAS DE LA PROTOTIPACIÓN. ...................................... 79

3.8.1. VENTAJAS DE LA PROTOTIPACIÓN. .............................................. 80

3.8.2. TIPOS DE PROTOTIPOS. .................................................................. 81
3.9. ETAPA DE IMPLEMENTACIÓN. ............................................................... 83

3.10. HERRAMIENTAS PARA EL DESARROLLO DE LA INTERFAZ........... 86

3.11. LA IMPORTANCIA DE LA EVALUACIÓN DE LA INTERFAZ. .............. 88

3.12. MÉTODOS DE INDAGACIÓN................................................................ 89

3.13. MÉTODOS DE INSPECCIÓN. ............................................................... 91

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 4
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
UNIDAD TEMÁTICA IV ........................................................................................... 93

NORMAS DE DISEÑO DE INTERFACES VISUALES ........................................... 93

4.1. CARACTERÍSTICAS DE LAS INTERFACES VISUALES. ....................... 93

4.1.1. VISUALIZACIÓN. ................................................................................ 94

4.1.2. INTERACCIÓN VISUAL: INTERACCIÓN VISUAL. ............................ 95
4.1.3. PROGRAMACIÓN VISUAL. ............................................................... 96
4.2. DESCRIPCIÓN DE LAS TÉCNICAS DE INTERACCIÓN VISUAL. .......... 97

4.2.1. MÚLTIPLES VENTANAS. ................................................................... 98

4.2.2. MENÚS.............................................................................................. 100
4.2.3. MANIPULACIÓN DIRECTA. ............................................................. 102
4.2.4. FEEDBACK VISUAL. ........................................................................ 104
4.2.5. GESTOS............................................................................................ 106
4.2.6. DEPENDENCIAS. ............................................................................. 107
4.2.7. ANIMACIÓN. ..................................................................................... 109
4.2.8. EXPLORADOR DE OBJETOS. ........................................................ 109
4.2.9. CAJAS DE DIÁLOGO. ...................................................................... 110
4.3. TÉCNICAS DE INTERACCIÓN VISUAL: ASPECTOS DE DISEÑO. ..... 113

4.3.1. MÚLTIPLES VENTANAS. ................................................................. 113

4.3.2. MENÚS.............................................................................................. 115
4.3.3. MANIPULACIÓN DIRECTA. ............................................................. 117
4.3.4. FEEDBACK VISUAL. ........................................................................ 118
4.3.5. GESTOS............................................................................................ 121
4.3.6. DEPENDENCIAS. ............................................................................. 122
4.3.7. ANIMACIÓN. ..................................................................................... 122
4.3.8. EXPLORADORES DE OBJETOS..................................................... 123
4.3.9. CAJAS DE DIÁLOGO. ...................................................................... 124
UNIDAD TEMÁTICA V .......................................................................................... 126

LA INTERFAZ WEB Y SUS PRINCIPIOS DE DISEÑO ....................................... 126

5.1. CARACTERÍSTICAS ESPECÍFICAS DE UN SITIO. .............................. 126

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 5
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
5.1.1. RESPECTO AL PERFIL DEL USUARIO. ......................................... 127
5.1.2. RESPECTO A CUESTIONES DE DISEÑO. ..................................... 128
5.1.3. RESPECTO A LOS OBJETIVOS...................................................... 130
5.2. PARTICULARIDADES EN EL DESARROLLO WEB. ............................. 132

5.2.1. ACTIVIDADES PREVIAS AL DISEÑO DE SITIOS WEB. ................ 133

5.2.2. INGENIERÍA DE USABILIDAD. ........................................................ 137
5.3. PRINCIPIOS DE DISEÑO DE UN SITIO WEB. ...................................... 140

5.3.1. PRINCIPIOS DE DISEÑO A NIVEL DE SITIO. ................................ 145

5.3.2. PRINCIPIOS DE DISEÑO A NIVEL DE PÁGINA. ............................ 150
5.3.3. PRINCIPIOS DE DISEÑO A NIVEL DE CONTENIDO. .................... 155
UNIDAD TEMÁTICA VI ......................................................................................... 158

UX .......................................................................................................................... 158

6.1. ¿QUÉ ES UX? ......................................................................................... 158

6.2. ¿CUÁL ES LA DIFERENCIA ENTRE EL DISEÑO UX Y EL DISEÑO UI?

159

6.3. ELEMENTOS CLAVE DE LA EXPERIENCIA DE USUARIO. ................ 161

6.3.1. USABILIDAD. .................................................................................... 161

6.3.2. ACCESIBILIDAD. .............................................................................. 162
6.3.3. ARQUITECTURA DE INFORMACIÓN. ............................................ 163
6.3.4. DISEÑO CENTRADO EN EL USUARIO. ......................................... 164
6.3.5. INTERACCIÓN. ................................................................................. 166
6.4. PROCESO DEL DISEÑO UX. ................................................................. 168

6.4.1. INVESTIGACIÓN. ............................................................................. 168

6.4.2. ORGANIZACIÓN. .............................................................................. 169
6.4.3. PROTOTIPADO. ............................................................................... 169
6.4.4. PRUEBAS. ........................................................................................ 169
6.4.5. DISEÑO/UI. ....................................................................................... 170
6.5. TÉCNICAS PARA EL PROCESO DE DISEÑO UX. ............................... 170

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 6
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
6.6. WIREFRAMING. ...................................................................................... 171

6.6.1. TIPOS DE WIREFRAMES. ............................................................... 171

6.6.2. SOFTWARE PARA PROTOTIPADO. ............................................... 172
6.7. PRINCIPIOS DE DISEÑO UX. ................................................................ 174

6.7.1. CLASIFICACIÓN. .............................................................................. 174

6.7.2. JERARQUÍA VISUAL. ....................................................................... 178
6.7.3. COLOR. ............................................................................................. 179
6.7.4. PROPORCIÓN. ................................................................................. 182
6.7.5. ALINEACIÓN. .................................................................................... 183
6.7.6. REPETICIÓN. ................................................................................... 183
6.7.7. TEXTO............................................................................................... 183
6.7.8. SIMPLICIDAD. .................................................................................. 183
6.7.9. ACCESIBILIDAD. .............................................................................. 183
6.7.10. COHERENCIA. ................................................................................. 184
6.7.11. JERARQUÍA. ..................................................................................... 184
6.7.12. ÉNFASIS. .......................................................................................... 184
6.7.13. DIRECCIÓN. ..................................................................................... 184
6.7.14. SIMETRÍA.......................................................................................... 185
6.7.15. ESCALA. ........................................................................................... 185
6.7.16. EFICIENCIA. ..................................................................................... 185
6.7.17. ERROR HUMANO. ........................................................................... 188
6.7.18. ESTÉTICA. ........................................................................................ 190
6.7.19. OTROS PRINCIPIOS. ....................................................................... 195
REFERENCIAS BIBLIOGRÁFICAS...................................................................... 196

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 7
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
PRESENTACIÓN DEL DOSSIER ACADÉMICO

El presente dossier académico ha sido elaborado por el profesor de la materia, con

el fin de que el mismo sirva como material académico para los estudiantes que
cursan la materia de Interfaces de Usuario en la carrera de Sistemas Informáticos a
nivel Técnico Superior.

El mismo, se encuentra organizado en 6 unidades temáticas que abarcan los

aspectos teóricos y prácticos que el estudiante debe conocer y dominar para el
objeto de la materia, en ese entendido, en la Unidad Temática I se abarcan las
nociones generales sobre las nociones básicas de la programación y otros
conceptos importantes que el estudiante debe conocer, por otro lado, en las
Unidades Temáticas siguientes se abarcan ya, contenidos relacionados a los
lenguajes de programación, la lógica y fundamentos de la programación orientando
todo ello de forma práctica al desarrollo de aplicaciones básicas de escritorio
haciendo uso del Lenguaje de Programación C#, mismos que el estudiante debe
conocer para nutrirse de los conocimientos necesarios en la carrera de Sistemas de
Informáticos.

Se pone en conocimiento del lector que, el presente dossier académico hace

mención de las referencias bibliográficas a las cuales el profesor de la materia
acudió para la elaboración del mismo, se aclara que este dossier académico tiene
únicamente un fin académico mas no lucrativo, del mismo modo, se aclara que el
profesor de la materia ha realizado modificaciones y/o complementaciones en lo
que respecta al contenido de los temas y su estructura, finalmente, se reconoce los
derechos legales que tuvieran sobre los libros que se enlistan en las referencias
bibliográficas a los autores correspondientes de cada uno de ellos.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 8
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
UNIDAD TEMÁTICA I

FUNDAMENTOS EN HCI

La multiplicidad de aspectos, metodologías y de procesos a considerar para el

diseño de una correcta interfaz, que sea óptima desde el punto de vista del usuario
y acorde a la lógica del objetivo específico del sistema, hace necesario conocer
todos los conceptos y terminologías que estén íntimamente relacionados con el área
de HCI.

1.1. ¿QUÉ ES HCI?

La interacción hombre–computadora, comúnmente referida con la abreviatura HCI

por Human Computer Interaction, es el intercambio observable de información,
datos y acciones entre un humano y la computadora, y viceversa. Está constituida
por el diálogo, la conversación, la comunicación 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 cuál la interacción hombre-
máquina es establecida, manejada y controlada. Conforma la parte del software y
hardware que permite, que ese intercambio de información y sus distintas
secuencias o hilos de diálogo, se produzcan. Estos dos términos, interacción
hombre-máquina e interfaz del usuario, están muy entrelazados en el proceso de
desarrollo y en estos casos se los usa como sinónimos. En muchos contextos
ambos conceptos se refieren a las entradas del usuario final, su tratamiento
localizado de las mismas, la visualización de los estados del sistema y la
presentación de las salidas o respuestas. La transformación funcional o algorítmica
de las entradas de la información a las salidas del sistema, pertenece a la
componente computacional o de aplicación. Entonces, a través de HCI, se despega
la lógica de la interacción como por ejemplo, la lógica del negocio. Desde una
concepción más amplia, se puede definir HCI también como una disciplina. Se la
considera un área dentro de las Ciencias de Computación que se encarga del
diseño, evaluación e implementación de sistemas de computación interactivos, para

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 9
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
el uso humano, incluyendo el estudio de todos los fenómenos concernientes a ello.
Analizando más en profundidad esta última definición, los alcances de esta nueva
disciplina son muy difusos y, pueden influir en ella factores muy heterogéneos,
desde aspectos tecnológicos vinculados al hardware a aspectos sociales o
psicológicos del usuario.

Inciden además, cuestiones diversas como facilidad de uso, productividad, eficacia

para expresar distintas posibilidades, capacidad de adaptación de acuerdo a
distintos usuarios, desde niños a personas de mayor edad, pasando por distintas
culturas y características sociales.

Como es un área que se centra fundamentalmente en la interacción entre humanos

y máquinas, se pueden plantear muchas situaciones diferentes. Cuando se refiere
a “humano”, puede considerarse desde un usuario particular, un grupo de usuarios,
una organización o corporación, hasta el mundo entero, como es el caso de las
aplicaciones para Internet. Cuando se refiere a “máquina”, puede incluirse desde
una simple PC, una workstation, una Intranet o hasta una supercomputadora con
máquinas computacionales embebidas.

Además, HCI se convierte en un área interdisciplinaria, que puede nutrirse de

nociones provenientes de la Psicología, por la aplicación de teorías de procesos
cognitivos y el análisis empírico del comportamiento del usuario; de la Sociología y
Antropología, por el estudio de la interrelación entre la tecnología, el trabajo y las
organizaciones; del Diseño Industrial, por el estudio y diseño de productos de
interacción; del Diseño 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 Tecnología
e Ingeniería, vinculados a la capacidad gráfica de las pantallas y dispositivos, para
que el usuario ingrese información, ya sea por teclado, mouse, lápiz óptico, pantalla
digital, voz, teléfono, entre otros medios. Entonces, mientras exista el diálogo entre

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 10
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
una máquina y un humano, surgirán innumerables factores relacionados con el HCI,
que incluirán todos los aspectos para el diseño y construcción de interfaces del
usuario adecuadas.

A continuación, se mostrará una figura que resume las interrelaciones entre los
diferentes tópicos que aborda el área de HCI.

Los sistemas de computación 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 integración. Además del uso y
contexto social de las computadoras, del lado humano debemos considerar el
procesamiento humano de la información, la comunicación -el lenguaje- y las
características físicas del usuario ergonometría.

Desde el punto de vista de la computadora, una variedad de tecnologías han sido

desarrolladas para soportar la interacción con humanos, como los dispositivos de
entrada y salida. Existen numerosas técnicas para organizar el diálogo y generarlo,
las cuáles sirven para implementar cuestiones más específicas del mismo. Ejemplos

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 11
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
de estos se encuentran en las técnicas de visualización por computadora, técnicas
para diálogo multimedial, para diálogo no visual o conversacional, técnicas de
Inteligencia Artificial, de diálogo basado en agentes, técnicas para diálogo multi-
usuario, entre otras.

Diálogos complejos o interfaces del usuario con características de avanzada,

pueden llevar a consideraciones de arquitecturas de sistemas necesarias para
soportar cuestiones como tiempos de respuesta, interconectividad de redes,
múltiples ventanas, interfaces multiusuarios cooperativas, utilización de bases de
datos, acceso a servicios específicos, entre otros.

Finalmente, hay un proceso de desarrollo que incorpora el diseño del diálogo,

herramientas de programación y técnicas de evaluación, cuyos resultados afectan
las etapas anteriores, retro alimentándolas, en un proceso de continua mejoría.

1.2. EVOLUCIÓN DE LA HCI.

Debido a que las formas, los medios, los canales de interacción entre los humanos
y las computadoras se modifican con el tiempo y evolucionan muy rápidamente, 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 año 1968. Este pequeño dispositivo produjo desde el punto de vista
del HCI, el surgimiento de un nuevo estilo de interacción y de comunicación,
incorporado en las Interfaces Gráficas. El usuario pasó, de expresar sus intenciones
mediante la escritura de comandos, a demostrarlas manualmente mediante el
señalamiento, el cliqueo, el arrastre de objetos. Además, trajo como consecuencia
toda la programación gráfica basada en el mouse y sus eventos.

Entonces, la interacción hombre-máquina o la interfaz del usuario se ve afectada

por diversos factores. Puede variar dependiendo de diferentes situaciones,
haciendo sumamente complejo el diseño de la misma. Proveer el mejor estilo de

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 12
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
diálogo en la interfaz, la visualización y el comportamiento más óptimos no es una
tarea fácil, se maneja con información incierta, con un alto nivel de ambigüedad y
variabilidad temporal, que hace complicado tener parámetros absolutos o estáticos,
sobre el grado de corrección de la misma. Se requiere de un proceso de evaluación
permanente y espíritu crítico para que la interacción sea más natural.

Lo que se percibe como “amigable” varía con la introducción de tecnologías y el

surgimiento de actitudes distintas, por ejemplo, la simplicidad y naturalidad con que
los niños y adolescentes usan los mensajes de texto de la telefonía celular.

HCI se encuentra íntimamente relacionada con el avance de la tecnología, 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 más influyentes en la evolución del HCI, se pueden mencionar:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 13
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

1.3. TIPOS DE DIÁLOGO HUMANO - COMPUTADORA.

En el año 1986, E. L. Hutchins, estableció que existen al menos dos metáforas o

formas en que los humanos interactúan con una computadora: la “metáfora

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 14
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
conversacional” y la del “modelo del mundo”. Estas dos metáforas corresponden
unívocamente a dos tipos de diálogo, el secuencial y el asincrónico
respectivamente.

En la metáfora conversacional, la interfaz del usuario se basa en representaciones

implícitas de los objetos. El usuario debe describir acciones para manipular objetos
en forma indirecta.

Además, él debe pasar de una etapa de diálogo a la siguiente de una manera

predecible y preestablecida por el sistema. Esta metáfora, permite tanto a los
desarrolladores de software como a los usuarios, visualizar una secuencia lógica y
específica del comportamiento. Por tal motivo, el diálogo que genera se denomina
“Diálogo Secuencial”. Este tipo de diálogo está incluido en la interacción pregunta-
respuesta (request-response), lenguajes de comandos, navegación a través de
menús y en las entradas de datos.

El diálogo secuencial, está relacionado con la interacción vía el teclado, que

generalmente se utiliza en los lenguajes tradicionales donde las sentencias de
entrada y salida, están intercaladas con el cómputo del sistema.

En la metáfora 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 manipulación

de esas representaciones visuales de los objetos. Por tal motivo, el estilo de
interacción característico de esta metáfora, es la “Manipulación directa” y el mouse,
es el dispositivo físico apropiado para esto.

También, se lo referencia como “Diálogo Asincrónico”, pues es el usuario quien

decide cuándo iniciar el diálogo y con qué objeto hacerlo. A diferencia del diálogo
secuencial, donde se presenta ante el usuario una tarea por vez, aunque sea elegir

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 15
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
entre varias opciones de un menú, en el diálogo asincrónico se dispone de muchas
opciones al mismo tiempo.

Es asincrónico desde el punto de vista que la secuenciación de cada camino es

independiente de los demás.

También al diálogo asincrónico se lo denomina “Diálogo basado en Eventos”, pues

son las acciones del usuario que inician la secuencia del diálogo vistas como
eventos de entrada. Asociados a esta metáfora del modelo del mundo, se pueden
encontrar los “Diálogos no lineales” o “multithread”, que se refieren a la multiplicidad
de caminos de diálogo, de hilos de control simultáneos, de acciones alternativas
disponibles para el usuario en un determinado momento.

Las cajas de diálogo están relacionadas estrechamente con este tipo de diálogo.
Otro tipo de diálogo, es el “Diálogo Concurrente” que es un diálogo multi-thread, en
el cuál más de un hilo de diálogo puede ser desarrollado paralelamente.

Por ejemplo, un reloj que esté presente mientras que el usuario está dibujando.
Además, de existir muchas alternativas de diálogo, éstas están abiertas en forma
simultánea.

Entonces, se tienen:

En la actualidad, están surgiendo otras formas de interacción, como la “Interacción

social o grupal”, donde existe un grupo de usuarios que interactúa en forma conjunta
con la interfaz.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 16
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Este tipo de interacción, es el provisto en las “Interfaces para Groupware”, que se
explicará más adelante. Se caracteriza por tener que amoldarse a la complejidad y
dinámica del grupo, y por proveer mecanismos específicos para solventar
cuestiones de coordinación, comunicación y colaboración entre los miembros del
mismo.

También, emergió el concepto de “Interfaz o Interacción basado en Agentes”,

infundido por Pattie Maes [Maes P. Wexelblat A., 1996], en donde el diálogo ya no
es iniciado y controlado por el usuario como en Manipulación directa, sino que la
interfaz tiene la capacidad de hacerlo.

La misma puede, tanto empezar una conversación como finalizarla, puede guiar,
preguntar, sugerir, enseñar, interrumpir y demás actitudes, que no son admisibles
en los tipos de diálogos convencionales.

Este tipo de interacción, está basado sobre una metáfora en donde la interfaz se
comporta como un interlocutor humano, que tiene por objetivo colaborar con el
usuario en la resolución de sus problemas.

El concepto de manipulación directa sigue vigente hoy en día en las aplicaciones

que soportan interación gestual como las presentes en smartphones, tablets, juegos
para XBOX, Wii y PS Move.

1.4. INDEPENDENCIA DEL DIÁLOGO.

La introducción de un sistema informático, 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 otras 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

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 17
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
está ingresando, para evitar la invocación errónea de un comando complejo,
utilizando buenos mensajes de aclaración y confirmación, entre otras cuestiones.

El concepto es que la introducción de una solución informática, cambia la realidad

y que siempre tendrá asociado modificaciones más 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 interacción con el mismo.
Pero, al principio, esta visión del sistema interactivo no se podía aplicar.

La forma tradicional de desarrollar sistemas de software, implicaba que las

cuestiones de interfaz y de diálogo con el usuario, estaban fuertemente ligadas con
el software computacional.

Las sentencias de entrada y salida al usuario, eran tratadas sin distinción dentro del
resto del código, podían estar inmersas y entremezcladas dentro de sentencias de
control, causando un fuerte acoplamiento entre el flujo de diálogo con el flujo de
control del sistema.

Si las cuestiones de interacción 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 identificación y tratamiento, el diálogo

se convierte en una componente cada vez más resistente a cambios, no se puede
profundizar en las necesidades de adaptación a cuestiones del usuario, y
principalmente, no permite que la interfaz cumpla con un ciclo de desarrollo especial
que la caracteriza, con etapas de diseño, prototipación y evaluación, que se
suceden en forma iterativa, a través de un marco donde las correcciones,
modificaciones y refinamientos son una constante.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 18
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
En este contexto, H. Rex Hartson, Roger W. Ehrich, en el año 1981, establecieron
una definición formal sobre el concepto de “Independencia de Diálogo”, en donde
especificaron que un sistema interactivo, debía conformarse fundamentalmente, de
dos componentes de software igualmente importantes e independientes,
denominadas interfaz del usuario y componente de aplicación, o componente de
diálogo y componente de cómputos respectivamente, que deben ser tratadas en
forma autónoma, desde el inicio del desarrollo del sistema [Hartson, R. y Hix, D.,
1989] Esta definición, se basa en el reconocimiento de las cuestiones de interacción
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 definición de una estructura del sistema, en donde se evite la
modelización conjunta e intercalada, entre la lógica de los procesos y las
operaciones de entrada y salida, desde y hacia el usuario.

En la práctica, esto significa que la componente computacional o los procesos

referenciados más recientemente como la lógica del negocio, se desentienden de
todo lo que abarca los aspectos de la interfaz, o sea de cómo es su estilo de
interacción, cómo son las cuestiones del diálogo y los hilos posibles de
conversación, si provee un lenguaje de comandos para comunicarse con el usuario
final o si está basada en menús o formularios.

Se despreocupa de cómo la entrada es adquirida desde el usuario y de la forma en

que le son visualizados los resultados. Directamente focaliza su interés
específicamente en el procesamiento de la información. La independencia del
diálogo presenta principalmente dos grandes ventajas.

Una, está íntimamente relacionada con la Ingeniería de Software, debido a que esta
separación es crucial tanto para modificar fácilmente 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 específicas del usuario, como sus preferencias, hábitos, costumbres,

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 19
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
manera de ser, características de sexo o edad, experiencia particular, entre otros,
pueden ser tratadas y evaluadas con énfasis y en forma especial.

Esto es, permite diseñar el diálogo de una manera que la computadora se adapte a
los requerimientos del usuario, convirtiéndose en una herramienta que se amolda al
estilo particular del mismo.

Desde esta perspectiva, el diálogo podrá conjugar la simplicidad de interacción con

la optimización en el proceso de validación, proveyendo feedback y ayudas
eficientes, para asistir al usuario en su trabajo y lo potencie, guiándolo en su proceso
de resolución de problemas.

En este sentido, la Independencia de diálogo da lugar al tratamiento, estudio y

evaluación de aspectos del usuario, vinculados a la experiencia, motivación, edad,
sexo, formación, capacidades, suministrándole la relevancia necesaria, para poder
encarar y desarrollar correctamente la componente de interfaz.

De todo esto, hay que resaltar y no olvidar que la independencia de Diálogo es una
estrategia que permite que las decisiones de diseño que afectan únicamente a la
componente de diálogo, se realicen en forma independiente de aquellas que afectan
a la estructura del sistema de aplicación y al corazón funcional.

1.5. ¿CÓMO SE LOGRA ESTA ESTRATEGIA?

La independencia del diálogo 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 módulos independientes, separados del
resto de las rutinas de cómputo.

Esto significa una buena práctica de programación, pero no asegura la

independencia del diálogo, debido a que los procedimientos orientados al diálogo,
deben estar totalmente desacoplados del código computacional y debe garantizar
su modificación en forma independiente del resto del programa. Aún hoy, en muchos

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 20
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
casos, el conocimiento relacionado con los detalles del diálogo siguen inmersos
dentro del código de la aplicación, y la tarea de desarrollar la interfaz, continúa
erróneamente ligada a una tarea de programación.

La independencia del diálogo se soporta a través de la separación del diálogo y el

software de la aplicación desde las etapas iniciales del desarrollo.

Esto significa que un sistema de aplicación interactivo, se compone de una

componente de diálogo, a través de la cual se lleva a cabo toda la comunicación
entre el usuario final y el sistema, y una componente computacional, que incluye los
mecanismos de procesamiento funcional más específicos del sistema de aplicación,
ámbito en donde no hay una interacción directa con el usuario final.

La nueva entidad, el protagonismo y la visibilidad que toma la componente de

diálogo en el desarrollo de sistemas, implica un proceso de diseño, rediseño,
evaluación y mantenimiento, particular e independiente al de la componente
funcional, ligándose en el momento que se requiere una rápida prototipación o
ejecución del sistema total.

Como principales consecuencias de la Independencia del Diálogo, se pueden

mencionar la aparición de un nuevo rol, que es la del desarrollador del diálogo, quién
se va a responsabilizar de todo el proceso de desarrollo de la interfaz, y el
surgimiento de un diálogo interno entre la componente de interfaz y de la aplicación,
que es el que permitirá el enganche final de ambas partes, conformando el sistema
interactivo en su completitud.

1.6. LA APARICIÓN DE UN NUEVO ROL: EL DESARROLLADOR DE

DIÁLOGO.

Por mucho tiempo, los dos principales roles involucrados en el desarrollo del
software era el programador de la aplicación y el usuario final del sistema. Estos
dos roles diferentes frecuentemente tenían graves problemas en la comunicación.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 21
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
El programador impaciente por llegar a la codificación tenía 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 técnicas sobre determinado
comportamiento efectuado por el mismo.

La aparición del rol de analista de sistemas, proveyó un medio de entendimiento

entre el programador, inmerso en un contexto completamente técnico y el del
usuario del sistema.

En los últimos tiempos, ante la demanda de interfaces del usuario de alta calidad y
cada vez más efectivas, la aparición de especialistas en factores humanos fueron
adquiriendo una significante importancia en los equipos de desarrollo de los
sistemas de computación, puesto que focalizan su atención y estudio a las
necesidades de los usuarios y a la forma de comunicación con los mismos.

Esto llevó al surgimiento de un nuevo rol, denominado desarrollador del diálogo ó

también llamado autor, diseñador del diálogo, ó ingeniero de la interfaz del usuario.

El desarrollador del diálogo, 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 diseño, la implementación y evaluación de la forma,
contenido, estilo y secuenciación del diálogo.

Él está involucrado en todo el ciclo de vida, incluyendo análisis de tareas,

especificación de requerimientos del sistema, investigación y aplicación de normas
de diseño, cuestiones de factibilidad del desarrollo, dirección de todo el proceso
prototípico de la interfaz.

Durante el diseño e implementación del diálogo, este desarrollador hace uso de

principios psicológicos y de factores humanos para construir y, paralelamente,
evaluar y refinar una interfaz que soporte una comunicación efectiva y simple, entre

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 22
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
el ser humano y la máquina. Debe ser muy sensitivo frente a los requerimientos
cognitivos del usuario final y a sus aspectos particulares, debe profundizar por
ejemplo situaciones como:

▪ Formas particulares en que se reacciona a los distintos colores, según

diferentes sociedades. Este es el caso del color rojo que en países orientales
no está asociado a situaciones de riesgo;
▪ Los diferentes hábitos de lectura, que puede afectar en el orden de recorrido
de la pantalla y posicionamiento de los objetos en la misma;
▪ Las distintas actividades que implican diferentes posturas y costumbres que
condicionan el estilo de la interacción. Por ejemplo, si es mejor la entrada por
voz o por teclado, en un entorno industrial o en una carga masiva de datos;
▪ La postura, el nivel de atención, los horarios de trabajo, afectan interfaces
distintas que deben apuntar a mejorar la productividad del usuario;
▪ La edad y nivel cultural del usuario, que lleva a la utilización de distintas
metáforas para construir la interfaz, donde su interpretación depende de
grados de madurez y aspectos sociales del mismo.

La Independencia de diálogo, define un marco en donde estas cuestiones como

muchas otras más, pueden ser profundizadas y consideradas dentro del diseño de
la interfaz, permitiendo el refinamiento y revisión de las mismas, su comprobación y
la realización de modificaciones rápidas, por lo que el proceso de evaluación y el
ciclo de revisión se puede efectuar múltiples veces.

1.7. DIALOGO INTERNO Y EXTERNO.

El diálogo externo es aquel que abarca toda la interacción entre el usuario final y la
componente del diálogo, es la misma interfaz hombre-computadora. Pero, la
Independencia del Diálogo ha provocado la creación de una nueva interfaz que toma
lugar entre la componente del diálogo y la computacional, y, en consecuencia, esto
trae aparejado la aparición de un nuevo tipo de diálogo entre ambas. La componente
funcional que no tiene mecanismos propios para la comunicación directa con el

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 23
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
usuario final, requiere de un diálogo interno necesario con la componente de
diálogo.

Este diálogo, se basa principalmente en la definición concreta del intercambio de

información entre ambas componentes, los tipos, formatos de datos que una espera
de la otra, si van a estar ya validados o no, cuáles son las condiciones estipuladas,
cuestiones de excepciones o errores que pueden surgir, quién los trata, como
también en qué forma y estructura, se entregarán los resultados entre las partes.

Hay que estipular claramente, cuáles serán los servicios y las funciones que una
componente necesita de la otra y, las cuestiones protocolares y de sincronización
necesarias.

Esta nueva interfaz interna, con su diálogo específico, son las bases para la
comunicación entre el desarrollador del diálogo y el del software de la aplicación
durante el proceso de diseño del sistema y es un punto crucial para llevar a cabo la
ligazón del diálogo y el cómputo en los tiempos de ejecución.

El diálogo interno, y su representación formal en la etapa de diseño constituye una

clave esencial para lograr la Independencia del Diálogo. Tanto la interfaz del usuario
o la aplicación, pueden ser alteradas en forma independiente siempre y cuando, se
mantenga la consistencia en la representación del diálogo interno común a ambas.

1.8. COMPLEJIDADES DE LA INDEPENDENCIA DEL DIÁLOGO.

Lamentablemente la estrategia de la Independencia de diálogo, 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 diálogo, aumenta el grado
de comunicación e interacción entre los diseñadores y los programadores, sumando
problemas de ambigüedades, malas interpretaciones, deslinde de
responsabilidades, pugna por toma de decisiones, entre otros inconvenientes.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 24
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
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 también, la definición precisa
sobre el diálogo interno, estipulando cuáles son exactamente los datos, de qué tipo
y formato es la información que fluirá entre la componente de interfaz y la de la
aplicación, como así los servicios o funciones que se necesitan de cada una.

Otro inconveniente provocado por la Independencia del Diálogo, es que, debido a

la existencia de nuevas componentes y módulos, puede causar una disminución en
la performance total del sistema, a medida que aumenta la intercomunicación entre
las mismas, en tiempo de ejecución.

Esto lleva a la consideración de nuevas arquitecturas del sistema que enfatice y

facilite por ejemplo, la ejecución concurrente entre la componente de diálogo y la
computacional, y considere hardware innovador para el soporte del diálogo.

En el plano de un diálogo secuencial, la separación física entre la componente de

interacción y la computacional, desde la etapa de diseño es medianamente directa.
Esto se debe a que resulta fácil delinear un patrón de interacción sincrónico que
considera las etapas de entrada de datos, requerida al usuario final, del proceso de
cómputo de los dichos datos y, de la salida resultante provista por el sistema.

En cambio, en un diálogo con manipulación directa los costos para lograr la

separación entre las dos componentes es mucho más alto, porque el usuario final
realiza operaciones y acciones en la interfaz sobre las representaciones visuales de
los objetos de la aplicación de una manera directa, visual y asincrónica.

En este caso, la ejecución del diálogo y del cómputo tienden a estar más
interrelacionados y generalmente se comparte representaciones de datos comunes
de los objetos de la interfaz y de los de la aplicación subyacente.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 25
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
En un diálogo con manipulación directa, hay una necesidad de acercamiento entre
la interfaz y la semántica de la aplicación, por ejemplo, para un simple caso de
proveer feedback semántico, y esto hace más difícil la separación de las
componentes requerida en la Independencia de diálogo. 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
diseño 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 diálogo son mayores que sus posibles dificultades.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 26
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
UNIDAD TEMÁTICA II

UI

En el ámbito de la informática y el diseño, la interfaz de usuario (UI) desempeña un

papel fundamental al permitir la interacción entre los usuarios y los sistemas o
dispositivos.

En términos generales, una interfaz es el punto de contacto entre dos sistemas o

entidades, facilitando la comunicación y el intercambio de información. En el
contexto de la tecnología, la interfaz de usuario se refiere a la manera en que un
usuario interactúa con un software, un dispositivo o una plataforma digital, a través
de elementos visuales, auditivos o táctiles.

2.1. ¿QUÉ ES UNA INTERFAZ?

El término interfaz proviene del latín "inter-" (entre) y "facies" (aspecto o cara). En
su sentido más básico, se refiere al punto de contacto o la superficie de interacción
entre dos entidades, sistemas o elementos. En otras palabras, una interfaz es el
medio a través del cual se produce una comunicación o interacción entre dos
componentes que, de otro modo, estarían aislados o no podrían intercambiar
información.

Cuando hablamos de "interfaz" en el contexto de la informática o la tecnología, nos

referimos a los sistemas que permiten que un usuario o una máquina interactúe con
otro sistema, dispositivo o software. Este término abarca tanto la interfaz física (por
ejemplo, los puertos o conexiones) como la interfaz más abstracta y conceptual,
como las interfaces de software.

2.2. TIPOS DE INTERFAZ.

Al presente existen diferentes tipos de interfaz, en esta sección conoceremos a las

mismas:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 27
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
2.2.1. INTERFACES DE LENGUAJE NATURAL.

Las interfaces de lenguaje natural son quizás el sueño e ideal de usuarios

inexpertos, debido a que permiten a usuarios interactuar con la computadora en su
lenguaje cotidiano o natural. No se requieren habilidades especiales de usuarios,
quienes interactúan con la computadora mediante lenguaje natural.

La pantalla descrita en la figura anterior menciona tres preguntas de lenguaje natural

de tres aplicaciones diferentes. Observe que la interacción con cada una parece
muy fácil. Por ejemplo, la primera frase -“Mencione todos los vendedores de quienes
se conocen sus cuotas este mes”- parece sencilla. Las sutilezas e irregularidades
que residen en las ambigüedades del lenguaje natural producen un problema de
programación sumamente exigente y complejo.

Los intentos por interactuar con lenguaje natural para algunas aplicaciones en las
cuales cualquier otro tipo de interfaz no es factible (por decir, en el caso de un
usuario que está incapacitado) se está obteniendo con algo de éxito; sin embargo,
estas interfaces normalmente son caras. Los problemas de implementación y la

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 28
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
demanda extraordinaria en los recursos de informática hasta ahora han mantenido
las interfaces de lenguaje natural a un mínimo. Sin embargo, la de manda existe y
muchos programadores e investigadores están trabajando diligentemente en las
interfaces de lenguaje natural.

Es un área de crecimiento y, por lo tanto, merece super visión continua. Algunos

sitios Web, tal como Ask Jeeves (www.askjeeves.com), usan una interfaz natural
para que los usuarios introduzcan su consulta de búsqueda. Cuando la consulta se
introduce, Ask Jeeves responde con una lista de consultas que coincide con la
pregunta que el usuario introdujo.

2.2.2. INTERFACES DE PREGUNTA Y RESPUESTA.

En una interfaz de pregunta y respuesta, la computadora despliega en pantalla una

pregunta para el usuario. Para interactuar, el usuario introduce una respuesta
(mediante pulsaciones del teclado o un clic del ratón) y la computadora después
actúa en esa información de entrada de acuerdo con su programa, normalmente
pasando a la siguiente pregunta.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 29
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
2.2.3. LAS INTERFACES DE HARDWARE.

Se refieren a las conexiones físicas y los protocolos que permiten que los
dispositivos se comuniquen entre sí o con otros sistemas. A menudo están
involucradas en la transmisión de datos entre componentes de un sistema, como el
procesador, la memoria, los periféricos (teclados, ratones, pantallas, etc.).

2.2.4. INTERFACES DE RED (NETWORK INTERFACES).

Estas interfaces permiten que los dispositivos se conecten y se comuniquen entre

sí a través de redes, ya sean locales (LAN) o a través de internet (WAN). Las
interfaces de red son esenciales en la infraestructura de comunicaciones modernas.
En esta subcategoría de interfaces de hardware tenemos:

▪ Ethernet: Ya mencionada anteriormente, es una interfaz que se utiliza para

conectar dispositivos dentro de una red local.
▪ Wi-Fi (Wireless Fidelity): Es una interfaz inalámbrica que permite la conexión
a una red local mediante ondas de radio, sin necesidad de cables.
▪ VPN (Virtual Private Network): Aunque no es una interfaz física, una VPN
crea una interfaz segura que conecta de forma virtual un dispositivo a una
red privada a través de internet.

2.2.5. INTERFACES DE ENTRADA/SALIDA (I/O INTERFACES).

Las interfaces de entrada/salida (I/O) son el puente que conecta el procesador de

un sistema con los dispositivos periféricos, ya sean de entrada (como teclados y
ratones) o de salida (como monitores o impresoras). En esta subcategoría de
interfaces de hardware tenemos:

▪ Interfaz de entrada: Permite la recepción de información desde dispositivos

como teclados, ratones, pantallas táctiles, escáneres, cámaras, entre otros.
▪ Interfaz de salida: Facilita la transmisión de datos hacia dispositivos como
pantallas, impresoras, altavoces, etc.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 30
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
2.2.6. INTERFAZ DE USUARIO EN DISPOSITIVOS MÓVILES (MOBILE UI).

Específicamente diseñada para teléfonos, tabletas y otros dispositivos móviles, la

interfaz de usuario móvil presenta una estructura optimizada para pantallas más
pequeñas y controles táctiles. Esta interfaz tiene que ser especialmente eficiente en
cuanto a usabilidad y accesibilidad.

2.2.7. INTERFACES TÁCTILES (TOUCH INTERFACES).

Aunque también se pueden incluir dentro de las interfaces gráficas de usuario (GUI),
las interfaces táctiles tienen su propia categoría, ya que permiten la interacción a
través del contacto físico con pantallas sensibles al tacto.

Esta subcategoría de interfaces ha transformado el uso de dispositivos como

smartphones, tabletas y algunos computadores portátiles, haciendo que la
experiencia sea más directa e intuitiva.

2.2.8. INTERFACES DE REALIDAD AUMENTADA (ARUI) Y REALIDAD

VIRTUAL (VRUI).

La realidad aumentada (AR) y la realidad virtual (VR) utilizan interfaces que permiten
una interacción inmersiva, donde el usuario no solo ve una pantalla, sino que
interactúa con el entorno digital a través de sensores de movimiento, gafas
especiales, guantes o dispositivos hápticos. En esta categoría de interfaces de
usuario tenemos:

▪ AR (Realidad Aumentada): Superpone elementos digitales sobre el mundo

real, como en aplicaciones de navegación o juegos (por ejemplo, Pokémon
GO).
▪ VR (Realidad Virtual): Crea entornos completamente virtuales en los que el
usuario puede interactuar, como en simuladores o videojuegos.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 31
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
2.2.9. INTERFACES DE HOLOGRAFÍA (HOLOGRAPHIC INTERFACES).

Aunque todavía en desarrollo, las interfaces holográficas representan el futuro de

las interfaces de usuario, permitiendo que los usuarios interactúen con imágenes
tridimensionales flotantes en el espacio.

Microsoft HoloLens, por ejemplo, es un dispositivo que combina AR y holografía.

2.2.10. INTERFACES CEREBRO - COMPUTADORA (BCI - BRAIN -

COMPUTER INTERFACES).

Estas interfaces permiten la interacción entre el cerebro humano y una máquina,

como un ordenador o una prótesis. A través de sensores neuronales o
electroencefalografía (EEG), las BCIs pueden interpretar señales cerebrales y
convertirlas en comandos que una computadora o dispositivo puede entender. Son
muy prometedoras en el campo de la neurociencia y la medicina.

También son denominadas interfaces cerebro - máquina, es un área fascinante y

avanzada de la tecnología que permite que las señales del cerebro humano se
utilicen para controlar dispositivos externos, sin necesidad de interacción física
directa. Estas interfaces tienen un enorme potencial en aplicaciones de salud,
robótica, y hasta en el entretenimiento.

A continuación, te dejo algunos ejemplos interesantes y actuales de BCI:

▪ Neuralink (Elon Musk): Es una empresa de neurotecnología fundada por Elon

Musk, con el objetivo de desarrollar implantes cerebrales para facilitar la
comunicación directa entre el cerebro humano y las computadoras. El
dispositivo utiliza una serie de pequeños hilos delgados insertados en el
cerebro que pueden captar y transmitir señales neuronales.
Neuralink tiene como meta tratar enfermedades neurológicas y trastornos
cerebrales, como la parálisis o el Alzheimer, y permitir que los pacientes
controlen dispositivos o prótesis con solo pensar en ello.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 32
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
En sus primeras demostraciones, Neuralink mostró cómo un cerdo con un
implante podía controlar un dispositivo, y también se ha presentado la idea
de que los humanos puedan usarlo para interactuar con computadoras o
incluso para mejorar las capacidades cognitivas.
▪ BrainGate: Es un sistema BCI desarrollado por un grupo de investigadores
en la Universidad de Brown y otras instituciones. Utiliza un implante en el
cerebro para registrar las señales neuronales y permitir que los usuarios
controlen dispositivos como computadoras, prótesis de brazo y otras
máquinas con sus pensamientos.
El sistema se utiliza principalmente en pacientes con parálisis severa,
permitiéndoles controlar un cursor en una pantalla o mover una prótesis
mediante señales cerebrales.
Uno de los logros más destacados de BrainGate fue permitir que un hombre
tetrapléjico controlara un brazo robótico para tomar una taza y llevarla a su
boca, simplemente con su pensamiento.
▪ Emotiv: Emotiv es una empresa que produce dispositivos de
electroencefalografía (EEG) portátiles, que se colocan en el cráneo y pueden
captar las señales cerebrales. Estos dispositivos permiten la interacción entre
el cerebro y computadoras sin necesidad de implantes invasivos.
Emotiv ofrece dispositivos BCI que se utilizan tanto para investigación como
para aplicaciones comerciales. Estos incluyen el control de videojuegos
mediante pensamientos, la investigación sobre el estado emocional de una
persona, e incluso el monitoreo del estado de salud mental.
Emotiv ha creado un dispositivo llamado Emotiv Epoc, un casco que permite
a los usuarios controlar aplicaciones y juegos con la mente, además de
estudiar patrones cerebrales asociados con diferentes emociones y
actividades cognitivas.
▪ OpenBCI: Es una plataforma de código abierto para la interfaz cerebro-
computadora que permite a los usuarios acceder y procesar señales
cerebrales con un dispositivo portátil. A diferencia de otros sistemas

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 33
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
comerciales, OpenBCI está diseñado para ser utilizado por investigadores y
desarrolladores que quieran experimentar y crear sus propias aplicaciones
BCI.
Se utiliza en la investigación de neurociencia, control de dispositivos
mediante pensamientos, y en el ámbito educativo para experimentar con la
lectura de ondas cerebrales. Los usuarios pueden monitorear su actividad
cerebral, así como controlar robots o dispositivos externos mediante sus
pensamientos.
OpenBCI ha sido utilizada en múltiples proyectos innovadores, como el
control de drones o la interacción con entornos virtuales mediante solo
pensamientos.

2.2.11. INTERFACES DE CONTROL POR GESTOS (GESTURE - BASED

INTERFACES).

En lugar de depender de dispositivos como teclados, ratones o pantallas táctiles,

las interfaces basadas en gestos permiten la interacción mediante movimientos de
las manos, la cara, o incluso el cuerpo completo.

Ejemplos de esto incluyen el uso de cámaras o sensores de movimiento (como los

que utilizan consolas de videojuegos como la Kinect de Xbox).

2.2.12. INTERFACES DE USUARIO ADAPTATIVAS (ADAPTIVE UI).

Estas interfaces ajustan su presentación y funcionalidad dependiendo del contexto,

las preferencias del usuario o las condiciones ambientales. Por ejemplo, una interfaz
de usuario puede adaptarse a diferentes tamaños de pantalla o cambiar en función
de las preferencias del usuario, como el modo oscuro o el modo accesible para
personas con discapacidades visuales.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 34
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
2.2.13. INTERFACES MULTIMODALES.

Las interfaces multimodales combinan diferentes tipos de interacción, como voz,

tacto y gestos, en una sola experiencia de usuario. Esto permite a los usuarios elegir
el método de interacción más conveniente en cada situación.

Un ejemplo sería un sistema que permita al usuario interactuar tanto mediante

comandos de voz como con la pantalla táctil, dependiendo de las circunstancias.

2.2.14. INTERFAZ DE LÍNEA DE COMANDOS (CLI).

En lugar de una interacción visual, las interfaces de línea de comandos requieren

que el usuario ingrese texto para realizar tareas. Este tipo de interfaz es más común
en sistemas operativos como Linux o en aplicaciones especializadas para usuarios
avanzados, como servidores y programación.

2.2.15. INTERFAZ DE PROGRAMACIÓN DE APLICACIONES (API).

En el ámbito del desarrollo de software, una API es una interfaz que permite la
comunicación entre diferentes programas o sistemas. No está orientada
directamente al usuario final, pero es crucial para la integración de servicios y el
intercambio de datos entre aplicaciones.

Las APIs permiten que, por ejemplo, una aplicación pueda acceder a datos de una
base de datos externa o interactuar con otros sistemas sin tener que entender cómo
están implementados.

Existen muchas APIs en diferentes áreas, y algunas de las más populares son de
servicios de redes sociales, herramientas de pago, servicios en la nube, mapas, etc.
Aquí te dejo algunos ejemplos de APIs conocidas y ampliamente utilizadas:

▪ API de Google Maps: Google Maps API es una de las APIs más populares
para integrar mapas interactivos y servicios de geolocalización en
aplicaciones web y móviles.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 35
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
▪ API de Twitter: La API de Twitter permite a los desarrolladores interactuar
con la plataforma de Twitter, acceder a tweets, publicar contenido y gestionar
cuentas.
▪ API de Stripe: Stripe es una de las plataformas más populares para procesar
pagos online. Su API permite a los desarrolladores integrar pagos en línea
de manera sencilla y segura.
▪ API de Facebook (Graph API): La Graph API de Facebook permite acceder
a una variedad de datos de la plataforma, como publicaciones, fotos, videos,
interacciones, entre otros.
▪ API de GitHub: GitHub ofrece una API RESTful que permite a los
desarrolladores interactuar con los repositorios de código, realizar acciones
como hacer commits, crear issues, gestionar pull requests, entre otros.
▪ API de YouTube (YouTube Data API): La API de YouTube permite acceder
a datos de la plataforma, como videos, comentarios, listas de reproducción,
canales y mucho más.
▪ API de Spotify: La API de Spotify permite integrar servicios de música en
aplicaciones, como acceder a playlists, álbumes, canciones y realizar
recomendaciones.

2.2.16. INTERFAZ DE VOZ (VUI).

Con el avance de la inteligencia artificial, las interfaces de voz están ganando

popularidad. Permiten que el usuario interactúe con un dispositivo o sistema
utilizando comandos de voz, como sucede con asistentes virtuales como Siri, Alexa
o Google Assistant.

Interfaz de Usuario Natural (NUI): Las interfaces naturales, como las interfaces de
gestos o las de realidad aumentada (ARUI) y realidad virtual (VRUI), buscan una
interacción más intuitiva. Estas interfaces se basan en cómo los humanos
interactúan de forma natural con el entorno, utilizando movimientos físicos, toques
o incluso el seguimiento ocular.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 36
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
2.2.17. INTERFAZ DE USUARIO (UI).

Es uno de los tipos más conocidos y hace referencia al conjunto de elementos y

controles mediante los cuales el usuario interactúa con una aplicación, un
dispositivo o un sistema operativo.

La UI se centra en la experiencia de interacción, de modo que el usuario pueda

realizar tareas de manera eficiente y agradable. Ejemplos incluyen los botones,
iconos, menús y pantallas de una aplicación.

2.2.18. INTERFAZ GRÁFICA DE USUARIO (GUI).

Una subcategoría de la interfaz de usuario es la interfaz gráfica de usuario (GUI),

que utiliza elementos visuales como íconos, imágenes y ventanas para representar
información y permitir al usuario realizar acciones mediante interacción visual y
táctil.

Es el tipo de interfaz más común en la mayoría de los dispositivos modernos (como

smartphones, computadoras, etc.).

2.3. ¿QUÉ ES UI?

Hasta este punto hemos establecido que es una interfaz, sin embargo, en la unidad
temática actual como dijimos en un inicio, nos enfocaremos en las interfaces de
usuario o UI, en ese sentido, aunque ya lo mencionamos antes, ahora debemos
adentrarnos más en este tema.

UI son las siglas de User Interface o en español: Interfaz de Usuario Forma parte
del proceso del diseño de UX. Es representada por una guía de estilos visuales en
base a un estudio previo de UX.

Es la vista gráfica que permite al usuario interactuar con un producto o servicio. UI

es el conjunto de elementos visuales, colores, iconografía, tipografías entre otros.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 37
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
2.4. COMPONENTES DE UNA UI.

Uno de los modelos más 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 año 1982.

Este modelo, es una descripción estructural que especifica la manera en que la

interfaz del usuario se relaciona con el sistema de aplicación, puntualizando la
independencia entre ambas partes del sistema.

Además, describe a la interfaz, mediante dos componentes: la Componente de

Presentación, que conforma su parte estática, y la de Control de Diálogo, que
describe la componente dinámica de la misma. Más tarde, en 1985, el modelo fue
modificado por Mark Green, perteneciente a la Universidad de Alberta, donde le
introdujo un tercer componente denominada Modelo Interfaz-Aplicación, para
referenciar el diálogo interno con la aplicación [Green, M.,1985]. La versión final del
modelo, quedó de la siguiente manera:

La componente de presentación es la responsable de la visualización de la interfaz,

especifica las pantallas que se presentarán al usuario y el estilo de interacción. Los
colores, ubicaciones de la pantalla, figuras, menús son conceptos relacionados con
esta componente. En ella, se definen los siguientes aspectos:

▪ Se especifica el aspecto y apariencia de la interfaz. O sea, se define la parte

del “look”, del concepto de look&feel de la interfaz.
▪ Se define el estilo de interacción, tipos de diálogo y de interfaz.
▪ Se identifican los objetos de interacción.
▪ Se establece el esquema de ventanas.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 38
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
▪ Se definen los dispositivos de hardware, asociados a la entrada y salida, a
incorporar en la interfaz.

La componente de Control de Diálogo, está a cargo del manejo de la secuencia de

eventos y del control de las técnicas de interacción provistas en la interfaz.
Establece y define la parte dinámica de la misma. En esta componente, se
establecen fundamentalmente, las siguientes cuestiones:

▪ Se especifica el comportamiento de la interfaz. O sea, la parte del “feel”, del

concepto de look&feel de la interfaz.
▪ Se define el manejo, control, secuenciación y lógica del diálogo.
▪ Se controlan y se manejan los objetos de interacción presentes en la interfaz.
▪ Se controla y se maneja el sistema de ventanas.
▪ Se definen aspectos de navegación e interacción entre las diferentes
ventanas o páginas que conformen el sistema.
▪ Se establece la estructura, secuencia, el proceso del intercambio de
información entre el usuario y la aplicación.
▪ Se identifican, controlan y manejan los objetos computacionales necesarios
a nivel de interfaz del usuario, tales como objetos sintácticos.
▪ Se definen los servicios propios de interfaz del usuario, o sea funciones
sintácticas.
▪ Se controla y se administra el hardware interactivo que incluye la interfaz.

La componente de presentación es la responsable de la visualización de la interfaz,

especifica las pantallas que se presentarán al usuario y el estilo de interacción. Los
colores, ubicaciones de la pantalla, figuras, menús son conceptos relacionados con
esta componente. En ella, se definen los siguientes aspectos:

▪ Se especifica el aspecto y apariencia de la interfaz. O sea, se define la parte

del “look”, del concepto de look&feel de la interfaz.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 39
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
▪ Se define el estilo de interacción, tipos de diálogo y de interfaz. nSe
identifican los objetos de interacción.
▪ Se establece el esquema de ventanas.
▪ Se definen los dispositivos de hardware, asociados a la entrada y salida, a
incorporar en la interfaz.

La componente de Control de Diálogo, está a cargo del manejo de la secuencia de

eventos y del control de las técnicas de interacción provistas en la interfaz.
Establece y define la parte dinámica de la misma. En esta componente, se
establecen fundamentalmente, las siguientes cuestiones:

▪ Se especifica el comportamiento de la interfaz. O sea, la parte del “feel”, del

concepto de look&feel de la interfaz.
▪ Se define el manejo, control, secuenciación y lógica del diálogo.
▪ Se controlan y se manejan los objetos de interacción presentes en la interfaz.
▪ Se controla y se maneja el sistema de ventanas.
▪ Se definen aspectos de navegación e interacción entre las diferentes
ventanas o páginas que conformen el sistema.
▪ Se establece la estructura, secuencia, el proceso del intercambio de
información entre el usuario y la aplicación.
▪ Se identifican, controlan y manejan los objetos computacionales necesarios
a nivel de interfaz del usuario, tales como objetos sintácticos.
▪ Se definen los servicios propios de interfaz del usuario, o sea funciones
sintácticas.
▪ Se controla y se administra el hardware interactivo que incluye la interfaz.

2.5. MÉTRICAS DE EVALUACIÓN DE UNA INTERFAZ.

Gracias a la Independencia de diálogo, filosofía que establece una separación entre

la componente de interacción o interfaz del usuario con la componente de cómputos
o aplicación, se puede profundizar más específicamente sobre las normas de diseño
y objetivos preliminares que son propios a cada componente.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 40
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
En el área especial de HCI, existen objetivos particulares que el desarrollador debe
tener en cuenta, como así también principios básicos de diseño de interfaz que
deben ser incluidos, si se pretende mejorar la calidad de la interacción con el
sistema.

Estos aspectos no sólo deben ser considerados en el momento de diseñar una

interfaz del usuario, sino que además 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.

2.6. OBJETIVOS DE UI.

Mientras que, dentro de la componente de aplicación, se consideran objetivos tales

como eficiencia, portabilidad, legibilidad, entre otros aspectos, la interfaz del usuario
presenta otros objetivos especiales que están íntimamente relacionados con los
factores humanos más que con cuestiones técnicas 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 características que
afectan el grado de utilidad de la interfaz y por consiguiente la productividad general
del resto del sistema interactivo. La conjunción de todas las cualidades exigidas a
la componente de diálogo es sintetizada con el término de “Usabilidad”.

Para referenciar a este término se utilizó en la década del 90’ el término

“Amigabilidad”, y actualmente en la bibliografía más reciente, se utiliza “Calidad de
Uso”.

El estándar ISO/IEC 9241 define a la usabilidad como la efectividad, eficiencia y

satisfacción con la que un producto alcanza sus objetivos específicos para los
usuarios.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 41
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
El ISO/IEC 9126 hace énfasis en las características internas y externas de las
aplicaciones que actúan en la usabilidad.

Los objetivos mencionados en este apartado, como los principios que se presentan
en las próximas secciones, apuntan a mejorar la calidad de las interfaces provistas
por los sistemas interactivos en pos de lograr un alto grado de satisfacción 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 desearía alcanzar. Entre los
principales objetivos tenemos:

2.6.1. 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 Computación
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
diálogo 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 aún más con requerimientos físicos del sistema.

2.6.2. CONFIABILIDAD.

Este objetivo hace referencia a que la interfaz del usuario debe ser consistente tanto
en su forma de expresión como de presentación. No puede contener diálogos
ambiguos, que lleven a falsas interpretaciones o que genere dudas al usuario.
Tampoco puede existir desorganización en la visualización de los datos ni
heterogeneidad en los mecanismos de utilización de los servicios provistos.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 42
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
El usuario debe interactuar con un ambiente integral, que presente un diseño
coherente, estudiado, con un tratamiento similar en todos sus contextos y
transacciones. Esto ayuda a que los usuarios perciban una interfaz seria,
cuidadosamente diseñada, en la que puedan confiar sus datos y delegar el manejo
de los mismos.

2.6.3. FLEXIBILIDAD.

La interfaz del usuario debe comportarse de una manera maleable, dócil, donde el
usuario pueda concretar sus intenciones en forma autónoma. 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 corrección automática,

más que informarle un mensaje de error. No puede comportarse como un agente
interlocutor controlador, rígido e inflexible, debe ser abierta y aceptar los tiempos y
las formas que el usuario requiera.

Debe permitir que el usuario sea quien decida cuándo comenzar un diálogo y
cuándo culminarlo, y sea quien dirija la conversación.

2.6.4. 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 transacción y de los cómputos
realizados, debe indicar el porcentaje de realización, índices del progreso e
información del tiempo que falta para culminar la función que esté ejecutando.

También 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.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 43
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
2.6.5. ERGONOMÍA.

Este objetivo se refiere a la capacidad que presente la interfaz para amoldarse,

adaptarse al estilo propio del usuario, brindando mecanismos de configuración y
personalización.

La misma puede estudiar al usuario mientras está sesionando con el sistema en pos
de adecuarse a su forma de interacción o también se le puede incorporar modelos
computacionales con información 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 hábitos y se acondiciona adecuadamente a él.

2.7. FUNCIONES DE UI.

Con relación a los objetivos referidos hablamos ahora de la principal función de una
interfaz es facilitar la interacción entre dos sistemas, ya sea entre un usuario y un
dispositivo, entre programas de software, o entre hardware y software.

Una buena interfaz no solo es funcional, sino también intuitiva y accesible, de modo
que el usuario pueda llevar a cabo tareas sin necesidad de tener un conocimiento
técnico profundo.

De este modo, una interfaz debe ser:

▪ Intuitiva: Fácil de aprender y usar, incluso para usuarios novatos.

▪ Accesible: Adecuada para una amplia gama de usuarios, incluidos aquellos
con discapacidades.
▪ Eficiente: Permite realizar tareas rápidamente, sin confusión o errores.
▪ Atractiva: Una interfaz bien diseñada también debe ser visualmente
agradable, lo que mejora la experiencia del usuario.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 44
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
2.8. PRINCIPIOS DE NIELSEN.

En este punto, se van a considerar los “Principios de Nielsen”. Consisten en un

conjunto de diez reglas de diseño, que estipulan la forma correcta de diseñar el
diálogo provisto en una interfaz del usuario, teniendo en cuenta aspectos de
usabilidad.

principios, considerados también como “heurísticas”, fueron definidos por Jakob

Nielsen, en el año 1990, junto con la colaboración de Rolf Molich [Nielsen, J. y Mack,
R., 1994]. Aunque estas normas inicialmente fueron estipuladas para interfaces
textuales, sirven de base para el diseño preliminar de cualquier otro tipo de interfaz,
desde la más sencilla a la más compleja. Los principios de Nielsen, se puntualizan
de la siguiente manera:

2.8.1. DIÁLOGO SIMPLE Y NATURAL.

En este punto se estipula la forma en que la interacción debe llevarse a cabo. El

diálogo presente en los prompts o preguntas del sistema, en los títulos, en los
contenidos de las pantallas, en la solicitud de las entradas, como en la muestra de
los resultados. Específicamente, hay que tener en cuenta las siguientes reglas:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 45
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

2.8.2. EMPLEAR EL LENGUAJE DEL USUARIO.

Con este principio, se recomienda al diseñador de la interfaz, no trasladar su propio

lenguaje, dialecto y costumbres dentro de la componente de interacción. La misma
debe utilizar términos, frases o formas de diálogo, que sean familiares al ó a los
usuarios del sistema.

Por lo tanto, se recomienda los siguientes puntos:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 46
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
2.8.3. 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 debería recurrir a
carpetas manuales para recordar algún código o número de artículo solicitado
obligatoriamente por el sistema, ni acudir a un tercero, para obtener asistencia
respecto al uso del sistema.

Esto implicaría un fracaso para el desarrollador de la interfaz. Para evitar esto, se

debe seguir las siguientes recomendaciones:

2.8.4. CONSISTENCIA.

La consistencia es un punto clave para ofrecer confiabilidad y seguridad al sistema.

Se refiere a que tanto el diálogo, el aspecto visual, el aspecto terminológico, el

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 47
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
comportamiento del sistema, se presenten ante el usuario en forma homogénea y
consistente, sin ambigüedades.

Los usuarios, no deberían tener que adivinar si diferentes palabras, situaciones o

acciones, significan lo mismo en distintos contextos. O, por el contrario, que un
mismo término 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
continuación, se mostrará la tabla de recomendaciones respectivas a este punto:

2.8.5. FEEDBACK.

En este principio, se apunta a que el sistema siempre debería mantener al usuario

informado de lo que está sucediendo, más que nada cuando éste manipula los
objetos directamente sobre la pantalla.

El mecanismo para lograr la comunicación desde el sistema y hacia el usuario, es

utilizando una técnica llamada “feedback” o retroalimentación.

Cuando se provee “feedback”, la interfaz da una respuesta gráfica o textual sobre

la pantalla, frente a una acción del usuario. El feedback se refiere al efecto o

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 48
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
reacción del sistema, que se produce por alguna operación del usuario. El feedback,
debe diseñarse de acuerdo a las siguientes consignas:

2.8.6. SALIDAS EVIDENTES.

Este principio, se refiere a que el usuario en todo momento tenga al alcance una
opción de salida de emergencia, que esté fácilmente identificable y accesible. Esta
posibilidad que le brindaría el sistema de salir del estado en que se encuentra,

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 49
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
brinda la sensación de seguridad al usuario, pues le permitiría dejar cuanto antes
alguna situación no deseada.

Las salidas deben ser siempre evidentes y se deben poder encontrar a simple vista.
Las recomendaciones para ellas, son:

Las salidas por lo general, se manifiestan como una opción de “Salir” propiamente
dicha, pero también 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 interacción con el sistema, por ejemplo, ante la presencia de eventos
externos que requieran su atención urgente.

2.8.7. MENSAJES DE ERROR.

Eventualmente, cuando los usuarios realizan alguna combinación errónea de

funciones provistas por el sistema, éste suele responder con mensajes de error. Los
mensajes de error constituyen un tipo de interacción que fluye de la máquina al
usuario.

Es el feedback del sistema ante la presencia de un error. Estos mensajes de error,

deben ser expresados en un lenguaje natural, su contenido debe indicar en forma
clara y precisa, cuál es el problema, el lugar donde se efectuó, y sugerir alguna
solución alternativa. Hay que considerar que el usuario llegó a un punto crítico del

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 50
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
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 deberían proveer mensajes de error en forma

mecánica e impensada, sino que deben analizar cada situación 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. Quizás ante la presencia de
mensajes aclaratorios, buena información o más control, el error se hubiera evitado.

En principio, se debería prevenir la presencia de errores de gravedad. Otra cuestión

que se debe plantear, es que, si el usuario ya se encuentra en ese punto crítico, de
qué forma se lo puede ayudar para salir de él, lo más eficientemente posible. Sobre
este punto, se pueden dar las siguientes sugerencias:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 51
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

2.8.8. PREVENCIÓN DE ERRORES.

A veces, es preferible que, en vez de proveer buenos mensajes de error, se brinde

un diseño más cuidadoso que prevenga 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, debería saber cuáles son las partes más críticas del
software, con mayor posibilidad de error, y, por lo tanto, debería afianzar los
mecanismos de asistencia y feedback, para que estos no se produzcan.

Generalmente, la prevención debe estar presente en la carga de datos como

también, en las transacciones más relevantes y críticas, como ser eliminaciones,
transferencias y modificaciones. Algunos mecanismos de prevención son:

2.8.9. ATAJOS.

Los atajos, son mecanismos que provee el sistema, para reducir el número de pasos
necesarios para disparar ciertas acciones. Aquí, se pide que el sistema muestre
ciertos aspectos de adaptación, que considere la posibilidad de dialogar con

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 52
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
usuarios que pueden tener distinto grado de conocimiento, formación y experiencia
en el uso de aplicaciones.

Por ello, la interfaz debería proveer alternativas de manejo para que resulte cómodo
y amigable, tanto para usuarios novatos como para los muy experimentados,
proveyendo de esta manera mecanismos de adaptación a través de atajos o
mediante la definición de macros. Para esto, se sugiere lo siguiente:

2.8.10. 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 ningún tipo de ayudas, o se construye a la ligera sin prestar demasiada
atención a las mismas.

Existe mucho análisis sobre cómo deben ser diseñadas las ayudas de un software,
más aún porque están constituidas por texto o información, que debe ser
interpretada en forma rápida y eficiente.

Cuando un usuario ingresa a una ayuda, lo hace porque duda, desconoce, quiere
consultar, o teme por realizar alguna acción errónea. Tiene la presión de entrar a la
misma para buscar, aprender, leer, interpretar, entender sobre la problemática que
le aqueja. Por lo tanto, un mal diseño de las mismas puede llegar a entorpecer, y
dificultar este proceso, más que esclarecerle o asistirlo realmente.

Actualmente, los sistemas de ayuda son considerados el manual en línea del

software, y tienen un objetivo explicativo, ilustrativo y de capacitación, que excede

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 53
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
el marco de ayuda puntual, para integrarse más al sistema como un todo. En el
momento de diseñar las ayudas del sistema, se debe considerar las siguientes
recomendaciones:

Antes de concluir con esta unidad temática, debemos resaltar y no olvidar que, los
Principios de Nielsen son normas de diseño aplicables a cualquier tipo de interfaz y
que los mismos pueden ser utilizados también, como heurísticas de usabilidad, en
un marco de evaluación de sistemas de software, ya desarrollados y en pleno uso.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 54
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
UNIDAD TEMÁTICA III

PROCESO DE DESARROLLO DE LA INTERFAZ DEL USUARIO

La interfaz del usuario requiere de un proceso de desarrollo especial. Se forma con

la práctica, con sucesivas modificaciones y testeos frente a los usuarios potenciales
del producto. Así, se garantizará la calidad de la misma.

Las aplicaciones informáticas abarcan cada vez más áreas, es decir, es difícil
encontrar disciplinas que no cuenten con herramientas computacionales que
faciliten el trabajo cotidiano.

A raíz de que el espectro de usuarios se amplía, es necesario utilizar estrategias

que favorezcan el uso de las aplicaciones proveyendo un estilo de comunicación
más simple, que reduzca el tiempo de aprendizaje, que sea fácil de usar sin requerir
ningún entrenamiento específico en informática.

Por lo tanto, la componente de Interfaz del usuario se convierte en un factor decisivo

tanto en la elección de estos sistemas de software como en su posterior utilización
y aprobación. Ella afecta en forma directa al grado de satisfacción de los usuarios.

En pos de proveer una interfaz del usuario de calidad, es necesario entender que
su construcción y diseño, forma parte de la Ingeniería de software y que requiere un
proceso de desarrollo especial, que está centrado en el usuario, en todas sus etapas
de gestación.

La temática de HCI y el tratamiento de toda la problemática involucrada dentro de

la componente de Interfaz, figura explícitamente en la currícula de ACM (The ACM
SIGCHI Curricula for Human-Computer Interaction), que es una recomendación
internacional de sumo prestigio en las Ciencias de Computación.

Como es una porción del sistema que debe interactuar directamente con los
usuarios, es fundamental efectuar un estudio completo del comportamiento

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 55
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
humano. Se debe incluir como requerimientos indispensables en la generación del
software, parámetros tales como ergonomía, facilidad de uso, amigabilidad,
simpleza, en término de reducir el esfuerzo mental del usuario de llevar a cabo en
la computadora la tarea que tenía en mente, flexibilidad y naturalidad en el sentido
que el usuario a través de la pantalla vea reflejado o modelado su realidad.

A pesar de esto, la mayoría de los diseñadores de software están más

compenetrados con las computadoras que con el aspecto humano, están más
capacitados en resolver el problema en términos computacionales, buscar los
mejores algoritmos de programación, las mejores estructuras de datos, que en
proveer un buen estilo de interacción. Además, resulta muy difícil saber el
significado de lo que es proveer una interfaz del usuario «óptima» de acuerdo a los
factores humanos.

No se cuenta aún con metodologías teóricas que abarquen todo el desarrollo y

diseño de las mismas, y no hay todavía métricas exactas establecidas para su
evaluación. Las interfaces del usuario, se construyen mediante un proceso iterativo
de diseño.

Ellas se forman con la práctica, necesitan ser diseñadas, modificadas, prototipadas

y evaluadas varias veces hasta alcanzar los requerimientos de los usuarios. En este
capítulo, se describirán las características del ciclo de vida de la interfaz del usuario,
cómo se compone y en qué consiste cada etapa de desarrollo.

3.1. CARACTERÍSTICAS DEL PROCESO DE DESARROLLO DE LA UI.

Diseñar, por lo general, es un proceso difícil y, más aún si se diseñan cada vez
sistemas más complejos, más avanzados tecnológicamente. Ahora bien, diseñar
bajo la conciencia en HCI, también es complicado.

Los diseñadores de la interfaz del usuario, se deben preocupar sobre los factores
humanos y ergonómicos, deben estudiar sobre los efectos del sistema en los

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 56
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
usuarios, grupo de trabajo, empresa, o en el contexto particular, y deben investigar
sobre las mejores representaciones y formas de interacción que va a proveer el
sistema. Además, la interfaz del usuario, al constituir una parte del software,
requiere para su construcción, de todas las etapas de desarrollo tales como análisis,
diseño, implementación y evaluación.

Como es una componente que va a ser usada y manipulada en forma explícita 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 diseño sean probados ante
los usuarios en forma prematura y aunque estén incompletos, llevando a lo que se
denomina el desarrollo de prototipos, que se explicarán detalladamente luego en
este mismo capítulo.

En el momento de emprender el desarrollo de una interfaz, el informático debe

entender y conocer las características de esta componente de software y tratar toda
su complejidad mientras se encuentra en vías de desarrollo.

Esto le permitirá encarar correctamente este proceso y poder sobrellevar las

problemáticas que presenta. Entonces, se puede decir que el proceso de desarrollo
de la interfaz se caracteriza por las siguientes cuestiones:

▪ 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 sección, la interfaz del usuario no presenta una
naturaleza de desarrollo analítica ni secuencial. La misma requiere para su
construcción, ser evaluada frente a usuarios potenciales y modificada en
forma sistemática. Esto implica que se pueden saltear o reiterar las etapas
de desarrollo.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 57
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
▪ 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 más fácil expresar las especificaciones
computacionales que los requerimientos de visualización, diálogo 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 interacción 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 diálogo.
▪ Presenta una Naturaleza Bottom-up: A diferencias de la componente de
aplicación, en donde el desarrollador tiene una visión global del problema y
a partir de allí, intenta refinarlo en problemas más pequeños, la interfaz del
usuario se va originando a partir de diferentes puntas de información muy
detalladas. Inicialmente, el desarrollador de la interfaz contará con mucha
información heterogénea tales como características del usuario, del
ambiente, de la aplicación, información de los estándares del mercado, de
los aspectos tecnológicos, de dispositivos para interactuar con el sistema,
entre otras cuestiones. Esto significa, que el mismo deberá comenzar a
trabajar con información muy puntualizada y disímil, por lo que deberá tratarla
realizando generalización, filtrado, abstracción y sintetizado de datos, en pos
de converger a una versión de diseño de la interfaz apropiada.
▪ Requiere un Mecanismo de Representación 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 también otros profesionales idóneos en
temas afines, a saber, sociólogos, diseñadores visuales, ingenieros
electrónicos. Además, se trabaja con diversas visiones del tema que son
complementarias. Aunque cada aspecto tiene aristas que le son propias,
también comparte aspectos comunes a coordinar. Por tales motivos, la

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 58
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
interfaz requiere un mecanismo de representación entendido por todos los
roles, necesita de notaciones o esquemas representativos más simples, no
tan formales ni tan técnicos. No es lo mismo que la componente de la
aplicación, cuya representación o diseño debe ser entendido e interpretado
por el programador, por lo tanto, se puede utilizar diagramas, notaciones
técnicas tradicionales.
▪ Requiere de Métodos de Diseño Específicos: La interfaz del usuario está
conformada, como se explicó en el Capítulo I, por componentes tales como
la de presentación, la componente de control de diálogo y la de modelo
interfaz-aplicación. Las cuáles involucran muchos aspectos diferentes que
deben diseñarse y desarrollarse. Es completamente distinto, diseñar las
cuestiones de visualización que los mecanismos de interacción, o la
componente de control de diálogo con el enlace con la aplicación. Por la
diversidad de aspectos que aborda la interfaz del usuario, será necesario
emplear varios métodos de diseño que sean específicos a cada área. Por
ejemplo, los métodos de análisis de tareas, describen acciones del usuario y
conducta de la interfaz, pero no sirven para diseñar el control del diálogo. En
cambio, la técnica de diagramas de transición y estados o de eventos,
describen la interacción y control de diálogo, pero no ofrecen técnicas de
representación para las pantallas del sistema.
▪ Existe una Anticipación 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 diseño de la interfaz, que no se
puede completar hasta que no se implemente o se desarrollen prototipos de
la misma. La misma necesita información futura, que no se puede obtener de
ninguna forma hasta que no se ponga en marcha el/los bosquejos de diseño.
Lo mismo sucede con la etapa de requerimientos o de análisis. ¿Cómo saber
qué es lo que pretende o necesita el usuario a nivel de interfaz, sino se le
muestra bosquejos de diseño para discutirlo? Entonces, se da el caso en que
se requiere predecir el estado futuro de un producto basado en información

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 59
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
actual, pero donde esta información corriente se obtiene poniendo en marcha
o en práctica, las predicciones realizadas. El motivo de este fenómeno, se
debe fundamentalmente a que, por tratarse de una componente en contacto
directo con seres humanos, permanentemente se trabaja con información
imprecisa, incierta, subjetiva, versátil, durante todo el proceso de desarrollo,
y es necesario entonces, anticipar las etapas de diseño o de evaluación para
concretar, redondear dicha información.
▪ Prelación de la Etapa de Evaluación: La etapa de evaluación, en el caso del
desarrollo de la componente de interfaz, es fundamental para probar la
corrección y completitud de etapas previas, como las etapas de
requerimientos o la de diseño. A diferencia de la componente de aplicación,
donde la evaluación 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 diseño, para evaluar las versiones prototípicas, como también
para revisar los aspectos de implementación. La etapa de evaluación,
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 aún se encuentra en vías de desarrollo.
▪ Requiere Participación Activa de los Usuarios: Por una cuestión que los
factores humanos deben ser considerados en todo el proceso de desarrollo,
el usuario debe participar en forma efectiva y sistemática. El mismo se debe
sentir comprometido con las decisiones de diseño, se le debe consultar y se
lo debe incluir en la mayoría de las pruebas de usabilidad efectuadas en el
sistema. El usuario se convierte en coartífice o coautor del diseño de la
interfaz que él va a utilizar, por lo tanto, se garantiza un alto grado de
satisfacción personal. El usuario va a disminuir su desconfianza ante un
sistema que no sea rígido y se adecue más a sus preferencias.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 60
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
▪ Es un Proceso Interdisciplinario: La creación de la interfaz del usuario
constituye un proceso interdisciplinario, con expertos en Ingeniería de
Software, Factores Humanos, Diseño Visual, Expertos en Multimedia,
Psicología, Comunicación Social, entre otros. Cada uno de los cuáles, tiene
su propio lenguaje, sus diferentes visiones, interpretaciones, y esto puede
complicar la comunicación entre los mismos. Es necesario organizar un
marco de trabajo con pautas claras de participación y toma de decisiones,
con una firme definición de roles y una eficiente coordinación.

En ese entendido, el 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. Se requiere
utilizar una metodología apropiada, que soporte esta concurrencia y anticipación de
etapas.

También, es necesario encontrar las técnicas o métodos de diseño adecuados, para

delinear las características de visualización, de presentación, como de interacción
y control del diálogo que incluye la interfaz del usuario. Muchos diseñadores
expertos han efectivamente desarrollado sus propios métodos de diseño basados
en sus experiencias personales con ciertos dominios, técnicas y situaciones.

Por lo general, se basan en sentido común, en conocimientos que están implícitos

y en experiencia personal. El empleo de métodos informales suele ser difíciles de
transmitir y no permiten la reusabilidad de casos exitosos.

3.2. CICLO DE VIDA DE LA INTERFAZ DEL USUARIO.

Algunos desarrolladores de software posponen la construcción de la interfaz

solamente a la etapa de implementación, pero como se explicó en la sección
anterior, existen descripciones, detalles, consideraciones presentes en la interfaz
que intervienen y afectan a todo el proceso de ingeniería del sistema y que deben
ser encaradas desde el principio.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 61
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Tanto la interfaz del usuario como la parte del cómputo, se desarrollan en etapas
que consisten de una fase de especificación, diseño, implementación y de un
proceso de evaluación. Pero, la forma en que se manifiestan estas etapas en la
interfaz difiere radicalmente con la de la aplicación.

Mientras que, según la Ingeniería de Software clásica [Pressman Roger,1996], la

componente de la aplicación 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 simultánea y concurrente, y que estén
en constante estado de evaluación y modificación.

La diferencia reside, en que en el diseño 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
diseño.

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 Prototípico” [Reilly J.P., 1996], a
diferencias del ciclo de vida tradicional en cascada.

En el ciclo de vida prototípico, las etapas iniciales de requerimiento y de diseño se

desarrollan en forma incompleta y se implementan parcialmente generando lo que
se denominan “prototipos del sistema”. Como el prototipo comienza mostrando la
confección parcial del producto, se los utiliza para proveer una visión temprana del
sistema, y así se lo puede poner a prueba anticipadamente frente a usuarios.

Esto permitirá obtener información más concreta sobre las necesidades del usuario,
preferencias, modos de trabajo, errores que comete, dificultades que presenta y
demás cuestiones observables, que completarán y corregirán los requerimientos y
diseños iniciales.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 62
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
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 aplicación, se van generando
nuevas versiones prototípicas de mejor calidad de uso y que cuentan con la
aprobación garantizada de los usuarios.

También, se podrían 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
representación del bosquejo final de la misma, y luego, son descartados.

Todo este proceso se desarrolla mediante un esquema metodológico denominado

“Prototipación”, que consiste en la generación sistemática de versiones prototípicas
del software, que se van evaluando mediante la participación 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 demás
roles evaluadores, aceptan el diseño expresado y simulado a través del prototipo.

Es importante decir, que los requerimientos iniciales de una interfaz del usuario, son
por lo general incompletos, y que esta técnica tiende a anticipar problemas,
obteniendo mayores precisiones de lo que el usuario espera del sistema.

A continuación, se ilustra el ciclo de vida prototípico de la interfaz, teniendo en

cuenta un prototipado tipo evolutivo, en donde la última versión prototípica converge
al sistema de software completo, totalmente culminado y aprobado. Se muestra
aquí, cómo ocurren las diferentes etapas de desarrollo de la interfaz, a través del
tiempo:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 63
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

Como se muestra en el gráfico, ni bien se obtiene algunas especificaciones iniciales

de lo que se pretende de la interfaz, constituyendo una etapa de requerimientos o
de análisis incompleta, se comienza con el diseño 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 más información
de él, frente a un material concreto. Con la información obtenida de las
evaluaciones, se completa y corrige aún más las etapas de análisis y diseño. Por
ello, estas etapas se establecen en forma casi simultánea.

Una vez que se desarrolle el prototipo final evolutivo, donde se incluye tanto la
componente de diálogo como la funcional, y los testeos del mismo arrojen
resultados positivos, culminarían en forma conjunta todas las etapas cruciales de
desarrollo.

La etapa de entrenamiento, comienza desde las versiones prototípicas 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 más, 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 capacitación a todos los
usuarios involucrados. Las etapas de conversión e instalación, se refieren a la

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 64
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
puesta a punto del producto sobre las máquinas que se destinan para la utilización
del software.

En el caso que se mejora o se reemplaza un producto de software anterior, hay un

proceso de transferencia, adaptación de datos e información, que constituyen la
etapa de conversión.

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 continuación:

Ambos diagramas, expresan la filosofía prototípica, ya que, en el caso de la espiral,

cada giro de la misma está constituido por el diseño, desarrollo y evaluación de una
versión prototípica. En el caso de la estrella, muestra al proceso de evaluación como
eje central, a partir del cual se refinan las demás etapas de desarrollo.

No debemos olvidar que, el diseño centrado en el usuario, implica además de

conocer al usuario y modelarlo, hacerlo partícipe de muchas actividades de
desarrollo de la interfaz.

El usuario juega un rol fundamental en la modificación, evaluación y diseño de la

interfaz, y es artífice de que el ciclo de vida prototípico se logre adecuadamente.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 65
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
3.3. 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
características propias, que deben ser tratadas y consideradas en forma autónoma,
si se pretende brindar una componente de interacción de calidad.

La interfaz del usuario debe ser analizada especialmente, su forma y su

comportamiento dependerán de múltiples factores que la harán única e irrepetible.
La etapa de requerimientos es esencial para descubrir e investigar dichos aspectos
y todo tipo de información que pueda ser útil e influir en el futuro diseño de la
componente de diálogo.

Esta etapa no se puede saltear, debe ser responsabilidad del diseñador de la

interfaz encararla correctamente para averiguar los requerimientos del usuario a
nivel de interacción, 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 diseño
de la misma:

3.3.1. ANÁLISIS FUNCIONAL DEL SISTEMA.

El desarrollador de la componente de interfaz del usuario no puede comenzar a

diseñar, si no analiza previamente las características de la componente funcional.
Se debe tener claro conocimiento de los requerimientos funcionales, el objetivo del
sistema de software y las características que se pretenden de la aplicación.

Hay que tener en cuenta, que no es lo mismo diseñar la interfaz de un sistema

educativo que la de un sistema informativo o, por ejemplo, la interfaz de un sistema
telefónico que la de un sistema de transacciones comerciales.

El tipo de aplicación es, entonces, otro aspecto que afectará en el diseño de la

interfaz que se va a proveer. El desarrollador de la interfaz puede, obteniendo del

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 66
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
analista de sistemas el enunciado completo de los requerimientos funcionales,
realizar sus propios modelos funcionales, prestando interés solamente en aquellas
funciones que va a ser utilizada, accedida o percibida por el usuario.

Cualquier método de análisis, 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 diseñador de la interfaz comprenda las futuras actividades que el usuario
tendrá en la vida útil del software.

3.3.2. ANÁLISIS DEL USUARIO.

Es fundamental que el diseñador conozca al usuario e investigue sus características

individuales, si pretende brindarle una interfaz adecuada para él. Esta etapa,
constituye la esencia del Diseño 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 diseñador pueda tener la capacidad de decidir qué nivel de soporte
requerirá el usuario, tanto semántico como sintáctico [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 tímidos, curiosos o ansiosos.

Si prefieren el aprendizaje mediante el uso de documentaciones y manuales o, a

través 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 características. Por ejemplo, la interfaz del usuario usada por niños debe
tener un diseño 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.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 67
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Mientras que, en el caso de los adolescentes, se utilizan otro tipo de tipografías más
modernas, un lenguaje más informal y con colores más 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 sintácticos y
semánticos, su experiencia y formación.

Para esto, se construye un “modelo del usuario” que es una descripción de las
características y propiedades individuales de la interacción entre el usuario y la
máquina, permitiendo registrar y modelar sus hábitos y sus reacciones. A grandes
rasgos, se puede identificar dos tipos de modelos del usuario: aquellos que son
“conceptuales” y los “cuantitativos”.

Existen ciertas técnicas de cómo adquirir el conocimiento del usuario [Gould J. D.,
1995], de cómo organizarlo, registrarlo e interpretarlo para posteriormente,
desarrollar una modelación del mismo, que constituirá una descripción, tanto de sus
características y propiedades individuales, como de su interacción con la máquina.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 68
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Entre las técnicas de recolección de datos más comunes, se encuentran, las
entrevistas, cuestionarios, observación directa de la interacción 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. Es
imprescindible conocer al usuario destinatario del sistema, su personalidad, su
experiencia, su formación. Se debe analizar y entender la representación mental
que él conlleva. Conocer al usuario, es la única manera de proveer el diseño de la
interfaz, más adecuada para él.

3.3.3. INVESTIGACIÓN DEL AMBIENTE.

El ambiente o contexto, que rodeará al usuario mientras interactúa con el sistema,

también debe ser estudiado cuidadosamente y afectará notablemente el diseño de
la interfaz. Se tienen que realizar estudios sobre:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 69
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Todo este análisis, 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 específica a la interfaz del usuario.

Este proceso determina los prerrequisitos básicos para recién comenzar con la
etapa de diseño, donde se decidirá en base a ello, qué tipo de interfaz se va a
proveer y qué tipo de diálogo será necesario brindar.

Es imprescindible diseñar la interfaz del usuario en base a los modelos efectuados

de los usuarios, del contexto y de la aplicación. El diseñador puede tener su estilo,
pero el diseño de la interfaz debe estar acorde a los modelos analizados
anteriormente. La estandarización, el estilo de interfaz que se encuentre en la
mayoría de los sistemas en el mercado, puede ser considerado como un punto de
partida, pero no como el objetivo del diseño de la interfaz.

A partir de aquí, el diseñador empezará con la etapa propiamente de diseño, donde

será fundamental, analizar las políticas de diseño que se deben emplear y aplicarlas
según el tipo de interfaz que se desee proveer.

3.4. MODELO SSOA.

El modelo SSOA [Schneiderman B., 1992], es el Modelo Sintáctico-Semántico del

conocimiento del usuario. Provee un marco de definición sobre las diferentes formas
y grado de conocimiento que un usuario puede emplear al interactuar con un
sistema.

La distinción entre las sintaxis y semántica, surgió a partir de la definición de

compiladores, donde se separó el proceso de compilación de la entrada de texto o
comando, denominado análisis sintáctico, del proceso de interpretación del mismo,
denominado análisis semántico.

Los diseñadores de los sistemas interactivos también pueden contar con un modelo
sintáctico semántico, pero aplicado al conocimiento del usuario. Como se explicó en

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 70
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
la fase de requerimientos, el conocimiento sintáctico se refiere al entendimiento de
detalles dependientes al uso de los dispositivos.

El conocimiento semántico, incluye información conceptual concerniente a la

aplicación -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 aplicación.

De acuerdo al grado de conocimiento semántico y sintáctico que el usuario posea,

se puede realizar una clasificación general de los mismos en tres categorías:

Es necesario aclarar que los conceptos de conocimiento sintáctico y semántico

tienen una correspondencia directa con las capas que presenta el software.

El corazón funcional procesa información semántica mientras que el procesamiento

de información sintáctica pertenece a las capas propias de la interfaz del usuario.

En la figura siguiente se muestra cómo el conocimiento semántico es transformado

en formas y especificaciones sintácticas para ser presentadas y manipuladas por el
usuario final.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 71
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

El modelo SSOA, puede ser aplicado y considerado por los diseñadores, si los
mismos no pueden realizar una modelización y clasificación de usuarios finales del
sistema, más detallada o precisa.

3.5. ETAPA DE DISEÑO DE LA INTERFAZ.

El objetivo de la etapa de diseño es expresar los resultados abstractos del análisis,

en especificaciones computacionales tangibles. El propósito inicial no es tan sólo
solidificar el análisis, sino también estimar su validez. Las especificaciones son
necesarias para estimar tanto las posibilidades técnicas, como los costos de
desarrollo.

Si el modelo conceptual del usuario es considerado por el diseñador, entonces

podrá definir para la interfaz, un claro mapeo entre las tareas y los objetos
semánticos con los representados en la pantalla, y permitirá que el conocimiento
requerido al usuario para utilizar el sistema, sea lo más mínimo posible.

Más aún, si el diseñador trabaja no sólo con el modelo del usuario sino con los
demás estudios realizados, tanto sobre el ambiente como sobre la aplicación, podrá
lograr soluciones a nivel de interacción muchas más adecuadas y coherentes.
Sabiendo que, por lo general, no se podrá contar con especificaciones a nivel de
interfaz completas, entonces en esta fase, el diseñador deberá partir con un proceso

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 72
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
de análisis, integración, refinación, conjugación de los modelos que se crearon en
la etapa de análisis, en pos de lograr una aproximación inicial de la misma.

Entonces, en este proceso de diseño se integran y se refinan los modelos del

usuario, del sistema y del entorno, adquiridos en la fase anterior. La interfaz,
especificada a través de diferentes medios como prototipos, escenarios, expresará
las nociones extraídas de dichos modelos, y permitirá la evaluación por parte de los
usuarios, de la usabilidad y legibilidad del diseño.

Como consecuencia del proceso de evaluación de la interfaz, se puede requerir

modificaciones tanto en el diseño de la misma como en los modelos definidos. En
estos casos, es el rol del diseñador de la interfaz, refinar el modelo del usuario y los
aspectos de diseño, mientras que, si se requiere modificar algún aspecto de la
funcionalidad, será necesario acudir al diseñador del sistema.

Este constante refinamiento, es influenciado por las interacciones que el usuario va

teniendo con el sistema en el proceso de evaluación, formando un proceso en
espiral, donde nuevas modificaciones permitirán volver a redefinir etapas anteriores.
En cada momento, se re-analiza la interfaz diseñada, se re-diseña y se re-evalúa
analizando los costos y beneficios de la interacción.

En cada paso, se puede descubrir nueva información que fue desconocida o pasada
por alto en pasos previos, que debe ser incluida afectando decisiones de diseño ya
tomadas. También, adelantarse a las siguientes etapas puede ser adecuado. Por
ejemplo, investigar sobre características del hardware, nivel de servicios de las
herramientas de software disponibles, es muy útil para determinar la factibilidad y
los costos del diseño especificado.

En definitiva, la tarea del diseñador es un proceso de revisión iterativa refinando el

paso actual como los anteriores, y además, puede incorporar conocimientos de
pasos posteriores, que influirán en sus decisiones actuales. iseño, las fuentes de

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 73
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
información consideradas pueden ser modelos realizados en la etapa de análisis
como también versiones previas de diseño desarrollados y evaluados
anteriormente:

En esta figura se visualizan distintas vertientes de información, que debe considerar

el diseñador de la interfaz en cada versión prototípica de su diseño. Esto implica,
como consecuencia, una constante comunicación entre los diferentes roles
involucrados.

Hay una interacción cíclica entre el diseñador del sistema con el diseñador de la
interfaz, éste a su vez con el programador de la interfaz, además 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 diseñador tendrá básicamente que
diseñar en forma gradual y decidir en forma metódica, sobre múltiples cuestiones
de la interfaz, a saber:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 74
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

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 diseño, además de la arquitectura prototípica
en la que se trabaja y de la coordinación de los diferentes roles que participan en
ella.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 75
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
El proceso de refinamiento iterativo de la interfaz, hace que el diseñador requiera
de representaciones de diseño flexibles.

Los conceptos de la aplicación no están expuestos a grandes cambios, pero, la

expresión o visualización de los mismos es muy probable que sí vaya adquiriendo
diferentes alternativas.

3.6. CARACTERÍSTICAS DEL PROCESO DE DISEÑO.

La etapa de diseño es un proceso complejo, donde pueden visualizarse tres etapas

importantes, que son:

▪ La divergencia: está determinada por el espacio de búsqueda de todas las

posibles soluciones. La parte esencial para esta etapa, es la colección de
información necesaria para el proceso de diseño y la investigación de
posibles alternativas. Se recolecta información de los modelos de usuarios
analizados, del ambiente, de la aplicación, se investiga en el mercado
propuestas similares, los estándares existentes, entre otras cuestiones. La
etapa es puramente exploratoria y mucha de la información que se maneja
aquí, es incierta.
▪ Etapa de Transformación: aquí la información, los datos, objetivos
propuestos en la etapa anterior, son utilizados para disminuir la complejidad
del problema. En esta etapa, se sintetiza la información, se descartan datos
irrelevantes, se refina y se postula un nuevo delineamiento del diseño. Es
importante, investigar sobre normativas de diseño o recomendaciones
publicadas, que sean apropiadas para el caso y poder aplicarlas en el
bosquejo.
▪ Etapa de Convergencia: la misma apunta a determinar una solución de
diseño bien definido, a partir del estado inicial inestable. Estas etapas,
pueden observarse en el siguiente gráfico:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 76
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

La transformación de los problemas más complejos a más sencillos se logra,

recolectando información útil sobre el espacio de diseño. La recolección de
ejemplos, estereotipos, estándares permite reestructurar el problema en nuevas
formas, disminuyendo así la complejidad del problema inicial y su nivel de
incertidumbre.

Obviamente, el proceso de diseño 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 información.

Las etapas del proceso de diseño, denominadas divergencia, transformación y

convergencia, se desarrollan cada vez que se rediseñe la interfaz, o sea que se
efectúan en cada iteración del ciclo de vida prototípico.

3.7. LA INTERFAZ Y LA PROTOTIPACIÓN.

Los métodos convencionales para el desarrollo de sistemas interactivos tienen una

naturaleza analítica, exacta y presentan un proceso secuencial, donde las etapas
de desarrollo de suceden una tras otra, una vez que estén completas y correctas.

Esta metodología tradicional, puede ser adecuada para el desarrollo de la parte de

la aplicación del sistema, pero presenta una gran rigidez cuando se la considera
para desarrollar la interfaz del usuario, porque deben incorporarse los factores

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 77
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
humanos y es necesario realizar testeos con los usuarios, desde el principio. El
diseño de la interfaz constituye un proceso permanente e iterativo de corrección con
la participación 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 metodológica que permita trabajar en forma

experimental, debido a que no existe una teoría suficientemente firme que prevea y
asegure, sobre una interfaz que aún no esté construida, cuáles serán
concretamente los posibles efectos que ella puede ocasionar sobre los distintos
usuarios, o cómo será el comportamiento de los mismos frente a las futuras
interacciones con el sistema.

Más aún, cuando sobre dicha teoría, se deban sustentar la fundamentación del
diseño y del resto de las etapas de desarrollo. Dentro de la comunidad de HCI, y
como forma de sustentar el diseño 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

interacción, para ser evaluados, reconstruidos y refinados hasta que la interfaz final
haya sido diseñada. El usuario se ve como la parte integral de todo este proceso.

La Prototipación 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
interacción hombre máquina no está inicialmente definida [Pressman, 1991].

A través 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 conformación de la fase de
requerimientos de la interfaz como también, posiblemente de la aplicación. El

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 78
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
proceso prototípico puede involucrar la gestación de varias versiones del sistema,
donde cada una de ellas constituye un ambiente para la corrección, evaluación y
testeo, cuyos resultados servirán y se utilizarán para que la versión siguiente sea
más detallada, completa y correcta que la anterior, teniendo en cuenta la
perspectiva del usuario.

Dentro de este proceso, cada vez que se genera una versión prototípica 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 continuación:

Si uno analiza las etapas de desarrollo de los prototipos, puede encontrar una
correspondencia con las fases de la ingeniería de la interfaz. La etapa de Definición
del prototipo, tiene una estrecha relación con el proceso de especificación de
requerimientos.

La etapa de Construcción, abarca las etapas de diseño y de representación del

bosquejo de la interfaz. En la etapa de Ejercitación, se incluyen las etapas de
implementación y, posiblemente, las de conversión e instalación.

Por último, la etapa de Evaluación, presenta ciertas analogías con las etapas de
testeo de usabilidad y entrenamiento de la interfaz del usuario, sólo que en estos
casos estamos trabajando con versiones incompletas del sistema.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 79
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
3.8. CARACTERÍSTICAS DE LA PROTOTIPACIÓN.

En su concepción más amplia, la Prototipación puede ser considerada una

metodología de desarrollo de software [Reilly, J.P., 1996], mientras que, para otros
autores es considerada un método o técnica de representación de diseño de la
interfaz. Este es el caso de la Ingeniería de Usabilidad [Nielsen, J.,1994], donde se
la incluye dentro de la Fase de Diseño.

En ambos casos, la misma permite desarrollar una visión prematura del sistema,
donde se puntualiza en un principio, la visualización, la interacción y el
comportamiento global del mismo, abstrayéndose de las características
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 verificación en el desarrollo del software es muy

importante, porque permite analizar si los requerimientos de especificación iniciales
son satisfechos por el sistema. Como dicho proceso, clásicamente se encuentra
como una de las etapas ya finales del ciclo de vida tradicional del software, los
problemas o errores encontrados en esos términos son muy difíciles y costosos de
solucionar, pues requieren modificaciones en todas las etapas anteriores, que están
concluidas casi en su totalidad.

En cambio, con la Prototipación, hay una concurrencia entre las etapas del
desarrollo del sistema, la interacción del usuario con una versión prematura e
incompleta de la interfaz, permite evaluar anticipadamente los requerimientos
iniciales de la misma.

De esta manera, las modificaciones o cambios requeridos, podrán ser incorporados

en las próximas versiones del diseño. La Prototipación puede ser conceptuada
como una metodología, pues determina un marco en donde todas las etapas de
desarrollo de la interfaz, se suscitan. A través de ella, se representa el diseño, se

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 80
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
evalúa, se rediseña, se implementa parcialmente, y hasta, se descubren los
requerimientos del usuario.

Este último aspecto, es una de las características más importantes de la

Prototipación como proceso metodológico y es que, a través de ella, se va
construyendo el modelo del sistema a desarrollar. Cuando se plantea el problema
en la etapa de requerimientos, no requiere la realización de un modelo completo.

Tiene, por filosofía, que éste nunca alcanzará la completitud hasta que no sea
evaluado y analizado, rediseñado iterativamente, con la participación directa y
activa del usuario y del resto de los roles.

Entonces, es una metodología que puede partir desde un modelo inicial incompleto
hasta posiblemente, ausente. Los requerimientos, que constituyen la base para la
correcta construcción de los sistemas, son desarrollados y completados mediante
la propia participación y experiencia que los usuarios van adquiriendo con el
prototipo.

El modelo es evolutivo, dinámico, se va completando en las sucesiones versiones

que se generan del sistema, y además en las etapas concurrentes de análisis,
diseño e implementación, que están muy unidas y donde la realimentación es una
constante.

Entonces, el mismo modelo es utilizado para diseñar, implementar y testear el

sistema, pero, a su vez, los resultados de estas etapas permitirán modificarlo para
completarlo aún más. Así sucesivamente, hasta alcanzar la completitud del mismo.

3.8.1. VENTAJAS DE LA PROTOTIPACIÓN.

Una de las ventajas atribuidas a esta metodología, es una mejora importante en la

comunicación entre los usuarios del sistema y el equipo que desarrolla el software.
Se evitan muchos problemas de comunicación, desentendimientos, malas
interpretaciones que surgen entre ellos debido fundamentalmente a que cuentan

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 81
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
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 términos computacionales por los analistas o diseñadores, en forma
incorrecta.

Además, los sistemas desarrollados mediante la Prototipación tienden a garantizar

la calidad de uso y satisfacción 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 evaluación 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á desarrollándose.

3.8.2. TIPOS DE PROTOTIPOS.

Los prototipos se pueden clasificar de diferentes maneras, de acuerdo a su tipo de

evolución, medios utilizados, técnicas empleadas, grado de fidelidad. De acuerdo a
su tipo de evolución, los prototipos pueden ser revolucionarios o evolutivos:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 82
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Si tenemos en cuenta las técnicas empleadas en el proceso de construcción de
prototipos, se pueden distinguir los siguientes tipos:

Cualquiera de estas técnicas permite de diferente manera, la realización de

evaluación de usabilidad de la interfaz, se presta a un juego de comparaciones y
testeos basados en un conjunto de criterios u objetivos ya preestablecidos.

Además, 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
diseño y testeo de bocetos o wireframes como Cacoo, Pencil, Balsamik.

Existen prototipos programados mediante lenguajes de programación como Java,

Delphi, Visual Basic, Toolbook, entre otros, donde se permite además representar

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 83
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
el control de diálogo. Finalmente, los prototipos se pueden clasificar por su grado
de fidelidad.

La fidelidad depende de ciertos factores como ser, del medio utilizado para la
representación prototípica, de las características representadas en la interfaz, del
grado de completitud funcional que presenta, como ser, si incluye validaciones,
ayudas, mensajes de error, funciones sintácticas, entre otros. Con respecto a la
fidelidad de los prototipos, los mismos pueden ser:

En un proceso de ingeniería de la interfaz del usuario, se pueden utilizar prototipos

de diferente fidelidad.

Los prototipos de baja fidelidad, pueden ser utilizados al principio para presentar
ante el usuario diferentes propuestas de diseño de la interfaz. Cuando el usuario
elige una, se comienza entonces con el ciclo de vida prototípico completo,
desarrollando las sucesivas versiones en alta fidelidad.

3.9. ETAPA DE IMPLEMENTACIÓN.

En esta sección, se va a describir cómo es la estructura del software necesaria para

generar una interfaz del usuario y cómo está compuesta. Además, se van a analizar,

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 84
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
las herramientas de desarrollo que surgieron para construir la componente de
interacción de un sistema. Una vez que esté desarrollado el diseño de la interfaz,
que haya sido analizado, testeado, aceptado por los usuarios del sistema, se
procede a la etapa de implementación.

La programación de una interfaz del usuario alcanza usualmente, grandes

proporciones de código, ocupando más del 50% de la codificación total del sistema.
La complejidad no reside sólo en la extensión del código, sino en cómo se estructura
el software necesario, para generar una interfaz del usuario y cómo está compuesta.

Una manera de estructurar el software de la interfaz, es definirla como una jerarquía

de máquinas abstractas, cada una proveyendo servicios determinados a las capas
superiores y requiriendo servicios de las capas inferiores.

La modularización del software en capas de abstracción, permite tener

independencia entre las capas, respecto a las implementaciones de cada una de
ellas, tener un mecanismo de protección y ocultamiento de la información que cada
una maneja. Así, se define una taxonomía del software de la interfaz del usuario en
donde se divide al sistema interactivo, en los siguientes niveles:

Las capas de abstracción del software, entonces son:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 85
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

Cada capa, funciona como una máquina 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 porción del total de
la interfaz, y debe proveer un mapeo entre las capas inferiores y superiores a ella.

Entonces, proporcionan al diseñador del diálogo, una manera de especificar la

interfaz en un alto nivel de abstracción, automatizando todo el proceso de traducción
al código resultante y facilitando todo el desarrollo del ciclo de vida prototípico de la
interfaz.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 86
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
3.10. HERRAMIENTAS PARA EL DESARROLLO DE LA INTERFAZ.

Como se dijo anteriormente, crear una buena interfaz del usuario para un sistema
es una tarea difícil. El software para soportar estas interfaces, usualmente es muy
extenso, complejo y difícil de refinar. Además, como la ingeniería de una interfaz del
usuario, generalmente consiste en una repetición del ciclo de diseño, prototipación
y evaluación, hasta que los requerimientos del usuario sean satisfechos, esta
iteración encarece mucho el proceso de desarrollo.

En pos de reducir el alto costo de diseño e implementación 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 análisis, representación, diseño,
implementación y evaluación de la interfaz. Surgen, así los denominados “UIT, User
interface Toolkits”, que son librerías de rutinas que pueden ser invocadas para
implementar ciertos aspectos de la interfaz, de bajo nivel.

Particularmente, estas librerías proveen la implementación de algunos objetos de

interacción como calendarios interactivos, gráficos estadísticos, con el manejo de
sus dispositivos físicos asociados. Los toolkits, solamente cubren la etapa de la
implementación 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 mayoría de las
etapas del desarrollo de la interfaz.

En particular, los UIMS pueden soportar la mayoría de las fases del ciclo de vida de
la interfaz del usuario, como su diseño, prototipación, ejecución, evaluación,
modificación y mantenimiento. Estos sistemas, administran los detalles de la
pantalla, sus entradas y salidas asociadas y la interacción con el resto del programa.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 87
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Proveen técnicas de interacción, permiten manipular la secuencia de eventos, el
control del diálogo, más todo el manejo de dispositivos de hardware.

Además, permiten que todo este proceso de desarrollo lo pueda realizar los propios
desarrolladores del diálogo, quienes pueden no ser puramente programadores.

El trabajo de los UIMS, tienen por objetivo simplificar el desarrollo de las interfaces
del usuario gráficas. Lo mismo ocurrió en la década del ´70 con el surgimiento de
administradores de base de datos, DBMS que contribuyen en la gestión de toda
información almacenada en bases de datos.

La siguiente figura, describe las componentes de un UIMS:

El UIMS separa el código, de la lógica de la aplicación de la de la interfaz del usuario,

introduciendo un controlador de diálogo entre ambos. Es posicionado al tope del
paquete gráfico de las ventanas, pero cabe aclarar que hay implementaciones de
UIMS, que proveen su propio sistema de ventanas.

El manejador léxico, procesa las entradas del usuario convirtiendo las entradas a
eventos lógicos y los pasa al controlador del diálogo. Este controlador es la
descripción del diálogo, es la interpretación semántica de las secuencias de eventos
lógicos, que recibe desde el manejador léxico.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 88
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
El manejador del diálogo luego produce comandos para invocar las funciones de la
aplicación correspondientes. En el proceso de la salida, el módulo de presentación
de datos acepta las notificaciones, establece la descripción perceptiva de la
interpretación y realiza llamados a funciones del sistema de ventanas o del paquete
gráfico. La interfaz semántica, entre el manejador del diálogo y la aplicación, permite
independencia del diálogo 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 gráficas basados en UIMS, son la primera generación
de herramientas que focalizan el diseño centrado en el usuario.

Permiten especificaciones o modificaciones del diálogo, rápidas y visuales. La

capacidad de programación visual, es especialmente adecuada para soportar
diseño iterativo. Soportan el desarrollo y refinamiento de interfaces, con editores
visuales y componentes reusables.

3.11. LA IMPORTANCIA DE LA EVALUACIÓN DE LA INTERFAZ.

La evaluación, juega un papel importante en la ingeniería de interfaz, en todas las

etapas del ciclo de vida. La evaluación puede servir para varios propósitos,
dependiendo en la madurez del sistema.

Durante la investigación y desarrollo, la evaluación centrada al usuario, es muy

importante para descubrir y validar conceptos iniciales. El equipo de desarrollo
necesita feedback creíble para testear la adecuación del diseño y saber cómo
mejorarlo.

Los desarrolladores, además, necesitan comparar alternativas de diseño. Durante

la evolución del diseño, técnicas de evaluación de usabilidad pueden aplicarse para
estimar requerimientos de entrenamiento. Además, se requieren datos confiables
para determinar cuando el diseño iterativo ha alcanzado los objetivos de usabilidad.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 89
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Es importante, para efectuar los diferentes procesos de evaluación, la identificación
precisa de los usuarios potenciales del producto y el poder establecer una buena
comunicación con ellos.

Por lo general, se trabajan con muestras de más de 20 personas, que deben ser lo
más representativas posibles a la comunidad de usuarios a la que está dirigido el
sistema.

La contratación de usuarios para cumplimentar el rol de evaluadores, debe ser

proporcional y compatible, a los perfiles detectados en la modelización de usuarios.
Hay dos tipos principales de métodos de evaluación, que han emergido en el área
de HCI, que difieren en el tipo de evaluadores que intervendrán en ella: Los Métodos
de Indagación y los Métodos de Inspección. Ambos pueden ser utilizados en un
mismo proyecto y en diferentes etapas de desarrollo.

3.12. MÉTODOS DE INDAGACIÓN.

En este tipo de evaluación, son los potenciales usuarios del sistema quienes
llevarán a cabo el proceso evaluativo. Ellos, cumplirán el rol de evaluador de la
interfaz. Los métodos de indagación, son los más utilizadas en el ciclo de vida
prototípico, tanto para conformar la etapa de requerimientos, como en los tests de
mercado.

La técnica de evaluación de indagación más importante en el área de HCI, es el

“Test de Usabilidad” o “Test Empírico del Usuario”. El test empírico del usuario,
involucra la recolección de datos sobre la interacción del mismo con el bosquejo de
diseño, durante el desarrollo de escenarios de tareas.

Los estudios empíricos y experimentos en laboratorios, dan información precisa

sobre cuestiones específicas. Pueden ser utilizados para comparar la efectividad de
alternativas de diseño, identificar y diagnosticar problemas de usabilidad, o para
validar que el diseño ha satisfecho sus objetivos. Para generar feedback, los

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 90
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
usuarios generalmente prueban prototipos y participan en entrevistas sobre el
contexto de su ambiente de trabajo.

Una definición de trabajo de usabilidad para testeos empíricos, puede ser

determinado en términos 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 también son informativos para chequear satisfacción y diagnosticar
problemas de usabilidad. El proceso de entrenamiento, es un aspecto crítico de
usabilidad.

Esto se debe a que los usuarios, ya en sus primeras experiencias en la interacción

con el sistema, intentan y se esfuerzan en aprender a operarlo. Se presentan
problemas de memorización, evidenciado por usuarios que repetidamente intentan
recordar los comandos y procedimientos, agravándose la situación en aquellos
sistemas que no han sido diseñados cuidadosamente.

Dificultades en el entrenamiento puede también reflejar un número de otros

problemas generales, como la desorientación. Los reportes verbales pueden ser
también registrados mientras el usuario está efectivamente evaluando el sistema.
La ventaja de estas técnicas de “pensar en alto” es que los usuarios permiten a los
diseñadores conocer lo que ellos piensan, sus problemas, sus temores respecto al
uso del sistema. Los reportes verbales se utilizan en combinación con los datos
recogidos en la observación del comportamiento, así se obtiene un alcance mayor
de información.

Esta técnica es muy útil para evaluar aspectos de diseño de alto nivel, por ejemplo
su mapeo con el modelo conceptual diseñado. Las técnicas de recolección de datos,

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 91
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
para tests empíricos de usuarios han sido descriptos por Schneiderman
[Schneiderman, 1988].

Múltiples cámaras de video son generalmente utilizadas para registrar la

performance de los usuarios frente a la realización de tareas y para obtener
comentarios de los usuarios. Pasar videos de usuarios experimentando problemas
de interacción son pruebas suficientes y poderosas para convencer a los
programadores de la importancia de optimizaciones de diseño.

3.13. MÉTODOS DE INSPECCIÓN.

En los métodos de inspección, 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 prototípicas bastantes avanzadas y completas.

Estos métodos, constituyen revisiones de diseño de software y son comunes en

proyectos de desarrollo, como también, para establecer estándares en interfaces
del usuario. El tipo más popular de técnicas de inspección es el llamado “Evaluación
heurística”, en donde participa un pequeño equipo de expertos que
independientemente examinan el sistema.

Más que chequear el sistema sobre estándares inflexibles, ellos buscan las partes
de la interfaz donde se han desobedecido algún principio de diseño. La evaluación
heurística ha mostrado ser la mejor técnica para la detección de problemas de
interacción.

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 depuración.

Las evaluaciones pueden ser de campo, de laboratorio o de mercado. Las

evaluaciones de campo, significa que se probará el sistema frente a usuarios en el

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 92
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
lugar de trabajo de los mismos. En las de laboratorio, los usuarios deben acudir a la
oficina donde los desarrolladores de software están trabajando.

En la de mercado, la evaluación se efectúa una vez que el sistema está siendo

usado por los usuarios, estando en modo productivo.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 93
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
UNIDAD TEMÁTICA IV

NORMAS DE DISEÑO DE INTERFACES VISUALES

El diseñador de la interfaz del usuario puede hacer uso de importantes recursos

visuales y multimediales, tales como imágenes, videos, sonido, fotos. Pero, será
indispensable analizar y aplicar normas de diseño específicas para lograr un mejor
aprovechamiento del espacio, forma, color y contenido.

4.1. CARACTERÍSTICAS DE LAS INTERFACES VISUALES.

Es muy difícil expresar una definición concreta de lo que una Interfaz del Usuario
Visual significa. Los límites 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 diálogo?,
¿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 transición, en el cuál la interfaz del usuario

textual deja de ser la interfaz tradicional y se impone la interfaz gráfica como tal,
surgieron muchísimas interfaces del usuario híbridas, o sea que en parte pueden
considerarse textual y en parte visual.

Hoy en día, también 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 manipulación directa pero que
presentan algunos íconos.

Entonces, específicamente ¿qué características debe cumplir una interfaz del

usuario para considerarse visual?

Hay autores que son más estrictos y la definen con más restricciones y
condicionamientos. Otros, en cambio, son más generales en su definición. Aquí, se

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 94
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
va a abordar una de las concepciones más 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 computación que soportan
algunas de las siguientes características: visualización, interacción visual, o
programación visual”.

Estas características que se mencionan en la definición, hacen referencia a qué

componente o parte de la interfaz debe estar dotada de cualidades visuales, si la
componente de presentación debe ser visual - visualización -, o el diálogo que
provee la misma debe serlo interacción visual o, si el usuario tiene la posibilidad de
programar algoritmos, consultas, estrategias de búsquedas, que la interfaz le
permita hacerlo en forma visual - programación visual.

Para aclarar un poco más estos conceptos, se va a explicar cada uno de ellos a
continuación.

4.1.1. VISUALIZACIÓN.

Se entiende por visualización al uso de representaciones visuales para ilustrar los

datos y entidades que intervienen en los programas, como también las entradas y
salidas del sistema.

Estas representaciones visuales pueden ser gráficos como diagrama de tortas o

gráficos estadísticos, imágenes como la imagen de un usuario o avatar en un
sistema de mensajería instantánea, ó secuencias de animación como por ejemplo
una presentación o demostración automática de una funcionalidad de un sistema
donde se ilustra una secuencia de acciones.

En la visualización, son los objetos los que tienen asociado una representación
visual, pero no es obligatorio que la interacción hombre-máquina o el modo de
dialogar con el sistema también sean visuales.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 95
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
El dominio de aplicación de estos sistemas puede verse incluido dentro de
procesamiento de imágenes, robótica, manejo de base de datos de imágenes, entre
otros.

Por ejemplo, en la figura siguiente se muestra la pantalla de un Sistema de

Escrutinio de Votos, donde la interacción con el mismo es secuencial, basada en
menús funcionales, pero la representación de los resultados electorales se realiza
visualmente mediante diagramas de tortas.

4.1.2. INTERACCIÓN VISUAL: INTERACCIÓN VISUAL.

Una interfaz del usuario no sólo se compone de la representación de los datos de

entrada, resultados y de los estados del sistema. En una interfaz del usuario se
encuentra también la comunicación, la conversación entre el usuario y el sistema,
cuestiones de comportamiento que deben ser expresados y representados de
alguna manera.

Una interfaz provee interacción visual cuando el usuario para comunicarse con el
sistema y llevar a cabo sus intenciones, utiliza diálogo asincrónico, basado en
manipulación directa y en eventos. El usuario puede expresarse seleccionando,
señalando, arrastrando, moviendo objetos presentes en la pantalla. Un ejemplo
sería un aplicativo de geometría donde el usuario puede mover, arrastrar,
dimensionar figuras geométricas.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 96
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Por otra parte, la interfaz también 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 diálogo que vaya dirigido desde la máquina al
usuario.

Entonces, una interfaz visual debe utilizar gráficos, colores, movimientos,

animaciones, sonido para transmitirle información al usuario del sistema. El dominio
de aplicación donde se encuentra interacción visual está constituido por las
interfaces basadas en manipulación directa, interfaces gestuales, interfaces
icónicas, video juegos, entre otros.

Por ejemplo, en la figura siguiente se muestra la pantalla de un Sistema para la

Confección de Carteles, en donde en el momento de la impresión, se muestra una
animación sobre la progresión de este proceso.

4.1.3. PROGRAMACIÓN VISUAL.

Se entiende por programación visual al uso de expresiones visuales en donde

intervienen íconos ó gestos durante el proceso de la programación. Aquí, tanto el
lenguaje como sus constructores de programación deben tener una representación
visual en vez de textual.

Las reglas y sus sentencias deben ser representados gráficamente para especificar
los algoritmos en un lenguaje visual. Los datos, parámetros 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
gráficamente, siempre y cuando esto sea factible.

El dominio de aplicación para estos lenguajes de programación visual incluye diseño

visual de interfaces del usuario, programación visual de consultas a bases de datos,
manejo de formularios y diseño asistido por computación.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 97
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Como ejemplo, se puede ilustrar al lenguaje de programación 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, desentendiéndose de cuestiones sintácticas.

Sobre el concepto de Interfaz del Usuario Visual hay algunos autores que indican la
necesidad de cumplir con todas las características de visualización, interacción y
programación visual para definirla. Otros, en cambio, estipulan que con solo proveer
alguna de ellas ya es condición suficiente.

Lo esencial es que se trate de diseñar sistemas que minimicen los costos de

interpretación y ejecución por parte de los usuarios.

4.2. DESCRIPCIÓN DE LAS TÉCNICAS DE INTERACCIÓN VISUAL.

Una vez que el concepto general de interfaz visual sea entendido claramente, se
profundizará en las técnicas de interacción visual que conforman o pueden
conformar una interfaz del usuario.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 98
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Se entiende por técnica de interacción visual, al conjunto de formas que pueden ser
empleadas o combinadas por el diseñador de la interfaz del usuario para especificar
un aspecto, un comportamiento visual o un estilo de interacción que adoptará la
interfaz frente a los usuarios del sistema interactivo.

Entonces, las técnicas de interacción visual son los recursos o los mecanismos que
el diseñador emplea para confeccionar una interfaz del usuario visual, afectando
fundamentalmente el proceso y representación del diálogo más que a nivel de
apariencia de la interfaz.

Entre las técnicas visuales más comúnmente utilizadas, se pueden mencionar a:

4.2.1. MÚLTIPLES VENTANAS.

Esta técnica ha sido una de las técnicas visuales más populares de los últimos años.
La revolución realmente ocurrió cuando el concepto de manipular ventanas resultó
apropiado en el mundo de las estaciones de trabajo.

Es una técnica que permitió implementar la Metáfora de escritorio, creada por Xerox
Park en 1970, en donde se trató de construir una ilusión al usuario, de visualizar al
sistema como una oficina, con un montón de papeles o actividades en desarrollo,
con la simulación de los objetos y servicios propios de las mismas.

A nivel de factores humanos, esta metáfora permite que el usuario perciba un

ambiente que le resulta familiar, mediante la visualización de elementos, el acceso
a funciones fácilmente y la localización de contextos lógicos, pudiendo apreciar a la
computadora como una herramienta de fácil utilización 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?

Específicamente, una ventana es definida como “un área rectangular, que contiene
una aplicación de software o un archivo de información. Permite la definición de un

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 99
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
contexto independiente, donde se agrupan subtareas o datos, del mismo nivel de
abstracción”.

Por su definición, se puede decir que, con la utilización 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 información.

Además, ofrece un poder significativo para la organización de la información y el

control de presentación, con sus títulos, bordes y colores de fondo que denotan
agrupamientos particulares.

Entre sus principales ventajas se encuentran la optimización del uso del estado real
de la pantalla, la facilidad de movimiento de un contexto a otro para trabajar
simultáneamente en diferentes tareas como por ejemplo tener una planilla de
cálculo separada del correo electrónico y, la posibilidad que el programa de
aplicación pueda entablar distintos hilos de diálogo o de ejecución con los usuarios,
como por ejemplo permitir el llenado de más de un formulario a la vez.

A continuación, se muestra una pantalla con múltiples ventanas sobre un sistema

de Taller Mecánico desarrollado por alumnos de la cátedra, en donde se tiene
información detallada de cada empleado que atendió la reparación del automóvil
seleccionado.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 100
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

4.2.2. MENÚS.

Una interfaz orientada a menús, notoriamente reemplazó en la década del 80´al

lenguaje de comandos, puesto que le ofrecía al usuario la posibilidad de elegir entre
una serie de opciones, la función que necesitaba ejecutar, más que escribir el
comando textualmente.

Desde el punto de vista de los factores humanos, los menús 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 técnicas 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 están disponibles dentro de un marco
visual común”. Existen diferentes estilos de menús, se encuentran los menús
horizontales -comúnmente denominados menu bar-, que tienen sus opciones
organizadas en una línea plana. Los menús verticales que por el contrario,
presentan sus opciones, una encima de la otra.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 101
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Los menús pull-down combinan los dos anteriores, puesto que se componen de un
menú horizontal del cuál se despliega para cada una de sus opciones en un menú
vertical.

Los menús jerárquicos son aquellos donde el conjunto de opciones están

distribuidas en varios niveles de menús 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.

También, se encuentran los menús pop-up que se caracterizan por no están

presentes en la pantalla, son invocados cuando se necesitan, mediante una
combinación de teclas o mediante el botón derecho del mouse.

Por el contrario, se puede citar los menús de pantalla completa o full screen, que
disponen su conjunto de opciones de una forma que ocupa casi la totalidad de la
pantalla. Además, los menús presentan una serie de características como ser su
capacidad de deslizar sus opciones -menús deslizables o con scrolling-, de permitir
seleccionar más de una opción –menús de selección múltiple, de presentar dos
versiones, una con un contenido mínimo de opciones más utilizadas y otra en forma
completa, de permitir el uso de atajos o combinación de teclas para seleccionar
alguno de sus ítems.

A los menús se les puede atribuir funciones sintácticas importantes como ser la
configuración de su aspecto, los colores, el fondo, el tipo y tamaño de letras
utilizados, como también ofrecer diferentes criterios de ordenación de las opciones,
reorganización general de los menús, el agregado o quite de opciones dentro de un
menú, entre otros.

Entre las ventajas principales de esta técnica visual, se encuentran la facilidad de

acceso a las funciones, simplicidad de manejo, reducción del espacio de la pantalla
destinado a la muestra de funciones, pero se les atribuye por el contrario, que

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 102
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
tienden a ser ineficientes, que la interacción con muchos menús 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 cátedra, en donde se visualiza un menú
pull-down.

4.2.3. MANIPULACIÓN DIRECTA.

Ye explicamos los diferentes tipos de diálogo humano-computadora y se

presentaron dos modelos de interacción: la metáfora de Modelo del Mundo y la
Conversacional.

Entonces, “la manipulación directa es una técnica de interacción que responde a la

metáfora de Modelo del mundo, en donde el usuario tiene a disposición objetos que
pueden ser accionados de múltiples maneras, como ser mediante el arrastre,
selección, múltiple selección, cliqueo, entre otros”.

A diferencia del mundo conversacional, donde se tiene una descripción lingüística

de los objetos y de las acciones a realizar sobre los mismos, con la manipulación
directa, el usuario directamente demuestra sus intenciones en vez de escribirlas. En

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 103
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
el Modelo del Mundo, electrónicamente se hace mímica de los objetos del mundo
real y de sus formas de uso.

Desde el punto de vista de los factores humanos, la Manipulación Directa responde

a pensamientos psicológicos tales como los expresados por los filósofos Jean
Piaget [Piaget, 1947] y Jerome Bruner [Bruner, 1984] que indican que nuestro
entendimiento del mundo está fundamentalmente relacionado con una estimulación
visual y experiencia táctica sobre los objetos, donde uno combina habilidades
“activas” -manipulación de objetos-, “icónicas” -reconocimiento visual para tender a
la comparación y contraste- y, “simbólicas” -entender grandes secuencias de
razonamiento visual.

También, varios investigadores han analizado los factores cognitivos subyacentes

de este estilo de interfaz y encontraron dos aspectos positivos muy importantes
desde la percepción del usuario: la noción de distancia y la de unión.

En la siguiente pantalla, se muestra un sistema sobre una Sala de Pediatría

desarrolllado por alumnos de la cátedra, en donde el usuario puede arrastrar la

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 104
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
imagen del bebé a alguna de las camas disponibles de la sala, mediante la técnica
de manipulación directa.

4.2.4. FEEDBACK VISUAL.

No todo el diálogo se establece del usuario hacia la máquina. Frente a las acciones
del usuario, la interfaz debe reaccionar actuando, explicando, respondiendo,
asistiendo o cualquier otro tipo de manifestación, que va dirigida hacia el usuario.
Se requiere de una técnica que soporte planeamiento de tareas, detección de
errores y recuperación de errores, por lo tanto se requiere que la interfaz tenga
indicadores explícitos del estado del sistema [D.Norman, 1986].

Entonces, se denomina al feedback visual, a una reacción de la interfaz frente a un

estímulo. Es el proceso de reflejar sobre la pantalla el resultado de alguna operación
realizada por el usuario, realizándose esto de una manera gráfica o mediante algún
recurso visual. En el contexto de HCI, el feedback es una expresión de salida
producida por el sistema luego de procesar la entrada de un usuario.

El usuario luego interpreta el feedback, evalúa la situación y actúa en base a ella.

El feedback es esencial para que el usuario no se sienta a merced de la aplicación.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 105
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Cuando una acción 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 semántico.

Un feedback informativo e inmediato permite hacer del sistema una sucesión de

estados explícitos, 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 específico de feedback.

A continuación, se muestra un ejemplo de feedback informativo, que los alumnos

aplicaron sobre un sitio de Turismo.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 106
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

4.2.5. GESTOS.

En el entorno de HCI, gestos es una marca, estela o camino que traza el usuario
sobre la pantalla, para expresar alguna información o representar alguna acción que
quiera realizar.

Una interfaz que admite gestos como forma de interacción por parte del usuario,
implica que el mismo puede realizar una manipulación 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 sesión de entrada gestual consiste de una
secuencia o un camino de puntos logrado por determinadas acciones que el usuario
desempeña mediante dispositivos físicos como el teclado o el mouse. Es similar a
una sentencia de comandos, ya que se compone de operaciones y parámetros.

El sistema luego, trata de realizar el análisis sintáctico de los gestos y de los objetos
que intervienen en la sesión de entrada y los transforma en llamados a
procedimientos semánticos. En los siguientes ejemplos, se muestra el uso de gestos

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 107
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
para especificar las operaciones de borrado (A) e inserción de textos (B), que el
sistema debe interpretar.

La interfaz que admite este poderoso recurso, está basada en una tecnología de
reconocimiento de imágenes, en donde el sistema es capaz de entender la
configuración significativa de trazos, puntos, que constituyen la información del
camino.

Se puede observar que hoy en día las interfaces del usuario adoptaron la interacción
gestual, ya que es mas natural donde los humanos están acostumbrados a
interactuar mediante gestos y usar herramientas “tocandolas”.

La tecnología ha avanzado lo suficiente como para que el poder de cálculo

disponible alcance para que un ordenador pueda interpretar los gestos. Existen
cascos, anteojos, muñequeras, u otros dispositivos o comandos para hacer
efectivos los gestos, hasta inclusive las cámaras web son muy útiles para detectar
e interpretar movimientos de la cara, manos o cualquier otra parte del cuerpo.

4.2.6. DEPENDENCIAS.

Muchas veces, un mismo concepto semántico 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 través de un casillero textual, de la imagen de un
termómetro y de un rectángulo que se va coloreando de acuerdo al calor de la
misma.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 108
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
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 definición formal es la siguiente, “una dependencia especifica una relación

causal que debe ser siempre mantenida”. Sucede cuando al manipular un objeto de
la pantalla puede significar consecuencias en la aplicación 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 manipulación

de un objeto determinado, ajuste todas las partes, como así también, los objetos
que dependen de él.

Por ejemplo, en la siguiente pantalla, se muestra el sistema de Ruleta realizado por

alumnos de la cátedra, en donde el jugador “Seba” puede observar su estado de
situación o balance, a través de diferentes objetos dependientes, como ser el cuadro
de “Balance Gral”, la carita amarilla triste, el cuadro “Seba” con su saldo negativo.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 109
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
4.2.7. ANIMACIÓN.

La animación es una técnica de interacción que visualiza el proceso interno de un

sistema dinámico. Es una parte integral en la interfaz visual donde los cambios en
el sistema están provocados por acciones autónomas del propio objeto animado
que complementa las operaciones del usuario.

Mediante la animación, la interfaz es capaz de simular el comportamiento complejo

de problemas dinámicos. Presenta como ventaja, la posibilidad de representar una
gran cantidad de información en un período reducido de tiempo y de garantizar la
comprensión de determinadas características que no son obvias con los gráficos
únicamente.

La capacidad expresiva de una animación 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
desfragmentación de archivos del disco. A continuación, se muestra una pantalla
con una animación para representar el estado de una impresión de un cartel.

4.2.8. EXPLORADOR DE OBJETOS.

La organización de la información en la pantalla es un problema muy complicado y

más aún cuando se trata de datos masivos. La técnica 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 información
en forma agrupada dentro de un contexto particular.

La misma se define como “una técnica de interacción que permite visualizar una
lista de objetos compuesto por varios atributos”. Se visualiza como una tabla donde
cada fila es la especificación de cada objeto y en las columnas se muestran los
valores de sus atributos y características.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 110
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Además, se caracterizan por su condición de interactividad, o sea el usuario puede
manipular, seleccionar, editar, desplazar filas, entre otras cuestiones. Además, el
explorador puede proveer al usuario funciones sintácticas que optimicen su manejo,
como ser la ordenación de sus filas mediante diferentes criterios, el filtrado de filas,
el agregado y quite de columnas, la configuración visual del mismo, entre otras.

A continuación, se muestran ejemplos de grillas pertenecientes a un sistema de

Cursos a Distancia desarrollado por alumnos de la cátedra. 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 búsquedas realizadas, que en este
caso, es hallar información sobre los cursos tomados por un alumno, cuyo apellido
es “García”. Este explorador presenta como características que no es editable pero
es de selección múltiple.

4.2.9. CAJAS DE DIÁLOGO.

La apariencia de una caja de diálogos es muy parecida a la de un formulario de

oficina, donde hay casilleros a completar, ítems a seleccionar, entre otros
elementos.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 111
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
En el área de HCI, una caja de diálogos 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 través de una caja de diálogos tiene agrupados ciertos controles y

mecanismos visuales que le permiten dialogar con el sistema en forma bidireccional
y mediante manipulación directa.

Tiene presentes campos de entrada para ingresar texto, puede seleccionar,

arrastrar, puede ver mensajes a través de una región de salida y puede contar con
una asistencia específica por cada control y objeto de interacción presente.

Habitualmente, los distintos campos son evaluados independientemente, pero la

confirmación o cancelación se realiza a nivel de caja de diálogo en general. En la
figura siguiente, se presenta una caja de diálogo en donde el usuario debe
interactuar con diferentes objetos de interacción.

Una vez analizadas las técnicas de interacción visual más importantes, se puede
concluir que la combinación y utilización de estos recursos visuales constituyen la

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 112
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
esencia de una interfaz visual. Las bases conceptuales de estos paradigmas como
el concepto general de las interfaces gráficas, fueron desarrolladas por Xerox Parc
que, desde fines de la década del 70’, pregonaba sobre ideas tales como múltiples
ventanas, manipulación directa, uso de íconos como carpetas, documentos y el uso
del mouse.

De esta manera, surgieron estilos de interfaces gráficas estándares como Interfaces

WYSIWYG que son las iniciales en inglés 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, menús y dispositivo de
señalamiento.

La primera hace referencia explícita a la técnica de manipulación directa, donde

todo lo que el usuario ve, lo puede “tocar” o manipular, mientras que en las interfaces
WIMP hace referencia a las técnicas de interacción más importantes como
ventanas, menús y manipulación directa.

Una cuestión que hay que tener en cuenta respecto a las técnicas de interacción
visual, es que la mayoría de estos recursos vienen ya desarrollados e
implementados, encapsulados mediante componentes en librerías de objetos de
interacción, incluidos en los lenguajes de programación 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, sólo resta que el desarrollador de la interfaz los
incluya en su diseño, los integre y los aplique adecuadamente en pos de mejorar y
simplificar la interacción con el usuario.

En las próximas secciones se van a analizar recomendaciones de diseño

importantes referente a cada técnica de interacción visual, de modo que permita la
gestación de interfaces visuales de calidad.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 113
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Tener en cuenta que el mal empleo de las técnicas de interacción puede hacer que
decaiga considerablemente el poder representativo y expresivo de las mismas, por
lo tanto las normas que acompañarán cada técnica son esenciales y deben ser
aplicadas adecuadamente.

4.3. TÉCNICAS DE INTERACCIÓN VISUAL: ASPECTOS DE DISEÑO.

Las normas de diseño para Interfaces Visuales, son específicas a cada paradigma
de interacción visual utilizado en la misma.

Fundamentalmente, se basan en analizar cada uno de los recursos visuales

explicados y en definir ciertas pautas de diseño para aprovechar al máximo, los
beneficios a nivel de factores humanos atribuidos a cada uno. Por ello, se van a
listar a continuación, los aspectos de diseño para cada paradigma de interacción
visual.

4.3.1. MÚLTIPLES VENTANAS.

Esta técnica visual como se explicó en la sección anterior, ofrece dos ventajas muy
importantes, permite optimizar el uso real de la pantalla y segundo, permite que el
usuario pueda llevar a cabo múltiples diálogos con el sistema teniendo en cuenta
contextos particulares fácilmente reconocibles.

Respecto al diseño 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 mayoría 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

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 114
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
una serie de consideraciones de diseño para que se pueda aprovechar al máximo
este importante recurso visual. A continuación, se mostrará la tabla de
recomendaciones respectivas a este punto:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 115
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

El diseñador 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 programación. Se debe tener claro conocimiento
sobre los costos y el grado de factibilidad de poder llevar a cabo su diseño
propuesto.

4.3.2. MENÚS.

Los menús presentan la posibilidad al usuario de poder elegir entre una serie de
opciones en vez de escribirlas textualmente, evitándole definitivamente cometer
innumerables errores sintácticos y de tipeo.

Pero, a pesar que se les atribuye la cualidad de ser simples de usar, en el caso de
la combinación de un menú bar con menús jerárquicos comúnmente utilizados en
los sistemas interactivos actuales, pueden complicar el acceso a las opciones si no
fueron pensados a través de una lógica de diseño apropiada.

Por lo tanto, existen para los menús, una serie de recomendaciones a tener en
cuenta en el momento de diseñarlos e incluirlos en la interfaz del software.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 116
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 117
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
4.3.3. MANIPULACIÓN DIRECTA.

La manipulación directa determina un lenguaje de interacción muy particular y

poderoso, que tiene atribuido ventajas muy importantes desde el punto de factores
humanos. Debido a la representación gráfica de los objetos y a su disponibilidad en
el ámbito de la pantalla, brinda una estimulación visual que motiva a que el usuario
los accione o los manipule en pos de expresar sus intenciones.

El usuario en una interfaz con manipulación 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 manipulación directa está mal aplicada, por ejemplo,
el usuario no entiende qué significan esos objetos gráficos, ni sabe qué pueden
hacer con ellos, muchas de sus ventajas se vuelven en contra. Entonces, hay
cuestiones de diseño referidas a la manipulación directa que deben ponerse en
práctica, para garantizar sus múltiples beneficios.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 118
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

4.3.4. FEEDBACK VISUAL.

Al feedback se lo puede describir como las respuestas que da el sistema frente a

actividades que realiza el usuario. Es la expresión del estado resultante del sistema
luego de acciones efectuadas por el usuario. El feedback puede estar presente
antes de la realización de una acción, en forma de feedback preventivo, durante
ella, o al finalizarse, manifestándose a través de los mensajes de error o de cierre.

El feedback debe mostrar las variables físicas del sistema, puede surgir cuando
ciertas acciones o datos fueron olvidados, cuando se necesita informar sobre la
evolución de un proceso cuyo tiempo de respuesta es demasiado largo, o cuando
se cometieron errores. Antes de analizar cómo diseñar de la mejor manera el
feedback del sistema, se deben considerar dos cuestiones: la inmediatez y la
granularidad del feedback.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 119
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Entonces, respecto a los aspectos de diseño, se debe considerar las siguientes
recomendaciones:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 120
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

El feedback es un recurso muy importante que debe ser aprovechado al máximo,

puesto que de él depende la confiabilidad del sistema y su capacidad de
transparencia.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 121
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Un mal diseño del feedback puede llevar a malas interpretaciones del estado del
sistema y permitir además, que el usuario continúe interactuando en un estado
inseguro y erróneo.

4.3.5. GESTOS.

Al igual que en el caso de manipulación directa, el gesto debe estar diseñado de tal
manera que simplifique la interacción del usuario y no la complique aún más.

Por lo tanto, debe ser diseñado con cautela respectando las siguientes
consideraciones:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 122
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
4.3.6. DEPENDENCIAS.

Una dependencia es una relación entre dos o más 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 modificarán los restantes
también. Se deben considerar fundamentalmente las siguientes cuestiones:

4.3.7. ANIMACIÓN.

Las animaciones establecen un mecanismo visual que es muy poderoso y expresivo

para denotar situaciones dinámicas en espacios limitados. Pero sus principales
ventajas se logran específicamente cuando el usuario tiene el foco de atención en
la animación, o sea mientras él la está observando.

En el caso que el usuario esté desarrollando una determinada tarea y estén

activadas ciertas animaciones no relacionadas con la misma, puede provocar
distracción y molestias al usuario. Es necesario seguir una serie de
recomendaciones de diseño para lograr un buen uso de las mismas:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 123
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

4.3.8. EXPLORADORES DE OBJETOS.

Los exploradores o grillas interactivas son componentes de interacción bastantes

complejos que permiten presentar gran cantidad de información 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 diseño para
que estas capacidades y servicios puedan ser aprovechados por el usuario.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 124
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

4.3.9. CAJAS DE DIÁLOGO.

Las cajas de diálogo es un recurso visual compuesto por varios objetos de

interacción. Dentro de ellas, se pueden encontrar casilleros de texto, listas
seleccionables, listas deslizables, botones, imágenes, animaciones, que a su vez
tienen sus propias cuestiones de diseño.

En el momento de diseñar una caja de diálogos es recomendable tener en cuenta

las siguientes cuestiones:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 125
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 126
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
UNIDAD TEMÁTICA V

LA INTERFAZ WEB Y SUS PRINCIPIOS DE DISEÑO

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 diseño. Aplicar las correctas normas de diseño es lo
único que garantizará la usabilidad del sitio y el sobrevivir en un mundo de tanta
competitividad.

5.1. CARACTERÍSTICAS ESPECÍFICAS DE UN SITIO.

El surgimiento de Internet, como tecnología de comunicación entre usuarios, abrió

las puertas a nuevas posibilidades de interacción y cooperación. Aplicaciones de
groupware y trabajo cooperativo como encuentros virtuales, comunicación cara a
cara, educación a distancia, modificarán radicalmente los patrones de comunicación
y afectarán completamente nuestra vida cotidiana.

Desde el punto de vista del ser humano, el usuario se adecuará a estas nuevas
pautas de interacción, utilizando las aplicaciones para obtener comunicación en
línea con otras personas ubicadas remotamente, en pos de compartir recursos,
colaborar en actividades grupales y transmitir ideas.

Desde la perspectiva de la Ingeniería de Software, esto significa reformular todos

los mecanismos y metodologías involucradas en el desarrollo de la interfaz del
usuario. Partiendo desde técnicas de análisis, aspectos de diseño,
recomendaciones, mecanismos de prototipación, implementación y testeos de
usabilidad, que deben ser adecuados a estas nuevas potencialidades.

Las políticas de diseño que se deben emplear en la interfaz de un sitio Web, no

coinciden con la de interfaces gráficas, ni multimediales, ni tampoco con los
principios considerados al desarrollar un boletín o suplemento informativo desde un
procesador de textos o herramienta para publicaciones.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 127
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Entonces, como las interfaces del usuario presentes en las páginas Web tienen
características y particularidades propias, la misma debe ser construida basada en
delineamientos particulares y mediante patrones de diseño que deberán ser
reconsiderados específicamente para este caso.

A continuación, se analizarán cuáles son las cuestiones específicas que

caracterizan a las interfaces de sitios Web, que las distinguen del resto de las
interfaces y que es fundamental que el diseñador las tenga en cuenta al momento
de encarar la construcción de un sitio.

5.1.1. RESPECTO AL PERFIL DEL USUARIO.

En primera medida, hay que tener en cuenta que los usuarios de Internet presentan
características muy heterogéneas, pueden ser de cualquier nacionalidad, con
diferencias socio-culturales muy grandes, pueden contar con distinto grado de
formación y pueden acceder mediante distintos recursos tecnológicos.

Para esto, se va a analizar posteriormente cómo acotar el espacio de usuarios hacia

una comunidad de lectores más específica, trabajando directamente con uno o más
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
interacción con ellos.

Lo que sí se puede determinar en términos generales, es cuáles son los aspectos

comunes que cualquier usuario de Internet posee y cuál es su comportamiento
habitual frente a un sitio.

Principalmente, el usuario pasa de leer toda una información ya establecida y

pautada como en el caso de diarios, revistas y libros, a seleccionar información y a
construirla basándose en movimientos, acciones, desplazamientos y cliqueos. Por
ello, la información está expresada en forma temporal y se genera como parte de la
interacción y movimientos del usuario.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 128
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
El “look & feel”, o sea la “apariencia y percepción” 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 más fuerte. El usuario de Internet se
comporta más impaciente en línea, y requiere motivación para el movimiento,
exploración y búsqueda de la información.

Tiempos medios de lectura de carga, cantidad de cliqueos para acceder a la

información requerida, tiempos de navegación, entre otros, son valores que en el
diseño de los sitios Web toman mayor preponderancia.

Por ejemplo, Google Analytics que es un servicio gratuito de estadísticas de sitios

Web, permite analizar un sitio desde determinadas métricas con el objeto de obtener
una versión más optimizada del mismo. Para realizar el monitoreo, Google Analytics
añade un JavaScript a cada una de las páginas que desea analizar y carga la
información al servidor Google almacenándola en la cuenta del usuario.

Existen métricas como “time on page” y “time on site”, “tiempo en página” y “tiempo
en sitio” para analizar el perfil del usuario, por ejemplo, su lugar de origen o desde
donde se consulta para obtener información más representativa y útil.

El “tiempo en página” permiten tener noción sobre promedios de duración que un

lector se encuentra en una página 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.

5.1.2. RESPECTO A CUESTIONES DE DISEÑO.

En este caso, hay que analizar específicamente las cuestiones de multimedia y de

navegación 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 inglés referenciado con el término “to be cool”-, que implica tomar

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 129
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
ventaja de los aspectos tecnológicos más recientes y novedosos, se ha creído por
mucho tiempo ser la causa más importante para lograr la permanencia en Internet.

Sin embargo, numerosos estudios de usabilidad han comprobado que muchas

veces utilizar nuevas tecnologías, tales como mapas de imágenes, animaciones,
elementos Shockwave u otros efectos visuales atrayentes, complican
considerablemente la interacción con el sitio, producen distracciones, molestias,
demoras, y hasta son considerados difíciles de utilizar.

Además, como se verá en las próximas secciones, las reglas del buen diseño
restringen las cuestiones tecnológicas ya que, por ejemplo, se recomienda
minimizar el tiempo de carga y ancho de banda de tal forma que el acceder a la
próxima página del sitio, no consuma más tiempo que el de dar vuelta la página de
un diario o revista.

También, se recomienda tener consideraciones especiales en el contenido e

ilustración. Se aconseja texto estructurado y resaltando sólo lo más importante,
imágenes chicas, poca carga visual, diseño estético pero minimalista.

Por tal motivo, los diseñadores han sido forzados a utilizar nuevas tecnologías, pero
únicamente en forma alternativa o complementaria a un diseño más moderado y
simple. Con respecto a la navegación, su problema inherente de pérdida de
contexto, se agrava aún más en un entorno de la Web, donde existen varias líneas
de navegación.

En un sitio, pueden estar disponibles la navegación por contenido, por estructura,

navegación atrás y adelante, navegación adaptada y otras más, que se describirán
posteriormente en este capítulo.

Debido a esto, hay que considerar que el modelo de navegación de la Web difiere
del de las aplicaciones que no son para Internet. Esta diferencia causa confusión a
los usuarios y los diseñadores necesitan trabajar específicamente con normas de

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 130
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
diseño especiales para la navegación, en pos de ayudar a los usuarios a utilizar la
aplicación Web satisfactoriamente.

Además, hay que tener en cuenta que, dentro del entorno de la Web, la navegación
tiene una fuerte relación con la forma en que la misma es percibida por los usuarios.
La navegación se ve afectada por la apariencia de los hipervínculos, por su
ubicación, por la visualización de su entorno, por la información que acompaña la
estructura de la navegación y por otros recursos, haciendo aún más complicado su
diseño y tratamiento.

5.1.3. RESPECTO A LOS OBJETIVOS.

Al desarrollar un sitio Web, el diseñador de la interfaz debe proponerse ciertos

objetivos que son específicos para este entorno, además 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 Capítulo I, pero además hay
que tener en cuenta ciertos propósitos especiales.

En el mundo tan competitivo de la Web, donde se plantea el concepto de “user

engagement”, que implica “captar al usuario” mediante un diseño eficiente de la
presentación y contenido del sitio, el objetivo de usabilidad será crucial para la
supervivencia de los sitios. Las técnicas de Ingeniería de Usabilidad, permiten la
creación de sitios Web más fáciles de usar, ayudando a los desarrolladores a
focalizar su atención en el usuario más que en la tecnología.

Analizar las necesidades de los usuarios, sus objetivos, sus pretensiones respecto
a las actividades que se desarrollarán dentro del sitio, se considera más importante
que el adoptar los últimos aspectos de avanzada. Desde ya que, si la última
tecnología va acorde al perfil de los usuarios y ayuda a concretar sus intenciones
frente al sitio, no habría problemas en ser incorporada, pero utilizarla por una
cuestión de “estar a la moda”, es actualmente, inaceptable. Jacob Nielsen, precursor

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 131
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
del concepto de Usabilidad, especifica como complemento a la usabilidad, otros
objetivos importantes para el diseño Web que deberían ser considerados, como ser:

En la construcción de la interfaz de un sitio Web, no son aplicables las cuestiones

de diseño del desarrollo de las interfaces gráficas, de boletines informativos, ni de
un documento hipermedial.

La interfaz Web presenta sus características propias, por lo que debe ser tratada
específicamente en todas sus etapas de desarrollo.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 132
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
5.2. PARTICULARIDADES EN EL DESARROLLO WEB.

Es importante que los desarrolladores comprendan que un sitio Web es un software

que presenta particularidades específicas, que cuenta con sus propios objetivos,
con un caudal de usuarios muy importante y heterogéneo, y que presenta
inherentemente ciertos problemas de diseño.

Estas características 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 diseñadores a
ahondar aún más, en la etapa de requerimientos de la interfaz del sitio,
complementando con ciertas actividades específicas que serán de gran utilidad para
posteriormente encarar un correcto diseño del mismo.

Además de esto, el desarrollador Web, deberá tener en cuenta que existe una
propuesta metodológica que apunta a la construcción de sitios “usables”, que él
puede incorporar y aplicar como proceso de desarrollo. Este esquema metodológico
es denominado Ingeniería de Usabilidad, fue creado por Jacob Nielsen y será
introducido posteriormente.

Otro aspecto importante y característico que el diseñador no podrá saltear, es la

investigación, el estudio y selección de las normas específicas para el diseño de
una correcta interfaz para la Web. Se tiene destinado para ello, la última sección de
este capítulo, donde se listarán y explicarán los principios de diseño más
importantes que deben ser considerados por los desarrolladores Web.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 133
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
5.2.1. ACTIVIDADES PREVIAS AL DISEÑO 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 diseño.

Para ello, se sugiere encarar una serie de actividades complementarias a las de la

etapa de requerimientos o pre-diseño, de las interfaces del usuario tradicionales, en
pos de comprender aún más la problemática inherente a la Web y poder paliarla
adecuadamente.

5.2.1.1. DETERMINAR LA COMUNIDAD DESTINATARIA DE LECTORES.

En el sitio de la BBCMundo.com indica que actualmente Internet cuenta con más de

miles de millones de usuarios de todo el mundo. Los mismos podrían 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 diseñador
y provocar pasar por alto, a la modelización de usuarios.

Se pone el valor en el diseño centrado en el usuario, pero trabajando principalmente

en acotarlo a una comunidad más específica. Hay que tener en cuenta que la
mayoría de los sitios Web, son construidos para una determinada audiencia, a la
que se le destina y se le dedica los servicios, la información y las funcionalidades
provistas.

Pueden ser alumnos, médicos, clientes, consumidores, amas de casa, adultos

mayores, hinchas de un club de fútbol. Además, hay que considerar que, cualquier
medición de éxito de un sitio, se plantea en base a dicha audiencia, es decir número
de visitas, permanencia en el sitio del visitante, número de revisitas, ventas, ranking,
opiniones, quejas.

Por lo tanto, es lógico pensar en profundizar la atención hacia esos usuarios

destinatarios, y utilizar este análisis, en pos de ofrecer el mejor diseño y el más

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 134
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
adecuado, para los mismos. Contar con un entendimiento profundo sobre quiénes
serán los usuarios destinos del sitio, cuáles son sus perfiles, qué es lo que ellos
quieren hacer en el sitio y cómo ellos tienden a comportarse, no es necesariamente
un proceso complicado, y más aún, en función de las ventajas que se pueden
alcanzar al encararlo en forma sistemática y consistente.

Este proceso fundamentalmente, consiste de los siguientes puntos:

5.2.1.2. PLANIFICAR EL SITIO WEB.

El reconocimiento y modelización 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.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 135
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Pero además, hay que considerar de suma importancia, al proceso de planificación
del sitio, que esencialmente consiste en que el desarrollador tenga en claro cuál
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 diseño del sitio,
debería pensar principalmente en los siguientes cuestionamientos:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 136
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

5.2.1.3. PENSAR EN LA PROTOTIPACIÓN.

Es fundamental que los diseñadores Web, se preparen y se organicen para aplicar

en forma efectiva, la Prototipación durante el proceso de diseño del sitio. La
Prototipación es fundamental para trabajar con todo lo que se ha planificado del
sitio, constituye un medio poderoso de representación y de comunicación de las
distintas alternativas de diseño y, establece un marco adecuado para la puesta en
marcha de ideas y toma de decisiones.

Además, a través de los prototipos, que son versiones parciales del software que
se está desarrollando, se puede obtener de antemano la comprobación y
corroboración de cuestiones de usabilidad.

Ellos son de gran utilidad para la organización y realización de evaluaciones, donde

se puede obtener parámetros sobre la performance de los usuarios y su grado de
satisfacción, previamente a invertir el tiempo necesario, esfuerzos y los costos, para
la construcción final del sitio.

Partiendo de las definiciones que se detallaron en el Capítulo II, y teniendo en

cuenta el contexto de la Web, un prototipo será entonces una versión incompleta
del sitio, donde reflejará parcialmente ciertos contenidos y servicios.

Por lo general, se inicia con un prototipo de la página principal y alguna de sus

páginas secundarias, para que el usuario vaya observando y percibiendo el diseño

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 137
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
general del sitio. Luego, se van confeccionando versiones prototípicas más
avanzadas y completas, donde la estructura de la navegación y cuestiones de
interacción pueden ser probados frente a los usuarios.

La Prototipación es una metodología que permite trabajar con cuestiones de interfaz

en forma separada del aplicativo subyacente, respetando la estrategia de
Independencia de Diálogo.

El separar el “look & feel” de un sitio respecto de sus aplicativos funcionales, desde
las etapas iniciales del desarrollo durante su diseño y en el testeo, permitirá un
esquema de trabajo más organizado, eficiente, que va a incidir favorablemente en
la calidad del producto final.

5.2.2. INGENIERÍA DE USABILIDAD.

La usabilidad o calidad de uso, es uno de los objetivos más importantes de la interfaz

del usuario. La misma especifica el grado de efectividad que tiene la interacción que
se provee entre los usuarios y el sistema.

Es una conjunción de proveer simplicidad en la interfaz, que sea fácil de usar y

aprender, brindar eficiencia y productividad en la utilización e interacción y lograr
satisfacción subjetiva por parte de los usuarios. Jacob Nielsen [Nielsen, 1994] es el
promotor de este concepto y él introdujo a la Ingeniería de Usabilidad como una
metodología de desarrollo adecuada a la construcción de sitios Web.

Esta metodología 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 metodológico, se ayuda a los desarrolladores a focalizar su
atención en los usuarios más que en la tecnología. Por ello, provee una estructura
clara para la participación efectiva de los usuarios, mejorando la calidad y el trabajo
de reingeniería.

Está constituido por un conjunto de procesos, tales como:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 138
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
▪ Conocimiento del usuario.
▪ Definición de objetivos de usabilidad.
▪ Análisis heurísticos, Análisis competitivo.
▪ Diseño iterativo, Diseño paralelo, Diseño participativo.
▪ Diseño coordinado de la interfaz del usuario global.
▪ Prototipación.
▪ Testeo empírico.
▪ Recolección de feedback o información de retorno sobre el uso real del sitio.

Hay procesos que ya lo hemos explicado en el capítulo de Desarrollo de la Interfaz

del usuario, pero hay otros que requieren cierta explicación, como los que se van a
detallar a continuación:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 139
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

En el ciclo de vida de la Ingeniería de Usabilidad intervienen ciertos procesos que

anteriormente fueron explicados y que denotan tres estadios dentro del desarrollo,
la fase de pre-diseño, de diseño propiamente dicho y de post-diseño.

En la siguiente ilustración, se muestran los estadios y los procesos que lo

conforman:

Estos estadios tienen una correspondencia, con las etapas tradicionales del
desarrollo del software, en donde se tienen las etapas de requerimientos, diseño,
implementación y evaluación principalmente.

La relación entre estas etapas y las fases de la Ingeniería de Usabilidad, se

visualizan en el siguiente gráfico:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 140
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

5.3. PRINCIPIOS DE DISEÑO DE UN SITIO WEB.

Todos las actividades, análisis y planificaciones que los desarrolladores Web

pueden llevar a cabo en la etapa inicial de requerimientos, son determinantes para
encarar correctamente el diseño del mismo.

Otra tarea preliminar que incidirá enormemente en la calidad del producto final, es
la investigación y el recopilado de los principios y recomendaciones de diseño, que
existen actualmente para la Web. Hay innumerables normas y sugerencias sobre el
buen diseño, que se aconsejan cumplir dentro del desarrollo del sitio Web,
mayormente publicadas en la World Wide Web Consortium.

Este consorcio promueve y desarrolla los estandares de la Web, como HTML 4 y 5,

este ultimo de reciente publicación. HTML5 mejora en forma significativa cuestiones
de accesibilidad y semántica del contenido de la Web.

Para más información sobre la Web semántica se puede acceder a la sección de

web semántica de la W3C. Las cuestiones de accesibilidad se abordan en el
siguiente capitulo. Otro ejemplo de definición de estandares de la W3C es la
recomendación sobre el uso de hojas de estilo en cascada, o CSS por sus siglas en
inglés Cascading Style Sheets.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 141
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Las hojas de estilo permiten separar la visualización del contenido de un sitio Web
y asegurar la misma continuidad visual en todo el sitio.

Facilitan diferentes formas de presentación, por ejemplo, al ser accedido desde

diferentes dispositivos o para ajustarse a las preferencias de los usuarios, sin
necesidad de modificar los cientos de páginas que conforman el sitio Web. Se
recomienda usar una única hoja de estilo para todas las páginas del sitio, en un
archivo separado.

Por cuestiones de accesibilidad, es importante tener en cuenta que el sitio debe

poder visualizarse correctamente aún sin hojas de estilos, no usar atributos que
ignoren las preferencias de los usuarios, no usar más de dos tipos de letras
diferentes.

Otra recomendación es el considerar el desarrollo de políticas P3P, Platform for

Privacy Preferences. El mismo es un proyecto de la W3C que fomenta la publicación
de las políticas de privacidad de los sitios Web en un formato estándar, que sea
entendido por los clientes y los sitios Web.

Los clientes Web deberían brindar una herramienta amigable para configurar sus
opciones de privacidad y luego, al navegar por los diferentes sitios se bloquearían
las cookies en forma puntual, y no en forma general como es el comportamiento
hasta ahora. Los sitios Web deben definir sus políticas de privacidad en forma
abierta y los clientes Web deberían mostrárselas al usuario en forma amigable para
que las configure según sus preferencias.

Existe un debate sobre si su uso es adecuado o no, sobre las leyes que lo respaldan
y la dificultad de configuración, 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, también constituyen una
guía de recomendaciones para el diseño Web.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 142
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Constituyen un estándar que agrupan estrategias, guías y recursos para permitir
que la Web sea accesible para todos, más allá de las capacidades psico-fisicas de
los usuarios, el equipamiento disponible, velocidad de conexión y entorno desde
donde lleva a cabo la interacción. Es recomendable tener en cuenta estas guías
desde el inicio del desarrollo del sitio Web. En el capítulo VI se analizarán estas
normas con mayor profundidad.

La W3C también hace referencia a las consideraciones sobre Web móvil, ¿el sitio
Web soportará acceso a través de dispositivos inalámbricos del tipo teléfono celular
o PALMs? Las Mobile Web Best Practices (MWBP) constituyen una guía para hacer
sitios web usables desde dispositivos móviles. Las interfaces móviles ameritan un
capítulo aparte, que no han sido incluidas en este libro.

Es importante también considerar otras cuestiones técnicas específicas a la Web,

como es la seguridad en las aplicaciones Web. Hoy en día es fundamental
implementar aplicaciones seguras, a fin de garantizarle al usuario que sus
transacciones se realizan de forma confiable y evitar ataques clásicos, como virus
y gusanos, robo de identidad y datos personales a través de programas espías o
spyware; o direcciones de correo electrónico que solicitan que confirmen
determinados datos personales almacenados en un dominio, por ejemplo una
entidad bancaria, y en realidad la información reenviada es destinada a personas
ajenas (phishing).

Si bien los usuarios deben conocer estas cuestiones y actuar responsablemente

durante su navegación, es importante brindar desde el sitio Web que se está
diseñando un conjunto básico de aspectos de seguridad.

Por ejemplo, para recoger información sensible en línea, se recomienda

implementar algún 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 diseñar mensajes de advertencia

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 143
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
claros para los usuarios al acceder a sitios no seguros. Minimizar la complejidad de
las contraseñas, tanto como sea posible.

Es muy común encontrar un papel adherido a los monitores con las credenciales
para acceder al sistema. Solicitar como identificación de usuario la dirección de
correo electrónico, así se garantiza la unicidad y rápida memorización.

Si el sitio funciona como puerta de entrada para otros sistemas que requiere
autenticación, 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 gestión de alumnos que brinda operaciones
transaccionales, como escribirse a una mesa de examen, podría 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, aun cuando no tengan que ver estrictamente con cuestiones de
usabilidad. Las políticas de uso aceptable y de confidencialidad de la información
también deberían ser consideradas, cuidadosamente elaboradas y publicadas en
forma visible y comprensible.

Las políticas de uso aceptable, abreviado AUP por Acceptable Use Policy, se
denominan también términos del servicio o términos de uso. Constituyen un
conjunto de normas que indica como debe usarse un servicio en línea, por ejemplo
que ante determinadas acciones no adecuadas del usuario puede suspendérsele 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

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 144
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
tomadas por un usuario. Las políticas referidas a la confidencialidad de los datos,
determinan qué información que el usuario brinda al sitio, por ejemplo, edad,
teléfono, dirección de correo electrónico, gustos personales u ocupación, pueden
ser compartidas a terceras partes.

Existen organizaciones independientes, como TRUSTe y Better Business Bureau,

entre otras, que certifican que las políticas de confidencialidad son cumplidas,
responden a estándares internacionales, y además resuelve disputas de privacidad
de la información de particulares.

El diseñador puede, luego de un proceso de análisis general, acotar las reglas que
va a considerar, armándose su propio repertorio de normas de acuerdo al objetivo
del sitio que se va a encarar, al tipo de páginas y componentes que contendrá y, de
acuerdo al tipo de contenido que se pretende proveer.

En esta sección, se van a listar los principios de diseño más importantes que por lo
general, se recomienda aplicar y cumplir dentro de la interfaz del usuario del sitio
Web. Para mayor claridad, se presentarán estas normas en forma organizada y
clasificada, de acuerdo a las siguientes categorías:

▪ Normas a nivel de sitio: donde aquí, se analizarán aquellas normas

específicas tanto a la estructura del sitio, a la navegación como a los
hipervínculos.
▪ Normas a nivel de página: aquí se van a tratar las reglas de diseño para las
páginas que conformarán el sitio, agrupando las normas para el diseño
general de las mismas, específicamente en la página inicial y en la de
formularios.
▪ Normas a nivel de contenido: se explicarán las normas que deben ser
aplicadas a nivel de la información que se va a transmitir, teniendo en cuenta
características del lenguaje, formas de diálogo, de organización del texto y
demás cuestiones.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 145
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
5.3.1. PRINCIPIOS DE DISEÑO 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 diseño a nivel de estructura del sitio, a nivel de
navegación y a nivel de hipervínculos.

5.3.1.1. LA ESTRUCTURA DEL SITIO WEB.

Uno de los puntos más importantes a considerar dentro del diseño del sitio en
general, es la estructura del mismo. En un ambiente tan visual como la Web, el buen
diseño de la interfaz tiene mucho que ver con el sentido y el grado de expresividad
de dicha visualización, no sólo aplicada en la representatividad de la información,
sino a la estructura organizativa del sitio.

Construir y mantener una relación coherente y estrecha entre la arquitectura y la

interfaz, es decir, entre la lógica de la estructura y el significado visual, es
fundamental para lograr la mejor adecuación e interacción 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 diseñadores comienzan a construir sistemática e

irreflexivamente numerosas páginas de distintas clases y tamaños, enganchadas
entre sí mediante una cantidad de hipervínculos, sin analizar una lógica general de
organización.

Esto se manifiesta posteriormente dentro de la interfaz, provocando innumerables

problemas de navegación e interacción, muy difíciles de subsanar una vez que el
sitio ya ha sido desarrollado.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 146
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Como es sabido, la forma de organización de la información inherente a la Web es
la organización hipermedial, o sea que las páginas y sus hipervínculos son
representados y tratados internamente como nodos y arcos de un hipergrafo.

No sólo se proveen hipervínculos para relacionar contenido, sino para acceder a las
funciones principales, a servicios secundarios, adicionales, a información no tan
relevante o de relleno, para ir atrás y adelante, arriba o abajo, para enlazar páginas
por acceso directo o acortamientos, para acceder a otros sitios, o por otras
cuestiones.

Por ello, para poder paliar esta situación, el desarrollador debe primeramente definir
y trabajar con una estructura básica, en donde se consideren únicamente las
páginas más relevantes del sitio y los hipervínculos esenciales para poder acceder
a dicha información.

Esta estructura, más 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
través de una perspectiva más sencilla y pueda a partir de allí, entender la lógica y
el significado de esta estructuración inicial.

Una vez definido el esqueleto estructural del sitio, el diseñador podrá agregar la
restante información adicional y todos las hiper-conexiones que crea necesarias,
por lo que esta estructura básica debe estar definida de tal forma, que soporte las
futuras extensiones y amplificaciones.

Entonces, el diseñador deberá trabajar arduamente en el diseño general del sitio y

en la definición de una estructura elemental del mismo, como se explican en las
siguientes normas:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 147
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

5.3.1.2. LA NAVEGACIÓN DEL SITIO WEB.

La navegación se refiere a la forma en que los usuarios construyen su exploración

a través del sitio, mediante la utilización de los hipervínculos, que constituyen el
medio para trasladarse y recorrer los diferentes puntos del mismo.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 148
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
El usuario podrá navegar dentro de una misma página o entre varias páginas que
pueden pertenecer a un mismo sitio o no. Si uno tiene en cuenta la organización
hipermedial de la Web, entonces, se puede decir que la navegación implicaría la
determinación y recorrido de un camino dentro del grafo subyacente, conformado
por aquellos nodos y arcos que respectivamente, son las páginas visitadas y los
hipervínculos activados.

En la siguiente tabla, se resumirán las recomendaciones de diseño más importantes

para el proceso de navegación:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 149
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

5.3.1.3. LOS HIPERVÍNCULOS.

Un hipervínculo es una palabra, frase, imagen o símbolo, que permite a los usuarios
saltar de un lado a otra ubicación del mismo sitio o de algún sitio externo.

Como en el resto de los casos, existen normas específicas a tener en cuenta en el

diseño de los hipervínculos, que se van a resumir a continuación:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 150
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

5.3.2. PRINCIPIOS DE DISEÑO A NIVEL DE PÁGINA.

En esta sección, se van a listar las recomendaciones de diseño a nivel de página,

separando las normas según el diseño general, la página principal y para aquellas
que provean formularios.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 151
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
En el caso que el diseñador desee proveer otro tipo de páginas como ser, de
transacciones, de contacto, publicitarias, entonces va a tener que reunir las normas
específicas de acuerdo a ello y respetarlas en su diseño del sitio.

Mediante estas normas se recomienda al diseñador comenzar con definiciones de

moldes o “templates” de páginas, teniendo en cuenta cada tipo de página que el
sitio proveerá.

Esto constituye un buen esquema de trabajo grupal, puesto que provee una guía de
diseño de cómo deben construirse las páginas del sitio que el equipo de trabajo
deberá respetar, y fundamentalmente para garantizar consistencia a lo largo de todo
su desarrollo.

5.3.2.1. DISEÑO GENERAL DE LAS PÁGINAS.

Todas las páginas del sitio deben construirse a partir de la definición de un modelo,
estipulado y diseñado bajo determinados lineamientos.

El mismo consistirá en la definición de pautas relacionadas con la diagramación

general, sectorización, organización del contenido, aspectos de visualización como
el logo, especificación del tipo de letra general, su tamaño, fondos y colores a
utilizar.

Este modelo conformará el diseño general de páginas que deberá estar definido, a
parte de la definición de moldes más específicos para diferentes tipos de páginas.
Con respecto al diseño general de las páginas, se deben respetar las siguientes
recomendaciones:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 152
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 153
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

5.3.2.2. LA PÁGINA INICIAL.

La página inicial es sumamente importante, no sólo por ser la primera impresión que
el usuario tiene del sitio entero, sino por ser la puerta de entrada, la que lo introduce
al mismo y se lo presenta.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 154
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Habitualmente, el usuario tiene como expectativas de la página 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 página inicial, son:

5.3.2.3. PÁGINA CON FORMULARIOS.

Un formulario es una componente visual que permite reunir un conjunto de

diferentes objetos de interacción, en pos de permitir la entrada de datos por parte
del usuario. El mismo puede estar compuesto de casilleros de entrada de textos,

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 155
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
títulos, listas de selección, botones, casilleros de chequeo, entre otros. Existen
normas específicas a páginas que posean formularios, como las siguientes:

5.3.3. PRINCIPIOS DE DISEÑO 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 diseño a nivel de contenido, que permita mejorar el grado de

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 156
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
comunicación y de percepción. Se van a presentar recomendaciones de diseño a
nivel general como también del lenguaje empleado.

5.3.3.1. DISEÑO GENERAL DEL CONTENIDO.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 157
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
5.3.3.2. LENGUAJE EMPLEADO.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 158
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
UNIDAD TEMÁTICA VI

UX

Los avances tecnológicos han permitido que hoy podamos acceder a información y
realizar tareas de forma más eficiente. Como usuarios de la tecnología, hemos
tenido que aprender a utilizar nuevas herramientas y nuevos dispositivos para
aprovecharla.

El camino no ha sido tan sencillo como podría parecer. Todas y cada una de las
aplicaciones, páginas web, dispositivos o herramientas deben pasar por un proceso
de diseño de experiencias de usuario en el que los profesionales de esta disciplina
han de ser capaces de acercar el nuevo producto al usuario: Deben hacer la
tecnología más amigable, usable y accesible, con el objetivo de mejorar la
experiencia del usuario y de hacer que el uso de ese producto le sea realmente útil.

El diseño de la experiencia de usuario se preocupa de que un producto pueda ser

utilizado por el usuario al que va dirigido y satisfaga sus expectativas: Una buena
experiencia de usuario maximizará su nivel de satisfacción.

El diseño de la experiencia de usuario debe controlar elementos relativos a la

interacción del usuario con el producto y, en el caso de productos basados en
contenidos como páginas web o aplicaciones, también a la arquitectura de la
información.

6.1. ¿QUÉ ES UX?

Son las siglas de User Experience o en español: Experiencia de Usuario. Es la

experiencia que un usuario percibe al interactuar con un producto o servicio.

Para que un producto o servicio tenga una buena UX debe ser intuitivo, funcional,
usable y tener una buena UI (Interfaz de usuario). UX es lo que te hace sentir una
marca, producto o servicio al momento de interactuar con él.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 159
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Como se ha señalado con anterioridad, la experiencia de usuario es aquel proceso
que se desarrolla cuando el usuario navega en una interfaz digital. Cuando
experimentamos algo, hay varios criterios que debemos tener en cuenta:

▪ Nuestras sensaciones: ¿Por qué me gusta interactuar en esta interfaz? ¿Me

gusta la forma en que se presentan las cosas?
▪ Nuestro ambiente: ¿El ambiente que me rodea es propicio a una experiencia
de usuario exitosa?
▪ Nuestras necesidades y motivaciones: ¿Qué necesito? ¿Qué información
busco?
▪ Las interacciones ofrecidas por la página web o aplicación: Cuando hago clic
aquí, ¿qué ocurre?

El secreto para ofrecer la mejor experiencia de usuario El diseño UX le otorga mucha

importancia al hecho de ofrecer una interfaz accesible, gráficamente clara,
funcional, práctica y fácil de usar.

Es necesario hacer que los usuarios sientan ganas de quedarse en la aplicación y

descubrir sus secretos. La aplicación o página web debe permitirte encontrar
rápidamente la información que buscas, presentar una imagen de marca fuerte y
positiva en consonancia con la identidad visual de calidad, presentar
funcionalidades originales y auténticas, entre otras cosas.

6.2. ¿CUÁL ES LA DIFERENCIA ENTRE EL DISEÑO UX Y EL DISEÑO UI?

El diseño UI se centra en la parte visual, todo aquello visible para el usuario:

▪ Diseño gráfico: iconos, formas e imágenes para dar sentido a las acciones
del usuario.
▪ Colores de la interfaz, ilustraciones, botones, textos.
▪ Tipografía: fuentes, uso de negrita o subrayado.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 160
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
▪ Diseño de la página: espacios entre los bloques, número de elementos en la
interfaz gráfica.

Por su parte, el diseño UX representa aquello que llamamos la ciencia del usuario,
es decir, todo lo relacionado con:

▪ La estrategia.
▪ El conocimiento de las necesidades del usuario.
▪ La constitución de prototipos, escenarios, etc.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 161
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
6.3. ELEMENTOS CLAVE DE LA EXPERIENCIA DE USUARIO.

6.3.1. USABILIDAD.

La usabilidad es un atributo de calidad de un producto que se refiere sencillamente

a su facilidad de uso. No se trata de un atributo universal, ya que un producto será
usable si lo es para su audiencia específica y para el propósito específico con el que
fue diseñado.

Por ejemplo, podemos decir que una aplicación móvil para invertir en bolsa será
usable si resulta fácil de usar para inversores y con el propósito de operar en los
mercados, no necesariamente para otro tipo de usuarios ni propósitos.

Pero, ¿qué significa exactamente que un producto sea fácil de usar?

6.3.1.1. DIMENSIONES.

La usabilidad tiene dos dimensiones, la dimensión objetiva o inherente, y la

dimensión subjetiva o aparente. La dimensión objetiva es la que se puede medir
mediante la observación, y que podemos desgranar en los siguientes atributos:

▪ Facilidad de Aprendizaje: ¿Cómo de fácil resulta para los usuarios llevar a

cabo tareas básicas la primera vez que se enfrentan al diseño?
▪ Eficiencia: Una vez que los usuarios han aprendido el funcionamiento básico
del diseño, ¿cuánto tardan en la realización de tareas?
▪ Cualidad de ser recordado: Cuando los usuarios vuelven a usar el diseño
después de un periodo sin hacerlo, ¿cuánto tardan en volver a adquirir el
conocimiento necesario para usarlo eficientemente?
▪ Eficacia: Durante la realización de una tarea, ¿cuántos errores comete el
usuario?, ¿cómo de graves son las consecuencias de esos errores?, ¿cómo
de rápido puede el usuario deshacer las consecuencias de sus propios
errores?

La dimensión subjetiva, en cambio, se basa en la percepción del usuario:

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 162
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
▪ Satisfacción: ¿Cómo de agradable y sencillo le ha parecido al usuario la
realización de las tareas?

Lo interesante de esta doble dimensión es que en ocasiones un producto puede ser

subjetivamente usable, pero no serlo objetivamente (y viceversa). Como veremos
cuando tratemos el principio de Estética, el atractivo visual de un producto hace que
el usuario lo perciba como más fácil de usar, aun cuando no lo sea.

6.3.1.2. UTILIDAD.

Usabilidad y utilidad son dos atributos que tienen una relación de mutua
dependencia. La usabilidad es el grado en el que el usuario puede explotar o
aprovechar la utilidad de un producto, al tiempo que un producto será usable en la
medida en que el beneficio de usarlo (utilidad) justifique el esfuerzo necesario.

6.3.2. ACCESIBILIDAD.

Si hay una verdad universal acerca de los usuarios de un producto es que todos son
diversos funcionalmente. La accesibilidad es un atributo del producto que se refiere
a la posibilidad de que pueda ser usado sin problemas por el mayor número de
personas posibles, independientemente de las limitaciones propias del individuo o
de las derivadas del contexto de uso.

Estas limitaciones pueden ser discapacidades (temporales o permanentes);

relativas a su nivel de conocimientos, habilidades o experiencia; o impuestas por el
contexto de uso (barreras físicas, iluminación, ruido, software o hardware de
acceso…).

Diseñar productos accesibles no significa diseñar para todos, ya que los productos
suelen estar ideados para audiencias específicas.

Diseñar productos accesibles significa asumir la diversidad funcional de su

audiencia específica, diseñar su interfaz de usuario de acuerdo a esta diversidad, o

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 163
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
proporcionar mecanismos de adaptación para responder a las necesidades de
acceso específicas de los diferentes grupos de usuarios que conforman esta
audiencia. Un producto accesible debe ser:

▪ Perceptible: la información y los componentes de la interfaz de usuario deben

ser mostrados a los usuarios de forma que puedan percibirlos.
▪ Operable: Los componentes de la interfaz de usuario deben ser manejables.
▪ Comprensible. La información y las diferentes opciones deben ser
comprensibles.
▪ Robusto: Maximizar la compatibilidad con actuales y futuros agentes de
usuario, incluyendo tecnologías de asistencia o productos de apoyo.

6.3.3. ARQUITECTURA DE INFORMACIÓN.

El término arquitectura de información fue originalmente acuñado por Richard Saul

Wurman en 1975, y definido como: “El estudio de la organización de la información
con el objetivo de permitir al usuario encontrar su vía de navegación hacia el
conocimiento y la comprensión de la información” Aunque sin duda fue el libro de
Morville y Rosenfeld el que lo popularizó y dio a conocer a toda la comunidad
profesional.

La arquitectura de información puede ser definida desde diferentes dimensiones:

▪ Como atributo de un diseño: Una correcta arquitectura de información es

aquella que permite al usuario encontrar la información que necesita; que
facilita la navegación y comprensión del producto; y que motiva al usuario a
explorar los contenidos y funcionalidades.
▪ Como actividad profesional: Es la tarea de organizar, describir, etiquetar y
estructurar la información de un producto.
▪ Como objeto: Se habla de arquitecturas de información para referirse a los
documentos en los que se especifica la organización y comportamiento
interactivo del producto.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 164
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
▪ Como disciplina: La arquitectura de información abarca todos aquellos
conocimientos acerca de cómo las personas buscan o recuperan información
en entornos digitales, y qué principios teóricos y metodologías de diseño
pueden aplicarse para satisfacer sus necesidades informativas. Como es
lógico, la arquitectura de información se nutre de una gran variedad de
conocimientos provenientes de diversas disciplinas, como la Psicología,
Documentación, Informática, Comunicación, Sociología, etc.

En resumen, podemos definir la arquitectura de información como: El arte, la ciencia

y la práctica de diseñar espacios interactivos comprensibles, que ofrezcan una
experiencia de uso satisfactoria facilitando el encuentro entre las necesidades de
los usuarios y los contenidos y/o funcionalidades del producto.

La arquitectura de información, en todas estas dimensiones, ha estado durante años

fuertemente ligada a los productos web, especialmente aquellos que dan acceso a
grandes volúmenes de contenidos, en parte debido a que eran el objeto de estudio
del libro de Morville y Rosenfeld.

Sin embargo, tanto sus principios como metodologías son perfectamente aplicables
a productos interactivos de diferente naturaleza, como por ejemplo aplicaciones
software.

6.3.4. DISEÑO CENTRADO EN EL USUARIO.

Una vez tomamos conciencia del objetivo que perseguimos - experiencias de

usuario plenas y satisfactorias -, la siguiente pregunta lógica es plantearnos el
procedimiento, cómo vamos a alcanzar ese objetivo.

El Diseño Centrado en el Usuario o DCU (UCD, User-Centered Design) hace

referencia a una visión o filosofía del diseño en la que el proceso está conducido
por información acerca de la audiencia objetiva del producto.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 165
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
La principal diferencia del DCU frente a otros enfoques es que su proceso no es
secuencial o lineal, sino que presenta ciclos en los que iterativamente se prueba el
diseño y se optimiza hasta alcanzar el nivel de calidad requerido. En el proceso de
DCU podemos diferenciar entre las siguientes etapas:

▪ Planificación/Investigación: Se define conceptualmente el producto en base

a la investigación de la audiencia objetiva (necesidades, motivaciones,
características, hábitos, modelo mental, actividades…) y al análisis
competitivo (qué otros productos existen con audiencias y funciones
similares).
▪ Diseño/Prototipado: Se toman decisiones de diseño partiendo de su
dimensión más general (arquitectura de información y diseño de interacción)
hasta su dimensión más específica (diseño gráfico en detalle y micro-
interacciones). Estas decisiones se documentan y se prototipan con objetivos
de evaluación.
▪ Evaluación: Aquellas decisiones de diseño y procesos críticos del producto
se ponen a prueba mediante métodos de evaluación que pueden involucrar
a usuarios.
▪ Implementación: Una vez el diseño ha alcanzado el nivel requerido de
calidad, se procede a su implementación o puesta en producción.
▪ Monitorización: Una vez lanzado el producto se estudia el uso que de él
hacen los usuarios, con el fin de identificar oportunidades de mejora.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 166
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
El DCU es una filosofía de diseño basada en evidencias. El proceso está, por una
parte, conducido por el conocimiento empírico de la audiencia específica a la que
se dirige, y por otra parte, dirigido por principios de diseño que la experiencia y la
investigación científica nos ofrece.

Frente a otros enfoques como el Diseño Participativo, en el DCU los usuarios no

participan en la toma de decisiones. Es el equipo de diseño el que tiene esa
responsabilidad en exclusiva, y es su capacidad para transformar su conocimiento
sobre el usuario en decisiones de diseño acertadas la que determinará la
experiencia de uso del producto.

6.3.5. INTERACCIÓN.

Cuando diseñamos cualquier interfaz de usuario lo que estamos haciendo es

modelar, delimitar y conducir la interacción del usuario, determinando de qué
opciones dispondrá el usuario en cada momento y cómo responderá el producto a
cada una de sus acciones.

Por ello, si existe un concepto central en la experiencia de usuario es precisamente

el de la interacción. En ocasiones esta interacción es denominada “diálogo”, aunque
realmente no se trate de una concepción muy adecuada, ya que hasta cierto punto
equipara la comunicación entre personas y productos con la que se produce entre
personas.

Como explica Norman (2007) en todo caso podríamos hablar de dos monólogos, en
los que a veces el sistema debe obedecer nuestras órdenes, y en otras ocasiones
nosotros debemos obedecer las suyas. A diferencia de en el diálogo entre personas,
en este intercambio de monólogos no hay opción de obtener explicaciones sobre el
porqué de las órdenes del otro (argumentos, razones o intenciones).

Imaginemos por ejemplo estar conduciendo un coche utilizando un dispositivo GPS.

Obviamente lo que se está produciendo no es un diálogo, sino un intercambio de

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 167
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
órdenes, en el que el usuario indica cuál es el destino y el GPS cuál es la mejor ruta
para llegar al mismo.

Si atendemos al modelo propuesto por Norman (1988), podemos considerar la

interacción como un proceso iterativo y cíclico, divisible en 3 etapas principales, y
sus consiguientes sub-etapas:

▪ Formulación del objetivo: Qué quiere lograr el usuario.

▪ Ejecución: Qué hace: Formular su intención, especificar la acción y ejecutar
la acción.
▪ Evaluación: El usuario compara qué ha ocurrido con que quería que ocurriera
tras su acción: Percibir el estado (o respuesta) del sistema, interpretar el
estado del sistema y evaluar el resultado.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 168
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Lo interesante de este modelo es que nos permite identificar en qué momentos se
pueden producir problemas de uso, en forma de inconexión entre los estados
mentales del usuario (qué pretende conseguir y cómo), y los estados físicos del
sistema (qué funciones permite y cómo induce a realizarlas).

Estos problemas o brechas en la interacción (interaction gulfs) son básicamente

dos: la brecha en la ejecución y la brecha en la evaluación. La brecha en la ejecución
se produce cuando el usuario no es capaz de relacionar qué pretende lograr y cómo
llevar a cabo la acción con las opciones que le ofrece el sistema.

La brecha en la evaluación, en cambio, se produce cuando el usuario no es capaz

de interpretar la respuesta del sistema tras una acción, o cuando esta respuesta no
se corresponde con la que esperaba.

6.4. PROCESO DEL DISEÑO UX.

6.4.1. INVESTIGACIÓN.

Levantamiento de Información acerca del proyecto, cliente y usuarios. Actividades

a realizar:

▪ Analizar los tipos de contenido.

▪ Analizar las necesidades tanto del cliente como de los usuarios.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 169
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
▪ Realizar mapas conceptuales.
▪ Analizar aspectos culturales, políticos, sociales y tecnológicos del proyecto
en general.

6.4.2. ORGANIZACIÓN.

Se organiza la información recopilada de forma gráfica y documentada Algunas

formas de representar la información levantada serían:

▪ Mapa de Arquitectura de Información: es un esquema que representa la

estructura general del producto.
▪ Flujogramas: diagramas de procesos que representan los flujos que deberá
seguir el producto o servicio.

6.4.3. PROTOTIPADO.

En base a la documentación y flujogramas realizadas con respecto a los

requerimientos técnicos levantados se procede a esta fase en la cual se realizan
algunas actividades como:

▪ Especificar y detallar las funcionalidades del producto.

▪ Desarrollar una guía de usabilidad.
▪ Diagramar bocetos que representen la estructura visual del producto
(prototipos de baja fidelidad).
▪ Crear prototipos de alta fidelidad simulando la interactividad de las
funcionalidades (wireframes).

6.4.4. PRUEBAS.

Se ponen a prueba los prototipos de alta fidelidad con usuarios finales. El objetivo
de esta etapa es verificar y comprobar que se está resolviendo las necesidades
planteadas. Algunas actividades a seguir serían:

▪ Especificar y detallar las funcionalidades del producto.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 170
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
▪ Desarrollar una guía de usabilidad.
▪ Diagramar bocetos que representen la estructura visual del producto
(prototipos de baja fidelidad).
▪ Crear prototipos de alta fidelidad simulando la interactividad de las
funcionalidades (wireframes).

6.4.5. DISEÑO/UI.

Los diseñadores reciben los entregables anteriores para llevar a cabo el proceso de
diseño gráfico de la Interfaz de Usuario. Las actividades más destacadas a seguir
serían:

▪ Realizar el diseño gráfico de las interfaces de usuario del producto en

cuestión.
▪ Elaborar una guía de estilos y de interacción.

6.5. TÉCNICAS PARA EL PROCESO DE DISEÑO UX.

En cuanto a las técnicas de UX podemos enlistar algunas como:

▪ Checklist de inicialización del proyecto.

▪ Investigación etnográfica.
▪ Arquitectura de información Card Sorting.
▪ Evaluación heurística o de usabilidad Grabación de sesiones.
▪ Test con usuarios finales.
▪ Flujogramas.
▪ Recorrido cognitivo (comportamiento del usuario).
▪ Mobile First.
▪ Test A/B.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 171
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
6.6. WIREFRAMING.

Es una técnica que se utiliza para evaluar la experiencia del usuario y se utiliza
durante el proceso de diseño del producto y afecta directamente a la experiencia
del usuario.

Un wireframe es un esquema visual básico o prototipo de una página web o una

aplicación móvil. Es utilizado en la fase inicial del diseño para representar la
estructura y los elementos clave de la interfaz sin entrar en detalles de diseño visual,
como colores, tipografías o imágenes. Los wireframes se centran en mostrar la
disposición de los elementos y cómo los usuarios interactuarán con ellos.

Entre sus características principales tenemos:

▪ Estructura básica: Muestra los bloques principales como encabezados,

menús, botones, campos de texto, y otros componentes esenciales.
▪ Sin detalles visuales: Generalmente se usan colores neutros o grises, y las
fuentes suelen ser genéricas. No se busca un diseño detallado, sino la
disposición y funcionalidad.
▪ Foco en la funcionalidad: Ayuda a visualizar cómo los usuarios navegarán
por la interfaz y cómo interactuarán con las diversas funciones.

6.6.1. TIPOS DE WIREFRAMES.

Loa wireframes los podemos clasificar en:

▪ Wireframe de baja fidelidad: Es un esquema simple, a menudo en blanco y

negro, sin mucha especificidad en detalles. Ideal para mostrar la estructura
básica de una página.
▪ Wireframe de alta fidelidad: Más detallado, puede incluir interacciones,
algunos elementos visuales y puede ser interactivo para simular el uso de la
aplicación o el sitio.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 172
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
6.6.2. SOFTWARE PARA PROTOTIPADO.

Antes de comenzar a diseñar, el primer paso del proceso es crear un prototipo de

interfaz con el fin de revisar los conceptos básicos del proyecto y compartir
opiniones con el equipo.

Existen herramientas de prototipado con las que puedes crear una maqueta
interactiva de una página web o aplicación y realizar un testeo del diseño de la
interfaz, del flujo y de la usabilidad del diseño antes de invertir tiempo y dinero en el
desarrollo.

6.6.2.1. MOCKUP BUILDER.

Es una herramienta gratuita de Microsoft integrada en MS Silverlight que está

pensada para crear maquetas de páginas web y software.

La versión gratuita presenta algunas limitaciones en la cantidad de elementos

disponibles, sin embargo, tiene todo lo que necesitas para hacer el prototipo de la
interfaz de usuario desde componentes para iOS o Android hasta buscadores y
aplicaciones de escritorio.

6.6.2.2. FIGMA.

Este software para diseño de interfaces apareció a finales de 2015 y se posicionó

rápidamente al ser el primero en tener colaboración en tiempo real.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 173
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Funciona en línea por lo que permite colaboración en vivo de todos los miembros
del equipo. Incluye herramientas vectoriales para ilustrar, crear prototipos y la
generación de código para el traspaso (hand-off).

La ventaja de aprender a utilizar Figma es que tienes todas las herramientas para
crear un prototipo de interfaz de usuario alineados con las necesidades de tus
usuarios en una sola aplicación.

6.6.2.3. ADOBE XD.

Adobe XD es un software usado para crear y compartir interfaces, tanto para

páginas web como para aplicaciones que se lanzó al mercado en 2015 bajo otro
nombre (Project Comet). Hasta ese momento no existía en Adobe ningún software
específico para diseñar la experiencia de usuario.

Es una buena opción si ya eres usuario del flujo de trabajo de Adobe. Esta
herramienta de diseño de interfaz posibilita el trabajo en línea, guarda el historial de
cambios y permite editar en vivo.

Además, Adobe XD forma parte del Adobe Creative Cloud por lo que no tendrás
que ocupar espacio en tu disco duro.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 174
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

6.6.2.4. PENCIL.

Pencil Project es un software de creación de prototipos de GUI (interfaz gráfica de

usuario, por sus siglas en inglés) de código abierto diseñado para ayudar a los
desarrolladores a crear maquetas en plataformas de escritorio populares.

6.7. PRINCIPIOS DE DISEÑO UX.

6.7.1. CLASIFICACIÓN.

Toda categorización o clasificación debe definirse y evaluarse en función de su

propósito, la naturaleza de los contenidos que describe y el tipo de necesidades de
información de los usuarios.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 175
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
La clasificación de contenidos puede tener diferentes propósitos o funciones. La
función más frecuente es facilitar la recuperación de información, permitir al usuario
satisfacer sus necesidades de información.

En este caso una categorización eficaz es aquella que emplea un lenguaje o

vocabulario familiar para el usuario y en el que los contenidos agrupados bajo cada
categoría resultan predecibles.

En otras palabras, una clasificación que encaja con el modelo mental de sus
usuarios. Otra función diferente es la instructiva o didáctica: cuando la
categorización o taxonomía pretende influir en el modelo mental y semántico del
usuario.

En estos casos la taxonomía no sirve únicamente como medio para encontrar la

información, sino también como vía para enseñar o formar al usuario sobre el
dominio representado.

Ya no es el vocabulario y terminología conocida por los usuarios la que hay que

emplear, sino la del dominio de conocimiento sobre el que se instruye. Esto quiere
decir que no comparten el mismo objetivo una taxonomía en un comercio electrónico
que, por ejemplo, la de un sitio web educativo.

Propiedades formales o descriptivas La clasificación de cualquier conjunto de

recursos se sustenta sobre la caracterización de esos recursos por sus propiedades,
y su posterior agrupación por propiedades comunes. Estas propiedades pueden ser
formales o descriptivas.

Las propiedades formales son objetivas, esto significa que un recurso tiene esa
propiedad o no la tiene, independientemente del juicio del arquitecto de información.
Por ejemplo, si estamos clasificando las fichas de ordenadores personales en una
tienda online, y lo hacemos por su precio (propiedad formal), el arquitecto de
información podrá decidir qué categorías se presentarán al usuario ("de 100-500€",

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 176
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
"de 500€ a 1000€", "más de 1000€"), pero no es él quien decide a qué categoría o
grupo pertenece cada ordenador.

En otras palabras, no decide qué precio tiene cada ordenador, ni cuál es su tamaño
de su pantalla o su peso, porque éstas son propiedades formales. Las propiedades
descriptivas, en cambio, son subjetivas y variables.

Si por ejemplo clasificamos temáticamente los contenidos de una revista online, la

decisión de qué categorías temáticas se utilizarán y de a qué categoría temática se
vinculará cada artículo de la revista, no es una decisión exenta de subjetividad. En
estos casos la efectividad de una categoría, desde el punto de vista de la
recuperación de información, viene determinada por su expresividad y exclusividad.

La expresividad se refiere al grado en el que el usuario podrá predecir los contenidos

representados o vincular inequívocamente la categoría con sus necesidades de
información.

La exclusividad se refiere al grado de disimilitud de la categoría respecto al resto de

categorías, y por tanto a la baja probabilidad de que un usuario pueda dudar entre
si lo que busca se puede encontrar en más de una categoría. Dependiendo de la
propiedad descriptiva utilizada para agrupar los contenidos, y por tanto del rótulo o
nombre que se le asigne a cada categoría, podemos diferenciar entre tres
esquemas principales de clasificación descriptiva: Clasificación orientada a la
audiencia, clasificación orientada a la tarea, y clasificación temática.

A continuación, analizaremos cada una, señalando en qué casos serán

recomendables, y en cuáles no.

6.7.1.1. CLASIFICACIÓN ORIENTADA A LA TAREA.

Si lo que estamos categorizando no son contenidos informativos, sino

funcionalidades, o información sobre cómo usar estas funcionalidades, las

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 177
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
categorías deben estar orientadas a la acción y rotuladas normalmente en forma
verbal.

6.7.1.2. CLASIFICACIÓN ORIENTADA LA AUDIENCIA.

Cuando el producto tiene una audiencia claramente definida y segmentable, y cada

uno de esos grupos de usuarios tiene necesidades diferenciadas, una clasificación
útil es la orientada a la audiencia, en la que los contenidos se categorizan en función
de sus destinatarios.

La clasificación orientada a la audiencia sólo es recomendable cuando todos los

contenidos pueden categorizarse en al menos uno de los perfiles o segmentos de
usuarios definidos, y cuando esos perfiles de usuarios tienen necesidades
informativas diferentes entre sí.

Es decir, si aun teniendo grupos identificables de usuarios, todos estos grupos

tienen intereses comunes, no tiene sentido clasificar por perfil del usuario.

6.7.1.3. CLASIFICACIÓN TEMÁTICA.

La solución más común en clasificación de información, por su efectividad, es la

clasificación temática, en la que los contenidos son agrupados por su similitud
semántica, bajo rótulos o categorías en forma de sustantivos.

Este esquema de clasificación resulta muy útil cuando el usuario tiene una
representación semántica de su necesidad informativa, ya que facilita reconocer
qué se está buscando recorriendo las diferentes categorías.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 178
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Sin embargo, este tipo de clasificación también puede resultar problemática para el
usuario, debido a la ambigüedad inherente del lenguaje natural (sinonimia y
polisemia). Al tratarse de una clasificación subjetiva, puede que el usuario no
reconozca el significado de algunas categorías, o sea incapaz de predecir qué
contenidos están representados por cada categoría.

Además, también puede suceder que definamos categorías demasiado similares o

genéricas, y que el usuario crea que el contenido buscado se encuentra bajo una
categoría, cuando realmente ha sido incluido en otra.

6.7.2. JERARQUÍA VISUAL.

La jerarquía visual es un concepto esencial dentro del diseño de interfaces de

usuario (UI) y la experiencia de usuario (UX), fundamentado en la organización y
presentación de elementos visuales de una manera que dirige la atención del
usuario de forma intuitiva.

Este principio se basa en la comprensión de cómo percibimos visualmente el orden,

la importancia y el foco en una composición, lo que resulta crucial para transmitir

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 179
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
información de manera efectiva y crear interfaces que faciliten una navegación fluida
y satisfactoria.

En el ámbito de UX/UI, la jerarquía visual se refiere a la disposición y presentación

de componentes en una interfaz de manera que los usuarios puedan comprender
fácilmente su importancia relativa y función.

Esto se logra mediante el uso estratégico de colores, tamaños, contrastes, y otros

elementos visuales para guiar la vista del usuario hacia la información y acciones
más importantes primero, mejorando así la experiencia general de uso.

6.7.3. COLOR.

El color mejora la estética y funciona eficazmente tanto para destacar y organizar

elementos como para codificar información. El color es uno de los recursos con
mayor impacto en la estética y atractivo de una interfaz. Como relata Norman: “En
los primeros años de vida de los ordenadores personales, los monitores en color
eran algo inconcebible.

La mayoría de las pantallas eran en blanco y negro. Sin duda el primero de los Apple
Computer, el Apple II, tenía color, pero sólo aparecía en los juegos: cualquier trabajo
serio que se hiciera en un Apple II era hecho en blanco y negro, por lo general, con
un texto blanco proyectado sobre fondo negro.

A principios de la década de 1980, cuando empezó a introducirse el uso de las

primeras pantallas a color en el mundo de los ordenadores personales, me resultaba
difícil llegar a comprender la razón de su atractivo.

En aquella época, el color se usaba sobre todo para resaltar un texto o para añadir
una decoración, superflua, a la pantalla. Si se consideraba desde el punto de vista
cognitivo, el color no añadía ningún valor que, por ejemplo, un sombreado no
pudiera ofrecer. Pero las empresas insistieron en comprar monitores en color

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 180
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
incurriendo en costes adicionales, pese al hecho de no tener justificación científica
que amparara aquella decisión.

Ciertamente, el color satisfacía cierta necesidad, pero se trataba de una necesidad

que no se podía medir. Pedí prestado un monitor de color para ver de qué iba todo
aquel alboroto. Pronto me convencí de que la evaluación que había hecho de
entrada era correcta: el color no añadía ningún valor discernible al trabajo diario.
Con todo me negué a deshacerme del monitor a color.

La razón me decía que el color no era importante, pero, en cambio, mi reacción

emocional me hacía ver lo contrario.”

No obstante, el color no tiene exclusivamente una función estética o emocional, ya

que también tiene una importante función comunicativa. Además, cuando el color
es usado de forma incorrecta puede ocasionar graves problemas de usabilidad.

▪ Número de colores: En el diseño se debe limitar el número de colores

diferentes utilizados a aquellos que el ojo humano puede procesar de un
vistazo: alrededor de cinco colores dependiendo de la complejidad del
diseño. Además, cuando el color se utiliza para codificar algún significado,
conforme aumenta el número de colores (y significados) diferentes, se reduce
su utilidad para esta función.
▪ Codificación de información: En muchas ocasiones el color resulta un recurso
muy útil para reforzar el significado de ciertos elementos de la interfaz,
apoyándose para ello en el sentido que diferentes culturas asocian a
determinados colores. En este sentido la recomendación lógica es no incurrir
en contradicciones que puedan interferir en la interpretación automática
(intuitiva) del mensaje.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 181
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

Otra forma de codificar información mediante el color es incluir leyendas que

especifiquen qué significa cada color. Este uso se apoya en el principio de la
Gestalt que determina que aquellos elementos que comparten atributos
gráficos (como el color) son percibidos intuitivamente como pertenecientes a
un mismo grupo.

Hay no obstante que tener en cuenta que existe un considerable porcentaje

de personas que no pueden ver alguno/s de los colores (rojo, verde, azul y
amarillo) o incluso ninguno (visión monocromática).

En concreto aproximadamente el 4% de la población presenta alguna

deficiencia visual cromática (8% en hombres y 1% en mujeres). Esto significa

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 182
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
que, como norma general, la información visual codificada mediante el color
no debe ser esencial, o si lo es debe ser codificada de forma redundante,
utilizando otros recursos para codificar la misma información.

▪ Combinación de colores: La teoría sobre percepción del color - en concreto

la teoría sobre los procesos oponentes - afirma que la visión canaliza el color
en tres canales diferentes: uno codifica la luminancia (blanco-negro) y otros
dos el color (rojo-verde y azul-amarillo). Es una teoría que surge de la
apariencia subjetiva de la luz, en concreto de la existencia de pares de
colores que no pueden verse al mismo tiempo: rojo-verde, azul-amarillo y
negro-blanco (acromático).
No son visibles, por ejemplo, el verde rojizo o el azul amarillento. Una
consecuencia de esta teoría es la recomendación general de evitar la
combinación de colores incompatibles (rojo, verde, azul y amarillo),
principalmente de los puros o saturados.
Por ejemplo, poner letras en color azul sobre fondo amarillo puede inhibir su
visibilidad, o el texto en rojo sobre un fondo azul puede parecer que ‘vibra’.

6.7.4. PROPORCIÓN.

La proporción se refiere a la relación entre los diferentes elementos visuales en una

pantalla. Utilizando proporciones equilibradas se puede crear una apariencia
coherente y equilibrada en la interfaz. La proporción puede utilizarse para destacar
los elementos más importantes y hacer que la pantalla sea más fácil de leer y

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 183
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
entender. El uso de la Proporción Áurea traerá el enfoque de los visitantes a las
cosas concretas que se quieren enfatizar.

6.7.5. ALINEACIÓN.

La alineación se refiere a la manera en que se organizan los elementos en la

pantalla. Al alinear los elementos de manera consistente se mejora la legibilidad y
la comprensión del contenido. La alineación también puede utilizarse para crear un
sentido de fluidez en la interfaz y guiar al usuario a través de la información.

6.7.6. REPETICIÓN.

La repetición se refiere a la utilización de patrones y elementos visuales repetidos

en la interfaz. Utilizando patrones repetidos se puede crear una sensación de
coherencia y unificación en la interfaz. La repetición también puede utilizarse para
destacar los elementos más importantes y hacer que la pantalla sea más fácil de
entender y utilizar.

6.7.7. TEXTO.

El texto es uno de los elementos más importantes en la jerarquía visual. Utilizando

diferentes tamaños, fuentes y estilos de texto se puede destacar la información
importante y mejorar la legibilidad. El texto también puede utilizarse para guiar al
usuario a través de la información y mejorar la comprensión.

6.7.8. SIMPLICIDAD.

La simplicidad se refiere a la reducción de la cantidad de elementos visuales en la

interfaz. Al simplificar la interfaz se puede enfocar la atención en los elementos más
importantes y hacer que la pantalla sea más fácil de entender y utilizar.

6.7.9. ACCESIBILIDAD.

La accesibilidad es crucial en el diseño UX/UI, para hacer que la interfaz sea usable
por todos, incluyendo personas con discapacidades. Es necesario considerar el

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 184
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
contraste de color, el tamaño y la legibilidad de la tipografía, la compatibilidad con
dispositivos de asistencia y alternativas para elementos visuales. Los diseñadores
deben asegurarse de que la interfaz sea clara y fácil de navegar para todos los
usuarios.

6.7.10. COHERENCIA.

La consistencia se refiere a la utilización de elementos visuales consistentes en toda

la interfaz. Utilizando elementos visuales consistentes se mejora la comprensión y
la navegación en la interfaz. La consistencia también puede utilizarse para crear
una sensación de coherencia en la experiencia de usuario y aumentar la credibilidad
de la marca.

6.7.11. JERARQUÍA.

La jerarquía se refiere a la organización visual de los elementos en la pantalla.

Utilizando diferentes tamaños, colores y estilos de texto se puede destacar la
información más importante y guiar al usuario a través de la información de manera
efectiva. La jerarquía también puede utilizarse para crear una sensación de orden y
estructura en la interfaz.

6.7.12. ÉNFASIS.

El énfasis se refiere a la utilización de elementos visuales para destacar información

importante en la pantalla. Utilizando diferentes tamaños, colores y estilos de texto
se puede hacer que los elementos importantes destaquen visualmente y se separen
de los elementos menos importantes. El énfasis también puede utilizarse para guiar
al usuario a través de la información y mejorar la comprensión.

6.7.13. DIRECCIÓN.

La dirección se refiere a la utilización de elementos visuales para guiar al usuario a

través de la información en la pantalla. Utilizando flechas, líneas y otros elementos
visuales se puede indicar al usuario la dirección correcta a seguir en la interfaz. La

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 185
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
dirección también puede utilizarse para crear una sensación de fluidez y coherencia
en la interfaz.

6.7.14. SIMETRÍA.

La simetría se refiere a la utilización de elementos visuales simétricos en la interfaz.

Utilizando elementos simétricos se puede crear una sensación de equilibrio y
armonía en la pantalla. La simetría también puede utilizarse para destacar los
elementos más importantes y hacer que la pantalla sea más fácil de entender y
utilizar.

6.7.15. ESCALA.

La escala se refiere a la utilización de diferentes tamaños de elementos visuales en

la pantalla. Utilizando diferentes tamaños se puede crear una sensación de jerarquía
y destacar los elementos más importantes. La escala también puede utilizarse para
crear una sensación de profundidad y añadir interés visual a la pantalla.

6.7.15.1. SATURACIÓN.

El uso de colores saturados es especialmente recomendable cuando se quiere

destacar visualmente algún elemento concreto sobre el resto. No obstante, los
colores saturados provocan fatiga visual, por lo que hay que usarlos con cautela.

6.7.16. EFICIENCIA.

Cada segundo ahorrado al usuario mejora su experiencia de uso. Cada segunda

cuenta. Conforme más eficientemente pueda el usuario completar su tarea
interactiva, mayor será su satisfacción y valoración del producto.

Para ello el sistema o producto debe responder a cada acción del usuario en el
menor tiempo posible, idealmente de forma instantánea. Esta inmediatez, por
ejemplo, es una de las razones que se encuentran tras el éxito de productos como
los de Google.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 186
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
Pero el sistema no sólo debe evitar esperas, su diseño debe además exigir al
usuario el esfuerzo imprescindible para completar su tarea en el menor tiempo
posible. Uno de los estilos de interacción que, por su función (la introducción de
datos por parte del usuario), mayor esfuerzo requieren es el de los formularios. Para
facilitar al usuario la tarea de completar formularios se puede:

▪ Minimizar el número de campos: Solicitar al usuario únicamente los datos

imprescindibles, ya que un formulario con muchos campos no solo requiere
más esfuerzo, sino que también desmotiva al usuario.
▪ Valores por defecto: Si es posible establecer como valor por defecto aquel
que la mayoría de usuarios seleccionarán. De esta forma se ahorrará a
muchos de los usuarios tener que llevar a cabo esta selección.
▪ Tamaño de los campos de texto: Al introducir información textual, si el campo
es muy pequeño y no permite hacerlo de forma cómoda, exigirá más esfuerzo
al usuario y provocará que cometa más errores.
▪ Alineación de las etiquetas: Cuando las etiquetas se encuentran próximas a
los campos a los que describen, resulta para el usuario menos costoso
relacionarlos visualmente.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 187
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
▪ Organización de los campos: Los formularios con los campos posicionados
en varias columnas son más complejos de completar que los que se ordenan
en una única columna.
▪ Ley de Fitts: conforme menor es el área clicable de un elemento del
formulario, mayor es el esfuerzo y tiempo requerido para accionarlo.
▪ Ley de Hicks: Reducir al mínimo el número de opciones por campo.

▪ Captchas: Son, especialmente los de tipo 're-captchas', complejos e

incómodos de resolver, por lo que deben utilizarse métodos más sencillos
para el usuario.

▪ Validación instantánea: Una vez que el usuario complete un campo se debe

validar el dato introducido y advertirle en caso de que no sea correcto, en

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 188
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
lugar de esperar a que complete todo el formulario para realizar la validación
y listarle todos los errores cometidos.

▪ Ayuda contextual: Cuando el usuario pueda dudar acerca del significado de

un campo o sobre cómo introducir los datos, se debe ofrecer ayuda
contextual.
▪ Sugerencias automáticas: Cuando el listado de opciones a elegir en un
campo de selección sea grande, y el usuario tenga una representación
mental sintáctica de la opción deseada (es decir, conozca a priori el término
o palabras que forman la opción), resulta más recomendable utilizar un
campo de texto que, cuando el usuario comience a escribir, ofrezca
automáticamente qué opciones coinciden con el texto introducido.

6.7.17. ERROR HUMANO.

La primera función de todo buen diseño es evitar o prevenir el error humano. Los
usuarios cometen errores, en gran parte debido a que cuando utilizan un producto
interactivo su principal prioridad es la eficiencia, lograr sus objetivos lo más rápido
posible, y eso implica que no atiendan a cada detalle de la interfaz ni piensen
detenidamente cada acción que llevan a cabo.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 189
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
El diseño debe prevenir que el usuario cometa errores, y ofrecer vías de solución
cuando ocurran, ya que son la mayor causa de frustración en el usuario y por tanto
de experiencias de usuario negativas. De hecho, como sugiere Norman, esos
errores no deberían ni siquiera considerarse errores del usuario, sino errores del
sistema o simplemente mal diseño.

A continuación, se revisan las principales medidas a tomar con este objetivo.

▪ Limitar las posibilidades: Cuanto más se limiten las posibles formas en las
que el usuario puede introducir un dato o llevar a cabo una acción, menor
será la probabilidad de que lo haga erróneamente.

▪ Orientar al usuario: Ofrecer ayuda contextual, mediante breves explicaciones

o tooltips, reduce la probabilidad de error.

▪ Advertir y solicitar confirmación: Cuando el usuario realice una acción que

pueda tener consecuencias irreversibles, se le debe advertir y solicitar
confirmación. Conforme mayor sea la gravedad de las posibles
consecuencias de tomar una mala decisión, con mayor fuerza deberemos

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 190
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
atraer la atención del usuario sobre la elección, y más debemos 'dificultarle'
que la opción elegida sea la irreversible.

▪ Proteger el trabajo del usuario: Siempre que sea técnicamente posible es

recomendable guardar automáticamente los datos o información introducida
por el usuario para evitar que, si se produce un fallo técnico, se pierda.
▪ Permitir deshacer: Uno de los mecanismos más eficaces para evitar las
consecuencias negativas de un error humano, es permitir al usuario deshacer
en cualquier momento los cambios realizados.
▪ Solución automática de errores: Existe una gran cantidad de posibles errores
que puede cometer el usuario y que es posible detectar y solucionar de forma
automática. Siempre resultará más recomendable dar solución a estos
errores que advertir al usuario de los mismos y obligarle a rectificarlos.
▪ Mensajes de error comprensibles: Cuando no sea posible evitar un error
(humano o del sistema), se debe informar al usuario en un lenguaje claro y
comprensible, e idealmente ofreciendo solución al problema. En estos
mensajes el producto no debe culpar al usuario de lo que su diseño no ha
sido capaz de prevenir.

6.7.18. ESTÉTICA.

Un diseño estético es percibido como más fácil de usar. Diferentes estudios han
demostrado que existe una correlación entre estética y usabilidad percibida, es

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 191
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
decir, que el usuario ante un diseño bello o atractivo lo prejuzga automáticamente
como más fácil de usar.

La estética además evoca emociones positivas, y es la cualidad del diseño que de

forma más inmediata impacta en el usuario.

Esto implica que, para ofrecer una experiencia de usuario satisfactoria, debemos
prestar especial atención a la estética. Aunque no existen directrices o
recomendaciones infalibles para que un diseño resulte estético, sí hay ciertos
conceptos relacionados de interés.

6.7.18.1. PROPORCIÓN ÁUREA.

El número áureo es un número algebraico irracional cuyo valor es aproximadamente

1,61803. Si tenemos dos segmentos, a y b, siendo a de mayor tamaño que b,
podemos hablar de proporción áurea cuando la proporción entre la suma de los dos
segmentos y la del segmento a, es la misma que entre el segmento a y el segmento
b.

O dicho de otro modo, cuando la longitud de a es 1,61803 veces la longitud de b.

Lo interesante de esta proporción es que podemos encontrarla en muchas formas
geométricas de la naturaleza, y que por su efecto positivo en la estética ha sido
aplicado durante siglos en la arquitectura y el arte.

En el diseño de interfaces los usos más comunes de la proporción áurea suelen ser
para determinar el ancho y proporción entre dos columnas (cuando una es mayor
que la otra), o en la proporción entre el ancho y el alto de rectángulos. Por ejemplo,
en mosaicos, como galerías de fotos o fichas de productos.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 192
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

6.7.18.2. BALANCE.

El balance como concepto aplicado al diseño busca — al igual que en la física —

igualar la tensión entre elementos. Un diseño balanceado es percibido como más
estético, transmite armonía.

Una forma de lograr un diseño balanceado es a través de la simetría, en la que los

elementos a cada lado del eje central tienen el mismo peso visual. Pero también es
posible alcanzar el balance en diseños asimétricos. Para ello hay que jugar con el
peso visual de los elementos hasta lograr un estado de equilibrio entre ambos lados
del eje central.

El peso visual de un elemento viene determinado por su tamaño, color, intensidad,

proximidad a otros elementos o margen.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 193
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 194
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

6.7.18.3. ESPACIO EN BLANCO.

Al diseñar tenemos la tendencia natural a ocupar todo el espacio, rellenando cada

hueco en blanco, y de este modo incrementando innecesariamente su complejidad,
la carga visual y cognitiva del usuario.

El espacio en blanco o espacio negativo (no necesariamente el color debe ser

blanco) se refiere al espacio y márgenes entre elementos de la interfaz.

Este espacio en blanco facilita al usuario diferenciar visualmente elementos o

grupos de elementos, permite una exploración visual más calmada, pero también,
incrementa la simplicidad, elegancia y apariencia estética del diseño.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 195
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO

6.7.19. OTROS PRINCIPIOS.

Además de estos principios, hay otros a través de los que buscar la armonía y la
estética en el diseño, como los principios de la Gestalt o la Jerarquía Visual, pero
que serán analizados de forma independiente debido a su importante impacto,
también, en la usabilidad visual de las interfaces.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI

 196
DOSSIER ACADÉMICO DE INTERFACES DE USUARIO
REFERENCIAS BIBLIOGRÁFICAS

1. Javier Díaz Ivana Harari Ana Paola Amadeo, Guía de recomendaciones para
diseño de software centrado en el usuario, Facultad de Informática de la
Universidad Nacional de la Plata, 2013.
2. UOC Corporate, Técnicas y Herramientas para el Diseño de Experiencia de
Uusuario.
3. Mélanie Coltel - Brand Manager, Introducción al diseño digital interactivo,
www.wildcodeschool.com/es
4. YUSEF Hassan Montero, EXPERIENCIA DE USUARIO: PRINCIPIOS Y
MÉTODOS, www.yusef.es, 2015.

LIC. EN ING. DE SISTEMAS ALEX CASILLA CONDORI