unidad0

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

1

Unidad 0 Diseño de la Interfaz de usuario 1. Prólogo General Los Avances de la Ciencia y la Tecnología han puesto al hombre en un plano intermedio entre lo tangible e intangible computacionalmente hablando, es ahora tan común el convivir con un computador diariamente que cada vez se hace más imperativo la mejor interacción hombremáquina a través de una adecuada interfaz (Interfaz de Usuario), que le brinde tanto comodidad ,como eficiencia.

El presente trabajo es una introducción al mundo de las Interfaz de Usuarios, en el están los conceptos y nociones básicas que permitirán en adelante adentrarnos más en este 2. Conceptos de interfaz Lewis y Rieman [1993] definen las interfaces hombre computadora como: Las interfaces básicas de usuario son aquellas que incluyen cosas como menús, ventanas, teclado, ratón, los "beeps" y algunos otros sonidos que la computadora hace, en general, todos aquellos canales por los cuales se permite la comunicación entre el hombre y la computadora.

La idea fundamental en el concepto de interfaz es el de mediación, entre hombre y máquina. La interfaz es lo que "media", lo que facilita la comunicación, la interacción, entre dos sistemas de diferente naturaleza, típicamente el ser humano y una máquina como el computador. Esto implica, además, que se trata de un sistema de traducción, ya que los dos "hablan" lenguajes diferentes: verbo-icónico en el caso del hombre y binario en el caso del procesador electrónico.

De una manera más técnica se define a Interfaz de usuario, como conjunto de componentes empleados por los usuarios para comunicarse con las computadoras. El usuario dirige el funcionamiento de la máquina mediante instrucciones, denominadas genéricamente entradas.

Las entradas se introducen mediante diversos dispositivos, por ejemplo un teclado, y se convierten en señales electrónicas que pueden ser procesadas por la computadora. Estas señales se transmiten a través de circuitos conocidos como bus, y son coordinadas y controladas por la unidad de proceso central y por un soporte lógico conocido como sistema operativo. Una vez que la UPC ha ejecutado las instrucciones indicadas por el usuario, puede comunicar los resultados mediante señales electrónicas, o salidas, que se transmiten por el bus a uno o más dispositivos de salida, por ejemplo una impresora o un monitor.

Resumiendo entonces podemos decir que, una interfaz de software es la parte de una aplicación que el usuario ve y con la cual interactúa. Está relacionada con la subyacente estructura, la arquitectura, y el código que hace el trabajo del software, pero no se confunde con ellos. La interfaz incluye las pantallas, ventanas, controles, menús, metáforas, la ayuda en línea, la documentación y el entrenamiento. Cualquier cosa que el usuario ve y con lo cual interactúa es parte de la interfaz. Una interfaz inteligente es fácil de aprender y usar. Permite a los usuarios hacer su trabajo o desempeñar una tarea en la manera que hace más sentido para ellos, en vez de tener que ajustarse al software. Una interfaz inteligente se diseña específicamente para la gente que la usará.

3. Clasificación Dentro de las Interfaces de Usuario se distinguir básicamente dos tipos : •

Una interfaz de hardware, a nivel de los dispositivos utilizados para ingresar, procesar y entregar los datos: teclado, ratón y pantalla visualizadora; y

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION •

2

Una interfaz de software, destinada a entregar información acerca de los procesos y herramientas de control, a través de lo que el usuario observa habitualmente en la pantalla.

De esta clasificación general se puede ir desprendiendo algunas, así por ejemplo según su evolución tenemos: La evolución de las interfaces de usuario corre en paralelo con la de los sistemas operativos; de hecho, la interfaz constituye actualmente uno de los principales elementos de un sistema operativo. A continuación se muestran las distintas interfaces que históricamente han ido apareciendo, ejemplificándolas con las sucesivas versiones de los sistemas operativos más populares.

Interfaces de línea de mandatos (command-line user interfaces, CUIs).

Es el característico del DOS, el sistema operativo de los primeros PC, y es el estilo más antiguo de interacción hombre-máquina. El usuario escribe órdenes utilizando un lenguaje formal con un vocabulario y una sintaxis propia (los mandatos en el caso del DOS). Se usa un teclado, típicamente, y las órdenes están encaminadas a realizar una acción.

El usuario no suele recibir mucha información por parte del sistema (ejemplo: indicador del DOS), y debe conocer cómo funciona el ordenador y dónde están los programas (nada está oculto al usuario). El modelo de la interfaz es el del programador, no el del usuario. Ejemplo del DIR-DEL-DIR, por la falta de información de respuesta del DOS. Otras veces, en cambio, es excesiva: etiqueta del volumen en el DIR. Inconveniente: carga de memoria del usuario (debe memorizar los mandatos; incluso la ayuda es difícil de leer); nombres no siempre adecuados a las funciones, significado de los mandatos mal comprendido a veces (varios mandatos con el mismo o parecido significado, como DEL y ERASE); inflexible en los nombres (DEL y no DELETE).

Ventajas: potente, flexible y controlado por el usuario, aunque esto es una ventaja para usuarios experimentados. La sintaxis es estricta, y los errores pueden ser graves Así: C:\TMP\>dir El volumen en unidad C es PCDOS_6 Número de Serie del Volumen es 1D8F82B0 Directorio de C:\TMP . <DIR> 02-02-98 21:08 .. <DIR> 02-02-98 21:08 ABCD <DIR> 02-02-98 21:23 CARTA DOC 1.107 22-10-96 9:51 4 archivo(s) 1.107 bytes

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

3

24.862.720 bytes libres C:\TMP\> Problema del mandato COPY En suma, un CUI es adecuado para usuarios expertos, no para noveles. Para aquellos resultan más rápidos, por lo que se puede diseñar un CUI como parte de una interfaz, para que se pueda utilizar una vez que se tenga experiencia.

Interfaces de menús.

Un menú es una lista de opciones que se muestran en la pantalla o en una ventana de la pantalla para que los usuarios elijan la opción que deseen (véase ejemplo). Los menús permiten dos cosas: navegar dentro de un sistema, presentando rutas que llevan de un sitio a otro, y seleccionar elementos de una lista, que representan propiedades o acciones que los usuarios desean realizar sobre algún objeto.

