4.2 : Percepción de grupo: Gestalt y diseño web

Al apreciar los sesgos perceptivos que subyacen a la capacidad humana de agrupar elementos visuales para formar elementos completos y significativos, podemos diseñar de acuerdo con la naturaleza de la percepción visual.

Los beneficios de un enfoque impulsado por la Gestalt

La mayoría de los sitios web ejemplifican la mayoría de las leyes de agrupación Gestalt, y el sitio de CNN no es una excepción. Las leyes de proximidad, similitud, continuidad, cierre y simetría se han aprovechado para ayudar a los usuarios a identificar grupos específicos de opciones y noticias. Estas leyes de organización perceptiva también se han empleado para garantizar que los grupos sean fáciles de distinguir.

La disposición de los distintos grupos afecta la velocidad a la que los usuarios pueden identificar primero su grupo / categoría deseada y luego identificar el elemento más relevante dentro de ese grupo / categoría. Por lo tanto, las leyes de la Gestalt ayudan al usuario a dirigir y centrar su atención en los aspectos más personalmente relevantes de cada página web, pero el diseño juega un papel importante en el apoyo o en la lucha contra estos sesgos perceptivos.

Tener en cuenta las leyes de agrupación Gestalt es esencial al diseñar cualquier pantalla visual, pero esto es especialmente importante para los diseñadores web, ya que la usabilidad de un sitio generalmente está directamente relacionada con los ingresos por ventas. Si un usuario llega a su sitio y la información parece confusa o hay una estructura imperceptible, probablemente buscarán en Internet una alternativa mejor en lugar de intentar abrirse camino a través de una pantalla deficiente.

Adoptar un enfoque de diseño impulsado por Gestalt puede ayudarlo a obtener los conceptos básicos correctos y limitar la cantidad de cosas que los usuarios encuentran problemáticas. Uno de los principales beneficios de centrarse en las leyes de la Gestalt es la percepción de cómo ciertos arreglos pueden influir en la percepción del grupo.

Las leyes de la Gestalt en acción

Para apreciar cómo los diseños web pueden respaldar nuestros sesgos de percepción, identificaremos algunas de las características presentes en la página de inicio de CNN que permiten una percepción grupal rápida.

Ley de similitud

• Hacer coincidir las características superficiales de los elementos relacionados para fomentar la percepción instantánea de los elementos agrupados es un método simple y común de instituir la estructura. Hay muchos ejemplos de esta ley en el diseño de CNN, de arriba a abajo:
• Todas las opciones de la barra de navegación de nivel superior están en la misma fuente, tamaño de letra, color, fondo y alineación.
• Las noticias principales se muestran como imágenes en una fila con una breve leyenda de texto debajo.
• Categorías amplias de opciones, como ‘Buscar MH370’, ‘Lo último’ y ‘Cinco historias que no debe perderse’, todas comparten las mismas características (por ejemplo, cada categoría tiene un encabezado de título con el mismo estilo, se muestran todas las noticias junto a una viñeta, y se utiliza la misma fuente en todas las categorías diferentes).
• Se utiliza el mismo estilo para todas las subsecciones que pertenecen a la categoría “Profundizar”.

Ley de proximidad

La proximidad de elementos agrupados entre sí y su proximidad a elementos que no pertenecen al mismo grupo pueden influir en la capacidad del usuario para identificar un elemento en particular. En la mayoría de los sitios web, el diseñador se ocupa de una cantidad limitada de espacio para adaptarse a todas las funciones necesarias. Sin embargo, cuando todos los elementos se colocan en el mismo espacio sin nada que los separe según su función, significado o relevancia, la pantalla es muy difícil de escanear. Afortunadamente, los diseñadores de CNN han utilizado la proximidad para separar elementos de acuerdo con las necesidades mencionadas anteriormente. Algunos de estos casos son los siguientes:

• Las opciones de los menús de navegación están separadas, pero claramente agrupadas debido al principio de similitud.
• Los elementos relacionados con la misma noticia se organizan en estrecha proximidad, mientras que se distancian de otras categorías distintas.
• Se utilizan espacios en blanco entre imágenes para evitar confusiones.

Ley de la simetría

Hay varios ejemplos en los que el sitio web de CNN ha utilizado la simetría para ayudar a la percepción del grupo; algunos de ellos son los siguientes:

• La sección ‘Mercados’ muestra una simetría horizontal, con tres figuras diferentes del mercado financiero mostradas con el mismo estilo y separadas por la misma cantidad de espacio.
• Las últimas doce categorías están organizadas en tres filas de cuatro, con ambos lados equilibrados e iguales. Los cuadros de categoría son del mismo tamaño y estilo, por lo que dibujar una línea vertical en el centro de estas categorías demostraría claramente la simetría entre las dos mitades.

Ley de Continuidad

El logo de CNN es un claro ejemplo de continuidad, con el diseño jugando en la forma en que estamos predispuestos a seguir caminos suaves al ver ciertas formas. Todas las líneas están enlazadas, creando una figura continua y llevándonos a percibir la forma deseada: las letras ‘CNN’.

Ley de cierre

El globo que acompaña al logotipo de CNN representa el principio de cierre, que es el sesgo perceptivo de cerrar figuras abiertas para formar objetos completos y significativos, en lugar de percibir las figuras como disociadas y sin sentido.