Psicologia + design: princípios de Gestalt que você pode usar como soluções de design

Eu sempre acreditei que Psicologia e Design compreendem a Experiência do Usuário. Nossa profissão implica empatia sempre que lidamos com necessidades humanas cujo objetivo é resolver. E enquanto eu continuo a mergulhar profundamente em onde a Psicologia entra na imagem do Design, eu tropecei nos Princípios da Gestalt.

Então, o que é um Princípio da Gestalt?

A psicologia da Gestalt é uma escola de pensamento que examina a mente e o comportamento humano como um todo. Ao tentar entender o mundo à nossa volta, a psicologia da Gestalt sugere que não nos concentramos apenas em cada pequeno componente.

Em vez disso, nossas mentes tendem a perceber objetos como parte de um todo maior e como elementos de sistemas mais complexos. Essa escola de psicologia desempenhou um papel importante no desenvolvimento moderno do estudo da sensação e percepção humanas.

Fonte: verywellmind

Esta jornada de descoberta do Princípio da Gestalt levou-me a uma compreensão completa de como posso incorporar esses princípios à minha trilha de design. Assim, neste artigo, compartilharei com você como usei esses Princípios como minhas soluções de design para os seguintes sites e aplicativos que encontrei:

Isenção de responsabilidade: As soluções de design a seguir fornecidas são exemplos de soluções usando Princípios de Gestalt. Alguns problemas de design que você verá precisarão ser redesenhados, mas optei por manter o design original e torná-lo melhor usando o Gestalt. Assim, se você tiver outra solução de design, fique à vontade para comentar sua resposta. Também não possuo todas as imagens utilizadas. CTTO ?

1. Proximidade

A ideia de que, quando os objetos são colocados próximos uns dos outros, esses objetos são vistos como um grupo e não como vistos individualmente. Fonte: Blog Hubspot

Um exemplo de como podemos usar a proximidade na solução de problemas de projeto pode ser visto abaixo:

Título e link estão longe um do outro

Como podemos ver, o título da categoria (reservas on-line e cruzeiros) e links (saiba mais) estão muito distantes um do outro, o que faz com que eles pareçam elementos flutuantes. Se vamos criar um wireframe deles, ficaria assim:

wireframe

O componente inteiro está fora de contexto porque nada vincula a imagem, título e link. Assim, a proximidade vem como nossa solução. De ter três elementos individuais flutuando no espaço sideral para transformá-los em um componente inteiro –

Título e link alinhados ao centro

Em nossa solução de Design usando Proximidade, removi a distância entre Título e Link, aproximando-os usando o alinhamento central. Desta forma, somos capazes de juntar os 3 elementos (Imagem, Título, Link), o que nos ajudou a resolver nosso problema de contexto ausente.

2. Similaridade

A similaridade ocorre quando os objetos parecem semelhantes uns aos outros. As pessoas geralmente as percebem como um grupo ou padrão. Fonte: graphicdesign.spokanefalls.edu

No problema de design A abaixo, apontei a cor azul do texto. A razão para isso é, na interação do usuário, Usuário de Dados Pesados e Maximizador Flexível estão relacionados – eles são, na verdade, interface de usuário de Guias ?

Design A

Então, o que torna esses dois elementos não relacionados entre si?

Resposta, muitas coisas. Mas em uma nota mais simples, nada liga esses dois elementos juntos, o que os faz parecer individualmente sozinhos. Como podemos ver, é bastante óbvio que as cores da marca da interface são verdes, mas de repente uma cor de texto azul aparece do nada. Assim, a Lei da Similaridade vem em:

Como nossa solução, eu criei similaridade tornando o texto colorido em verde e adicionando preenchimento esquerdo e direito ao nosso estado ativo, para que ele fique mais próximo da outra guia, Flexible Maximizer.

Este Problema de Design A, pode ser melhorado com o redesenho (isso realmente precisará ser redesenhado) para que ele possa simplificar ainda mais a experiência do usuário. Mas por enquanto, vamos apenas dar o mínimo passo mínimo para torná-lo melhor usando Similarity ?

Há também outra maneira de incorporar Semelhança – Abordagem 2:

Design B

Agora, na Abordagem 2, vamos observar suas partes essenciais – o sistema Type, que são:

  • Título: 40px Regular
  • Corpo do texto: 20px Regular
  • Link de texto: 20px regular

À primeira vista, podemos pensar que este é apenas um sistema de tipos comum que poderíamos ignorar. Mas à medida que olhamos mais de perto, o problema ocorre entre o texto Corpo e o link Texto, ambos estão compartilhando o mesmo sistema Tipo (20px Regular), o que pode levar à confusão do usuário e à falta de confiança do usuário. Enquanto navegam pelo site, eles podem hesitar, fazer uma tentativa e erro se o que eles estão interagindo é um texto do corpo ou um link de texto.

