… Introducción ...

El diseño de una interfaz es un compromiso …

Diseño de Interfaces

Dpto. de Ciencias e Ingeniería de la Computación

Universidad Nacional del Sur

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

Introducción ... … Introducción ...

Por qué es importante una buena interfaz… • Hay pros y contras de los distintos estilos de interfaz
– entrada de texto
– manipulación directa
– interfaces inteligentes
– transparencia
– interfaces de propósito general y para tareas específicas
– modalidad (i.e., vi vs. emacs)

• La efectividad de una interface se determina por la evaluación de

sus compromisos

• La usabilidad de un sistema está muy a menudo inversamente

relacionda con su funcionalidad

• Un diseñador de una interface exitosa debe conocer los usuarios y

sus prioridades, el ambiente en el que se desarrolla la interacción y
el dominio de las tareas.
Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

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

Nota: Estos objetivos no pueden acomodarse completamente todos en la

misma interface. Se deben determinar los objetivos más importantes
para el usuario y el propósito de la aplicación.

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

Diseño de Interfaces ... Evolución del Diseño de Interfaces ...

Overview

El objetivo de esta clase es tratar, de manera introductoria el

diseño centrado en el usuario de interfaces WIMP, es decir,
Windows, Icons, Menus y Point-and-click; muchos de los • 1945, Vannevar Bush, diseñador de calculadoras, escribió un
conceptos también se aplican a las interfaces denominadas no- artículo escribiendo su visión de los usos de la electrónica y de
WIMP/post WIMP, por ejemplo, aquéllas que basadas en mouse, la teoría de la información.
en lápices, en gestuales tales como las basadas en data-glove
como las de VR y en reconocimiento de voz.
Bush tuvo la idea de una computadora personal para
aplicaciones no numéricas. La llamó Memex. No estaban dadas
Veremos
ni las condiciones tecnológicas ni la suficiente imaginación por
• Overview de las interfaces de usuario. parte de sus contemporáneos.
• Metodologías y principios de diseño de interfaces de usuario.
• Nociones básicas de las guías y de los conceptos involucrados
en diseño de interfaces de usuario.

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

2
… Evolución del Diseño de Interfaces ... … Evolución del Diseño de Interfaces ...

• En 1981, Xerox introdujo el sistema de Información Star.

• 1963, Ivan Sutherland publicó el sistema gráfico interactivo

Sketchpad, que permitía que los usuarios crearan figuras
geométricas con un lápiz óptico. Las formas geométricas eran
tratadas como objetos.
• 1968, Engelbart mostró el sistema hipermedial de
documentos (NLS: On-Line System) en la Fall Joint Computer
Conference. Era orientado a ventanas, y utilizaba el mouse.
Fue el primer sistema que organizó información textual y
gráfica en árboles y redes. Esto hoy se conoce como un
sistema de hipertexto.
• 1970, Engelbart patentó el mouse

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

… Evolución del Diseño de Interfaces ... … Evolución del Diseño de Interfaces ...

• 1972, Xerox PARC produjo la Alto, primera estación de trabajo

personal. Estaba basada en display raster, mouse comercial,
ethernet y arquitectura cliente-servidor. Tenía el primer editor
WYSIWYG en el mundo, Smalltalk y WIMP GUI’s incluyendo
manejadores de ventana y browsers.
La alta calidad de la interface Star debió su éxito no sólo al diseño
inspirado basado en una década de investigación y desarrollo
creativo y relevante.

Un factor muy importante que contribuyó fue el uso extensivo del

prototipado de ideas, análisis de lápiz y papel y experimentos
sobre distintos factores humanos con potenciales usuarios.

Smalltalk-80 screenshot

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

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?

Sin embargo, no fue un gran suceso comercial. ¿Qué es diseño creativo?

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

… Evolución del Diseño de Interfaces … Diseño de Interfaces ...

• 1984, Apple Computer puso en el mercado la Mac como la
primera microcomputadora gráfica comercial de escritorio,
basada fuertemente en la Alto y la Star con características:
1) Metáfora del escritorio con ventanas solapadas
2) Menúes pulldown
El modelo de diseño sigue las siguientes premisas:
- Es centrado en el usuario e involucra a los usuarios
tanto como sea posible de modo tal que estos puedan
influenciarlo

