Si te sientes familiarizado con la Gestalt y tus leis, debes notar cuánto esa teoría se utiliza constantemente en la creación de interfaces. Se ainda não conhece, mas está acostumado a lidar diariamente com diferentes sitios y aplicaciones, você já pode ter visto (con más frecuencia do que imagina) una Gestalt aplicada por aí, mesmo sem saber.
É que a Gestalt dita a forma como nós iremos, mesmo que inconscientemente, comprende todo o que estamos visualizando en una tela. De que forma vamos a interpretar un conjunto o agrupación de elementos contenidos en una interfaz, es un ejemplo disso.
Por eso, resolvi trazer para este artículo un profundo conocimiento sobre la definición de Gestalt, sus leyes y formas que podemos aplicar estos conceptos en la construcción de interfaces que son más significativas y de más fácil entendimiento para los usuarios.
La palavra Gestalt tem origem alemã e significa “forma”. Então, essa teoria da forma, como também é conhecida, nos diz que nosso cérebro siempre irá percibir un objeto como inteiro y completo, antes de distinguir sus partes separadamente.
De acuerdo con la Gestalt, a nuestra percepción de algunas de estas partes, siempre será diferente la percepción del conjunto. Un ejemplo es una sensación de movimiento que nos separamos con luzes pisca pisca.
Luzes de natal vía @Giphy.
Existen diseños de tela que además de muchos bonitos, demuestran el talento y la creatividad del diseñador. Estos estilos de diseño, aplicados ampliamente divulgados en carteras de personas y en sitios como Dribbble, no son tan populares en el mercado.
Isso acontece porque son estilos desconocidos entre el público también las grandes empresas. La belleza y la creatividad son, igualmente, importantes, pero es preciso que una interfaz sea familiar y de fácil comprensión para sus usuarios.
A Gestalt nos muestra que existen algunos principios organizacionales que son esenciales para auxiliar el cerebro humano en la estructura de las percepciones visuales. San Eles:
Figura-fundo
É a maneira como organizamos a nuestra percepción de lo que se está viendo en el primer plano y en el segundo plano. Veja algunos ejemplos:
Foto por Hybrid vía Unsplash
Na imagem acima, você consegue distinguir fácilmente a folha, que está em primer plano, da imagem embaçada de um arvoredo, em segundo plano.
Tela de carga de la aplicación móvil de Spotify
De esta forma, podemos percibir claramente la diferencia entre el logo de Spotify y el plano de fondo negro, en la tela de carga acima.
Los objetos en el primer plano estarán automáticamente en la basura. Ya el segundo plano puede ser ilimitado (como el plano de fondo negro de la tela de Spotify) o vagamente definido (como el arvoredo embaçado no fondo del primer ejemplo).
Otro ejemplo de aplicación de Figura-Fundo en una interfaz es una notificación sobre el contenido de una tela.
Representación de la Figura-Fundo en una interfaz genérica
A lei de Pregnância (Pragnanz)
Pragnanz é uma outra palavra proveniente de alemão e significa precisión, concisión. Portanto, a lei de Pregnância, também conhecida como a lei da simplicidade, diz que siempre intentaremos organizar nuestra percepción de manera simple.
Independientemente de su complejidad, imágenes y objetos siempre serán interpretados de manera más simple posible. No en el diseño de interfaces, esto puede significar dificultades para que el usuario entienda o necesite hacer una tela, caso ela contenga un gran número de información. Observe una aplicación de este concepto en nuestros ejemplos:
Interfaz genérica
En la interfaz genérica (e caótica) acima, no es difícil percibir una confusión que cualquier usuario pueda sentir para encontrar una acción principal que necesita realizar.
Interfaz de Duolingo
Já na interfaz de Duolingo, una cantidad reducida de información guiam o usuário directamente para la acción principal del sitio.
Otros buenos ejemplos concretos son la simplicidad que existe, como sitios de búsqueda como Google, Yahoo y Bing.
A lei da similitude
É común que nuestro cerebro busque por padrões. Por causa disso, acabamos por interpretar objetos semelhantes como pertencentes a un mismo grupo. Veja:
Representação da Lei da Similitude
Apenas a mudança de cor entre os quadrados da imagem acima é suficiente para pasar la sensación de que ellos não pertencem ao mesmo grupo ou não possuem o mesmo significado.
Se estivesse definido que, por ejemplo, cada quadrado representa um aluno em uma sala de aula, eu poderia dizer que os quadrados em amarelo estão representando alunos que prefieren matemática, enquanto os quadrados da cor laranja representam os alunos que prefieren portugueses.
Para que esa sensación seja causada, basta que alguna diferencia seja percibida entre los elementos. Ao invés de cores diferentes, os quadrados poderiam ter tamanhos diferentes, por ejemplo. Veja este concepto aplicado a una interfaz:
Interfaz del Banco Inter
Interfaz del Mercado Libre
Na primeira tela, do Banco Inter, o menu é um conjunto. Pero observe que el elemento “O Inter”, cuando se selecciona, posiblemente un fondo acinzentado, que se destaca das otras opciones. Esto le muestra al usuario que aquel es una opción del menú que está navegando.
Ya en la segunda tela, en Mercado Libre, una oferta que el usuario está seleccionando se vuelve mayor en comparación con otras, desbloqueando información adicional sobre el producto de interés.
Ley de proximidad
Otra forma de indicar que determinados objetos pertenecen a un mismo grupo, é através de la proximidad. Objetos próximos y otros, automáticamente se perciben como partes de un mesmo entero. Observe el ejemplo:
Representación de la Ley de Proximidad
Dessa vez os objetos da imagem acima apresentam, além de um mesmo tamanho e formato, a mesma cor. Ainda assim, o nosso cérebro tiende a percibir os quadrados da esquerda como um grupo e os quadrados da direita como um outro grupo, diferente e independiente do primeiro.
Un ejemplo común de percepción en interfaces y menús. En la interfaz del Banco Inter, já citada, apesar de cada una de las opciones representan algo diferente, ellas están ordenadas lado a lado, con una proximidad padronizada.
Observe este otro menú:
Menú presente en la interfaz de 99
Por causa de la Ley de Proximidad, los objetos “Motorista”, “Passageiro”, “Empresas”, “99 Food”, “Segurança” y “Ajuda” demuestran que hacen parte de la composición de un mesmo integral: Oh menú.
Já a logo da empresa eo botão “Quero ser motorista”, son objetos dispuestos con un espacio mayor, porque no participan en este mismo grupo.
Ley de continuidad
Aún así, como intuito de relacionar objetos entre sí, también podemos disponer esos objetos a lo largo de las líneas, sejam elas retas ou curvas. Esto pasó a una impresión visual de continuidad.
Representação da Lei da Continuidade
Ao terminar de preencher o primeiro campo de un formulario bien construidopor ejemplo, usted difícilmente tendrá dudas sobre qué campo deberá ser preenchido em seguida, correto?
Formulario presentado en la interfaz de MaxMilhas
En la interfaz de MaxMilhas, ejemplificada acima, el usuario tiende a preencher primeiro o campo “Origem”, seguido de pelos campos “Destino”, “Ida” y “Volta”, respectivamente.
Además, has tenido que ver objetos incompletos en la secuencia de alguna lista. La intención es mostrar que existe una continuidad de elementos.
Lista de series en la interfaz de Netflix
En la lista acima, por ejemplo, un pedaço do último título à direita foi colocado ali propositalmente. Isso indica al usuario que existem mais itens naquela lista, “Quem matou Sara?” No es el último.
Sem aquella pequeña parte del próximo título de la lista, o usuário podría tener una ilusión de plenitud y, en tal caso, el conteúdo adicional jamais seria descoberto.
Ley de Simetria
La idea de que simetria es sinónimo de beleza já é bem popular. Mas, segundo a Gestalt, a simetria também pode trazer outras vantagens visuais.
Representação da Lei da Simetria
Además de mejorar visualmente, los elementos simétricos son armoniosos y, por lo tanto, de más fácil interpretación. Esto no significa que su interfaz necesite ser 100% simétrica, pero algunas realmente sí. Pero es necesario entender la importancia de la simetría para utilizarla a su favor.
Representación de la simetría en una interfaz genérica
Un elemento asimétrico pode se destacar em meio a una interfaz simétrica. Este elemento en la batalla podría ser un botón de llamada a la acción, por ejemplo. Con criatividade é possível sair do óbvio, mas siempre tomando el cuidado necesario para mantener una buena usabilidad y armonía del proyecto.
A Lei do Fechamento
Muchas veces, nuestro cerebro no necesita una información completa para atribuir determinada forma a un objeto. Observar:
Representação da Lei do Fechamento
Es normal visualizar un cuadrado en la parte central de la imagen acima. Mas percibo que no existe una fechamento para esse quadrado. O su cerebro o está completando por cuenta propia.
Écomum a utilização dessa lei em ícones de aplicativos y logomarcas, como nos ejemplos abaixo:
Logo de la marca Miu Miu, disponible aquí
conjunto de iconos
Lo ideal es utilizarlo para simplificar la información. El usuario no necesita iconos complejos para entender el mensaje que desea enviar.
Ley del Destino Comum
Nós também costumamos perceber objetos que “andam” em conjunto e possuem um mesmo destino, como pertencentes a um mesmo grupo. Un ejemplo común de esto es lo que se aplica a las interfaces, como el comercio electrónico.
Ejemplo de una bolsa de compras virtual sin sitio Dafiti
Cuando el usuario está pasando por una tienda en línea y decide comprar más de un artículo, comienza a agregar los objetos deseados a una lista de deseos o a un carrito virtual.
Esto también se puede aplicar cuando usted ofrece la opción de seleccionar muchos elementos para realizar una acción en común con ellos, como eliminar muchos correos electrónicos de una sola vez.
conclusión
A Gestalt surge no design de interfaces como uma ferramenta capaz de auxiliar no entendimento do que pode ser ambiguo o muy difícil de interpretar en una tela.
A partir de la aplicación de dos conceptos vistos en este artículo, se pueden mejorar las interfaces, guiando o usuário nas tarefas que ele necesita realizar y transmitir, la mejor forma posible, como nuestras intenciones como diseñadores.
É claro que cuando se trata de dos usuarios y sus diferentes percepciones, como coisas podem se tornar imprevisíveis y jamais podemos asumir que sabemos de todo. Por esta razón, las pruebas de usabilidad nunca son innecesarias o sustitutivas.
Referencias
O material que me auxiliou na escrita deste artigo (e que pode ser útil para os seus estudos también):