Você está na página 1de 37

Princípios da Gestalt

em UX Design -

traduzido por
in brunadecastroalves
Princípio da proximidade

O princípio da proximidade diz que percebemos que os elementos


que estão próximos um do outro parecem estar relacionados. Mesmo
se houver mais objetos, os que estão mais próximos parecem ser mais
correlativos do que os elementos que são colocados mais longe.

Nosso cérebro percebe esses conjuntos de elementos intimamente


colocados como grupos. A proximidade é tão essencial para a nossa
percepção que é mais forte do que outros recursos, como forma ou cor.

traduzido por
Princípios da Gestalt in brunadecastroalves
Proximidade

traduzido por
Princípios da Gestalt in brunadecastroalves
Proximidade - como é usada no UI Design?
Graças ao uso de proximidade, os designers coneseguem criar um conteúdo mais
confortável de ser percebido pelos usuários. As páginas são mais fáceis de serem
visualizadas. Isso se aplica não apenas aos controles da interface do usuário, como
botões ou entradas, mas também ao conteúdo escrito e à tipografia.

A proximidade pode ser usada para agrupar conteúdo e ações relacionados entre si.
Também está ligado ao espaço em branco que desempenha um papel essencial no
princípio. Isso aumenta as relações entre os elementos e fortalece a intenção do
designer. Graças a isso, o usuário não tera dúvida do que acontecerá se ele fizer uma
ação. No final, os usuários podem visualizar o conteúdo mais rapidamente e alcançar
seus objetivos com muito mais eficiência

traduzido por
Princípios da Gestalt in brunadecastroalves
Proximidade

traduzido por
Princípios da Gestalt in brunadecastroalves
Princípio da Similaridade
Elementos com aparência visual semelhante parecem estar mais relacionados ou
agrupados do que os que não compartilham os mesmos atributos.

As principais características que aumentam a impressão de semelhança são tama-


nho, forma e cor. A semelhança não é tão mais fraca que a proximidade, mas
também é uma lei poderosa da percepção humana.

traduzido por
Princípios da Gestalt in brunadecastroalves
Similaridade

traduzido por
Princípios da Gestalt in brunadecastroalves
Similaridade - como é usado no UI Design?
Quando os usuários percebem um elemento semelhante na interface do usuário,
eles os categorizam como padrões específicos. Graças a isso, eles reconhecem rapi-
damente o significado de controles da interface. É por isso que é tão crucial que os
botões principais tenham a mesma aparência em todas as páginas.

No grupo de elementos "semelhantes", tendemos a ver objetos com a semelhança de


cores primeiro, depois o tamanho e a forma.

traduzido por
Princípios da Gestalt in brunadecastroalves
Similaridade

traduzido por
traduzido por
Princípios
Princípios da
da Gestalt
Gestalt in brunadecastroalves
in brunadecastroalves
Princípio de Continuação
Princípio de Continuação
Quando o olho é orientado a passar de um objeto para outro, falamos sobre a lei da
continuidade. Nossa percepção tende a ver objetos organizados em linhas ou curvas
como mais relacionados ou agrupados.

traduzido por
Princípios da Gestalt in brunadecastroalves
Continuação

traduzido por
Princípios da Gestalt in brunadecastroalves
Continuação - como é usado no UI Design?
Quando vemos grupos de elementos, como um carrosel em galeria de
fotos, tabs ou até listas, é possível perceber que estão usando continuação.
Os objetos estão posicionados próximos do outro, possibilitando os olhos
fazerem uma leitura contínua sem se perderem.

traduzido por
Princípios da Gestalt in brunadecastroalves
Continuação

traduzido por
Princípios da Gestalt in brunadecastroalves
Princípio do Fechamento
Os objetos são frequentemente percebidos como uma coisa só, mesmo
quando estão incompletos. Nossa mente preenche rapidamente as
lacunas e nos ajuda a encontrar o significado e a intenção de uma coisa
em particular.

traduzido por
Princípios da Gestalt in brunadecastroalves
Fechamento

traduzido por
Princípios da Gestalt in brunadecastroalves
Fechamento - como é usado no UI Design?
Toda vez que você vê um indicador de carregamento (loader), uma barra
de progresso ou slider, a lei do fechamento foi usada para tornar a solução
mais compreensível para o usuário. O outro uso do fechamento é o espaço
negativo. Vemos isso em logotipos e iconografia. Torna o design mais legí-
vel ou até agradável.

traduzido por
Princípios da Gestalt in brunadecastroalves
Fechamento
Fechamento

traduzido por
Princípios da Gestalt in brunadecastroalves
Princípio da Simetria

Nossa mente percebe objetos simétricos como partes do mesmo grupo.


