Design Ux

Explorando os Princípios de Design da Gestalt

Ouça a versão em áudio deste artigo

O espaço negativo sempre foi um marco para um bom design. Deixar um espaço em branco ao redor dos elementos de um design é a primeira coisa que geralmente vem à mente. Mas existem designs que usam esse espaço em branco para inferir um elemento que não está realmente lá (a seta escondida entre o E e o X no logotipo da FedEx imediatamente vem à mente como um exemplo).

espaço negativo é um dos principais elementos e princípios de design

O “E” e o “x” no logotipo da FedEx criam uma seta dentro do espaço negativo entre eles.

O cérebro humano é excepcionalmente bom para preencher os espaços em branco de uma imagem e criar um todo que é maior do que a soma de suas partes. É por isso que vemos rostos em coisas como folhas de árvores ou rachaduras na calçada.

Este princípio é uma das idéias subjacentes mais importantes por trás dos princípios da gestalt da percepção visual. A proposta inicial mais influente escrita sobre a teoria foi publicada por Max Wertheimer em seu 1923 Leis Gestalt de organização perceptiva , embora a discussão de Wolfgang Köhler em 1920 sobre Formas físicas também contém muitas idéias influentes sobre o assunto.

Não obstante quem primeiro propôs as idéias (houve ensaios que datam de 1890), os princípios da Gestalt são um importante conjunto de idéias para qualquer designer aprender, e sua implementação pode melhorar muito não apenas a estética de um design, mas também sua funcionalidade e facilidade de uso.

Em termos mais simples, a teoria da gestalt é baseada na ideia de que o cérebro humano tentará simplificar e organizar imagens ou designs complexos que consistem em muitos elementos, subconscientemente organizando as partes em um sistema organizado que cria um todo, ao invés de apenas um série de elementos díspares. Nossos cérebros são construídos para ver a estrutura e os padrões, a fim de que possamos entender melhor o ambiente em que vivemos.

Existem seis princípios individuais comumente associados à teoria da gestalt: semelhança , continuação , fecho , proximidade , figura / fundo , e simetria e ordem (também chamado concisão ) Existem também alguns princípios adicionais mais novos, às vezes associados à Gestalt, como destino comum .

Semelhança

É da natureza humana agrupar coisas semelhantes. Na gestalt, elementos semelhantes são agrupados visualmente, independentemente de sua proximidade uns dos outros. Eles podem ser agrupados por cor, forma ou tamanho. Semelhança pode ser usado para unir elementos que podem não estar próximos uns dos outros em um design.

como aprender o programa c

exemplo do princípio gestalt de semelhança

Os quadrados aqui estão todos igualmente espaçados e do mesmo tamanho, mas nós os agrupamos automaticamente por cor, mesmo que não haja rima ou razão para sua colocação.

Claro, você pode fazer as coisas diferentes se quiser que se destaquem na multidão. É por isso que os botões para frases de chamariz costumam ser projetados em uma cor diferente do resto da página, para que se destaquem e chamem a atenção do visitante para a ação desejada.

No design de UX, usar similaridade deixa claro para seus visitantes quais itens são semelhantes. Por exemplo, em uma lista de recursos que usa elementos de design repetitivos (como um ícone acompanhado por 3-4 linhas de texto), o princípio de similaridade tornaria mais fácil percorrê-los. Em contraste, alterar os elementos de design para recursos que você deseja destacar os faz se destacar e os dá mais importância na percepção do visitante.

Mesmo coisas tão simples como certificar-se de que os links em todo o design estão formatados da mesma maneira dependem do princípio de similaridade na forma como os visitantes perceberão a organização e a estrutura do seu site.

Continuação

o lei de continuidade postula que o olho humano seguirá o caminho mais suave ao visualizar as linhas, independentemente de como as linhas foram realmente desenhadas.

um exemplo do princípio gestalt de continuidade

O olho tende a querer seguir a linha reta de uma extremidade à outra dessa figura, e a linha curva de cima para baixo, mesmo quando as linhas mudam de cor no meio.

Essa continuação pode ser uma ferramenta valiosa quando o objetivo é guiar os olhos do visitante em uma determinada direção. Eles seguirão o caminho mais simples na página, portanto, certifique-se de que as partes mais vitais que eles devem ver estejam dentro desse caminho.

