Abrazando el espacio en el diseño de interacción

El uso efectivo del espacio en el diseño de interacción 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 lo visual – y las más prácticas de la capacidad de respuesta, el tiempo y el comportamiento del usuario. El espacio existe en algún lugar en el medio, tratando con cuestiones en ambos lados del espectro.

Empezaremos nuestra discusión sobre el espacio hablando del espacio blanco en su forma más pura y de por qué no debes temerle. Después, entraremos en más consejos prácticos sobre cómo tratar el espacio en el diseño de interacción para que su interfaz no se sienta desordenada o aislada.

¡No teman al espacio en blanco!

El espacio blanco puede ser desalentador. El espacio blanco puede sentirse como un lienzo vacío, algo que debes reemplazar con tu brillantez, de lo contrario no estás haciendo tu 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 blanco como otra herramienta de diseño.

Fuente: El espacio 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 blanco de un diseñador) es como el reparto de apoyo cuyo deber es hacer que la estrella del espectáculo destaque más al no destacar tanto ellos mismos.

Si no crees que alguna parte de tu diseño debería estar intencionadamente en blanco, echa un vistazo a la peor página web del mundo para ver un ejemplo extremo del daño causado por demasiados objetos compitiendo por la atención.

En el diseño de interacción, el espacio blanco cumple 3 funciones principales:

Mejorar la comprensión

Si el desorden de la interfaz sobrecarga al usuario con demasiada información, la reducción del desorden mejorará la comprensión. De hecho, se ha demostrado que el uso adecuado de los espacios en blanco entre los párrafos y en los márgenes izquierdo y derecho aumenta la comprensión hasta en un 20%, como ha señalado Dmitry Fadeyev, creador de Usaura.

La habilidad de usar el espacio en blanco consiste en proporcionar a los usuarios una cantidad digerible de contenido, y luego eliminar los detalles extraños. El espacio blanco puede ser dividido en 4 elementos:

  • Espacio blanco visual: Espacio que rodea a los gráficos, iconos e imágenes
  • Diseño w espacio de la casa: Márgenes, acolchados y canaletas
  • Espacio en blanco de texto: Espacio entre líneas y espacio entre letras
  • Contenido w espacio de la casa: 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.

El medio es un gran ejemplo de un buen equilibrio con los cuatro elementos del espacio blanco. En primer lugar, pensemos en el objetivo del usuario desde el punto de vista de la interacción: quieren acceder a un contenido interesante lo más rápido posible. La página de inicio facilita inmediatamente ese objetivo colocando el contenido al frente y en el centro, con mucho espacio en blanco a cada lado para añadir énfasis. Hay un amplio espacio alrededor de los visuales y entre las líneas de copia.

Además 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 sirven para funciones similares para que el usuario profundice en el contenido (y las funciones similares deben agruparse).

Debido a que la navegación por el lado derecho se centra 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 las distintas partes de la interfaz.

Una vez que haces clic en un artículo, el espacio en blanco ayuda a centrar al usuario en lo que más le importa: el contenido. Fíjate en cómo el espacio extra entre cada línea de texto mejora la legibilidad.

Al igual que en la página principal, se puede ver que la abundancia de espacio en blanco crea una vez más la distancia entre grupos de objetos que sirven para diferentes funciones.

En última instancia, el uso adecuado de los espacios en blanco elimina los residuos en su interfaz. Cada interacción con el usuario, por lo tanto, se siente necesaria para ayudarles a lograr su objetivo. Piense en ello como lo que describimos como “escultura sustractiva”. A medida que eliminas más piedra, creas más espacio y énfasis para tu escultura.

Aclarar 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 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 20 puntos. Los puntos son todos idénticos y lo único que los diferencia es el espacio blanco que los separa. Esta observación del comportamiento tiene varias aplicaciones importantes para el diseño de la interacción, especialmente en lo que respecta a las formas de entrada.

Colocar las etiquetas más cercanas a los campos pertinentes