3) Ícons & herramientas - Integra conocimiento y experiencia de diferentes

4) Manipulación de archivos drag and drop.
• 1985, Microsoft Windows, considerada una imitación de la Mac
con mínimas mejoras
disciplinas que contribuyen al diseño de la interface.
- Es altamente iterativo de modo que el testing pueda
hacerse para chequear que el diseño cumple los
requerimientos del usuario.

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

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

Diseño Conceptual
En cada paso del diseño
• Considerar múltiples alternativas
Un protocolo de comunicación
• Debemos incluir el tiempo (por ej.,
doble-clicking)
• Interfaces No-WIMP pueden tener
• 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

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

El Diseño de Interfaces es dificultoso Modelo del lenguaje para Interfaces WIMP ...

El concepto de diálogo usuario- Computadora es central en el

• In many modern programs, the user interface code constitutes the bulk of diseño de sistemas interactivos.
program, i.e., 70-80% Debe ser eficiente y completo y tener reglas naturales de
secuenciamiento
• For the most part, the user interface is the key to the success or failure of
a program Eficiente: el usuario debe poder introducir comandos en forma
rápida y concisa.
• Computer speed increases by Moore’s law, humans do not
Completo: Debe permitir expresar cualquier idea relevante al
• Creating a good UI is often harder than software engineering because UI dominio de discurso.
design requires much more than software engineering skills
Reglas naturales de secuenciamiento
• Some people typically believe UI design is unimportant because they
misunderstand the design process/methodology
• Nowadays, software companies can be very picky about choosing who
designs their user interfaces because the user interface defines the product

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

5
 … Modelo del lenguaje para Interfaces WIMP ...
Definamos las componentes de la interface usuario-computadora
más específicamente.
Los dos lenguajes que constituyen la interface son:
- El de comunicación del usuario con la computadora. Se expresa vía
acciones aplicadas a los distintos dispositivos de interacción y
algunas veces vía el habla.
- El de comunicación de la computadora con el usuario. Es
expresado gráficamente por medio de líneas, cadenas de caracteres,
áreas, rellenas y colores combinados formando imágenes y
mensajes. También podría comunicarse auralmente.
Computación Gráfica Silvia Castro
… Modelo del lenguaje para Interfaces WIMP ...
Podemos pensar en el diálogo en términos gramaticales que
conocemos de los lenguajes de programación:
• Nivel lexical, tokens
• Nivel sintáctico, reglas de sintaxis
• Nivel semántico, significado de las sentencias
¿Cómo aplicamos estas ideas al diseño de interfaces?
Computación Gráfica Silvia Castro
… Modelo del lenguaje para Interfaces WIMP ...
Significado de una interface, su semántica
• Nivel conceptual. Se definen los conceptos principales de la
aplicación que deben ser manipulados por el usuario. Es el modelo de
la aplicación desde el usuario. El diseño conceptual define
típicamente objetos, propiedades de los objetos, relaciones entre los
mismos y operaciones sobre los objetos. Ej. procesador de texto.
El diseño conceptual de una interface de usuario se decribe a
menudo por medio de una metáfora
• Nivel funcional. Se especifica la funcionalidad detallada de la
interface: qué información es necesaria para cada operación sobre un
objeto, qué errores ocurren, cómo se manejan los errores y cuáles
son los resultados de cada operación.
Computación Gráfica Silvia Castro
… Modelo del lenguaje para Interfaces WIMP ...
Forma de una interface, su “look and feel”
• Nivel de secuenciamiento de la interacción. Define el
ordenamiento de las entradas y las salidas. El diseño del
secuenciamiento también se denomina diseño sintáctico.
Para la entrada, el secuenciamiento comprende las reglas mediante
las cuales las unidades indivisibles de significado (entrada al sistema
via las técnicas de interacción) se combinan en oraciones completas.
Las unidades de significado no pueden ser descompuestas en átomos
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.
Computación Gráfica Silvia Castro
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

Así, para la entrada, el diseño del binding de hardware es el diseño o

Diseño funcional
la selección de las técnicas de interacción y para la salida, es la
combinación de las primitivas de display y los atributos para formar Elaboración detallada de los significados de estas operaciones
íconos y otros símbolos. y relaciones

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

