Usabilidad y colores de fondo

Los elementos de diseño con color de fondo son ignorados por los usuarios, interpretados como publicidad, información de contexto o estética.

Los elementos con fondo blanco, por el contrario, son interpretados como contenidos reales del sitio donde se encuentran lo que el usuario busca.



Utilización actual de los colores de fondo


Las cabeceras de los sitios web, el nombre y el logo, típicamente tienen color de fondo en casi todos los sitios. Es información de contexto poco relevante para el usuario y por ello es el área más ignorada. En ningún caso se debe colocar un vínculo a contenidos importantes del sitio en la cabecera o cercano a ella.

Los colores de fondo también se utilizan para intentar resaltar la publicidad, promociones y los contenidos del sitio que se quieren potenciar, es decir, contenidos que el usuario no busca, pero se quiere que vea.

En realidad el efecto es el contrario, el contenido con fondo de color es anulado y cuanto mayor sea la intensidad del color utilizado, menor será la visibilidad de ese contenido.


Los usuarios ignoran los textos con fondo de color


Ignorar los fondos de color no es un comportamiento deliberado, es la reacción defensiva del sistema cognitivo del usuario para evitar procesar información no relacionada con sus objetivos.

Los estudios de "eyetracking" (seguimiento de movimientos oculares) confirman que los usuarios no miran las áreas con colores de fondo y se centran preferentemente los contenidos el fondo blanco.

Esto es debido a un fenómeno con el mismo mecanismo que la ceguera a los banners que provoca que cualquier contenido excesivamente resaltado (sea un banner o no), sea ignorado.

Los usuarios aprenden que cualquier fondo con texto de color no es una información realmente útil. Normalmente es publicidad, promociones o simple decoración.

Como respuesta los usuarios desarrollan un patrón perceptivo, que les hace ignorar las áreas fuertemente coloreadas del sitio. Aprenden que los contenidos reales del sitio tienen siempre fondo blanco y por ello es más útil y rápido focalizarse únicamente en ellos.


Sitios que han abandonado los fondos de colores


Los colores de fondo han ido desapareciendo de la mayoría de webs y no por razones de tendencia estética minimalista.

La publicidad en Google (Adsense y Adwords) tenía fondo de color muy suave inicialmente. Ahora este fondo de color se ha eliminado y es blanco.

Igualmente la mayoría de las cajas de texto de Amazon ha dejado de tener fondo de color, ni siquiera el encabezado de las tablas tiene color. En general Amazon está mucho menos coloreado de lo que lo estaba y cuando hay algún elemento con color de fondo es complementario y solo se utiliza como separador de información.

En el artículo anterior "Best practices de Loquo" comentabamos que la opción "Publicar anuncio" situada dentro un gran botón con color de fondo) no era localizado por algunos usuarios y sustituyendo el botoón coloreado por un vínculo de texto sin color de fondo los problemas se han solucionado.


Utilización adecuada de colores de fondo


El color de fondo se puede utilizar para separar unas áreas de otras y crear rupturas que ayuden a jerarquizar y separar los contenidos.

Utilizar pequeños elementos de color sobre un fondo mayoritariamente blanco es una manera manera de separar contenidos y que no se confundan.

Cuando se coloque un texto sobre un color de fondo, hay que tener en cuenta que será ignorado y por tanto este texto no debe ser importante para la comprensión de la página web.