Ok, então como resolvemos isso?

Como nossa solução de similaridade, precisamos ajustar um pouco o sistema Type:

  • Título: 40px Regular
  • Corpo do texto: 20px Regular
  • Link do ícone de texto: 20px negrito

Adicionamos contraste em nosso tipo, tornando o link de texto mais arrojado e um ícone de dominância visual. Ao fazer essas alterações, criamos semelhança em todo o link do Ícone de texto e tornamos a carga cognitiva do nosso usuário mais rápida.

Dica rápida fora do tópico: Ao criar um sistema Type, escolha uma fonte que tenha vários pesos (thin, light, regular, bold etc.). Nosso objetivo não deve ser vários tamanhos de fonte com poucos pesos para melhor contraste, mas para ter alguns tamanhos de fonte com vários pesos. Para mais clique aqui

3. Ponto Focal

Os pontos focais são áreas de interesse, ênfase ou diferença dentro de uma composição que capturam e prendem a atenção do espectador. Fonte: Revista Smashing

Em Focal Point, mostraremos dois problemas de design em ação:

do site de telecomunicação

No exemplo acima, não há problema algum em como os elementos foram dispostos. Mas é a hierarquia de informações que temos – ação primária e ação secundária compartilha o mesmo sistema de botões.

Podemos ver que o objetivo dessa interface é fazer com que os usuários façam o download do aplicativo e que o FAQ seja um documento de apoio para dar aos usuários uma melhor compreensão do aplicativo (e, sim, duvido que eles queiram ler as perguntas frequentes) para baixar) .

Portanto, como nossa solução:

Solução de Design A

Usando o ponto focal, mudei a interface do botão View FAQs para um botão de borda, para dar ao botão Download App o efeito spotlight de que ele precisa. Também intercambiei a ordem deles, tendo a ação Primária à direita e secundária à esquerda. A razão para isso é seguir o diagrama de Gutenberg. Isso diz que:

Com base nesse teorema, os dois pontos à direita (no primeiro ponto do “Z” e no final dele) são onde os visitantes esperam agir. Portanto, não há dúvida de onde seu call-to-action pertence em termos de direito ou esquerdo. Deve sempre estar no lado direito da tela.

Para mais informações, você pode conferir aqui e aqui ?

Também só para adicionar algo fora de tópico, problema de design de botão comum, normalmente podemos ver é, criando um tipo de interface de botão para diferentes funcionalidades (botões de preenchimento para Inscrições, Cancelar, Carregar mais, Leia mais etc).

Não é bom que isso crie consistência?

Sim, todos nós sabemos que a consistência desempenha um grande papel no design UX, mas existe o que chamamos Consistência por Funcionalidade. Se criarmos o mesmo tipo de design de botão para atender diferentes funcionalidades, isso pode levar a uma experiência inconsistente do usuário e também afetar os objetivos de negócios de nossos clientes.

Fora do tópico rápido Dica: Consistência do design do botão = Funcionalidade do botão.

Agora, passando para a aplicação da abordagem 2:

Ambos os botões têm a mesma hierarquia visual

O mesmo problema ocorre neste design. Os botões OK e Cancelar compartilham o mesmo estilo de design, o que requer que eles leiam minuciosamente os rótulos dos botões para que eles possam saber quais são para Envio e Cancelamento.

E usando o Focal Point, nós diminuímos seu tempo lendo os rótulos, o que nos leva ao Design Solution B:

Nós trocamos os botões e renomeamos a cópia dos botões de OK para Submit, para torná-la mais contextual e para informar aos nossos usuários que uma ação ocorrerá assim que ele clicar no botão.

4. Região Comum

Em vez disso, nossas mentes tendem a perceber objetos como parte de um todo maior e como elementos de sistemas mais complexos. Essa escola de psicologia desempenhou um papel importante no desenvolvimento moderno do estudo da sensação e percepção humanas.

0

Os recursos como Spotify, Disney, Netflix não são agrupados com sua categoria e parecem ser elementos flutuantes. E para tornar isso muito mais simples, criar um wireframe com isso seria assim:

A partir do wireframe acima, é mais provável que numerosos elementos individuais do que 4 componentes inteiros. Assim, como solução, o Princípio da Região Comum:

Nosso novo wireframe com o Princípio da Região Comum

No wireframe, usamos a borda da caixa para incluir todos os recursos em suas respectivas categorias, de modo que eles sejam vistos como um em vez de elementos individuais. E abaixo está a implementação:

Além da caixa delimitadora, substituímos o * Free Netflix por seis (6) meses para o Plans 999 e para cima com um ícone de informação no lado superior direito do elemento Netflix (ícone amarelo colorido) para criar mais espaço para a lista de recursos, uma vez clicada, uma dica de ferramenta será exibida.