# UX em botões Cancelar

> UX em botões de cancelar: boas práticas essenciais. Aprenda posicionamento correto, hierarquia visual e comportamento ideal de ações secundárias. Melhore!

URL: https://dpw.dev/ui-ux/ux-em-botoes-cancelar/  
Publicado em: 2019-10-21  
Categoria: ui-ux  
Tags: interface, web-design  
Autor: Tárcio Zemel

O quê exatamente faz um **botão Cancelar**?

> Artigo baseado em [Why Cancel Buttons Should Never Have a Color](https://medium.com/@uxmovement/why-cancel-buttons-should-never-have-a-color-6ce7e763d7f1).

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.

![Comparativo de botões Cancelar: uma cor fria passa um indicativo diferente de uma cor neutra.](/images/blog/ux-em-botoes-cancelar/porque-botoes-de-cancelar-nao-devem-ter-cor-frio-neutro.webp)

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.

![Comparativo de labels de escape: uma cor fria passa um indicativo diferente de uma cor neutra.](/images/blog/ux-em-botoes-cancelar/porque-botoes-de-cancelar-nao-devem-ter-cor-label-escape.webp)

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](https://color.review/) -- que, inclusive, já apresentamos no [dpw expo #9](/indicacoes/dpw-expo-9-micromodal-js-mockapi-color-review/).

![Comparativo de tom do cinza em um botão Cancelar: é preciso dar preferência a cinzas mais escuros, pela legibilidade/acessibilidade.](/images/blog/ux-em-botoes-cancelar/porque-botoes-de-cancelar-nao-devem-ter-cor-tom-do-cinza.webp)

## 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.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml