Dia 13: Feedbacks de sistema
Mantenha seu usuário informado! Aprenda a criar alertas, toasts e skeleton screens para uma comunicação clara e transparente.
Por que o sistema precisa 'conversar' com o usuário?
Imagine clicar em um botão de "comprar" e nada acontecer. Você clicou direito? A internet caiu? O site travou? A falta de feedback gera ansiedade e incerteza. Um bom sistema sempre responde, confirmando ações, alertando sobre erros ou mostrando que está trabalhando. Isso mantém o usuário calmo, confiante e no controle da situação.
As ferramentas da comunicação
Existem diferentes formas de dar feedback, cada uma adequada para um tipo de situação:
- Alertas (ou Modais): São caixas de diálogo que interrompem o usuário para entregar uma mensagem crítica ou pedir uma confirmação importante. Devem ser usados com moderação. Ex: "Você tem certeza que quer deletar este item?".
- Toasts (ou Snackbars): São pequenas notificações não-intrusivas que aparecem por alguns segundos (geralmente no canto da tela) e depois somem sozinhas. São perfeitas para confirmar ações bem-sucedidas. Ex: "Perfil salvo com sucesso!".
- Skeleton screens (Telas de Esqueleto): É uma versão "esquelética" da interface, com caixas cinzas, mostrada enquanto o conteúdo real está carregando. Isso melhora a percepção de velocidade, pois o usuário já vê a estrutura da página se formando.
Seu desafio de hoje: o porta-voz do sistema
Sua missão é projetar os três tipos de feedback que aprendemos, cada um para uma situação específica, mostrando que você sabe se comunicar com o usuário.
Checklist do desafio:
- Desenhe um Alerta modal para uma ação perigosa, como "Excluir sua conta permanentemente?". Inclua um botão de ação destrutiva (vermelho) e um de "Cancelar".
- Desenhe um Toast de sucesso que apareceria após o usuário salvar as configurações do perfil.
- Desenhe a tela de um Skeleton Screen para o card de desafio da nossa página inicial, mostrando placeholders para a imagem, título e botões.
Concluiu? Mostre como seu design se comunica!
Um bom feedback é sinal de um design que se importa com o usuário. Mostre como você aplicou esse conceito.