Las interfaces de menús aparecen cuando el ordenador se vuelve una herramienta de usuario y no sólo de programadores. Las actuales interfaces gráficas u orientadas a objetos siguen utilizando este tipo de interfaces (los distintos estilos de interfaces no son mutuamente exclusivos).

Existen distintos tipos de menús. Los primeros fueron los menús de pantalla completa, estructurados jerárquicamente Menú de pantalla completa (Norton Utilities) Los menús de barra, situados en la parte superior de la pantalla, son profusamente utilizados en las aplicaciones actuales. Contienen una lista de acciones genéricas que dan paso a menús desplegables donde se concretan.

Menú de barra y menú desplegable Estos menús pueden llevar a su vez a otros: son los menús en cascada. Pueden cambiar dinámicamente, y deshabilitar opciones que no estén disponibles en un momento dado (marcándolas habitualmente en gris).

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

4

Menús en cascada de la barra de inicio de Windows 95 Las paletas o barras de herramientas son menús gráficos con acciones, herramientas y opciones que se pueden colocar en la pantalla. Se utilizan mucho en programas gráficos.

Paletas de herramientas en Microsoft Powerpoint Los menús contextuales o menús pop-up son los más recientes. Se llaman así porque el contenido del menú depende del contexto de trabajo del usuario. Contienen únicamente las opciones que son aplicables al objeto seleccionado, más algunas de uso frecuente que también son accesibles desde el menú de barra.

Menú contextual de un icono en el escritorio de Windows 95 Las interfaces de menús, bien estructuradas, son buenas para usuarios noveles o esporádicos.

Son fáciles de aprender y de recordar. Pueden existir menús simples y avanzados, para adaptarse al tipo de usuario.

Precauciones: no ocupar demasiado espacio de la pantalla, recordar la información acumulada de menús precedentes, no colocar demasiados elementos en el menú, agruparlos de manera lógica (no en orden alfabético, por ejemplo; esto ayuda a recordarlos), permitir la personalización por parte del usuario, usar una terminología adecuada y consistente dentro del programa y con otros programas (Exit, Quit, Escape, Close, Return, Back). Las interfaces de menús serán utilizadas normalmente en conjunción con los otros estilos de interfaces.

Interfaces gráficas (graphical user interfaces, GUIs).

Desarrolladas originalmente por XEROX (sistema Xerox Star, 1981, sin éxito comercial), aunque popularizadas por Apple (Steven Jobs se inspiró en los trabajos de Xerox y creó el Apple Lisa, 1983, sin éxito, y Apple Macintosh, 1984, con éxito debido en gran medida a su campaña publicitaria) Los tres estilos más comunes de interfaces gráficas hombre-computadora son: Lo que tú ves es lo que puedes conseguir (WYSIWYG What you see is what you get), Manipulación directa e Interfaces de usuario basados en iconos.

Un GUI es una representación gráfica en la pantalla del ordenador de los programas, datos y objetos, así como de la interacción con ellos. Un GUI proporciona al usuario las herramientas para realizar sus operaciones, más que una lista de las posibles operaciones que el ordenador es capaz de hacer.

4. Características de un GUI

1. Posee un monitor gráfico de alta resolución.

2. Posee un dispositivo apuntador (típicamente un ratón).

3. Promueve la consistencia de la interfaz entre programas.

4. Los usuarios pueden ver en la pantalla los gráficos y textos tal como se verán impresos.

5. Sigue el paradigma de la interacción objeto-acción.

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

5

6. Permite la transferencia de información entre programas.

7. Se puede manipular en la pantalla directamente los objetos y la información.

8. Provee elementos de interfaz estándar como menús y diálogos.

9. Existe una muestra visual de la información y los objetos (iconos y ventanas).

10. Proporciona respuesta visual a las acciones del usuario.

11. Existe información visual de las acciones y modos del usuario/sistema (menús, paletas).

12. Existen controles gráficos (widgets) para la selección e introducción de la información.

13. Permite a los usuarios personalizar la interfaz y las interacciones.

14. Proporciona flexibilidad en el uso de dispositivos de entrada (teclado/ratón).

Una característica importante es que el GUI permite manipular los objetos e información de la pantalla, no sólo presentarla.

Para usar un GUI, los usuarios deben conocer (o aprender) una serie de conceptos: organización del sistema (ficheros, directorios en Win95), diferentes tipos de iconos y efecto de las acciones sobre ellos, elementos básicos de una ventana, uso de los controles del GUI, uso del ratón.

Los GUI usan el estilo objeto-acción, en contraposición al acción-objeto de los CUI o las interfaces de menú. El usuario selecciona un objeto, y después la acción a realizar sobre dicho objeto. Los objetos son el principal foco de atención del usuario, lo cual resulta más natural y próximo a su modelo mental.

Metáfora de la cámara Interfaces orientadas a objetos (object oriented user interfaces, OOUIs).

Su aspecto es similar al de las GUIs. La diferencia estriba en el modelo subyacente: las GUIs son interfaces orientadas a la aplicación, mientras que las OOUIs están orientadas al objeto. La tabla siguiente muestra las principales diferencias entre ambos estilos de interfaz:

Interfaces orientadas a la aplicación

Interfaces orientadas a objetos

La aplicación consiste en un icono, una El producto consiste en una colección de objetos ventana principal y varias secundarias que cooperan y vistas de dichos objetos Los iconos representan aplicaciones o Los iconos representan objetos que se pueden ventanas abiertas manipular directamente Los usuarios deben abrir una aplicación Los usuarios abren objetos como vistas en el antes de trabajar con objetos escritorio

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

6

Proporciona al usuario las funciones Proporciona al usuario los materiales necesarios necesarias para realizar las tareas para realizar las tareas Se centra en la tarea determinada por la aplicación

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

Las tareas relacionadas son soportadas Las tareas relacionadas son soportadas por el uso por otras aplicaciones de otros objetos Estructura rígida: función