Visto que o olho segue naturalmente uma linha, colocar itens em uma série em uma linha irá naturalmente atrair o olhar de um item para o outro. Os controles deslizantes horizontais são um exemplo, assim como listas de produtos relacionados em sites como o Amazon.

Fecho

Fecho é um dos princípios mais legais da gestalt e um que já mencionei no início desta peça. É a ideia de que seu cérebro preencherá as partes que faltam em um design ou imagem para criar um todo.

Em sua forma mais simples, o princípio de fechamento permite que seus olhos sigam algo como uma linha pontilhada até o fim. Mas aplicações mais complexas são freqüentemente vistas em logotipos, como o do World Wildlife Fund. Grandes pedaços do contorno do panda estão faltando, mas seu cérebro não tem problemas para preencher as seções que faltam para ver o animal inteiro.

o logotipo do fundo mundial para a vida selvagem é um exemplo do princípio gestalt de fechamento

O princípio gestalt de fechamento é perfeitamente ilustrado no logotipo do panda do World Wildlife Fund. O cérebro completa as formas brancas, embora elas não sejam bem definidas.

O fechamento é frequentemente usado no design de logo, com outros exemplos, incluindo os da USA Network, NBC, Sun Microsystems e até da Adobe.

Outro exemplo muito importante de fechamento no trabalho em UX e Design de interface do usuário é quando você mostra uma imagem parcial desaparecendo da tela do usuário para mostrar a eles que há mais a ser encontrado se deslizarem para a esquerda ou direita. Sem uma imagem parcial, ou seja, se apenas imagens completas forem mostradas, o cérebro não interpreta imediatamente que pode haver mais para ser visto e, portanto, é menos provável que o usuário role (uma vez que o fechamento já é aparente).

Procuram-se designers de IU freelance em tempo integral nos EUA

Proximidade

Proximidade refere-se a quão próximos os elementos são uns dos outros. As relações de proximidade mais fortes são aquelas entre assuntos 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 os elementos, você pode adicionar separação mesmo quando suas outras características são as mesmas.

Veja este grupo de círculos, por exemplo:

o princípio gestalt de proximidade ilustrado com grupos de círculos

A única coisa que diferencia o grupo da esquerda dos da direita é a proximidade das linhas. No entanto, seu cérebro interpreta a imagem à direita como três grupos distintos.

c ++ é compilado ou interpretado

exemplo de princípio de proximidade gestalt em ação prejudicando ux

PARA USPS Exemplo de formulário PDF em que o princípio da gestalt de proximidade está prejudicando a UX. Devido aos rótulos de campo estarem mais próximos dos campos abaixo deles, as pessoas erroneamente acreditariam que é onde as informações vão para 'c'. e “d.” Ainda assim, as informações devem ser fornecidas nos campos acima dos rótulos de texto.

No design UX, a proximidade é mais frequentemente usada para fazer os usuários agruparem certas coisas sem o uso de coisas como bordas rígidas. Ao colocar as coisas semelhantes mais próximas, com espaço entre cada grupo, o espectador irá imediatamente perceber a organização e estrutura que você deseja que eles percebam.

Figura / chão

o princípio de figura / fundo é semelhante ao princípio de fechamento, pois aproveita a maneira como o cérebro processa o espaço negativo. Você provavelmente já viu exemplos desse princípio circulando em memes nas mídias sociais ou como parte de logotipos (como o logotipo da FedEx já mencionado).

Seu cérebro vai distinguir entre os objetos que considera estarem no primeiro plano de uma imagem (a figura, ou ponto focal) e o fundo (a área em que as figuras repousam). As coisas ficam interessantes quando o primeiro e o segundo planos contêm duas imagens distintas, como esta:

um exemplo da relação figura-fundo formando elementos e princípios de design

Algumas pessoas verão imediatamente a árvore e os pássaros ao visualizar o logotipo do Pittsburgh Zoo & PPG Aquarium, enquanto outras verão o gorila e o leão se encarando.

grande exemplo do princípio da gestalt figura-fundo

Outro grande exemplo do princípio da gestalt figura / fundo.

Um exemplo mais simples pode ser visto com esta imagem, de duas faces criando um castiçal ou vaso entre elas:

um exemplo simples de princípio figura-fundo, um princípio de design gestalt