… 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.

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

7
 Estilos de Interface de Usuario ...
Actualmente, los tres estilos de interfaces de usuario son:
- WYSIWYG (What you see is what you get)
- Manipulación Directa
- Icónica
Discutiremos cada uno de estos estilos considerando su aplicabilidad,
sus ventajas y desventajas y las relaciones entre los mismos.
Hay otros estilos de interacción usuario- computadora pero no serán
enfatizados ya que no son especialmente para gráfica.
Computación Gráfica Silvia Castro
… Estilos de Interface de Usuario ...
WYSIWYG (What you see is what you get)
Es un estilo de interacción fundamental para la gráfica interactiva. La
representación en el display con la que interactúa el usuario es
esencialmente la misma que la imagen creada por la aplicación.
Si la interacción no es WYSIWYG, los usuarios trasladan su imagen
mental de los resultados deseados y los códigos de control. Saben
qué ocurrió cuando la entrada codificada es procesada.
Algunas aplicaciones no pueden representarse con una interface pura
de este tipo. Ej., puede no revelar la existencia de relaciones
jerárquicas entre las partes de un objeto.
Computación Gráfica Silvia Castro
… Estilos de Interface de Usuario ...
Manipulación Directa
Los objetos, los atributos o las relaciones que operan sobre ellos se
representan visualmente. Las operaciones se invocan mediante
acciones llevadas a cabo sobre la representación visual, típicamente
usando el mouse. Es decir que los comandos no son invocados
explícitamente de manera tradicional mediante selección de menú o
teclado. Ej, apuntar con el mouse un archivo y ponerlo en la
papelera; rotar un objeto con el mouse.
Es poderosa y fácil de aprender pero puede ser lenta para usuarios
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.
Computación Gráfica Silvia Castro
… Estilos de Interface de Usuario ...
Manipulación Directa
La Manipulación Directa describe sistemas
que posean las siguientes características:
- Visibilidad de los objetos de interés
- Rapidez, reversibilidad, acciones incrementales
- Reemplazo de lenguajes de comandos de sintaxis
complejas por manipulación directa de los objetos de interés
La Apple Macintosh fue el primer sistema comercial de propósito
general que incluyó exitosamente características de manipulación
directa. Actualmente, la mayoría de los sistemas CAD utilizan
principios de manipulación directa.
Computación Gráfica Silvia Castro
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.

Los íconos tienen muchas ventajas. Los bien diseñados pueden

reconocerse más rápidamente que las palabras y ocupan menos
espacio. Si se diseñan cuidadosamente, pueden ser un
independientes del lenguaje permitiendo su uso en diferentes países.

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

… Estilos de Interface de Usuario ... Consideraciones de diseño ...

Icónica
Hay una determinada cantidad de principios de diseño que
En situaciones en las que ambas son posibles (ítem textual o ícono), se ve ayudan a asegurar que se tengan en cuenta los factores humanos
que no es sencillo decidir entre íconos y texto y, por otro lado, cómo en el diseño. Los principios básicos son:
diseñar íconos. Esta decisión depende no sólo de los usuarios y de las
tareas, sino también de la calidad de los íconos o de las palabras - Ser consistente
propuestas. Adicionalmente, deben considerarse guías: - Proveer realimentación
- Minimizar las posibilidades de error
- Representar el objeto o acción de manera reconocible y familiar - Proveer la recuperación de los errores
- Limitar la cantidad de íconos diferentes - Acomodarse a múltiples niveles de habilidades
- Destacar elícono del fondo - Minimizar la memorización
- Considerar cuidadosamente los íconos tridimensionales; pueden ser
atractivos pero también pueden distraer La aplicación de estos principios se considera necesaria, aunque
- Asegurarse que si se selecciona un ícono, esto sea claramente visible no suficiente, para lograr un diseño exitoso.
cuando se rodea de íconos no seleccionados.
- Hacer los íconos distinguibles entre sí.

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

9
 … Consideraciones de diseño ...
