¡Más relleno, por favor!

El poder del espacio en blanco en el diseño del producto.

Si escucha una sesión de control de calidad de diseño entre un diseñador de producto y un ingeniero, es probable que escuche que el diseñador de producto dice algo como esto:

“¿Puedes agregar 8 píxeles de relleno aquí y también allá? ... En realidad, hagámoslo con 16 píxeles ".

En Wayfair, tenemos la suerte de trabajar junto a ingenieros que comprenden y están abiertos a nuestras continuas solicitudes. Sin embargo, estoy seguro de que algunos ingenieros nos ven como "locos por los píxeles". Y para ser justos, algunos de nosotros lo somos. Pero confía en mí, hay un método para nuestra locura.

Entonces, ¿por qué los diseñadores de productos son tan exigentes con el relleno?

El relleno, también conocido como espacio en blanco, es el espacio vacío entre y alrededor de elementos individuales de un diseño de página; Estos elementos pueden ser piezas de copia, imágenes, tarjetas, botones, iconos, etc. Cuando se usan correctamente, el espacio en blanco aporta claridad y equilibrio visual a un diseño.

Piense en el espacio en blanco como un soplo de aire fresco. Así como los humanos necesitan aire para respirar, los diseños necesitan espacios en blanco para respirar. Sí, esto puede sonar cursi. Pero estoy de acuerdo con esto.

¿Cómo aborda Wayfair el espacio en blanco?

Como mencioné anteriormente, hay un método para nuestra locura. En Wayfair, nuestro equipo de diseño de productos sigue una estricta regla de relleno para garantizar la coherencia y el fácil mantenimiento en todo el sitio. Esta regla está integrada en nuestro kit de herramientas de diseño, una colección de elementos de diseño de interfaz de usuario que son los componentes básicos de todos los diseños de nuestro sitio. La regla establece que el espacio entre cada elemento de diseño debe ser un múltiplo de 8 píxeles; Esto significa que el espacio puede ser de 8, 16, 24, 32, 40 píxeles, etc. Esta regla aporta intencionalidad a nuestro uso del espacio en blanco y crea consistencia visual en toda la experiencia de nuestro sitio.

¿Cómo puede el espacio en blanco mejorar la experiencia del usuario?

Ayuda a mantener el enfoque

El espacio en blanco es una herramienta que ayuda a guiar la experiencia del usuario. Utilizamos espacios en blanco para crear puntos de enfoque para nuestros usuarios que llaman su atención sobre ciertos elementos. Cuanto mayor sea el relleno alrededor de un elemento en particular en una página, mayor será el énfasis en ese elemento. En el siguiente ejemplo, el enfoque se mantiene claramente en la llamada a la acción y la mensajería principal.

Aaaah, bebe en todo ese espacio en blanco

Desafortunadamente, no siempre tenemos el lujo de este tipo de espacio en blanco. Esta es una rareza, así que disfrútala mientras dure. En una página de comercio electrónico típica, un diseñador de productos se enfrenta al desafío de equilibrar múltiples llamadas a la acción, enlaces secundarios, imágenes, piezas de copia: la lista continúa. El siguiente ejemplo muestra nuestra página de detalles del producto (PDP), una página que exige mucho de nuestro usuario. El espacio en blanco estratégicamente ubicado ayuda a nuestro usuario a navegar el ruido visual en esta página y potencialmente aumenta la conversión.

El espacio en blanco ayuda a enfocar al usuario en cada área de interacción en el PDP

Mejora la organización visual.

Además de resaltar áreas de enfoque, el espacio en blanco juega un papel muy importante en la organización visual de una página. El espacio en blanco es esencial para aclarar las relaciones y separar secciones con diferentes propósitos; También es la fuerza impulsora detrás del Principio de proximidad de la Gestalt, que establece:

Los objetos o formas que están cerca uno del otro parecen formar grupos.

Definir claramente diferentes partes de una página aumenta la confianza de nuestros usuarios en la experiencia del sitio; Obligar a nuestro usuario a pensar en un diseño confuso es algo que todo diseñador de productos quiere evitar. El siguiente ejemplo muestra la página de inicio de Wayfair, una página que fácilmente podría parecer abrumadora si el espacio en blanco no se usara correctamente.

El espacio en blanco define claramente las diferentes secciones en la página de inicio de Wayfair

Aumenta la legibilidad

Además de definir la organización de una página, el espacio en blanco puede mejorar enormemente la legibilidad de una página. Es importante tener en cuenta el espacio entre líneas de copia, e incluso letras, ya que un espacio reflexivo facilitará la digestión del usuario. Generalmente, más espacio es mejor, pero demasiado podría hacer que las líneas de copia se sientan desconectadas. Se trata de encontrar el equilibrio adecuado.

Medium (sí, este sitio) hace un gran trabajo al considerar el espacio en blanco en su configuración de copia. Si estás leyendo este artículo en una pantalla más grande, mira la inmensidad del espacio en blanco en los márgenes. Medium sabe lo que pasa.

¿Cuáles son las preocupaciones comunes en torno al espacio en blanco?

"¡El espacio en blanco es espacio perdido!"

Esto es un mito El espacio en blanco no es espacio desperdiciado. Algunos de nuestros grupos de interés tienden a llenar los espacios en blanco con más contenido cuando no siempre es necesario. Todos han escuchado el dicho "menos es más". Esto se aplica al contenido de cualquier página, donde menos ruido visual contribuye a una mejor experiencia del usuario. En el flujo de pago de Wayfair (visto a continuación), el espacio en blanco debajo del llamado a la acción principal puede ser vasto, pero equilibra maravillosamente y respalda los elementos de esta página.

Grandes áreas de espacios en blanco NO necesitan estar llenas de contenido
"¡El espacio en blanco empuja el contenido por debajo del pliegue y los usuarios no verán este contenido!"

Los usuarios se desplazarán y se desplazarán un poco más. Te prometo. Existe el mito de que los usuarios no siempre se desplazarán para ver todo el contenido de una página. Por lo tanto, algunos de nuestros interesados ​​solicitan que la mayoría del contenido de una página se encuentre en la mitad superior de la página.

Los usuarios han evolucionado y se sienten más cómodos con el desplazamiento. Definitivamente, hay ciertos elementos que se adaptan mejor sobre el pliegue, pero es importante no limitar el uso de espacios en blanco para acomodar el pliegue.

Conclusión

Cada diseñador de productos quiere diseñar la mejor experiencia de usuario posible; Con esto en mente, el espacio en blanco es una herramienta poderosa que puede ayudar a lograr esto desde la perspectiva de la interfaz de usuario. Debe estar muy integrado en el proceso de diseño.

¿Crees que estás usando demasiado espacio en blanco? Hay una buena posibilidad de que no lo seas. En todo caso, probablemente no estés usando lo suficiente. En caso de duda, agregue más espacio en blanco ...

Un agradecimiento especial para Connor Doherty. Mira su artículo sobre UX Copywriting.

¿Interesado en unirse al equipo de diseño de productos de Wayfair? Explore nuestras posiciones abiertas aquí.