DISEÑO DE LA INTERFAZ DE USUARIO

EL plano de una casa (su diseño arquitectónico) no

está completo sin la representación de puertas,
ventanas y conexiones de servicios para el agua,
electricidad y teléfono (por no mencionar la
televisión por cable). Las «puertas, ventanas y
conexiones de servicios» del software informático es
lo que constituye el diseño de la interfaz de usuario.
El diseño de la interfaz se centra en tres áreas de
interés: (1) el diseño de la interfaz entre los
componentes del software; (2) el diseño de las
interfaces entre el software y los otros productores
y consumidores de información no humanos (esto
es, otras entidades externas) y (3) el diseño de la
interfaz entre el hombre (esto es, el usuario) y la
computadora. En esta presentación nos centraremos
exclusivamente en la tercera categoría de diseño de
interfaz, el diseño de la interfaz de usuario
¿Qué es?
El diseño de la interfaz de usuario crea un medio eficaz de comunicación
entre los seres humanos y la computadora.
¿Quién lo hace?
Un ingeniero de software diseña la interfaz de usuario.
¿Por qué es importante?
La interfaz tiene que estar bien hecha porque moldea la percepción que
el usuario tiene del software.
¿Cuáles son los pasos?
La identificación de los requerimientos del usuario, la tarea y el
ambiente. Crear y analizar los escenarios para éste y se definir un
conjunto de objetos y acciones de la interfaz.
¿Cuál es el producto final?
Se crean los escenarios del usuario y se generan los formatos de la
pantalla. Se desarrolla un prototipo de la interfaz y se modifica de
manera iterativa.
¿Cómo me aseguro de que lo hice bien?
Los usuarios “prueban” un prototipo de la interfaz y la retroalimentación
de esta prueba se utiliza para la siguiente modificación iterativa del
prototipo.
En su libro sobre el diseño de la
interfaz, Theo Mandel [Man97] acuñó
tres reglas doradas:
1. Dejar el control al usuario.
2. Reducir la carga de memoria del
usuario.
3. Hacer que la interfaz sea
consistente
• Durante una sesión para recabar los requerimientos de
un nuevo y gran sistema de información,
se preguntó a una usuaria clave acerca de los atributos
de la interfaz gráfica basada en ventanas.
Mandel [Man97] define cierto número de principios de
diseño que permiten que el usuario tenga el control:
• Definir modos de interacción de manera que no se
obligue al usuario a realizar acciones innecesarias o no
deseadas.
• Dar una interacción flexible.
• Permitir que la interacción del usuario sea interrumpible
y también reversible.
• Facilitar la interacción a medida que aumenta la
habilidad y permitir que aquélla se personalice.
• Ocultar los tecnicismos internos al usuario ocasional.
• Diseñar la interacción directa con objetos que aparezcan
en la pantalla.
• Entre más cosas tenga que recordar el usuario, más fácil
será que cometa errores al interactuar con el sistema. Es
por esto que una interfaz de usuario bien diseñada no
sobrecarga la memoria del usuario.
Mandel [Man97]define los siguientes principios de diseño
que permiten que una interfaz reduzca la necesidad de
que el usuario memorice:
• Reducir la demanda de memoria de corto plazo.
• Hacer que lo preestablecido sea significativo.
• Definir atajos que sean intuitivos.
• La distribución visual de la interfaz debe basarse en una
metáfora del mundo real.
• Revelar información de manera progresiva.
• La interfaz debe presentar y obtener información en
forma consistente. Esto implica: 1) que toda la
información se organice de acuerdo con reglas de diseño
que se respeten en todas las pantallas desplegadas, 2)
que los mecanismos de entrada se limiten a un conjunto
pequeño usado en forma consistente en toda la
aplicación, y 3) que los mecanismos para pasar de una
tarea a otra se definan e implementen de modo
consistente.
Mandel [Man97] define varios principios de
diseño que ayudan a que la interfaz tenga consistencia:
• Permita que el usuario coloque la tarea en curso en un
contexto significativo.
• Mantener la consistencia en toda la familia de
aplicaciones.
• Si los modelos interactivos anteriores han creado
expectativas en el usuario, no haga cambios a menos de
que haya una razón ineludible para ello.
ANÁLISIS Y DISEÑO DE
LA INTERFAZ DE
USUARIO
•El proceso general de análisis y diseño
de la interfaz de usuario comienza con
la creación de diferentes modelos del
funcionamiento del sistema (según se
percibe desde fuera). Se empieza
delineando las tareas orientadas al
usuario y a la computadora que se
requieren a fin de obtener el
funcionamiento del sistema.
• Cuando se analiza y diseña la interfaz de usuario,
entran en juego cuatro diferentes modelos. Un
ingeniero (o el encargado del software) establece
un modelo de usuario, el ingeniero de software
crea un modelo del diseño, el usuario final
desarrolla una imagen mental que frecuentemente
se nombra modelo mental o percepción del
sistema, y los implementadores del sistema crean
un modelo de implementación.
• Los usuarios se clasifican como:
1. Principiantes.
2. Usuarios intermitentes que saben.
3. Usuarios frecuentes conocedores.
• El modelo mental del usuario (percepción del
sistema) es la imagen del sistema que los usuarios
finales llevan en la cabeza.
• El modelo de implementación combina la
manifestación externa del sistema basado en
computadora (la vista y sensación de la interfaz)
con toda la información de apoyo (libros,
manuales, videos, archivos de ayuda, etc.) que
describe la sintaxis y semántica de la interfaz.
En esencia, estos modelos permiten que el
diseñador de la interfaz satisfaga un elemento clave
del principio más importante del diseño de la
interfaz de usuario: “Conocer al usuario, conocer
las tareas.”
• El proceso de análisis y diseño de interfaces de usuario es
iterativo y se representa con un modelo espiral, el proceso de
análisis y diseño de la interfaz de usuario comienza en el
interior de la espiral e incluye cuatro actividades estructurales
distintas [Man97]: 1) análisis y modelado de la interfaz, 2)
diseño de ésta, 3) construcción y 4) validación.
1. El análisis de la interfaz se centra en el perfil de los usuarios
que interactuarán con el sistema.
2. La meta del diseño de la interfaz es definir un conjunto de
objetos y acciones de ésta (y sus representaciones en la
pantalla) que permitan al usuario efectuar todas las tareas
definidas en forma tal que cumpla cada meta de la
usabilidad definida para el sistema.
3. La construcción de la interfaz comienza por lo general con la
creación de un prototipo que permite evaluar los escenarios
de uso.
4. La validación de la interfaz se centra en: 1) la capacidad de la
interfaz para implementar correctamente todas las tareas
del usuario, incluir todas las variaciones de éstas y alcanzar
todos los requerimientos generales del usuario; 2) el grado
en el que la interfaz es fácil de usar y de aprender y 3) la
aceptación que tiene por parte del usuario como
herramienta útil en su trabajo.
 ANÁLISIS
