Dominando o poder do vazio

Whitespace é um dos recursos mais valiosos do design interativo. O espaço em branco em uma página, embora muitas vezes esquecido, pode ser tão importante quanto o espaço ocupado pelos elementos de UI.

“O espaço em branco deve ser considerado como um elemento ativo, não um passado passivo” – Jan Tschichold

Neste artigo, procuro explicar como usar espaços em branco em um design para melhorar a experiência do usuário. No entanto, antes que eu possa fazer isso, precisamos ser claros sobre o que queremos dizer no espaço em branco.

Este é um texto traduzido do blog Springboard. Para acessar o artigo original, clique aqui!

Conheça espaços em branco

Espaço em branco é o espaço vazio entre e em torno de elementos de uma página. Quando os designers falam sobre espaços em branco, eles realmente significam espaço negativo. O termo “espaço negativo” é originário da arte tradicional, onde costumava capturar a forma do objeto com mais precisão.

“Suprematismo: Autorretrato em duas dimensões” por Kasimir Malevich. O “espaço negativo” é o espaço entre elementos em uma composição.

Mesmo que chamemos de espaço em branco, isso não significa que o espaço real deve ser branco. O espaço em branco pode ser preenchido com qualquer cor, desde que esteja livre de qualquer elemento, como texto ou imagens. Como não há conexão real com a cor real, os termos “espaço em branco” e “espaço negativo” podem ser usados ​​de forma intercambiável.

O espaço em branco não precisa ser branco. ToyFight tem muito espaço negativo colorido em vermelho.

Por que o espaço em branco é importante?

O espaço em branco é um elemento fundamental do design por uma boa razão. Igual à arte tradicional, os objetos nas interfaces gráficas do usuário também exigem espaço negativo – texto, botões, logotipos e outros objetos precisam de espaço para respirar. Todas as boas interfaces de usuário incorporam valores de espaço em branco adequados em todos os elementos da página de cima para baixo.

Existem dois tipos de espaços em branco:

  • Micro espaço em branco. O espaço em branco entre linhas de texto e dentro de grades, etc. Este espaço em branco ajuda a legibilidade da tela e a legibilidade do conteúdo.
  • Espaço em branco macro. O espaço em branco entre elementos principais em uma página. Por exemplo, as colunas esquerda e direita desta página Média. Ao contrário do espaço em branco micro, o espaço em branco macro atua como um recipiente do design geral.

7 espaços em branco que podem afetar seu UX:

O espaço em branco é uma ótima ferramenta para equilibrar elementos de design e organizar melhor o conteúdo e consequentemente melhorar a experiência de comunicação visual.

1. Enfatize certos elementos

Dar uma prioridade a elementos ou conteúdos específicos é uma das tarefas mais comuns para designers. Enquanto os designers podem usar muitos métodos visuais para destacar elementos específicos, uma maneira de alcançar bons resultados é jogar com a quantidade de espaço em branco em torno dos pontos focais.

Há uma relação entre distância e atenção – maior distância força a atenção – a falta de outros elementos faz com que os elementos existentes se destaquem mais. Os designers podem usar esta propriedade de espaços em branco para destacar elementos importantes. O preenchimento extra em torno de um determinado segmento de conteúdo força a atenção do usuário nessa área simplesmente porque não há mais nada na tela para chamar a atenção.

Quanto mais espaço em branco há em torno de um objeto, mais o olho está atraído para ele.

O Google, como você pode ver no exemplo abaixo, é um grande defensor do espaço em branco em seus projetos. O espaço em branco ajuda a comunicar a intenção deste design de relance: o foco é colocado no objetivo principal da página, sem uma dedicação maciça a outras áreas.

Quando os visitantes chegam à página inicial do Google Search, seus olhos são desenhados imediatamente para o centro da página, onde o Google apresenta seu formulário de pesquisa. É o espaço em branco que o torna pop.

A mesma técnica é usada para diversas páginas. Se você digitalizar a página inicial do MailChimp, você notará que o botão ‘Sign Up Free’ chama sua atenção quase que imediatamente.

2. Comunique o que está relacionado

Quando examinamos um layout, geralmente o vemos como uma composição de objetos. Isso acontece porque nosso cérebro cria um modelo de relações entre diferentes objetos com base na distância relativa entre eles. As leis da gestalt determinam que objetos em estreita proximidade aparecerão como uma “unidade”, pelo que o espaço em branco atua como uma sugestão visual. Dê uma olhada nesta foto:

 

Provavelmente, você vê dois grupos de pontos, em vez de apenas 12 pontos.Os pontos são todos idênticos e a única coisa que os diferencia é o espaço em branco que os separa.

