O que é um aviso e por que a maioria das pessoas faz errado
Um aviso é basicamente uma mensagem que informa o usuário sobre algo importante antes que ele continue com uma ação. Pode ser de perigo, de informação, de confirmação ou só um lembrete qualquer. O problema é que todo mundo usa os mesmos componentes prontos e acha que isso é suficiente. Na prática, não é.
Achei esse link aqui com um exemplo de um aviso bem didático para quem tá começando: exemplo de um aviso
Tem gente que pensa que aviso é coisa simples e coloca qualquer texto genérico tipo "Tem certeza?" junto com um botão "Sim". Isso não funciona bem. Eu vi um projeto inteiro onde o aviso de confirmação de pagamento era idêntico ao de exclusão de conta. O resultado? Dois usuários cancelaram a própria conta achando que estavam confirmando o pagamento. Erro de design sério que ninguém deveria cometer.
A estrutura básica que funciona na prática
Você precisa de três coisas no mínimo: um título que diga o que é o aviso, um corpo com contexto suficiente para a pessoa entender o impacto real da ação, e dois botões distintos com cores diferentes. Não use o mesmo tom visual para o botão de confirmar e o de cancelar. Isso confunde o cérebro do usuário.
O título deve ser uma frase completa, não um termo solto. "Excluir dados permanentemente" é muito melhor do que só "Atenção". O corpo precisa explicar a consequência direta, não repetir o título. E o botão primário deve levar a cor mais forte da paleta, o secundário deve ser neutro ou transparente. Se você inverter isso, o usuário vai clicar no botão errado com frequência.
Eu montei um componente desses para um sistema de gestão hospitalar há alguns anos. O aviso de confirmação de exclusão de prontuário tinha um campo extra onde o funcionário precisava digitar o código de segurança do seu crachá. Isso parece exagero até você saber que o sistema anterior permitia que qualquer estagiário apagasse um registro inteiro sem nenhum tipo de confirmação real. A gente colocou também um timer de 10 segundos nos botões. Isso evitou vários cliques acidentais durante o expediente, que é quando o pessoal tá correndo e pressionado.
Quando usar cada tipo de aviso
O aviso de confirmação serve para ações irreversíveis ou que têm impacto grande. Exclusão, envio, pagamento alto, alteração de permissões. O aviso de informação serve para coisas que o usuário precisa saber mas não precisa decidir. Uma atualização disponível, um campo obrigatório que foi preenchido incorretamente, um prazo vencendo. O aviso de perigo só deve ser usado quando existe risco real de dano. Não encha a interface de alertas vermelhos se a maioria deles for apenas informativo. O usuário aprende a ignorar tudo que parece urgente.
Eu já vi sistema onde tudo era amarelo ou vermelho. Depois de seis meses, ninguém lia nenhum aviso. A gente reduziu para usar verde só pra sucesso, azul pra informação, amarelo pra alerta e vermelho pro que realmente importa. Em duas semanas o índice de cliques em botões de confirmação subiu 40% porque o usuário voltou a confiar que aquele amarelo realmente significava algo.
Erros comuns que eu vejo todo dia
Um deles é colocar o aviso atrás de um modal que bloqueia toda a tela sem necessidade. Se a ação só precisa de uma confirmação simples, um tooltip ou banner é suficiente. Modal tranca o fluxo e força o usuário a lidar com ele antes de fazer qualquer outra coisa. Isso gera atrito e frustração.
Outro erro comum é o tempo de exibição. Aviso que some sozinho depois de três segundos e não deixa o usuário ler direito é aviso que não existe. Se for informativo, sete segundos no máximo. Se for de confirmação, fica até o usuário responder. Sem exceção.
Tem também o problema do texto. Palavras como "importante", "atenção" e "alerta" no título já dizem nada por si só. O conteúdo é que carrega a informação. Escreva o que vai acontecer, não o que a pessoa deve sentir.
Como montar um exemplo de aviso que não seja ignorado
Pegue um cenário real do seu projeto. Escolha uma ação que tenha consequência. Escreva o título como uma ação clara. Desenvolva o corpo com consequências tangíveis. Coloque dois botões com rótulos que digam exatamente o que cada um faz. Teste com pelo menos três pessoas que não tenham visto o design antes. Se alguma delas clicar no botão errado, refaça.
Eu fiz isso recentemente num sistema de agendamento de consultas. O aviso original dizia "Confirmar agendamento?" com botões "Cancelar" e "Confirmar". Três dos cinco testadores clicaram confirmAR quando queriam cancelar, porque a cor do botão confirmar estava mais forte. Troquei os rótulos por "Manter agendado" e "Desistir", inverti as cores e ajustei o layout. Nenhum erro desde então.