Consistencia
Un sistema consistente es aquél en el cual el modelo conceptual, la
funcionalidad, el secuenciamiento y los hardware-bindings son uniformes
y siguen reglas simples sin apelar a las excepciones y a las condiciones
especiales.
Ejemplos de consistencia en la parte de salida de la interface de usuario:
-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.
Ejemplos de consistencia en la parte de entrada de la interface de
usuario:
- Determinados caracteres del teclado tienen siempre la misma función.
- Se proveen comandos genérico (Move, Copy, …) y pueden ser
aplicados, con resultados predecibles sobre cualquier tipo de objeto en
el sistema.
Computación Gráfica Silvia Castro
… Consideraciones de diseño ...
Realimentación
Es esencial en la comunicación con la computadora.
La realimentación puede darse en tres niveles:
- Funcional. Es necesario cuando se tarda más de unos segundos
en la terminación de una operación. El usuario necesita alguna
indicación de que la computadora está haciendo algo.
- De secuenciamiento. Ocurre cuando cada unidad del lenguaje de
entrada es aceptada por el sistema. Un objeto seleccionado o un
menú es resaltado y así el usuario puede saber que las acciones
han sido aceptadas.
- De hardware binding. Cada acción del usuario con un dispositivo
de entrada debe causar una realimentación rápida y obvia; debe
hacerse eco, por ejemplo, de los caracteres tipeados.
Computación Gráfica Silvia Castro
… Consideraciones de diseño ...
Minimización de las posibilidades de error
No se debe permitir que el usuario cometa errores:
- No se le debe dejar borrar un objeto, si no hay nada para borrar
- No se le debe dejar usar paste cuando el portapapeles esté
vacío.
- No se le debe dejar copiar cuando no hay nada seleccionado
para copiar
-…
En todas estas instancias el sistema debería deshabilitar los ítems
no disponibles y alertar al usuario acerca de lo que ocurre.
Esto es sensitividad al contexto: el sistema provee al usuario sólo
de aquellos comandos que son válidos en el modo o en el
contexto actual.
También deben evitarse los efectos laterales. Ej, paste del Excel.
Computación Gráfica Silvia Castro
… Consideraciones de diseño ...
Recuperación de los errores
No se puede imaginar una aplicación sin Deshacer.
El efecto en productividad es devastador si el usuario sabe que
sus errores no pueden ser corregidos. Con una buena recuperación
de los errores el usuario está libre para explorar las facilidades
desconocidas del sistema sin temor a que falle.
Esta libertad favorece el aprendizaje exploratorio
El usuario debe entender el ámbito del Deshacer. A menudo se
confunden acerca de si se aplica sólo a los comandos de la
aplicación o también se aplica a los de la ventana, tales como el
scrolling.
No sólo se debe contar con el Deshacer, sino también con
Cancelar.
Computación Gráfica Silvia Castro
10
 … Consideraciones de diseño ...
Acomodamiento a múltiples niveles de habilidades
Muchos sitemas interactivos deben diseñarse para un amplio
espectro de usuarios, abarcando desde los totalmente inexpertos
hasta los que han trabajado con el sistema miles de horas.
El sistema debe ser usable en todos los niveles de habilidades;
para ello deben proveerse aceleradores, prompts, ayuda,
extensibilidad, …
Los nuevos usuarios se sienten a menudo más cómodos con
menúes y estilos de diálogo que proveen un prompt considerable.
Los más experimentados, le dan mayor importancia a la velocidad
de uso, que requiere de teclas de función y comandos desde el
teclado.
Diseño Visual ...
El diseño visual de una interface de usuario afecta tanto la
impresión inicial del usuario de la interface como la utilidad a
larzo plazo del sistema.
El diseño visual abarca todos los elementos de diseño gráfico de
una interface, incluyendo la diagramación completa de la pantalla,
el diseño y la forma de los menúes, el uso del color, la
codificación de la información y la ubicación de las unidades de
información entre sí.
Un buen diseño visual se empeña en logar claridad, consistencia y
una apariencia atractiva.

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

… Consideraciones de diseño … Diseño Visual ...

Minimización de la memorización Claridad Visual: Leyes de la Gestalt

Una manera importante de lograr la claridad

Algunas veces los diseños de interface fuerzan una memorización visual es usar la organización visual de la
información para reforzar y enfatizar la
innecesaria.
organización lógica subyacente.

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

