Tribunal de Justiça de Pernambuco
Padronização de Interface
para Sistemas Web
Versão 1.0
Introdução
Este é um modelo completo para padronização de interfaces dos sistemas web do Tribunal de
Justiça de Pernambuco. A padronização inclui as melhores práticas de usabilidade e
acessibilidade, baseada no conjunto de regras da W3C, no Modelo de Acessibilidade do Governo
Federal (e-Mag), no site da ONG Acessibilidade Brasil e no livro Não me faça pensar (Krug), mas
possui uma visão própria e singular do TJPE, com especificações, indicações simplificadas e
priorizações adaptadas à realidade de nossas necessidades.
Para incorporar no dia-a-dia as recomendações descritas neste padrão, é necessário compreender
alguns conceitos e melhores práticas. Assim, o documento se divide em duas seções, uma teórica
e com melhores práticas e outra com as definições específicas para os sistemas web do TJPE.
Estrutura do documento:
1 – Melhores práticas e teorias de usabilidade e acessibilidade
2 – Especificação do Padrão
2.1 – Template
2.2 – Fonte
2.3 – Links
2.4 – Tipografia
2.5 – Marcadores e Numeração
2.6 – Cabeçalho
2.7 – Menu
2.8 – Breadcrumbs
2.9 – Layout
2.10 – Menu Específico
2.11 – Dashboards
2.12 – Botões
2.13 – Tabelas
2.14 – Paginação
2.15 – Formulários
2.16 – Mensagens
2.17 – Tooltip
2.18 – Impressão
2.19 – Relatórios
2.20 – Tela de Login
2.21 - Rodapé
3 – Considerações Finais
1 - Melhores práticas e teorias de usabilidade e acessibilidade
Usabilidade
A usabilidade é a capacidade, em termos funcionais humanos, de um sistema ser usado
facilmente e com eficiência pelo usuário (Shackel, 1993). Para Scapin (1993), a usabilidade está
diretamente ligada ao diálogo na Interface, e materializa-se na capacidade do software permitir
que o usuário alcance as suas metas na interação com o sistema.
Princípios de usabilidade:
1 - Crie uma hierarquia visual clara em cada página
Mostre com clareza e precisão os relacionamentos entre o que está na página: as coisas que se
relacionam entre si e as que fazem parte de outras.
2 - Quanto mais importante algo é, mais destacado está
Por exemplo, os tópicos mais importantes são maiores, estão em negrito, em uma cor diferente,
com mais espaço em branco ou mais próximos do topo da página – ou alguma combinação dessas
características
3 - Coisas que estejam relacionadas logicamente, também estão relacionadas visualmente;
Você pode mostrar que coisas são semelhantes agrupando-as sob um cabeçalho, exibindo-as de
uma forma visualmente parecida ou colocando-as em uma área claramente definida.
4 - Coisas “aninhadas” visualmente para mostrar quais fazem parte de quais.
Um cabeçalho da seção apareceria acima do título de uma determinada subseção, e assim por
diante, de forma a representar o aninhamento entre as seções e subseções.
5 – Antecipação
O sistema web deve antecipar-se às necessidades do usuário.
6 - Autonomia
Os usuários devem ter o controle sobre o sistema web. Os usuários sentem que controlam um web
site se conhecem sua situação em um meio abrangente, mas não infinito.
7 – Precaução nas cores
Utilizar as cores com precaução para não dificultar o acesso aos usuários com problemas de
distinção de cores.
8 – Consistência
As aplicações devem ser consistentes com as expectativas dos usuários, ou seja, com sua
aprendizagem prévia.
9 - Eficiência do usuário
Os sistemas web devem centrar-se na produtividade do usuário, não no próprio sistema. Por
exemplo, às vezes as tarefas com maior número de passos são mais rápidas de realizar para uma
pessoa que outras tarefas com menos passos mas mais complexas.
10 – Reversibilidade
Um sistema web há de permitir desfazer as ações realizadas
11 - Redução de tempo de latência.
Torna possível otimizar o tempo de espera do usuário, permitindo a realização de outras tarefas
enquanto se completa a prévia e informando ao usuário do tempo pendente para a finalização da
tarefa.
12 – Aprendizagem
Os sitemas web devem requerer um mínimo processo de aprendizagem e devem poder ser
utilizados desde o primeiro momento.
13 – Proteção do Trabalho
A proteção do trabalho dos usuários é algo prioritário, deve-se assegurar que os usuários nunca
percam seu trabalho por conseqüência de um erro.
14 - Legibilidade
A cor dos textos deve contrastar com a do fundo, e o tamanho de fonte deve ser suficientemente
grande.
15 - Continuação das ações do usuário.
Conhecendo e armazenando informação sobre seu comportamento prévio deve-se permitir ao
usuário realizar operações freqüentes de maneira mais rápida.
16 - Interface visível.
Deve-se evitar elementos invisíveis de navegação que há de ser inferidos pelos usuários, menus
desdobráveis, indicações ocultas, etc.
Outros princípios para o desenho das páginas de um sistema web são:
a) Os usuários devem ser capazes de alcançar seus objetivos com um mínimo esforço e com
resultados máximos.
b) Um sistema web não pode tratar o usuário de forma hostil. Quando o usuário comete um erro o
sistema deve solucionar o problema, ou por padrão sugerir varias soluções possíveis, mas não
emitir respostas que meramente informem do erro culpando o usuário.
c) Em nenhum caso um sistema web pode ir abaixo ou produzir um resultado inesperado. Por
exemplo, não devem existir links quebrados.
d) Um sistema web deve se ajustar aos usuários. A liberdade no uso de uma funcionalidade é um
termo perigoso, quanto maior for o número de ações que um usuário possa realizar, maior será a
probabilidade que cometa um erro. Limitando o número de ações ao público objetivo facilita-se o
uso de um sistema web.
e) Os usuários não devem sofrer sobrecarga ou falta de informação. Quando um usuário entra em
um sistema web e não sabe por onde começar ou como realizar uma atividade, existe sobrecarga
ou falta de informação.
f) Um sistema web deve ser consistente em todos os passos do processo. Embora possa parecer
apropriado que diferentes áreas tenham designs diferentes, a consistência entre os designs
facilita ao usuário o uso de um sistema web.
g) Um sistema web deve prover feedback aos usuários, de maneira que estes sempre conheçam e
compreendam o que acontece em todos os passos do processo.
Acessibilidade
A expressão “acessibilidade”, presente em diversas áreas de atividade, tem também na
informática um importante significado. Representa para o nosso usuário não só o direito de
acessar a rede de informações, mas também o direito de eliminação de barreiras arquitetônicas,
de disponibilidade de comunicação, de acesso físico, de equipamentos e programas adequados,
de conteúdo e apresentação da informação em formatos alternativos.
Não é fácil, a princípio, avaliar a importância dessa temática associada à concepção de páginas
para a web. Mas os dados W3C (Consórcio para a WEB) e WAI (Iniciativa para a Acessibilidade na
Rede) apontam situações e características diversas que o usuário pode apresentar:
1. Incapacidade de ver, ouvir ou deslocar-se, ou grande dificuldade - quando não a
impossibilidade - de interpretar certos tipos de informação.
2. Dificuldade visual para ler ou compreender textos.
3. Incapacidade para usar o teclado ou o mouse, ou não dispor deles.
4. Insuficiência de quadros, apresentando apenas texto ou dimensões reduzidas, ou uma ligação
muito lenta à Internet.
5. Dificuldade para falar ou compreender, fluentemente, a língua em que o documento foi
escrito.
6. Ocupação dos olhos, ouvidos ou mãos, por exemplo, ao volante a caminho do emprego, ou no
trabalho em ambiente barulhento.
7. Desatualização, pelo uso de navegador com versão muito antiga, ou navegador completamente
diferente dos habituais, ou por voz ou sistema operacional menos difundido.
Essas diferentes situações e características precisam ser levadas em conta pelos criadores de
conteúdo durante a concepção de uma página ou sistema web.
Para ser realmente potencializador da acessibilidade, cada projeto de sistema deve proporcionar
respostas simultâneas a vários grupos de incapacidade ou deficiência e, por extensão, ao universo
de usuários da web.
Os autores de páginas em HTML obtêm um maior domínio sobre as páginas criadas, por exemplo,
com a utilização e divisão de folhas de estilo para controle de tipos de letra, e eliminação do
elemento FONT.
Assim, além de torná-las mais acessíveis a pessoas com problemas de visão, reduzem seu tempo
de transferência, em benefício da totalidade dos usuários.
Princípios para a acessibilidade na WEB
A acessibilidade à web é parte integrante do projeto brasileiro de inclusão digital para as pessoas
portadoras de necessidades especiais.
No início do processo de adaptação dos sítios existentes a esse novo conceito, foram
estabelecidos princípios gerais que, embora sem a garantia de total acessibilidade, favorecem
seu conhecimento e experimentação por parte dos responsáveis. São os seguintes:
. quanto à apresentação da informação
Associação de um texto a cada elemento não textual, como imagens, representações gráficas de
texto, regiões de mapa de imagem, animações, botões gráficos etc.
. quanto à navegação
Garantia de que as ligações textuais ou com um equivalente textual sejam palavras ou expressões
compreensíveis e que os elementos da página possam ser ativados pelo teclado.
. quanto à implantação
Utilização dos requisitos de acessibilidade de conteúdo da WEB do W3C/WAI, disponíveis em
português (www.acessobrasil.org.br) ou inglês (www.cast.org/bobby) .
Desenho das Páginas
Em relação ao desenho das páginas, são pressupostos do conceito de desenho universal:
1- Equiparação nas possibilidades de uso
O design é útil e comercializável às pessoas com habilidades diferenciadas.
2- Flexibilidade no uso
O design atende a uma ampla gama de indivíduos, preferências e habilidades.
3- Uso Simples e intuitivo
O uso do design é de fácil compreensão, independentemente de experiência, nível de formação,
conhecimento do idioma ou da capacidade de concentração do usuário.
4- Captação da informação
O design comunica eficazmente ao usuário as informações necessárias, independentemente de
sua capacidade sensorial ou de condições ambientais.
5- Tolerância ao erro
O design minimiza o risco e as conseqüências adversas de ações involuntárias ou imprevistas.
6- Mínimo esforço físico
O design pode ser utilizado com um mínimo de esforço, de forma eficiente e confortável.
7- Dimensão e espaço para uso e interação
O design oferece espaços e dimensões apropriados para interação, alcance, manipulação e uso,
independentemente de tamanho, postura ou mobilidade do usuário.
Orientações para a construção das páginas
É fundamental assegurar uma transformação harmoniosa entre os elementos que compõem a
página, tendo sempre em mente a necessidade de separar a estrutura da apresentação
(conteúdo, estrutura e apresentação).
Sempre que possível, incluir equivalentes textuais em todos os elementos (imagens, sons e
demais elementos da página). O texto pode ser incluído de tal modo que seja possível ser
interpretado por praticamente todos os dispositivos de navegação e por quase todos os usuários.
Criar documentos que cumpram a sua finalidade, mesmo que o usuário não consiga ver e/ou
ouvir. Fornecer informações que preencham a mesma finalidade ou função que o áudio ou o
vídeo, de tal maneira que se adaptem o melhor possível a canais sensoriais alternativos. Isso não
significa que deva ser criada uma versão áudio pré-gravada de todo o site, para torná-lo acessível
a usuários cegos ou com problemas visuais graves. Esses podem recorrer à tecnologia dos leitores
de tela para extraírem todas as informações textuais das páginas.
Criar documentos que não dependam apenas de um tipo de equipamento. As páginas devem
poder ser utilizadas por pessoas que não possuam mouse, que tenham monitores de vídeo
pequenos, de baixa resolução ou monocromáticos, que apenas recebam voz ou texto.
Tornar o conteúdo compreensível e navegável
Os criadores de conteúdo Web devem tornar as suas produções compreensíveis e navegáveis. Isso
passa não só por uma linguagem clara e simples, mas também pela apresentação de meios
compreensíveis para proceder à navegação entre páginas e no interior delas. A inclusão de
ferramentas de navegação e orientação nas páginas é um fator promotor da acessibilidade e da
facilidade de uso. Nem todos os usuários podem se servir de "pistas" gráficas (como mapas de
imagens, barras de deslocamento proporcionais, frames colocados lado a lado, ou gráficos) que
guiam os usuários com visão normal, em navegadores gráficos de estações de trabalho gráficas.
Os usuários perdem também informações de contexto quando apenas conseguem ver uma parte
da página, seja porque estão acessando a página palavra a palavra (por discurso sintetizado ou
monitor Braille), seja seção a seção (em um monitor de vídeo pequeno ou muito ampliado). Sem
informações de orientação, os usuários podem não compreender tabelas, listas ou menus
extensos, por exemplo.
2 – Especificação do Padrão de Interface
O desenho das páginas de sistemas web deve ter o único objetivo de tornar a experiência de
interação do usuário fácil e agradável. A simplificação e a intuição humana, em relação à
disposição dos elementos da página, devem ser elevadas ao máximo. Não é interessante fazer o
usuário pensar sobre quais são as possibilidades de navegação, ou em que seqüência será lido o
texto ou preenchido o formulário. Para que se alcancem as propriedades de usabilidade e
acessibilidade nos sistemas web do TJPE, algumas recomendações essenciais são apresentadas
nesta seção.
2.1 – Template
O modelo de desenho do template padrão proposto tenta construir uma identidade visual dos
sistemas web do TJPE. Todos os demais elementos especificados neste documento devem
harmonizar com o desenho do template. Para isso, as especificações dos elementos que compõem
a estrutura e formatação das páginas foram definidas com este propósito e devem ser seguidas à
risca, o que tornará fácil aos usuários navegar e identificar os elementos padronizados dos
sistemas web do TJPE.
A figura abaixo é um exemplo da composição de páginas web.
Especificações:
Ao construir o layout de páginas o projetista deve sempre utilizar a resolução padrão (1024x768
pixels), mas sem deixar de conferir o resultado final em resoluções menores (800 x 600 pixels) e
em resoluções acima da resolução padrão.
As páginas são construídas dentro de um contêiner que permite a utilização de uma resolução de
vídeo de no mínimo 800 x 600 pixels. O Contêiner limita a largura máxima da página a 968
pixels, uma vez que páginas com largura ilimitada podem dificultar a percepção humana na
compreensão do conteúdo e na leitura do texto nele disposto. No entanto, o contêiner não limita
a resolução máxima do vídeo do usuário. Para isso é necessário definir css do contêiner com as
seguintes especificações:
#conteiner{
width: 92%;
margin:0 auto;
max-width:968px;
min-width: 740px;
}
Ao projetar um sistema web neste padrão, lembre-se do princípio de usabilidade em relação à
divisão de áreas: “Divida as páginas em áreas claramente definidas.”
2.2 – Fonte
A fonte padrão utilizada é a Trebuchet MS. Por questões de acessibilidade, deve-se definir um
tamanho padrão de fonte válido para todo o documento e em seguida atribuir especificações
relativas aos tamanhos de fontes utilizados nas outras tags. Por exemplo, uma vez definido o
tamanho generalizado da fonte, uma tag H1 deve ser formatada, em relação ao tamanho da
fonte, com a especificação relativa: font-size: 140%;
A padrão do estilo geral da fonte segue a seguinte especificação:
font-family: trebuchet ms,verdana,arial,tahoma;
font-color: #666666;
font-size: 12px/1.5;
2.3 – Links
Os links devem ser identificados por cor única em todas as páginas dos sistemas web.
Princípio de Usabilidade: “Deixe óbvio o que pode ser clicado.”
Para serem facilmente percebidos pelos usuários, os links devem ter cor diferenciada. A cor
definida para os links foi o azul (DarkBlue) - hexadecimal (#003399).
Ao passar o mouse sobre o link, deve-se sublinhar o link e alterar a cor para o azul (Dodgerblue) –
hexadecimal (#0066CC).
A seguinte especificação atende aos requisitos de usabilidade dos links:
a:link, a:visited {
color: #003399;
text-decoration: none;
}
a:hover{
color: #0066CC;
text-decoration: none;
}
Para complementar a experiência dos usuários com a identificação do tipo de link, algumas
convenções de imagens de links são definidas ao incluir um link com um tipo específico.
Por questões de codificação, deve-se disponibilizar alguma opção de não incluir a convenção de
imagens, como por exemplo aplicando um estilo “noicon” aos atributos do link.
Codificação desses links:
Link
Link
Link
Link
Link
Link
Link
Link
Link
para
para
para
para
para
para
para
para
para
um
um
um
um
um
um
um
um
um
<a
<a
<a
<a
<a
<a
<a
<a
<a
href="something.doc">documento word</a><br />
href="something.pdf">documento pdf</a><br />
href="http://www.something.com">site externo</a><br />
href="something.rss">feed rss</a><br />
href="something.xls">documento excel</a><br />
href="aim:something">link AIM</a><br />
href="mailto:something">endereço de email</a><br />
href="http://tjpe.jus.br/">link do tjpe</a><br />
class="noicon" href="http://yourwebsite.com">an internal link</a>
2.4 Tipografia
A tipografia cria uma hierarquia visual clara em cada página exibida nos sistemas.
A tipografia deve ser bem definida e simplificada, para que não ocorram discrepâncias entre as
interfaces dos sistemas web. Os projetistas devem defini-la de forma clara e aplicá-la
automaticamente nos estilos HTML padronizados. Por exemplo: Ao se definir um título, este deve
estar entre as tags <H1>Título</H1>. Assim, este título será formatado conforme a definição
padrão.
É necessário que se mostrem com clareza e precisão os relacionamentos entre o que está na
página: as coisas que se relacionam entre si e as que fazem parte de outras.
3 Princípios de hierarquia visual de usabilidade:
“Quanto mais importante algo é, mais destacado está.”
“Coisas que estejam relacionadas logicamente, também estão relacionadas visualmente.”
“Coisas são - aninhadas - visualmente para mostrar quais fazem parte de quais.”
A tipografia das páginas deve seguir o seguinte padrão:
H1 - Utilizado para formatar o título principal da página.
OBS: Cada página deve ter apenas um único título marcado com a tag H1.
font-size: 180%;
line-height:1.2em;
margin-bottom:.3em;
H2 – Utilizado para formatar um título uma seção da página.
font-size: 160%;
line-height:1.2em;
margin-bottom:.3em;
margin-top:1em;
H3 – Utilizado para formatar um título de uma subseção hierarquicamente abaixo de alguma
seção da página.
font-size: 140%;
line-height:1.2em;
margin-bottom:.3em;
H4 – Utilizado para formatar um título hierarquicamente abaixo da subseção H3.
font-size: 120%;
line-height:1.2em;
margin-bottom:.3em;
H5 – Utilizado para formatar um título hierarquicamente abaixo de um título com a tag H4
font-size: 100%;
line-height:1.2em;
margin-bottom:.3em;
H6 – Utilizado para formatar um título hierarquicamente abaixo de um título com a tag H5
font-size: 90%;
line-height:1.2em;
margin-bottom:.3em;
Utilização da class="fancy"
Marque uma tag com class="fancy" para indicar uma citação
Utilização da class="thin"
Marque uma tag de cabeçalho (h1,h2,h3,etc) com class="thin" para retirar o negrito
Utilização da class="caps"
Marque uma tag com class="caps" para exibir os caracteres em CAIXA ALTA.
“Blockquote”
Utilize a tag "blockquote" para dar um destaque em alguma citação ou comentário sobre o
conteúdo do texto. Veja a especificação da formatação:
font-size:1.2em;
padding-left:1em;
border-left:4px solid #ccc;
OBS: No caso de mensagens de erro ou alerta, utilize o padrão de mensagens.
2.5 - Marcadores e Numeração
Faça uso de marcadores e numeração quando desejar listar itens de forma ordenada ou indicativa
ou quando desejar indicar fases ou etapas de procedimentos. Siga a formatação abaixo
especificada:
Lista ordenada:
ol {
list-style: decimal;
}
Lista não ordenada:
ul {
list-style: square;
}
Itens da lista:
li {
margin-left: 30px;
}
2.6 – Cabeçalho
O cabeçalho é composto pelo nome do sistema, opções de ajuda e suporte, imagem de
background com a logomarca do TJPE e uma opção de pesquisa indexada. A figura abaixo
demonstra a composição do cabeçalho:
Especificações:
O nome do sistema deve ser o primeiro elemento do cabeçalho. Está alinhado à esquerda com a
seguinte formatação:
#nome_do_sistema{
color:#666666;
float:left;
font-size:130%;
margin:3px 0 0 5px;
}
As opções de ajuda e sair(logout) estão horizontalmente na mesma linha do nome do sistema,
alinhadas à direita. As opções estão inclusas em retângulos com bordas arredondadas na parte
superior e com um fundo degradê em cinza-claro (as imagens estão disponíveis no exemplo do
modelo). As especificações de fonte e link devem ser consultadas para a disponibilização das
opções de ajuda e logout.
Na opção de ajuda, deve ser apresentado todo o conteúdo de ajuda do sistema, incluindo
manuais de utilização do sistema, vídeos-manuais, exemplos e modelos de documentos utilizados
no sistema, perguntas freqüentes (FAQs) e demais opções de ajuda.Também é possível dispor de
um catálogo de serviço com a listagem dos responsáveis e quaisquer outras informações que
possibilite ao usuário reportar erro, fazer sugestões e entrar em contato.
A logomarca do sistema e a imagem de fundo (background) foram desenhadas com cores leves e
devem ser utilizadas em todos os sistemas web, facilitando ao usuário o estabelecimento da
identidade visual dos sistemas web do TJPE.
Ao utilizar uma resolução de 800 x 600 pixels, o usuário não visualizará a imagem à esquerda
(estátua) que compõe a imagem de fundo.Veja o exemplo:
Recomenda-se dispor uma opção de pesquisa deve ser habilitada para todos os sistemas web e
está indexada ao menu, conteúdo textual do sistema e outras opções definidas pela análise de
requisitos. O nome padrão para a opção de pesquisa deve ser atentamente restrito à
nomenclatura “pesquisa”, definido com a formatação do css:
#pesquisar{
margin-top:60px; /* necessário para alinhamento vertical na parte inferior */
float:right; /* alinhamento horizontal à esquerda */
margin-right: 10%;
color: #666666;
font-size: 120%;
}
2.7 – Menu
O menu será disposto horizontalmente, uma vez que os usuários já lidam bastante com menus
horizontais em softwares desktop. A hierarquização do menu deve ser bastante planejada para
que se elimine qualquer confusão em relação à disponibilização das opções do menu. Aconselhase não utilizar mais de 3 níveis de menu. No entanto, o componente utilizado para renderização
do menu deve suportar uma quantidade ilimitada de níveis.
A fonte do menu deve ser do mesmo tipo e tamanho dos textos em link, com exceção da cor de
fundo do menu e da respectiva imagem de background. A altura do menu é padronizada em 22
pixels. Caso sejam utilizadas imagens no menu, as medidas são:
#imagens-menu{
width: 16px;
height: 16px;
}
O menu utiliza um background em azul para a disposição dos itens do primeiro nível. Este nível
deve, também, suportar ícones com a especificação acima. O background em degradê deve ir da
cor azul #336699 para a cor azul #76A3F5, gerando a imagem abaixo:
Com 22 pixels de altura.
Ao passar o cursor sobre o primeiro nível do menu, deve-se alternar a imagem do background que
é um degradê de branco #FFFFFF para a cor cinza #CCCCCC, gerando a imagem abaixo:
Com 22 pixels de altura.
A definição abaixo deve ser seguida:
#background-primeironivel{
background: #336699 url(../images/menu_background_over.jpg);
}
#background-primeironivel-over{
background: #FFFFFF url(../images/background_over.jpg);
}
Por questões de acessibilidade, os menus devem ser formatados utilizando as tags de listagem em
HTML: ul e li. Neste caso, garantimos que, caso o css não seja carregado, ainda assim, o menu
será exibido na forma de lista.
Do segundo nível em diante, deve-se usar a cor cinza-claro #F3F3F3 no background. Para o local
das imagens, que compreende uma faixa de 25pixels de largura, deve-se usar a cor #E0E0E0. Essa
distinção gera o efeito abaixo:
2.8 – Breadcrumbs
Breadcrumb é uma ajuda de navegação usada na interface de páginas web, dando aos usuários
uma forma de guardar a trilha percorrida até a página onde ele se encontra. Com isso é possível
voltar a um ponto anterior desejado apenas clicando no link disponível.
No padrão do TJPE será usado breadcrumb de caminho, ou seja, indicando o caminho estruturado
percorrido até a página onde o usuário se encontra.
Há um contêiner padrão para inserção de breadcrumbs disposto logo abaixo do menu. A análise
de requisitos deve especificar o nível de abstração e detalhamento utilizado nos links do
breadcrumb.
Por questões de acessibilidade, os breadcrumbs devem ser formatados utilizando as tags de
listagem em HTML: ul e li. Neste caso, garantimos que, caso o css não seja carregado, ainda
assim, o menu será exibido na forma de lista.
A especificação do css que compõe o contêiner do Breadcrumb segue o padrão:
Distância em relação ao menu:
margin-top:10px;
Contêiner:
border:1px solid #D0D0D0;
height: 18px;
padding: 4px 0 0 8px;
background: #F4F4F8;
padding:2px 0;
2.9 – Layout
O template deste padrão contempla 4 opções de layout para disponibilização de funções,
conteúdo e informações de utilização do sistema.
1ª opção: Conteúdo em única coluna
<div class="conteudo">
<!-- CONTEÚDO DA PÁGINA -->
</div>
2ª opção: Conteúdo em 2 colunas (menu específico + conteúdo)
<div class="conteudo">
<div class="layout_menu_vertical">
<!-- MENU ESPECÍFICO -->
</div>
<div class="layout_menuvertical_conteudo">
<!-- CONTEÚDO DA PÁGINA -->
</div>
</div>
3ª opção: Conteúdo em 3 colunas (menu específico + conteúdo + informações
complementares)
<div class="conteudo">
<div class="layout_menu_vertical">
<!-- MENU ESPECÍFICO -->
</div>
<div class="layout_menuvertical_conteudo_informacoes">
<!-- CONTEÚDO DA PÁGINA -->
</div>
<div class="layout_informações_complementares">
<!-- INFORMAÇÕES COMPLEMENTARES -->
</div>
</div>
4ª opção: Conteúdo em 2 colunas (conteúdo + informações complementares)
<div class="conteudo">
<div class="layout_conteudo_informacoes">
<!-- CONTEÚDO DA PÁGINA -->
</div>
<div class="layout_informações_complementares">
<!-- INFORMAÇÕES COMPLEMENTARES -->
</div>
</div>
2.10 – Menu específico
Alguns sistemas precisam fazer uso de um menu vertical para disponibilizar as opções para uma
determinada funcionalidade. Por exemplo, a utilização do menu vertical para as opções de gestão
de documentos eletrônicos, caixa de entrada ou saída de e-mail e menu com hierarquização de
pastas organizacionais.
Para tais sistemas, sugere-se a utilização de um menu vertical, que disponha as opções
específicas para tais funcionalidades.
O menu vertical deve ser disposto à esquerda do conteúdo principal da página, tendo 160px de
largura.
As categorias de itens do menu, como por exemplo “Caixa de Entrada”, possuem a imagem
abaixo como background:
Os itens agrupados nas categorias do menu vertical tem a seguinte cor de background: #F4F4F8.
.msg_list {
width: 160px;
}
.msg_head {
padding: 3px 5px;
cursor: pointer;
background: #CCCCCC url(images/back_bottom.jpg);
}
.msg_body {
padding: 5px 10px 10px;
background-color:#F4F4F8;
}
O menu, se possível, deve possuir o efeito “accordion”. Ou seja, é possível clicar, de acordo com
o exemplo, na categoria Caixa de Saída para expandir os itens agrupados nesta categoria,
obtendo o efeito abaixo:
2.11 – Dashboards
O termo Dashboard é utilizado para indicar um "painel de indicadores" que dão um overview do
atual estado do sistema web, indicando, de forma resumida e gráfica, as principais informações
importantes do negócio aos usuários.
A maioria dos sistemas não possui informações nem conteúdo na página principal (a primeira tela
do sistema após o login). Assim, sugere-se que sejam definidos indicadores com informações
visuais e resumidas, relevantes para o sistema.
Cabe à análise de requisitos a definição de quais indicadores farão parte da página inicial.
A utilização de dashboards na página inicial não é obrigatória, mas recomendada.
2.12 – Botões
Os botões são padronizados em relação às cores, altura e ícones utilizados e devem ser exibidos
de acordo com o padrão de nomenclatura descrito neste documento.
Os botões devem suportar a exibição com texto e a exibição com ícone e texto.
A especificação do css que formata os botões é:
a.button, button {
padding:2px 10px 2px 10px;
border:1px solid #bbb;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
background-color:#e9e9e9;
font-size:100%;
line-height:100%;
text-decoration:none;
font-weight:bold;
cursor:pointer;
}
Existem três opções para utilização dos botões: padrão, positivo, negativo.
A forma padrão formata os botões de acordo com a especificação acima e aplica o seguinte css
quando o mouse está sobre o botão:
button:hover, a.button:hover{
background-color:#dff4ff;
border:1px solid #c2e1ef;
color:#336699;
}
a.button:active, button:active{
background-color:#6299c5;
border:1px solid #6299c5;
color:#fff;
}
Exemplo de botão padrão (sem o mouse sobre ele):
Exemplo de botão parão (com o mouse sobre ele):
A forma positiva deve ser utilizada quando for necessário identificar uma ação positiva para tal
botão, como por exemplo salvar os dados preenchidos em um formulário. Deve-se usar o seguinte
css para a forma positiva:
body .positive {
color:#529214;
}
a.positive:hover, button.positive:hover {
background-color:#E6EFC2;
border:1px solid #C6D880;
color:#529214;
}
a.positive:active, button.positive:active {
background-color:#529214;
border:1px solid #529214;
color:#fff;
}
Exemplo de botão com a classe (positive) (sem o mouse sobre ele):
Exemplo de botão com a classe (positive) (com o mouse sobre ele):
A forma negativa deve ser utilizada quando for necessário identificar uma ação negativa para tal
botão, como por exemplo cancelar uma tela de formulário. Deve-se usar o seguinte css para a
forma negativa:
body .negative {
color:#d12f19;
}
a.negative:hover, button.negative:hover {
background:#fbe3e4;
border:1px solid #fbc2c4;
color:#d12f19;
}
a.negative:active, button.negative:active {
background-color:#d12f19;
border:1px solid #d12f19;
color:#fff;
}
Exemplo de botão com a classe (negative) (sem o mouse sobre ele):
Exemplo de botão com a classe (negative) (com o mouse sobre ele):
2.13 – Tabelas
Na utilização de tabelas, deve-se fornecer resumo das tabelas utilizando o atributo summary,
caso seja criada uma tabela para dados. Se a tabela for criada para efeito de design, deixar o
summary em branco.
Em tabelas de dados com dois ou mais níveis lógicos de cabeçalhos, sejam de linha ou coluna,
utilizar marcações para associar as células de dados às células de cabeçalho.
As tabelas complexas devem ser organizadas de forma a identificar facilmente as divisões.
O exemplo abaixo demonstra a correta construção de tabelas.
<table border="1" cellpadding="2" cellpadding="3">
<caption>Despesas de Viagem (custo atual, real)</caption>
<thead>
<tr>
<th><span id="t-l1">Viagem,<br />data</span></th>
<th
<th
<th
<th
scope="column">Refeições</th>
scope="column">Alojamento</th>
scope="column"><abbr="Transporte">Trans.</abbr></th>
scope="column">Total</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" headers="t-l1">Recife</th>
</tr>
<tr>
<td scope="row" headers="t-l2">25 Ago 09</td>
<td>37,74</td>
<td>112,00</td>
<td>45,00</td>
<td>45,00</td>
</tr>
<tr>
<th scope="rowgroup" headers="t-l1">Maceió</th>
</tr>
<tr>
<td scope="row" headers="t-l2">26 Ago 09</td>
<td>37,74</td>
<td>112,00</td>
<td>45,00</td>
<td>45,00</td>
</tr>
</tbody>
</table>
O css abaixo deve ser aplicado na formatação das tabelas:
table {
border:1px solid #bbb;
margin-bottom:10px;
}
col.colC {
width:8em;
}
th, td {
padding:.2em 1em;
text-align:left;
}
thead th {
border-bottom:2px solid #888;
background:#E6E6E6;
padding:.4em 1em .2em;
}
thead th.table-head {
font-size:1em;
font-weight:normal;
text-transform:uppercase;
color:#fff;
background:#555;
border:1px solid #555;
}
tbody th,
tbody td {
border-top:1px solid #bbb;
border-bottom:1px solid #bbb;
}
tbody tr.odd th,
tbody tr.odd td {
background:#fff;
}
tfoot th,
tfoot td {
border-top:2px solid #666;
background:#eee;
}
tfoot tr.total th,
tfoot tr.total td {
border-top:6px double #666;
}
tfoot tr.total th {
text-transform:uppercase;
}
th.currency,
td.currency {
text-align:right;
}
2.14 – Paginação
A paginação facilita a visualização dos dados oriundos de alguma consulta. Os dados são dispostos
na forma de uma tabela dinâmica que suporta opções de navegação com paginação e pesquisa
nos campos.
A navegação deve suportar os seguintes requisitos:
1 – Fornecer uma opção com o rótulo “Primeiro” que vai para a primeira página da lista;
2 – Fornecer uma opção com o rótulo “Anterior” que vai para a página anterior à atualmente
visualizada.
3 – Fornecer uma opção de paginação com no máximo 5 botões de navegação, rotulados em
números decimais, iniciando-se em 1. Caso a quantidade de registros seja maior que os 5 botões
de navegação, os demais devem ser ocultos. Ao clicar na última opção (botão 5) o usuário passa a
visualizar as opções ocultas. Exemplo:
4 – Fornecer uma opção com o rótulo “Próximo” que vai para a próxima página da lista;
5 – Fornecer uma opção com o rótulo “Último” que vai para a última página anterior da lista.
6 – Suportar a limitação da quantidade de registros mostrados na tela. Por padrão, a quantidade
inicial é de 10 registros. A análise de requisitos deve especificar o limite máximo da visualização
da quantidade de registros na paginação. Recomenda-se as quantidades: 10, 25, 50 e 100.
Exemplo:
7 – Checkbox com a opção de marcar vários registros simultaneamente para aplicar as ações
dispostas na barra de ferramentas. O Checkbox de cada registro deve ser disponibilizado no
primeiro campo à direita do registro. Exemplo:
6 – Para satisfazer as propriedades de pesquisa na tabela de paginação, deve-se disponibilizar um
campo com uma única opção que filtra os registro de acordo com o campo mais evidente na
paginação (geralmente a descrição do item do registro), conforme mostrado na figura abaixo:
Deve-se dispor, ao lado da pesquisa simples, uma opção de pesquisa avançada. Ao clicar no link,
uma janela modal deve surgir com as opções de busca simultânea em vários campos da tabela,
conforme definição da análise de requisitos. O exemplo abaixo demonstra uma busca em 2
campos que podem ser realizados simultaneamente. Ao clicar em “Pesquisar” a janela modal é
fechada e o resultado da pesquisa é exibido na tabela de paginação.
7 – A barra de ferramentas deve ser localizada acima da tabela, na parte esquerda. A barra de
ferramenta deve disponibilizar as ações possíveis a serem realizadas de acordo com os registros
da paginação. Algumas ações, como a de exclusão e edição de registros, devem interagir de
acordo com as opções marcadas no checkbox de cada registro da paginação.
Deve-se atentar aos requisitos de botões e ícones definidos neste documento para compor a barra
de ferramentas. A análise de requisitos definirá as ações disponíveis na barra de ferramentas.
Os botões devem ser disponibilizados sobre o fundo uma área horizontal com uma imagem de
background degradê que vai da cor cinza #CCCCCC à cor branca #FFFFFF, com 32 pixels de altura,
gerando a imagem abaixo:
Exemplo da barra de ferramentas:
8 - É interessante o suporte às cores para facilitar a visualização e compreensão dos itens da
tabela. É obrigatória, no mínimo, em relação às cores, a alternância de cores entre os registros
pares e ímpares, gerando o efeito abaixo:
9 – O cabeçalho da tabela de paginação, que especifica o tipo do valor representado em cada
coluna, deve ser diferenciado dos demais dados ou registros da tabela. Pode-se utilizar uma linha
na cor preta #000000, com 1pixel de altura, para separar o cabeçalho da tabela do restante dos
dados, conforme a figura abaixo.
2.15 – Formulários
Os formulários devem possuir componentes dinâmicos de design e validação. Por exemplo, ao
clicar no campo de preenchimento de e-mail, conforme a figura abaixo, toda a linha deve ser
destacada com a cor #FFCC99.
Caso o campo seja de preenchimento obrigatório, um asterisco * deve ser colocado
imediatamente à esquerda do campo.
Os botões que definem as ações a serem executadas no formulário devem estar disponíveis no
final do formulário, conforme a figura abaixo:
A especificação do css a seguir deve ser aplicada para a base dos botões de ação ao final do
formulário:
.uniForm .buttonHolder {
background: #F9F9F9 url(../../images/pagination/back_toolbar.jpg) repeat-x scroll 0 0;
font-size:100%;
margin:1em 0;
padding:10px 10px 4px 0;
}
Os erros que forem gerados quando algum campo obrigatório não for preenchido ou quando algum
campo foi incorretamente preenchido devem ser apresentados com as notificações de mensagens
de erro, utilizando a classe “error” (ver padronização de mensagens).
Os campos que não forem corretamente preenchidos ou que apresentarem erro na validação
devem ser destacados, conforme o exemplo abaixo:
As especificações de nomenclatura, cores e outras oriundas da análise de requisitos devem ser
aplicadas para que a experiência dos usuários no preenchimento dos formulários seja facilitada e
bastante compreensível.
2.16 – Mensagens
As mensagens geradas para o usuário devem seguir o seguinte padrão:
1) Mensagens positivas ou de sucesso:
Ícone:
.success {
background:#E6EFC2;
color:#264409;
border-color:#C6D880;
padding:.8em;
margin-bottom:1.6em;
border:2px solid #ddd;
}
2) Mensagens negativas ou de erro:
Ícone
.error {
background:#FBE3E4;
color:#8a1f11;
border-color:#FBC2C4;
padding:.8em;
margin-bottom:1.6em;
border:2px solid #ddd;
}
3) Mensagens de advertência, notificação ou informação:
Ícone
.notice {
background:#FFF6BF;
color:#514721;
border-color:#FFD324;
padding:.8em;
margin-bottom:1.6em;
border:2px solid #ddd;
}
2.17 – Tooltip
Tooltip é um elemento de interface gráfica para usabilidade que é usado em conjunto com o
cursor do mouse, quando o este se encontra sobre um item que necessita de uma pequena
informação ou explicação de seu comportamento ou funcionalidade.
É recomendado o uso de tooltip para fornecer informações úteis na usabilidade e funcionalidade
da interface, além da possibilidade de fornecer informações sobre o negócio do sistema, caso
seja necessário.
A especificação do css que formata o tooltip segue o padrão:
#tooltip {
font-family: trebuchet ms,verdana,arial,tahoma;
font-color: #666666;
font-size: 12px/1.5;
position: absolute;
z-index: 3000;
border: 1px solid #B8860B;
/* Cor DarkGoldenrod */
background-color: #F5DEB3;
/* Cor Wheat */
padding: 5px;
opacity: 0.8;
}
2.18 – Impressão
As impressões de páginas de telas dos sistemas que utilizarem este padrão devem aplicar o css
abaixo para obter um efeito natural e compreensível do conteúdo das telas:
body {
width:100% !important;
margin:0 !important;
padding:0 !important;
line-height: 1.4;
word-spacing:1.1pt;
letter-spacing:0.2pt; font-family: trebuchet ms,verdana,arial,tahoma; color: #000; background:
none; font-size: 13px/1.5; }
/*Headings */
h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; }
h1{font-size:130%;}
h2{font-size:120%;}
h3{font-size:110%;}
h4,h5,h6{font-size:105%;}
code { font: 10pt Courier, monospace; }
blockquote { margin: 1.3em; padding: 1em; font-size: 85%; }
hr { background-color: #ccc; }
/* Images */
img { float: left; margin: 1em 1.5em 1.5em 0; }
a img { border: none; }
/* Links */
a:link, a:visited { background: transparent; font-weight: 700; text-decoration:
underline;color:#333; }
a:link[href^="http://"]:after, a[href^="http://"]:visited:after { content: " (" attr(href) ") "; fontsize: 90%; }
a[href^="http://"] {color:#000; }
/* Table */
table { margin: 1px; text-align:left; }
th { border-bottom: 1px solid #333; font-weight: bold; }
td { border-bottom: 1px solid #333; }
th,td { padding: 4px 10px 4px 0; }
tfoot { font-style: italic; }
caption { background: #fff; margin-bottom:2em; text-align:left; }
thead {display: table-header-group;}
tr {page-break-inside: avoid;}
/*add sections here to hide various parts from the site*/
#header, #footer, #navigation, #sidebar, button, a.button
{display:none;}
/* Ocultando elementos */
#topo_direita,
#procurar,
#menu,
#rodape {
display: none;
}
2.19 –Relatórios
Os relatórios gerados pelo sistema devem, sempre que possível, dispor de maneiras alternativas
de entendimento do conteúdo gerado. Por exemplo, as tabelas e resultados de consultas, sempre
que possível, devem ser acompanhadas de gráficos que facilitem a visualização e um melhor
entendimento do conteúdo gerado.
As páginas dos relatórios devem, obrigatoriamente, conter um cabeçalho composto pelo brasão
do TJPE, o nome por extenso “Tribunal de Justiça de Pernambuco” e o nome do sistema “Nome
do Sistema”.
Brasão: 70 pixels de largura por 70 pixels de altura.
Tribunal de Justiça de Pernambuco: Fonte em 80% da fonte utilizada na cor #999999.
Nome do Sistema: Fonte em 130% da fonte utilizada na cor #333333.
Abaixo do cabeçalho deve vir um título que identifique o conteúdo gerado pelo relatório. O título
e o conteúdo devem ser especificados pela análise de requisitos.
O rodapé deve ser composto pela data do relatório (imediatamente à esquerda) e a numeração
da página (imediatamente à direita).
2.20 Tela de Login
A tela de login dos sistemas contém o nome do sistema, a versão e a identificação do Tribunal de
Justiça de Pernambuco, conforme a imagem abaixo:
Deve-se distinguir, sempre que possível:
-
Nomenclatura para login de rede: Login de Rede
-
Nomenclatura para usuário específico do sistema: Usuário
-
Nomenclatura para matrícula do funcionário: Matrícula
O botão para entrar no sistema deve ter a nomenclatura “Entrar”.
Uma opção de ajuda deve estar disponível ao usuário.
A figura abaixo demonstra a disposição dos elementos que compõem a tela de login:
As mensagens de erro são devem aparecer na cor vermelha, conforme figura abaixo:
2.21 – Rodapé
O rodapé deve conter o nome do sistema, a versão, o nome do Tribunal de Justiça de
Pernambuco e outras informações que a análise de requisitos definir.
A imagem de background abaixo deve ser definida como fundo do rodapé:
#rodape {
background: #DADDFC url(../images/back_bottom.jpg) repeat-x top;
border:1px solid #CCCCCC;
text-align:center;
margin-top:1em;
margin-bottom:10px;
padding-top:5px;
padding-bottom:5px;
}