Articles

Melhorar Seus Projetos Com Os Princípios De Semelhança E Proximidade (Parte 1)

by admin
  • 9 min de leitura
  • Inspiração,Design,Criatividade,Princípios de Design
  • Guardada para leitura off-line
  • Compartilhar no Twitter, O LinkedIn
neste primeiro artigo, vamos dar uma olhada em como os princípios de semelhança e proximidade com o trabalho, e olhar para os exemplos do mundo real para ilustrar-los em uso, de modo que você pode começar a usá-los em seus próprios projetos.

O processo perceptual permite-nos perceber o mundo através de nossos sentidos: visão, som, cheiro, gosto e toque. Em particular, o nosso sistema visual processa vastas quantidades de informação no seu ambiente. Ao invés de perceber elementos separadamente, nosso cérebro organiza padrões, objetos e formas em formas inteiras que podemos entender.os princípios de agrupamento gestalt da percepção visual descrevem esta organização como um conjunto de princípios que explicam como percebemos e organizamos esta enorme quantidade de estímulos visuais. Os princípios gestalt-similaridade, proximidade, fechamento, figura-terreno, continuidade e destino comum — são uma ferramenta popular usada por designers para organizar informações visualmente. Como um designer visual, e agora um designer de interação, eu aplico estes princípios em uma base regular para criar relacionamentos e diferenças entre os elementos em meus projetos. Compreender como esses princípios funcionam, e como usá-los em seus projetos, produz um trabalho mais forte e mais envolvente.você está pronto para melhorar seus projetos? Vamos começar por investigar a semelhança.

similaridade

o princípio gestalt de similaridade diz que elementos que são semelhantes são percebidos como mais relacionados do que elementos que são diferentes. Similaridade nos ajuda a organizar objetos por sua relação com outros objetos dentro de um grupo e pode ser afetado pelos atributos de cor, tamanho, forma e orientação.

usar a cor para atribuir relações

a semelhança é particularmente afectada pela cor. No exemplo abaixo, observe como as formas coloridas têm um efeito forte na atribuição de um agrupamento ou relação, mesmo quando diferentes formas são incluídas.

Usando cores para atribuir semelhança
Nenhum outro atributo pode bater de cor quando se trata de atribuir relacionamentos.

usando o tamanho para atribuir relações

Size é outra ferramenta útil que podemos usar na criação de similaridade. No exemplo abaixo, similaridade em tamanho faz com que as formas maiores se destacem e formem um grupo, mesmo que todas as formas sejam as mesmas.

usando o tamanho para atribuir semelhança
Tamanho faz com que os quadrados maiores pareçam mais importantes do que as formas circundantes.

usando a forma para atribuir relações

forma é útil para agrupar por semelhança, mas tem o efeito de agrupamento mais fraco quando comparado com a cor e o tamanho. No exemplo visto aqui, a forma faz-nos interpretar elementos como colunas de círculos e Quadrados, em oposição a linhas de círculos e Quadrados alternados.

usando a forma para atribuir semelhança
é muito mais fácil ver colunas de formas semelhantes do que Linhas de formas diferentes.

Using Orientation To Assign Relationships

Orientation can be used to group by similarity as well. Ao rodar alguns dos quadrados deste grupo em 45 graus, um grupo separado é feito que é percebido como sendo relacionado. Eles quase parecem estar se movendo juntos em uma direção semelhante em comparação com as formas ao seu redor. Isto na verdade toca no princípio gestalt do destino comum, um princípio que vamos entrar em um artigo futuro. Mas sinta-se à vontade para avançar e Google it (depois de ler este artigo, é claro!). É um princípio fascinante que acontece frequentemente à nossa volta.

Usando orientação para atribuir semelhança
Diferença na orientação cria um forte relacionamento.

More On Color

como mencionado anteriormente, a semelhança é particularmente afectada pela cor e pode sobrepor-se a outros atributos. Por exemplo, podemos anular o exemplo de semelhança em forma adicionando cor. Agora percebemos linhas alternadas de formas vermelhas e brancas em oposição a colunas de círculos e Quadrados. Experimenta. Tente ver as colunas de círculos e Quadrados. É possível, mas é difícil agora, não é?