DE LA
INTERFAZ
3. ANÁLISIS DE LA INTERFAZ
• Un aspecto clave de todos los modelos del
proceso de la ingeniería de software es éste:
entender el problema antes de tratar de diseñar
una solución. En el caso del diseño de la interfaz
de usuario, entender el problema significa
comprender: 1) a las personas (usuarios finales)
que interactuarán con el sistema a través de la
interfaz, 2) las tareas que los usuarios finales
deban realizar como parte de su trabajo, 3) el
contenido que se presenta como parte de la
interfaz y 4) el ambiente en el que se efectuarán
estas tareas. En las secciones siguientes se
analizan estos elementos del análisis de la
interfaz, en un intento por establecer un
fundamento sólido para las tareas de diseño
siguientes.
3.1 Análisis del usuario
• Es probable que la frase “interfaz de
usuario” sea toda la justificación que se
necesita para dedicar algo de tiempo a
entender al usuario antes de preocuparse
por los aspectos técnicos. Para ello, se
utiliza información procedente de una
variedad amplia de fuentes:
1. Entrevistas.
2. Información de ventas.
3. Información de mercadotecnia.
4. Información de apoyo.
3.2 Análisis y modelado de la tarea
La meta del análisis de la tarea es responder las siguientes
preguntas:
• ¿Qué trabajo realizará el usuario en circunstancias
específicas?
• ¿Qué tareas y subtareas se efectuarán cuando el usuario
haga su trabajo?
• ¿Qué dominio de problema específico manipulará el
usuario al realizar su labor?
• ¿Cuál es la secuencia de las tareas (el flujo del trabajo)?
• ¿Cuál es la jerarquía de las tareas?
Para responder estas preguntas, debe recurrirse a las
técnicas aplicadas en este caso a la interfaz de usuario.
• Casos de uso.
• Elaboración de la tarea.
• Elaboración del objeto.
• Análisis del flujo del trabajo.
• Representación jerárquica.
3.3 Análisis del contenido de la
pantalla
• Las tareas identificadas en la sección 11.3.2
conducen a la presentación de varios tipos
diferentes de contenido. Para las aplicaciones
modernas, el contenido de la pantalla varía de
reportes basados en caracteres (como una hoja
de cálculo), gráficas (histograma, modelo
tridimensional, fotografía de alguien) o
información especializada (por ejemplo, archivos
de audio o video).
• Durante esta etapa del análisis de la interfaz, se
toma en cuenta el formato y la estética del
contenido (según la despliega la interfaz).
3.4 Análisis del ambiente de trabajo
• En ciertas aplicaciones se coloca la interfaz
de usuario de un sistema basado en
computadora en una “ubicación amigable”
(con iluminación adecuada, buena altura
de la pantalla, acceso fácil al teclado, etc.),
pero en otras (como en una fábrica o en la
cabina de un avión) la iluminación es
menos que buena, el ruido es notable, un
teclado o ratón no son opción y la posición
de la pantalla no es la ideal. El diseñador
de la interfaz puede estar restringido por
factores que se confabulan contra la
facilidad del uso.
ETAPAS DEL DISEÑO
DE LA INTERFAZ
4. ETAPAS DEL DISEÑO DE LA
INTERFAZ
• Una vez concluido el análisis de la interfaz, todas las tareas (u
objetos y acciones) requeridas por el usuario final habrán sido
identificadas en detalle y comenzará la actividad de diseño de
la interfaz.
• Aunque se han propuesto muchos modelos diferentes para el
modelo de la interfaz de usuario, todos sugieren alguna
combinación de las etapas siguientes:
1. Definir objetos y acciones de la interfaz (operaciones) con el
uso de la información desarrollada en el análisis de la interfaz
(sección 11.3).
2. Definir eventos (acciones del usuario) que harán que cambie el
estado de la interfaz de usuario. Hay que modelar este
comportamiento.
3. Ilustrar cada estado de la interfaz como lo vería en la realidad
el usuario final.
4. Indicar cómo interpreta el usuario el estado del sistema a
partir de la información provista a través de la interfaz.
4.1 Aplicación de las etapas de
diseño de la interfaz
• Una etapa importante del diseño de la interfaz es la
definición de objetos de la interfaz y de las acciones que se
aplican a ellos. Para lograr esto, se elaboran escenarios de
uso. Es decir, se escribe un caso de uso. Se aíslan los
sustantivos (objetos) y verbos (acciones) a fin de crear una
lista de objetos y acciones.
• Una vez definidos éstos y elaborados en forma iterativa, se
clasifican por tipo. Se identifican los objetos blanco, fuente
y aplicación.
• Cuando se está satisfecho con la definición de todos los
objetos y acciones importantes (para una iteración del
diseño), se realiza la distribución de la pantalla.
• Para dar una ilustración breve de las etapas de diseño
mencionadas, considere un escenario de uso para el
sistema.
4.2 Patrones de diseño de la
interfaz de usuario
• Las interfaces de usuario gráficas se han
vuelto tan comunes que ha surgido una
amplia variedad de patrones de diseño de
ellas.
• Como ejemplo de un problema de diseño
de la interfaz que es común encontrar,
considere una situación en la que un
usuario debe introducir una o más fechas,
a veces varios meses antes. Hay muchas
soluciones para este sencillo problema y se
han propuesto varios patrones distintos.
4.3 Aspectos del diseño
A medida que evoluciona una interfaz de usuario, casi
siempre surgen cuatro aspectos comunes del diseño:
tiempo de respuesta del sistema, herramientas de ayuda
para el usuario, manejo de información errónea y
leyendas de los comandos. Desafortunadamente, son
muchos los diseñadores que no enfrentan estos aspectos
hasta que es relativamente tarde en el proceso de diseño.
Es mucho mejor establecer cada uno de ellos como un
aspecto del diseño que debe tomarse en cuenta al
comenzar el diseño del software, cuando es fácil y barato
hacer cambios.
• Tiempo de respuesta.
• Manejo de errores.
• Leyendas del menú y de los comandos.
• Accesibilidad de la aplicación.
• Internacionalización.
• Toda interfaz de usuario diseñada para una webapp,
aplicación de software tradicional, producto de consumo
o dispositivo industrial debe tener las características de
usabilidad.

