Universidad Tecnolgica Nacional

- Facultad Regional Crdoba Ctedra: Anlisis de Sistemas

Diseo de Interfaces de Usuario

Diseo de interfaces de usuario

Todo aquello que hace posible la interaccin con un sistema

ejecutndose en una computadora.

Un punto o medio de interaccin entre dos sistemas,

disciplinas o grupos.

Un canal de comunicacin entre dos o ms entidades.

Su calidad determina, entre otras cosas:

Si el usuario acepta o no el sistema

Si los diseadores del sistema son elogiados o reprobados
Si un sistema tiene xito o fracasa en el mercado o la empresa.

Al disear la interfaz de una aplicacin, se debe tener en

cuenta el deseo del usuario de enfrentarse a algo fcil, pero
a la vez poderoso

Diseo de interfaces de usuario

Diseo de la interfaz Hombre-Mquina

Creacin de diferentes modelos de funcionamiento del sistema
Especificacin de las tareas humanas y las orientadas a la
computadora
Aspectos de diseo
Diseo de prototipos
Implementacin con la participacin activa del usuario final

Modelos de diseo de interfaces

Modelo de diseo: Especificacin de requisitos

Modelo de usuario: Representa el perfil de los usuarios finales

Edad
Sexo
Estado fsico
Educacin
Procedencia cultural o tnica
Motivacin
Objetivos
Personalidad

El proceso de desarrollo de interfaces

Diseo iterativo
El diseo iterativo de interfaces es un proceso independiente de
la/s tcnica/s utilizada/s para llevarlo a cabo.
El proceso del desarrollo de una interfaz se concibe como un ciclo.
Es importante comprender que este ciclo no slo se cumple dentro
del ciclo de vida de un producto, sino tambin entre productos
y dentro de cada etapa misma.
Mientras tengamos tiempo, trataremos de hacer tantos ciclos de
mejoramiento como nos sea posible, hasta la fecha lmite.
La siguiente versin, tomar al producto existente como su
comienzo y otra vez comenzar el ciclo.

Diseo iterativo

El resultado (o output) de cada etapa es la alimentacin (o input) de

la que sigue, incluso el de la ltima. Los resultados de la etapa de
evaluacin se toman para re-disear la interfaz, implementarla
nuevamente, medir, y as sucesivamente.
Debido a esa repeticin o auto-alimentacin se lo llama diseo
iterativo.

Actualmente, el proceso del desarrollo de una interfaz se concibe

como un ciclo que consta de 4 etapas, en varios niveles:
Diseo
Implementacin
Medicin
Evaluacin

Las etapas y tareas del ciclo

Diseo
Anlisis de requerimientos del producto.
Anlisis de las tareas.
Conocimiento del usuario.
Generacin de posibles metforas y anlisis de tipo de dilogo.
Revisin de posibilidades para la implementacin.
Implementacin
Generacin de prototipos (profundos o amplios, para investigacin general
o de ajustes).
Desarrollo de la aplicacin, sitio o sistema.
Medicin
(Test de usabilidad)
Planificacin (desarrollo del plan, definicin de las medidas, seleccin de
participantes, formacin de observadores, preparacin de los materiales).
Test (prueba piloto, tests con usuarios).
Evaluacin
Conclusin (anlisis de los datos, elaboracin del informe, resultados y
recomendaciones).
Comparacin contra estndares (internos y/o externos), versiones
anteriores del mismo producto y productos competidores.
Verificacin de las diferencias.
Generacin de nuevas metas.

Factores a tener en cuenta

Factores humanos

Percepcin visual, tctil y auditiva

Psicologa cognitiva de la lectura
La memoria humana
Razonamiento

Factores adicionales
Comportamiento del usuario
Comprensin de las tareas que el sistema realiza
Cmo ve venir el usuario la automatizacin de sus tareas

Fundamentos de la percepcin humana

Se utiliza generalmente un medio visual
Una especificacin apropiada de la comunicacin visual es el elemento clave de
una interfaz amigable
Aunque predomina la informacin grfica, an el texto es utilizado ampliamente.
Por ello, la definicin del tamao del texto, el tipo de letra, la longitud de la
lnea, las maysculas, el sitio y el color influyen en la facilidad con que se realiza
la extraccin de informacin
Procesamiento interno de la informacin: extraccin, almacenamiento y
utilizacin

