Lecciones del diseño de interfaz de Airbnb
Soy un admirador de los diseños de interfaz limpios.
Ya sabes, las interfaces visualmente atractivas, altamente organizadas y bien espaciadas. Aquellos que transmiten tranquilidad mientras desplazas la pantalla, encontrando fácilmente lo que necesitas, como una estantería bien organizada.
Cuando pienso en tales interfaces, me vienen a la mente Apple y Airbnb. También existen muchos más ejemplos.
Pero no importa cuán diferentes puedan parecer estas interfaces, todas tienen una cosa en común: el uso inteligente de los principios de la Gestalt.
En este artículo, exploraremos cinco conocidos principios de Gestalt examinando cómo Airbnb los utiliza de manera táctica en su interfaz para crear una experiencia del usuario encantadora.
¿Listo? Echemos un vistazo más de cerca a la interfaz de Airbnb.
Pero espera, ¿qué son los principios de Gestalt?
Por definición, los principios de Gestalt son leyes y principios de percepción visual que describen cómo los humanos perciben y organizan los elementos visuales en patrones significativos. Estos principios nos ayudan a dar sentido al mundo que nos rodea.
Imagina que tienes algunos objetos aleatorios, una mezcla de formas redondas y cuadradas, y necesitas agruparlos. ¿Cómo los agruparías?
Permíteme hacer una suposición no muy arriesgada. Pondrías los objetos redondos en un grupo y los cuadrados en otro.
Eso es un principio de Gestalt en práctica. Tu mente se centra en la similitud, que es… bueno… la forma, para organizar los objetos de una manera más fácil de entender y procesar.
Has estado utilizando los principios de Gestalt toda tu vida sin saberlo.
Recuerda los juegos de infancia que jugabas, o quizás aún juegas, y notarás que la mayoría incorpora uno o más principios de Gestalt.
Permíteme mostrarte a qué me refiero:
Rompecabezas
Si alguna vez has armado un rompecabezas, has aplicado la ley del cierre. Solo que no lo sabías en ese momento.
Piénsalo.
Solo tenía pequeños fragmentos de una imagen grande, y mentalmente tenía que “cerrar” los espacios entre las piezas del rompecabezas, ensamblándolas para crear una imagen coherente y completa.
Eso es la ley de cierre en acción.
juego de clasificación
¿Recuerdas separar las bolas rojas de las azules (o alguna otra variación de este juego)? Cuando lo hacías, estabas utilizando la ley de similitud. Agrupaste los objetos en función de características compartidas.
Podría seguir y seguir, pero ya captas la idea.
Bueno, si ya conoces los principios de Gestalt. Para los no iniciados, podría haber estado escribiendo palabras sin sentido.
Aclaremos esa confusión, ¿de acuerdo?
Explorando algunos principios de Gestalt y sus aplicaciones en la interfaz de Airbnb
1. Similitud
Tendemos a percibir los objetos con atributos físicos similares como un grupo unificado.
En la imagen de arriba, los 12 círculos son iguales en todos los aspectos excepto en el color. Nuestro cerebro capta esto y agrupa los objetos en función de la similitud en color. En lugar de percibir la imagen como un grupo de 12 círculos (o tres filas de cuatro círculos), es más probable que lo veamos como columnas alternadas de dos colores.
Veamos cómo Airbnb utiliza este principio para agrupar elementos:
Los diseñadores utilizaron la misma tipografía, color y estilo de icono en todos los elementos destacados, transmitiendo que todos desempeñan una función similar, es decir, navegar por las categorías. El contraste entre estos elementos y los elementos circundantes refuerza aún más la distinción.
2. Figura/Fondo
Instintivamente percibimos los objetos como figura o fondo. La figura es el foco principal, mientras que el fondo es cualquier cosa que no sea el foco principal, como el fondo.
En la imagen de arriba, nuestra mente percibe el círculo como figura y se enfoca en él porque tiene una forma clara y distintiva y parece estar delante del rectángulo.
Veamos cómo Airbnb utiliza este principio para llamar nuestra atención sobre elementos importantes:
Una vez que haces clic en el área de búsqueda de Airbnb, se amplía para mejorar el enfoque. Además, la superposición en la imagen de fondo dirige tu atención hacia el área de búsqueda (primer plano).
3. Continuidad
Percibimos elementos en una línea o curva como más relacionados que elementos que no están en una secuencia definida.
En la imagen de arriba, es más probable que asumamos una relación entre los elementos en una línea recta.
Veamos cómo Airbnb utiliza este principio para guiar a los usuarios:
Observa cómo las tarjetas se disponen horizontalmente para formar un patrón, guiándonos sin esfuerzo a través de las listas.
4. Proximidad
Cuando los objetos están cerca unos de otros, es más probable que los veamos como un grupo en lugar de partes individuales.
Nada en la imagen de arriba indica una relación (o falta de ella) entre las columnas, excepto la distancia.
Veamos cómo Airbnb utiliza este principio para agrupar elementos:
Cada foto en miniatura en la imagen de arriba está cerca de su ubicación correspondiente, distancia, fechas y precio. Como resultado, nuestro cerebro percibe esto como una entidad única, separada de los elementos circundantes.
5. Región común
Cuando vemos elementos dentro de un límite claramente definido, los percibimos como un grupo.
Es probable que percibas una conexión más fuerte entre B y C en la imagen de arriba, a pesar de que están más separados que A/B y C/D. ¿Por qué? Porque nuestras mentes tienden a percibir una similitud entre los elementos dentro de un borde.
Ahora, veamos cómo Airbnb utiliza el principio para resaltar elementos:
El borde que rodea el formulario de reserva de Airbnb indica que los elementos que contiene pertenecen a un grupo. Y el uso inteligente de las sombras hace que el grupo se destaque aún más en comparación con su entorno.
Pensamientos finales
Y ahí lo tienes: cinco aplicaciones de los principios de Gestalt en la interfaz de Airbnb.
Adelante, sé un diseñador inteligente y roba estos trucos de uno de los mejores del juego. Tus usuarios te lo agradecerán.
