Bloco 2 - Capítulos Práticos

Usabilidade - Concepção, desenvolvimento e atualização de um sítio na Web
O principal critério para concepção, desenvolvimento e atualização de um sítio na Web é a Usabilidade.


 * Usabilidade (Usability) é um conceito que traça medidas de Utilidade, Facilidade de Uso e Apreciação de um sítio, e relaciona-se com as técnicas e processos que ajudam o usuário a realizar tarefas em um ambiente Web. Eleger esse conceito como critério principal para a construção e reestruturação de sítios na Fiocruz significa privilegiar o usuário na sua utilização, apropriação e interação.

A Usabilidade é determinada, em grande parte, pela combinação adequada entre a arquitetura da informação (a estrutura lógica) e a interface (significado visual). Define-se a usabilidade de um sítio (ou de um sistema ou ferramenta) a partir de medidas de sua utilidade, facilidade de uso, facilidade de aprendizagem e apreciação.

Existem quatro regras gerais em relação à Usabilidade de um sítio:

1. Na Internet, o usuário é quem manda, por isso é preciso cuidar para que ele encontre o que busca.

2. Na Internet, a qualidade se baseia em rapidez e confiabilidade, por isso a página deve ser mais direta e mais rápida do que bonita, mais confiável do que moderna, mais simples do que complexa.

3. Na Internet, a segurança é uma questão importante, por isso é preciso fazer com que tudo funcione muito bem para que o usuário possa confiar no sítio.

4. Na Internet, bom conteúdo é aquele que é confiável (informações seguras e exatas), bem organizado (conclusões no início, informações mais importantes no topo), bem apresentado (bem escrito, sintético, em tópicos claros).

Alguns princípios
Seguir as determinações da Lei de Acessibilidade nº 10.098, segundo alguns aspectos ergonômicos, de usabilidade e acessibilidade básicos.

O conteúdo deve ser estruturado de modo a privilegiar a prestação de serviço ao usuário. No caso da Fiocruz e de suas Unidades, os sítios devem apresentar os principais serviços, produtos e atividades realizadas pela unidade ou setor. Nas descrições de serviços e produtos, deve-se informar o modo de solicitação ou aquisição.

Para que um sítio dê apoio à navegação, é necessário projetá-lo de forma que o usuário compreenda a sua estrutura informacional.

Qualquer sítio deve ser projetado para usuários com diferentes níveis de experiência, quer sejam pesquisadores, profissionais de saúde, estudantes ou público leigo.

O usuário deve comandar o encadeamento e a realização das ações.

O sistema deve informar e conduzir os usuários durante a interação.

O sistema deve fornecer feedback imediato e de qualidade às ações do usuário.

Algumas sugestões
As páginas devem apresentar os conteúdos com clareza, simplicidade, objetividade, organicidade, atualidade e veracidade.

Os códigos e denominações devem ser claros e significativos para os usuários.

A distribuição espacial dos itens nas telas deve auxiliar os usuários na compreensão dos conteúdos e nas possibilidades de navegação e interação.

Os formatos dos itens devem ser capazes de transmitir associações e diferenças.

O conteúdo deve ser conciso, mas sempre dimensionando adequadamente os códigos, diálogos e termos apresentados.

O sistema deve apresentar mensagens de erro compreensíveis, e proporcionar facilidade de correção de erros por parte do usuário.

A Fiocruz e suas unidades devem manter suas páginas sempre atualizadas, não só em relação a notícias atuais, mas principalmente às informações de base colocadas nas páginas – lista de publicações, linhas de pesquisa, informações sobre cursos, páginas para novos produtos e setores criados.

Evitar
Utilização de ferramentas de difícil compreensão e aprendizagem por parte do usuário.

Acúmulo de informações ou ferramentas que não tenham utilidade ou que não sejam significativas para o público usuário do sítio específico.

Uso de termos técnicos, siglas ou linguagem que causem ‘ruído’ ao usuário e perturbem a navegação e a compreensão das ferramentas do sítio.

Manter páginas desatualizadas ou com informações incompletas ou equivocadas.

Permitir mensagens de erro ‘padrão’ dos sistemas operacionais, ou complexas.

Cinco qualidades
A partir do conceito de Usabilidade, as análises e orientações sobre a construção de um sítio segmentam-se em cinco ‘qualidades’ principais:

1. Identidade e Acessibilidade (ou Acesso)

A ‘Identidade’ diz respeito à ‘marca’ do sítio, aquilo que faz com que o usuário tanto identifique o produtor das informações quanto o próprio sítio, enquanto navega. ‘Acessibilidade’ ou Acesso diz respeito à rapidez, eficácia e segurança com que o usuário acessa o sítio, aí implicados vários fatores como: questões técnicas referentes ao provedor e servidores, utilização de linguagens e ferramentas e planejamento de acesso igual por meio de todos os browsers em uso e resoluções de monitor.

2. Arquitetura de Informações

É o que mais diretamente ‘defende os interesses’ do usuário que navega pelo conteúdo, para que este possa encontrar o que procura rapidamente, percorrer os caminhos da informação tendo sempre um ‘mapa’ do caminho e localizando-se facilmente no interior do sítio. Diz respeito à organização interna das informações, o que incide diretamente na forma mais ou menos eficaz e agradável de o usuário navegar, localizar-se na estrutura do sítio e localizar as informações necessárias.

3. Adequação de Conteúdo

Diz respeito às escolhas acerca das informações que estarão disponíveis no sítio, à edição desse material, à redação dos conteúdos e adequação à mídia web, bem como à edição e uso de imagens, sons, videos, etc. Todo o conteúdo do sítio deve estar adequado ao formato da web, para facilitar sua leitura, compreensão e apropriação por parte do usuário.

4. Design

É a transposição dos objetivos do sítio para o plano visual. Tem relação com a boa apresentação do conteúdo do sítio e sua organização espacial: escolha e tratamento de fontes, imagens, paleta de cores, organização de espaços, legibilidade, estética, etc.

5. Interatividade