Diseo de interfaces
Algunos de los aspectos propuestos
como gua en el diseo de interfaces
grficas de usuario son:
Elegancia y simplicidad
Escala, contraste y proporcin
Organizacin de estructura visual
Modularizacin
Representacin de imgenes
Guas de estilo

Diseo de interfaces de usuario

Antes de implementar los formularios y los informes, hay que
disear su aspecto. Es conveniente tener en cuenta las
siguientes recomendaciones:

Utilizar ttulos que sean significativos, que identifiquen sin

ambigedad el propsito del informe o formulario.

Dar instrucciones breves y fciles de comprender.

Agrupar y secuenciar los campos de forma lgica.

Hacer que el aspecto del informe o formulario sea atractivo

a la vista.

Utilizar nombres familiares para etiquetar los campos.

Utilizar terminologa y abreviaturas consistentes.

Tcnicas para lograr soluciones elegantes

Reduccin de un diseo a su esencia

Determinar las cualidades esenciales (tpicamente una
lista de adjetivos) que pueden ser incluidas en el diseo
usando elementos formales como: etiquetas, controles,
colores, texturas, patrones o imgenes.
Examinar de manera crtica cada elemento en el diseo
y cuestionar por qu es necesario, cmo esta
relacionado a la esencia del diseo, y que tanto puede
sufrir el diseo sin el. Si no pueden contestarse algunas
preguntas, el elemento debe ser removido.
Tratar de remover el elemento del diseo de alguna
forma. Qu sucede?, Si el diseo se colapsa, ya sea
funcional o estticamente, el elemento debe
permanecer, de otra forma puede omitirse de la solucin
final

Regularizacin de los elementos de un diseo

Use formas geomtricas regulares, contornos simplificados

y colores opacos donde sea posible

Si se requieren mltiples formas similares, hacerlas

idnticas, si es posible, en tamao, forma, color, textura,
contornos, orientacin, alineacin y espaciamiento.

Limitar la variacin en tipografas a una o dos familias

Para cosechar los beneficios de la regularidad, asegrese de

que los elementos crticos que deban resaltar en el diseo
no estn regularizados

Cualquier irregularidad ser interpretada significativamente

por el usuario

Combinacin adecuada de elementos

Revisar el papel funcional de cada elemento en el

diseo

Buscar situaciones donde mltiples elementos

jueguen papeles similares

Preguntar si el papel de un elemento puede ser

desempeado por un elemento adyacente,
posiblemente despus de pequeas modificaciones

Combinar elementos redundantes en uno slo,

posiblemente ms simple

Si no es posible realizar modificaciones al diseo

actual, no importa, hay diseos en los que no se
pueden aplicar estas reglas

Directrices Generales para el diseo de

interfaces
Aunque los aspectos que determinan el diseo de
interfaces grficas de usuario son mltiples, los
podemos agrupar en tres grandes grupos:
Interaccin general: sobre la consistencia de comandos,
proteccin del sistema y facilidades de ayuda y
asistencia
Visualizacin de informacin: cmo el sistema presenta
resultados intermedios o finales al usuario, o en su
defecto alguna situacin que requiera su intervencin
Entrada de datos: cmo el usuario se comunica con el
sistema para proporcionar datos y establecer las
condiciones de funcionamiento del sistema

Interaccin general

Ser consistente
Ofrecer una realimentacin significativa
Verificar cualquier accin destructiva no trivial
Permitir una vuelta atrs fcil en la ejecucin de la mayora de
las acciones
Reducir la cantidad de informacin que debe ser memorizada
entre acciones
Buscar la eficiencia en el dilogo, el movimiento y el
pensamiento
Perdonar los errores
Categorizar las actividades en base a su funcin y organizar la
geografa de la pantalla convenientemente
Proporcionar facilidades de ayuda sensibles al contexto
Utilizar verbos de accin simples o frases verbales cortas para
nombrar las ordenes

Visualizacin de la informacin
Mostrar slo aquella informacin que sea relevante en el contexto
actual
No abrumar al usuario con datos - utilizar un formato de
presentacin que permita una asimilacin rpida de la
informacin
Utilizar etiquetas consistentes, abreviaciones estndar y colores
predecibles
Permitir al usuario mantener el contexto visual
Producir mensajes de error significativos
Utilizar maysculas y minsculas, tabulaciones y agrupaciones de
texto para ayudar a la comprensin
Utilizar ventanas (s estn disponibles) para modularizar los
diferentes tipos de informacin
Utilizar representaciones analgicas para mostrar la informacin
que es ms fcil de asimilar bajo este tipo de representacin
Considerar la geografa disponible en la pantalla y utilizarla
eficientemente