Como se puede ver en el ejemplo siguiente, la información se comunica mucho más claramente cuando las etiquetas se colocan más cerca de los campos a los que se refieren.

Las investigaciones han demostrado que incluso la más mínima vacilación puede perjudicar la finalización. En este caso, el mero ajuste del espacio aumenta la confianza del usuario para rellenar el formulario, lo que por supuesto mejora la tasa de finalización.

Agrupar los temas relacionados

Cuando se trata de formularios largos, la tarea de rellenarlos puede parecer tan abrumadora, que algunos usuarios abandonan antes de intentarlo. Dividir la información en grupos apropiados puede ayudar a que se sienta más manejable.

Fuente: Elementos de forma de grupo usando efectivamente el espacio en blanco

Sólo con clasificar los 15 campos en 3 grupos se hace más fácil el proceso. 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 pueden aplicarse también 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 clasificados en submenús.

Atrayendo la atención

Como hemos mencionado antes, la falta de otros elementos sólo hará que los elementos existentes destaquen más. Echemos un vistazo a nuestro rediseño de Yelp a continuación:

En el prototipo de alta fidelidad anterior, añadimos mucho espacio en blanco para separar las categorías de la función de búsqueda. De esta manera, los iconos de las categorías son mucho más notables (y menos desordenados) que su actual formato vertical. En combinación con un relleno de color similar a la animación que se activa al desplazar el cursor, la sección de categorías ahora atrae aún más la atención, a la vez que proporciona una mejor retroalimentación al usuario.

Pero debido a que los humanos tienen una atención selectiva que conduce a la visión de túnel como la desconexión de los anuncios de banner (conocida como ceguera de banner), también es necesario saber cuándo se debe reducir y alterar el espacio entre los contenidos.

En última instancia, necesitas entender que el poder del espacio blanco viene de los límites de la atención y la memoria humanas.

Sólo mira la comparación entre Yahoo y Google abajo. Yahoo trata de que el usuario considere demasiadas acciones a la vez. Google entiende que la gente sólo quiere usar los motores de búsqueda para encontrar cosas. Siendo 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 la cabeza, y atiborrarse de información extra sólo hace más difícil completar sus tareas. La cantidad de tensión que un diseño de interfaz crea se llama “carga cognitiva”, y una interfaz de usuario utilizable 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 características. Explicaremos cómo la fragmentación del contenido ayuda a reducir la tensión cognitiva, y luego veremos cuatro consejos adicionales para ahorrar memoria.

Contenido de la fragmentación

Por muy complicado que sea el cerebro humano, sus defectos son sorprendentemente predecibles. Tomemos los estudios de George Miller, por ejemplo en 1956, el científico publicó sus hallazgos de que nuestra memoria a corto plazo puede normalmente retener datos de entre 5-9 elementos un promedio de 7 antes de que el olvido se hunda. Mientras que el número exacto ha sido impugnado, los hallazgos de Miller han demostrado ser efectivos y han llevado a importantes métodos de IxD, incluyendo el “chunking”.

El “chunking” es la práctica de agrupar la información relevante para facilitar su procesamiento y recuerdo. En la imagen anterior, es más fácil recordar el primer grupo de formas porque están desmenuzadas.

La fragmentación no es una regla rígida, sino que depende del contexto. En resumen, el chunking es ideal para las siguientes situaciones:

  • Cuando su producto tiene naturalmente una gran cantidad de información que debe ser memorizada para su uso posterior.
  • La UI debe competir con los estímulos externos por la atención de su usuario, es decir, los sistemas de navegación de automóviles
  • Aplicaciones de aprendizaje electrónico (ya que los usuarios deben recordar la información más tarde)

Por otro lado, no es necesario que se haga un trozo del contenido si se quiere buscar o navegar por él. Hay excepciones, por supuesto, como puedes ver abajo con Etsy.

