Usando el Contraste en el Diseño Web

El contraste hace que los objetos sobresalgan entre lo que los rodea, que se noten más. Los objetos con mayor contraste se notarán más.

El contraste es el área problemática más común que encuentro al analizar diseños, comunmente porque no hay suficiente contraste, o los elementos de mayor contraste no son los correctos.

Cómo usar el Contraste

Los diseñadores usan el contraste para ayudar a los usuarios a recorrer la página efectivamente guiando el ojo rápidamente y sin esfuerzo a lo largo de la misma. Una página web que ha sido bien hecha se ve fácil de mirar, porque ayuda a minimizar la dificultad de interactuar con una pantalla (mirar arriba). Todos los elementos de la pantalla compiten por la atención del ojo. El alto contraste es empleado para promover los elementos más importantes. El contraste bajo ayuda a hacer que los elementos menos importantes se alejen un poco de la vista.

Ejemplo de contraste insuficiente

http://www.getinspired.at/

Éste es un lindo diseño, con formas angulares placenteras rodeando el área de contenido principal. También me gusta la silueta sutil detrás de la navegación.

Hay algunos grandes problemas. Primero, no hay simplemente suficiente contraste para hacer al contenido fácil de leer. El texto gris se ubica en un fondo de contenido gris, sobre una página de fondo también gris.
Es compuesto por la pequeñez del texto y el logo, porque el tamaño multiplica el contraste. El elemento más resaltado de la página por lejos es el logo de ‘Get Firefox’.

Además, el logo del sitio es demasiado pequeño. El ID de un sitio es un elemento vital para permitir a un usuario saber dónde está. Además de ser demasiado pequeño, el logo está posicionado de forma despareja abajo a la derecha de su cuadro contenedor.

Para la página inicial de un sitio, el contenido dice muy poco en demasiadas palabras, y falla al brindar la información más relevante. "El objetivo principal de este sitio es darle cierta información de quién soy y qué hago," sería mucho mejor expresado en términos como, "Éste es el sitio personal de Juergen Land, un desarrollador web que trabaja en Linz, Austria…"  y luego continuar describiendo porqué usted debe considerarlo.

Unos pocos cambios rápidos incrementan significativamente el contraste, haciendo el fondo del contenido mucho más claro, oscureciendo los links de navegación laterales, y magnificando el logo del sitio.

La legibilidad y la escaneabilidad se incrementan significativamente por el incremento simple en contraste tonal.

Otro pequeño cambio que he hecho es mover los encabezados de la sección hacia la izquierda. En el original de arriba, los boletines de noticias se extienden más a la izquierda que su encabezado, lo que se ve un poco desprolijo.

Uno para probar

Visite el sitio de Alex King, e intente cambiar los estilos usando los íconos de arriba a la derecha. ¿Cuál es más fácil de leer?

Dispositivos de contraste

Las áreas de contraste alto atraen al ojo más que los elementos de contraste bajo.

– Sin embargo, sólo puede usar esto si hay áreas de contraste bajo sobre las cuales sobresalir. Si todo en una página es alto en contraste, todo luchará por la atención, y el resultado es una página a la que es cansador mirar.

Los cambios agudos en el tono atraen.

– Cuánto más grande sea la diferencia en tono, y más abrupto sea el límite, mayor será el contraste.
– Las líneas gruesas atraen más que las líneas finas -pero- las líneas que son demasiado gruesas (más que los espacios entre ellas) pierden claridad. Como un bloque, el texto negro (el término de diseño para la super-negrita) tiene más contraste en la página, pero los caracteres individuales tienen menos contraste en relación con el espacio que ocupa cada palabra, y así pierde claridad

Las áreas de tono/color que son diferentes (con respecto al fondo de la página o el esquema de color) sobresalen

Esto es obvio. Si usted pone un logo anaranjado sobre una página predominantemente azul, va a sobresalir debido al contraste de color. Un cuadro blanco sobre una página oscura sobresaldrá porque hay un gran contraste tonal.

Los objetos nuevos con contraste alto sobresalen más que los objetos familiares.

Cuando el usuario ya ha visto al menos una página y ha identificado esa barra oscura en la parte de arriba como "navegación", y esa banda abajo de ella como "un banner", automáticamente comenzará a ignorarlo.

Por lo tanto, cuando hay algo importante para que vea el usuario, es más fácil mostrarlo si está ubicado en una parte de la página que cambia, p.ej. un lienzo de contenido. De otro modo, tendrá que trabajar mucho más duro para ser visto.

El movimiento atrae.

