Diseño UI

El impacto del espacio negativo en las interfaces de usuario y su experiencia UX

Diseño 9 min. de lectura

El espacio blanco o negativo, nos demuestra que en el diseño la metáfora existe. Esta diferencia entre funciones que no son iguales pero que se ocupan con el mismo fin, explica perfectamente cómo estos espacios son indispensables para lograr una clara interacción entre los usuarios y la plataforma.

Una interfaz lo suficientemente funcional e intuitiva, es un área visualmente atractiva y espaciosa. El equilibrio entre aquellos elementos de interacción y de diseño, se da gracias al control y diseño del espacio. Espacio que algunos consideran como blanco o negativo.  

¿Qué es el espacio blanco/negativo?

En términos de diseño, el espacio blanco, o mejor dicho, espacio negativo de la página, corresponde al área en donde no hay contenido. Es decir, contempla todo lo que que rodea a los distintos elementos que entregamos a los usuarios dentro de la interfaz.

Este espacio no es literalmente blanco, sino que es todo aquello que pasa desapercibido o no llama la atención.

A simple vista pareciera ser que es el resultado de la composición que se genera al diseñar; pero la verdad es que este factor es tan importante como el contenido mismo. Él es quien nos ayuda a centrar nuestra atención en lo que sí es importante. 

Parámetros espaciales

Según las dimensiones del espacio blanco, podemos dividirlo en macroespacio y microespacio.

  • Macroespacio: corresponde al espacio que separa grandes elementos. Como secciones completas y márgenes.
  • Microespacio: este separa los pequeños elementos como líneas de textos, botones, íconos, etc.

También podemos clasificarlos según su función. Estos serían blanco pasivo y blanco activo. Ambos ponen énfasis en los puntos de atención visual, ayudándonos a generar la interacción deseada.

  • Blanco pasivo: ayuda a la legibilidad y escaneo. Por ejemplo, cuando dibujamos un punto negro en una hoja blanca.
  • Blanco activo: intenciona la mirada a los puntos de atención diseñados previamente. 

Diseños más intuitivos 

Aprender a manejar el espacio negativo nos ayudará a mejorar la experiencia de los usuarios cuando visiten nuestras plataformas. Con él podemos entregar mensajes mucho más claros y ayudarlos a realizar acciones reduciendo la confusión y fricción. 

De forma concreta, el buen uso del espacio negativo en el diseño UI puede ayudarnos a mejorar los siguientes aspectos.

Jerarquía

Un controlado uso del espacio permite establecer niveles de jerarquía dentro de la interfaz, intencionando que el usuario vea y lea un mensaje o realice una acción en concreto. 

Ejemplo de esto son los botones que invitan a comprar en medio de un fondo blanco.

Legibilidad

Controlar el espacio entre las líneas de texto ayuda a que la lectura no sea fastidiosa y que el ojo no se fatigue. Esto genera un balance entre el negro del texto y el blanco entre líneas. Nos otorga aire permitiendo que el texto “respire”. 

Sin embargo, hay que ser cuidadoso y controlar la cantidad de blanco. Principalmente porque mucho espacio entre las líneas de texto puede generar desconexión entre ellas.

Comprensión

En un artículo sobre las Leyes de UX se habló de la ley de Pragnanz. Esta ley establece que reconocemos las figuras más fáciles de interpretar y les asignamos un significado u organización. Esta asignación nos permite decodificar el mundo de manera más económica y rápida. 

Por ejemplo, cuando percibimos formas en ciertos grupos de elementos dependiendo de la separación que hay entre ellos.

Escaneo

Al no fatigar el ojo con la ayuda de un balance entre el contenido y el blanco, podemos lograr que el usuario escanee rápidamente el sitio para encontrar lo que busca sin distraerse con elementos innecesarios.

Calidad

Un sitio lleno de elementos y contenido tiende a verse sucio y poco prolijo. Además genera una gran distracción. Ante esto, un buen balance del blanco o negativo, logra que el sitio se perciba como un objeto de calidad. También transmite elegancia, lo cual a veces es uno de los objetivos del cliente.

Ver para creer

