experiencia de usuariousabilidadUX

El poder de los espacios en blanco en el diseño web

De 9 agosto, 2017 marzo 16th, 2020 Sin comentarios

La armonía en una interfaz visual, implica muchas variables en el diseño, pero una de las más importantes es el espacio en blanco o “espacio negativo”, debe ser considerado como un elemento de gran valor.

“El espacio en blanco debe ser considerado como un elemento activo, no un fondo pasivo.” —  Jan Tschichold

Para ofrecer una buena experiencia a tus usuarios, y si hablamos del espacio en blanco, sabemos que además de dar más claridad (descanso a la vista), aporta claridad y guía los ojos del usuario a la información más importante que ofreces. Recordando que, este espacio no tiene porque necesariamente “llenarse”, tampoco tiene que ser necesariamente banco.

Veamos este listado:

En el ejemplo del listado, el nombre del escritor y la fecha están más próximos que el siguiente elemento de la lista ¿La información no queda más clara en la imagen de la derecha?

alineación de textos UX/UI

La proximidad hace que los objetos parezcan unificados – Ley de Gestalt -, de esa forma el espacio en blanco ayudaría a dar esa sensación de separación.

“El valor de una transparencia no se determina por la cantidad de información que contiene, sino por la claridad con que comunica su mensaje.”  —  Nancy Duarte

Es repetitivo, lo habrás visto en varias imágenes por internet, pero – menos es más – una frase que sigue predominando, un mantra muy eficaz para tu interfaz visual.

Un claro ejemplo de ello, son los espacios negativos del que todos estamos familiarizados: Google. Esta simple y clara interfaz visual nos permite centrar en lo más importante: la búsqueda.

Espacios en blanco

Puedes empezar a analizar hoy mismo y aplicarlos en tu web, app, software y tu blog.  ¿cómo puedo reducir los elementos para hacer más agradable mi interfaz?:

  • Espacio alrededor de tus gráficos y imágenes
  • Márgenes entre listados y menús.
  • Interlineado y espaciado de letras en tus contenidos textuales.
  • Espacio entre las columnas de tu web: encabezados, pie de página, bloques de textos.

Si los textos de tu web son muy pequeños ¿crees que estás ofreciendo a tus usuarios la experiencia que esperan? Apunte: no tienen la misma capacidad visual un usuario que tenga 20 años, que uno de 60 años.

 

Legibilidad: Vamos a priorizarla.

Tus usuarios van a escanear y leer por encima en búsqueda de información importante en tu web, para ello, lo ideal es que ofrezcas una buena legibilidad, para que pueda diferenciar lo más destacable y que le pueda servir o textos que puede descartar.

Un estudio en el laboratorio de investigación de la Universidad de Wichita, confirma que el aumento de los espacios en blanco aumenta la compresión lectora y disminuye la velocidad de lectura.

 

“Utilizando adecuadamente los espacios en blanco entre los párrafos y en los márgenes izquierdo y derecho se puede aumentar la comprensión de hasta un 20%.” —  Dmitry Fadeyev

 

¿Y cómo lo aplico?

Hagamos una comparación entre la presentación de Bill Gates – a la izquierda -, y de Steve Jobs – imagen de la derecha-:

presentacion-billgates-stevejobs

En la presentación de Gates, los colores causan ruido visual, las letras son muy pequeñas, casi ilegibles. En cuanto, la presentación de Jobs es clara, tiene elementos visuales atractivos y es minimalista.

 

Si hablamos de optimización de tus textos…

Destacaremos dos cosas: los márgenes de tus párrafos y el interlineado (espacio entre líneas). Con el interlineado le damos una gran vuelta a la legibilidad, es decir, cuanto más espacio damos, mejor será la lectura, pero ojo, hay que tener un límite, ya que el interlineado en exceso puede romper totalmente la unidad y desequilibrar tu diseño por completo.

Espacios en blanco espacio negativo

 

Y si hablamos de márgenes…

Espacios en blanco espacio negativo

Espacios elegantes

Al deshacerte de los elementos que causan ruido visual en tu diseño, probablemente puedas dar una sensación de mayor sofisticación y elegancia:

Paninibay

Paninibay

Philip House

Philip House

Vspicer

Vspicecer

Lapka

Lapka

Jac&

Soko

En resumen, el espacio negativo no es un desperdiciar un espacio, es ganar clareza y objetividad. Si ignoramos la importancia de esto en un diseño, también necesitamos saber que ignoramos los beneficios que puede traernos.

Fuentes:
→ A list apart
→ Team tree House
→ Babich

Deja una respuesta