Feedback Page

O que é

A 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/neutral.

Veja abaixo um exemplo de onde a tela de feedback deve estar em um fluxo:

Estrutura

A página de feedback é construída a partir das necessidades do fluxo. Poucos elementos são obrigatórios.

1. Breadcrumbs (opcional)
2. Ícone
3. Título
4. Descrição
5. Lista horizontal (opcional)
6. Botão text ou link (opcional)
7. Botões primário e secundário

A lista horizontal deve ser usada quando é preciso apresentar dados a pessoa usuária no final do fluxo. Ex: a pessoa precisa de um token para ativar um produto.

A página de feedback também pode ser usada com o menu lateral.

Tipos de página de feedback

Grid Full (sem menu lateral)

Success

Feedback de sucesso. Use para informar ao usuário que uma tarefa foi concluída com sucesso e que tudo está funcionando corretamente.

Danger

Feedback de alerta de nível alto. Use para erros do sistema ou ações críticas.

Info / Neutral

Feedback neutro. Informe os usuários sobre algo relevante. Os ícones usados são info e clock (para tempo ou em andamento).

Grid com menu lateral

Aplicação

A estrutura descrita nessa página é uma recomendação para que possamos padronizar as telas de feedback e manter a consistência.

Caso o fluxo em que esteja trabalhando precise de uma página de feedback com um componente que não foi descrito, pedimos que entre em contato com a equipe de DesignOps. Dessa forma, a equipe pode ajudá-lo ou ajudá-la e você poderá contribuir com a evolução do princípio de Página de feedback no Sirius Design System.

Veja abaixo um exemplo com todos os componentes recomendados.

Grid com menu lateral/1366x

O espaçamento entre o Breadcrumb e o título deve de 40px.

Grid Full (sem menu lateral)/1366x

O espaçamento entre o Header e o título deve ser um número de 220px.