Esta lei pode ser aplicada aos elementos de design de interação. Consideremos como funciona no contexto de formulários da Web:

  • Coloque os rótulos mais próximos dos campos relevantes. Como sabemos, itens próximos uns dos outros aparecem relacionados. É possível comunicar informações muito mais claramente quando os rótulos são colocados mais perto do campo com o qual eles se relacionam. Ao ajustar o espaçamento, é possível fazer um formulário mais fácil de digitalizar e aumentar as chances de conclusão.
Esquerda: o campo de rótulo e entrada parece estar desconectado um do outro. Direita: o rótulo e o campo de entrada parecem uma única “unidade”
  • Agrupe os campos relacionados. É um fato bem conhecido que formas longas, com muitos campos, podem se sentir avassaladoras. Os usuários hesitam em preencher esses formulários. Ao agrupar campos relacionados em conjunto, você pode ajudar os usuários a entenderem as informações que devem preencher. Ambos os formulários no exemplo abaixo possuem uma quantidade similar de campos. Mas há uma diferença – todos os campos no formulário correto são categorizados em três grupos. A quantidade de conteúdo é a mesma, mas a impressão nos usuários é muito diferente.
A forma correta facilita o processo de entrada de dados. Crédito da imagem: NNgroup

3. Impeça a desordem visual

Muitos aplicativos e sites sofrem com o amontoamento de muitos elementos e informações juntas, sem espaço respiratório suficiente. Isso geralmente acontece quando os criadores de aplicativos / sites têm um forte desejo de comunicar muita informação ao mesmo tempo. Infelizmente, os usuários têm pouca atenção e mais elementos competem por atenção, menos atenção que um usuário paga pelo layout.

Se você não acha que isso é um problema, veja o exemplo abaixo. É um exemplo extremo do dano causado por muitos objetos que competem por atenção.

A confusão de sua interface sobrecarrega seu usuário com muita informação. O usuário não pode escolher conteúdo importante quando tudo parece ser o mesmo.

Muitos sites sofrem de um problema semelhante. A falta de espaço em branco coloca uma pressão sobre os olhos do visitante e sua paciência. Preenchido com texto e imagens, esses sites frustraram os visitantes e os deixam fugir.

Uma página desordenada não é atraente e não faz com que os usuários desejem ler o conteúdo, especialmente quando não existe uma hierarquia visual.

Se a sua interface sobrecarregar seu usuário com muita informação, reduzir a desordem irá melhorar a compreensão: ao remover as distrações, você força os usuários a se concentrar apenas no que é imediatamente visível. Você pode usar espaços em branco para minimizar a sobrecarga. Pense no espaço em branco como um botão de volume para distrações UI – mais espaço em branco é menor que o ruído, tornando mais fácil o foco. Quando um layout atinge o equilíbrio certo dos espaços em branco, é mais fácil processar e compreender texto, mais fácil de decifrar ícones e imagens e oferece uma melhor experiência geral do usuário.

Esta captura de tela da página do MR PORTER tem muitos espaços em branco. Veja como a página é apresentada em blocos, cada um separado dos outros. Tudo é claramente visível e facilmente legível.

4. Guie o usuário através de conteúdo interativo

Se você deseja que os olhos do seu espectador fluam de um ponto para outro, você deve dar uma razão para fazê-lo. O motivo pode ser o espaço em branco.Quando o espaço em branco é usado de forma adequada, ele permite que uma página crie um fluxo natural.

Ajustar espaços em branco para permitir a verificação eficaz do conteúdo e manter os leitores interessados. Como você pode ver abaixo, isso é exatamente o que o Dropbox faz, orientando os usuários através de alguns recursos-chave do produto usando um padrão zig-zag.

Espaço em branco pode ajudar designers a contar uma história.

A assimetria é outra técnica de espaço em branco que pode ser usada para orientar o olho do usuário para a seção. Quando um elemento usa espaço assimétrico, ele se destaca contra outros elementos circundantes. Parece mais vibrante, o que é particularmente útil se você estiver projetando áreas de uma página onde um link / botão exige mais atenção do que outros.

A assimetria é ótima para chamar a atenção para a área específica (ou elemento) em uma página.

5. Melhorar a legibilidade

O conteúdo é rei. O conteúdo é o que fornece valor para a maioria dos aplicativos e sites. É por isso que um aspecto fundamental da boa usabilidade é a legibilidade do seu conteúdo. Muitos fatores podem contribuir para a legibilidade, incluindo o tamanho da fonte e a cor, ou o uso de títulos. Espaço em branco é outro ponto importante a considerar, uma vez que tem um impacto direto na legibilidade do conteúdo:

  • O espaçamento de linha, ou líder, pode melhorar drasticamente a legibilidade de um corpo de texto. Geralmente, quanto maior a liderança, será melhor a experiência que o usuário terá durante a leitura, embora demais possa quebrar a unidade e tornar o design desconectado
