Botões: evolução e boas práticas

26/05/2018
imagem com carrinho de compras au fundo e em primeiro plano um smartphone com uma tela de checkout.

Olá pessoas, tudo bem com vocês?

Os botões são elementos muito comuns em qualquer interface. O design pode ter mudado muito ao longo dos anos mas o intuito de ser visto e reconhecido sempre foi prioridade. Por isso vale a pena mostrar um pouco da evolução desse elemento e apresentar boas práticas que devem ser seguidas para a criação de botões eficazes.

Botão Tridimensional

Tela de salvamento de arquivo do windows 95

Tela de salvamento de arquivo do windows 95

 

Os botões do Windows 95 tinham sombras e destaques pesados para que se destacassem. A borda, o gradiente e a sombra projetam o elemento contra o plano de fundo e o conteúdo, o que o torna facilmente identificável como um elemento clicável.

Botões com design Skeuomorphic

A palavra é difícil, mas o significado não. No design digital, skeuomorphism é quando os elementos são criados para parecer objetos reais, seja copiando a textura ou, no caso do botão, criando um botão exatamente igual a um botão real. O design Skeuomorphic tinha como função ajudar os usuários a entender como interagir com uma nova interface. A calculadora é um bom exemplo.

 

Calculadora em design Skeuomorphic

Calculadora em design Skeuomorphic

Botões com design flat

Uma das principais mudanças ocorridas recentemente em UI foi o abandono total das características do design Skeuomorphic para o flat. O design flat foi visto como uma maneira de explorar o meio digital sem tentar reproduzir a aparência do mundo físico. Todas as características que eram tradicionalmente usadas para identificar o clique foram removidas.

 

Calculadora com design flat

Calculadora com design flat

 

Com esse visual “achatado”, como os usuários identificam os botões?

Os usuários precisam de indicativos visuais (visual signifiers*) para saber onde clicar/tocar em uma interface. A cor é extremamente importante no design flat, porque ao usar um botão flat, a cor será fundamental para ajudar o usuário a reconhecer o botão e realizar uma ação.

*qualquer marca, som ou qualquer indicador perceptível que comunique o comportamento apropriado (Ex.: ícones ou cores).

Botões flutuantes

O Google Material Design nos trouxe um novo tipo de botão: os flutuantes. Esses botões podem ser vistos em várias posições na interface e chamam a atenção para ações patrocinadas ou primárias. Eles atuam como botões de call to action (botões de ação), destinados a representar uma única ação que os usuários realizam em uma tela em particular.

A interface do Google Maps mostra exemplos de botões flutuantes:

 

Interface do google maps no Android

Interface do google maps no Android

Ghost Buttons (botões fantasma)

Em 2014, uma das tendências mais importantes em UI foram os botões fantasma. Os botões fantasma são aqueles botões transparentes e “vazios” em formato retangular ou em certos casos, quadrada. Os botões fantasmas geralmente são delimitados por uma linha muito fina, enquanto a parte interna consiste em texto simples.

Os botões fantasma ficaram populares depois do lançamento do iOS 7, em que a maioria dos botões são botões fantasma. Com uma forma retangular simples e uma fonte bem ajustada, o botão se encaixou perfeitamente na interface do sistema.

Esse tipo de botão é mais usando atualmente como botão de ação quando se deseja obter um visual clean e elegante.

 

Tela inicial do site Transtitions

transitions1020.com

Melhores práticas para botões

Antes de começar a projetar seus botões, é hora de pensar em como o design comunica a affordance. Como os usuários entendem o elemento como um botão? Muito provavelmente você deveria:

  • Criar botões realmente parecidos com botões
  • Facilitar a interação do usuário com os botões
  • Identifique a função do botão (label)
  • Use o contraste de cores para guiar o usuário para a ação

E certifique-se de manter a consistência em todos os controles da interface, para que o usuário possa identificar e reconhecer os elementos da interface do aplicativo ou do site como botões em cada página.

Forma

Uma aposta segura é criar botões quadrados ou quadrados com cantos arredondados, dependendo do estilo do site ou aplicativo. Os botões de formato retangular foram introduzidos no mundo digital há muito tempo e os usuários também estão familiarizados com eles.

Algumas pesquisas sugerem que cantos arredondados melhoram o processamento de informações e atraem nossos olhos para o centro do elemento.

 

Botão com cantos arredondados chamam a atenção para a informação

Botão com cantos arredondados chamam a atenção para a informação

Tamanho e padding

O tamanho dos botões também tem um papel importante em ajudar os usuários a identificar esses elementos. Você deve considerar o tamanho dos elementos de botão, bem como o preenchimento entre elementos clicáveis:

Tamanho

Quando o toque é usado como um método principal de interação para o seu aplicativo ou site, você pode se basear no estudo do MIT Touch Lab para escolher um tamanho adequado para os seus botões. O estudo do MIT constatou que as médias de tamanho das almofadas dos dedos estão entre 10 e 14 mm e as pontas dos dedos são de 8 a 10 mm, o que faz com que 10 mm x 10 mm seja uma bom tamanho para uma boa experiência.

 

 

imagem indicando a média da medida do toque

Fonte: uxmag.com

 

Padding

O preenchimento entre os botões ajuda a separar os controles e fornece à interface espaço de respiro suficiente.

 

Exemplo de espaçamento entre elementos

Exemplo de espaçamento entre elementos

Label (rótulo)

Você deve ser o mais direto possível ao escolher o rótulo para o botão. Adicione uma mensagem clara do que acontece após o clique/toque ou indique o que um elemento faz usando os verbos de ação (Assine, Cadastre-se, Inscreva-se, etc)

Cor: Ao escolher uma paleta de cores, lembre-se de pensar em como as cores ajudarão os usuários a navegar e entender a ação:

– Use cores e contraste para ajudar os usuários a ver e interpretar o conteúdo do seu aplicativo, interagir com os elementos certos e entender as ações. No exemplo abaixo, o uso do vermelho para o botão, alerta para uma ação sem volta, por isso a cor deve ser contrastar totalmente com a paleta de cores primária.

 

importancia da escolha de cor para botões

Fonte: wired.com

 

Crie o botão para a ação mais importante bem destacado dos demais. Temos o exemplo clássico da Amazon usando um botão amarelo contrastante para atrair a atenção do usuário para a principal ação da página – adicionar ao carrinho.

 

o principal botão de ação da Amazon se evidencia dos demais - adicionar ao carrinho

 

Nada de botões bonitos. Crie botões eficazes

Cada botão destina-se a direcionar os usuários para a ação que você deseja executar. Pense na interface web ou no aplicativo como uma conversa iniciada por um usuário ocupado. O botão desempenha um papel crucial nesta conversa – uma interação suave mantém a conversa fluindo enquanto falhas (como a incapacidade de encontrar um botão) criam interrupções e, consequentemente, não haverá conversão.

Todas as pesquisas e convenções devem ser levadas em consideração e o mais importante é entender o público alvo. Testes constantes na interface pode fazer com que uma simples mudança na cor de um botão aumente a taxa de conversão.

Obrigada por ler até aqui!

Bom fim de semana!

Cya!