Beruflich Dokumente
Kultur Dokumente
Diseño de Interfaces
1
… Introducción … Diseño de Interfaces
Motivaciones para un mejor diseño Metas de alto nivel en el diseño de Interfaces
El diseño de una interface es extremadamente importante • Hacer fáciles las cosas fáciles, hacer posibles las difíciles
• Optimizar los factores humanos y la ergonometría
• Algunas veces una – Hacer una interface tanto confortable como atractiva.
interface de usuario
puede ser una • Maximizar la velocidad de aprendizaje
– Tener en cuenta la transición de usuario novato a experto
cuestión de vida o
muerte • Maximizar la velocidad y la facilidad de uso
• Planta Nuclear • Minimizar el rate de error
• Favorecer el recall rápido
• Tener consistencia con lo que espera el usuario
2
… Evolución del Diseño de Interfaces ... … Evolución del Diseño de Interfaces ...
… Evolución del Diseño de Interfaces ... … Evolución del Diseño de Interfaces ...
Smalltalk-80 screenshot
3
… Evolución del Diseño de Interfaces ... Diseño de Interfaces ...
Hubo muchos aspectos del diseño de la interface Star que En el camino de diseñar un sistema con una buena
contribuyeron a su calidad: interacción se nos plantean preguntas tales como:
- Fuerte acuerdo de diseñar primero e implementar
después. ¿Cómo es el proceso de diseño de una Interface?
- Uso de metodología de diseño teniendo en cuenta los
objetos y las acciones ¿Cómo difiere del modelo cascada de Ingeniería de
- Atención al detalle Software?
- Participación de diseñadores gráficos
¿Quién está involucrado en el diseño?
• 1984, Apple Computer puso en el mercado la Mac como la El modelo de diseño sigue las siguientes premisas:
primera microcomputadora gráfica comercial de escritorio,
basada fuertemente en la Alto y la Star con características: - Es centrado en el usuario e involucra a los usuarios
1) Metáfora del escritorio con ventanas solapadas tanto como sea posible de modo tal que estos puedan
2) Menúes pulldown
influenciarlo
4
… Diseño de Interfaces ... Características del Diseño de Interfaces
Debemos diseñar
Implementación Análisis deTareas
Dos lenguajes y el diálogo que los entrelaza
• Usuario(s) - > computadora-> usuario(s)
Especificación
Prototipado Evaluación
Requerimientos
Un protocolo de comunicación
Diseño Conceptual
• Debemos incluir el tiempo (por ej.,
doble-clicking)
En cada paso del diseño • Interfaces No-WIMP pueden tener
• Considerar múltiples alternativas • Elegir la que mejor se acerque a múltiples canales operando en
– las características del usuario paralelo (por ejemplo,
reconocimiento de gestos y voz). Esto
– los objetivos de diseño se denomina interacción multimodal.
– los requerimientos funcionales
El Diseño de Interfaces es dificultoso Modelo del lenguaje para Interfaces WIMP ...
5
… Modelo del lenguaje para Interfaces WIMP ... … Modelo del lenguaje para Interfaces WIMP ...
… Modelo del lenguaje para Interfaces WIMP ... … Modelo del lenguaje para Interfaces WIMP ...
Podemos pensar en el diálogo en términos gramaticales que Forma de una interface, su “look and feel”
conocemos de los lenguajes de programación:
• Nivel de secuenciamiento de la interacción. Define el
ordenamiento de las entradas y las salidas. El diseño del
• Nivel lexical, tokens secuenciamiento también se denomina diseño sintáctico.
• Nivel sintáctico, reglas de sintaxis Para la entrada, el secuenciamiento comprende las reglas mediante
las cuales las unidades indivisibles de significado (entrada al sistema
• Nivel semántico, significado de las sentencias
via las técnicas de interacción) se combinan en oraciones completas.
Las unidades de significado no pueden ser descompuestas en átomos
¿Cómo aplicamos estas ideas al diseño de interfaces? más chicos sin pérdida de significado. Los movimientos y el click del
mouse necesarios para hacer una selección de menú , pero no
proveen información a la aplicación en forma individual.
Para la salida, la noción de secuencia incluye factores espaciales y
temporales. El secuenciamiento incluye cualquier variación temporal
en la forma del display así como tambiénla diagramación del mismo.
6
… Modelo del lenguaje para Interfaces WIMP ... … Modelo del lenguaje para Interfaces WIMP ...
Ejemplo: Consideramos los elementos vistos aplicados a un
programa para acomodar muebles en salones.
Forma de una interface, su “look and feel”
• Nivel de ligadura (binding). Es lo que se denomina nivel lexical.
Diseño conceptual
Es también parte de la forma de la interface. El binding determina
cómo las unidades de significado de la entrada y la salida son Objetos: salón y diferentes muebles.
formadas a partir de las primitivas de hardware (lexemas).
Relación entre Objetos: salón contiene los muebles.
Las primitivas de entrada son los dispositivos de entrada disponibles.
Operaciones sobre los objetos mueble: Crear, Borrar, Mover,
Las primitivas de salida son las formas(ej., líneas y caracteres) y sus Rotar Seleccionar
atributos (ej., color y font), que proveen los paquetes gráficos.
Operaciones sobre el objeto salón: Guardar y Recuperar
… Modelo del lenguaje para Interfaces WIMP ... … Modelo del lenguaje para Interfaces WIMP
Los diagramas de estado a menudo resultan de ayuda para
Diseño del secuenciamiento
representar los lexemas que integran un comando.
Primero debe seleccionar un objeto y luego una operación
sobre él. La secuencia del diseño sobre la salida define cómo
acomodar la pantalla incluyendo su particionamiento en
resaltada diferentes áreas y la ubicación exacta de los menúes, los
prompts y los mensajes de error.
Diseño del binding
En la entrada la componente del lenguaje de entrada debe
Cliquear fuera de la ser usar el mouse para seleccionar los comandos del menú,
región seleccionada seleccionar muebles y proveer posiciones.
= cancelar
El nivel de hardware binding en la salida incluye el font del
Diagrama de estado texto, el grosor de las líneas, el color de regiones rellenas y
Cliquear dentro de la
general para aplicar un seleccionada la forma en que las primitivas de salida son combinadas para
región seleccionada =
filtro F a una región de aplicar filtro F crear los símbolos que representan los muebles.
una imagen.
7
Estilos de Interface de Usuario ... … Estilos de Interface de Usuario ...
Manipulación Directa
Actualmente, los tres estilos de interfaces de usuario son:
- WYSIWYG (What you see is what you get) Los objetos, los atributos o las relaciones que operan sobre ellos se
representan visualmente. Las operaciones se invocan mediante
- Manipulación Directa
acciones llevadas a cabo sobre la representación visual, típicamente
- Icónica usando el mouse. Es decir que los comandos no son invocados
explícitamente de manera tradicional mediante selección de menú o
Discutiremos cada uno de estos estilos considerando su aplicabilidad, teclado. Ej, apuntar con el mouse un archivo y ponerlo en la
sus ventajas y desventajas y las relaciones entre los mismos. papelera; rotar un objeto con el mouse.
Hay otros estilos de interacción usuario- computadora pero no serán Es poderosa y fácil de aprender pero puede ser lenta para usuarios
enfatizados ya que no son especialmente para gráfica. experimentados. Las interfaces de manipulación directa incorporan a
menudo otros estilos de interface, usualmente comandos invocados
con menúes o teclado. Ej, rotación con manipulación directa o
especificando ángulo.
Es un estilo de interacción fundamental para la gráfica interactiva. La La Manipulación Directa describe sistemas
representación en el display con la que interactúa el usuario es que posean las siguientes características:
esencialmente la misma que la imagen creada por la aplicación.
- Visibilidad de los objetos de interés
- Rapidez, reversibilidad, acciones incrementales
Si la interacción no es WYSIWYG, los usuarios trasladan su imagen
mental de los resultados deseados y los códigos de control. Saben - Reemplazo de lenguajes de comandos de sintaxis
qué ocurrió cuando la entrada codificada es procesada. complejas por manipulación directa de los objetos de interés
8
… Estilos de Interface de Usuario ... … Estilos de Interface de Usuario
Icónica Icónica
Se debe asegurar la armonía de cada ícono como miembro de una familia
Un ícono es una representación pictórica de un objeto, una acción, de íconos.
una propiedad o algún otro concepto. El diseñador de una interface
de usuario tiene a menudo la opción de usar íconos o palabras para
representar tales objetos. El uso de íconos no está relacionado con la
manipulación directa: el texto puede manipularse directamente de la
misma manera que los íconos.
9
… Consideraciones de diseño ... … Consideraciones de diseño ...
Consistencia Minimización de las posibilidades de error
Un sistema consistente es aquél en el cual el modelo conceptual, la No se debe permitir que el usuario cometa errores:
funcionalidad, el secuenciamiento y los hardware-bindings son uniformes - No se le debe dejar borrar un objeto, si no hay nada para borrar
y siguen reglas simples sin apelar a las excepciones y a las condiciones - No se le debe dejar usar paste cuando el portapapeles esté
especiales. vacío.
- No se le debe dejar copiar cuando no hay nada seleccionado
Ejemplos de consistencia en la parte de salida de la interface de usuario: para copiar
-La misma codificación de color se usa de la misma manera. -…
- Los ítems de menú se muestran siempre en la misma posición relativa.
En todas estas instancias el sistema debería deshabilitar los ítems
Ejemplos de consistencia en la parte de entrada de la interface de no disponibles y alertar al usuario acerca de lo que ocurre.
usuario:
- Determinados caracteres del teclado tienen siempre la misma función. Esto es sensitividad al contexto: el sistema provee al usuario sólo
- Se proveen comandos genérico (Move, Copy, …) y pueden ser
de aquellos comandos que son válidos en el modo o en el
aplicados, con resultados predecibles sobre cualquier tipo de objeto en
contexto actual.
el sistema.
También deben evitarse los efectos laterales. Ej, paste del Excel.
Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro
10
… Consideraciones de diseño ... Diseño Visual ...
Acomodamiento a múltiples niveles de habilidades
El diseño visual de una interface de usuario afecta tanto la
Muchos sitemas interactivos deben diseñarse para un amplio impresión inicial del usuario de la interface como la utilidad a
espectro de usuarios, abarcando desde los totalmente inexpertos larzo plazo del sistema.
hasta los que han trabajado con el sistema miles de horas.
El diseño visual abarca todos los elementos de diseño gráfico de
El sistema debe ser usable en todos los niveles de habilidades; una interface, incluyendo la diagramación completa de la pantalla,
para ello deben proveerse aceleradores, prompts, ayuda, el diseño y la forma de los menúes, el uso del color, la
extensibilidad, … codificación de la información y la ubicación de las unidades de
información entre sí.
Los nuevos usuarios se sienten a menudo más cómodos con
menúes y estilos de diálogo que proveen un prompt considerable. Un buen diseño visual se empeña en logar claridad, consistencia y
Los más experimentados, le dan mayor importancia a la velocidad una apariencia atractiva.
de uso, que requiere de teclas de función y comandos desde el
teclado.
Algunos sistemas de ayuda, por ejemplo, oscurecen (a) Principio de proximidad Dos estímulos
completamente el área de trabajo forzando al usuario a que son cercanos son vistos como uno
memorizar el contexto para poder interpretar el mensaje de
(b) Principio de similaridad Dos estímulos
ayuda. Así, una vez que el usuario entiende la ayuda, debe que tienen una propiedad en común son
recordarla en tanto retorna al contexto en el cual ocurrió el error. vistos como perteneciendo a un grupo
11
… Diseño Visual ... … Diseño Visual ...
Codificación Visual
Codificación Visual
En diseño de interfaces, codificar significa crear distinciones Así, para información nominativa, se demuestra que el color se
visuales entre los diferentes tipos de objetos. distingue considerablemente más que la forma o el tamaño.
Cuidado con las personas con problemas de percepción de color. La
Hay muchas técnicas de codificación diferentes: color, forma, codificación de información nominativa no debe sugerir ningún
tamaño, orientación, intensidad, textura, estilos de líneas, etc. ordenamiento.
Los que codifican información ordinal, deben sugerir un
Un elemento fundamental en cualquier técnica de codificación es ordenamiento. Ej, distintas densidades de líneas.
determinar las distintas categorías en que una técnica particular
puede codificar; cuanto más valores de código se introducen Debe tenerse cuidado en no sugerir agrupamiento con color, si no
aumenta la posibilidad de que el usuario se confunda los valores. es lo que se desea. Ej, menú en colores junto con ítems en color.
Existen muchas guías de cómo usar el color efectivamente.
Antes de seleccionar un código, es necesario saber cuántos niveles - Diferentes formas que identifican distintos tipos de
de código son necesarios. También es importante saber si la lápices
información es:
-Nominal: Simplemente se nombran distintos tipos de cosas, como
diferentes tipos de dispositivos. No hay noción de orden.
- Los basureros para representar donde poner los
- Ordinal: Existe una noción de orden entre los elementos, pero no
hay noción de métrica. archivos que no se desea conservar y un CD-Rom para
- Numérica: Existe una métrica. Ej., temperatura, cantidad, altura representar el acceso al mismo
12
… Diseño Visual ... … Diseño Visual ...
Consistencia Visual Principios de Diagramación: Grillado
Las diferencias en apariencia sugieren diferencia en funcionalidad o Se refiere al alineamiento sobre una grilla.
contenido de la información (principio de similaridad).
Se refiere al balance en la ubicación de los distintos elementos de Trata con el tamaño de las áreas rectangulares de la pantalla.
la interface. Ciertas proporciones de las longitudes de los dos lados del
rectángulo son más estéticamente agradables que otras y han
sido usadas desde la antigüedad.
13
… Diseño Visual … Conclusiones ...
Finalmente, podemos decir que Norman identifica dos Diseño práctico centrado en el usuario
principios clave que ayudan a asegurar una buena Interface:
• Conocer las metas de los usuarios
• Visibilidad Los controles deben ser visibles y tener un
buen mapeo con sus efectos – ayuda directa en el diseño de la interface
• Permitir una definición clara del criterio de evaluación basado
• Abordabilidad (affordance) Deben sugerir su
funcionalidad. Es lo que determina cómo debe usarse un
en la tarea a realizar
objeto. • Definir las tareas basándose en la expertitud del usuario
• Ayude al usuario a aprender el sistema
– muestre los grados de libertad y la “affordances”
– tenga en cuenta los múltiples niveles de habilidades
– facilite la transición del usuario novato al experto
14
… Conclusiones
Esté atento a problemas en el diseño
• Estamos tratando con factores humanos
• No deje que su ego moleste
– el usuario está habitualmente en lo cierto
– es duro tomar y aceptar el diseño crítico
• Muchas medidas de performance son subjetivas y difíciles de
descifrar
Bibliografía
Proceedings
● SIGCHI Proceedings (Special Interest Group on Computer Human
Interaction)
● UIST (User Interface Software Techniques)
Libros
● Foley, J., van Dam, A., Feiner, S. y Hughes, J., Computer
Graphics. Principles and Practice, Addison Wesley, 1992, 2nd
Edition.
● Shneiderman, B., Designing the User Interface: Strategies
for Effective Human-Computer Interaction, Addison Wesley,
1998, 3rd Edition.
En la WEB
● http://www.aw.com/DTUI
15