À esquerda: quase sobreposto de texto. Direito: boa facilidade de espaçamento.
  • O espaço em branco entre parágrafos e em torno de blocos de texto realmente ajuda as pessoas a entender o que estão lendo melhor. De acordo com pesquisas em 2004 , esse tipo de espaço em branco aumenta a compreensão em quase 20%.

6. Use como divisor visual

Designers costumam usar linhas horizontais (ou verticais) para criar divisórias visuais necessárias entre seções relacionadas de conteúdo. Embora tais divisores funcionem bem na maioria dos casos, eles têm uma grande desvantagem – um uso intenso de divisores também pode levar ao ruído visual e às interfaces densas e lotadas.

Aplicativo Yelp para Android. Cada item da lista é separado por um divisor de sangria total. A linha em frente parece uma parada – separa separadamente os itens com uma parada difícil entre eles. Como resultado, um layout parece pesado.

À medida que as preferências dos usuários se deslocam para uma interface mais simples, arrancar a IU para seus elementos básicos e necessários é a chave para o sucesso. É possível dividir por elementos e espaçamentos, e não por linhas. Menos linhas e divisórias sempre darão à sua interface uma sensação mais limpa, moderna e mais funcional. Espaços em geral generosos podem fazer com que algumas das interfaces mais confusas parecem convidativas e simples. O ponto real por trás dessa mudança é que é uma mudança de foco no conteúdo e na funcionalidade, ao mesmo tempo em que acabou com elementos supérfluos.

Alavancar o espaço em vez de desenhar linhas ajuda a definir diferentes seções de forma não invasiva.

7. Crie um sentimento de sofisticação e elegância

Embora o espaço em branco seja considerado uma técnica para melhorar a experiência do usuário, ele também pode ser usado para fins puramente estéticos. Sites com maiores quantidades de espaços em branco podem refletir o minimalismo eo luxo.

O espaço em branco contribui para o tom do design geral e pode fazer com que o produto seja luxuoso, colocando mais foco no próprio produto, e não em objetos próximos .

O espaço em branco pode adicionar uma sensação de sofisticação e luxo criando a sensação de que o produto é mais importante do que o imóvel em que vive.

Algumas palavras sobre as partes interessadas

Agora você provavelmente sabe que o espaço em branco é importante. Por outro lado, o espaço em branco pode causar problemas entre designers e partes interessadas. “Há muito espaço em branco. Podemos usá-lo para algo? “É a frase que muitas vezes ouvimos de nossos stakeholders (clientes ou gerentes).

Use esses pedidos como uma oportunidade para educar as partes interessadas. Como designers, é nosso trabalho ajudar os outros a entender por que o espaço em branco é uma parte importante de uma ótima experiência de usuário. Organize uma reunião e explique seu processo de pensamento. Se isso não funcionar, você pode realizar testes A / B. Teste duas versões de um projeto: um proposto por você e outro proposto por um cliente.Os usuários provavelmente preferirão a versão menos desordenada.

Este é um texto traduzido do blog Springboard. Para acessar o artigo original, clique aqui!

Conclusão

Espaço em branco não é uma tela vazia, é uma poderosa ferramenta de design. Mas essa ferramenta é difícil de dominar: a aplicação do espaço em branco é uma arte e uma ciência. Compreender quanto espaço em branco deve ser usado para criar um bom layout requer prática. Quanto mais você projetar, mais você aprenderá.

Compartilhe este artigo:

Deixe uma resposta

Mais artigos pra você ler:
Criatividade – Como pensar fora da caixa?

Criatividade – Como pensar fora da caixa?

A criatividade com certeza é a matéria prima de todo bom projeto de design, é ela que estamos buscando constantemente…
Novidades para 2019 do Clube do Design

Novidades para 2019 do Clube do Design

O Clube do Design trás novidades que reforçam o nosso interesse em te ajudar a descobrir a sua profissão criativa.…
Como calcular tamanho de impressão, resolução de imagem e resolução de saída

Como calcular tamanho de impressão, resolução de imagem e resolução de saída

Quantos pixels deve ter uma imagem que vai ser impressa com 10cm a 300dpi de resolução? Tenho uma imagem de…
Como calcular tamanho de impressão, resolução de imagem e resolução de saída?

Como calcular tamanho de impressão, resolução de imagem e resolução de saída?

Quantos pixels deve ter uma imagem que vai ser impressa com 10cm a 300dpi de resolução? Tenho uma imagem de…
Fechar Menu