Qué es el espacio en blanco y por qué es necesario en tu web

10/23/2017

El espacio en blanco en una web no es sinónimo de espacio desperdiciado. De hecho, si hablamos de diseño web, el espacio en blanco es una forma de dar ligereza visual a nuestro contenido.

Hoy en día, los usuarios que visitan una web realizan un escaneado de la página antes de decidir si leerla o no. Se mueven por la página de forma rápida, descartan contenido que nos les interesa y pueden distraerse si ven demasiado contenido. Por eso es importante diseñar tu web de forma que los visitantes estén centrados en lo que quieres que vean, y eso comienza con un buen uso de los espacios en blanco.

En este artículo vamos a tratar sobre los espacios en blanco y por qué son tan importantes para las conversiones.

¿Qué es el espacio en blanco?

El espacio en blanco es el área en negativo de cualquier composición. Es la distancia que existe entre cualquier elemento de una página y que proporciona a los usuarios algún "descanso" cuando visitan una página, que minimiza las distracciones y ayuda a mantener el foco en lo importante.

Poseer espacios en blanco en una web no es sólo una cuestión estética, los espacios en blanco tienen un gran impacto en nuestra mente a la hora de procesar nuevo material. Tener mucha información, o muchos elementos visuales, en un pequeño espacio puede causarnos fatiga cognitiva, y puede provocar que a nuestro cerebro le cueste más absorber la información existente.

¿Por qué necesitamos espacios en blanco?

Para comprender la importancia de los espacios en blanco debemos pensar en lo difícil que resulta para nuestro cerebro procesas una página completa de una guía telefónica. Tantas columnas juntas, con una letra tan pequeña que parece que están unas letras sobre otras... Seguro que alguna vez os ha costado encontrar la información que buscabais en las páginas amarillas.

Mientras que las páginas amarillas, o blancas, están diseñadas para albergar la mayor información posible en el menor espacio disponible, las comunicaciones escritas, en general, están diseñadas para que sea más sencillo recoger la información que contiene. Y esto es gracias a los espacios en blanco.

Para ilustrar la efectividad del espacio en blanco, os mostramos un ejemplo de dos formas de utilizar el espacio:

Una mala utilización de los espacios en blanco

Una mejor utilización de los espacios en blanco

¿Ves qué diferentes se ve cada artículo? El de la izquierda utiliza el máximo espacio posible y nos puede generar estrés visual si estamos leyendo durante mucho rato.

En cambio, el de la derecha utiliza columnas más estrechas y deja un margen durante todo el artículo. Es un diseño muy sencillo que tiene un mayor impacto en el usuario. Es más probable que lea ese artículo que el anterior.

Además de simplificar la lectura, los espacios en blanco pueden ayudarte a resaltar determinados elementos, ayudando al usuario a enfocarse en lo que te interesa.

Tarjetas de visita con espacios en blanco

Observa estas dos tarjetas de visita. Aunque ambas utilizan espacios en blanco, la de la izquierda mantiene todos los elementos en el mismo área dando la sensación de que está todo abarrotado y dificultando la lectura de los números de teléfono.

La tarjeta de la derecha, sin embargo, utiliza el espacio en blanco de manera que crea un efecto de orden, resaltando cada elemento de la tarjeta.

Cuando hablamos de diseño web, los espacios vacíos, o en blanco, no son sólo una cuestión estética, es algo que afecta a la optimización de las conversiones. Utilizar el espacio en blanco de forma efectiva puede ayudar a la navegabilidad de tu web, a hacerla más comprensiva y a incrementar las conversiones al incluir unos CTAs más visibles.

Veamos dos ejemplos de diseños web, con diferentes usos de los espacios en blanco:

Ambos diseños tienen un CTA del mismo tamaño y color, sin embargo, es más probable que cliques en el de la derecha que en el de la izquierda. ¿Por qué?

Muy sencillo: el botón de la izquierda está "aprisionado" entre divisores y mucho texto comprimido. Hay muchos elementos a su alrededor que te distraen de lo importante: pulsar el CTA.

El botón de la derecha, en cambio, tiene mucho espacio en blanco alrededor, tiene menos texto en la parte principal de la pantalla y un diseño más sencillo. El resultado es un CTA mucho más visible en el que el visitante clicará con mayor probabilidad.

Algunos sitios web que utilizan los espacios en blanco a su favor

Shopify

La página principal de Shopify está diseñada para conseguir su objetivo: que te apuntes a su prueba gratuita de 14 días.

Para que los visitantes vayan directamente a su CTA han creado una página llena de espacio en blanco, con un formulario de un solo campo y han minimizado las distracciones para que sea lo primero que vean los usuarios. La barra de navegación tiene un texto menor que el del formulario de suscripción y colocado fuera de la zona principal de visión, en la parte superior de la pantalla, para no acaparar la atención.

Si hacemos scroll en su página de inicio encontraremos más información relevante, como pasos a seguir, funcionalidades que te ofrecen, testimonios de otros usuarios, etc. Si hubiesen colocado esta información en la parte superior de la pantalla, probablemente no obtendrían tantas conversiones como con el diseño que han realizado.

Hawkers

Esta empresa española de gafas de sol tiene un diseño muy simple y con muchos espacios en blanco. La página posee un encabezado oscuro, no compite con el fondo blanco donde se encuentran los productos, centrando nuestra atención en sus gafas de sol.

Además, tiene un recuadro informativo, en el que indican los gastos de envío gratuitos en un color que destaca sobre el negro pero que acapara la atención sobre los productos, tanto por el color elegido como por la posición del recuadro.

Museo Thyssen

El Museo Thyseen nos demuestra que el espacio en blanco no tiene que ser espacio vacío ni aburrido. Su página principal nos muestra una serie de pinturas y láminas que nos invitan a clicar en su CTA para comprar las entradas a las distintas colecciones.

Además, te proponen en la parte inferior de la pantalla, y sin necesidad de hacer scroll down, que opines sobre el diseño y la navegabilidad de su web, propiciando el feedback entre usuario y empresa.