Entrada de datos

Minimizar el nmero de acciones de entrada de datos

que debe realizar el usuario
Mantener la consistencia entre la informacin
visualizada y los datos de entrada
Permitir al usuario personalizar la entrada de datos
La interaccin tambin debe ser flexible y estar
ajustada al modelo de entrada preferido por el usuario
Desactivar ordenes que sean inapropiadas en el
contexto actual
Permitir al usuario controlar el flujo interactivo
Proporcionar ayuda en todas las acciones de entrada
de datos
Eliminar las entradas innecesarias

Aspectos que podemos evaluar en una

interfaz
Proporcionalidad: Height / Width de la caja de dilogo, el rango

deseable es =.5 - 0.8. Las cajas de dilogo que realizan

funciones similares deben tener la misma proporcionalidad
Nmero total de Widgets: Considerar el nmero tomando en
una primera instancia como uno a los contenedores, y
posteriormente considerar el nmero total.
Area no utilizada: Area Total / Area Widgets , el rango
recomendable es al menos de 0.20 guardando similaridades
entre dilogos con funcionalidad similar
Densidad de Widgets: (NTW / AT) * 100000 NTW: Nmero
total de Widgets, AT: Area Total
Mrgenes: Superior, Inferior, Izquierdo, Derecho, deben ser
iguales en todas las caja de dilogo
Alineacin: En X y Y, el nmero de arreglos de Widgets que
comparten la misma X (o Y), un nmero alto indica una no
alineacin

Recomendaciones para el
desarrollo de GUI?s

La proporcionalidad debe ser consistente, especialmente para cajas

de dilogos que tienen un diseo visual y una funcionalidad similar
El rea libre en una caja de dilogo debe ser de al menos el 20%
del rea total
Los mrgenes deben ser consistentes
Los Widgets dentro de una caja de dilogo deben estar alineados
horizontal y verticalmente
Deben evitarse diseos muy densos
Buscar la consistencia en colores (foreground y background) y
tipografas
La localizacin y tamao de Widgets frecuentemente usados debe
ser consistente
Ser consistentes en terminologa
Buscar la consistencia en las etiquetas de botones: esto es,
sinnimos como "Abort", "Cancel", "Close" y "Exit" no deben ser
usadas para tareas similares

Diseo de interfaces de usuario

Hacer un uso razonable y consistente de los colores.

Dejar un espacio visible para los datos de entrada y delimitarlos.

Permitir un uso sencillo y adecuado del cursor.

Permitir la correccin carcter a carcter y de campos

completos.

Dar mensajes de error para los valores ``ilegales''.

Marcar los campos que sean opcionales.

Dar mensajes a nivel de campo para explicar su significado.

Dar una seal que indique cundo el informe o formulario est

completo.

Intefaces orientadas a objetos (object oriented

user interfaces, OOUIs)

Se centra en las entradas y salidas de los objetos y tareas.

Se centra en la tarea principal determinada por la aplicacin.

Proporciona al usuario los materiales necesarios para la

realizacin de tareas.
Proporciona al usuario las funciones necesarias para la
realizacin de tareas
Los usuarios abren objetos como vistas en el escritorio
Los usuarios deben abrir una aplicacin antes de trabajar con
objetos
Los iconos representan objetos que se pueden manipular
directamente
Los iconos representan aplicaciones o ventanas abiertas
El producto consiste en una coleccin de objetos que cooperan
y vistas de dichos objetos
La aplicacin consiste en un icono, una ventana principal y
varias secundarias

Deshacer: regresar un solo campo.

Cancelar: ventana de respuesta. Sistema
pregunta si se debe continuar, se combina con
botn Aceptar o SI/No.
Confirmar cambios en Cerrar y Salir: cerrar
ventana dentro de una aplicacin. Salir
abandonar una aplicacin completa.
Revisar cambios no guardados: Cartel
Confirmar en Eliminar: Omitir datos de la BD en
forma permanente. Est seguro?
Guardar Explcito. Nunca guardar con Aceptar u
OK. Accin Guardar en la BD debe ser explcita.