Quando oferecer a opção “Desfazer”

Ofereça “Desfazer” logo após uma ação reversível, com escopo claro e restauração confiável. Não use a opção como promessa para efeitos irreversíveis.

Ilustração wireframe de uma ação de interface que pode ser desfeita
Nível de impácto
Médio
Status
Recomendado
Nível de evidênica
Forte evidência

Contexto

“Desfazer” permite corrigir uma ação que já aconteceu, sem exigir uma confirmação antes de cada interação. É diferente de “Cancelar”, que interrompe algo em andamento, e de uma lixeira ou histórico, que oferecem recuperação persistente.

Use a opção quando o sistema puder reverter o resultado com segurança, rapidez e precisão. A pessoa deve entender o que foi alterado, qual ação será revertida e o que acontecerá depois.

Ofereça “Desfazer” imediatamente depois de uma ação iniciada pela pessoa e que possa ser revertida, como arquivar, remover de uma lista, mover, marcar ou alterar um estado.

Descreva o resultado e use uma ação específica. “Conversa arquivada — Desfazer” é mais claro do que uma mensagem genérica acompanhada de um botão sem contexto.

Aplique a mudança na interface sem atraso e mostre o feedback em uma notificação breve. A ação “Desfazer” deve ser alcançável por teclado, ter nome acessível e não retirar o foco da tarefa em andamento.

Faça a reversão restaurar o estado anterior completo: conteúdo, posição, relações, seleção e permissões que tenham sido alteradas. A operação precisa ser confiável e não pode criar uma segunda cópia ou perder dados.

Se a notificação desaparecer, ofereça outra forma de recuperação quando a ação for relevante, como lixeira, histórico ou registro de alterações. Uma ação temporária não deve ser a única proteção contra perda importante.

Para ações com efeitos externos, financeiros, legais, de privacidade ou difíceis de reverter, avalie confirmação antes da execução, atraso controlado ou uma recuperação persistente. Não prometa “Desfazer” quando o sistema não puder cumprir a promessa.

Snackbar do Material Design com ação Undo para reverter uma ação
Exemplo real: o Material Design documenta uma snackbar com uma única ação “Undo”, usada para permitir que a pessoa corrija uma escolha recente. Fonte: Material Design — Snackbars — https://m2.material.io/components/snackbars.

Porque isso importa?

Pessoas cometem enganos, especialmente em telas pequenas, listas densas e ações próximas. A reversibilidade permite corrigir o erro sem impor uma etapa de confirmação a todas as pessoas antes de cada ação.

Baymard trata a reversibilidade como uma alternativa para lidar com toques acidentais com menos atrito. A heurística de controle e liberdade da Nielsen Norman Group também recomenda permitir que as pessoas revertam ações indesejadas.

O padrão só aumenta a confiança quando a reversão é real. Um “Desfazer” que expira cedo demais, restaura apenas parte do estado ou não consegue reverter efeitos externos cria uma falsa sensação de segurança.

  • A ação é reversível.
  • O estado anterior pode ser restaurado.
  • O resultado é visível e compreensível.
  • O erro acidental é plausível.
  • A reversão é rápida e confiável.
  • Existe outra recuperação se o caso for importante.
  • A ação é irreversível.
  • Há efeito financeiro ou legal.
  • Dados sensíveis já foram compartilhados.
  • Outras pessoas sofrerão efeitos imediatos.
  • Não é possível restaurar o estado exato.
  • A ação ainda está em andamento.
Toast do Adobe Spectrum com uma ação Undo relacionada à mensagem
Exemplo real: o Adobe Spectrum mostra um toast com até uma ação relacionada diretamente à mensagem, incluindo o caso “All files archived — Undo”. A orientação alerta que ações temporárias devem continuar disponíveis em outro local quando necessário. Fonte: Adobe Spectrum — Toast — https://spectrum.adobe.com/page/toast/.

Recomendações

Faça

Práticas recomendadas
  • Mostre o que mudou.
  • Use “Desfazer”.
  • Reverta o estado completo.
  • Preserve o contexto.
  • Garanta teclado e foco.
  • Ofereça recuperação persistente.