Nessa famosa ilusão desenvolvida pelo psicólogo dinamarquês Edgar Rubin, o visualizador geralmente é apresentado a duas interpretações de forma - duas faces ou um vaso. É outro excelente exemplo do princípio de figura / fundo.

Em termos gerais, seu cérebro interpretará a área maior de uma imagem como o fundo e a menor como a figura. Porém, conforme mostrado na imagem acima, você pode ver que as cores mais claras e mais escuras podem influenciar o que é visto como a figura e o que é visto como o fundo.

O princípio de figura / fundo pode ser muito útil quando designers de produto deseja destacar um ponto focal, especialmente quando ele está ativo ou em uso, por exemplo, quando uma janela modal aparece e o resto do site desaparece no fundo, ou quando uma barra de pesquisa é clicada e o contraste é aumentado entre ele e o resto do site.

Inscreva-se no blog de design do ApeeScape e receba nosso e-book

Simetria e Ordem

A lei de simetria e ordem também é conhecida como concisão , a palavra alemã para 'boa figura'. O que esse princípio diz é que seu cérebro perceberá formas ambíguas da maneira mais simples 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.

outro dos princípios de design da Gestalt, o princípio de pragnanz é ilustrado com o logotipo das olimpíadas

Aqui está outro bom exemplo do princípio de design gestalt “ concisão ':

um exemplo complexo do princípio de pragnanz, outro princípio de gestalt

Seu cérebro interpretará a imagem à esquerda como um retângulo, círculo e triângulo, mesmo quando os contornos de cada um estão incompletos porque essas são formas mais simples do que a imagem geral.

Destino comum

Enquanto destino comum não foi originalmente incluído na teoria da gestalt, mas foi adicionado desde então. No design UX, sua utilidade não pode ser negligenciada. Este princípio afirma que as pessoas agruparão coisas que apontam ou estão se movendo na mesma direção.

Na natureza, vemos isso em coisas como bandos de pássaros ou cardumes de peixes. Eles são compostos de um monte de elementos individuais, mas como se movem aparentemente como um só, nosso cérebro os agrupa e os considera um único estímulo.

um bando de pássaros ilustra o princípio do destino comum

Um bando de pássaros é visto como uma única unidade quando voa na mesma direção e, portanto, compartilha um destino comum. (de Martin Adams em Unsplash )

Isso é muito útil na UX, pois os efeitos animados se tornam mais predominantes no design moderno. Observe que os elementos não precisam realmente estar se movendo para se beneficiar deste princípio, mas eles têm que dar o impressão de movimento.

Princípios Gestalt em Design UX

Como acontece com qualquer princípio psicológico, aprender a incorporar os princípios de percepção visual da Gestalt em seu trabalho de design pode melhorar muito a experiência do usuário. Entender 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 o usuário se sentir confortável em um site, mesmo que seja sua primeira visita.

Os princípios da Gestalt são relativamente fáceis de incorporar em praticamente qualquer design e podem elevar rapidamente um design que parece aleatório ou como se estivesse lutando pela atenção do usuário para um que oferece uma interação natural e contínua que guia os usuários para a ação que você deseja que eles realizem.

• • •

Leituras adicionais no Blog de design do ApeeScape:

Compreender o básico

Quais são os princípios gestálticos do design?

Os princípios clássicos da teoria gestáltica da percepção visual incluem similaridade, continuação, fechamento, proximidade, figura / fundo e simetria e ordem (também conhecido como prägnanz). Outros, como “destino comum”, foram adicionados nos últimos anos.

Por que a teoria da gestalt é importante?

Os princípios da Gestalt podem elevar rapidamente um design que parece aleatório ou como se estivesse lutando pela atenção do usuário para um que ofereça uma interação natural e contínua que torna seu site familiar, enquanto orienta os usuários para a ação que você deseja que eles realizem.

O que é hierarquia visual no design?

No design, a hierarquia visual é o arranjo ou posicionamento de diferentes elementos de design para dar-lhes maior ou menor importância. Os vários princípios da gestalt influenciam fortemente a hierarquia visual.

Qual é a teoria gestáltica da percepção?

A teoria gestáltica da percepção tenta explicar a maneira como o cérebro humano interpreta informações sobre relacionamentos e hierarquia em um projeto ou imagem com base em pistas visuais como proximidade, semelhança e fechamento.