• O sistema deve ser aberto em um pop-up a partir da intranet (para tirar a barra de ferramentas);
• A barra de ferramentas não deve aparecer para ganhar mais espaço na tela;
• Todos os elementos devem caber em uma única tela, sem scroll horizontal e, na medida do possível deve-se evitar também o scroll vertical;
• Deverão ser utilizados blocos para destacar diferentes áreas da tela, com o intuito de tornar mais clara a identificação da organização dos dados pelo usuário;
• As caixas ou blocos utilizados para destacar diferentes áreas da tela devem ocupar uma coluna e ficar uma embaixo da outra; (evitar o lado a lado para blocos)
• A mudança de foco deve se dar com a tecla TAB (padrão Web); Teclas Enter e Setas não são recomendados por não serem padrão Web;
• Os itens sempre mostrados na tela são:
  • Cabeçalho
  • Menu da Aplicação
  • Usuário + Informações complementares + Links rápidos
  • Área útil variável em cada tela da aplicação

Cabeçalho

• Alinhado a esquerda: Texto com o nome sucinto do Sistema em fundo escuro (tom mais escuro da palheta de cores);
• Alinhado a direita: imagem em degradê de cinza, transparente (para deixar transparecer a cor mais escura da palheta) com o Texto: “Tribunal de Justiça do Paraná” em destaque e “Dpto de Informática – Divisão de Análise” em letras menores logo abaixo para diferenciar o desenvolvimento interno dos sistemas desenvolvidos por terceiros. Na mesma figura alinhada à estrema direita encontra-se também o brasão do estado com a figura do ceifador ao centro;

Menu

• A terceira linha do cabeçalho deverá conter o menu principal da aplicação, alinhado à esquerda e com tamanho variável de acordo com cada opção.
• Sempre acessível de qualquer ponto da aplicação;
• Menu personalizado pela aplicação: Ela define as opções constantes no menu e solicita a criação deste a uma Tag padrão que busca as permissões no Sistema de Segurança;
• Formato: Superior Horizontal, padrão Amazon.com e Banco do Brasil;
• Linha mais fina que a linha da identificação do sistema logo acima;
• Barrinhas na vertical dividindo as opções principais do menu;
• As opções principais estarão sempre visíveis durante toda a utilização do sistema, e quando for visitada pelo mouse mostrará um grande menu geral com todas as opções para o referido módulo, dividido por itens que apenas organizarão a grande lista de opções, não sendo submenus.
• A largura da “caixa de menu” é fixa, ou seja todos os menus têm a mesma largura, não importando a quantidade de itens; (Porém esse tamanho da caixa pode ser alterado no css de cada aplicação)
• A caixa de menu deve se iniciar na posição da tela onde a descrição do menu estiver localizada e não na extrema esquerda da tela;

OBS: Dentro dessa largura fixa, a aplicação pode escolher o número de colunas que quiser (atentar para que se o css “mandar” uma largura onde só cabe 2 colunas e a aplicação colocar 3 colunas em uma das opções de menu, o layout pode quebrar!!)
A quantidade de colunas a ser utilizada em cada opção de menu é configurada diretamente na definição do menu.

Usuário + Informações Complementares + Links Rápidos

• A quarta linha do cabeçalho deve conter a identificação do usuário logado e informações relevantes ao sistema;
• Visível de todas as telas/opções da aplicação;
• Identificação através do rótulo: “Usuário” na cor padrão da aplicação;
• Deverá ser apresentado o nome completo, em cor destaque (ver item deste mesmo nome no item Cor) adotada para o sistema;
• As informações de ambiente ou escopo/contexto de utilização como Comarca e Vara, devem ser colocadas logo em seguida ao nome do usuário, obedecendo o mesmo padrão de cores adotado para este;
• Esta linha deve utilizar a mesma cor de fundo que o restante da tela principal;
• Alinhado à direita encontramos o menu de links rápidos com opções padrões a todas as aplicações, com ícones pequenos seguidos de texto descritivo:

Botões

• Botões serão utilizados para representar apenas operações padrão das aplicações que denotem uma ação muito utilizada, básica, e que contenha um texto simples;
• Demais ações, operações, ou visualizações serão representadas através de links com texto, sem ícone e com separador (|) entre as opções. Este caso é recomendado para ações não muito utilizadas, e com texto mais longo;
• A representação de uma ação em botão ou em link, fica a critério da aplicação, excetuando-se operações básicas listadas abaixo, que devem obrigatoriamente estar em botão;
• Todos os botões terão o mesmo tamanho suportando até 2 aumentos de fonte;
• SEM figura devido à dificuldade de se produzir ícones satisfatórios atualmente;
• O componente utilizado será o button;
• O conjunto de botões deve estar alinhado sempre à direita da tela;
• Uma linha horizontal deve guiar a leitura do usuário da esquerda para a direita da tela para que os botões não fiquem “perdidos” caso o espaço entre os dados e o botão seja grande;
• Rótulos padrões para as operações básicas:
  • Pesquisa Pesquisar
  • Inclusão Novo
  • Alteração/Edição Alterar
  • Gravação Salvar
  • Exclusão Remover
  • Cancelamento Cancelar / Voltar
  • Impressão Imprimir
  • Relatório Gerar Relatório
  • Inclusão de Item Adicionar
  • Remoção de Itens Remover
  • Seleção de um ou muitos Confirmar Seleção
  • Remoção de um ou muitos Confirmar Remoção

Botão Voltar

• Deve constar em toda a tela que tiver sido invocada por outra, dispensado seu uso nos casos onde a tela iniciou-se a partir de uma opção de Menu (ex. Telas de Pesquisa).
• Sua função é a de voltar para a tela que ofereça a opção imediatamente anterior a atual dentro do contexto da aplicação, e não a tela que necessariamente o invocou (history back);
• Deve ser representado através do componente Button e ser o último botão a ser mostrado, ao lado dos demais botões apresentados na tela (situados na parte inferior logo abaixo dos dados);
• Para telas que utilizem rolagem vertical é recomendada a adoção de um atalho com a a finalidade de posicionar a leitura diretamente no fim ou no topo da tela facilitando o encontro do botão Voltar.
• Os atalhos devem estar situados ao lado direito da tela, acompanhados por uma flecha (para cima ou para baixo) e serem representados pelo seguintes textos: “Fim da Página” e “Início da Página”;
• Em alguns casos, como nas telas de cadastro, é recomendada a sua substituição pelo botão CANCELAR para evidenciar o cancelamento da operação e a volta à página anterior.

Fonte

• Padrão utilizado: Verdana
• Será permitido o aumento através do navegador (serão utilizados os recursos já disponibilizados por estes sem nenhuma funcionalidade própria). A aplicação deverá se adequar para não quebrar o layout caso o navegador permita o aumento;
• Os rótulos seguirão o padrão normal COM Negrito e DOIS PONTOS; para tudo, sem distinção para Tela Detalhe e Tela de Cadastro ou relatórios de qualquer tipo;
  Obs: nota de rodapé.

Cor

• Padrão de cores pode variar de sistema para sistema;
• O número de cores utilizado nos sistemas deve ser padronizado, seguindo o estudo de cores previamente realizado. Atualmente: 7 (sete);
• Recomenda-se a utilização do conjunto de paletas de cores para a escolha das cores de uma nova aplicação;
• Uma vez adotada uma das paletas, deve-se seguir estritamente os tons sugeridos pela mesma (não alterar os tons);
• A cor de fundo do menu, quando aberto, deve ser complementar à cor padrão adotada para o sistema, em tom claro. Exemplo, se cor padrão = azul, então cor do menu= laranja ou amarelo claro.