Estructura flexible: objeto

Los usuarios pueden quedar atrapados Los usuarios no deben quedar atrapados en una en una tarea tarea Los usuarios deben seguir la estructura Los usuarios pueden realizar tareas a su propio de la aplicación gusto Se requieren muchas aplicaciones: una Se requieren pocos objetos, que se reutilizan en por tarea muchas tareas El objetivo de la OOUI es que el usuario se concentre en sus tareas en lugar de en el ordenador y cómo utilizar las aplicaciones y ficheros necesarios para cumplir sus objetivos. Por ello se esconde la organización del sistema al usuario (Ejemplo de los accesos directos en Windows95-OS/2).

El estilo de interacción de los OOUIs es el de objeto-acción (también se da en los GUIs, aunque mezclado con el estilo acción-objeto). La ventana es un objeto ventana, no una ventana de aplicación; desaparecen pues los menús de barra y ganan terreno los contextuales.

Los objetos se pueden clasificar en tres categorías: datos, contenedores y dispositivos. Sobre ellos se definen distintas vistas (por ejemplo, la ayuda constituye una vista del objeto). Definir los objetos y las vistas es lo más complicado del diseño de la interfaz. El objeto debe ser familiar al usuario (encajar con su modelo mental, apoyado en su vida diaria), y estar relacionado con el mundo real: uso de las metáforas.

Distintas vistas del objeto reloj Un ejemplo de lo que se pretende con una interfaz OOUI es el considerar un documento como un objeto sobre el cual realizar tareas tales como incorporar gráficos y textos, sin necesidad de usar programas distintos para cada una de ellas. Estos programas suelen tener funciones que se solapan, con el consiguiente gasto extra en espacio y dinero.

Actualmente existe una mezcla de productos orientados a la aplicación y al objeto, aunque se está produciendo una migración a estos últimos. Las aplicaciones están dejando paso a conjuntos de objetos.

5. Características humanas del diseño de interfaz Factores Humanos

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

7

Al diseñar interfaces de usuario deben tenerse en cuenta las habilidades cognitivas y de percepción de las personas, y adaptar el programa a ellas.

Así, una de las cosas más importantes que una interfaz puede hacer es reducir la dependencia de las personas de su propia memoria, no forzándoles a recordar cosas innecesariamente (por ejemplo, información que apareció en una pantalla anterior) o a repetir operaciones ya realizadas (por ejemplo, introducir un mismo dato repetidas veces).

La persona tiene unas habilidades distintas de la máquina, y ésta debe utilizar las suyas para soslayar las de aquella (como por ejemplo la escasa capacidad de la memoria de corto alcance).

• Velocidad de Aprendizaje.- Se pretende que la persona aprenda a usar el sistema lo más pronto posible.

• Velocidad de Respuesta.- El tiempo necesario para realizar una operación en el sistema.

• Tasa de errores.- Porcentaje de errores que comete el usuario.

• Retención.- Cuánto recuerda el usuario sobre el uso del sistema en un período. de tiempo.

• Satisfacción.- Se refiere a que el usuario esté a gusto con el sistema.

Además de éstos existen otros a considerar: Adecuación • Características Físicas.- Cada persona tiene diferentes características físicas. Hay algunas personas que no les gustan los teclados mientras que a otras sí. Es por eso que hay teclados ergonómicos. Lo mismo sucede con el mouse.

• Ambiente.- El lugar donde va a ser usado el sistema. Cada interfaz tiene que adecuarse al lugar.

• Visibilidad.- Tomar en cuenta la cantidad de iluminación del lugar. ¿ Se refleja el brillo en la pantalla?

• Personalidad.- De acuerdo a la edad, nivel socio-económico, etc.

• Cultura.- Los japoneses no tienen las mismas pantallas, ventanas, etc. Este factor es importante si el mercado para el sistema es a nivel internacional.

Según la función tenemos: Motivación • Sistemas Vitales.- Son de vida o muerte; muchas personas dependen de ellos.

Ejemplo: un sistema para reactores nucleares. Este sistema trabaja en tiempo real, y es de suma importancia la seguridad y efectividad del mismo.

• Sistemas Comerciales e Industriales.- Sirven para aumentar la productividad y vender más.

• Sistemas de Oficina, Hogar y Juegos.- Factor importante: el mercado a quien está dirigido; tienen que ser muy amigables y satisfacer al cliente.

• Sistemas de Investigación.- Realizan tareas muy específicas y tratan de imitar el medio en el que se desenvuelve el usuario.

6. Pasos para el diseño de interfaz Pasos Clásicos En el proceso de diseño de una interfaz de usuario se pueden distinguir cuatro fases o pasos fundamentales:

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION 1.

2.

3.

4.

8

Reunir y analizar la información del usuario Diseñar la interfaz de usuario Construir la interfaz de usuario Validar la interfaz de usuario

Reunir y analizar la información del usuario: Es decir concretar a través de técnicas de Análisis de requerimientos, qué tipo de usuarios van a utilizar el programa, qué tareas van a realizar los usuarios y cómo las van a realizar, qué exigen los usuarios del programa, en qué entorno se desenvuelven los usuarios (físico, social, cultural).

Diseñar la interfaz de usuario.

Es importante dedicar tiempo y recursos a esta fase, antes de entrar en la codificación. En esta fase se definen los objetivos de usabilidad del programa, las tareas del usuario, los objetos y acciones de la interfaz, los iconos, vistas y representaciones visuales de los objetos, los menús de los objetos y ventanas. Todos los elementos visuales se pueden hacer primero a mano y luego refinar con las herramientas adecuadas.

Construir la interfaz de usuario.

Es interesante realizar un prototipo previo, una primera versión del programa que se realice rápidamente y permita visualizar el producto para poderlo probar antes de codificarlo definitivamente Validar la interfaz de usuario.

Se deben realizar pruebas de usabilidad del producto, a ser posible con los propios usuarios finales del mismo.

Es importante, en suma, realizar un diseño que parta del usuario, y no del sistema.

