Vai um botãozinho aí?

Como criar botões que se convertam em ações.

Interfaces gráficas não foram feitas para serem apreciadas, mas sim para serem usadas, conectando o homem com sistemas e máquinas, botões são provavelmente o elemento mais comum dentro delas, podendo ser encontrados em todos os tamanhos e formatos.

Quantas vezes você não ficou procurando o botão que realizaria a próxima ação? Ou ainda quantas vezes você não ficou confuso numa página de download? É quase como jogar campo minado!

E quando se fala de botões…

1. Tamanho importa

Sem trocadilhos aqui, o tamanho do botão importa, e muito, pense que ele irá ser clicado e tocado (graças aos smartphones e tablets) e por isso seu tamanho é altamente importante.

Mas qual é o tamanho ideal?

Segundo o guia de orientações da interfaces humanas da Apple o mínimo que um botão deve ter é de 44 x 44 pixels de tamanho total (o que dá uma área de 8mm em tela) contando seu respiro, ou seja, não se trata apenas de criar botões grandes, mas de dar um bom espaçamento entre eles, reduzindo que outros botões sejam clicados.

Um estudo da MIT , que analisou senso táctil, chegou a um número ainda maior, apontando que o toque de nosso indicador tem uma largura aproximada entre 10x14 milímetros, o que se converte em 45–57 pixels.

Como será exemplificado logo abaixo, é importante lembrar que não usamos somente o indicador em telas de toque, então não tenha medo de desenhar maiores botões.

2. Cores e contraste direcionam

Quando se fala em cores existe um grande número de dados conflitantes, alguns simplesmente usam este estudos de cores, outros simplesmente juram que verde é sempre o melhor.

Não há cor mágica.

Prefira uma abordagem menos xamanística, e escolha tudo através de testes A/B para o seu negócio em específico.

Cores servem principalmente para gerar contraste, e isso é fundamental para diferenciar tarefas primárias de secundárias numa interface, caso você seja usuário de mac já provavelmente percebeu como isso é bastante utilizado.

Voltando a falar de cores o único ponto talvez importante a ser mencionado aqui é evitar utilizar botões verdes e vermelhos no mesmo diálogo, pois pode gerar alguma confusão mental na escolha.

E claro, existe obviamente a questão da acessibilidade e daltonismo aqui, mas esse é um assunto tão especial que é tema para um post dedicado a isso.

3. Posicionamento na tela

Duas coisas devem ser levadas em consideração aqui, o padrão de leitura humano em F (da esquerda para direita e de cima para baixo), e a usabilidade em dispositivos mobile (conforme os vários tipos de pegadas), que de certa forma são conflitantes, mas não chega a ser nenhum grande mistério.

Vamos por partes então:

3.1 O "padrão F" de leitura

Existe um padrão bastante conhecido de leitura chamado de "padrão F", caso você ainda não o conheça eu sugiro muito que leia este artigo de Nielsen que reúne vários estudos de calor e ajuda a exemplificar isso, é pensando nele que você deve posicionar elementos quando forem exclusivamente pensados para desktop, no entanto caso exista também tráfego mobile a coisa toda torna-se um pouco mais complexa.

3.2 A forma de usar smartphones

Aqui eu insiro um estudo que gosto bastante, que procurou entender como as pessoas seguram smartphones, ele nos mostra basicamente que apesar da posição mais comum seja com uma única mão, as outras também possuem como ponto mais difícil de ser alcançado o topo da tela.

A partir dessa imagem acima fica fácil imaginar um padrão parecido em tablets, ainda que este seja com o uso panorâmico (com o dispositivo de deitado), na prática você pode reparar que:

• É comum que a maioria dos grandes apps localizem seus botões de menu e voltar no canto superior esquerdo, ele é bem visível lá, mas exatamente por ser difícil acesso não será clicado sem querer.
• Fica mais fácil posicionar seu botão no rodapé
• É realmente difícil tocar o extremo vermelho sem mudar a pegada da mão :(

4. A malandragem de escrever bons CTAs

CTA que se refere ao termo em inglês “Call to action”, que é basicamente uma instrução para seus usuários gerando uma provocativa de resposta imediata, normalmente usando modo imperativo, como “Compre Agora”, “Assine Hoje” ou coisas do gênero, algo bastante comum ao final de peças publicitárias, concluindo assim qual é a próxima ação esperada de sua audiência.

Redatores publicitários dominam muito bem essa arte de escreverem bons CTAs, acontece que nem sempre ao criar interfaces digitais você possui um redator ninja disponível, e exatamente por isso que escrevi essa parte

4.1 Verbalize e seja óbvio

É comum vermos botões com somente "assine", "compre" e outros CTA's bastante genéricos, mas lembre-se o quanto mais específico, curto e óbvio você conseguir ser melhor, pois desta forma ficará claro qual é o próximo passo para o usuário e o que ele poderá esperar em sua sequência.

Compre, Assine, registre e ganhe. Não importa posicione sempre que possível o verbo antes no botão isso o torna mais óbvio.

4.2 Mostre benefícios

Algumas vezes o verbo e o benefício podem sem a mesma coisa, como por exemplo "Ganhe seu mês de acesso grátis", mas nem sempre isso acontece, e as vezes sem perceber puxamos para o nosso lado como "Crie sua conta agora". O ideal é sempre que possível trazer o benefício para o lado do usuário e não da tecnologia ou negócio.

Aqui cabe exatamente o trabalho feito pela Apple na propaganda do iPod, não se trata de 1GB para música, e sim 1000 músicas no seu bolso.

4.3 Gere senso de urgência

Palavras como "hoje", "agora" adicionam senso de urgência e fazem parecer que a ação e sua resposta será rápida e fácil.

Quando necessário utilize essa técnica em conjunto com promoções, elas podem potencializar seu efeito como em "Compre só hoje por 39.99"

O "textinho" (microcopy) ajuda muito

Não vou me prolongar muito nesse tema, já que o Fabricio Teixeira escreveu um artigo bem legal sobre o assunto, vale a pena dar uma conferida ;)

5. Animações

Animações podem ser usadas para uma infinidade de objetivos, desde entreter o usuário e reduzir sua percepção de tempo em uma tela de loading, até a ajudar a imprimir a personalidade de uma marca.

Quando se fala em botões no entanto quando se fala em botões eles são pouco utilizados, podendo ajudar e muito no entendimento de uma tarefa ou simplesmente aumentando o contraste entre os demais.

Bônus: Seu botão é lambível?

Sempre pensei que botões devem ser desenhados como se parecessem de verdade, e eu não quero entrar em nenhum debate de esqueumorfismo aqui, mas todo mundo já foi criança um dia e minha teoria (ainda que infantil) e que qualquer pessoa adoraria apertar uma sala de botões só por curiosidade, é esse tipo de desejo que deve existir num botão.

O tio Steve tinha uma boa frase sobre isso:

“We made the buttons on the screen look so good you’ll want to lick them.”
- Steve Jobs