(c) Principio de clausura Si un conjunto de estímulos casi encierra un

área, la persona ve un área.
(d) Principio de continuidad El estímulo hace que la imagen aparezca
como dos líneas diferentes
(e) Principio de simetría Regiones acotadas por bordes simétricos tienden
a percibirse como figuras coherentes

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

11
 … Diseño Visual ...
Codificación Visual
En diseño de interfaces, codificar significa crear distinciones
visuales entre los diferentes tipos de objetos.
Hay muchas técnicas de codificación diferentes: color, forma,
tamaño, orientación, intensidad, textura, estilos de líneas, etc.
Un elemento fundamental en cualquier técnica de codificación es
determinar las distintas categorías en que una técnica particular
puede codificar; cuanto más valores de código se introducen
aumenta la posibilidad de que el usuario se confunda los valores.
Computación Gráfica Silvia Castro Computación Gráfica
… Diseño Visual ...
Codificación Visual
Es importante que el usuario pueda distinguir entre los distintos
tipos de información. También es importante usar codificación
redundante.
Antes de seleccionar un código, es necesario saber cuántos niveles
de código son necesarios. También es importante saber si la
información es:
-Nominal: Simplemente se nombran distintos tipos de cosas, como
diferentes tipos de dispositivos. No hay noción de orden.
- Ordinal: Existe una noción de orden entre los elementos, pero no
hay noción de métrica.
- Numérica: Existe una métrica. Ej., temperatura, cantidad, altura
Computación Gráfica Silvia Castro Computación Gráfica
… Diseño Visual ...
Codificación Visual
Así, para información nominativa, se demuestra que el color se
distingue considerablemente más que la forma o el tamaño.
Cuidado con las personas con problemas de percepción de color. La
codificación de información nominativa no debe sugerir ningún
ordenamiento.
Los que codifican información ordinal, deben sugerir un
ordenamiento. Ej, distintas densidades de líneas.
Debe tenerse cuidado en no sugerir agrupamiento con color, si no
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.
Silvia Castro
… Diseño Visual ...
Codificación Visual
Hay mapeos más directos cuando existe una correspondencia
entre los objetos a representar y la forma de representación
usada
- Diferentes anchos de línea para representar distintos
trazos
- Diferentes formas que identifican distintos tipos de
lápices
- Los basureros para representar donde poner los
archivos que no se desea conservar y un CD-Rom para
representar el acceso al mismo
Silvia Castro
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).

La aplicación de reglas de organización visual y de combinación

consistentes de los distintos elementos visuales en íconos y objetos
gráficos constituye otro de los elementos esenciales del diseño
visual. La consistencia de ubicación, por ejemplo, mantiene la
misma información en la misma posición relativa de una imagen a
la otra, de modo tal que el usuario pueda organizar rápidamente la
información.

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

… Diseño Visual ... … Diseño Visual ...

Principios de Diagramación: Balance Principios de Diagramación: Proporción

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.

Los ratios del cuadrado 1:1, de la raíz cuadrada, 1:1.4142; del

rectángulo dorado, 1:1.618 y del cuadrado doble, 1:2.

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

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

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

Conclusiones ... … Conclusiones …

Diseñar sistemas que la gente quiera usar
• Los sistemas deben responder rápido y de manera predecible, brindando Factores importantes en un buen diseño
realimentación
• Abordamientos
– en los niveles funcional, de secuenciamiento y de hardware-binding (semantic,
syntactic, and lexical) proveer • Consistencia
• realimentación del dominio del problema
• Restricciones
• realimentación del dominio de control
• settings actuales
• Mapeos
• Diseñar para regularidad, consistencia y simplicidad, sujeto a la “ley de la • Modelos Mentales
mínima sorpresa”
• Visibilidad
– Evitar casos especiales, reglas complejas y efectos
• Prevenir errores y proveer recuperación de los mismos
– undo/redo
• Minimizarn el uso de la memoria de corto plazo, memorización (regla de George
Miller’s “7 + 2”)
• Minimizar los modos y hacer explícita la transición y el estado entre los mismos

Computación Gráfica Silvia Castro Computación Gráfica Silvia Castro

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

Computación Gráfica Silvia Castro

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

Computación Gráfica Silvia Castro

15