Existen 11 pasos en el proceso de diseño "centrado en las tareas", similar al anterior pero que desglosa algunas actividades implícitas en otras, así: 1.- Entender quien usará el sistema para hacer qué.

2.- Elegir tareas representativas para el diseño.

3.- Plagiar o copiar.

4.- Bosquejar un diseño.

5.- Pensar acerca del diseño.

6.- Crear un prototipo.

7.- Evaluarla con los usuarios.

8.- Repetir.

9.- Construirla.

10.- Rastrearla.

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

9

11.- Cambiarla.

Técnicas y pasos avanzadas para el diseño de interfaces de usuario Presentación de información: No se deben colocar demasiados objetos en la pantalla, y los que existen deben estar bien distribuidos. Cada elemento visual influye en el usuario no sólo por sí mismo, sino también por su combinación con el resto de elementos presentes en la pantalla.

El número de elementos visuales que perciben son: en el caso a) 1 (el fondo); en b) 3 (la línea, lo que está encima y lo que está debajo); en c) son 5 (el espacio fuera del recuadro, el recuadro, la línea y el espacio encima y debajo de ésta); finalmente, en d) el número se eleva a 35, siguiendo el mismo criterio. Conclusión: cada elemento nuevo que se añade influye más de lo que se piensa en el usuario.

Elementos de diseño de pantalla y su percepción visual Análisis de Color: es probablemente el elemento de la interfaz que con más frecuencia es mal utilizado. El color comunica información, no es sólo decorativo (ejemplo: reforzar mensajes de error). Deben utilizarse combinaciones adecuadas (por ejemplo, las paletas proporcionadas por los sistemas operativos). El color debe atraer la atención, pero no cansar después de un rato de trabajo. Es especialmente importante seguir las líneas de diseño existentes. Principio básico: diseñar primero en blanco y negro, y luego añadir el color.

Análisis Audio. Primero es preciso ver cuándo es más apropiado que la información visual.

Segundo, determinar el sonido adecuado. Tercero, permitir la personalización (volumen y desactivación). Como en el caso de los colores existen guías de uso. En lugares de trabajo abiertos, puede ser poco efectivo; además, puede ser embarazoso para algunas personas. El sonido debe usarse para informar, no cuando no añade nada nuevo (por ejemplo, un mensaje de aviso de correo o de bienvenida, respectivamente, al iniciar una sesión de trabajo).

Análisis Animación. Se define como un cambio en el tiempo de la apariencia visual de un elemento gráfico. Ejemplos de su uso: progreso de acciones (copia de ficheros en Windows 95, instalación de programas), estado de procesos (iconos de impresora), acciones posibles (cambios en el cursor al desplazar el ratón). La animación puede ayudar a subrayar iconos importantes, mostrar el estado de un objeto particular o explicar su comportamiento.

Diseño internacional. Debe hacerse un uso adecuado de la terminología. Hay mucho trabajo en este campo. Debe tenerse cuidado con las diferencias culturales (gestos, terminología, dibujos, formatos de teléfonos o calendarios, etc.).

Análisis y Elección de controles. Muchas veces existe la duda de qué controles utilizar.

En realidad no existe una única forma correcta. Un aspecto a considerar es la escalabilidad (menú de 10/1000 elementos; ejemplo: programas del menú inicio de Windows 95).

Ejemplo de alternativas: usar un menú de barra o de paleta, permitir arrastrar objetos o no (problema: no existe indicación visual de que se pueda arrastrar el objeto: ¿qué objetos se pueden arrastrar? ¿a dónde se pueden arrastrar? ¿qué ocurrirá cuando lleguen allí? ¿se podrá deshacer la acción?).

Diferentes controles para los mismos datos Guías de Expertos

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

10

Existen diversas guías de diseño sacadas de expertos y comités, que complementan a las reglas de oro estudiadas anteriormente. Por citar algunas de ellas: • • • • • • •

Demasiada simetría puede hacer las pantallas difíciles de leer.

Si se ponen objetos sin alinear, hacerlo drásticamente.

Asimetría=activo, simetría=sereno.

Elementos de tamaño y color similares se perciben como pertenecientes a un grupo.

Asumir errores en la entrada del usuario.

Diseñar para el usuario, no para demostrar los propios conocimientos tecnológicos.

Unos gráficos espectaculares no salvarán a una mala interfaz.

7. Conclusiones Y Recomendaciones • El conocimiento de estos puntos clave, nos permitirán enfocarnos mejor al estudio de la materia.

• Las Interfaces de usuario, como vínculo de inmersión del hombre en el entorno de trabajo tecnológico actual, realzan su importancia en el desarrollo de nuevos productos, más eficaces, eficientes e interactivos, que es lo que el mercado demanda.

• Puntos, cómo los históricos y evolutivos, deben ser abordados de manera más investigativa, recordemos que "conocer el pasado nos proyecta al futuro".

• Otras puntualizaciones de clasificación obligarán a que investiguemos y propongamos, nuevas distribuciones clasificatorias, útiles a futuro en una carrera de desarrollo de software.

3. Diseño de GUIs

3.- La importancia del diseño de interfaces gráficas de usuario 3.1.- Comunicación Visual Efectiva para Interfaces Gráficas de Usuario El uso de tipografía, símbolos, color y otros gráficos estáticos y dinámicos son comúnmente usados para expresar hechos, conceptos y emociones. Esto compone un diseño gráfico sistemático orientado a la información que ayuda a la gente a comprender información compleja. La comunicación visual efectiva para este sistema se basa en algunos principios básicos de diseño gráfico.

3.2.- Consideraciones de Diseño Existen tres factores que pueden considerarse para el diseño de una interfaz de usuario correcta: factores de desarrollo, factores de viabilidad y factores de aceptación.

Los factores de desarrollo ayudan a mejorar la comunicación visual. Esto incluye toolkits y librerías de componentes, soportes para un rápido prototipado, y adaptabilidad.

Los factores de viabilidad tienen en cuenta factores humanos y expresan una fuerte identidad visual. Esto incluye: habilidades humanas, la identidad del producto, un claro modelo conceptual, y múltiples representaciones.