Diz respeito às ferramentas e processos disponíveis para viabilizar a participação dos usuários e interação com a Fiocruz por meio do ambiente Web: Fale Conosco, formulários, fóruns, enquetes, chats, etc. Diz respeito ainda à resposta às demandas encaminhadas pelos usuários, isto é, a uma estrutura interna (de pessoas, fluxos e competências) capaz de responder satisfatoriamente ao usuário.

Cada um desses tópicos é objeto de um capítulo específico, a seguir, onde serão aprofundados seus conceitos e práticas.

Identidade e Acesso - A ‘marca’ Fiocruz, para todos
Neste capítulo, encontramos noções básicas de planejamento de um sítio em relação a esse tópico, visando principalmente à integração da ‘marca’ Fiocruz em todos os sítios das Unidades e à facilitação do acesso pelos usuários.

Identidade
É percebida por meio de elementos que não só permitem reconhecer a sua origem (empresa, editor), mas deixam claro ao visitante que ele está em seu sítio, não importando o ponto em que ele se encontra no momento. Propicia, ainda, que se reconheça, mesmo em sítios diferentes da mesma organização, as 'marcas' gerais e peculiares dessa organização, o que dá uma sensação de unidade e pertencimento.

Alguns princípios
Com objetivo de criar uma identidade visual, todas as páginas do Portal Fiocruz deverão ser construídas seguindo o padrão ‘look-and-feel’, já estabelecido em manual próprio. Para isso, além de atender inicialmente a preceitos de arquitetura legal das informações, as páginas deverão ser padronizadas quanto aos quesitos de usabilidade e navegação.

O conteúdo do Portal e dos demais sítios da Fiocruz independe de sua aparência, devendo os dois aspectos ser considerados separadamente. Para se orientar em relação à forma mais adequada de dispor as informações, deve-se recorrer a folhas de estilo.

É obrigatória a inserção da barra do Portal Fiocruz em todos os sítios, assim como é obrigatória a inserção, acima da barra do Portal, da barra do Ministério da Saúde.

Ainda na direção de criar uma identidade, os domínios também deverão ser alinhados. Portanto, o acesso aos sítios será realizado das seguintes maneiras:

Ou por meio do Portal Fiocruz (www.fiocruz.br); ou pela estrutura: www.fiocruz.br/nome ou sigla (a definir).

Para evitar que se faça uso indevido dos demais domínios que já estão sendo utilizados, eles podem ser mantidos, mediante redirecionamento.

Algumas sugestões
No momento de planejar ou reestruturar um sítio no ambiente web Fiocruz, é aconselhável que os desenvolvedores/editores entrem em contato com as equipes do Portal Fiocruz, para que juntos possam pensar a identidade desse sítio, sempre dentro das normas legais e segundo a estética/arquitetura assumida pela Fiocruz.

Ter em mente, de maneira bem clara, qual é a 'marca' do sítio a ser construído, de forma que expresse as particularidades e práticas da Unidade, sem descuidar da identidade com a Fiocruz.

Evitar
Simplesmente 'copiar' boas soluções externas, mas que não refletem a Fiocruz ou suas Unidades.

'Partir do zero' a cada planejamento, construção ou reestruturação de sítios no ambiente Fiocruz, desconhecendo o que já existe, tanto em termos de normas e diálogos construídos nos diversos fóruns sobre esse assunto, quanto em termos das práticas institucionais (sítios já no ar).

Acesso
Todo sítio na Internet, assim como o material nele publicado, deve ser planejado de modo a ser acessível ao maior número possível de usuários, e da maneira mais abrangente. Escolhas acerca de instrumentos de navegação, de desenvolvimento e de design são essenciais para que, ao invés de impedir ou restringir o acesso dos usuários ao material, ao contrário, o facilitem o máximo.

