Tribunal de Justiça de Pernambuco Padronização de Interface para Sistemas Web

Transcrição

1 Tribunal de Justiça de Pernambuco Padronização de Interface para Sistemas Web Versão 1.0

2 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

3 2.18 Impressão 2.19 Relatórios 2.20 Tela de Login Rodapé 3 Considerações Finais

4 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

5 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 Legibilidade A cor dos textos deve contrastar com a do fundo, e o tamanho de fonte deve ser suficientemente grande 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 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.

6 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:

7 . 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 ( ou inglês ( 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.

8 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.

9 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

10 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;

11 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 para um <a href="something.doc">documento word</a><br /> Link para um <a href="something.pdf">documento pdf</a><br /> Link para um <a href=" externo</a><br /> Link para um <a href="something.rss">feed rss</a><br /> Link para um <a href="something.xls">documento excel</a><br /> Link para um <a href="aim:something">link AIM</a><br /> Link para um <a href="mailto:something">endereço de </a><br /> Link para um <a href=" do tjpe</a><br /> Link para um <a class="noicon" href=" 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.

12 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;

13 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" Blockquote Marque uma tag com class="caps" para exibir os caracteres em CAIXA ALTA. 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 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;

14 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:

15 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 # 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:

16 Com 22 pixels de altura. A definição abaixo deve ser seguida: #background-primeironivel{ background: # 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;

17 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>

18 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>

19 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 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;

20 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.

21 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;

22 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):

23 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>