Gestalt. Principio de región común para diseñar interfaces

gestalt, principio de region comun, principios ux, ui, experiencia de usuario, usabilidad, diseño de interfaces,

En entradas anteriores ya hablamos sobre otros principios de la Getalt aplicados al diseño de interfaces o UI. Dos principios muy importantes para la UX son el de proximidad y el de similitud.

Los principios de la Gestalt capturan cómo las personas dan sentido al mundo que les rodea y a las imágenes que perciben. Definen cómo los seres humanos simplifican y organizan las imágenes complejas que están compuestas por muchos elementos, ordenando cada parte para crear un todo.

 

Principio Gestalt de región común aplicado a la interfaz digital o UI

El principio de región común de la Getalt se puede definir de forma resumida en que los elementos dentro del mismo límite se perciben como relacionados dentro de una interfaz o en el diseño visual del contenido de una pantalla.

Por lo tanto, podemos decir que, el principio de región común explica cómo los elementos que están dentro de un límite se perciben como un grupo y se presupone que comparten alguna característica o funcionalidad común.

Se pueden utilizar formas o colores para dividir la interfaz en regiones o partes, delimitando de esta manera el contenido visual.

Habitualmente en el diseño UI y de interfaces se utilizan colores diferentes de fondo para delimitar y designar lo que es parte del menú, el pie de página, un panel o aside izquierdo para navegar por distintas partes o categorías, etc.

 

1. El Corte Inglés

En la nueva web de El Corte Inglés, podemos comprobar como se aplica el principio de región común en la cabecera o header del site.

Colocando un fondo gris a este contenedor, el usuario percibe que todo lo que incluye sirve para navegar por las distintas partes del site y encontrar o buscar los productos en los que está interesado.

gestalt, el corte ingles,

 

2. Fnac España

Fnac España, utilizando varios colores de fondo, delimita cada parte o sección haciendo que el usuario asimile o perciba que todo lo que se encuentra dentro de cada parte tiene una funcionalidad común y está relacionado entre si.

De esta manera podemos comprobar como los botones que enlazan a cada categoría dentro del contenedor amarillo pertenecen a la campaña que está en vigor en ese momento.

Se diferencia claramente el menú de navegación y el header o cabecera del site que sirven para acceder a cada una de las partes de la web o buscar y encontrar productos.

Y por último, se diferencia los valores añadidos que Fnac quiere destacar tras el fondo de color más oscuro.

gestalt, fnac,

 

3. Amazon

Por ejemplo en Amazon, al igual que en otros muchos sitios, podemos comprobar como usar un color distintivo para el footer o pie de página que ayuda a señalar que todos los enlaces en esta área pertenecen a un grupo y de esta manera el usuario unifique el contenido visualmente.

gestalt, amazon,

El principio de región común de la Gestalt podemos encontrarlo en casi todas partes dentro del diseño de interfaces digitales. Agrupar elementos en un contenedor es una señal visual sólida que se puede utilizar cuando el espacio en blanco por sí solo no es suficiente.

 

Créditos

La imagen de cabecera es de Unsplash
Gestalt. Principio de proximidad para diseñar interfaces
Gestalt. Principio de similitud para diseñar interfaces