Pare de ser tão quadrado
Como profissional de design, você está familiarizado com (e possivelmente contribuindo para) o aumento do uso de círculos em todos os elementos do design.
De itens de decoração para casa, como espelhos e quadros redondos a ferramentas manuais na loja de ferragens, há círculos por toda parte. Os círculos até chegaram aos nossos sites, aparecendo em cabeçalhos, menus e às vezes bem no meio da página.
Alguns sites de design criaram até mesmo postagens de blog, incluindo ótimas capturas de tela do uso criativo de círculos no design da web. No entanto, pouco tem sido dito sobre a psicologia por trás do uso de círculos no design, ou como a resposta do usuário aos círculos pode ser efetivamente incorporada ao crescente fenômeno do uso móvel.
Sabemos que gostamos de círculos, mas por quê? E como um web designer pode usar melhor os círculos para otimizar a experiência do usuário no design responsivo?
Círculos e o cérebro
Cognição e Percepção
Os círculos atraem as pessoas porque são mais fáceis de entender do que formas e objetos com linhas rígidas.
O olho é atraído pelos círculos e pelas informações contidas nele, e eles são mais rápidos e fáceis para o cérebro processar do que quadrados e retângulos duros.
O matemático e físico suíço Jurg Nonni, autor de Percepção Visual, sugere que a remoção de bordas nos permite perceber mais rapidamente um objeto. De acordo com Nonni, “um retângulo com bordas afiadas requer um pouco mais de esforço visível cognitivo do que, por exemplo, uma elipse do mesmo tamanho. O nosso "olho de fóton" é ainda mais rápido na gravação de um círculo. As bordas envolvem ferramentas adicionais de imagem neuronal. O processo é, portanto, retardado ”.
Curvas Familiares e Confortantes
Além da capacidade cognitiva do cérebro de processar círculos mais rapidamente do que o processamento de quadrados e retângulos, processamos informações e objetos familiares mais rapidamente do que aqueles que não reconhecemos.
Todos reconhecem círculos e as pessoas aprendem a conectar formas com ações e resultados específicos, como o sinal “STOP” do octógono vermelho universal. De acordo com as Diretrizes de Interface Humana do OS X da Apple, “as pessoas aprendem a associar certos comportamentos a elementos específicos com base em sua aparência. Por exemplo, as pessoas reconhecem os botões por sua forma arredondada ”.
Um uso efetivo de círculos em itens de menu icônicos Azonmedia Página de serviços.
Encontramos círculos, ovais e objetos de bordas arredondadas de muitas formas quentes e não ameaçadoras em culturas e ambientes. Nuvens, ovos, o sol e a lua na natureza parecem arredondados a olho nu. Rostos sorridentes, bolos, tortas, figuras curvilíneas agradam aos sentidos.
Nossos cérebros respondem bem a círculos e curvas, enquanto percebem objetos de borda dura como mais duros, mais definidos e com potencial para ser uma ameaça.
Círculos e a experiência do usuário
Os círculos são eficazes no design da Web precisamente por esses motivos.
Usuários on-line são notoriamente impacientes e, como os círculos são mais facilmente percebidos e compreendidos, leva menos tempo para processar as informações que eles representam.
Os usuários móveis são ainda mais impacientes. Eles também estão ocupados, muitas vezes em movimento, multitarefa e usando um dedo indicador ou polegar para navegar em seu dispositivo portátil. Eles querem suas informações AGORA. Os círculos ajudam os usuários de dispositivos móveis a identificar as informações pesquisadas com mais eficiência.
Círculos e polegares
Outra maneira de os círculos serem benéficos em um ambiente de design responsivo e primeiro móvel é sua adequação como elementos em interfaces touchscreen.
À medida que os smartphones touchscreen e os usuários de tablets tocam com os dedos, deslizam ou deslizam para a informação que procuram, faz sentido usar círculos para direcionar o usuário. Eles não apenas imitam a forma da ponta do dedo, associamos círculos e bordas arredondadas com botões de pressão e nossos cérebros processam rapidamente as ações necessárias.
Desenvolvedor web Oliver James Gosling
Quando você incorpora círculos em uma interface móvel com tela sensível ao toque, projete na menor tela. O texto ou as imagens dentro do círculo ainda devem ser facilmente lidos, e o tamanho deve permanecer pelo menos do tamanho de um dedo, ou 44 pixels.
Círculos e espaço na tela
A boa notícia sobre o uso de círculos no design responsivo é que o CSS3 simplifica muito os requisitos de codificação.
A má notícia é que os círculos ocupam muito espaço e resultam em mais área de tela aberta.
Como o espaço da tela em smartphones e tablets pode ser muito pequeno, como você pode introduzir círculos sem se preocupar em ficar tão pequenos que são impossíveis de ler, tocar ou clicar?
Uma interface móvel simples
Isso ajuda a manter sua interface móvel simples. Como o olho é atraído para o círculo de qualquer maneira, não há nenhum ponto em atravancar o resto da tela com o conteúdo que o usuário perderá.
A menos que façam parte do cabeçalho ou do logotipo, mantenha o uso do círculo no mínimo de um ou dois em cada página. Tente usar um botão de pesquisa circular ou use um para sua frase de chamariz, como "ligue aqui" ou "inscreva-se aqui".
Gravitate Design usa círculos e cores para atrair o olho para o logotipo, portfólio e texto na página inicial.
Fundos e botões de compartilhamento
Como acontece com qualquer elemento de design, o uso de círculos deve adequar-se ao conteúdo, produto ou serviço, estilo e marca do site. Deve melhorar a experiência do usuário e simplificar a interface.
Se o uso de uma frase de chamariz não for apropriado para o site ou se os itens de navegação e menu simplesmente não funcionarem dentro de um círculo, considere incorporar um círculo ao plano de fundo. Use um círculo maior em segundo plano para chamar a atenção para a parte mais importante do conteúdo da página (semitransparente atrás do texto).
Lembre-se, o conteúdo é o que o usuário móvel está aqui para em primeiro lugar. Incentive o engajamento do usuário escolhendo botões redondos de compartilhamento de mídia social em vez das opções retangulares.
Ícones circulares em design responsivo
Uma das formas mais populares de incorporar círculos em sites é como ícones em um menu. Isso combina bem com o design responsivo, pois substitui o texto longo e / ou confuso por uma imagem mais simples.
Buza usa círculos para complementar o menu móvel vertical.
Um ícone circular ocupa menos espaço, permitindo mais espaço para o conteúdo. Parece bom e o usuário processa rapidamente o que representa.
Ovais ou retângulos arredondados
Talvez você não esteja pronto para envolver seus braços em um grande círculo antigo. Tudo bem. Mas não fique com hard-edges.
Adicione alguns retângulos ou ovais arredondados ao seu kit de ferramentas de design responsivo. Os cantos suavizados facilitarão o foco no conteúdo das curvas, em vez de chamar a atenção para as bordas externas.
Palavra final
Embora os web designers passem horas se angustiando com os méritos de círculos ou retângulos com bordas arredondadas em comparação com bordas nítidas, quando se trata de agradar o usuário com design móvel, tudo se resume ao conteúdo. O usuário deseja conteúdo atraente e útil, apresentado em uma interface simples e fácil de encontrar. Tudo o resto é secundário.
Embora o design da Web responsivo busque responder ao ambiente, ele também deve responder às necessidades do usuário. Os usuários reconhecem a forma familiar do círculo, percebem isso rapidamente e podem apontar facilmente o ponto clicável na tela. Use um círculo simples em seu próximo projeto de design responsivo. Seus usuários vão agradecer por isso.
Você usa círculos para suas frases de chamariz? Você joga seguro com retângulos sutilmente arredondados? Deixe-nos saber nos comentários abaixo.
Imagem em destaque / miniatura, imagem dos círculos via Shutterstock