Eles criam uma impressão de estabilidade e ordem.

traduzido por
Princípios da Gestalt in brunadecastroalves
Fechamento
Simetria

traduzido por
Princípios da Gestalt in brunadecastroalves
Simetria - como é usado no UI Design?
Elementos de interface que são simétricos com outros, ajudam a visualizar
o conteúdo e reconhecer padrões. Simetria permite usu'rios a focar no que
é essencial. Menus de navegação simétricos tendem a ser percebidos
como estáveis.

Por outro lado, um pouco de assimetria pode tornar algumas coisas mais
excitantes e dinâmicas.

traduzido por
Princípios da Gestalt in brunadecastroalves
Fechamento
Simetria
Simetria

traduzido por
Princípios da Gestalt in brunadecastroalves
Principio de Continuidade
Quando os elementos tendem a se mover na mesma direção,
nós os percebemos como parte do mesmo grupo.

traduzido por
Princípios da Gestalt in brunadecastroalves
Fechamento
Simetria
Continuidade

traduzido por
Princípios da Gestalt in brunadecastroalves
Continuidade - Como é usado no UI Design?
Este princípio é fundamental no motion design. Toda animação
significativa usa um destino comum para orientar os olhos dos usuários da
maneira certa. Isso ajuda a conectar o conteúdo com a ação que usuário
tomou.

A continuidade também se aplica a elementos como menus


aninhados(nested) , menus suspensos ou accordeon, que mostram
como o elemento do menu se comportará.

traduzido por
Princípios da Gestalt in brunadecastroalves
Fechamento
Simetria
Continuidade

traduzido por
Princípios da Gestalt in brunadecastroalves
Princípio da pregnância da forma
O olho humano é capaz de separar objetos em diferentes planos de foco.
Sabemos quais elementos são colocados em primeiro plano e os que estão
em segundo plano intuitivamente.

traduzido por
Princípios da Gestalt in brunadecastroalves
Fechamento
Simetria
Pregnância da Forma

traduzido por
Princípios
Princípios da
da Gestalt
Gestalt in brunadecastroalves
Pregnância da forma - como é usado no UI Design?
Toda vez que você vê a página modal ou o pop-up, consegue ver o uso da
pregnância da forma. Existem várias técnicas para distinguir os planos de
foco no smartphone: você pode usar fundo de paralaxe, sobreposição
semi-transparente, sombras ou desfocar os elementos em segundo plano.

O Material Design, por exemplo, usa sobreposições e sombras, mas as diretri-


zes human interface do iOS recomendam o uso de desfoque.

traduzido por
Princípios da Gestalt in brunadecastroalves
Fechamento
Pregnância da Forma

traduzido por
Princípios
Princípios da
da Gestalt
Gestalt in brunadecastroalves
Princípio da Região Comum
Objetos colocados na mesma região são percebidos como estando
no mesmo grupo.

traduzido por
Princípios da Gestalt in brunadecastroalves
Fechamento
Região Comum

traduzido por
Princípios
Princípios da
da Gestalt
Gestalt in brunadecastroalves
Região Comum - Como é usado no UI Design?
Essa é uma lei muito útil no UI Design. Vamos dar um exemplo de cards do
Material Design. Eles podem incluir vários elementos, como imagens, ícones,
blocos de texto ou botões. No entanto, graças ao card(retângulo arredonda-
do branco com sombra sutil), eles são percebidos como um único objeto.

A Região Comum ajuda a estruturar o conteúdo e facilita a visualização.


Também se aplica a elementos como barras de navegação, tabelas, menus,
seções de formulário etc.

traduzido por
Princípios da Gestalt in brunadecastroalves
Fechamento
Região Comum

traduzido por
Princípios
Princípios da
da Gestalt
Gestalt in brunadecastroalves
Princípio da Periodicidade
Elementos que aparecem várias vezes em distâncias semelhantes
são percebidos como relacionados.

traduzido por
Princípios da Gestalt in brunadecastroalves
Fechamento
Periodicidade

traduzido por
Princípios
Princípios da
da Gestalt
Gestalt in brunadecastroalves
Periodicidade - Como é usado no UI Design?
Periodicidade ajuda o usuário a reconhecer padrões na interface. Essa regra
é usada em tabs (os elementos são colocados no mesmo ritmo), você rola a
lista ou a grade (os objetos aparecem várias vezes na mesma distância).
Também pode ser usado em seções de página da web, para criar um ritmo.

traduzido por
Princípios da Gestalt in brunadecastroalves
Fechamento
Periodicidade

traduzido por
Princípios
Princípios da
da Gestalt
Gestalt in brunadecastroalves

Você também pode gostar