Como factores de aceptación están la política de la corporación, los mercados internacionales, y la documentación y entrenamiento.

3.3.- El Lenguaje Visible El Lenguaje Visible se refiere a todas las técnicas gráficas usadas para comunicar el mensaje o contexto.

Esto incluye: - Disposición o Layout: formatos, proporciones, y mallas (grids); organización: ya sea 2D y 3D.

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

11

- Tipografía: selección de tipos de letra y estilos, incluyendo la anchura fija y variable.

- Color y Textura: color, textura y luminancia aportan información compleja y realidad pictorial.

- Imágenes: signos, iconos y símbolos, desde lo fotográficamente real a lo abstracto.

- Animación: un display dinámico o cinético: muy importante en la utilización de imágenes relacionadas con el vídeo.

- Secuenciamiento: el aproximamiento total del secuenciamiento visual al secuenciamiento lógico.

- Sonido: abstracto, vocal, concreto, o musical.

- Identidad Visual: las reglas adicionales y únicas que proporcionan consistencia de conjunto a una interfaz de usuario.

3.4.- Principios del Diseño de interfaces de usuario Existen tres principios fundamentales relacionados en el uso del lenguaje visible: - Organizar: proveer al usuario de una estructura conceptual clara y consistente.

- Economizar: hacer lo máximo con la menor cantidad de elementos.

- Comunicar: ajustar la presentación a las capacidades del usuario.

3.4.1.- Organizar Consistencia, disposición de la pantalla, relaciones y navegabilidad son importantes conceptos de organización.

Organización caótica

Organización ordenada

3.4.1.1.- Consistencia Existen 4 visiones de la consistencia: consistencia interna, consistencia externa, consistencia del mundo real y cuando no hay consistencia.

La primera visión, la consistencia interna, afirma que las mismas convenciones y reglas deben ser aplicadas a todos los elementos de la interfaz gráfica de usuario.

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

12

Los mismos tipos de elementos se muestran en los mismos lugares.

Aquellos con diferentes tipos de comportamiento tienen su propia apariencia especial.

La consistencia externa afirma que las plataformas existentes y convenciones culturales deben ser utilizadas y aplicadas en las interfaces gráficas de usuario.

Consistencia externa para iconos de herramientas de texto Estos iconos son de diferentes aplicaciones, pero generalmente tienen el mismo significado.

Consistencia del mundo real La consistencia del mundo real afirma que las convenciones y reglas deben ser consistentes y consecuentes con las experiencias del mundo real, y las observaciones y percepciones del usuario.

El ultimo punto, la innovación, trata con la carencia de consistencia. Desviarse de las convenciones existentes sólo debe hacerse cuando proporciona un CLARO beneficio al usuario.

3.4.1.2.- Disposición de la pantalla (Layout) Hay tres formas para diseñar una disposición espacial de la pantalla: usar una estructura de malla (grid), estandarizar la disposición de la pantalla, y usar los elementos relacionados con grupos.

Una estructura de malla puede ayudar a colocar menús, paneles de diálogo o de control. Generalmente el máximo número de divisiones horizontales o verticales se ajusta a la expresión 7 +/- 2. Esto ayudará a hacer la pantalla más inteligible y menos saturada.

3.4.1.3.- Relaciones

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

13

Conectar los items relacionados y disociar los items independientes mejora sensiblemente la organización visual.

Relaciones: Izquierda: La localización, forma y valor pueden todas ellas crear relaciones que es posible sean inapropiadas.

Derecha: relaciones claras, consistentes, apropiadas y fuertes.

3.4.1.4.- Navegabilidad Existen tres técnicas importantes de navegabilidad: - proveer un foco inicial para la atención del usuario.

- dirigir la atención a los items importantes, secundarios o periféricos.

- asistir la navegación a través del material.

Navegabilidad: Izquierda: diseño pobre.

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

14

Derecha: diseño mejorado: la disposición espacial y el color ayudan a centrar la atención del usuario a las áreas más importantes.

3.4.2.- Economizar Hay que considerar 4 grandes factores: simplicidad, claridad, singularidad y énfasis.

3.4.2.1.- Simplicidad La simplicidad incluye únicamente los elementos que son más importantes para la comunicación. Debería producir también la menor obstrucción posible.

Diseño complicado y diseño más simple.

3.4.2.2.- Claridad

Iconos ambiguos y claros.

Todos los componentes deberían ser diseñados para que su significado no sea ambiguo, que no lleve al equivoco.

3.4.2.3.- Singularidad Las propiedades de los elementos necesarios deben ser características singulares.

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

15

3.4.2.4.- Enfasis Los elementos más importantes deben ser fácilmente percibidos.

Se debe restar énfasis a los elementos no críticos y minimizarlos para no ocultar información critica.

3.4.3.- Comunicar La interfaz gráfica de usuario debe mantener un balance entre legibilidad, tipografía, simbolismo, múltiples vistas, y color o textura, para comunicar adecuadamente.

3.4.3.1.- Legibilidad

Texto ilegible y legible.

La pantalla debe ser fácil de identificar e interpretar, además de atractiva y agradable.

3.4.3.2.- Tipografía Incluye características de elementos individuales (tipos de letra y estilos) y sus agrupamientos (técnicas de estilo).

Se deberá usar un numero reducido de tipos de letra que serán legibles, claros y singulares (por ejemplo, para distinguir diferentes clases de información).

Recomendaciones: - un máximo de 3 tipos de letra en un máximo de 3 tamaños de puntos.

- un máximo de 40-60 caracteres por línea de texto.

- ajustar el texto a la izquierda y los números a la derecha. En listas, usar el centrado de texto.

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

16

Tipos de letra y estilos recomendados - usar mayúsculas y minúsculas siempre que sea posible.

3.4.3.3.- Múltiples vistas Proveer de múltiples perspectivas en la pantalla de estructuras y procesos complejos. Hacer uso de estas múltiples vistas: - múltiples formas de representación.

- múltiples niveles de abstracción.

- vistas alternativas simultaneas.

- conexiones y referencias cruzadas.

- metadatos, metatexto y metagráficos.