• La interfaz de usuario de una webapp es la

“primera impresión” que se recibe. Sin importar el
valor de su contenido, ni la sofisticación de sus
capacidades y servicios de procesamiento, así
como el beneficio general de la webapp en sí, una
interfaz mal diseñada decepcionará al usuario
potencial y en realidad hará que éste vaya a
cualquier otro sitio.
• Previsión. Una webapp debe diseñarse de modo que prevea el
siguiente movimiento del usuario.
• Comunicación. La interfaz debe comunicar el estado de
cualquier actividad iniciada por el usuario.
• Consistencia. El uso de controles de navegación, menús, iconos
y estética (color, forma y distribución) debe ser consistente en
la webapp.
• Autonomía controlada. La interfaz debe facilitar el movimiento
del usuario a través de la webapp, pero lo debe hacer de
manera que obligue a respetar las convenciones que se hayan
establecido para la aplicación.
• Eficiencia. El diseño de la webapp y su interfaz deben optimizar
la eficiencia del trabajo del usuario, no la del desarrollador que
la diseña y construye ni del ambiente cliente-servidor que la
ejecuta.
• Flexibilidad. La interfaz debe tener flexibilidad suficiente para
permitir que algunos usuarios realicen tareas directamente, y
que otros exploren la webapp en forma aleatoria.
• Centrarse. La interfaz de la webapp (y el contenido que presente) debe mantenerse
centrada en las tareas en curso del usuario.
• Ley de Fitt. “El tiempo para llegar a un objetivo está en función de la distancia que hay
hasta él y del tamaño que tenga”.
• Objetos de la interfaz humana. Se ha desarrollado una vasta biblioteca de objetos
reutilizables de interfaces humanas para webapps. Úselas.
• Reducción de la latencia. En vez de hacer que el usuario espere a que termine alguna
operación interna (como descargar una imagen gráfica compleja), la webapp debe
usar tareas múltiples, de manera que permita que el usuario continúe con su trabajo
mientras finaliza la operación
• Aprendizaje. Una interfaz de webapp debe diseñarse para minimizar el tiempo de
aprendizaje y, una vez aprendida, minimizar el que se dedique a reaprender cuando se
regrese a la webapp.
• Metáforas. Una interfaz que use una metáfora de interacción es más fácil de aprender
y de usar, en la medida en la que la metáfora sea apropiada para la aplicación y el
usuario.
• Mantener la integridad de los productos del trabajo. Un producto del trabajo (por
ejemplo, un formato llenado por un usuario o una lista especificada por él) debe
guardarse en forma automática, de modo que no se pierda si ocurriera un error.
• Legibilidad. Toda la información presentada en la interfaz debe ser legible para
jóvenes y viejos.
• Dar seguimiento al estado. Cuando resulte apropiado, debe darse seguimiento al
estado de la interacción del usuario y guardarlo, de modo que éste pueda salir y volver
más tarde para recuperarlo de donde lo haya dejado.
• Navegación visible. Una interfaz de webapp bien diseñada da “la ilusión de que los
usuarios están en el mismo lugar, con el trabajo llevado a ellos”.
• Una vez identificadas las tareas del usuario, se crean y analizan los
escenarios del usuario (casos de uso) con objeto de definir un conjunto de
objetos y acciones de la interfaz. Las tareas que siguen representan un
flujo de trabajo rudimentario para diseñar una interfaz para webapp:
1. Revisar la información contenida en el modelo de requerimientos y
refinarla según se requiera.
2. Desarrollar un esquema aproximado de la distribución de la interfaz para
la webapp.
3. Mapear los objetivos del usuario en acciones específicas de la interfaz.
4. Definir un conjunto de tareas de usuario asociadas con cada acción.
5. Elaborar un guión de las imágenes en la pantalla para cada acción de la
interfaz.
6. Refinar la distribución de la interfaz y los guiones con entradas del diseño
de la estética.
7. Identificar los objetos de la interfaz de usuario requeridos para
implementar la interfaz.
8. Desarrollar una representación del procedimiento de la interacción del
usuario con la interfaz.
9. Desarrollar una representación del comportamiento de la interfaz.
10. Describir la distribución de la interfaz para cada estado.
11. Refinar y revisar el modelo del diseño de la interfaz.
• Una vez que se crea un prototipo
operativo de la interfaz de usuario, debe
evaluarse con objeto de determinar si
satisfacen las necesidades de éste. La
evaluación abarca un espectro de
formalidad que va desde una “prueba
de manejo” informal, en la que el
usuario da retroalimentación
instantánea a un estudio diseñado
formalmente que utilice métodos
estadísticos para evaluar cuestionarios
que respondería una población de
usuarios finales.
1. La longitud y complejidad del modelo de
requerimientos o especificaciones escritas del sistema y
su interfaz darán una indicación de la cantidad de
aprendizaje requerido por los usuarios del sistema.
2. El número de tareas del usuario especificadas y el
número promedio de acciones por tarea indicarán el
tiempo de interacción de la eficiencia general del
sistema.
3. El número de acciones, tareas y estados del sistema
indicados por el modelo del diseño implicarán la carga
de memoria para los usuarios del sistema.
4. El estilo de la interfaz, las herramientas de ayuda y el
protocolo del manejo de errores darán una indicación
general de la complejidad de la interfaz y de su grado de
aceptación por parte del usuario.
 CONCLUSION
• La interfaz de usuario es presumiblemente el elemento
más importante de un sistema o producto basado en
computadora. Si la interfaz estuviera mal diseñada,
afectaría mucho la capacidad del usuario de aprovechar
el poder computacional y el contenido de información de
una aplicación. En realidad, una interfaz defectuosa haría
que fallara incluso una aplicación bien diseñada y con
buena implementación.
• La interfaz de usuario es la ventana hacia el software. En
muchos casos, moldea la percepción del usuario respecto
de la calidad del sistema. Si la “ventana” está manchada,
ondulante o rota, el usuario puede rechazar un sistema
basado en computadora que, en lo demás, sería
poderoso.
MUCHAS GRACIAS!!!