Lección 1 de 0
En Progreso

4.1 : Los beneficios de un enfoque impulsado por la Gestalt

29 junio, 2022

Uno de los principales beneficios de adoptar un enfoque basado en Gestalt para el diseño web es la capacidad de imponer una estructura en sus pantallas que ayude a los usuarios al intentar localizar información y elementos visuales.

Estructura

Los principios de la Gestalt de la percepción visual nos ayudan a apreciar y desarrollar una conciencia de las diversas formas en que el sistema visual influye en nuestra visión del mundo. La percepción visual está en sintonía con la estructura, y tal es el efecto del sistema visual en nuestra percepción del mundo que inconsciente e instantáneamente detectaremos la estructura, la forma y la organización donde los eventos son realmente aleatorios. Por ejemplo, si tuviéramos que esparcir una bolsa de canicas en el piso y un pequeño número aterrizara muy cerca, las percibiríamos como agrupadas.

La capacidad de organizar la información visual en una representación coherente y estructurada de nuestro entorno y los elementos que contiene, es vital para todos los aspectos del comportamiento humano. Como afirma Jeff Johnson en Designing With the Mind in Mind (2010), “Percibir la estructura en nuestro entorno nos ayuda a dar sentido a los objetos y eventos rápidamente”. En un mundo en constante cambio y con solo una fracción de segundo para interpretar la información visual antes de interactuar con nuestro entorno, es imposible sobreestimar la importancia de un sistema visual capaz de proporcionar una representación precisa de objetos y eventos al instante.

La capacidad de analizar información visual y convertirla en una representación mental precisa en un instante nos permite escanear rápidamente nuestro entorno en busca de elementos que son necesarios para nuestros propósitos y objetivos actuales. Así, solo dedicamos una pequeña cantidad de tiempo y recursos de atención a elementos irrelevantes o superfluos durante el proceso de búsqueda. Nuestra capacidad para escanear rápidamente e identificar información, herramientas, elementos, imágenes o cualquier otro elemento significativo o personalmente relevante también se aplica a la forma en que percibimos e interactuamos con las interfaces de usuario, como los sitios web.

La percepción visual puede estar sorprendentemente sintonizada con la estructura, pero esto no significa que la calidad o claridad de la información visual no nos afecte. Por ejemplo, cuando las pantallas visuales están mal organizadas, con elementos colocados al azar, la velocidad con la que podemos identificar los elementos relevantes se ve afectada negativamente. Por lo tanto, el tiempo que tomamos para establecer qué elementos son relevantes dentro de una pantalla y seleccionar uno o más de ellos depende en gran medida de la implementación de la estructura y su efectividad.

Considere la experiencia de preparar alimentos en una cocina desconocida; Puede que al principio no sepamos dónde está todo, pero si todos los cubiertos están en un cajón, la vajilla en un armario y las cacerolas en otro, pronto podemos ubicar los artículos que necesitamos y podemos centrar nuestra atención en un cajón en particular o armario cuando queremos un artículo específico. Al ordenar y clasificar los artículos, el cocinero solo tiene que recordar una pequeña cantidad de asociaciones de categoría de armario / cajón. Por ejemplo, cajón de la izquierda = cubiertos, armario inferior = vajilla y armario a la altura de los ojos = cacerolas. Por lo tanto, cuando el cocinero quiere un cuchillo, sabe que pertenece a la categoría de cubiertos, por lo que puede dirigir instantáneamente su atención al cajón de la izquierda e ignorar todas las demás ubicaciones potenciales.

Este es un ejemplo bastante simplista de estructura y orden, pero los métodos centrales siguen siendo los mismos: organizar elementos similares juntos, agrupar elementos por categoría o función, separar diferentes grupos para evitar confusiones y ordenar elementos según la frecuencia de uso. Estos métodos de estructuración se aplican para formar grupos, pero dentro de estos grupos los elementos deben organizarse para respaldar la identificación instantánea, lo que requiere una comprensión de las tareas que las personas probablemente realizarán.

Estructura en Diseño Web

Los mismos métodos de estructuración mencionados anteriormente se aplican al diseño web. El sitio web de Jewson, una empresa de suministros de construcción del Reino Unido, muestra cómo se utiliza la estructura en el diseño web. Todos los patrones de diseño de la interfaz de usuario son ejemplos de métodos de estructuración, y varios de estos patrones se han utilizado con buenos resultados en el sitio web de Jewson. En primer lugar, la barra de navegación de nivel superior sirve como medio para agrupar las opciones de navegación; su similitud y proximidad hacen que las opciones aparezcan agrupadas en el momento en que el usuario llega al sitio.

Moviéndose más abajo en la página de inicio, se asignan otras opciones a imágenes específicas, que están ligeramente separadas pero dispuestas en una fila, lo que nuevamente implica que estos elementos están agrupados. Justo debajo de estas opciones hay una presentación de diapositivas de los productos más populares del sitio; esta es una categoría que consta de varios productos que no necesariamente pertenecerían al mismo grupo, pero en esta ocasión comparten una relación significativa (es decir, los artículos comprados con mayor frecuencia). Al colocar estos productos en un solo patrón de diseño de interfaz de usuario, existe un grupo claro y perceptible al instante. Si los productos más populares se mantuvieran en sus propias categorías específicas, la estructura no respaldaría la tarea, ya que el usuario tendría que ir a varias categorías para establecer artículos populares. En la siguiente fila de elementos gráficos,

Los cuatro grupos (‘Productos de madera’, ‘Sostenibilidad’, ‘Participe’ y ‘Cuentas de Jewson’) están claramente separados con el uso de espacios en blanco entre fondos de color gris claro. Los fondos grises delinean cada uno de los grupos, ejemplificando la ley de región común para ayudar a los usuarios a identificar y distinguir grupos específicos de elementos. Estos grupos se separan de acuerdo con un conjunto general de tareas, como solicitar una cuenta comercial o conectarse con la empresa a través de las redes sociales. Dentro de estos métodos de estructuración, los elementos se organizan de tal manera que el usuario puede establecer que están agrupados, pero están espaciados para garantizar que haya pocas posibilidades de confundir elementos y menos posibilidades de que los usuarios seleccionen la opción incorrecta.