Anatomia de um botão de ação

Anatomia de um botão de ação

Todo botão de ação terá os seguintes componentes:

Texto

É o texto que aparece para a pessoa no botão. O texto deve ser claro, objetivo e, em geral, está no infinitivo (mas há exceções). Por exemplo:

• "Concluir"

• "Aprovar"

• "Revisar",

• "Aprovar com ressalvas"

• "Rejeitar"

• "Para análise do Diretor"

Em alguns casos, também, principalmente em tarefas do tipo instrução, costuma-se usar o pretérito perfeito simples na voz passiva, para indicar a conclusão de atividades que foram feitas fora do sistema. Por exemplo:

• "Compra realizada"

• "Relatório auditado"

• "Emissão finalizada"

É importante que o texto e o padrão do texto (seu tempo verbal, por exemplo), estejam padronizados ao longo de todas as tarefas e todos os aplicativos. Isso traz uma melhor experiência de uso e facilita a execução de atividades pelas pessoas, que mais rapidamente reconhecem as decisões que devem tomar. Veja, por exemplo, abaixo, uma falta de padrão no texto dos botões, pois estão em tempos verbais diferentes, quando poderiam estar no mesmo:

Ação

A ação é o resultado que é disparado ao clicar no botão. Ela não aparece visualmente no botão e, por consequência, deve representar a ação ocorrida relacionada ao texto do botão.

Essa é a informação que será armazenada pelo aplicativo (e não o texto). Geralmente, está no pretérito perfeito simples na voz passiva (exemplo: foi aprovado).

Por exemplo:

Cor de fundo

É a definição da cor do fundo do botão. Lembre-se que pessoas são visuais e reconhecem cores antes de reconhecerem textos. Por isso, a cor é tão importante.

• As cores devem estar intimamente ligadas e conectadas ao texto do botão. Por exemplo, não faz sentido um botão "Aprovar" na cor vermelha. Veja o conjunto de botões abaixo: eles podem levar pessoas a tomarem decisões erradas:

• As cores devem, na medida do possível, estarem padronizadas ao longo de todo o aplicativo e, se for possível, ao longo de todo o sistema. Se você usa um tom específico de verde para o botão Aprovar, tente utilizar a mesma cor ao longo de todos os aplicativos e todas as tarefas.

Cor de texto

A cor de texto é uma peça fundamental de acessibilidade. Ela deve compor muitíssimo bem com o cor de fundo, de modo a gerar um alto contraste. Um alto contraste entre a cor de fundo e a cor de texto assegura uma melhor leitura dos comandos da tela, permitindo que mais pessoas consigam ler e interpretar os textos.

Esse é um assunto muito sério e nossa recomendação geral é que você se preocupe primeiro com o alto contraste das cores e a acessibilidade, e segundo com questões e preferência estéticas.

As Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) são desenvolvidas por meio pela W3C em cooperação com indivíduos e organizações em todo o mundo, com o objetivo de fornecer um único padrão compartilhado para acessibilidade de conteúdo da Web que atenda às necessidades de indivíduos, organizações e governos internacionalmente. Os documentos WCAG explicam como tornar o conteúdo da web mais acessível para pessoas com deficiência.

Veja, por exemplo, o botão abaixo. Apesar de talvez legível para você, ele não o é para muitas pessoas. Não existe um alto contraste entre a cor de fundo e a cor do texto.

Existem diversas ferramentas na Internet, gratuitas, para verificar se o contraste de cores é adequado conforme padrões internacionais. Uma delas é o https://contrastchecker.com/. O botão acima, por exemplo, roda em todos os testes de todos os níveis de padrões de acessibilidade.