Múltiples vistas verbales y visuales.

3.4.3.4.- Color El color es uno de los más complejos elementos a la hora de intentar diseñar una interfaz gráfica correcta.

Puede ser una potente herramienta de comunicación usado correctamente. Los colores pueden ser combinados para tomar un sentido visual.

Ventajas en el uso del color para facilitar la comunicación: - enfatizar la información importante.

- identificar subsistemas de estructuras.

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

17

- portar objetos naturales de un modo realista.

- portar tiempo y progreso.

- reducir los errores de interpretación.

- añadir dimensiones a la codificación.

- incrementar la comprensibilidad.

- incrementar la credibilidad y atractivo.

Cuando el color es usado correctamente la gente suele aprender más.

La memoria para la información en color parece ser mucho más capaz que para la información presentada en blanco y negro.

También existen desventajas en el uso del color: - requiere un equipamiento más complicado y costoso.

- la mayoría no se acomoda a la visión de los daltónicos.

- algunos colores pueden potencialmente causar molestias visuales y postimágenes.

- puede contribuir a asociaciones erróneas a causa de diferencias multidisciplinarias o multiculturales.

3.5.- Términos y conceptos relacionados con el color Las discusiones sobre el color suelen ser confusas porque científicos, artistas, diseñadores, programadores y profesionales del marketing describen el color de diferentes formas.

Algunas de estas formas difieren del rojo, verde y azul que basan el sistema de color "RGB", familiar para los usuarios de periféricos con tubos de rayos catódicos (CRTs).

Los siguientes términos aclaran conceptos sobre esta manera de entender el color: Matiz (Hue) es la composición espectral de longitud de onda que produce percepciones de ser azul, naranja, verde, etc. por ejemplo.

Valor (Value) es la cantidad relativa de claridad u oscuridad del color en un rango desde el negro al blanco (también llamado intensidad).

Saturación (Chroma) es la pureza del color en una escala desde el gris a la variante mas viva del color percibido.

Brillo (Brightness) es la cantidad de energía luminosa al crear el color.

3.6.- Principios de diseño del color Los tres principios básicos de diseño pueden aplicarse también al color: organización del color, economía del color y comunicación del color.

3.6.1.- Organización del color

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

18

La organización del color influye en la consistencia de la organización. El color debe emplearse para agrupar los items relacionados.

Debe aplicarse una organización de color consistente tanto a las pantallas, como a la documentación y a los materiales de entrenamiento.

Los colores similares infieren similitud en los objetos. Se debe mirar la completud y consistencia al agrupar objetos con el mismo color.

Una vez se establece una codificación del color, esta debe ser usada en toda la interfaz gráfica así como en la documentación y publicaciones relacionadas.

3.6.2.- Economía del color El segundo principio del color, la economía del color, sugiere usar un máximo de 5 +/- 2 colores cuando el significado tiene que ser recordado.

La idea fundamental es usar color para aumentar la información proporcionada en blanco y negro (por ejemplo, diseñar la interfaz para que funcione bien primero en blanco y negro).

3.6.3.- Comunicación del color El énfasis del color sugiere usar fuertes contrastes en valor y tono para centrar la atención del usuario en la información más importante. Cuando demasiadas figuras o campos del fondo compiten por la atención del usuario se produce cierta confusión. La jerarquía de los estados sobreiluminado, neutro e infrailuminado para todas las áreas de la pantalla deben ser cuidadosamente diseñadas para proporcionar la máxima sencillez y claridad.

La comunicación en color pugna con la legibilidad, incluyendo usar un color apropiado para las áreas central y periférica del campo visual. Las combinaciones entre colores pueden producir influencias entre ellos y cambios en la elección de los mismos.

Es aconsejable que el color rojo y el verde no sean usados en la periferia del campo visual sino en el centro. Si son usados en la periferia, es necesario un medio para captar la atención del usuario, como un cambio de tamaño o el parpadeo, por ejemplo.

El negro, azul, blanco y amarillo son apropiados para la periferia del campo visual, donde la retina es mas sensitiva a ellos.

Si se produce un cambio en el tamaño de los elementos coloreados se debe tener en cuenta que nuestra percepción sobre su luminancia o tono puede cambiar, y tomar las medidas oportunas.

Es preciso usar colores que difieran tanto en valor como en tono. Las combinaciones rojo/verde, azul/amarillo, verde/azul, y rojo/azul deben ser evitadas excepto si se necesita un efecto visual especial.

Pueden crear vibraciones, ilusiones, sombras y postimágenes.

Para situaciones con poca iluminación se recomienda texto claro, líneas finas y formas pequeñas o medianas sobre un fondo oscuro; para situaciones con iluminación abundante, por el contrario, texto oscuro (azul o negro), líneas finas y formas pequeñas sobre fondo claro. Estas combinaciones son para presentaciones con transparencias, videos, papel o estaciones de trabajo.

3.7.- Simbolismo del color La importancia del color es comunicar. Los códigos de colores deben respetar el uso profesional y cultural ya existente de determinados colores. Las connotaciones varían fuertemente respecto a los diferentes tipos de usuario, especialmente cuando son de diferentes culturas. Las connotaciones del color deben ser usadas con sumo cuidado.

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

19

Por ejemplo: los buzones de correos son azules en Estados Unidos, rojo brillante en Inglaterra y amarillos en Grecia. Si se usa un icono gráfico para representar el correo electrónico, es conveniente adecuar su color al país para mejorar la comunicación.

3.8.- Características del color en una interfaz gráfica Consideremos cuál es la razón última para aprovechar las ventajas del color: ofrecer al usuario la misma información pero de una forma más persuasiva o amistosa, incrementando su interés. Por lo tanto, la principal utilidad que va a tener el color en las pantallas de nuestra interfaz gráfica será la de resaltar las informaciones que se consideren más importantes en detrimento del resto, para así poder identificar rápidamente los datos más relevantes, que serán aquellos a los que se presta atención prioritariamente.