Wireframe de uma lista com uma ação reversível e uma única opção de desfazer
Exemplo conceitual correto: a mudança é visível, o feedback identifica o estado afetado e existe uma única ação clara para desfazer.

Evite

Práticas a evitar
  • Não use “Desfazer” genérico.
  • Não reverta só parte da ação.
  • Não esconda a ação principal.
  • Não dependa só do tempo.
  • Não prometa o impossível.
  • Não confunda com “Cancelar”.
Wireframe de uma interface com notificações ambíguas e recuperação confusa
Exemplo conceitual incorreto: várias notificações competem entre si, o escopo da reversão não é claro e a recuperação parece pouco confiável.
Snackbar do VA.gov com as ações Undo e Dismiss
Exemplo real: o VA.gov Design System usa “Undo” para reverter uma ação concluída e “Dismiss” para fechar a mensagem. A documentação também prevê novo feedback quando a reversão é concluída e cita o uso em produção ao mover mensagens para uma pasta. Fonte: VA.gov Design System — Snackbar — https://design.va.gov/components/snackbar.

Acessibilidade

O feedback deve informar o resultado sem mover o foco de forma inesperada. A mensagem pode ser exposta em uma região de status, enquanto o controle “Desfazer” permanece operável por teclado, toque e tecnologias assistivas.

Use um nome que explique a ação e o objeto afetado quando necessário. Não dependa apenas de cor, ícone, posição ou desaparecimento da notificação para comunicar o que aconteceu.

Quando a opção tiver tempo limitado, informe a existência da alternativa e ofereça um caminho persistente para ações relevantes. Teste a sequência com teclado, leitor de tela, zoom, toque e diferentes velocidades de interação.

Checklist

  • A ação pode ser revertida de verdade?
  • O sistema restaura o estado completo?
  • A mensagem explica o que mudou?
  • A ação “Desfazer” é específica?
  • O resultado aparece imediatamente?
  • A reversão é atômica e confiável?
  • A ação funciona por teclado?
  • O foco não é movido sem necessidade?
  • O status é anunciado por tecnologia assistiva?
  • Existe uma alternativa persistente?
  • O tempo de recuperação é adequado?
  • O padrão não substitui uma confirmação necessária?

Referências

  • Nielsen Norman Group — 10 Usability Heuristics, User Control and Freedom. Apoia oferecer uma saída para ações indesejadas e permitir desfazer ou refazer quando a pessoa comete um erro. Consultar a heurística.
  • Baymard Institute — Handling Accidental Taps on Touch Devices. Compara confirmação e reversibilidade; recomenda “Desfazer” quando isso reduz o custo de erro sem tornar toda interação mais lenta. Consultar a pesquisa.
  • W3C — WCAG 2.2, critério 4.1.3 Status Messages. Define como mensagens de resultado podem ser expostas programaticamente sem receber foco, princípio aplicável à confirmação da ação e da reversão. Consultar o critério.
  • W3C — técnica ARIA22. Mostra o uso de uma região de status para comunicar atualizações dinâmicas de forma compatível com tecnologias assistivas. Consultar a técnica.
  • Material Design — Snackbars. Documenta uma snackbar com uma única ação e recomenda “Undo” para permitir corrigir escolhas. Também alerta que uma ação oferecida na snackbar não deve ser o único caminho para uma tarefa essencial. Consultar o padrão.
  • Adobe React Spectrum — Toast. Documenta toasts com ação opcional, permitindo que a pessoa responda ao resultado de uma operação a partir do próprio feedback. É uma referência de componente, não uma regra universal. Consultar o componente.
  • IBM Carbon — Notification usage. Recomenda uma única ação contextual por notificação e orienta que notificações com ação permaneçam disponíveis até a dispensa. Consultar a orientação.
  • Interaction Design Foundation — Interaction design patterns. Relaciona histórico de ações e reversão ao gerenciamento de erros e destaca que ações não reversíveis exigem tratamento diferente. Consultar o glossário.
Veja também

Esta recomendação foi útil para você?