UX em botões Cancelar

Através de medidas simples, você pode aprimorar seus botões Cancelar e melhorar a qualidade de seu site/app. Saiba como fazer isso.

Ir para o artigo

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.

Comparativo de botões Cancelar: uma cor fria passa um indicativo diferente de uma cor neutra.

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.

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.

Comparativo de tom do cinza em um botão Cancelar: é preciso dar preferência a cinzas mais escuros, pela legibilidade/acessibilidade.

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.

E-book com 10 dicas para montar seu portfolio altamente eficiente e conseguir muito mais clientes e projetos!

Download GRÁTIS