SETI

• Disposição dos Campos na tela: podem utilizar uma ou duas colunas onde cada coluna possui o formato: RÓTULO: EDIÇÃO;
• No caso da utilização de uma única coluna, o tamanho dos labels + edits não deve exceder 50% da área da tela;
• Quando houver muitos campos, estes podem ser agrupados logicamente através de blocos, identificados por texto e linha divisória, de acordo com classificação do negócio, para facilitar a visualização. Exemplo: Dados Básicos, Endereço, etc;
• Campos RADIO devem ser utilizados para no máximo 4 opções (mais que isso, use COMBO). Suas opções devem ser apresentadas uma embaixo da outra e com o label na linha da primeira opção. Seu uso deve se limitar à seleção de um único item. Para mais itens utilizar o componente CheckBox;
• Campos Combo devem ser utilizados para um conjunto não muito grande de opções. Neste ultimo caso usar combos auto completar;
• Labels Alinhados à direita, em negrito e COM : (dois pontos)
• Campos obrigatórios devem ser identificados por * ANTES do label na cor destaque da aplicação;
• A informação “* Campos obrigatórios” deve ser disponibilizada em uma linha antes da primeira linha de informações, na mesma cor dos * (cor destaque), para que o usuário a leia antes de começar a editar os campos;
• Botões devem representar apenas as operações básicas de SALVAR e CANCELAR e estarem localizados lado a lado, SEMPRE à direita (ver item 2.1.5 Botões) ao final da lista de campos;
• Não mudar a cor do Edit no campo que estiver em foco;
• Não utilizar o botão/opção LIMPAR ou RESTAURAR;
• Nesta tela, ao invés do botão VOLTAR utilizado em todas as outras telas, é recomendado o uso do botão CANCELAR para evidenciar o cancelamento da operação e a volta à página anterior. A funcionalidade deve ser a mesma, e não se exclui o uso do atalho “Voltar” caso a tela precise de rolagem vertical;
• Após a seleção do botão SALVAR desabilitar este botão para evitar que o usuário repita esta operação várias vezes enquanto o servidor processa a requisição;
• Tanto para o caso de Inclusão e Alteração, esta tela deve levar à Tela Detalhe após a ativação do Botão SALVAR (exceto os casos onde existir a opção Continuar Cadastrando e esta estiver ativada). Isto permite que o usuário realize outra operação sobre o registro que acabou de alterar ou incluir, que se encontra na Tela Detalhe;
• Na Tela Detalhe constará também a mensagem de sucesso da operação realizada anteriormente na Tela de Cadastro.

Continuar Cadastrando

• Utilizar check box para indicar que deseja continuar incluindo novos registros;
• Rótulo do check box deve ser “Continuar Cadastrando”;
• Alinhado à direita da tela, na linha anterior aos botões;
• Esta opção deve ser visível somente quando selecionada a opção INCLUSÃO, não sendo cabível para a Alteração;
• Sua adoção é a critério da aplicação;
• Quando a tela é aberta a primeira vez, o check box pode vir marcado – a critério da aplicação;
• MAS - uma vez marcado, vir sempre marcado;
• Se marcado, após a operação SALVAR, a tela mostrada é a de inclusão com os campos todos vazios E uma mensagem de sucesso do cadastro anterior, no topo da tela;
• Na tela de editação do novo registro, a mensagem de sucesso do registro anterior deve sumir após 5 segundos.

Mensagens de Erro

• Todas juntas no topo da página para evitar problemas com a rolagem, em “cor de erro” (padrão vermelho) ;
• Devem estar dentro de uma caixa, alinhada a esquerda, ocupando a largura de 50% da área de dados, em cor de fundo branca. A caixa deve possuir bordas na mesma cor da fonte, e estar fora da área de apresentação dos dados;
• As mensagens devem estar alinhadas à esquerda na mesma direção dos edits, e serem precedidas do identificador • (bolinha).

Mensagens de Sucesso

• As mensagens de sucesso que retornam do servidor devem ser mostradas no topo da página para proporcionar uma melhor visualização para o usuário;
• O layout adotado deve ser o mesmo que para a Mensagem de Erro, excetuando-se a cor da fonte, que neste caso deve ser a mais escura da paleta em utilização.

Mascaras e Auxiliares

• Os campos que contiverem mascaras devem ser mostrados (todos) vazios e ter seu conteúdo formatado a medida que o usuário for digitando os valores;
• A indicação da máscara à direita do campo (depois) é opcional mas fortemente recomendada para aplicações não utilizadas com freqüência, exemplo: consultas na internet;
• Esta indicação deve ser mostrada entre parenteses à direita (depois) do campo; (ex: (nnn-nn) );
• O formato para a indicação da máscara deve seguir o formato das iniciais do objeto mostrado, tantas vezes quantas forem o tamanho do campo (exemplo: nnn -> para números, com 3 dígitos) + os caracteres que compõem a máscara (ex: nnn – nn -> onde o – faz parte da máscara);
• O alinhamento dos dados dentro do edit deve seguir o padrão da esquerda para direita, exceto casos tratados mais adiante neste documento, que são:
• Campos Data
  • Campos data devem utilizar o recurso CALENDÁRIO representado com o ícone próprio, como uma opção para preenchimento do campo, além da utilização da máscara para o caso de digitação direta;
  • O calendário deve apresentar somente os dias do mês selecionado (sem os primeiros do próximo mês!)
  • A máscara deve seguir o padrão “(dd/mm/aaaa)” e deve ser preenchida conforme o usuário vai digitando os números. Não é obrigatório a indicação de sua máscara em frente ao campo.
• Campos Moeda
  • Devem ter seus valores alinhados à direita para facilitar o preenchimento através das casas decimais.
  • Deve ter seu valor formatado conforme o usuário informar os dígitos, colocando-se a vírgula para pontuar as casas decimais.