Quizás toda esta información te resulta atractiva y quisieras aplicarla en tus nuevos proyectos de interfaces de usuario; pero lo más seguro es que encuentras que aún todo es muy abstracto. A continuación te mostraremos algunos ejemplos que te ayudarán a entender todo esto de mejor forma.

Apple

Visitar en www.apple.com/iphone/

Al llegar al sitio de Apple, lo primero que vemos son dos elementos. El primero es un conjunto de cuatro líneas de texto de distintas jerarquías tipográficas, equitativamente separadas y más abajo una gran imagen sin fondo. 

Los márgenes generosos y la alineación del texto al centro provoca que la mirada se enfoque inmediatamente en el centro de la pantalla, lugar que es ocupado por la imagen del celular.

Pocket Penguins

 

Espacio blanco negativo en el home de pocket penguins..

Visitar en www.pocketpenguins.com

En esta pantalla los márgenes actúan de manera activa, dejando el texto y el llamado a la acción en el medio de la pantalla. El espacio entre el texto y el llamado a la acción (CTA) es ligeramente más grande que la interlínea, pero lo suficiente como para entenderlos como elementos distintos.

Tinker

Página principal de Tinker, con espacio blanco negativo.

Visitar en tinkerwatches.com

En esta sección del sitio de Tinker Watches, la mirada se centra en el medio de la cuadrícula de cuatro imágenes. Estas se encuentran separadas por la misma distancia vertical y horizontal; mientras que a su lado derecho podemos leer claramente el Copy que invita a suscribirse. 

Aún cuando las tres líneas de texto se encuentran muy separadas entre sí, estas se perciben como un único párrafo, ya que la separación entre título, párrafo e input es mayor que la interlínea. Esta disposición, permite que la lectura y el escaneo se hagan más amigables para el usuario, ofreciendo un mensaje claro y grato a la vista.

The Pisacco Chronicle

Visitar en thepisaccochronicle.com

A primera vista vemos dos cajas compuestas por imagen, título, un párrafo y un link. Todas estas sobre un fondo blanco. 

Las cajas se perciben como un único conjunto, gracias a que los espacios en blanco entre cada elemento son muy pequeños y contrastan con la gran cantidad de blanco en el resto de la pantalla. 

De la misma forma, los elementos de navegación, ubicados en la esquina superior izquierda y centro derecha; se entienden como conjuntos distintos debido a la proximidad que tienen con estas cajas.

Wickret

Espacio Blanco y Negativo con Wrickret.

Ver en wickret.cuberto.com .

En este caso, podemos observar que en el centro de la pantalla hay dos elementos bastante separados entre ellos. Sin embargo, se entiende que ambos están relacionados ya que la separación entre ellos es más pequeña que los márgenes de la página.

En el conjunto de la derecha distinguimos claramente tres elementos de texto. El primero posee un color sólido y los dos siguientes solamente son contorneados. 

También se distinguen claramente los ambos textos inferiores, ya que a pesar de ser visualmente ligeros, la interlínea es más pequeña que la separación entre textos. Eso nos permite identificarlos como una unidad. 

Estos ejemplos son sólo algunas muestras de cómo el espacio blanco o negativo ayuda a la navegación en nuestros sitios. 

Aprender a manejar el espacio de las pantallas requiere de mucha práctica y observación crítica. Y es importante entender que no será de gran ayuda si no pensamos en que nuestro sitio será leído y usado por una persona ubicada en su propio contexto. 

Nuestro trabajo consiste en entregarle al usuario un mensaje y una herramienta altamente legible y accesible, de lo contrario, nuestros productos serán bonitos, pero no útiles.

 

Artículos relacionados

¿Menos es más? Conoce la importancia de una correcta densidad de datos en tu web – Blog IDA

Cómo crear interfaces web considerando patrones de escaneo – Blog IDA

¿Cómo romper la grilla y no morir en el intento? – Blog IDA

Ley de Prägnanz – Blog IDA

 

Acerca del Autor

Luciano Cimino - Diseñador UI

La comunicación visual es un elemento clave a la hora de generar empatía. Por eso mi trabajo busca que los usuarios puedan identificarse con los servicios digitales mediante la creación de un lenguaje gráfico específico, logrando un diálogo entre lo funcional y lo emocional; para así conseguir buenas experiencias.

Agregar un comentario