Mientras que los usuarios no necesitan memorizar las categorías, la fragmentación del contenido a nivel de categoría añade una jerarquía visual. Una vez que se hace clic en la categoría, el chunking desaparece y los elementos aparecen en la lista. No tendría sentido aplicar el “chunking” a nivel de artículo, ya que se puede entender la frustración de navegar sólo 5-6 artículos 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 al “chunking”, los usuarios pueden procesar toda la información mientras se concentran en los “chunks” que más les interesan.

Consejos adicionales para el ahorro de memoria

Aquí hay algunas buenas 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 las páginas de productos
  • Usar enlaces de cupones, no códigos
  • Los menús de navegación largos están bien si son necesarios

Nadie quiere que la experiencia de un producto se sienta como una prueba de cálculo. Reduce la carga cognitiva y la experiencia mejora naturalmente.

Aplicar la Ley del Contexto a los objetos alterables

En pocas palabras, la Ley del Contexto establece que se deben colocar controles junto al objeto de la interfaz correspondiente, al igual que una etiqueta va junto al campo de formulario en blanco. Esto reduce la carga cognitiva porque tan pronto como los usuarios quieren modificar algo, ya pueden ver las acciones disponibles.

En Facebook , el usuario debe recorrer varios menús y páginas diferentes, pasando de Configuración a Configuración de la cuenta a Nombre a Editar , un proceso que no está fácilmente disponible y que debe buscarse primero en la sección Ayuda . Sin embargo, en LinkedIn , lo único que tienes que hacer es hacer clic en el icono del lápiz que aparece junto al nombre de tu perfil.

¿Qué proceso es más simple? ¿Qué prefieren los usuarios?

Al colocar los controles junto al elemento pertinente, el diseñador evita al usuario la molestia de tener que investigar, memorizar y bucear en complejas trayectorias de usuario. Esto también se relaciona con el punto de facilitar los clics porque se quiere minimizar el camino entre el usuario y el objetivo. La simplificación del sistema permite que el sentido común básico triunfe sobre las explicaciones largas e implicadas.

Ahora, llevemos este principio un paso más allá para crear una jerarquía de control. Como puedes ver más abajo en una maqueta de un servicio de mapas en línea, los controles que afectan a un objeto deben agruparse con el objeto (como los controles de zoom). Los controles que afectan a un grupo entero de objetos deben ser asociados con el grupo entero (como las categorías).

Deconstruyamos la imagen anterior:

  • El más amplio nivel de control: Debido a que el cambio de las categorías afectará a toda la imagen del mapa, la interfaz de la categoría envuelve todos los niveles inferiores de control.
  • Nivel medio de control: En este caso, teclear el código postal o la dirección es más específico que seleccionar una categoría. Como esto afecta donde el mapa se amplía, se coloca justo encima del mapa (pero dentro de la interfaz de la categoría).
  • Nivel de control preciso: El zoom del mapa representa el nivel de control más específico. Se sitúa dentro de la imagen del mapa ya que es todo lo que controla.

Por supuesto, el ejemplo anterior es sólo un tratamiento visual. Asegúrate de que tu interfaz tiene una jerarquía que facilita la comprensión de cómo cada control puede afectar a los demás.

Para llevar

El espacio puede quitar o añadir valor a tu contenido, todo depende de cómo lo uses.

Crear demasiado espacio entre los objetos relacionados de la interfaz y su diseño se vuelve frustrante. Amontonar 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 mejor el significado que una explicación verbosa. El espacio tiene mucho peso en el diseño de interacción, lo que dice mucho de algo que técnicamente no es nada.

Jerry Cao es un estratega de contenido de UXPin la aplicación de marcos y prototipos . Para ver estudios de casos visuales de IxD de empresas importantes como Google, Yahoo, AirBnB y otras 30, descarga el libro electrónico gratuito Interaction Design Best Practices: Palabras, Visuales, Espacio .

Foto de la portada: Por qué necesitas el espacio blanco de nuevo

admin

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Publicar un comentario