O que é?
Feedbacks ajudam as pessoas usuárias a saber o status atual de uma página web ou aplicativo, descobrir o que podem fazer a seguir e entender os resultados das suas ações.
O feedback é uma resposta ou reação a uma mensagem recebida. A resposta pode ser fornecida pelo usuário ou pelo sistema e se apresenta ou é solicitada através de um componente ou página de feedback.
Quando usar
- Para localizar a pessoa usuária dentro do sistema
- Informar o progresso para conclusão da tarefa ou se a tarefa já foi concluída
- Mensagens informativas sobre o resultado de ações tomadas pela pessoa usuária
- Mensagem informativa sobre o resultado do fluxo
Status de feedback
A comunicação entre o sistema e usuário deve manter um padrão de fácil entendimento por parte da pessoa usuária. A estrutura de um bom conjunto de feedback deve possuir sentidos semânticos claros, e o Sirius possui cores para delimitar cada um deles.
| Status | Sentido semântico | Cor |
|---|---|---|
| Success | Positivo, concluído com sucesso | |
| Warning | Atenção, alerta de nível médio | |
| Danger | Erro, ação destrutiva, alerta de nível alto | |
| Info | Mensagem neutra informativa ou dica |
Além do uso das cores para expressar uma mensagem, os ícones podem ser úteis numa aplicação mais assertiva para um feedback como um retorno do sistema para o usuário.
Componentes e templates de feedback
A seguir estão listados as características de cada componente ou template de feedback do Sirius.
| Componente/Template | Urgência | Conteúdo | Comportamento |
|---|---|---|---|
| Tooltip | Baixa | Informativo ou dica | Aparece com mouseover |
| Hint box | Baixa | Informativo, dica ou ajuda | Persistente ou dispensável |
| Toast | Média | Resposta as ações da pessoa usuária | Transitório e dispensável |
| Alert | Média | Erros, alertas e avisos no contexto global | Persistente até ser dispensado |
| Modal | Alta | Informativo, necessita de decisão | Bloqueante e dispensável |
| Página de feedback | Muito alta | Conclusão das ações da pessoa usuária | Persistente |
Tooltip
Tooltips são componentes de mensagens acionadas pelo usuário que fornecem informações adicionais sobre um elemento ou recurso da página. É uma pequena parte de uma informação contextual, que busca explicar para o usuário o propósito de outro componente da tela ao apontar ele com o mouse.
Acessar diretrizes de Tooltip >
Hint box
O componente hint box ressalta ou reforça uma informação a pessoa usuária. Seja uma dica, um lembrete ou uma explicação.
É usado de forma contextualizada e sempre refere-se ao fluxo ou a página atual. O componente é posicionado na área de conteúdo, ocupando uma linha. Pode ser dispensado ou não, dependendo das regras de negócio.
Pode ser usado para notificar mudanças de status assíncronas.
Acessar diretrizes de Hint box >
Alert
O componente alert comunica ao usuário informações que afetem várias ferramentas simultaneamente ou a plataforma completa. Ele deve conter um status associado e sempre ser dispensável.
É usado geralmente para notificar erros internos do sistema. Por exemplo: um canal está momentaneamente indisponível.
Acessar diretrizes de Hint box >
Toast
O componente toast exibe mensagens de feedback que retornam ações da pessoa usuária durante o fluxo. Ele é perceptível, mas não interrompe a experiência e não exige que uma ação seja tomada.
Modal
O componente modal é uma caixa de conteúdo em nível sobreposto ao restante da interface. É usado quando precisamos fornecer uma mensagem, informações críticas ou solicitar uma decisão. As informações da interface gerada abaixo da modal ficarão bloqueadas enquanto alguma ação não for executada.
Tela de feedback Breve
O template página de feedback informa a conclusão de um fluxo e os próximos passos. É usado para confirmação dos dados ao enviar um formulário ou preencher um questionário. Sempre deve estar associada a um status: success, danger ou info.