Alguns princípios
Para que um maior número de usuários possa acessar de forma adequada o conteúdo dos sítios, as páginas devem ‘abrir’ corretamente em todos os programas navegadores. Em geral, não há problemas quando o navegador utilizado é o Microsoft Internet Explorer, o de uso mais difundido. O mesmo não acontece em outros navegadores, como o Mozilla Firefox, navegador gratuito já testado e que tem sido amplamente utilizado pelos usuários bem informados sobre os rumos da informática (principalmente os que fazem uso do sistema operacional Linux). As páginas devem ser configuradas de forma a garantir que os programas navegadores abram em estado básico, sem recursos acessórios. Todas as páginas dos sítios da Fiocruz, assim como o Portal, devem ser validadas pelo World Wide Web Consortium (W3C - http://www.w3.org). Além disso, cada sítio que alcançar tal padrão deve sinalizar isso em sua página principal.

Com medidas simples, é possível garantir que páginas mais importantes possam ser acessadas por pessoas portadoras de deficiências visuais. Utilizar sempre  e, onde for possível, trocar uma imagem por um texto.

A preocupação com a organização lógica do material é tão importante quanto a correção técnica (boas técnicas de programação) para que uma página tenha uma boa navegação, que facilite ao usuário percorrer várias páginas em seqüência, encontrando rapidamente a informação desejada.

As atividades da Fiocruz têm se tornado, em termos internacionais, cada vez maiores e mais freqüentes. Reconhecendo a importância dessa tendência, é necessário que as unidades façam um esforço para manter um núcleo de páginas (com informações básicas e endereços) em inglês e espanhol, ao menos. Feito isso, a indicação da possibilidade de informações em outros idiomas deve estar indicada nas páginas iniciais da Fiocruz e unidades.

Algumas sugestões
Antes de publicar e durante o desenvolvimento de uma página na web, realizar testes em vários navegadores além do Internet Explorer, tais como: Firefox, Mozilla, Netscape e Opera, assim como em pelo menos duas resoluções: 800x600 e 1024x768; e também em outros ambientes que não sejam Windows (Linux e Macintosh). Isso garantirá que a página será corretamente acessada pelos usuários, independentemente da resolução de monitor ou navegadores utilizados.

Construir as páginas de modo que sempre fiquem bem leves, favorecendo o acesso por computadores com conexão via modem, que são maioria no Brasil e na América Latina.

Caso o sítio esteja fora do ar por questões de manutenção regular nos sistemas de computação, colocar no ar uma página única informando o usuário de que 'as páginas estão em manutenção', para que ele não perca seu tempo percorrendo o sítio em busca de informações que não estarão disponíveis.

Caso o tráfego se exceda, propõe-se que a página inicial do Portal e dos demais sítios ‘dinâmicos’ das Unidades sejam acessíveis através de um HTML estático, sem requisição direta do usuário ao servidor. Para isso, é preciso gerar automaticamente uma página HTML com as informações retiradas dos bancos de dados.

Quando for disponibilizar textos para download, estes devem estar nos formatos PDF, TXT ou RTF, com respectivo tamanho em KB ao lado, para que, dessa forma, o usuário possa se orientar e ter uma noção mais clara de quanto tempo o download levará para ser concluído.

Estudos mostram que após 10 segundos de download, o usuário perde o interesse. A ISO 9241 recomenda arquivos de imagens menores de 100K. Para que o usuário não se aborreça com a demora no carregamento das páginas, recomendamos que cada uma das imagens não ultrapasse 15 KB.

A diagramação dos sítios deve ser feita de forma que somente a barra de rolagem horizontal fique visível, e caso necessário, em configurações de vídeo inferiores a 800 x 600 pixels.

Evitar
Estar antenado com as novas tecnologias é positivo, desde que seu uso não dificulte o acesso de navegadores não tão atualizados. Informações essenciais não podem depender de plug-ins (Flash, por exemplo). No caso de uso de uma nova tecnologia na construção das páginas, disponibilizar no sítio versão alternativa compatível com programas de uso consagrado.

Modismos gráficos dificultam uma navegação fluida, às vezes obrigando o usuário a uma escolha entre páginas apenas em HTML ou páginas que usem Flash. Esta escolha poderia não ser necessária se as páginas fossem todas configuradas para abrir independentemente dos recursos acessórios disponíveis no navegador.

Nenhuma informação essencial deve estar acessível apenas através de Flash, especialmente menus, sob o risco de não ser visualizada pelo usuário.

Utilizar o mínimo possível editores de HTML do tipo WYSIWYG (what you see is what you get), pois geralmente eles ‘sujam’ o código. Sugerimos o uso do Notepad++ ou TextPad, ambos gratuitos e disponíveis para download.

Evitar página que obriga o usuário a reconfigurar a resolução do seu monitor de vídeo para ser utilizada. As páginas devem ser desenvolvidas para abrir corretamente em diferentes resoluções.

Evitar o uso de pop-ups (pequenas janelas que abrem por cima do navegador) devido à imprevisibilidade do uso desse recurso, que pode não atingir seu objetivo por diversos motivos, tais como: caso haja outras janelas maximizadas, o usuário pode não perceber que um pop-up foi aberto; a tendência na Internet é de desabilitar pop-ups; e novos navegadores e sistemas operacionais trazem bloqueadores para estas janelas.

Evitar qualquer elemento que pareça um anúncio, assim como os locais e formatos típicos, animações exageradas e pop-ups, para não confundir o usuário quanto ao teor da informação.

Evitar a utilização de recursos gráficos que impossibilitem a impressão integral dos textos e imagens (coloridas ou monocromáticas). O Portal oferece o aplicativo ‘Versão para impressão’.

Evitar o uso frames, que dificultam o bookmark/favoritos, mesmo havendo navegadores que tenham evoluído e lidem melhor com o problema.

Evitar utilizar testemunhas de conexão de caráter permanente (cookies) sem que haja a concordância prévia do usuário.

Arquitetura da Informação - Onde estou? Como encontrar o que procuro?
A estrutura de um sítio, em termos de navegação, hierarquia do conteúdo e disposição dos elementos interativos, recebe o nome de Arquitetura da Informação. Ela é a base sobre a qual serão construídos todos os demais elementos do sítio. A essência da Arquitetura da Informação é projetar a organização e o sistema de navegação com o propósito de ajudar os usuários a encontrar o que procuram.

Alguns princípios
Um sítio com boa Arquitetura da Informação deve fornecer o que o usuário procura até o terceiro clique, no máximo.

A Navegação relaciona-se aos meios pelos quais o sítio oferece a seus usuários elementos para localizarem suas posições dentro do sítio e encontrarem seu caminho ao longo da estrutura, tanto adiante como para trás. Uma boa navegação é aquela em que o usuário conhece aos caminhos do sítio, sempre sabe onde está e pode voltar às páginas percorridas e à principal sem ter que 'adivinhar' os caminhos.

Mesmo na hipótese de não haver um padrão gráfico comum entre os sítios das várias Unidades (a diversidade é encorajada), deve haver ao menos alguns critérios mínimos que devem ser seguidos por todas, como a existência de um sistema claro de menus, páginas sem excesso de itens e informações e, particularmente, sem modismos gráficos e animações.

As barras de navegação (menus) são os elementos principais da navegação do sítio, oferecendo as ferramentas básicas e links para as principais páginas, seções e canais do sítio.

Como regra geral, as páginas devem ser, sempre que possível, as mais limpas, com a informação claramente colocada para o usuário. As páginas devem ser 'focadas', ou seja, cada página deve reunir uma conjunto claro de tópicos, e não apresentar uma mistura de tópicos diferentes, que pode confundir o usuário e retardar a navegação.

Os usuários devem conseguir localizar e acessar facilmente a informação de que necessitam, sem que precisem de treinamento especial para isso.

É necessário projetar o sítio de forma que o usuário compreenda facilmente sua estrutura informacional.

A principal medida para assegurar a boa navegação do sítio é a criação de um sistema de fluxo, denominado Mapa do Sítio, que mostra toda as seções principais, as secundárias e como elas estão ligadas à página principal (home) e às demais. O Mapa pode ser representado como um diagrama, de forma gráfica, ou simplesmente como uma lista hierarquizada.

A página principal, ou home page1, é um elemento de grande importância no sítio. Ela tem a função de, simultaneamente, atrair a atenção do usuário e de fornecer a ele todos os principais elementos de navegação. A home deve conter informação sobre todo o conteúdo do sítio, e links para todas as principais seções do sítio, além de dar a conhecer ao usuário todas as informações mais elementares acerca da instituição.

A maioria das pessoas não faz uso da barra de rolagem, e por isso o ideal é que a home não tenha rolagem ou, se isso for inevitável, que as informações mais importantes estejam na parte superior da página.

Da mesma forma que a home é o ponto de entrada do usuário no sítio, cada nova página de seção deve ser entendida como um ponto de partida para a subseqüente, sem deixar de ter links para a principal.

O conteúdo deve ser agrupado por assunto. A estrutura organizacional da Fiocruz ou Unidades (organograma) deve ser apresentada em área própria, destinada unicamente a informações de caráter institucional.

Deve-se planejar a organização de conteúdos numa página utilizando-se o conceito, usual na prática jornalística, da ‘Pirâmide Invertida’, isto é, dispondo as informações por ordem decrescente de importância. Essa técnica proporcionava, para as práticas gráficas profissionais anteriores ao advento das tecnologias de computação, a certeza de que, caso a ‘notícia’ tivesse que ser interrompida ou ‘cortada’ por motivos de espaço, as informações mais importantes (O quê? Quem? Quando? Por quê? Onde?) estariam preservadas. Na Web, a ‘pirâmide invertida’ torna-se ainda mais importante, dada a velocidade de leitura, a urgência dos usuários e a pouca disposição de ‘rolar a página’, o que os leva, freqüentemente, a ‘ler’ apenas os topos das páginas.

Em 1996, apenas 10% dos usuários rolavam as barras. Embora essa proporção possa ter aumentado, ainda assim convém que as informações mais importantes estejam no topo, antes da 'primeira dobra'. Portanto, os sítios alocarão o conteúdo de maior valor para o usuário na parte superior da página.

A página deve ter sempre uma indicação do sítio ao qual ela pertence, e acesso ao caminho realizado pelo usuário até ali, para que não existam páginas 'órfãs'.

O elemento de ligação que permite a navegação chama-se link, e existem vários tipos de links que podem ser utilizados. O link interno permite que o usuário navegue dentro do sítio, entre suas diversas páginas, seja por meio das barras de navegação e menus, seja por meio de palavras ou imagens que, quando clicadas, fazem abrir novas páginas. O link externo remete o usuário para outros sítios.

As páginas internas devem possuir título próprio, na barra superior do browser, quando a página é exibida. A razão é que o título fornece informação sobre a estrutura hierárquica do sítio, indicando ao navegante onde ele se encontra, além de servir como referência para que os mecanismos de busca cadastrem a página em sua base de dados.

Mudança das cores tradicionalmente utilizadas para demarcar links confunde o usuário. É preciso deixar claro ao usuário que ele já clicou em determinado link (usuários não gostam muito quando clicam num link que já haviam visitado).

Todo sítio deve elaborar e disponibilizar uma seção de Perguntas Freqüentes.

Todo sítio da Fiocruz deve manter um Mapa do campus da Fiocruz e localização no Brasil dos Centros Regionais, com endereço e acessos, caso seja necessário.

As ferramentas de busca devem conseguir localizar e acessar facilmente a informação de que necessita o público, apresentando o resultado em categorias de fácil compreensão para todos os públicos visados.

Algumas sugestões
Elaborar um sistema inicial de menus que reflita claramente a organização da Fiocruz em termos de suas atividades, e não em termos de sua organização institucional.

Todos os menus e sub-menus devem ter títulos claros e informativos, sem siglas ou abreviaturas incompreensíveis para o usuário externo. Em páginas internas, uma opção a um sistema de menus é a 'página-menu', que na realidade é um menu distribuído, onde os links estão ao longo da página, acompanhados de pequenas explicações.

De preferência, deve haver links diretos e visíveis para os tópicos mais importantes, sem que estejam dentro de algum sistema de menus.

Manter linhas de menus bem diferenciadas entre as áreas técnicas e administrativas.

Os sítios devem apresentar os principais serviços, produtos e atividades realizadas pela unidade ou setor. Nas descrições de serviços e produtos, deve-se destacar o modo de solicitação ou aquisição dos mesmos.

A página principal de cada Unidade, assim como a página principal da Fiocruz, deve incluir link 'o que é', com explicação clara sobre o que faz a Unidade, em linguagem acessível ao público geral, dentro do possível, e deve conter endereço da Unidade e link claro para a página da direção (com nomes e endereços).

Exemplos de Informações que devem constar na primeira página do sítio (home):

Endereço completo da Instituição, Unidade ou Setor, com telefones e endereço de e-mail para contato.

O que é a Fiocruz (ou Unidade, ou setor), o que faz, como se organiza, nomes dos diretores e responsáveis pelos principais setores.

Principais serviços e meios de contato (telefone, e-mail).

Uma sugestão válida para o Portal e para todos os sítios é uma seção indicativa, como 'a Fiocruz de A a Z'. Talvez o índice possa ser subdividido por categorias, por exemplo, com um índice para a área técnica e um outro para a área administrativa. Não há impedimento a que haja superposição entre os índices, ou seja, um mesmo tópico pode ocorrer em mais de um índice.

É extremamente importante que seja elaborado um sitiograma (Mapa do Sítio) com a estrutura de todo o sítio e seus desmembramentos. Isso permite que possamos detectar inconsistências na navegação como, por exemplo, a manutenção do menu de perfis no terceiro nível de profundidade.

Deve-se ter atenção especial com os links quebrados, já que os sítios das unidades da Fiocruz são administrados por várias pessoas. Caso ocorra o direcionamento para uma página inexistente, o sistema deve apresentar esta informação de forma amigável e disponibilizar o Mapa do Sítio para que o usuário possa retornar sem grandes traumas.

As propriedades para os links (a:link, a:visítiod, a:hover e a:active) devem ser utilizadas. Sugerimos que se utilize a mesma escala cromática.

Usar a ferramenta 'títulos de link', de fácil codificação, para que quando o usuário pousar o cursor no link ter visível aonde ele o levará. Exemplo: quando o usuário passa o cursor sobre a palavra 'Fulano de Tal', lhe é mostrada uma caixa com os dizeres 'Biografia do Autor'. O código HTML para esta ação é: .

Usar sempre a mesma URL para referir-se a uma determinada página. Se um link usar uma URL e outro link usar uma URL diferente, o browser não saberá que ambos os links levam à mesma página, e mesmo que o usuário tenha seguido o primeiro link, o segundo será exibido como 'não-visitado'.

As URLs devem corresponder à informação mostrada e estar sempre em letras minúsculas, e não devem ser grafadas com acentos, pontuações, espaços e caracteres especiais. O mesmo se aplica aos nomes de arquivos e diretórios.

Utilizar página específica com orientações na hipótese de devolução de mensagem de erro para o usuário, evitando-se a utilização da página de erro nativa dos navegadores.

A navegação dos sítios não deve se apoiar no recurso do botão back, presente nos navegadores. Para auxiliar o usuário e não exigir de sua memória, é necessário utilizar os 'miolos de pão' (breadcrumbs), a pequena 'trilha' de caminhos que informa ao usuário o caminho percorrido.

Os sítios devem conter, caso seja disponibilizado serviço executável em outro domínio, as informações mínimas necessárias para que o serviço seja acessado, processado e consumado.

Deve haver um link para a página principal em todas as páginas interiores do sítio da Fiocruz, e um link para a página principal de cada unidade em todas as suas páginas interiores.

Informar claramente ao usuário quando um link leva para alguma página externa à Fiocruz.

Para fins de indexação e busca, todas as páginas publicadas pelo gerenciador de conteúdo devem incluir no campo 'palavra-chave' as palavras-chaves correspondentes aos assuntos abordados nos textos e imagens. A lista de palavras-chaves estará disponível no gerenciador de conteúdo.

É interessante pensar na elaboração de um 'passeio virtual' pela Fiocruz (incluindo os Centros Regionais), com fotos (campus, prédios, laboratórios, etc.) e pequena descrição de cada local.

Evitar
Links quebrados ou inativos, levando à decepcionante mensagem de 'Páginas em construção'. No caso de o conteúdo de uma página ou seção ainda não estar on line, sugere-se que o link a ela seja simplesmente desabilitado (não 'apareça' para o usuário). O link só deve estar visível quando levar a conteúdo.

Evitar construir menus segundo a estrutura organizacional da Fiocruz ou da Unidade.

Deve ser evitado completamente o uso de modismos gráficos, como animações e chamadas 'móveis' ou 'rolantes' para informes e notícias ou para qualquer outro tipo de informação.

Evitar expressões do tipo 'Clique aqui'. Deve-se habilitar o link em toda a extensão da palavra ou expressão. Exemplo: (Inadequado): "Para saber mais sobre a qualidade do Ensino na Fiocruz, clique aqui." (Adequado): "Saiba mais sobre a qualidade do Ensino na Fiocruz."

Adequação de Conteúdo - Na Internet, mais é menos
Este capítulo reúne as noções básicas de edição para web, web-writing e adequação de linguagem.

Os diversos conteúdos de um sítio Web podem ser classificados em quatro tipos principais: 1. Conteúdo Estático – Toda informação que não está sujeita a mudanças, ou que pode sofrer modificações esporádicas e eventuais. 2. Conteúdo Dinâmico – Grande nível de atualização e modificação. 3. Conteúdo Funcional – Dado principalmente por menus e barras de navegação, listas, índices. 4. Conteúdo Interativo – Estimula a interação com usuários, por meio de listas de endereços e-mails e outras ferramentas.

Alguns princípios
O texto específico para a Web deve ser 50% mais curto que o texto impresso. Estudos revelam que, na Internet, o usuário lê 25% mais devagar do que leria uma página impressa. Além disso, na Internet o texto atrai mais a atenção do que a imagem. As principais informações devem estar sempre no topo, já que usuários não gostam de rolar a página.

A denominação 'página Web' é uma metáfora criada com base na mídia impressa. A página impressa pode ter diversos formatos (altura e largura), mas tem limites de tamanho. Uma página Web (melhor dizendo, uma tela), por sua vez, pode ter grandes dimensões em sua largura e altura, graças aos recursos da rolagem, horizontal e vertical. Uma tela tem, ainda, possibilidade de abrir diversas 'camadas' de leitura, por meio de hipertexto, tanto remetendo a outras telas quanto permitindo abrir pequenas janelas ou caixas.

O texto deve ser elaborado com linguagem gramaticalmente correta, simples e direta, acessível aos diferentes perfis de visitantes. O conteúdo textual deve seguir as orientações de estilo e respeitar os padrões e convenções de grafia estabelecidos no Manual de Redação do Portal Fiocruz.

O conteúdo textual extraído de outros sítios, periódicos, obras literárias ou outras fontes deve ser sua origem e autores identificados, em respeito à legislação de direitos autorais em vigor.

Os documentos para download devem ser oferecidos nos formatos PDF (Portable Document Format), RTF (Rich Text Format) e TXT (texto sem formatação).

As imagens utilizadas devem estar associadas diretamente ao órgão, entidade, serviço ou produto abordado no texto. Os autores das imagens (fotografias, ilustrações, gravuras) devem ser identificados de forma clara e discreta, em respeito à legislação de direitos autorais em vigor. Dar preferência à publicação de imagens produzidas por profissionais contratados pela Fiocruz e/ou suas unidades ou de domínio público.

Algumas sugestões
O texto deve ser conciso e objetivo, segundo princípios jornalísticos.

Exemplo do processo de concisão e síntese de um texto para a Web:


 * Texto ‘promocional’, como escrito para um impresso


 * Nebraska está plena de atrações reconhecidas internacionalmente, que atraem grandes multidões de pessoas todos os anos, sem falta. Em 1996, alguns dos locais mais populares foram o Parque Estadual de Forte Robinson (355.000 visitas), o Monumento Nacional de Scotts Bluff (132.166), o Museu e Parque Estadual de Arbor Lodge (100.000), Carhenge (86.598), o Museu do Pioneiro da Pradaria (60.002) e o Parque Histórico e Rancho Estadual Búfalo Bill (28.446).


 * Usabilidade 0% - (por definição)


 * Texto conciso (menos 50% de palavras)


 * Em 1996, seis das mais procuradas atrações em Nebraska foram o Parque Estadual de Forte Robinson, o Monumento Nacional de Scotts Bluff, o Museu e Parque Estadual de Arbor Lodge, Carhenge, o Museu do Pioneiro da Pradaria e o Parque Histórico e Rancho Estadual Búfalo Bill.


 * 58% melhor


 * Texto esquadrinhável (mesmo número de palavras, mas em tópicos)


 * Nebraska está plena de atrações reconhecidas internacionalmente, que atraem grandes multidões de pessoas todos os anos, sem falta. Em 1996, alguns dos locais mais populares foram:
 * - Parque Estadual de Forte Robinson (355.000 visitas)
 * - Monumento Nacional de Scotts Bluff (132.166)
 * - Museu e Parque Estadual de Arbor Lodge (100.000)
 * - Carhenge (86.598)
 * - Museu do Pioneiro da Pradaria (60.002)
 * - Parque Histórico e Rancho Estadual Búfalo Bill (28.446).


 * 47% melhor


 * Texto objetivo (usando palavras neutras, mas não em tópicos)


 * Nebraska tem diversas atrações. Em 1996, alguns dos locais mais populares foram o Parque Estadual de Forte Robinson (355.000 visitas), o Monumento Nacional de Scotts Bluff (132.166), o Museu e o Parque Estadual de Arbor Lodge (100.000), Carhenge (86.598), o Museu do Pioneiro da Pradaria (60.002) e o Parque Histórico e Rancho Estadual Búfalo Bill (28.446).


 * 27% melhor


 * Versão mista (concisa, esquadrinhável e objetiva)


 * Em 1996, seis dos locais mais visitados em Nebraska foram:
 * - Parque Estadual de Forte Robinson
 * - Monumento Nacional de Scotts Bluff
 * - Museu e Parque Estadual de Arbor Lodge
 * - Carhenge
 * - Museu do Pioneiro da Pradaria
 * - Parque Histórico e Rancho Estadual Búfalo Bill


 * 124% melhor


 * Fonte: Adaptado de Nielsen, 2000

As frases devem ser curtas e os parágrafos também (no máximo cinco ou seis linhas). Sugere-se que os textos mais longos sejam divididos em segmentos que não ultrapassem 100 palavras. Texto curto não é necessariamente sinônimo de texto superficial, na Web, pois pode-se usar o recurso do hipertexto, cujos vínculos tornam a informação mais completa, na medida da necessidade ou interesse do usuário.

É aconselhável o uso de âncoras, recurso próprio da internet para remeter o leitor diretamente ao texto desejado, e também de volta ao início.

Utilizar o hipertexto para modificar a relação redator-leitor e facilitar a leitura em camadas, não-linear.

A posição do link na frase identifica e determina a natureza da informação, e ajuda o usuário a ‘ler em camadas’.

Exemplo:


 * (Inadequado, porque torna a informação ‘vaga’):
 * Veja os resultados da III Olimpíada da Saúde e Meio Ambiente

No entanto, compare as possibilidades de leitura, quando deslocamos o link segundo a natureza da informação:


 * Veja os resultados da III Olimpíada da Saúde e Meio Ambiente
 * Veja os resultados da III Olimpíada da Saúde e Meio Ambiente
 * Veja os resultados da III Olimpíada da Saúde e Meio Ambiente
 * Veja os resultados da III Olimpíada da Saúde e Meio Ambiente
 * Veja os resultados da III Olimpíada da Saúde e Meio Ambiente
 * Veja os resultados da III Olimpíada da Saúde e Meio Ambiente
 * Veja os resultados da III Olimpíada da Saúde e Meio Ambiente

Cada link refere-se a um tipo de informação, e o usuário não tem dúvidas do que encontrará al clicar.

As unidades que oferecem cursos e estágios devem ter informações claras sobre formas de admissão, disciplinas, professores, titulação, endereços de matrícula e horários para o público externo.

Apresentar imagens com indicação de autor e fonte, quando for o caso, e com legendas explicativas.

Vale utilizar termos de uso comum para títulos de menus e outros pontos de navegação. Palavras compreensíveis apenas para o usuário da instituição devem ser evitadas.

Evitar
Expressões do tipo ‘Home’, ‘sítio’ ou outras palavras que não façam parte do idioma em que está sendo apresentado o sítio devem ser preferencialmente evitadas. No entanto, outras, que já são de uso comum e para as quais não há palavras em português (exemplo: mouse, software, deletar), podem ser utilizadas. No final, o que vale é o bom senso e a boa interação com o usuário.

Evitar textos extensos, que exigem barra de rolagem com freqüência.

Evitar termos técnicos, a menos que sejam necessários e com definição disponível (no próprio texto, em hipertexto).

Evitar a utilização de recursos gráficos que impossibilitem a impressão integral dos textos e imagens (coloridas ou monocromáticas). O Portal oferece o aplicativo ‘Versão para impressão’.

A ISO 9241 recomenda arquivos de imagens menores de 100K. Recomendamos que cada imagem utilizada num sítio não ultrapasse 15 KB.

A utilização de siglas só compreensíveis para quem é de dentro da instituição cria dificuldades na navegação, para um usuário externo.

Evitar variação na estrutura de apresentação de conteúdos de caráter semelhantes.

Design - Funcionalidade e Estética do Sítio
Este capítulo trata da boa apresentação do sítio, em todos os seus aspectos. O 'design' (desenho, estética) do sítio está intimamente ligado à estrutura, à arquitetura da informação, e também à identidade do sítio. O design organiza os diversos conteúdos do sítio (estáticos, dinâmicos, funcionais, de interação) de modo a facilitar a percepção do usuário e sua navegação, além de transmitir as sensações desejadas, expressando o 'clima' do sítio.

Neste capítulo, encontramos noções básicas de uso de fontes, cores, espaços, ilustrações e fotos, bem como dicas de composição.

Alguns princípios
O trabalho de design para as páginas da Web requer os mesmos níveis de talento, experiência e técnica exigidos pelas demais formas de artes gráficas. Muitos dos princípios usados pelos designers em meios tradicionais, impressos ou eletrônicos, continuam sendo válidos. É preciso captar a atenção do olhar do visitante e criar uma composição adequada entre os elementos: tipos, fontes, ilustrações, espaços de texto, barras de menu.

Um ponto a ser considerado em design de páginas na web é a seqüência, conceito que diz respeito à condução do leitor pelos elementos da página. Os olhos movimentam-se habitualmente (em nossa cultura ocidental) da esquerda para a direita e de cima para baixo. Os elementos, então, podem estar dispostos de modo que os olhos se fixem no ângulo superior esquerdo e desçam em diagonal da esquerda para a direita e de cima para baixo, ou em 'Z', seguindo blocos de elementos.

Os olhos também movem-se naturalmente dos objetos grandes para os elementos menores, dos mais escuros aos mais claros, da cor para a ausência de cor, das formas usuais e tradicionais para as não usuais ou 'estranhas'. Sabendo disso, pode-se 'conduzir' o olhar do usuário, controlando-se a seqüência de elementos de forma agradável.

Toda página bem construída é um arranjo de harmonia e constastes entre suas partes. A unidade (um dos mais importantes princípios do design) deve ser o resultado natural da composição de todas as partes.

A tela do monitor é o espaço disponível e claramente definido para a distribuição dos elementos da página. Estamos, segundo os especialistas, na 'terceira geração' de sítios na Internet, marcada pelo design. O conteúdo merece lugar de destaque, sem que a forma seja deixada de lado. A preocupação está tanto na funcionalidade quanto na beleza estética de um sítio, evidenciada no layout preciso, na harmonia entre as cores, na escolha do tipo de letras adequado, no uso correto dos gráficos e, naturalmente, no cuidado com o tempo necessário para que a página seja carregada.

O balanço adequado entre conteúdo e espaços em branco é crucial em qualquer peça gráfica. Os espaços em branco em um layout não são áreas perdidas ou desperdiçadas, porque funcionam para equilibrar espaços, reforçar a unidade de grupos de elementos e aumentar o contraste, identificando assuntos e blocos de informação ao usuário.

Estudos revelam que textos com composição à esquerda são os mais fáceis de serem lidos, pois fornecem uma 'margem' ao leitor. Composição à direita e centralizada retardam a leitura, e podem ser usadas para destacar elementos de texto ou para pequenos blocos diferenciados do corpo do texto (legendas, 'olhos', entretítulos).

A tipografia, embora desprezada por muitos designers, é um dos principais elementos de uma página. Das várias categorias principais de letras (serifadas, sem serifa, manuscritas, fantasia), a mais adequada à composição de textos é a letra sem serifa, em virtude da legibilidade dos textos na Internet (simplesmente não há pixels suficientes para transformar o detalhe necessário para as serifas em um tipo de 10 pontos).

Por outro lado, a maioria das pessoas prefere ler textos mais longos em tipos com serifa (como nos livros). A legibilidade deve vencer, então, em textos de corpo pequeno (10 pontos ou menos), que precisam ser apresentados sem serifa. O texto maior pode ser grafado em letras com serifa, se for condizente com a tipografia do sítio.

Atualmente, as escolhas de tipografia para a Internet recaem em poucas fontes, algumas desenhadas especificamente para a Web. Serifadas (mais utilizadas para títulos): Schoolbook, Courier, Georgia e Times New Roman; Não-serifadas (utilizadas para composição): Arial, Comic, Tahoma e Verdana. A Arial é a fonte mais popular e mais usada na Internet. A Verdana é a que tem, segundo estudos, a maior aceitação entre os usuários, em relação à legibilidade e beleza.

Um texto em negrito chama a atenção para uma palavra ou uma expressão em uma frase. Um texto todo em negrito retarda a leitura e não é aconselhável.

No texto em itálico, a inclinação do eixo das letras faz com que se mude a velocidade de leitura, 'acelerando', e isso significa uma mudança do 'tom de voz'. É usado em palavras e expressões de língua estrangeira e quando se usa um tom irônico. Um texto todo em itálico também tem o sentido de pôr em evidência um certo trecho em meio a um texto longo. E, ao contrário do negrito, não 'detém' a leitura.

O USO DE MAIÚSCULAS PARA TEXTO FAZ COM QUE O USUÁRIO O LEIA CERCA DE 10% MAIS DEVAGAR, COM MAIS DIFICULDADE, ALÉM DE CAUSAR A SENSAÇÃO DE QUE O TEXTO ESTÁ 'GRITANDO'. O uso de maiúsculas é, pois, aconselhável apenas para títulos e elementos isolados, como indicação de menus, etc.

Uma boa legibilidade requer, geralmente, texto preto (ou cores escuras) em fundo branco (positivo). Texto branco em fundo preto (negativo) também pode ser utilizado, embora 'desconcerte' um pouco o usuário e retarde a leitura.

A cor é fundamentalmente emoção e, nesse sentido, seu planejamento no design torna-se imprescindível. A escolha das cores, na Web, tem uma complicação a mais, já que é impossível garantir que uma determinada cor apareça na tela do usuário exatamente como planejada.

A combinação de cores não deve ser gratuita, mas planejada para dar sentido às páginas do sítio. Quanto mais simples e agradável for o esquema de cores, melhor. De um modo geral, os grandes contrastes e 'dissonâncias' cromáticas são utilizadas apenas para evidenciar certos elementos que se deseja destacar.

Exemplos de cores e as principais sensações que provocam:


 * Vermelho - Dinamismo, força, energias, revolta, atenção, coragem, paixão, calor, excitação, ira
 * Simbolismo maior: atenção, perigo, (fogo, sangue)


 * Laranja - Força, luminosidade, dureza, euforia, energia, alegria, advertência
 * Simbolismo maior: fogo, alegria, explosão, (sol)


 * Amarelo - Iluminação, conforto, alegria, orgulho, gozo, esperança
 * Simbolismo maior: Alegria, fortuna (ouro)


 * Verde - Adolescência, bem-estar, paz, saúde, ideal, abundância, tranqüilidade, segurança, equilíbrio
 * Simbolismo maior: Saúde, vida, permissão (Natureza, relva)


 * Azul - Espaço, viagem, verdade, intelectualidade, paz, precaução, serenidade, infinito
 * Simbolismo maior: Tranquilidade (céu)


 * Roxo - Fantasia, mistério, profundidade, dignidade, justiça, egoísmo, grandeza, misticismo, espiritualidade
 * Simbolismo maior: Misticismo, espiritualidade (oculto)


 * Marrom - Pesar, melancolia
 * Simbolismo maior (marrom claro): terra. O marrom escuro é uma cor pesada, e identificada com a sujeira, a confusão


 * Púrpura - Estima, valor, dignidade
 * Simbolismo maior: Espiritualidade (Pôr-do-sol)


 * Preto - Pesar, luto, dificuldade, noturno, escuridão (ou) elegância, dignidade, ausência
 * Simbolismo maior: Luto, noturno (noite)


 * Cinza - (Dependendo da tonalidade) Elegância, difusão, confusão, véu, tranqüilidade, assepsia, frieza
 * Simbolismo maior: indistinção, névoa (fumaça)


 * Branco - Paz, tranqüilidade, ausência, segurança, vazio, alheamento, infinito
 * Simbolismo maior: Paz, vazio

Algumas sugestões
Seguir o layout do Portal Fiocruz como parâmetro de orientação para seus sítios.

As informações mais importantes, o conteúdo de maior valor para o usuário, deve vir sempre no topo da página, antes da ‘primeira dobra’.

Usar fontes de tamanho suficiente para que as pessoas possam ler os textos, mesmo que não tenham uma visão perfeita.

Não utilizar nos textos ações que possam dificultar a leitura, tais como mover, piscar ou zoom.

Utilizar uma única fonte em todas as páginas, a não ser em casos excepcionais. As fontes Arial e Verdana são as mais utilizadas.

Dê importância aos contrastes. Aplicar cores escuras sobre fundo preto é desastroso. Cores claras sobre outras cores claras dão a impressão de que a página está 'lavada'.

Ao utilizar cores nos fundos das páginas, dê preferência às cores lisas ou padrões bem sutis, que tornam as palavras mais legíveis. Fundos com elementos gráficos interferem na capacidade de o olho reconhecer as formas das palavras.

As cores do vídeo estão em padrão RGB, e por isso são mais vivas e luminosas do que as cores dos padrões gráficos. Por isso, combine-as de maneira que não 'vibrem', evitando a combinação de cian com vermelho ou do vermelho com o verde, por exemplo.

A cor pode alterar a velocidade de carregamento do sítio. Vale a pena testar a velocidade do sítio ou de uma página, antes de sair enchendo-os de cores.

Utilizar cuidadosamente cores para ajudar na diferenciação de assuntos dentro de uma mesma página ou mesmo entre seções de um sítio é sempre uma boa opção, em lugar de barras, fios ou caixas.

Evitar
Evitar a estratégia de colocar o máximo de informação possível em uma página. Esse procedimento, muito utilizado por iniciantes ou diletantes, contradiz todas as regras convencionais do bom design.

Utilizar design que retarde o acesso às páginas principais (textos preliminares longos, imagens de alta resolução ou desnecessárias).

Evitar molduras e barras decorativas, bem como excesso de fios. Prefira outras soluções, como, por exemplo, identificar grupos de elementos por meio dos espaços brancos.

Evitar excessos na condensação e na expansão de caracteres, para não quebrar o equilíbrio na relação entre os traços das letras. Letras muito juntas dificultam a compreensão e a 'leitura rápida' das palavras, enquanto letras separadas demais retardam a leitura, provocando a sensação de palavras soletradas.

Interatividade - Como falo com ‘eles’? E como ‘eles’ falam comigo?
A Internet é um meio de comunicação interativo por excelência. Mais e melhores instrumentos de propiciar a interação entre produtores e usuários da informação (de um sítio) e mesmo entre usuários e usuários são dia a dia incrementados. Qualquer sítio na Fiocruz deve, principalmente, além de fazer circular a informação e estabelecer a 'marca' da instituição ou de suas Unidades, tornar-se canal de comunicação ativa com a sociedade brasileira, propiciando o diálogo imprescindível com a população para e com a qual trabalhamos.

Este capítulo apresenta noções de como ‘construir’ a interatividade com os usuários, segundo as ferramentas disponíveis.

Alguns princípios
Quanto à gestão dos elementos interativos dos sítios, estes devem implementar obrigatoriamente, serviço de comunicação direta do usuário com o órgão ou entidade denominado ‘Fale Conosco’, que contemplem a possibilidade de o usuário escrever ao órgão ou entidade por correio eletrônico ou através de formulário apropriado, para quaisquer fins, garantindo-se resposta à solicitação, mesmo que seja a mera informação de seu encaminhamento para outro órgão ou entidade.

É importante estabelecer procedimentos para a realização de pesquisas on-line sobre a qualidade dos serviços e informações prestadas, bem como da satisfação dos usuários.

Igualmente importante é a implementação de instrumentos para a medição do tráfego de usuários no sítio, bem como do uso das opções de serviço colocadas à disposição dos usuários e do índice de atendimento às consultas e solicitações efetuadas pelos usuários.

Facultativamente, salas de bate-papo ou fóruns podem ser disponibilizados no caso de existir política de acesso e funcionalidade, desde que definidos: os temas de discussão, a presença de moderadores, a possibilidade de trocas de arquivos, os mecanismos de controle do conteúdo distribuído ou trocado, o tempo de duração da sessão, se for o caso, e a identificação dos responsáveis pelo serviço.

Algumas sugestões
Responder, sempre que possível e no prazo máximo de cinco dias, às solicitações encaminhadas, devendo o usuário ser informado quando esse prazo não puder ser observado.

Enviar mensagem ao usuário se a mensagem dele foi enviada com sucesso ou não (mensagem de erro). Nesse último caso, proporcionar caminhos para o usuário retornar ao sistema ou formulário, e reenviar a mensagem pretendida.

O sítio deve conter serviço de estatística em relação ao conteúdo das mensagens recebidas, tais como problemas, críticas e sugestões.

Deve estar bem visível, na página do sítio, o nome da unidade organizacional ou do servidor designado como responsável pelo atendimento das mensagens recebidas.

Evitar
Instaurar qualquer instrumento de interatividade se não existir acurado planejamento de sistemas de acolhimento e pronta resposta às demandas dos usuários.