Padrão Interface Gráfica SIGEPE

Padrão Interface Gráfica SIGEPE
Ministério do Planejamento, Orçamento e Gestão
Histórico de Versões
Data
26/11/2014
Versão
Descrição
Autor
Revisor
Aprovado
por
1.0
Criação do
documento.
Brian Luppi /
Mauro
Albuquerque
Waister Martins,
Irone Sabino,
Giovanni
Barreiros
Daniel
Choas,
Fabrício
Fagundes
Sumário
1Introdução...........................................................................................................................................5
1.1Acessibilidade e Usabilidade......................................................................................................5
1.2Navegadores................................................................................................................................5
2Estrutura dos Templates......................................................................................................................6
2.1Grid.............................................................................................................................................6
2.2Tipografia....................................................................................................................................6
2.3Links...........................................................................................................................................7
2.4Cores...........................................................................................................................................7
2.5Ícones e Mensagens do Sistema..................................................................................................8
2.6Mensagens do Sistema................................................................................................................9
2.7Botões.......................................................................................................................................11
2.8Fieldsets....................................................................................................................................12
2.8.1Tabelas...............................................................................................................................13
2.8.1.1Cabeçalho .................................................................................................................13
2.8.1.2Alinhamento dos dados ............................................................................................14
2.8.1.3Campos com valor nulo ............................................................................................14
2.8.1.4Ações em massa .......................................................................................................14
2.8.1.5Coluna de Ações .......................................................................................................14
2.8.1.6Paginação ..................................................................................................................14
2.8.1.7Ordenação .................................................................................................................14
2.8.1.8Campos para atualização pela lista ...........................................................................15
2.8.1.9Usabilidade................................................................................................................15
2.9Formulário................................................................................................................................16
2.9.1Labels................................................................................................................................16
2.9.2Check Box.........................................................................................................................17
2.9.3Tooltip...............................................................................................................................17
2.9.4Abas..................................................................................................................................18
2.10 Cabeçalho (Header) e Rodapé (Footer).................................................................................19
2.10.1Cabeçalho........................................................................................................................19
2.10.2Rodapé............................................................................................................................22
2.10.3Breadcrumbs...................................................................................................................22
2.11Tela Inicial...............................................................................................................................23
2.11.1 Portlets:...........................................................................................................................29
2.11.2Menus..............................................................................................................................30
2.11.3 Menu Primário................................................................................................................30
2.11.4 Especificações do Menu Primário..................................................................................31
2.11.5Menu Secundário.............................................................................................................36
2.11.6Especificações do Menu Secundário...............................................................................36
2.11.7Especificações da Tela Inicial.........................................................................................37
2.12 Tela do Assunto......................................................................................................................42
2.13 Tela de Cadastro Comum.......................................................................................................45
2.14 Tela de Cadastro Principal em Destaque...............................................................................47
2.15 Tela de Consulta Simples.......................................................................................................50
2.16 Tela de Página Não Encontrada.............................................................................................53
2.17 Área de Trabalho do Gestor...................................................................................................56
2.18 Tela Lista de Informes...........................................................................................................59
2.19 Tela de Informes....................................................................................................................62
2.20 Tela Modal.............................................................................................................................65
3Componentes Visuais (retirar, manter apenas os de uso incomum).................................................67
3.1.1Caixa de Diálogo de Confirmação....................................................................................67
3.2Saída de Dados..........................................................................................................................67
3.2.1Mensagens.........................................................................................................................67
4Padrões e Regras de navegação e comportamento...........................................................................68
4.1Alteração...................................................................................................................................68
4.2Alteração na tabela ...................................................................................................................68
4.3Exclusão....................................................................................................................................68
4.4 Ações em Massa.......................................................................................................................68
4.5Padrão Consulta........................................................................................................................68
4.6Padrão de Processo...................................................................................................................69
4.7Padrão Relatório ......................................................................................................................69
4.7.1Capa do Relatório..............................................................................................................69
4.7.1.1Logo Ministério do Planejamento/Órgão emissor
..............................................................................................................................................69
4.7.1.2Logo Brasil................................................................................................................69
4.7.1.3Nome do órgão e do setor emissor
..............................................................................................................................................69
4.7.1.4Macroassunto e nome do relatório
..............................................................................................................................................69
4.7.1.5Período (fazer referencia a imagem na wiki)
..............................................................................................................................................70
4.7.2Estrutura do Relatório.......................................................................................................71
4.7.2.1Logo SIGEPE (retirar)
..............................................................................................................................................71
4.7.2.2Informações de usuário e período do relatório
..............................................................................................................................................71
4.7.2.3Macroassunto e nome do relatório
..............................................................................................................................................71
4.7.2.4Conteúdo do relatório
..............................................................................................................................................71
4.7.2.5Informações de data e hora da emissão
..............................................................................................................................................72
4.7.2.6Numeração da página
..............................................................................................................................................72
5Boas práticas.....................................................................................................................................74
5.1Campos Obrigatórios................................................................................................................74
5.2Validação de Campos................................................................................................................74
5.3Campos de Filtro em Consultas................................................................................................74
5.4Agrupamento de Campos..........................................................................................................74
5.5Tratamento de foco...................................................................................................................75
5.6Botões.......................................................................................................................................76
5.6.1Posicionamento ................................................................................................................76
5.6.2Regras de nomes para botões do Fluxo do Processo (somente para formulários que
utilizem a máquina de processo)...............................................................................................78
5.6.3 Regras de nomes para botões primários e secundários (regra geral)...............................78
5.7Uso do combobox com filtro....................................................................................................78
5.8Validação de formulário ...........................................................................................................78
5.9Alinhamento..............................................................................................................................79
5.10Tamanho e Formato dos Campos............................................................................................79
5.11 Modal de Auxílio preenchimento...........................................................................................79
5.12Observações Gerais.................................................................................................................79
6Orientações de uso dos componentes visuais...................................................................................80
6.1Estruturação de Dados..............................................................................................................80
6.1.1Painel.................................................................................................................................80
6.1.2Breadcrumb.......................................................................................................................80
6.1.3Tabela................................................................................................................................81
6.1.3.1Cabeçalho .................................................................................................................81
6.1.3.2Alinhamento dos dados ............................................................................................81
6.1.3.3Campos com valor nulo ............................................................................................81
6.1.3.4Paginação ..................................................................................................................81
6.1.3.5Ordenação .................................................................................................................81
6.1.3.6Campos para atualização pela lista ...........................................................................81
6.1.4Fieldset..............................................................................................................................81
6.1.5Árvore...............................................................................................................................82
6.2Entrada de Dados......................................................................................................................82
6.2.1Máscaras............................................................................................................................82
6.2.1.1CPF............................................................................................................................82
6.2.1.2CNPJ..........................................................................................................................82
6.2.1.3Datas .........................................................................................................................83
6.2.1.4Valores financeiros ...................................................................................................83
6.2.2Radiobutton e checkbox....................................................................................................83
6.2.3Combobox com filtro........................................................................................................83
6.2.4Combobox.........................................................................................................................83
6.3Ação e Interação.......................................................................................................................84
6.3.1Caixa de Diálogo de Confirmação....................................................................................84
6.4Saída de Dados..........................................................................................................................84
6.4.1Mensagens de Validação (Alertas, Erros e Sucessos).......................................................84
7Referências.......................................................................................................................................84
1 Introdução
Essa seção define, de forma geral, as regras, padrões e diretrizes que devem ser
seguidos pelos módulos de negócio do SIGEPE durante a implementação da interface. O
objetivo é tornar a interface mais concisa e fazer com que a experiência do usuário em
relação ao sistema seja eficaz, sem desvios de atenção para elementos ou recursos
desnecessários.
1.1 Acessibilidade e Usabilidade
Com o fim de alcançar um maior número de usuários no que se refere aos conceitos de
usabilidade e acessibilidade será adotado para o sistema SIGEPE como padrão a Cartilha
de Usabilidade do Governo Eletrônico (E-PWG) e o Modelo de Acessibilidade do Governo
Eletrônico (E-MAG). Para os demais casos omissos deve-se seguir as definições tratadas
neste documento.
1.2 Navegadores
O SIGEPE deve obedecer as diretrizes da W3C buscando compatibilidade com um maior
número de navegadores do mercado sendo exigida a compatibilidade total com os
seguintes navegadores:
•
Internet Explorer, versão 8.
•
Mozilla Firefox, versão 10.
•
Google Chrome, versão 38.
2 Estrutura dos Templates
2.1 Grid
O uso do Sistema de Grades nas estruturas de telas do SIGEPE foi criado para ajudar os
desenvolvedores e webdesigners no processo de criação dos formulários, portlets e
componentes. Envolve as regras de tamanho, posicionamento e alinhamento das
estruturas e componentes dentro da área útil do SIGEPE.
2.2 Tipografia
Seguindo as normas do Manual IDG, todo o conteúdo do portal utiliza apenas duas
famílias tipográficas: Open Sans (Google Fonts) e Arial, variando contudo em seus
tamanhos e estilo.
Para tornar este manual mais objetivo, assume-se que todas as fontes são da família
Open Sans. Quando ocorrer a fonte arial será pontualmente sinalizado.
Open Sans & Arial
Mais detalhes sobre tipografia nas páginas 16 a 18 do Manual IDG.
2.3 Links
De modo geral, o comportamento do texto ao passar o mouse sobre o link (“hover”) é do
texto ficar sublinhado. O elemento adicional (a linha) que surge durante a interação
reforça visualmente a característica de texto clicável
2.4 Cores
A seguir são destacadas as referências das principais cores utilizadas no sistema. Estas
cores serão mencionadas nas legendas apenas pela letra que as identifica. Casos
específicos serão tratados individualmente.
A: #405a86
B: #4f8694
C: #3867b7
D: #00a0db
E: #a41e22
F: #ba4a00
G: #643c67
H: #1d571f
I: #eeeff1
2.5 Ícones e Mensagens do Sistema
Listamos abaixo todos os ícones utilizados no sistema SIGEPE, assim como os padrões
gráficos para as mensagens do sistema. Posteriormente será detalhado cada um deles.
01- Tela inicial
02- Perfil do usuário
03- Notificações do sistema
04- Ajuda
05- Finalizar sessão
06- Gestão de pessoas
07- Gestão de sistema
08- Gestão de conteúdo
09- Favoritos
10- Seta do submenu
11- Favoritos desabilitados
12- Favoritos habilitados
13- Assumir
14- Atribuir
15- Liberar
16- Concluir
17- Menu
18- Fechar portlet
19- Mais informes
20- Setas
2.6 Mensagens do Sistema
21- Help
22- Calendário
23- Contrair fieldset
24- Expandir fieldset
25- Data da notícia
26- Hora da notícia
27- Notícia
28- Ações
29- Pesquisar
30- Imprimir
31- Exportação
O sistema SIGEPE pode disponibilizar três tipos de mensagens:
01- Mensagem de Sucesso
02- Mensagem de Alerta
03- Mensagem de Erro
01- 11pt, bold (#5d8b5d)
02- 11pt (#5d8b5d)
03- #cdd3cd
04- 11pt, bold (#a7903d)
05- 11pt (#a7903d)
06- #fff3c7
07- 11pt, bold (#dd3333)
08- 11pt (#dd3333)
09- #f3cbcb
2.7 Botões
O sistema SIGEPE dispõe de dois tipos de botão: botão finalístico e botão de ação local.
Os botões finalísticos são maiores, com caixa-alta, se encontram sempre no final da tela e
abrange a tela inteira. O botão de ação local está relacionado a uma atividade específica
e o texto aparece em caixa-baixa com inicial maiúscula.
Exemplo de botões:
Botão finalístico
Botão de ação local
01- #2c3b54
02- 13pt, caixa-alta (branco)
03- #216778
04- 12pt (branco)
01- 30px
02- 25px
2.8 Fieldsets
Os fieldsets têm por objetivo o agrupamento de campos/informação por assunto. Por esse
motivo, não se deve utilizar fieldsets em telas que possuam somente um agrupamento de
campos. Os fieldsets devem aparecer abertos no carregamento da tela com a opção de
recolher caso o usuário deseje fazê-lo.
01- Ícone de expansão/contração
02- Título do fieldset
01- 14pt (#4d6995)
03- Fundo do fieldset
04- Linha do fieldset fechado
02- #f9f9f9
03- 0,2pt (#1a1a1a)
2.8.1 Tabelas
Acima é representado um modelo de tabela padrão. Alguns elementos podem ser
omitidos ou adaptados, caso seja necessário.
2.8.1.1 Cabeçalho
Toda tabela que for exportável e/ou tiver a opção de impressão deve ter um título definido.
Contém, onde for aplicável, os atributos de ordenação de dados na coluna, busca na
coluna e de comandos em massa.
Cada módulo de negócio definirá quais ações em massa estarão disponíveis para a
tabela.
2.8.1.2 Alinhamento dos dados
As informações apresentadas em tabelas deverão seguir as seguintes regras de
alinhamento:
•
•
•
•
•
Campo numérico: alinhamento à direita (inclusive valores com moeda);
Campo alfanumérico com tamanho fixo: centralizado;
Campo alfanumérico com tamanho variável: alinhamento à esquerda;
Dados não-variáveis (ex: data): centralizado;
Dados variáveis (ex: assunto): alinhado à esquerda;
2.8.1.3 Campos com valor nulo
Na apresentação das informações nas colunas, os campos que tiverem valor nulo
deverão apresentar de forma centralizada o caractere "-" no lugar do valor.
2.8.1.4 Ações em massa
Para as tabelas que possuam opções de ações em massa deve ser inserida uma coluna
com checkbox para cada linha de registro. Na linha do título da tabela, na coluna de
ações em massa, deve estar disponível um checkbox para marcar todas as linhas
exibidas naquela página.
2.8.1.5 Coluna de Ações
Na última coluna das tabelas de resultado estarão disponíveis ações como excluir, editar,
associar, etc. Cada módulo de negócio definirá quais ações estarão disponíveis para o
usuário. Essas opções serão exibidas como ícones de ação caso o registro possua 1 ou 2
opções de ação. Se o registro possuir mais de 2 opções de ação a opções serão exibidas
através de uma cortina assim que o usuário passar o mouse sobre a imagem quando o
registro. Os itens da cortina serão links com uma imagem associada a cada um deles.
3
Paginação
Por padrão devem ser exibidos 20 registros por página. Se a quantidade de registros for
inferior a 20 o componente de paginação deve ser exibido de forma esmaecida. Se a
quantidade de registros for superior a 20 o componente de paginação deve estar
habilitado e disponível.
A paginação é composta por duas partes:
1) Área com os links Anterior, Próxima e numeração de páginas.
Ex: Anterior | 1 2 3 4 5 | Próximo
2) Área para escolha direta da página exibida. Deve ser exibido o nome “Página” seguido
por um campo aberto permitindo que o usuário digite um número. Digitando, por exemplo,
o número dez e teclando “Enter” o usuário deve ser redirecionado para a página 10.
Ex: Página |10| de 37.
4
Ordenação
Quando houver possibilidade de ordenação das colunas da tabela, o cabeçalho
apresentará imagens que indicam isso, conforme imagem abaixo.
5
Campos para atualização pela lista
Quando a lista a ser mostrada contiver uma quantidade pequena de campos, pode-se
utilizar, caso o usuário tenha permissão, formato de atualização abaixo.
6
Usabilidade
Para facilitar a visualização dos registros deve-se implementar a opção de preenchimento
da linha com uma cor diferenciada no mouse over.
01- Título da tabela
02- Ações da tabela
03- Ícones imprimir e exportar
04- Títulos dos itens do menu
05- Ícones de ação
06- Menu dos ícones de ação
07- Paginação
01- (A)
02- #cccccc
03- #d3d6e5
04- #e4e4e4
01- 30px
02- 22px
05- #f9f9f9
06- 12pt (#4d6995)
07- 11pt (#4d4d4d)
08- 10pt (#6f6f6f)
over: (#4d4d4d)
09- 11pt (#454546)
10- 12pt (#2c5aa0)
11- 12pt (#666666)
03- 25px
04- 22px
6.1 Formulário
O sistema SIGEPE conta com diversos itens de formulário. A seguir, é definido as
características de cada um deles individualmente.
6.1.1 Labels
O título de cada label deverá estar sempre acima do campo e alinhado à esquerda.
Quando o campo for de preenchimento obrigatório um asterisco vermelho (13pt, #800000)
deverá constar após o título. Quando o label possuir “ajuda” um ícone de ajuda deverá
constar após o campo e alinhado pelo topo.
01- 12pt (#4d4d4d)
02- Branco, outline: 0,3pt (#1a1a1a)
01- 25px
Quando o campo estiver desabilitado o contorno deverá ser com a cor (#1a1a1a) e o texto
será na cor (#808080).
Quando houver um preenchimento com erro em algum campo do formulário este deverá
ser contornado de vermelho (#8f0c0c) e uma mensagem em vermelho (10pt, #8f0c0c)
aparecerá logo abaixo e alinhada à direita orientando o usuário.
6.1.2 Check Box
Os campos Check Boxes podem ser ativados independentemente dos demais.
01- 11pt (#4d4d4d)
02- Branco, outline: 03pt, (#1a1a1a)
6.1.3 Tooltip
Ao colocar o cursor sobre determinados ícones, labels ou campos, serão exibidas
informações sobre suas funções ou de campos relacionados.
01- 10pt (#333333)
02- #f1e3a7
6.1.4 Abas
Outra maneira de agrupar informações é por meio de abas. A aba ativa comporta as
informações presentes e as abas inativas precisam ser ativadas para apresentar as
informações contidas nelas.
01- Aba ativa
02- Aba inativa
01- #e8e9ee
02- 14pt (#2a4164)
03- 13pt (#666666)
04- #f6f6f6
01- 28px
02- 24px
6.2 Cabeçalho (Header) e Rodapé (Footer)
Tanto o cabeçalho quanto o rodapé deve estar presente em todas as telas do sistema e
devem acompanhar a resolução da tela do usuário.
6.2.1 Cabeçalho
O cabeçalho apresenta os elementos definidos pelo manual IDG (páginas 40 e 41). Há
porém, algumas divergências, sobretudo na extremidade direita, exigidas pelo sistema
SIGEPE, as quais serão aqui detalhadas.
Detalhe de parte do cabeçalho:
01- Nome do usuário: NOME SOBRENOME
02- Ícone com link para Logout (Encerrar Sessão) do sistema
03- Data e hora do último acesso: DD/MM/AA HH:MM
04-Menu do Usuário composto de:
o Ícone com link para página inicial do sistema (Área de Trabalho do Gestor)
o Ícone com menu dropdown para Configurações de Perfil do Usuário com os
submenus:
 Alterar Senha
 Alterar Foto
 Trocar Habilitação
o Ícone com link para o componente de Mensageria
o Ícone com link para Ajuda do sistema
05- Foto do usuário
06- Tempo restante para expiração automática da sessão (HH:MM:SS)
Além disso, o sistema conta com o recurso de breadcrumbs, o qual informa os caminhos
(links) percorridos pelo usuário dentro do sistema.
A seguir são especificados as fontes e cores (ver item 1.2 deste manual):
01: 12pt, bold (branco)
02: 10pt (branco)
03: 9pt, caixa-alta (branco)
04: 9pt, caixa-alta (#f9c404ff)
Espaçamentos dos elementos do cabeçalho (consultar manual IDG páginas 45 e 46):
01: 12px
02: 9px
03: 17px
Detalhe do submenu do Menu do Usuário e Tooltip
Especificações do submenu do Menu do Usuário
01: Submenu
02: Tooltip
01: 10pt (#6f6f6f)
02: #e8e9ee
03: outline: 0,1px (#77787a)
01: 23px
02: 15px
6.2.2 Rodapé
O rodapé consiste em uma estreita faixa verde no final da tela, que possui conteúdo
definido pelo Gestor de conteúdo do SIGEPE. O rodapé deve estar presente em todas as
telas do sistema. E acompanhar a resolução da tela do usuário.
Todo o texto se apresenta na cor branca enquanto o fundo é verde-escuro (#195128ff).
A altura do rodapé é de 28px.
6.2.3 Breadcrumbs
Exibe o caminho percorrido pelo usuário partindo do portal até a tela exibida. A estrutura a
ser seguida para apresentação do caminho é a seguinte: Portal de Gestão de Pessoas >
Área de Trabalho do Gestor > Nome do Assunto > Nome do Processo (opcional) > Nome
da funcionalidade.
Regras do breadcrumbs:
a) Os dois primeiros níveis do sistema (Portal de Gestão de Pessoas e Área de Trabalho
do Gestor) são fixos e devem ter links associados a eles.
b) O terceiro nível (Nome do Assunto) deve ter link associado a ele e deve direcionar para
a página inicial do módulo.
c) O quarto nível (Nome do Processo) é opcional e é exibido apenas se existir algum
processo estiver vinculado ao módulo.
d) O quinto nível mostra o nome da funcionalidade.
01- 9pt bold caixa-alta (#195128)
02- 10pt caixa-alta (#234b90)
03- 10pt caixa-alta (#195128)
6.3 Tela Inicial
A tela inicial é composta pelo conceito de portlets. Cada portlet possui uma cor de
referência e um ícone de fechar (X). Os dois primeiros portlets em azul-escuro são fixos e
não podem ser fechados, os demais podem ser personalizados de acordo com o desejo
do usuário. Acima dos portlets se encontra uma barra de menu, contendo um Menu
Primário e um Menu Secundário, os quais serão tratados separadamente.
6.3.1 Portlets:
1- Mensagens Urgentes: O sistema disponibiliza para o usuário por meio deste portlet as
mensagens urgentes do sistema. As mensagens se apresentam ordenadas
cronologicamente e ao serem clicadas abre-se uma modal (ver exemplo abaixo) com o
conteúdo da mensagem. O usuário pode ainda “navegar” pelas listas de mensagens por
meio dos ícones “bolas” na parte inferior do portlet.
2- Lista de Atividades: Este portlet agrupa diversos ícones com várias funcionalidades.
3- Informes: Portlet que contempla notícias e informes. Por padrão é apresentada as
duas notícias mais recentes e o usuário poderá conferir as demais notícias clicando no
ícone +Informes.
4- Calendário: Este portlet apresenta um calendário com os eventos de destaque. Por
padrão é apresentado textualmente os eventos do mês em curso. O usuário poderá
navegar entre os meses para ter acesso aos demais eventos.
5- Menu dos Servidores: Portlet que agrupa ícones de serviços de interesse para os
servidores.
6- Sistemas Legados: Portlet que agrupa ícones dos sistemas legados ao SIGEPE.
6.3.2 Menus
6.3.3 Menu Primário
O Menu Primário é composto de um campo de
busca e
quatro sublinks, são eles: Gestão de
Pessoas, Gestão
de Sistemas, Gestão de
Conteúdo e Favoritos.
Ao passar o mouse nos links a cor é alterada
(#8a9ab3)
e um pequeno traço vertical define
quais os sublinks
serão apresentados (ver
imagem seguinte).
Da mesma forma no submenu, o mouse over
seleciona
o item desejado pelo usuário.
Submenu do Menu Primário
Exemplo de Menu Buscar aberto.
6.3.4 Especificações do Menu Primário
01- Ícone de acesso ao Menu Primário
02- Campo de busca do menu
03- Itens do Menu Primário
04- Itens do submenu do Menu Primário
05- Elemento de marcação do mouse over
06- Fundo do mouse over no submenu do Menu Primário
01- (A)
05- Branco
02- #ececec
06- 11pt, bold, caixa-alta (#8a9ab3)
03- 11pt (A)
07- 11pt, bold, caixa-alta (#f2f2f2)
04- 13pt (#666666)
01- 52px
04- 240px
02- 60px
05- 4px
03- 178px
06- 90px
6.3.5 Menu Secundário
Tem como título o Assunto escolhido no Menu Primário. Agrupa os menus referentes ao
Assunto escolhido. No exemplo da ilustração, o assunto escolhido foi a "Área de Trabalho
do Gestor". Neste caso, os itens de menu poderiam ser:
• Personalizar Área de Trabalho: adiciona ou exclui os porlets disponíveis para o
usuário visualizar na área de trabalho
• Consultas: link para o formulário de consultas
• Administrar Favoritos: exclui itens da lista de favoritos
• Configurações: outras configurações do sistema.
Os sublinks do Menu Secundário são apresentados por meio de “menu de cortina”,
o qual dispõe os itens em colunas.
6.3.6 Especificações do Menu Secundário
01- Ícone de Menu Primário 02- Título do Menu Secundário
01- (A)
02: 11pt, bold, caixa-alta (A)
01: 40px 02: 4px
03: 60px
04: 43px
01: 11pt (#666666)
03: #ececec
02: 11pt (A)
04: (A)
03- 12pt (B)
03- Links
6.3.7 Especificações da Tela Inicial
01- 16pt (C)
07- Arial 14pt (#172938)
02- (I)
08- 16pt caixa-alta (#666666)
03- 12pt (#234b90)
09- 14pt (#666666)
04- 16pt (H)
10- 14pt bold (#666666)
05- 16pt (F)
11- 16pt (G)
06- Arial bold 16pt (#172938)
12- 16pt (D)
Os portlets devem respeitar a malha construtiva descrita no tópico 1.1, portanto as
larguras e distâncias entre os portlets já estão definidas nesta grid.
01- 57px
04- 35px
02- 5px
05- 55px
03- 37px
6.4 Tela do Assunto
01 - Exibir Ações do Fluxo
Combo box com a lista dos processos relacionados ao Assunto escolhido no Menu
Primário. O usuário poderá escolher visualizar uma lista com todas as pendências de
todos os processos do Assunto ou escolher apenas visualizar as pendências de um
processo. A posição inicial mostra a lista de pendências de todos os processos do
Assunto.
02 - Lista de Pendências
Exibe as listas de pendências do processo escolhido no combo box do item A
03 - Exibir Diagrama do Processo
Combo box com a lista dos processos relacionados ao Assunto escolhido no Menu
Primário. O usuário poderá escolher visualizar o diagrama de um dos processos da lista
(se houver). A posição inicial não mostra nenhum diagrama.
04 - Diagrama do Processo
Área de visualização do diagrama selecionado no combo box do item C.
6.5 Tela de Cadastro Comum
01- Mensagem do Sistema
Quando houver uma mensagem do sistema (Erro, Sucesso ou Alerta) será sempre
posicionada acima do Título da Tarefa.
02 - Área de informações sobre a Tarefa
Título do Formulário ou da Tarefa que está sendo realizada. Caso faça parte de um
processo, deve informar o Nome e CPF do usuário responsável pela tarefa. O ícone na
frente do Título oferece ao usuário a possibilidade de inserir a tarefa na lista de favoritos
(se a tarefa possibilitar esta opção)
03 - Área de Campos
Área para criação de formulários e/ou tarefa a ser desenvolvida. Os formulários devem
seguir as regras de boas práticas. Esta área também se destina a abrigar os botões
secundários.
04 - Área de Botões Finalísticos
Faixa destacada para botões finalísticos. A posição dos botões deve seguir as
regras de boas práticas.
6.6 Tela de Cadastro Principal em Destaque
01 – Cadastro Principal
Este formulário é fixo e editável. Possui formulários acessórios distribuídos em abas.
Quando houver erro de preenchimento em formulários de alguma aba, uma mensagem de
erro do sistema será apresentada e a aba ou abas nas quais se encontram os erros é
sinalizada para facilitar a correção do usuário.
Neste exemplo, a aba “Partes” contém um erro. O sistema apresenta uma mensagem de
erro informando que os dados não poderão ser validados enquanto o erro não for
corrigido.
6.7 Tela de Consulta Simples
01 - Título da Consulta
02 - Filtros Opcionais
Os filtros opcionais estarão em fiedsets (com opção expand) e na posição inicial estarão
fechados
03 - Botões de Consulta
Devem seguir as regras de boas práticas
04 - Opções de Paginação
• Resultados por página: o usuário poderá selecionar entre 20, 50 ou 100 registros
por página
• Números das Páginas: o usuário poderá escolher entre a página Próxima ou
Anterior. Poderá também selecionar o diretamente o número da página que deseja
visualizar. Paginação de 20 em 20 páginas.
• Ir para a Página: o usuário poderá escolher no combo box a página que deseja
visualizar
05- Título da Consulta e Opões da Consulta
Contém o Título da Consulta e as opções de Impressão e Exportação (PDF, EXCEL)
06 - Ações em Massa
Contém as Ações em Massa disponíveis para a Consulta
07 - Tabela com o resultado da Consulta
Contém a tabela com os resultados esperados da consulta. Pode possuir as opções de:
• Ordenar (por data, por ordem numeral, por ordem alfabética)
• Pesquisa por coluna
• Botão de Ação (quando o registro possuir mais de 2 opções de ação)
• Ícones de Ação (quando o registro possuir 1 ou 2 opções de ação)
08 - Ações em Massa - Fim da Tabela
09 - Opções de Consulta - Fim da Tabela
6.8 Tela de Página Não Encontrada
Tela com mensagem: “O conteúdo que procura não está mais disponível ou o endereço
foi digitado incorretamente”. Links para "Página Inicial" e "Voltar à Página Anterior".
6.9 Área de Trabalho do Gestor
01 - Cabeçalho
O cabeçalho deverá estar presente em todas as páginas, contendo além dos itens já
definidos pelo template:
•
•
•
Nome do usuário: NOME SOBRENOME
Data e hora do último acesso: DD/MM/AA HH:MM
Menu do usuário composto de:
o Ícone com link para página inicial do sistema (Área de Trabalho do Gestor)
•
o Ícone com menu dropdown para Configurações de Perfil do Usuário com os
submenus:
 Alterar Senha
 Alterar Foto
 Trocar Habilitação
o Ícone com link para o componente de Mensageria
o Ícone com link para Ajuda do sistema
o Ícone com link para Logout (Encerrar Sessão) do sistema
Tempo de sessão: Deve informar o tempo restante para expiração automática da
sessão (HH:MM:SS). Será antecedido pelo texto “Sua sessão irá expirar em:”
02 – Breadcrumb
O Breadcrumb deve informar os caminhos percorridos pelo usuário dentro do sistema.
03 - Botão de acesso ao Menu Primário
O menu primário dá acesso aos grandes grupos de assuntos do sistema (menu
dropdown):
• Gestão de Pessoas
• Gestão do Sistema
• Gestão de Conteúdo
• Favoritos
04 - Menu Secundário
Tem como título o Assunto escolhido no Menu Primário. Agrupa os menus referentes ao
Assunto escolhido. No exemplo da ilustração, o assunto escolhido foi a "Área de Trabalho
do Gestor". Neste caso, os itens de menu poderiam ser:
Personalizar Área de Trabalho: adiciona ou exclui os porlets disponíveis para o usuário
visualizar na área de trabalho
Consultas: link para o formulário de consultas
Administrar Favoritos: exclui itens da lista de favoritos
Configurações: outras configurações do sistema.
05 - Ações do Fluxo
Lista todas as tarefas pendentes do usuário.
06- Mensagens Urgentes
Lista de mensagens urgentes do sistema ordenada cronologicamente.
07 - Informes
Área de Informes. Mostra sempre os 2 informes mais recentes. TÍTULO/ DESCRIÇÃO DO
TÍTULO. Link para "+ informes".
08 - Calendário
Calendário e lista de próximos eventos: próximos 5 eventos.
09- Menu dos Servidores
Portlet com todas as funcionalidades do portal servidor que o usuário possua acesso.
10 - Menu de Legados
Portlet com acesso aos sistemas do antigo Siapenet que o usuário possua acesso e que
não foram recepcionados no SIGEPE.
11 – Rodapé
O rodapé consiste em uma estreita faixa verde no final da tela, que possui conteúdo
definido pelo Gestor de conteúdo do SIGEPE. O rodapé deve estar presente em todas as
telas do sistema. E acompanhar a resolução da tela do usuário.
6.10 Tela Lista de Informes
01 – Título da tela
02 – Ícones de apoio
Informações sobre data, horário e tipo de notícia.
03 - Editoria
Nome da editoria ou seção a qual a notícia pertence.
04 – Título da notícia
05 – Subtítulo da notícia
Subtítulo ou o resumo da notícia.
06- Tags
Palavras-chave relacionadas à notícia.
07 - Paginação
Mecanismo de navegação pelas notícias disponíveis.
08 - Link
Link para voltar ao topo da tela.
01- 12,5pt (#666666)
02- 0,2pt (pontilhado) (#808080)
03- 12,5pt caixa-alta (#216778)
04- 14,5pt bold caixa-alta (#666666)
05- 13,5pt (#666666)
06- 12pt (#216778)
07- 0,2pt (#808080)
08- 12pt (#666666)
09- 11pt (#666666)
01- 20pt
02- 20pt
03- 30pt
04- 30pt
05- 20pt
06- 36pt
07- 45pt
08- 45pt
6.11 Tela de Informes
01- Título da tela
02- Informações sobre data e horário da notícia
03- Editoria ou seção
04- Título da notícia
05- Ícone de impressão
06- Linha divisória
07- Notícia
08- Link de retorno ao topo da tela
01- 11pt, bold, caixa-alta (branco)
05- 18,5pt (#666666)
02- #4d6995
06- 23,5pt, bold (#4d6995)
03- #e8e9ee
07- 0,2pt (#808080)
04- 17,5pt (#216778)
08- 13pt (#4d6995)
01- 22pt
04- 25pt
02- 60pt
05- 30pt
03- 40pt
06- 25pt
6.12 Tela Modal
01- 13pt, bold, caixa-alta (branco)
02- #216778
03- Branco
04- 14pt (#4d4d4d)
7 Componentes Visuais
7.1 Caixa de Diálogo de Confirmação
As ações de exclusão de um registro, por padrão, deverão ser confirmadas por meio do
componente de diálogo de confirmação. O desenvolvedor em conjunto com o PO deve
definir textos que agreguem valor e expressem de forma clara qual registro está sendo
excluído.
Devem ser evitadas perguntas como: “Deseja excluir o registro?”, “Confirma a exclusão
do registro?”.
Devem ser formuladas perguntas como: “O processo número 123456 será excluído.
Deseja realmente excluir esse registro?”, “O servidor Fulano de Tal será excluído. Deseja
excluí-lo permanentemente?”.
7.2 Mensagens
As mensagens de validação devem ser exibidas todas de uma só vez, para evitar que o
usuário corrija um erro de preenchimento por vez.
A apresentação dos erros deve aparecer logo abaixo do campo com erro de
preenchimento.
As mensagens de sucesso e de alerta serão exibidas abaixo do menu de aplicação.
Cada módulo de negócio será responsável por definir o conteúdo das mensagens a
serem exibidas nos casos de erros, alertas e sucessos.
Os campos que possuem erros de validação devem ter suas bordas alteradas para a cor
vermelha e caso haja no formulário mais de um campo com erro, deve-se dar foco no
primeiro campo com erro
8 Padrões e Regras de navegação e comportamento
8.1 Alteração
1. O usuário preenche os filtros, faz uma consulta e recebe uma lista de resultados;
2. O usuário seleciona opção para detalhar um registro dessa lista de resultados;
3. Na tela de detalhe, o usuário seleciona a opção de alterar o registro e altera o
registro;
8.2 Alteração na tabela
Navegação de acordo com o comportamento do componente.
8.3 Exclusão
1. O usuário seleciona a opção Excluir diretamente do ícone de exclusão ou da lista
de opções do registro.
2. Aparece uma modal com a mensagem de confirmação de exclusão (Ex.:“Deseja
excluir este registro?”) e as opções de “Sim” e “Não”
3. Se a opção selecionada for “Não” o usuário volta para tela onde estava
4. Se a opção selecionada for “Sim” o usuário volta para tela onde estava com a
mensagem de sucesso da exclusão “Registro excluído”.
8.4 Ações em Massa
1. O usuário seleciona os checkboxes dos itens que deseja realizar a mesma ação.
2. O usuário escolhe uma entre as opções possíveis de serem realizadas em massa.
3. Aparece uma modal com a mensagem de confirmação da ação (Ex.: “Deseja
excluir esses 3 registros?”) e as opções “Sim” e “Não”.
4. Se a opção selecionada for “Não” o usuário volta para a tela onde estava
5. Se a opção selecionada for “Sim” o usuário volta para a tela onde estava com a
mensagem de sucesso da ação (Ex.: 3 registros foram excluídos)
8.5 Padrão Consulta
Permite recuperar registros através de uma tela de filtros. O detalhe do registro é
acessado através do link na lista de resultado. Ao clicar no botão de consulta sem
preencher nenhum filtro são retornados todos os registros. A tabela com os resultados do
filtro só é exibida se o usuário fizer alguma requisição de consulta..
1.
2.
3.
4.
5.
A funcionalidade pode ser acessada através do menu da página do processo.
O usuário preenche os filtros e seleciona opção para pesquisar.
É apresentada uma lista de resultados, mantendo os campos para novo filtro.
O usuário seleciona um registro dessa lista de resultados para detalhamento.
Uma tela com os detalhes do registro selecionado é exibida.
Para as telas que possuem filtro e resultado, a área reservada para os campos de filtro
não pode ultrapassar o limite da tela visível para um usuário com a resolução 1024 x 768
pixels, ou seja, ao realizar o filtro, deve ser permitido ao usuário visualizar pelo menos
parte do resultado.
8.6 Padrão de Processo
8.7 Padrão Relatório
1. O usuário seleciona a funcionalidade através do menu da página do processo.
2. A tela com os filtros é exibida para preenchimento.
3. Após preencher os filtros e selecionar opção para gerar relatório, o resultado do
relatório é exibido, porém os filtros são mantidos no topo da página.
4. Opcionalmente, pode haver necessidade de detalhar um número apresentado. O
detalhamento deve ser exibido em uma tela modal.
8.7.1 Capa do Relatório
Para impressão devem ser respeitadas as margens laterais, superior e inferior de 2cm.
8.7.1.1 Logo Ministério do Planejamento/Órgão emissor
No topo superior esquerdo deve ser exibida a logo do Ministério do Planejamento ou do
Órgão Emissor do Relatório.
Deve ser dada a opção ao usuário para fazer upload da imagem da Logo (com as
dimensões previamente definidas) para compor a capa.
Caso o usuário não faça o upload da imagem o sistema deve exibir a logo padrão do
Ministério do Planejamento.
8.7.1.2 Logo Brasil
No topo superior direito deve ser exibida a logo do Brasil. Essa imagem é fixa.
8.7.1.3 Nome do órgão e do setor emissor
O centro superior da capa é destinado à inclusão de informações de identificação do
órgão emissor do documento.
Ex: MINISTÉRIO DO PLANEJAMENTO, ORÇAMENTO E GESTÃO
SECRETARIA DE GESTÃO PÚBLICA
8.7.1.4 Macroassunto e nome do relatório
O centro inferior da capa é destinado à identificação do assunto e do título do relatório.
Ex: GESTÃO DE DESENVOLVIMENTO DE PESSOAS
RELATÓRIO DE METACOMPETÊNCIAS
8.7.1.5 Período (fazer referencia a imagem na wiki)
Na área do rodapé, ao centro, está destinado espaço para identificação do período do
conteúdo.
Ex: Janeiro/2014
8.7.2 Estrutura do Relatório
8.7.2.1 Logo SIGEPE (retirar)
No topo superior à esquerda deve ser exibida a logo do SIGEPE.
8.7.2.2 Informações de usuário e período do relatório
No canto superior direito está reservada área para exibição das informações do usuário
que emitiu o relatório e o período a que se referem as informações contidas no mesmo.
Ex: Usuário: Daniel Choas
Período: 01/01/2013 a 01/01/2014
8.7.2.3 Macroassunto e nome do relatório
No centro superior do relatório está reservada área para exibição da identificação do
assunto e do título do relatório.
Ex: GESTÃO DE DESENVOLVIMENTO DE PESSOAS
RELATÓRIO DE METACOMPETÊNCIAS
8.7.2.4 Conteúdo do relatório
Cada módulo de negócio definirá o conteúdo e a forma de apresentação das informações
no relatório.
8.7.2.5 Informações de data e hora da emissão
No canto inferior esquerdo do relatório devem ser exibidas informações de data e hora da
emissão.
Ex: Relatório gerado em 21/01/2014 às 09:37:45.
8.7.2.6 Numeração da página
No canto inferior direito do relatório deve ser exibida a informação de numeração da
página.
Ex: Página 1 de 10.
9 Boas práticas
9.1 Campos Obrigatórios
Campos obrigatórios devem apresentar um asterisco (*) à direita do rótulo do campo.
Deve ser apresentada uma legenda para orientar o usuário sobre os campos de
preenchimento obrigatório.
9.2 Validação de Campos
Sempre que possível, as validações devem ser realizadas sem a necessidade de
recarregar a tela dos campos a serem validados, utilizando scripts no cliente ou
requisições AJAX. Para validações mais elaboradas, principalmente quando envolvem
regras de negócios que não estão relacionadas às informações apresentadas na tela, a
validação poderá ser realizada no lado do servidor com o recarregamento da página.
Toda a implementação de validação dos campos deve seguir os requisitos não funcionais
do SIGEPE, descritos no item Requisitos de Integridade dos Dados
Todas as validações realizadas no lado do cliente por javascript deverão ser refeitas no
lado do servidor.
9.3 Campos de Filtro em Consultas
• Datas e valores: a consulta é feita pelo valor exato do campo.
• Códigos Não Estruturados: Nas consultas por códigos que não sejam estruturados
(gerados sequencialmente ou por entidade externa, P. Ex.: Cod.Banco,
Cod.Municipio, CEP, etc...) e que sejam chave primária ou candidata da tabela, o
sistema buscará pelo valor exato informado pelo usuário. Caso encontre alguma,
sempre haverá apenas uma única ocorrência encontrada e, portanto, o sistema não
a mostrará numa listagem de registros, mas abrirá logo a tela de detalhe.
• Códigos Estruturados: Nas consultas por códigos estruturados, ou seja, aqueles
onde há significado em parte do código (posicional no código ou faixas de valores,
p. Ex: CodConta, Cod Orgao, PT, Fonte, etc) as buscas parciais serão permitidas,
ou seja, esse código será tratado da mesma forma que a busca em um campo
string qualquer (nome, sigla, etc).
• Nomes, títulos e siglas: a consulta é feita pelo valor parcial do campo valendo todo
texto iniciado pelo conteúdo informado.
9.4 Agrupamento de Campos
Os campos devem ser agrupados por afinidade e os agrupamentos podem ser realizados
por fieldsets ou abas.
9.5 Tratamento de foco
O cursor deve posicionar-se automaticamente no primeiro campo editável da tela de
entrada de dados.
Se o usuário realizar uma ação em uma tela que resulte em outra ação que será
visualizada na mesma tela, o foco deve ser direcionado para o campo ou a área que
contiver o resultado.
Caso sejam necessárias requisições do usuário ao servidor de aplicação sem a mudança
de página, a posição da barra de rolagem deve permanecer igual à posição anterior à
requisição.
Após o resultado da validação de um formulário com erros deve ser dado foco no primeiro
campo inválido (que originou a mensagem de erro).
Se o usuário tentar executar uma ação em determinada tela e houver erro de
preenchimento deve-se dar o foco no primeiro campo que apresenta o problema. Se na
tela houver mais de um campo com problema de preenchimento separado em abas
diferentes, deve-se dar o foco na primeira aba e no primeiro campo encontrado com o
problema.
9.6 Botões
O título dos botões deve expressar exatamente a ação que o mesmo executará.
Exemplos: Confirmar Inclusão, Salvar Rascunho, etc. Deve-se evitar botões com títulos
"Ok".
9.6.1 Posicionamento
•
Botões primários e secundários:
o Quando o formulário for simples, com uma coluna
 Alinhamento: Botões alinhados à esquerda
 Posição: Botão Primário à esquerda (com destaque visual) e Botão
Secundário à direita
o Quando o formulário for complexo e ocupe 2 ou mais colunas
 Alinhamento: Botões alinhados à direita
 Posição: Botão Primário à direita (com destaque visual) e Botão
Secundário à esquerda
o Utilizar botão secundário (Cancelar, Limpar, Apagar) apenas em situações
onde seu uso seja realmente necessário e justificável.
o Os botões para ações relacionadas à página devem ficar posicionados logo
acima do rodapé e fora de qualquer fieldset ou aba.
o Os botões para ações secundárias posicionam-se dentro de seus fieldsets
ou áreas de agrupamentos correspondentes (seguir mesma imagem do
exemplo de botoões alinhados à direta).
o Todos os botões de ação devem respeitar as diretrizes estabelecidas na EMag.
OBS.: No Portal do Servidor, essa regra de posicionamento não é levada em
consideração devido à diversidade de tipos de funcionalidades.
9.6.2 Regras de nomes para botões do Fluxo do Processo (somente
para formulários que utilizem a máquina de processo)
•
Assumir: permite o usuário informar ao motor de processo que ele irá trabalhar na
tarefa.
•
Liberar: permite o usuário devolver a tarefa ao fluxo do processo.
•
Atribuir: permite o usuário informar ao motor de processo a quem será atribuída
aquela tarefa.
•
Concluir: permite o usuário completar uma tarefa para que o motor de processo
possa direcionar para próxima atividade do processo.
9.6.3 Regras de nomes para botões primários e secundários (regra
geral)
•
Gravar Rascunho: permite o usuário gravar de forma temporária.
•
Gravar: permite o usuário finalizar uma tarefa (ações definitivas).
•
Excluir: permite o usuário apagar um registro.
•
Cancelar: permite o usuário desfazer uma operação ou ação realizada no SIGEPE.
•
Limpar: permite o usuário limpar as informações inseridas em um formulário antes
de realizar a ação finalística.
•
Pesquisar: permite o usuário pesquisar informações no banco de dados do
SIGEPE.
•
Detalhar: permite o usuário consultar informações de um registro no SIGEPE.
•
Incluir: inserir um registro em uma lista ou tabela.
9.7 Uso do combobox com filtro
Quando a quantidade de registros a ser exibida no combobox acarretar prejuízo na
performance de carregamento da tela ou dificuldade de navegação entre as opções
exibidas deve-se, nesse caso, dar prioridade ao uso de modais para fins de consulta.
9.8 Validação de formulário
Os campos devem ser validados sempre do lado do cliente e do lado do servidor.
Os campos obrigatórios não preenchidos ou preenchidos incorretamente devem ser
visualmente destacados para facilitar a correção dos mesmos pelo usuário.
Se no formulário houver mais de um erro de preenchimento deve-se dar foco para
correção no primeiro campo mais próximo do início do formulário.
9.9 Alinhamento
Os títulos dos campos (label) dos formulários do sistema devem estar sempre alinhados à
esquerda com os campos ao lado dos títulos. Devem estar organizados em grupos de
informações de modo que o usuário entenda visualmente a sequência e o fluxo das
informações solicitadas. As exceções a esta regra, casos em que este tipo de alinhamento
prejudique a visualização das informações no formulário, serão tratadas caso a caso.
9.10 Tamanho e Formato dos Campos
O tamanho dos campos deve ser correspondente ao tipo de registro ou ao tamanho do
maior registro possível (número de caracteres) para determinado campo. Recomenda-se
formatar o campo de preenchimento de acordo com a informação que ele solicita. Ex.: O
campo CPF separado por traços.
9.11 Modal de Auxílio preenchimento
Para o preenchimento de alguns campos, pode ser necessária uma tela auxiliar para
realizar uma pesquisa detalhada. Estas telas devem seguir as seguintes regras:
• A listagem dos registros na janela modal deve seguir as mesmas regras de tabela e
formulários presentes neste documento (paginação, ordenação, etc).
• As buscas realizadas pelas modais devem funcionar da mesma forma caso o
usuário preencha o campo com letras maiúsculas ou minúsculas.
• As janelas modais devem ter no máximo o tamanho 800 x 600 pixels.
• Além da opção de fechar a janela (ícone “X”), as modais podem ser fechadas
quando o usuário pressionar a tecla “Esc” ou clicar fora da área de contexto.
9.12 Observações Gerais
•
•
•
•
•
Para facilitar o entendimento do usuário, formulários extensos que possuam várias
abas (ex. dados básicos, dados complementares, documentos) recomenda-se criar
grupos de informações dentro de cada aba, por exemplo, dentro do formulário de
"Informações do Servidor" separar as informações em agrupamento como: Dados
Pessoais (Campos: Nome, cpf, identidade, filiação), Endereços e Contatos
(Campos: Endereço residencial, telefones, emails), Dados Funcionais (Campos:
Matrícula, lotação, Regime)
Recomenda-se adaptar o campo de preenchimento de acordo com a informação
que ele solicita. Ex.: O campo CPF separado por traços.
Deve-se evitar o uso de componentes dentro de componentes para organizar as
telas. Em formulários que utilizem o componente de abas para organizar os
campos deve-se evitar o uso de outras abas para agrupar ainda mais os campos.
Nesse caso poderia ser utilizado, por exemplo, o componente fieldset para fazer o
agrupamento de campos.
Ao concluir uma ação o sistema deve exibir a mensagem de validação e o usuário
deve permanecer na mesma tela. Se houver necessidade de registros contínuos o
sistema, no término da ação, deve exibir uma caixa de diálogo perguntando o que
ele deseja fazer (de acordo com as opções oferecidas pelo módulo).
O atributo tabindex controla a ordem em que o cursor percorrerá os campos de um
formulário ao se utilizar a tecla TAB. Para acionar os botões de ação o usuário
utilizará a tecla “Espaço” (quando o foco estiver sobre o botão)
10 Orientações de uso dos componentes visuais
10.1 Estruturação de Dados
10.1.1
Painel
10.1.2
Breadcrumb
Exibe o caminho percorrido pelo usuário partindo do portal até a tela exibida. A estrutura a
ser seguida para apresentação do caminho é a seguinte: Portal de Gestão de Pessoas >
Área de Trabalho do Gestor > Nome do Assunto > Nome do Processo (opcional) > Nome
da funcionalidade.
Regras do breadcrumbs:
a) Os dois primeiros níveis do sistema (Portal de Gestão de Pessoas e Área de Trabalho
do Gestor) são fixos e devem ter links associados a eles.
b) O terceiro nível (Nome do Assunto) deve ter link associado a ele e deve direcionar para
a página inicial do módulo.
c) O quarto nível (Nome do Processo) é opcional e é exibido apenas se existir algum
processo estiver vinculado ao módulo.
d) O quinto nível mostra o nome da funcionalidade.
10.1.3
Tabela
10.1.3.1Cabeçalho
Toda tabela que for exportável e/ou tiver a opção de impressão deve ter um título definido.
Contém, onde for aplicável, os atributos de ordenação de dados na coluna e de busca na
coluna.
Todos os títulos das colunas de uma tabela devem aparecer centralizados.
10.1.3.2Alinhamento dos dados
As informações apresentadas em tabelas deverão seguir as seguintes regras de
alinhamento:
• Campo numérico: alinhamento à direita (inclusive valores com moeda);
• Campo alfanumérico com tamanho fixo: centralizado;
• Campo alfanumérico com tamanho variável: alinhamento à esquerda;
10.1.3.3Campos com valor nulo
Na apresentação das informações nas colunas, os campos que tiverem valor nulo
deverão apresentar de forma centralizada o caractere "-" no lugar do valor.
10.1.3.4Paginação
Todas as tabelas de resultado de consulta deverão possuir paginação. A quantidade de
linhas/página nas telas deve seguir o requisito não funcional especificado.
Nas telas com paginação, deve estar clara a informação do número da página atual: "1 de
5", "2 de 5", "3 de 5", etc.
Os botões da paginação deverão conter pelo menos as opções de: "Primeira | Anterior |
Próximo | Última" páginas apresentadas por meio de setas, além de permitir ao usuário o
avanço a uma página específica.
Por padrão devem ser exibidos 20 registros por página. Se a quantidade de registros for
inferior a 20 o componente de paginação deve ser exibido de forma esmaecida. Se a
quantidade de registros for superior a 20 o componente de paginação deve estar
habilitado e disponível.
10.1.3.5Ordenação
Quando houver possibilidade de ordenação das colunas da tabela, o cabeçalho
apresentará imagens que indicam isso.
10.1.3.6Campos para atualização pela lista
Atualização de registros diretamente pela tabela (cv:dataTable associado a cv:cellEditor +
cv:rowEditor)
Essa funcionalidade pode ser utilizada quando for pequeno o número de campos
(colunas) exibidos pela tabela.
10.1.4
Fieldset
Os fieldsets têm por objetivo o agrupamento de campos/informação por assunto. Por esse
motivo, não se deve utilizar fieldsets em telas que possuam somente um agrupamento de
campos. Os fieldsets devem aparecer abertos no carregamento da tela com a opção de
recolher caso o usuário deseje fazê-lo.
10.1.5
Árvore
Comumente utilizado em filtros, o Tree View com Checkboxes organiza diversas opções
de forma hierárquica, possibilitando melhor visualização e facilitando a seleção de grupos
de opções, pois selecionando ou removendo a seleção de um nodo pai, esta ação é
propagada a todos os nodos filhos. Os nodos pais, além dos checkboxes, possuem a
funcionalidade para expandir ou recolher os nodos filhos. Além dos comportamentos
"Marcado" e "Desmarcado", os nodos pais possuem o comportamento de "Parcialmente
Marcado", quando alguns dos seus nodos filhos estão selecionados.
Exemplos: Lista de Categorias, Tipos, etc.
10.2 Entrada de Dados
Os campos do formulário devem ter seu preenchimento facilitado através da tecla TAB,
que quando pressionada avançará o cursor para o campo seguinte ignorando os
elementos HTML desnecessários como links ou imagens.
O título dos campos deve expressar de maneira única e clara o dado a ser inserido pelo
usuário. Deve-se evitar títulos genéricos como "Código" ou "Tipo". Utilizar, como exemplo,
termos mais completos: Código do processo, Tipo de documento, etc. Se ainda assim
persistir a dúvida do significado do campo deve-se utilizar o componente tooltip para
detalhar o seu conceito. Ao passar o mouse sobre o label deve ser exibido o significado
completo.
10.2.1
Máscaras
Quando houver a necessidade de utilização de máscaras, o comportamento será da
seguinte forma:
• Ao ganhar foco, o campo apresentará a máscara a ser utilizada.
• Todos os caracteres fixos já serão exibidos (Ex: '/', '-', etc).
• Caracteres para preenchimento serão exibidos com o símbolo '_'.
• Exemplo de máscaras: '__/__/____', '_________-__', '(__) ____-____'.
• Durante o preenchimento do campo, os caracteres informados pelo usuário dão
lugar aos símbolos '_'.
• Ao perder o foco, o campo não deverá apresentar mais os caracteres que informam
a máscara ao usuário.
• Se o valor informado for inválido, ao perder o foco, todo o conteúdo preenchido é
apagado.
• Para os campos que possuem máscaras definidas o sistema deve fazer a
validação também do lado do cliente.
10.2.1.1CPF
•
Utilizar máscara de preenchimento na inserção de valor, no padrão ###.###.#####.
•
Ao perder o foco a aplicação deverá verificar se o CPF informado corresponde a
um CPF válido, mostrando mensagem ao usuário caso seja inválido e destacando
o campo em cor diferenciada (borda vermelha).
10.2.1.2CNPJ
•
Utilizar máscara de preenchimento na inserção de valor, no padrão
##.###.###/####-##.
•
Ao perder o foco o componente deverá verificar se o CNPJ informado corresponde
a um CNPJ válido, mostrando mensagem ao usuário caso seja inválido e
destacando o campo em cor diferenciada (borda vermelha).
10.2.1.3Datas
• Deixar sempre disponível para o usuário a opção de preenchimento do campo por
componente visual de calendário;
• Utilizar máscara de preenchimento na inserção de datas, no padrão dd/mm/aaaa
alinhados à esquerda;
• A entrada de um campo data deve sempre ser numérica;
• Sempre que houver dois campos indicando intervalo de data, ao perder o foco do
segundo campo preenchido, o sistema deve fazer uma verificação se a data final é
maior que a data inicial no lado do cliente.
10.2.1.4Valores financeiros
Utilizar máscara de preenchimento na inserção de valor, no padrão ###.##0,00. Com a
autoformatação os valores digitados pelo usuário devem ser formatados dinamicamente,
sendo que o caractere utilizado para a separação entre inteiros e centavos (,) deve
permanecer fixo enquanto o usuário digita os números.
10.2.2
Radiobutton e checkbox
No caso destes dois componentes a tag label deve utilizar o atributo for para facilitar a
usabilidade do sistema.
10.2.3
Combobox com filtro
Como alternativa à modal, poderá ser utilizado um combobox com filtro. O campo de filtro
levará em consideração todas as colunas apresentadas, conforme exemplo abaixo (até a
construção da nova identidade visual, seguir a imagem da wiki).
A apresentação de valores nos comboboxes deverá obedecer às seguintes regras quanto
à ordenação:
• Os itens da lista deverão estar em ordem alfabética, caso os valores sejam do tipo
texto;
• Os itens da lista deverão estar em ordem crescente, caso os valores sejam
numéricos;
• Os itens da lista deverão estar em ordem cronológica, caso os valores sejam datas;
• O item em branco, quando existir, deve ser sempre o primeiro da lista.
• Para os casos em que for apresentada mais de uma coluna, deve-se utilizar a
primeira coluna para ordenação caso não esteja especificada outra regra de
ordenação nos casos de uso.
• As exceções quanto à forma de ordenação serão tratadas caso a caso (ex: lista de
prioridades: alta, média, baixa).
10.2.4
Combobox
Nos fluxos de inclusão, os comboboxes que não tiverem valor padrão definido no caso de
uso, devem conter um item em branco selecionado por padrão, ainda que o campo seja
obrigatório. O objetivo é evitar que o usuário seja induzido ao erro, forçando-o a escolher
um valor. Se houver um combobox com preenchimento obrigatório, um valor padrão
poderá ser sugerido.
A apresentação de valores nos comboboxes ou listboxes deverá obedecer às seguintes
regras quanto à ordenação:
• Os itens da lista deverão estar em ordem alfabética, caso os valores sejam do tipo
texto;
• Os itens da lista deverão estar em ordem crescente, caso os valores sejam
numéricos;
• Os itens da lista deverão estar em ordem cronológica, caso os valores sejam datas;
• O item em branco, quando existir, deve ser sempre o primeiro da lista.
• As exceções quanto à forma de ordenação serão tratadas caso a caso
10.3 Ação e Interação
10.3.1
Caixa de Diálogo de Confirmação
As ações de exclusão de um registro, por padrão, deverão ser confirmadas por meio do
componente de diálogo de confirmação. O desenvolvedor em conjunto com o PO deve
definir textos que agreguem valor e expressem de forma clara qual registro está sendo
excluído.
Devem ser evitadas perguntas como: “Deseja excluir o registro?”, “Confirma a exclusão
do registro?”.
Devem ser formuladas perguntas como: “O processo número 123456 será excluído.
Deseja realmente excluir esse registro?”, “O servidor Fulano de Tal será excluído. Deseja
excluí-lo permanentemente?”.
10.4 Saída de Dados
10.4.1
Mensagens de Validação (Alertas, Erros e Sucessos)
As mensagens de validação devem ser exibidas todas de uma só vez, para evitar que o
usuário corrija um erro de preenchimento por vez.
A apresentação dos erros deve aparecer logo abaixo do campo com erro de
preenchimento.
As mensagens de sucesso e de alerta serão exibidas abaixo do menu de aplicação.
Cada módulo de negócio será responsável por definir o conteúdo das mensagens a
serem exibidas nos casos de erros, alertas e sucessos.
Os campos que possuem erros de validação devem ter suas bordas alteradas para a cor
vermelha e caso haja no formulário mais de um campo com erro, deve-se dar foco no
primeiro campo com erro.
11 Referências
URL www modelo para consulta do desenvolvedor (modelos de aplicação dos templates)
URL showcase dos componentes visuais