O Princípio da Proximidade em Web Design
Recentemente eu peguei um livro de design antigo que eu não tinha tocado há algum tempo, e isso me lembrou de um princípio de design que muitos de nós colocamos em prática, provavelmente de maneira subconsciente, se é que o fazemos.
O livro trata de projetar para impressão, mas eu pensei que seria um ótimo tópico para discutir no contexto de web design.
O princípio da proximidade exige que os itens relacionados sejam agrupados visualmente, criando menos confusão e criando um layout mais organizado. Itens não relacionados entre si devem ser colocados mais separados, para enfatizar sua falta de relacionamento.
Discutirei detalhes e algumas maneiras pelas quais isso pode ser implementado de forma eficaz, mas essa definição deve ser suficiente para o que discutiremos neste artigo.
O uso correto da proximidade, em conjunto com outros princípios de design, tem um grande impacto na experiência do usuário e, em última análise, no sucesso geral de um site.
Não tema o espaço branco
O primeiro passo para implementar adequadamente o princípio da proximidade é entender a importância do espaço em branco no design.
A falta de espaço em branco é um problema comum em projetos amadores. O design é um meio de comunicação de informações e, quando os amadores tentam transmitir uma mensagem através do design, sua inclinação natural é espalhar o conteúdo uniformemente para preencher o espaço, sem dar muita atenção ao potencial do espaço em branco bem organizado.
O espaço em branco pode afetar o comportamento do usuário tanto quanto, se não mais, do conteúdo real na página. O espaço em branco orienta os olhos do usuário na direção pretendida, cria contraste e deixa uma impressão duradoura.
Embora o site da W3Avenue acima contenha uma quantidade considerável de conteúdo (com artigos em várias categorias, como qualquer blog de design) e uma série de anúncios da barra lateral, ele não sobrecarrega o usuário visualmente.
A sala generosa no cabeçalho e os itens apropriadamente espaçados no conteúdo e nas áreas laterais contribuem para essa aparência limpa e organizada. A W3Avenue não está fazendo nada particularmente único com seu conteúdo, mas seu design provavelmente contribui para o tráfego forte fica em um curto período de tempo .
Portanto, não seja inseguro quanto ao espaço vazio em seu design. O uso correto do espaço em branco é o primeiro passo para implementar o princípio da proximidade e, assim, tornar um design mais atraente visualmente.
Elementos relacionados ao grupo visualmente
O espaço em branco, no entanto, é apenas uma parte da implementação da proximidade. Um design pode ter muito espaço em branco, mas se os itens não forem agrupados corretamente , o espaço em branco terá pouco efeito, conforme ilustrado pelos dois cartões de visita abaixo:
A carta à esquerda não está desordenada; tem algum espaço em branco. Mas os elementos não são logicamente agrupados, então o efeito é fraco.
O leitor é forçado a digitalizar o cartão várias vezes. O cartão à direita, no entanto, tem um efeito visual mais agradável. O leitor simplesmente precisa olhá-lo para receber a informação (mais sobre isso depois).
O agrupamento de elementos no cartão à direita também é mais lógico . No primeiro conjunto de elementos, vemos o nome da empresa em fonte grande com o local abaixo dela. O segundo conjunto nos informa como obter informações sobre os serviços fornecidos (por exemplo, número de telefone e endereço do site).
Este exemplo ilustra a importância da proximidade no design de impressão, e uma ideia semelhante pode ser usada para elementos em web design, como mostrado na imagem abaixo.
Embora o site da Arora Designs não seja complexo ou pesado em informações, o uso do espaço em branco e a separação visual de elementos agrupados são eficazes. Deve-se notar aqui que o “espaço branco” não precisa ser branco; pode ser qualquer espaço vazio entre os elementos, independentemente da cor.
No caso do Arora Designs, embora o espaço em branco tenha cor, ele serve ao mesmo propósito de separar visualmente as áreas de cabeçalho, navegação e conteúdo.
Criando Hierarquia Visual
Usar o espaço em branco com eficiência e agrupar elementos relacionados é essencial para dar ao seu site uma hierarquia visual clara. Naturalmente, a arquitetura e o fluxo de informações do site são a base da proximidade efetiva .
A hierarquia é transmitida pela maneira como os elementos são agrupados e subgrupos.
Essa hierarquia ajuda o usuário a entender onde esteve e para onde deseja ir e, assim, ajuda a comunicar o objetivo do site. Uma lista é um bom exemplo de um elemento que tem o potencial de comunicar a hierarquia visual, conforme demonstrado na imagem abaixo:
Apenas olhando as duas listas acima, sem sequer examinar o conteúdo, você verá que a lista à esquerda tem uma clara hierarquia visual, mostrando as relações entre os itens (itens recuados são subcategorias dos itens primários).
Esta hierarquia não seria possível sem espaço em branco (incluindo macro e micro espaço em branco). A lista à direita é apenas um agrupamento aleatório de elementos sem aparente relação ou hierarquia.
Implementar esse princípio em um site com algo tão simples quanto uma lista HTML é fácil. O desafio é usar esse princípio como um fator norteador na construção do site, desde o planejamento e a fase de wireframing até o design.
Layouts que são fáceis de digitalizar e ler
O conteúdo organizado em uma hierarquia e logicamente agrupado é mais fácil de ler e digitalizar .
Cabeçalhos, por exemplo, devem permitir ao usuário digitalizar indicando claramente os pontos principais. É desnecessário dizer que o conteúdo deve ser planejado desde o início para refletir uma hierarquia visual apropriada; a lista acima com os itens recuados é um mau exemplo, porque o conteúdo não corresponde à hierarquia visual.
Um site que usa proximidade em sua arquitetura e design não sobrecarrega o usuário com informações.
Assim, embora seja relativamente fácil implementar os princípios de proximidade em sites que são leves no conteúdo, a proximidade é muito mais importante em sites ricos em conteúdo.
Sites de notícias são bons estudos de caso desse princípio. Abaixo está uma comparação do Los Angeles Times e a Globo e Correio .
No geral, o site do LA Times tem um design agradável principalmente por causa da escolha de cores e tipografia. Mas também tem uma aparência limpa e organizada, especialmente na seção de cabeçalho.
O logotipo é grande e se destaca, contribuindo efetivamente para a marca do site. O objeto mais próximo do logotipo é a barra de navegação horizontal abaixo. Como a barra de navegação é escura, ela contrasta com o logotipo.
Os links de texto acima do logotipo estão bem organizados, com muito espaço entre as duas seções. Alinhamento à esquerda do conteúdo no cabeçalho também contribui para a aparência limpa.
Cada informação no cabeçalho do LA Times é agrupada com itens relacionados, exceto pelo logotipo, que é o único. Nada no cabeçalho confunde você ou faz você se perguntar onde ele pertence.
E quanto ao site da Globe and Mail, mostrado abaixo?
O site da Globe and Mail tem uma seção de cabeçalho complexa que falha ao implementar o princípio da proximidade.
A única quantidade significativa de espaço em branco é no centro, ao lado do logotipo, que não realiza nada. Dois anúncios aparecem no cabeçalho, contribuindo para a desordem. Os anúncios podem ser necessários por razões financeiras, por isso os problemas são compreensíveis.
O maior problema é a seção bagunçada acima do banner grande. Não há distinção clara entre elementos nessa seção.
Três linhas verticais pontilhadas tentam separar a área em quatro seções, mas o primeiro separador não faz sentido. Na verdade, essa seção provavelmente pareceria mais convidativa se esses separadores pontilhados fossem removidos.
Grids Ajuda Com Proximidade
Uma maneira de agrupar itens e usar espaços em branco adequadamente é começar com uma grade .
De um olhar superficial em ambos os sites LA Times e Globe and Mail, apenas o LA Times parece ter baseado seu projeto em uma grade, ou pelo menos usado princípios baseados em grade no estágio de planejamento. O site do Globe and Mail mostra pouca evidência de um formato de grade.
Um layout baseado em grade, com tamanhos de medianiz apropriados, permite espaço suficiente entre as seções e, em muitos casos, obriga o projetista a implementar princípios de proximidade sem sequer pensar nisso.
Abaixo estão as capturas de tela de dois sites que empregaram o Sistema de grade 960 . Ambos são bastante simples (ou seja, não são tão pesados quanto os sites de notícias discutidos acima), mas mostram que as grades dão espaço aos elementos da página, proporcionando a cada seção sua própria casa visual.
Usuários principais no caminho certo
Outro grande benefício da proximidade é que ele ajuda os usuários a navegar em um site sem atrasos ou obstáculos desnecessários. Quando a navegação primária estiver claramente separada dos outros elementos da página, ela será encontrada instantaneamente e é menos provável que seja esquecida.
Hierarquia visual adequada por meio da proximidade ajuda os usuários a aprofundar seu site sem se preocupar com onde estiveram ou para onde estão indo.
Eles sempre se sentirão à vontade e acessarão as seções mais importantes do seu site com rapidez e eficiência.
Web designers com pouca ou nenhuma experiência em design de impressão poderiam se beneficiar enormemente dos princípios que os designers de impressão vêm colocando em prática desde anos antes do boom da web.
Proximidade não é o único princípio de design que ajudará um site a ser mais utilizável e visualmente agradável, mas é um fator importante a ser considerado por muitos dos motivos que acabamos de discutir.
Leitura Adicional
- Princípios Básicos do Design: O Princípio da Proximidade
- Como o CRAP é o design do seu site?
- Usando o agrupamento em layouts de páginas da Web
Este post foi escrito exclusivamente para Webdesigner Depot por Louis Lazaris, um escritor freelance e desenvolvedor web. Louis corre Webs impressionantes , onde ele publica artigos e tutoriais sobre web design. Você pode seguir Louis no Twitter ou entre em contato com ele através de seu site .