Los objetos que se mueven son obviamente muy efectivos al atraer al ojo. En la vida real, necesitamos estar más interesados en los objetos que se mueven, porque pueden ser alimento o una amenaza. Nuestros cerebros están configurados para responder más al movimiento en los ángulos del ojo que al de los objetos en el centro de la visión.

El movimiento no significa sólo animación. En un grado menor, la sugestión visual de movimiento también atrae. Las líneas diagonales atraen más que las líneas cuadradas. Los patrones ocupados atraen más que los tonos lisos.

Ejemplo: Amok

Éste es un diseño que se ve lindo (esta visión es de un tamaño de 2/3), que usa gradientes sutiles.

Sin embargo, el balance de contraste es erróneo. Las áreas de contraste alto no resaltan los elementos más importantes.

Los elementos de la pantalla más resaltados son:

– Los dos paneles de anuncios a la izquierda (apuntan a ‘sitios recomendados’ externos, y no se relacionan con el contenido)
– Se destaca también la imagen superior en el lado derecho, que tiene un contraste alto y presenta una diagonal (esto es promover una plantilla de diseño para la venta; el contenido está en este sitio, pero una vez más no se enfoca en la página inicial)
– La linda imagen de flores en el fondo de la barra superior resalta menos.

A una escala de 2/3, no hay nada más realmente visible en esta página, pero un diseño con un buen contraste debe ser entendible incluso a esta escala.

Recomendaciones:

Para hacer al diseño más efectivo, el contraste debe ser agregado para atraer la atención a los puntos focales previstos en la página. La navegación principal, los títulos de página y sección, y el logo del sitio deben ser claros. La página es generalmente muy clara, así que lo que necesita son oscuridades extra.

Puede beneficiarse también de una clarificación extra de las secciones en la página. La navegación debe ser distinguida del área de contenido principal, así como cualquier área secundaria (links laterales y anuncios).

El Test de Estrabismo

El test de estrabismo es una manera fácil de determinar el contraste global de una página.

Todo lo que necesita hacer es entrecerrar sus ojos hasta alrededor de tres cuartos cerrados, para que el texto normal se vuelva empañado e ilegible. Todo lo que será capaz de distinguir son áreas de claridad y oscuridad, y colores fuertes. Esto revelará las áreas de mayor contraste.

Haga click en donde sus ojos tienden a enfocarse. ¿Hacia qué parte de la página son conducidos? Esto le dará una buena impresión de los elementos más ‘atractivos’. ¿Son los adecuados para ayudar a sus visitantes a usar el sitio con éxito?

Pruebe el test de estrabismo en el sitio de Amok de arriba. Verá que los dos bloques a mano izquierda son más atractivos que la imagen a la derecha, y quizás más que la imagen de fondo en la parte superior derecha de la página.

Pruébelo en algo que use un color y contraste simple y claro, como este aviso de iPod.

Midiendo el contraste

Para chequear el contraste, necesita comparar el brillo/luminosidad del primer plano y el fondo. Cuánto más grande sea la diferencia, mayor será el contraste.

Para los siguientes ejemplos, tomé muestras de pantalla, las reduje a escala de grises en Photoshop, y tomé lecturas de luminosidad con el extractor de color. Pruebe el test de estrabismo en éstos:

Ejemplo A: Web Design from Scratch

WDFS usa blanco/negro para la mayor parte del cuerpo de texto, para una legibilidad máxima. Ciertos bloques de texto (párrafos introductorios, comentarios y reclamos) son desplegados en variaciones de gris claro, pero ofrecen aún alrededor de un 90% de contraste.

Ejemplo B: sealedmedia.com

La navegación principal usa blanco o amarillo mostaza, en un fondo gris de normal a oscuro. El blanco contrasta sólo un 32% contra el gris, lo que es probablemente insuficiente para gente con deficiencias visuales.

El amarillo/gris tiene un contraste tonal muy pequeño – sólo un 7%. Este diseño se apoya en la tonalidad contrastante del amarillo; lo que no es una opción segura para ciertas combinaciones de color.

El color amarillo es usado para la sección actual, lo cual es un error. El link actual debe ser resaltado permanentemente, ya sea con una claridad extra, una claridad coloreada extra, o un contraste extra. Mientras el amarillo es un color que agrega, no es una claridad coloreada, y reduce demasiado el contraste.

Ejemplo C: transformationalbreath.co.uk

Éste sitio pone texto negro sobre una imagen de fondo gris & blanca.

El contraste mínimo es de un 91%, lo cual es suficiente para que el texto sea universalmente legible.

Ejemplo D: usernomics.com

El estado por defecto tiene amarillo sobre un gris normal, lo que le da un contraste tonal de sólo un 20/100.

El estilo resaltado del mouseover (gris oscuro/amarillo) tiene más contraste, pero sólo un 40/100.