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
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
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
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
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
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