alternando linhas de formas vermelhas e brancas
é difícil não ver linhas alternadas de vermelho e branco agora.

adicionalmente, a cor pode sobrepor o tamanho. Quando adicionamos cor ao exemplo de similaridade em tamanho, criamos dois grupos separados um do outro. Agora percebemos os grandes quadrados vermelhos como um grupo e o único grande quadrado branco como um grupo separado, independente (e solitário).

dois grupos separados criados usando cor
cor trumps size na atribuição de relações.

Estes dois exemplos ilustram o quão poderosa a cor pode ser na atribuição de relações entre elementos. Tente usar a cor em seu trabalho para diferenciar elementos e você vai se surpreender com o quanto os seus agrupamentos são mais fortes.

similaridade na prática

quando estamos projetando podemos usar similaridade para transmitir a organização e associações mostrando quais elementos estão relacionados, ou não, um com o outro. Por exemplo, as duas seções mostradas no site do Salon abaixo são agrupadas por seus tamanhos relativos. Percebemos claramente dois grupos separados, com histórias de cima à esquerda e a maioria lidas à direita. Mesmo que ambas as seções fornecem a mesma função — exibindo artigos para o agrupamento de Leitura por tamanho atribui mais experiência para o agrupamento esquerdo, O que permite Salon para orientar a atenção para as suas histórias de topo.

Salon.com artigos agrupados por suas relações em diferenças de tamanho.
a atenção é guiada para as histórias superiores de Salon através do uso de similaridade em tamanho. (View large version)

Em contraste, a falta de diferenças de tamanho neste exemplo da Amazon não atribui nenhuma importância particular a qualquer seção. Apesar disso, a semelhança ainda é alcançada através do uso da repetição de tamanho e forma semelhantes, fazendo-nos perceber linhas de itens.

falta de diferenças de tamanho nas imagens do produto.
quando as imagens são do mesmo tamanho, nenhuma ênfase é dada a qualquer seção. (View large version)

Similar Color Use

