2.- Modos de uso, Navegación, Técnicas de codificación y diseño visual.
(Color, íconos, fondo de letras).
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.
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.
- 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.
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.
Consistencia, disposición de la
pantalla, relaciones y navegabilidad son importantes conceptos de organización.
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.
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 último 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.
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.
Relaciones.
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.
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.
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.
Hay que considerar 4 grandes
factores: simplicidad, claridad, singularidad y énfasis.
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.
Claridad.
Iconos ambiguos y claros.
Todos los componentes deberían
ser diseñados para que su significado no sea ambiguo, que no lleve al equívoco.
Singularidad.
Las propiedades de los elementos
necesarios deben ser características singulares.
Énfasis.
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 crítica.
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.
Legibilidad.
Texto ilegible y legible.
La pantalla debe ser fácil de
identificar e interpretar, además de atractiva y agradable.
Tipografía.
Incluye características de
elementos individuales (tipos de letra y estilos) y sus agrupamientos (técnicas
de estilo).
Se deberá usar un número 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.
Tipos de letra y estilos
recomendados
- usar mayúsculas y minúsculas
siempre que sea posible.
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.
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.
- 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.
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.
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.
Organización
del color.
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.
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).
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 más
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.
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.
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.
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.
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.
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.
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.
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, 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.
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 alrededor 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 pueden
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 límites 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.
