Listen to the audio version of this article
Negative space has long been a staple of good design. Deixar espaço branco em torno de elementos de um design é a primeira coisa que geralmente vem à mente. Mas então há projetos que usam esse espaço branco para inferir um elemento que não está realmente lá (a seta escondida entre o E E X no logotipo FedEx imediatamente vem à mente como um exemplo).
O cérebro humano é excepcionalmente bom em preencher os espaços em branco em uma imagem e a criação de um todo que é maior do que a soma de suas partes. É por isso que vemos rostos em coisas como folhas de árvores ou rachaduras no passeio.este princípio é uma das ideias subjacentes mais importantes aos princípios gestalt da percepção visual., A proposta inicial mais influente escrita sobre a teoria foi publicada por Max Wertheimer em suas leis Gestalt de 1923 de organização perceptual, embora a discussão de Wolfgang Köhler de 1920 sobre Gestalten físico também contém muitas ideias influentes sobre o assunto.os princípios gestalt são um importante conjunto de ideias para qualquer designer aprender, e sua implementação pode melhorar muito não apenas a estética de um projeto, mas também a sua funcionalidade e facilidade de uso.,
em termos mais simples, a teoria gestalt é baseada na ideia de que o cérebro humano tentará simplificar e organizar imagens ou desenhos complexos que consistem em muitos elementos, organizando subconscientemente as partes em um sistema organizado que cria um todo, ao invés de apenas uma série de elementos díspares. Nossos cérebros são construídos para ver estrutura e padrões para que possamos entender melhor o ambiente em que vivemos.,
existem seis princípios individuais comumente associados à teoria gestalt: similaridade, continuação, fechamento, proximidade, figura/solo, e simetria & ordem (também chamada prägnanz). Há também alguns princípios adicionais, novos às vezes associados com gestalt, como o destino comum.
similaridade
é da natureza humana agrupar as coisas em conjunto. Em gestalt, elementos similares são agrupados visualmente, independentemente de sua proximidade um com o outro. Eles podem ser agrupados por cor, forma ou tamanho., Similaridade pode ser usada para unir elementos que podem não estar ao lado um do outro em um projeto.
laro, você pode fazer coisas diferentes se quiser fazê-las sobressair da multidão., É por isso que os botões para chamadas para a ação são muitas vezes projetados em uma cor diferente do resto de uma página—para que eles se destacam e chamar a atenção do visitante para a ação desejada.
no design de UX, usando similaridade torna claro para seus visitantes quais itens são parecidos. Por exemplo, em uma lista de recursos usando elementos de design repetitivos (como um ícone acompanhado por 3-4 linhas de texto), o princípio de similaridade tornaria mais fácil de digitalizar através deles., Em contraste, mudar os elementos de design para características que você quer destacar faz com que eles se destacam e dá-lhes mais importância na percepção do visitante.
mesmo as coisas tão simples como garantir que os links ao longo de um projeto são formatados da mesma forma depende do princípio de similaridade na forma como os visitantes irão perceber a organização e estrutura do seu site.
continuação
a lei da continuidade postula que o olho humano seguirá o caminho mais suave ao ver as linhas, independentemente de como as linhas foram realmente desenhadas.,
esta continuação pode ser uma ferramenta valiosa quando o objetivo é guiar o olho de um visitante em uma determinada direção. Eles seguirão o caminho mais simples na página, então certifique-se de que as partes mais vitais que eles devem ver caem dentro desse caminho.,
Uma vez que o olho segue naturalmente uma linha, colocar itens em uma série em uma linha irá naturalmente atrair o olho de um item para o próximo. Sliders horizontais são um exemplo, assim como listagens de produtos relacionados em sites como a Amazon.
o fechamento
o fechamento é um dos princípios gestalt mais frios e um que eu já toquei no início desta peça. É a idéia de que seu cérebro vai preencher as partes faltantes de um projeto ou imagem para criar um todo.
na sua forma mais simples, o princípio do fecho permite ao seu olho seguir algo como uma linha pontilhada até ao seu fim., Mas aplicações mais complexas são frequentemente vistas em logotipos, como aquele para o Fundo Mundial da Vida Selvagem. Faltam grandes pedaços do contorno do panda, mas o seu cérebro não tem problemas em preencher as secções que faltam para ver o animal inteiro.
Closure is quite often used in logo design, with other examples including those for the USA Network, NBC, Sun Microsystems, and even Adobe.
outro exemplo muito importante de encerramento no trabalho em UX e UI design é quando você mostra uma imagem parcial desaparecendo da tela do usuário, a fim de mostrar-lhes que há mais a ser encontrado Se eles deslizam para a esquerda ou para a direita. Sem uma imagem parcial, i.e.,, se apenas imagens completas são mostradas, o cérebro não interpreta imediatamente que pode haver mais a ser visto, e, portanto, o seu usuário é menos provável de se deslocar (uma vez que o fechamento já é aparente).
proximidade
proximidade refere-se à proximidade entre os elementos. As relações de proximidade mais fortes são aquelas entre sujeitos sobrepostos, mas apenas agrupar objetos em uma única área também pode ter um forte efeito de proximidade.
O oposto também é verdadeiro, é claro., Ao colocar espaço entre elementos, você pode adicionar separação mesmo quando suas outras características são as mesmas.
Tomar este grupo de círculos, por exemplo:
no design de UX, a proximidade é mais frequentemente usada para fazer com que os usuários agrupem certas coisas sem o uso de coisas como fronteiras duras. Ao colocar coisas semelhantes mais próximas, com espaço entre cada grupo, o espectador vai imediatamente pegar na organização e estrutura que você quer que eles percebam.,
figura / Solo
o princípio da figura / solo é semelhante ao princípio do fecho, na medida em que tira partido da forma como o cérebro processa o espaço negativo. Você provavelmente já viu exemplos deste princípio flutuando em memes em mídias sociais, ou como parte de logotipos (como o logotipo FedEx já mencionado).
Seu cérebro irá distinguir entre os objetos que considera estar em primeiro plano de uma imagem (a figura, ou ponto focal) e o fundo (a área em que as figuras repousam)., Onde as coisas começam a ficar interessantes é quando o primeiro plano e de fundo, na verdade, conter dois tipos de imagens, como esta:
Um simples exemplo pode ser visto com esta imagem, de duas faces, a criação de um candelabro de ouro ou vaso entre eles:
em termos gerais, o seu cérebro interpretará a maior área de uma imagem como o solo e a menor como a figura., Como mostrado na imagem acima, no entanto, você pode ver que cores mais claras e mais escuras podem influenciar o que é visto como a figura e o que é visto como o chão.
A figura/chão princípio pode ser muito útil quando os designers de produto quiser destacar um ponto focal, especialmente quando ele está ativo ou em uso—por exemplo, quando uma janela pop-up e o resto do site desvanece-se o plano de fundo, ou quando uma barra de pesquisa é clicado e o contraste é maior entre ele e o resto do site.,
simetria e ordem
a lei da simetria e ordem é também conhecida como prägnanz, a palavra alemã para “boa figura”.”O que este princípio diz é que seu cérebro perceberá formas ambíguas de uma maneira tão simples quanto possível. Por exemplo, uma versão monocromática do logotipo Olímpico é vista como uma série de círculos sobrepostos em vez de uma coleção de linhas curvas.,
Aqui está mais um bom exemplo da gestalt o princípio de projeto “prägnanz”:
Seu cérebro vai interpretar a imagem da esquerda como um retângulo, círculo e triângulo, mesmo quando os contornos de cada um estão incompletos, porque estas são formas mais simples do que a imagem geral.
destino comum
embora o destino comum não tenha sido originalmente incluído na teoria gestalt, desde então tem sido adicionado. No design da UX, a sua utilidade não pode ser ignorada., Este princípio estabelece que as pessoas vão agrupar coisas que apontam ou estão a avançar na mesma direcção.na natureza, vemos isso em coisas como bandos de aves ou escolas de peixes. Eles são compostos de um monte de elementos individuais, mas porque eles se movem aparentemente como um só, nosso cérebro os agrupa e os considera um único estímulo.
This is very useful in UX as animated effects become more prevalent in modern design. Note – se que os elementos não têm de estar em movimento para beneficiar deste princípio, mas têm de dar a impressão de movimento.como qualquer princípio psicológico, aprender a incorporar os princípios de percepção visual da gestalt no seu trabalho de design pode melhorar muito a experiência do utilizador., Compreender como o cérebro humano funciona e, em seguida, explorar as tendências naturais de uma pessoa cria uma interação mais perfeita que faz um usuário se sentir confortável em um site, mesmo que seja a sua primeira visita.os princípios Gestalt são relativamente fáceis de incorporar em qualquer projeto e podem elevar rapidamente um projeto que parece estranho ou que está lutando pela atenção de um usuário para um que oferece uma interação natural e perfeita que guia os usuários em direção à ação que você quer que eles tomem.