sabemos que a cor é um forte indicador de semelhança, ajudando a organizar e tornar o conteúdo compreensível. Neste exemplo de Cars.com, uso de cores semelhantes nos ajuda a diferenciar entre o que é um cabeçalho, cópia corporal e texto de link. (Divulgação completa: eu trabalho em Cars.com como designer de interacção. Ao usar cores distintas para cada um destes elementos, esperamos que funcionem da mesma forma e, no caso do texto do link azul, que se comportem da mesma forma.

uso de cores semelhantes ajuda-nos a entender a função e o comportamento dos elementos.
o uso de cores semelhantes nos ajuda a entender a função e o comportamento dos elementos. (Ver versão grande)

Proximidade

A gestalt o princípio da proximidade, diz que os elementos que estão mais próximas são percebidos como mais relacionados do que os elementos que estão afastados. Tal como acontece com a semelhança, a proximidade ajuda-nos a organizar objectos pela sua relação com outros objectos. A proximidade é o princípio mais forte para indicar a relação de objetos, ajudando-nos a entender e organizar a informação de forma mais rápida e eficiente.

os exemplos de círculos abaixo mostram como a proximidade pode ser usada para nos ajudar a perceber os objetos como estando relacionados. Como vemos aqui, os círculos estão espalhados, não exibindo nenhuma relação, com cada ser percebido como um objeto separado.

círculos sem proximidade espacial
estas formas não apresentam relação.

no Entanto, quando os círculos são puxadas para fechar espacial proximidade um do outro, eles são atribuídos a uma relação e não são mais vistos como objetos separados.

círculos com forte proximidade espacial
formas exibem relação quando na proximidade próxima.

White Space

White space is an inestimable tool for creating proximity. Tomar o mesmo grupo de círculos e adicionar espaços em branco ajuda-nos a perceber as coisas de forma diferente. Agora, à esquerda, a proximidade das formas nos faz perceber os dois grupos como colunas, cada um seu próprio grupo. À direita, a proximidade das formas nos faz perceber os dois grupos como linhas, novamente cada um seu próprio grupo. Use espaço branco em seus projetos para fortalecer os agrupamentos, bem como para diferenciá-los de outros elementos.

Colunas e linhas de círculos
adicionando espaço em branco entre os elementos, podemos mudar a percepção dos agrupamentos.

O Poder Da Proximidade

a Proximidade é forte o suficiente para dominar outros elementos de variação. Observe como a proximidade ainda ganha, mesmo quando outros atributos, como cor e forma, são adicionados. Por Mais que tentem, a cor e a forma não dominam a proximidade aqui e cada grupo ainda é percebido como um elemento separado.

Cor é finalmente derrotado pela proximidade!

Proximidade Na Prática

Quando estamos organizando as informações em nossos projetos, nós podemos usar proximidade para criar relações entre elementos para auxiliar na compreensão das informações apresentadas. Por exemplo, ao agrupar estas imagens da Apple Store em estreita proximidade, atribuímos uma relação a todo o grupo. Percebemos que eles estão relacionados e esperamos que o conteúdo seja semelhante.

imagens agrupadas em conjunto mostrando a relação.as imagens agrupadas em conjunto são vistas como estando relacionadas. (View large version)

No entanto, quando removemos a coluna central, subitamente percebemos dois grupos separados e temos uma expectativa de conteúdo diferente entre eles.

Dois grupos separados de imagens
Dois grupos separados são criados por remover a coluna central. (View large version)

combinando proximidade e semelhança

Agrupamento por proximidade também pode ser combinado com semelhança para criar relações mais fortes. Visto neste exemplo da Amazônia, agrupar por proximidade e similaridade em tamanho faz-nos perceber dois grupos separados e atribui mais proeminência ao grupo esquerdo.

Livros agrupados por proximidade e semelhança.o agrupamento pela proximidade e semelhança cria relações mais fortes entre os elementos. (View large version)

proximidade e hierarquia

proximidade é excelente para organizar elementos hierárquicos. Neste exemplo de Crate & Barrel, as opções são agrupadas em títulos comuns, criando relações, o que torna a digitalização e encontrar informações muito mais fáceis.

itens de Cozinha agrupados em rubricas.
encontrar informação é mais fácil quando as opções estão agrupadas em títulos. (Ver versão grande)

Quando os títulos são removidos e as opções são agrupadas sem proximidade, perdemos as relações que foram criadas e se torna muito mais difícil para digitalizar rapidamente e encontrar a informação que queria. Tenta tu. Vá em frente e veja quão rapidamente você pode encontrar canecas de café no agrupamento com títulos versus o agrupamento sem títulos. É um pouco mais difícil saltar rapidamente para ele, não é?

Kitchen items with the headings removed.sem títulos, encontrar informação rapidamente é difícil. (Ver versão grande)

Conclusão

Compreensão de como usar a semelhança e proximidade para afetar as relações entre os elementos em seu trabalho vai ajudar você a criar modelos que permitam facilitar a organização e a melhorar a usabilidade do seu trabalho. Use similaridade e proximidade para criar relações e diferenças entre os elementos em seus projetos. Experimente o uso de espaço branco, cor, tamanho, forma e orientação dos elementos e misture ambos os princípios juntos para produzir relações muito fortes e envolventes.

na próxima parte desta série, vamos olhar para o fechamento e figura-ground, e explorar como esses dois princípios gestalt usam espaço positivo e negativo para criar relações simples e poderosas.

recursos e boas leituras

  • princípios Gestalt sobre Scholarpedia.”Laws of Organization in Perceptual Forms”: Text of Max Wertheimer’s seminal paper from 1923.princípios universais de Design revisados e atualizados: 125 maneiras de melhorar a usabilidade, a percepção de influência, aumentar o apelo, tomar melhores decisões de design, e ensinar através do design, por William Lidwell, Kritina Holden e Jill Butler. Rockport Pub, 2010.visualização da Informação: percepção para o Design, por Colin Ware. Elsevier, 2012.princípios de concepção: A Percepção Visual E Os Princípios De Gestalt
  • Conectando-se E Separando os Elementos de Contraste E Semelhança
  • Composição de Equilíbrio, a Simetria E a Assimetria
  • Como Melhorar o Seu e-Mail de Fluxo de trabalho Com Design Modular
  • Melhorar a Experiência do Usuário Com Recursos em Tempo Real
Smashing Editorial(em ml, da, og, jb, il)