El uso efectivo del espacio en el diseño de interacción (a menudo abreviado como IxD), requiere una comprensión de la estética, la funcionalidad y el comportamiento humano. De hecho, el diseño espacial es el vínculo entre las dimensiones más estilísticas del lenguaje y las imágenes, y las más prácticas de capacidad de respuesta, tiempo y comportamiento del usuario.
El espacio existe en algún lugar en el medio, lidiando con problemas en ambos lados del espectro.
Comenzaremos nuestro artículo sobre el espacio hablando de él en su forma más pura, el espacio en blanco, y por qué no debes temerle. Luego, daremos más consejos prácticos sobre cómo tratar el espacio en el diseño de interacción para que una interfaz no se sienta abarrotada o aislada.
¡No le temas al espacio en blanco!
El espacio en blanco puede ser desalentador. El espacio en blanco puede sentirse como un lienzo vacío, algo que debe reemplazar con su brillantez, de lo contrario, no está haciendo su trabajo. Pero la verdad es algo completamente diferente: el trabajo del diseñador es crear la mejor interfaz y experiencia posible, y eso significa usar el espacio en blanco como una herramienta de diseño más.
El espacio en blanco no es espacio desperdiciado.
Todos los buenos artistas visuales entienden la importancia del espacio negativo, el área vacía que llama la atención y acentúa el tema real. El espacio negativo (el equivalente artístico del espacio en blanco de un diseñador) es como el elenco de apoyo cuyo deber es hacer que la estrella del espectáculo se destaque más al no sobresalir tanto ellos mismos.
Si no crees que ninguna parte de tu diseño deba estar intencionalmente en blanco, echa un vistazo al peor sitio web del mundo para ver un ejemplo extremo del daño causado por demasiados objetos que compiten por la atención.
En el diseño IxD, el espacio en blanco cumple 3 funciones principales:
1. Mejorar la comprensión
Si desordenar una interfaz sobrecarga a un usuario con demasiada información, reducir el desorden mejorará la comprensión. De hecho, se ha demostrado que utilizar correctamente los espacios en blanco entre párrafos y en los márgenes izquierdo y derecho aumenta la comprensión hasta en un 20%.
La habilidad de usar espacios en blanco radica en proporcionar a los usuarios una cantidad digerible de contenido y luego eliminar los detalles superfluos. El espacio en blanco se puede dividir en 4 elementos:
- Espacio en blanco visual: espacio que rodea gráficos, iconos e imágenes
- Diseño de espacios en blanco: Márgenes, paddings y gutters
- Espacio en blanco de texto: espaciado entre líneas y espaciado entre letras
- Espacio en blanco de contenido: espacio que separa las columnas de texto
Echemos un vistazo a cómo estos 4 elementos crean una sensación de armonía y fluidez.
Medium es un gran ejemplo de cómo lograr un buen equilibrio con los cuatro elementos del espacio en blanco. Primero, pensemos en el objetivo del usuario desde el punto de vista de la interacción: quiere acceder a contenido interesante lo más rápido posible. La página de inicio facilita inmediatamente ese objetivo al colocar el contenido al frente y al centro, con mucho espacio en blanco a cada lado para agregar énfasis. Hay un amplio espacio alrededor de las imágenes y entre las líneas de copia.
Más allá de mejorar la comprensión, el espacio en blanco también ayuda a crear mapas mentales. Se utiliza un espacio en blanco mínimo entre la navegación superior y el flujo de contenido, ya que ambos cumplen funciones similares para llevar al usuario a un contenido más profundo (y las funciones similares deben agruparse).
Debido a que la navegación del lado derecho se enfoca más en crear y guardar contenido, más espacio en blanco lo separa del flujo de contenido. En este caso, el espacio en blanco ayuda a los usuarios a asignar diferentes funcionalidades a diferentes partes de la interfaz.
Una vez que se hace clic en un artículo, el espacio en blanco ayuda a enfocar al usuario en lo que más le importa: el contenido. Observa cómo el espacio adicional entre cada línea de texto mejora la legibilidad.
Al igual que la página de inicio, puedes ver que una gran cantidad de espacio en blanco una vez más crea distancia entre grupos de objetos que cumplen diferentes funciones.
En última instancia, el uso adecuado de los espacios en blanco elimina el desperdicio en su interfaz. Cada interacción con el usuario, por lo tanto, se siente necesaria para ayudarlo a lograr su objetivo. Piensa en ello como lo que describimos "escultura sustractiva". A medida que quita más piedra, crea más espacio y énfasis para la escultura.
2. Clarificando las relaciones
Al observar cómo los individuos organizan la información visual, los psicólogos de la Gestalt tropezaron con lo que llaman la Ley de la Proximidad, que establece que las imágenes cercanas entre sí parecen similares. Por ejemplo, echa un vistazo a la siguiente imagen:
Casi todo el mundo ve 2 grupos de puntos, en lugar de simplemente 15 puntos. Los puntos son todos idénticos y lo único que los diferencia es el espacio en blanco que los separa. Esta observación del comportamiento tiene varias aplicaciones importantes para el diseño de interacción, especialmente con respecto a los formularios de entrada.
3. Colocar las etiquetas más cerca de los campos relevantes
Como puedes ver en el siguiente ejemplo, la información se comunica mucho más claramente cuando las etiquetas se colocan más cerca de los campos con los que se relacionan.
La investigación ha demostrado que incluso la más mínima vacilación puede dañar la finalización del formulario. En este caso, simplemente ajustar el espacio aumenta la confianza del usuario para completar el formulario, lo que por supuesto mejora la tasa de finalización.
4. Agrupar temas relacionados
Cuando se trata de formularios largos, la tarea de completarlos puede parecer tan abrumadora que algunos usuarios abandonan antes de siquiera intentarlo. Dividir la información en grupos apropiados puede ayudar a que se sienta más manejable.
Agrupar elementos de formulario de manera efectiva utilizando espacios en blanco.
Simplemente categorizar los 15 campos en 3 grupos hace que el proceso se sienta más fácil. La cantidad de contenido es la misma, pero la impresión en los usuarios es muy diferente.
Los campos de formulario suelen presentar la mayor fricción para los usuarios, pero los mismos principios también se pueden aplicar a la navegación y al contenido del sitio. En lugar de un menú de navegación superior con 20 elementos, puede crear un menú desplegable con 4-7 elementos de nivel superior y el resto clasificado en submenús.
5. Llamar la atención
Como mencionamos antes, la falta de otros elementos solo hará que los elementos existentes se destaquen más. Echemos un vistazo a este rediseño web de Yelp a continuación:
En el ejemplo anterior, se agrego mucho espacio en blanco para separar las categorías de la función de búsqueda. Al hacerlo, los íconos de categoría son mucho más notorios y menos desordenados que su formato anterior. En combinación con un sombreado de color gis animado que se activa al pasar el mouse, la sección de categoría ahora atrae aún más la atención, al tiempo que brinda mejores comentarios al usuario.
Pero debido a que los humanos tienen una atención selectiva que conduce a la visión de túnel, como desconectarse de los anuncios publicitarios (conocido como ceguera de los anuncios publicitarios), también necesita saber cuándo se debe reducir y modificar el espacio entre el contenido.
En última instancia, debes comprender que el poder del espacio en blanco proviene de los límites de la atención y la memoria humanas.
Solo mire la comparación entre Yahoo y Google a continuación. Yahoo intenta que el usuario considere demasiadas acciones a la vez. Google entiende el resultado final de que la gente solo quiere usar los motores de búsqueda para encontrar cosas. Al ser realista sobre el objetivo del usuario, el diseño de Google fomenta una interacción más efectiva.
Arriba: Yahoo , Abajo: Google.
Comprender los límites de la memoria humana
La mayoría de los diseñadores se suscriben a la escuela de pensamiento “no hagas pensar al usuario”.
No es que los usuarios sean perezosos, es que ya tienen muchas cosas en mente, y acumular información adicional solo hace que sea más difícil completar sus tareas. La cantidad de tensión que crea un diseño de interfaz se denomina "carga cognitiva", y una interfaz de usuario útil y agradable reducirá esto tanto como sea posible.
A lo largo de los años, los diseñadores han desarrollado estrategias para minimizar la carga cognitiva sin sacrificar funciones. Explicaremos cómo fragmentar el contenido ayuda a reducir la tensión cognitiva y luego veremos cuatro consejos adicionales para ahorrar memoria.
1. Contenido fragmentado
A pesar de lo complicado que es el cerebro humano, sus deficiencias son sorprendentemente predecibles. Toma los estudios de George Miller, por ejemplo: en 1956, el científico publicó sus hallazgos de que nuestra memoria a corto plazo generalmente puede retener datos de entre 5 y 9 elementos, un promedio de 7, antes de que se hunda el olvido, esto ha sido cuestionado, más sin embargo los hallazgos de Miller han demostrado ser efectivos y condujeron a importantes métodos IxD, incluida la "fragmentación".
La fragmentación es la práctica de agrupar información relevante para que sea más fácil de procesar y recordar. En la imagen de arriba, es más fácil recordar el primer grupo de formas porque están fragmentadas.
La fragmentación no es una regla estricta, sino que depende del contexto. En resumen, la fragmentación es ideal para las siguientes situaciones:
- Cuando un producto naturalmente tiene una gran cantidad de información que debe ser memorizada para su uso posterior.
- La interfaz de usuario debe competir contra estímulos externos por la atención de su usuario, es decir, sistemas de navegación para automóviles.
- Aplicaciones de aprendizaje electrónico (ya que los usuarios deben recordar la información más tarde)
Por otro lado, no necesitas fragmentar un contenido si está destinado a ser buscado o explorado. Hay excepciones, por supuesto, como puedes ver a continuación con Etsy.
Si bien los usuarios no necesitan memorizar las categorías, dividir el contenido en el nivel de categoría agrega una jerarquía visual. Una vez que se hace clic en la categoría, la fragmentación desaparece y se enumeran los elementos. No tendría sentido aplicar fragmentación a nivel de elemento, ya que puede comprender la frustración de navegar solo entre 5 y 6 elementos por página.
El tratamiento de Etsy permite a los usuarios disfrutar de lo mejor de ambos mundos. Se presenta una gran cantidad de productos, pero los usuarios no se sienten sobreestimulados. En el ejemplo anterior, hay 32 productos diferentes en la pantalla. Usando cualquier otro diseño, el usuario podría sentirse perdido o distraído. Gracias a la fragmentación, los usuarios pueden procesar toda la información mientras se concentran en los “fragmentos” que más les interesan.
2. Consejos adicionales para ahorrar memoria
Estas son algunas de las mejores prácticas que los diseñadores encuentran útiles para aliviar la tensión en la memoria de sus usuarios:
- Cambiar el color de los enlaces ya visitados
- Facilitar la comparación de páginas de productos
- Usar enlaces de cupones, sin códigos
- Los menús de navegación largos están bien si es necesario
Nadie quiere que la experiencia de un producto se sienta como un examen de cálculo. Reduce la carga cognitiva y la experiencia mejora naturalmente.
Aplicando la Ley del Contexto a los objetos modificables
En pocas palabras, la Ley del contexto establece que debes colocar controles junto al objeto de interfaz relevante, al igual que una etiqueta junto al campo de formulario en blanco. Esto reduce la carga cognitiva porque en cuanto los usuarios quieren modificar algo, ya pueden ver las acciones disponibles.
En Facebook, el usuario debe recorrer varios menús y páginas diferentes, desde Configuración hasta Configuración de la cuenta, desde Nombre hasta Editar, un proceso que no está fácilmente disponible y debe buscarse primero en la sección Ayuda. En LinkedIn, sin embargo, todo lo que tienes que hacer es hacer clic en el icono del lápiz junto al nombre de un perfil.
¿Qué proceso es más simple? ¿Cuál prefieren los usuarios?
Al colocar los controles junto al elemento relevante, el diseñador evita al usuario la molestia de investigar, memorizar y sumergirse en rutas de usuario complejas. Esto también se relaciona con el punto de facilitar los clics porque desea minimizar la ruta entre el usuario y el objetivo. La simplificación del sistema permite que el sentido común básico triunfe sobre explicaciones largas y complicadas.
Ahora, llevemos este principio un paso más allá para crear una jerarquía de control. Como puedes ver a continuación en una maqueta de un servicio de mapas en línea, los controles que afectan a un objeto deben agruparse con el (como los controles de zoom). Los controles que afectan a todo un grupo de objetos deben asociarse con todo el grupo (como las categorías).
Vamos a deconstruir la imagen de arriba:
- El nivel de control más amplio: debido a que cambiar las categorías afectará a toda la imagen del mapa, la interfaz de categorías abarca todos los niveles inferiores de control.
- Nivel medio de control: En este caso, escribir el código postal o la dirección es más específico que seleccionar una categoría. Dado que esto afecta a dónde se acerca el mapa, se coloca justo encima del mapa (pero dentro de la interfaz de categoría).
- Nivel de control preciso: el zoom del mapa representa el nivel de control más específico. Se encuentra dentro de la imagen del mapa ya que eso es todo lo que controla.
Por supuesto, el ejemplo anterior es solo un tratamiento visual. Asegúrate de que tu interfaz tenga una jerarquía que facilite la comprensión de cómo cada control puede afectar a los demás.
Conclusión
El espacio puede quitar o agregar valor a un contenido; todo depende de cómo se use.
Crea demasiado espacio entre los objetos de interfaz relacionados y tu diseño se vuelve frustrante. Mete demasiados objetos juntos y tu diseño se vuelve demasiado desordenado. Presta atención al espacio al crear tus diseños, particularmente en relación con la memoria del usuario y cómo la proximidad puede transmitir un significado mejor que una explicación prolija. El espacio tiene mucho peso en el diseño de interacción, lo que dice mucho de algo que técnicamente no es nada.
