Agência Nacional de Vigilância Sanitária Padrão Visual de Sistemas da Anvisa na Internet Gerência-Geral de Tecnologia da Informação Gerência de Sistemas www.anvisa.gov.br Brasília, janeiro de 2007
Agência Nacional de Vigilância Sanitária Equipe Técnica: Gerência-Geral de Tecnologia da Informação - GGTIN Gerência de Desenvolvimento de Sistemas - GESIS E-mail: intravisa@anvisa.gov.br Copyright ANVISA, 2003 2
Internet - Sistemas Padrão Visual de Sistemas da Anvisa na Internet Apresentação O objetivo deste manual é definir os novos padrões visuais a serem utilizados pela Anvisa em seus sistemas de ambiente web. Sejam na internet ou intravisa. Para qualquer caso referente a layout de sistemas que não esteja contidos neste manual deve-se consultar a Gerência de Sistemas - Gesis Justificativa A partir de 2003 foi criado um padrão visual para os sistemas da Anvisa, que é semelhante à identidade visual do site. Cobrindo parâmetros mínimos de visibilidade, identidade visual para os sistemas. A proposta atual é uma evolução natural e necessária deste padrão visual. Incorporando melhorias de usabilidade, navegabilidade e arquitetura de informação dos sistemas da agência. A usabilidade pode ser entendida como a capacidade de um software de ser compreendido, aprendido, utilizado e atrativo para o utilizador, em condições específicas de utilização. Os atuais sistemas em ambiente web permitem uma interface com as mesmas capacidades das páginas de web. Portanto, o foco dos sistemas deve ser o usuário. 3
Tal medida também serve como forma de otimizar o desenvolvimento de sistemas deixando à cargo do webdesigner questões relativas a interface e imagens relacionadas e liberando os analistas e programadores para lidarem com as questões específicas de desenvolvimento. Características No tocante à padronização visual a nova proposta oferece um layout mais flexível que permita mais diferenciação entre os diversos sistemas e soluções visuais mas específicas as demandas de cada um. Foram estabelecidas quatro opções de cor padrão, de acordo com o público-alvo do sistema. As cores foram definidas de acordo com as cores dos perfil do sítio internet da Agência. As cores são definidas por arquivo.css de estilo. Ícones Foi prezada a linguagem visual com a expansão do uso de ícones de forma a deixar a navegação mais intuitiva, humanizar os sistemas e reduzir a carga de texto sobre o usuário. Exemplo de ícones para perfil de usuário. Personalização Os sitemas passam a ter uma diferenciação mais aparente entre si oferecendo mais opções para se personaliza-los, seguindo um padrão de 3 cores aplicáveis a cada sistema. 4
Cabeçalho do SARH Cabeçalho do SIGA Fontes A fonte básica para todos os textos continua sendo a Tahoma variando em tamanho e cor de acordo com a necessidade. Quanto à nomeação de títulos, campos e links: a primeira letra de cada palavra deve ser maiúscula, com exceção de preposições e artigos. Todos os títulos, nomes de seções, áreas de atuação, menus, barras de navegação, banners e destaques são em caixa alta e baixa. Os labels devem seguir o mesmo padrão Uso de Abas Para reduzir o uso de formulários extensos e longas barras de rolagem os diversos formulários dentro de um mesmo assunto passam a ser divididos em abas. 5
Botões, Ícones e imagens para sistemas Os botões serão imagens com ícones e texto da função a ser executada. Serão disponibilizados para a equipe de desenvolvimento na biblioteca http://www.anvisa.gov.br/layout_sistema/biblio_botao.htm Biblioteca de ícones para sistema 6
Metodologia A produção do layout é produzida em parceria com o webdesigner, que desenvolve os itens necessários (botões, ícones, imagens, etc.) de acordo com a demanda de cada sistema. À medida que os itens são produzidos são disponibilizados em na formas de telas de exemplo. A formatação da página é produzida por CSS (Cascade Style Sheets), há um arquivo.css de uso geral que cobre as características gerais de formatação a serem seguidas por todos os sistemas (fontes, cabeçalho, título e outros) e outro.css contendo as classes específicas para cada sistema. A tela de demonstração oferece um exemplo visual das e os nomes das respectivas classes do.css Os padrões de cor e tipografia são regidos por.css com classes e id s específicas para eventuais necessidades dos sitemas. Após a definição das regras de negócio são produzidos esboços das telas para serem aprovados pelo solicitante e após aprovação desenvolvidos os protótipos das telas. A produção e análise das interfaces será posteriormente incorporada à metodologia de desenvolvimento de sistemas. 7
Página de Exemplo do SIGA IMPORTANTE: Todas as imagens padronizadas para os sistemas, como logomarca Anvisa, menu de navegação, barra de identificação do Governo Federal, imagens de identificação dos sistemas são fornecidas pela Gerência de Sistemas. 8