Por otra parte, un buen manejo del color nos lleva a agrupar los diferentes elementos de la pantalla en conjuntos, que quedarán asociados aunque estén distanciados espacialmente, y a distribuir de forma clara los que deben diferenciarse. Este punto de vista de asociaciones y divisiones se aplica tanto a los componentes físicos de la pantalla como a las ideas y procesos inherentes a ellos. Por ejemplo, se puede emplear la misma gama de colores para señalar una secuencia de procesos determinada sin necesidad de numeraciones o indicaciones directas. También es muy interesante cuando tenemos información dinámica en el tiempo, ya que se altera el color cuando cambia el estado de la información.

Debemos tener en cuenta que los objetos verdes o azules parecen más grandes que aquellos que son rojos o amarillos. También consideraremos que los colores fríos hacen aparecer al objeto como mucho más plano que los calientes, que producen efecto de relieve.

Pero, como se ha enunciado brevemente antes, no se puede emplear cualquier color en cualquier momento. Es necesario tener un criterio de distribución decidido desde el momento en que se conoce que se van a utilizar colores en nuestras pantallas.

Uno de los errores más habituales a la hora de diseñar una pantalla es la de, intentando aprovechar la posibilidad de usar el color, acabar abusando de él. Esto puede ocurrir cuando en la aplicación se presentan, por ejemplo, diferente gama de colores, lo que provoca confusión a la persona que va a manejarla, ya que acaba preocupándose más de adaptar su vista al continuo cambio de color que al contenido de la información. También hay que hacer hincapié en evitar las combinaciones que puedan provocar connotaciones culturales negativas, que pueden llegar a herir susceptibilidades.

Veamos un ejemplo de combinación errónea indiscriminada en la siguiente imagen. La pantalla que se ha elegido pertenece a una aplicación sobre historiales clínicos. Dispone de dos bloques de información: los datos personales del paciente y la relación de las citas anteriores a la actual, cada uno de ellos en un marco (frame). Realmente son dos informaciones que, aunque independientes, mantienen la asociación de pertenecer a la misma persona. Sin embargo, el diseñador ha decidido distinguir claramente las diferencias al establecer los colores verde y rojo como fondo para estos marcos. La conjunción de dos tonos tan distintos entre sí invita a pensar que ambos conceptos son completamente exclusivos, aunque en la realidad no sea el caso, ya que tanto los datos personales como las citas anteriores se refieren al mismo paciente.

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

20

Combinación errónea indiscriminada.

Otro error en el diseño de esta pantalla ha sido la de utilizar unas etiquetas con un color muy parecido en el fondo. Ocurre en los cuadros de texto de los datos personales. El azul es muy semejante al verde y por lo tanto no permite una nítida delimitación. Obliga a forzar los ojos, lo que desde luego agota la vista del usuario en muy poco tiempo. Además, cuando se utilizan varias tonalidades del mismo color, como es el caso, puede incluso provocar confusión, o dar la impresión de que algunos datos físicamente cercanos estén conceptualmente distantes.

Por último, veamos la diferencia entre un texto de color oscuro sobre fondo claro (como suele ser lo habitual) y al revés. La primera situación la tenemos en los datos personales y la segunda en las citas anteriores. Como se puede observar, es mucho más fácil trabajar con situaciones como la del marco superior.

En esta imagen se ha representado la misma pantalla pero con colores más adecuados.

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

21

Pantalla con colores adecuados.

Este problema de atropello de los colores no es exclusivo de cada pantalla considerada de una manera singular. Es posible que se estudie cada pantalla de forma individual y nos parezca que las combinaciones han sido las adecuadas, que el efecto óptico que producen es armonioso y no son susceptibles de provocar efectos negativos en el ojo del usuario ni desviaciones desproporcionadas de atención. Esto es debido a que a veces el problema se presenta porque la combinación errónea se compone entre pantallas.

No es de recibo que a lo largo de la aplicación el usuario pueda ver que el predominio de los tonos en tiempo de ejecución va variando sin ningún orden lógico y que lleguen, incluso, a provocar interferencias entre las pantallas. Por supuesto, hay que intentar mantener una coherencia, buscando siempre transmitir una sensación de bloque homogéneo durante toda la aplicación. Si, por ejemplo, los fondos de todas las pantallas no pertenecen a la misma gama de color, provocará sin duda confusión a la persona que en este momento observa el monitor de su ordenador, a pesar de que pantalla a pantalla la composición de tonalidades haya sido la adecuada. Desde luego, el problema de la uniformidad es extrapolable al resto de características de nuestra aplicación. El usuario debe encontrarse en un entorno homogéneo para poder trabajar.

La anterior reflexión nos lleva a establecer que cualquier medida tomada en cuanto al color para incrementar los aspectos ergonómicos de nuestras aplicaciones deben ser estudiadas tanto a nivel individual de cada pantalla como a nivel global de la aplicación completa.

3.9.- Combinaciones entre colores En el siguiente cuadro vemos ciertas combinaciones entre colores que pueden considerarse correctas e incorrectas. Por ejemplo, los colores claros quedan bien integrados si se unen con colores oscuros, ya que hay un buen contraste, pero en determinados casos se pueden combinar con tonos también claros, excepto si son demasiado parecidos, como ocurre con el azul y el verde. En general, digamos que tanto un fondo claro con texto y figuras oscuras es tan admisible como un fondo oscuro con texto y figuras claros, pero en el primer caso se gana en legibilidad, como veíamos en la figura 1.

Combinaciones de colores

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

22

En la combinación de colores oscuros hay que tener más cuidado, porque es más fácil confundirse y que se unan colores que hagan un mal efecto. Tonos oscuros como el rojo y el azul presentados en una misma pantalla obligan al usuario a un esfuerzo de acomodación óptica innecesario.

Cuando pensamos en qué colores debemos emplear en nuestras pantallas debemos reparar en la influencia que un determinado color puede llegar a tener sobre el resto. Los colores provocan sensaciones cuando se abandona su visión y se pasa sin transición a observar otro. Por ejemplo, si estamos viendo el color azul y pasamos a ver un amarillo, éste se verá brillante. Si no se pasa anteriormente por el azul, el amarillo se verá mucho más pálido y mate.

