Padrões de design - Páginas de edição

Esse documento estabelece os padrões e fornece um guia para a definição do layout e da interface das telas de edição dos cadastros do sistema. O layout padrão do sistema contará com os campos do cadastro e seus botões de ação para editar, excluir e salvar.

Após o usuário dar um clique no registro do grid, o sistema deve levar o usuário até a página de visualização dos detalhes, onde possibilitará o usuário ver todas as informações do cadastro selecionado. Dentro dessa página de visualização dos detalhes o usuário poderá editar ou excluir o cadastro.

Logo que o usuário abre a página de visualização dos detalhes do cadastro, o sistema deve possibilitar o usuário voltar a página inicial do módulo, editar o cadastro que está sendo visualizado ou excluir o cadastro. Se o usuário clique em voltar, o sistema deve direciona-lo para a página inicial do módulo, possibilitando que edite outro cadastro, porém se o usuário clicar no botão de edição do cadastro, o sistema deve trazer todos os campos desabilitados para edição mostrando respectivamente o nome do campo e as informações que foram digitadas anteriormente, para que as mesmas possam ser modificadas e se o usuário clicar no botão de exclusão, o sistema deve exibir uma mensagem perguntando se realmente deseja excluir o cadastro. Sempre que o usuário incluir um novo cadastro, ou realizar uma edição, caso os campos obrigatórios não forem preenchidos, o sistema deve exibir uma mensagem em vermelho abaixo do campo.

Sempre que o usuário logado estiver efetuando uma determinada ação, o sistema deve modificar o breadcrumb. Logo que o usuário for direcionado para a página de visualização dos detalhes do sistema, o sistema deve mostrar o caminho do breadcrumb com a função que está sendo executada, que neste será a página de visualização de detalhes, quando o usuário clicar no botão de edição e o sistema deve modificar o breadcrumb para editar.

EX.: Página inicial/ Pessoas/ Editar pessoas ou Página inicial/ Pessoas/ Detalhes da pessoa.

Em todas as telas para a edição dos cadastros, o sistema deve exibir os campos no padrão do template do inspinia, com seus campos de formulários, datas, listas e marcações conforme foi definido nos padrões de design do sistema.

Ao visualizar e implementar o novo layout do sistema, deve-se observar alguns pontos a fim de padronização em todas as páginas, que são:

• O sistema deve abrir a página com os dados do cadastro com apenas um clique no registro do grid;
• Ao abrir a página do cadastro, o sistema deve trazer os campos desabilitados com apenas a visualização dos registros;
• Ao abrir a página de visualização dos detalhes, o sistema exibe o título da página como detalhes da página? Ex.: Detalhes da pessoa - Geoserviços;
• Ao abrir a página de edição, o sistema exibe o título da página como edição da página? Ex.: Editar pessoa - Geoserviços;
• Ao abrir a página de visualização dos detalhes, o sistema deve trazer habilitado apenas os botões de “Voltar”, “Editar” e “Excluir”;
• Ao clicar no botão editar, o sistema deve ocultar os botões “Editar” e “Excluir” e manter habilitado os botões “Voltar” e “Salvar”;
• Ao incluir um novo cadastro, o sistema deve exibir habilitados os botões “Voltar” e “Salvar”;
• Na página de detalhes/edição, os botões devem sempre estar apresentados do lado esquerdo da página;
• Sempre que houver dois ou mais botões em uma mesma página/formulário/alerta/modal, eles devem ser do mesmo tamanho. A não ser que: sejam grupos de botões diferentes ou seja um caso muito específico, com um nome muito grande em um dos botões;
• Os campos relacionados devem estar próximos uns dos outros;
• Os campos que utilizam check box (sim ou não, ativo ou inativo) devem estar na frente da pergunta e devem utilizar o botão switch padrão do layout inspinia;
• Os switch estão com o texto correto (sim/não);
• As guias do cadastro devem estar conforme o padrão do template;
• O sistema deve exibir os check box conforme o padrão do template;
• O sistema deve exibir as listas internas dos cadastros com poucas colunas, ocupando apenas metade da página;
• O sistema deve exibir as listas internas dos cadastros com muitas colunas, ocupando toda a página;
• Quando o botão for somente com ícone interno dos cadastros, o sistema não deve exibi-lo com cor de preenchimento;
• Ao passar o mouse nos botões que tem apenas ícones nos cadastros internos, o sistema deve destaca-lo com a cor;
• O sistema deve sempre exibir em tabelas, listas ou grids internos do sistema os botões de ação no canto superior direito da tabela;
• O sistema deve sempre exibir em tabelas, listas ou grids internos do sistema o nome do campo no canto superior esquerdo da tabela alinhado ao centro(na vertical) com relação a altura dos botões;
• Todos os botões do sistema devem ter um hint, exceto os do menu lateral que devem ser do tipo tooltip;
• Qualquer parte do sistema, como página inicial, menu superior, grid e cadastros internos, devem ter o hint nos botões;
• As ações dos botões no hint deve ser descrito como verbo. Ex.: Incluir, excluir, editar, salvar e cancelar;
• Quando os botões forem relacionados a manipulação de itens de uma lista, os hints devem ser “Adicionar” ou “Remover”;
• Quando os botões forem relacionados a criar itens novos ou excluir itens de um sistema, o hint deve ser “Incluir” ou “Excluir”.

Os campos do tipo data devem sempre permitir a digitação da data através do teclado, respeitando sempre o formato DD/MM/AAAA. Um calendário deve ser exibido para oferecer um método alternativo para a inserção da data.

Abaixo temos um exemplo de como deve estar a disposição da página de edição em relação ao layout.

Abaixo temos um exemplo de como deve estar a disposição da página de detalhes em relação ao layout.

Nenhuma.