O que é proximidade no web design e como você pode usá-la?

É fascinante como a mente humana funciona. Você já se perguntou sobre a maneira como as pessoas percebem seu mundo visualmente?

No século 20, os psicólogos alemães Max Wertheimer, Kurt Koffka e Wolfgang Kohler tentaram encontrar uma resposta para essa pergunta. Eles conduziram uma série de estudos e, como resultado, desenvolveram os princípios da gestalt, que são um conjunto de diretrizes simples que explicam como as pessoas veem o mundo ao seu redor.

A proximidade é considerada um dos princípios da gestalt. Este princípio tem um impacto significativo na estética do design contemporâneo da interface do usuário. Neste blog, vou contar o que a proximidade significa no Web Design e como você pode usá-la.

O que é proximidade no web design?

O conceito de proximidade refere-se aos elementos que precisam ser ordenados visualmente e ao objetivo de alcançar o mínimo de confusão possível. É importante separar os conteúdos que não estão relacionados entre si para evidenciar a ausência de conexão entre eles.

Por exemplo, você deve ter notado que os ícones de várias plataformas de mídia social foram agrupados e não separados em um site. É mais semelhante a uma técnica de colocar tudo em um único local.

Layouts que usam proximidade para minimizar a ambiguidade visual e promover a compreensão são mais fáceis de entender. A proximidade também auxilia na estruturação do layout do site. A aplicação adequada da proximidade tem um efeito significativo e benéfico na experiência do usuário.

Os designers se beneficiam do princípio de proximidade ao serem capazes de atingir objetivos principais, como fazer os layouts parecerem menos confusos e agrupar variáveis ​​que estão conectadas coletivamente.

Como usar a proximidade no web design?

Espaço em branco

Compreender a importância do espaço em branco no design é o primeiro passo para adotar com sucesso a noção de proximidade no design.

A falta de espaço em branco nos designs é um problema comum. Quando se trata de experiência do usuário, o espaço em branco pode afetá-lo tanto quanto o conteúdo real da página. O espaço em branco direciona o olhar do usuário, gera contraste e deixa um impacto duradouro na mente do usuário.

Por meio do design, os designers comunicam a natureza do site. Pode ser através de texto e imagens. Mas um design eficaz é algo que tem um espaço em branco bem organizado que pode impulsionar os elementos de um site.

Crie uma hierarquia visual

A estrutura do website e a forma como o conteúdo é organizado e apresentado são os alicerces de uma proximidade eficiente. Um designer precisa ser capaz de construir uma hierarquia visual atraente de conteúdo para atingir esse objetivo de proximidade efetiva. É essencial fornecer ao seu site uma hierarquia visual clara, por isso é importante fazer uso eficiente do espaço em branco e organizar elementos comparáveis ​​juntos.

Agrupar e subagrupar outras partes do site é a melhor técnica para manter a hierarquia no lugar. O usuário fica mais apto a entender onde esteve e para onde quer ir em função dessa hierarquia, que também ajuda a expressar o objetivo do site.

O fato de o usuário poder ver isso indica que ele está ciente e compreende onde as informações pertinentes estão armazenadas, o que indica que você comunicou com sucesso a mensagem e o objetivo do site.

Melhore a compreensão do conteúdo

O conteúdo é rei. Para muitos produtos, o material de conteúdo é o motivo pelo qual os seres humanos começam a usá-los. Boa clareza (a conveniência com que um leitor pode reconhecer um conteúdo textual escrito) e legibilidade (a conveniência com que um leitor pode decodificar símbolos) são pontos críticos do design do produto.

Muitos elementos podem contribuir para a clareza e legibilidade, que incluem família de fontes, tamanho da fonte e contraste do conteúdo textual. Mas a maneira como você molda o conteúdo em uma página da web também afeta a legibilidade e a clareza do conteúdo.

