O quê exatamente faz um botão Cancelar?
Ele descarta a tela atual dos usuários e os traz de volta à tela anterior. Este botão de dispensa é uma salvaguarda para evitar alterações indesejadas no sistema. Mas quando parece um botão de chamada para ação (CTA), é difícil reconhecer.
O botão Cancelar deve significar algo como um retorno seguro, não uma chamada à ação. Em outras palavras, o botão Cancelar nunca deve ter uma cor de fundo.
Uma cor neutra para um botão neutro
Um botão colorido sinaliza uma CTA. Um botão Cancelar não é uma chamada para ação, já que nenhuma alteração no sistema ocorre depois que os usuários o pressionam.
Você não deve enfatizá-lo com cores, do contrário, passará essa impressão errônea a quem usa o site/app. Em vez disso, é necessário que eles saibam e fique bem claro que o botão não fará alterações e é uma “fuga” da ação.
O botão Cancelar deve ter uma cor neutra para indicar que é um botão neutro e não-comprometedor. Quando as pessoas virem que o botão Cancelar não tem cor, elas o reconhecerão como o substituto da segurança mais fácil. É fundamental que todos que precisem “escapar” de uma tela de confirmação percebam isso inequivocamente.
Quando cada botão na tela tem uma cor, eles estão competindo por atenção. A competição faz com que as pessoas ponderem cada ação por mais tempo. Um botão Cancelar de cor neutra torna mais rápido a decisão por não competir; aqueles que estão preparados para agir também não se distrairão com um botão neutro.
“Cancelar” pode ter muitos nomes
Nem todos os botões Cancelar têm um rótulo “Cancelar”, mas funcionam da mesma forma que um. Por exemplo, um botão Cancelar pode ter o rótulo “Agora não”, “Não, obrigado”, “Talvez mais tarde” ou “Ignorar”, dependendo do contexto. Se o botão tiver um comportamento de “desprezo”, trate-o como um botão Cancelar, pois serve à mesma função.
Quanto mais botões houver na tela, mais necessária será uma saída. Quando todos os botões têm uma cor, a fuga não é clara. Mas quando o botão Cancelar é de uma cor neutra, isso torna as opções mais intuitivas.
Um cinza escuro o suficiente
Ao usar cinza em um botão, é essencial deixar o cinza escuro o suficiente. Caso contrário, o botão não é legível e pode parecer que está em um estado desativado.
Para garantir a legibilidade do botão, verifique o contraste das cores com uma ferramenta de taxa de contraste WCAG 2.0, como Color Review — que, inclusive, já apresentamos no dpw expo #9.
Conclusão
Quando a maioria das pessoas se depara com uma tela de confirmação, elas estão prontas para agir. Mas, para aqueles que a ativam por engano ou mudam de idéia sobre a ação, o botão Cancelar é sua segurança.
Um botão Cancelar colorido envia os sinais errados. Isso faz com que as pessoas o percebam como um CTA em vez de um retorno à segurança. Neutralize o botão Cancelar para que todos tenham mais facilidade em sair das telas de confirmação.
Como visto, através de pequenas medidas é possível aprimorar a UX de botões Cancelar. Prestando atenção e as implementando, efetivamente, seu site ou app terá um acréscimo de qualidade imediato.