En general, los colores tienen unas propiedades psicológicas que actúan sobre nuestro subconsciente.

Existen algunos efectos de la yuxtaposición entre colores que se admiten de forma general. Por ejemplo, el color amarillo, que como hemos dicho es alegre y brillante, pierde toda su fuerza cuando se combina con el blanco. Para rebajar el excesivo dinamismo que evoca el naranja no hay nada como mezclarlo con el blanco. Sin embargo, combinado con el rojo forma un color pardo demasiado denso. El violeta combina muy bien con el rojo, porque da más prestancia a la imagen noble y altiva del violeta, pero si se mezcla con el blanco resulta cursi.

Veamos ciertas relaciones que se deben considerar a la hora de seleccionar la gama de colores de nuestras pantallas: - Un objeto pequeño parecerá aún más pequeño si se coloca cerca de una superficie grande.

- Un color claro parecerá más claro sobre un fondo oscuro que sobre un fondo claro.

- Un color llama más la atención si se encuentra sobre un color mezclado que si está sobre un color vivo.

- Un tono frío parecerá más frío cuanto más cálido sea el color sobre el que aparece.

- Cada color muestra más claramente sus características si se coloca cercano a su complementario.

Finalmente, una breve mención a un aspecto muy interesante de cara a obtener delimitaciones más finas en nuestros diseños: la escala de grises. Muchas veces es más interesante jugar con los diferentes grises que mezclar otros colores, debido a que el ojo humano percibe con más dificultad los pequeños detalles cuando se emplea el color, y sin embargo, la combinación de varios grises permite la discriminación de los elementos de manera más eficaz y agradable a la vista.

Además, se le puede añadir azul para suavizar las posibles connotaciones negativas que se comentaban anteriormente.

En definitiva, cuando estamos hablando se colores es mejor pecar de prudentes antes que arriesgarnos a que se provoque una dispersión de la atención por parte del usuario. Pero, con una pequeña dedicación,

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

23

un proyecto que utilice una agrupación bien estudiada de colores va a mejorar claramente el acabado final, enriqueciéndolo de una forma muy interesante.

3.10.- Guía de uso del color en el diseño de GUIs. Recomendaciones.

1.- Usar un máximo de cinco, más menos dos colores.

Cuatro colores distintos son apropiados. Permite mayor sitio adicional en la memoria a corto plazo (memoria de trabajo). Los ordenadores pueden proporcionar al rededor de 16 millones de colores, pero los humanos sólo pueden discriminar entre 7,5 millones de colores.

2.- Usar colores centrales y periféricos de forma apropiada.

Usar el color azul para áreas grandes, no para detalles o texto. El azul es apropiado para fondos de transparencias y pantallas. Usar el rojo y el verde para captar la atención es una buena medida, el campo visual se adapta fácilmente a esto.

3.- Usar el mismo color para agrupar elementos relacionados.

La ciencia cognitiva ha avanzado en la noción de preparar y el proceso preatento. En este contexto, puedes preparar al usuario para eventos relacionados usando un código de color común. Un grupo de imágenes sucesivas puede mostrarse para relacionarse usando el mismo color. Colores similares pueden evocar significados similares. Es preciso mantener el color de fondo a no ser que exista una poderosa razón, por el mismo motivo.

4.- Usar un código de formas redundante de la misma manera que el color Hace la pantalla más impermeable a distorsiones en el color. Los cambios en la claridad del ambiente puede provocar cambios en el color percibido.

5.- Evitar azul para el texto, líneas finas, y formas pequeñas.

Nuestro sistema visual no está únicamente diseñado para estímulos detallados y precisos en longitudes de onda corta. Sin embargo, el azul es muy aconsejable para el color de fondo, y se percibe de manera idónea en la periferia del campo visual.

6.- Evitar que los colores adyacentes difieran únicamente en la cantidad de azul Los limites que difieran únicamente en la cantidad de azul se percibirán distintos.

7.- Evitar el rojo y el verde en la periferia de pantallas de gran escala Debido a la insensibilidad de la periferia retinal al rojo y al verde, estos colores deben ser evitados en la periferia en su forma saturada. El amarillo y el azul son buenos colores periféricos.

4.- Bibliografía Suzanne Martin. (1998). Effective Visual Communication for Graphical User Interfaces. E-mail: matt@owl.WPI.EDU Josef Albers (1974). La Interacción del color. Alianza Editorial.

Enrique M. Coperías. (1998). Documento: Las maravillas de la visión. Muy Interesante. Numero 211.

María del Mar Aguiar Fernández, Karlos Aguiar Fernández. (1998). La elección del color en las interfaces gráficas de usuario. Boletín Digital de Factores Humanos. Departamento I+D de Telefónica.

UNIVERSIDAD DEL QUINDIO PROG. DE INGENIERIA DE SISTEMAS Y COMPUTACION

24

John Sullivan. (1997). Interface Color and Graphics. E-mail: johnsul@scis.nova.edu ó mailto:jsulliva@rvcc.raritanval.edu .

Clyde C. Brown. (1998). Meteorology 301H: The Coevolution of the Sun, The Atmosphere, and The Human Visual System.

John Sullivan. (1997). Interface Design Principles. E-mail: johnsul@scis.nova.edu ó mailto:jsulliva@rvcc.raritanval.edu.

Terence Mendoza. (1998). The Interactive Eye Site. E-mail: optometry@terrymen.demon.co.uk Darren Meyer. (1998). Color Theory and Pre-Press. WPI CS Department. Ed Scott. (1997). Color Vision.

E-mail: mailto:dotted.dog@worldnet.att.net Daniella Petrelli. (1997). Utilities (and Ideas) for HCI Fan and GUI Practitioners. E-mail: petrelli@irst.itc.it IBM HCI Works. (1998). HCI Fundamentals - User Interface. URL: http://www.ibm.com/hci.html Interazione Uomo-Macchina homepage. (1997). Interfaces: definition, function and benefits Paul Lyons and Giovanni Moretti. (1997). Colour Harmony - The Problem. Massey University. E-mail: P.Lyons@massey.ac.nz