A legibilidade pode ocorrer enquanto um conteúdo textual é fornecido sem formatação. Ao fornecer material de conteúdo em blocos curtos e escaneáveis ​​sem esforço - agrupando frases em parágrafos ou seções e separando-as com um pedaço de espaço em branco - você ajuda os clientes a testar e estudar o conteúdo textual.

Tenha um layout escaneável

A leitura e a varredura de conteúdo estruturado em uma hierarquia e categorizada de maneira lógica é muito mais simples. Ao construir sua arquitetura e design, um site deve usar a proximidade para não sobrecarregar os usuários com conteúdo.

Portanto, apesar de ser relativamente simples colocar em prática os conceitos de proximidade em sites com quantidade limitada de material, a proximidade é significativamente mais crucial em sites com muito conteúdo. Como resultado, você deve verificar se seu layout é simples, legível e escaneável pelo usuário.

Enfatize alguns elementos

A ênfase é um dos conceitos vitais máximos do design de experiência pessoal (UX). Dar prioridade a fatores precisos ou material de conteúdo em uma página da web é uma das responsabilidades máximas não incomuns dos designers.

Embora os designers possam usar muitas estratégias exclusivas para obter as consequências adequadas - que incluem tornar um detalhe grande ou incluir contraste extra - é viável obter as mesmas consequências sem alteração do detalhe autêntico. Em vez disso, você pode brincar com a quantidade de áreas pobres em todos os detalhes.

Há uma conexão imediata entre áreas pobres e interesse pessoal. Quanto mais área pobre você carregar em voltas e detalhes, mais importante ela se tornará para o espectador. Isso ocorre naturalmente - porque o interesse da pessoa pode ser direcionado para um detalhe com uma área muito pobre, realmente porque não há mais nada naquele lugar que atraia seu interesse.

Vale a pena mencionar que provavelmente é difícil reconhecer qual detalhe atrai o máximo interesse em uma página da internet. Portanto, é recomendável aplicar um programa de software de layout de internet para criar um protótipo do seu layout e validá-lo com o teste 5-2.

Mostre seu protótipo para as pessoas que constituem seu público por 5 segundos, depois pergunte a eles: “Quais são os principais fatores que você pode se lembrar?” Se eles chamam um detalhe (ou fatores) que você precisa que eles vejam, então tudo bem.

Guie o olhar do espectador pelo conteúdo

O preceito de proximidade ajuda você a criar uma onda, uma boa maneira de direcionar o olhar do espectador de um fator para outro. Ao ajustar o espaço em branco, você pode criar facilmente fatores focais ou regiões que atraem claramente a atenção do usuário.

A criação de fatores focais começa evoluindo com o crescimento de uma grade de layout da Internet, uma boa maneira de permitir que você envolva fatores de layout (junto com conteúdo textual, imagens ou controles práticos) sempre dentro do layout.

Depois de obter uma grade, você deseja configurar fatores para clientes manuais por meio de seções de material de conteúdo-chave. Como você pode ver abaixo, é exatamente isso que o Evernote faz com a ajuda de combinar blocos de conteúdo textual com ilustrações. Como resultado, o olho do espectador segue uma rota em ziguezague à medida que rola por esta página.

Empacotando

Focar na distância relativa entre os fatores da interface do usuário é vital enquanto você faz o layout para diversos monitores e resoluções. O design que aparece bem em grandes monitores de laptop não aparecerá bem em pequenos monitores de celular.

Quando seu layout é reduzido para abrigar monitores menores, o espaçamento entre os fatores pode ser minimizado, o que possivelmente destruiria os supostos relacionamentos dos fatores da interface do usuário. É importante verificar seu layout em diversos monitores e resoluções para ver se o layout é bem dimensionado ou não. É viável aplicar equipamentos Google Chrome Dev para simular dispositivos celulares.

Como melhorar a experiência do usuário do site também é algo que você pode querer saber mais. Contacte-nos se pretender desenhar ou redesenhar a sua página web.