O que fazer

• Crie uma hierarquia visual clara na página, dividindo-a em áreas bem definidas. As coisas devem ser “aninhadas” visualmente, para mostrar o que faz parte de quê.
• Dê nomes óbvios às coisas: “Empregos” não é “Emp” nem “Oportunidade de Emprego”.
• Se for necessária uma tela de abertura, forneça opção de navegação que permita pulá-la.
• Inclua título na janela no navegador.
• Forneça um meio de comunicação com o proprietário do site (por exemplo: Fale Conosco, e-mail, telefone ou endereço). E, ainda, informe ao usuário quando uma resposta lhe será enviada.
• Reduza o peso da página inicial. Os elementos que a compõem, como imagens, textos e código, devem ser leves, para que o tempo de carregamento seja o menor possível. Do contrário, se o peso ultrapassar 100kb, pode significar a desistência da visita do usuário, que não irá aguardar o tempo de carregamento.

Exemplo

Navegação

A navegação não é apenas um recurso do site, ela é o site. Portanto, deve:

• Ajudar a encontrar o que se procura.
• Dizer onde se está e como usar o site.
• Apresentar o que o site contém, seguindo uma hierarquia.
• Transmitir confiança nas pessoas que construíram o site.

As convenções de navegação na web especificam a aparência e a localização dos elementos do site, para que se saiba o que e onde procurar. Colocá-las num lugar padrão permite localizá-las rapidamente, com o mínimo de esforço. Padronizar sua aparência torna fácil sua distinção no todo.

 

O que fazer

• Identifique o site em todas as páginas. Utilize a logomarca ou o nome do proprietário do site. Recomenda-se utilizar a área superior à esquerda para a identificação.

Exemplo

 

• Inclua um meio de busca.

 

Exemplo

 

• Inclua um menu para os links das seções principais do site.

 

• Inclua um link para a página inicial (home page).

 

Exemplo

 

• Inclua links para elementos importantes que não fazem parte da hierarquia do conteúdo, o que vai variar conforme o tipo de site. Exemplos: Ajuda, Mapa do site, Carrinho de compras, Fale Conosco etc.
• Inclua botões de navegação com opções “voltar/próximo” ou outras que sejam necessárias, separadas do botão “voltar” do navegador.

• Inclua “rastros”, também chamados “migalhas de pão” ou “placas de rua”, pois mostram ao usuário onde ele está. Serve para facilitar a localização do usuário no site, principalmente naqueles sistemas de informação mais complexos, com nível hierárquico profundo.

Exemplo

 

Importância dos rastros (migalhas de pão)

Este item é importante, pois as pessoas não usarão seu site se não encontrarem um caminho, se não encontrarem o que procuram ou não descobrirem como o site é organizado. Algumas dicas para uma boa utilização dos rastros são:

• Não utilizá-los em sites simples.
• Colocá-los na parte superior da tela, abaixo da marca da empresa.
• Utilize algum sinal que demonstre continuidade entre os itens (por exemplo, >)
• Utilize tipografia em corpo pequeno.
• Utilize duas linhas, quando necessário.

Nuvem de tags

A nuvem de marcadores (tags ou palavras-chave) é uma forma de navegação suplementar que incrementa a visualização com um tamanho de fonte referente à quantidade de citações ou número de requisições. É uma forma de apresentar os itens de conteúdo do site.
O resultado visual de uma nuvem depende da frequência com que os marcadores ou tags são repetidos, o que faz com que haja maior destaque para as repetições mais frequentes. Estes marcadores podem ser utilizados, também, como medidores estatísticos que ajudam a definir a qualidade de um diálogo de uma arquitetura de informação em termos de simplicidade, objetividade e eficiência.

Menu

Um menu eficiente deve ser capaz de informar, de forma imediata, se estamos no site ou no conteúdo desejado. O menu é uma lista em que cada item ou opção chama uma página, arquivo ou outro site. Muitas vezes, é pelo menu que o usuário entende a estrutura do site.

 

O que fazer

• Apresente de imediato o que a instituição ou empresa oferece.
• Adote um critério de relevância para exibir uma ordem para os itens de menu – por exemplo, defina uma ordem hierárquica, como Institucional, Programas, Serviços etc.
• Mantenha a mesma estrutura de menu em todas as páginas.
• Permita ao usuário utilizar o menu como ponto de referência.
• Padronize os rótulos, para que o usuário não precise elaborar a mesma lógica que você teve. Deixe que ele apenas a reconheça como facilitadora.

• No caso de menus de anos, meses, cidades, estados ou assuntos categorizados, solicite o preenchimento ou uma lista para seleção, em vez de apresentar uma lista fixa muito grande, como, por exemplo, o nome dos 399 municípios do Paraná.

Exemplo

 

O que evitar

• Títulos muito extensos, pois a leitura de um menu é dinâmica.
• Siglas e abreviações. A utilização de siglas e abreviações deve ser sempre acompanhada da palavra por extenso ou acompanhada de texto explicativo, a não ser que seja algo já bastante difundido, como por exemplo IPTU, IPVA etc.

• Menus que abrem para a direita.

Exemplo 

 

• Menu com muitos níveis hierárquicos.

Exemplo

Rótulos de Menu

Rótulos nos sites são títulos que contêm a denominação dos assuntos abordados. O desafio na rotulação é manter uma consistência perfeita de definições ou nomenclaturas em todos os níveis de informação e navegação.

Para a escolha de rótulos, é preciso definir o contexto de informação que o site pode oferecer e então definir quais rótulos de menu podem traduzir essa ideia com transparência e naturalidade. Os rótulos devem ser atrativos e persuasivos, para fisgar o usuário e convencê-lo de que é preciso navegar pelo site.

 

O que fazer

• Utilize rótulos compreensíveis para o usuário. Para isso, é necessário compreender o usuário, entender seu contexto, suas rotinas. Quando o conjunto de usuários é eclético, a solução é definir a maior audiência e oferecer elementos que sejam familiares a essa maioria.
• Seja direto com o usuário, para fazê-lo clicar e obter como retorno o que é esperado.
• Faça rótulos informativos, concisos e, ao mesmo tempo, claros e descritivos a respeito do conteúdo por trás deles.

• Utilize rótulos iguais para funções iguais.

Exemplo 

 

O que evitar

• Rótulos enganosos, que causam confusão, mas parecem ter um significado claro. Dão ao usuário uma ideia clara de que seria levado ao lugar certo, mas não o faz, o que causa frustração e descrédito.

Exemplo

 

• Rótulos imprecisos, que não passam ao usuário nenhuma ideia do que significa ou para onde o levará.
• Rótulos inconsistentes, que ocorrem quando a mesma página é referenciada de forma diferente. Se o usuário encontra diferentes denominações durante a navegação, pensará que estão sendo oferecidas novas informações. Embora pareça um problema insignificante, o resultado do uso de rótulos inconsistentes é fazer um bom site parecer pobre e confuso. O ideal é utilizar para o título da página o mesmo vocabulário do rótulo.
• O uso de jargões, que deve ser cautelosamente avaliado, bem como o uso de novos termos, que pode ser uma barreira de difícil aceitação pelos usuários.

Exemplo

Conteúdos

Os conteúdos podem ser compostos de imagens, textos, sons e animações. De forma geral, devem oferecer uma fácil leitura, por meio de linguagem coloquial, descontraída, direta, em parágrafos curtos, com espaçamentos entre eles, e uso de links oportunos.

 

O que fazer

• Estabeleça periodicidade de atualização e revisão das informações corporativas, porque esse é um processo que deve ocorrer sempre.

• Segmente em função de seu público-alvo, se necessário.

Exemplo

 

• Subdivida conteúdos longos, anexe e resuma.
• Fale sobre a história da organização, enfatize a prestação diferenciada de serviços, descreva a missão, valores, objetivos e visão.
• No texto referente à organização, responda àss perguntas básicas: Quem é? O que é? O que faz? Como faz? Para quem faz? Onde faz?
• Utilize linguagem simples e didática. O uso de termos e palavras técnicas dificulta o entendimento do usuário comum. O sucesso do site está na oferta da informação, sem demanda de esforço desnecessário do usuário.
• Organize o conteúdo de forma que a informação central de sua página venha antes da necessidade de qualquer rolagem.
• Utilize subtítulos, listas de marcadores, palavras-chave destacadas e parágrafos curtos.
• Todas as páginas ou janelas de um site devem ser facilmente identificáveis como partes deste site – podem, por exemplo, ser marcadas com a logomarca da empresa.
• Escreva para a web e não para impressão, mas forneça versões para ser impressas.
• Se sua página tem link para download, acrescente as informações de formato e tamanho dos arquivos.
• Deixe os textos sempre alinhados à esquerda. Por uma questão de acessibilidade, a apresentação dos textos deve ser com alinhamento à esquerda. Mesmo que o texto justificado possa parecer mais estético e agradável, ele gera problemas de leitura, principalmente para disléxicos, que encontram dificuldades na mudança de foco de uma sílaba à seguinte e não conseguem distinguir onde termina uma palavra e começa outra, quando o texto tem espaçamento diferente entre palavras. De acordo com a Associação Brasileira de Dislexia, este distúrbio atinge entre 5% e 17% da população mundial.

Exemplo 

Fontes

A leitura em ambientes digitais é prejudicada devido à emissão de luz pelo meio. Portanto, para facilitar a leitura e evitar o cansaço, é recomendado que haja cuidado tanto com o contraste quanto com o tamanho das fontes utilizadas.

 

O que evitar

• O uso de fontes pequenas no conteúdo, pois torna a leitura difícil e desconfortável.

Exemplo

 

• Fontes com serifa para textos longos são adequadas apenas em aplicações com tamanhos grandes, pois estes tipos perdem a definição e legibilidade no monitor. Se for escolher uma fonte serifada, use Georgia, que tem mais legibilidade, pois foi criada especialmente para a leitura na tela. Ainda assim, prefira as fontes sem serifa.

 Exemplo

 

 

• Fontes com cores claras sobre fundos claros.

Exemplo

 

 

• Fontes com cores escuras sobre fundos escuros.

Exemplo

 

 

• Fontes decorativas. Utilize-as apenas quando for realmente necessário e nunca em textos longos.

Exemplo

 

 

• Texto em itálico, pois torna-o menor e prejudica a leitura. Ainda que seja para citações de palavras estrangeiras ou para refrenciar a autoria de algum conteúdo, só a utilize se realmente houver necessidade. Pense que idosos e pessoas com deficiência visual encontrarão dificuldades para a leitura.

Exemplo

 

• Excesso de texto em negrito. Um trecho em negrito chama a atenção para palavras-chave na frase, como se ela fosse falada mais alto. Porém, deve ser usado com cuidado. Sua aplicação é ideal em palavras isoladas em uma frase, pois uma frase inteira em negrito pode fazer que se perca seu valor retórico.

Exemplo

 

 

• Excesso de texto com letras maiúsculas. Um texto com todas as letras maiúsculas deve ser usado somente em situações de muita ênfase, pois a estrutura retangular das letras dificulta e reduz a velocidade da leitura.

Exemplo

 

• Mudança de cor do texto. Conforme a posição e o contraste com o resto do layout, uma pequena palavra pode chamar mais atenção que o negrito, que o texto inteiro, ou ainda pode ser confundido com links.

Links

São um fator chave no processo de navegação, pois usuários excluem links que foram infrutíferos em suas visitas anteriores. Por outro lado, podem rever as ligações úteis que encontraram no passado.

Links que representam a estrutura principal de navegação devem utilizar termos familiares ao usuário, com base em seu conhecimento geral, experiência prévia no domínio da aplicação ou experiência na utilização de outros sistemas.

 

O que fazer

• Altere a cor dos links visitados. Utilize cores diferentes para links visitados e não visitados. Quando os links visitados mudam de cor, orientam o usuário a não revisitar as mesmas páginas repetidamente.
• Utilize cores que resultem em um bom contraste e que tenham proximidade entre a cor do link e o link visitado. Cores muitos diferentes podem confundir o usuário, especialmente em sites que apresentam títulos e imagens com cores variadas. Por exemplo, se o link é azul, o link visitado pode ser em outro tom de azul ou, então, uma outra cor próxima.

Exemplo

 

• Para links de conteúdos externos ao site (outros sites) ou para arquivos PDF, DOC etc, devem ser abertos em novas janelas, para que o usuário não perca a navegação já iniciada.
• Priorize posicionar o link sempre em grupos de elementos de navegação.
• Utilize com cautela símbolos gráficos ou ícones, para não correr o risco de não dar transparência ao negócio da instituição. O usuário precisa entender o que significa o link. Uma forma de minimizar a confusão na leitura de imagens ou ícones é oferecer dicas textuais associadas. Bons exemplos são links comuns e usados frequentemente, como o símbolo de um carrinho de compras em uma aplicação de comércio eletrônico ou ícones de redes sociais como Facebook, Twitter etc.

 

O que evitar

• Links quebrados, porque causam uma experiência ruim para o usuário e passam a impressão de que o site não é atualizado.
• Links não funcionais. Não inclua links que levem a “páginas em construção”, que abrem sem conteúdo.
• Links que não alteram a cor após ser utilizados.
• Cores muito distantes, como, por exemplo, um link verde e um link vermelho para o visitado. Podem causar poluição visual, atrapalhando a compreensão do usuário em saber o que é link ou não.
• Elementos visuais que parecem ser links, mas que não os são.
• Sublinhado em textos que não são links.

• A utilização de termos genéricos, como “ir”, “clique aqui”, “leia mais” ou "saiba mais", pois, para a navegação com leitor de tela, links deste tipo não descrevem o destino do link. Portanto, devem ser evitados. O ideal é que o próprio título do assunto seja o link, de modo que o usuário não precise navegar por todo o entorno para saber qual é a finalidade do link.

Exemplo

Banners

Devem ser utilizados para destacar ou facilitar o acesso às informações que são mais procuradas. Em sua maioria, são compostos por título, texto, imagem e legenda da imagem e não há por que repetir aspectos de uma informação em cada um dos elementos do destaque. Ou seja, se o título do destaque aborda um determinado dado sobre a informação, ela não deve se repetir no texto. Isso também não deve acontecer entre a imagem e sua legenda.

A atenção seletiva é muito poderosa e os usuários da web aprenderam a parar de prestar atenção em todos os anúncios que ficam no caminho de sua navegação, mas também ignoram legítimos elementos de design que parecem formas predominantes de publicidade. Portanto, a aplicação de banners deve ser cautelosa, adequada ao espaço possível que o site permitir, com a finalidade de evidenciar somente as informações mais importantes e que mereçam destaque.

 

O que fazer

• Quanto mais importante for alguma coisa, mais destacada ela deve ser.
• Faça algo clicável parecer obviamente clicável; faça um link parecer um link; faça um botão parecer um botão.
• Diminua a poluição visual (excesso de textos, cores e imagens).
• Diminua a quantidade de elementos e seu contraste.

• Se houver informações de focos diferenciados, o ideal será utilizar áreas físicas de destaque também diferenciadas.
• No caso de vários banners, use formatos maiores, com anúncios rotativos.
• Utilize slogans claros, informativos e curtos. Bons slogans têm de seis a oito palavras, demonstram a diferenciação e um benefício claro, comunicando rapidamente o propósito do anúncio.

Exemplo

 

O que evitar

• Chamar muito a atenção, o que pode ser opressivo.
• Palavras desnecessárias (devem ser omitidas).
• Banners pop-up. O uso de pop-up não é indicado, pois os usuários o fecham antes mesmo da exibição do conteúdo.
• Banners animados, pois distraem o usuário e dificultam a percepção dos conteúdos ou da informação que de ele realmente precisa.
• Slogans ruins, que pareçam genéricos e vagos.

• Banners ilegíveis, com textos impossíveis de ler.

Exemplo

 

• Inclusão de muitos banners no site. Excesso de banners pode causar a "cegueira de banners" – os usuários nunca fixam os olhos em qualquer coisa que se parece com um banner, devido à quantidade, forma ou posição na página.

Exemplo

 

• Que todos os elementos se pareçam com anúncios.

Exemplo

Formulários

É a forma usual de interação da organização com o usuário. Deve ter a funcionalidade de encaminhar com agilidade as mensagens de dúvidas, reclamações, sugestões, elogios e o que mais o usuário precise expressar em relação aos serviços oferecidos pela página que está visitando.

 

O que fazer

• Crie o formulário com texto objetivo.
• Indique os campos obrigatórios ou opcionais sempre que não forem unanimidade.

• Estruture em passos quando a quantidade de campos a ser preenchida for muito numerosa.

Exemplo

 

• Exemplifique o formato desejado. Por exemplo: em um campo para o CPF, informe “digite apenas os números”.

Exemplo

 

• Só deixe no campo o número de caracteres desejado.
• Confirme o preenchimento correto.

 

• Dê retorno no preenchimento de formulários, por meio de validação online.

Exemplo

 

• Informe prazo para resposta.

Exemplo

• Comunique erros de formulário com contraste visual e indique também ações para correção, associando corretamente o campo responsável ao erro principal.

 

• Quando possível, prefira alinhar os campos à esquerda.

Exemplo

 

O que evitar

• Aproximar botões de ação. Ações primárias e secundárias devem ser separadas, para prevenir erros. Ações como Salvar, Continuar e Enviar são consideradas primárias. Ações como Limpar, Cancelar e Voltar são consideradas secundárias.
• Limpar o conteúdo do formulário inteiro por causa de um erro.
• Obrigar o usuário a memorizar dados de uma página para utilizá-los em outra. Números de protocolo ou qualquer outro tipo de cadastro devem ser fornecidos e enviados em cópia por e-mail.

• Contrastar cores de fundo. Mantenha uma cor única.

Exemplo

 

• Usar barra de rolagem na horizontal.

Exemplo

Notícias

São um importante canal de comunicação para informar ações e atualizar usuários. Portanto, a busca eficaz de notícias impacta instantaneamente no grau de satisfação do visitante,o que justifica um maior apuro no tratamento das informações, com indexação simples e organização por temas/assuntos/editorias.

 

O que fazer

• Reduza a carga de informação.
• Diagrame o texto de forma que se facilite o entendimento da informação.
• Leve em conta o conhecimento das pessoas que acessam o site.
• Redija textos objetivos.
• Focalize a atenção do visitante ao objetivo (serviço) da página.
• Forneça data e hora da atualização.
• Organize o arquivo de notícias de maneira estruturada, utilizando taxonomias pré-definidas e opção de busca. Para sites de Prefeituras, Governo Estadual e Federal, Agência de Notícias e outros com muita quantidade de notícia, o ideal é classificar por temas, como Finanças, Meio Ambiente, Segurança etc.

Exemplo

 

O que evitar

• Quantidade excessiva de notícias na página inicial. O excesso só é aceitável em sites especializados em notícias e comunicação, como o aen.pr.gov.br, folha.com, globo.com etc.
• Títulos de notícias muito longos e difíceis de ler online.
• Área insuficiente ou pouco destacada para as notícias.
• Falta de atualização permanente nessa área do site.
• Arquivo de notícias sem opção de busca.

Exemplo

Busca

É a tábua de salvação do usuário quando a navegação falha. E tão importante quanto o serviço de busca é o resultado da pesquisa. Proporcionar possibilidades de utilizar filtros e refinar os resultados da busca demonstra preocupação com a satisfação do usuário e garante o consumo da informação. Mas usuários que sabem o que querem esperam resultados diferentes dos que não sabem o que procuram. A apresentação dos resultados, nesse caso, pode variar de informações simples e sem detalhes (título e autor, por exemplo) a informações completas (sumário descritivo sobre o conteúdo encontrado).

Filtros, classificações e refinamentos nos resultados de busca oferecem liberdade para aprofundar a pesquisa e ajudam a direcionar os resultados. O uso de símbolos para refinamento (?, * e !), operações booleanas (and, or, not), tesauros e buscas especializadas são recursos que, apesar de ser úteis, são pouco utilizados. Mais difícil ainda é encontrar esses recursos sendo utilizados conjuntamente.

Existem algumas formas clássicas de apresentação dos resultados: alfabética, cronológica, listados por relevância, por popularidade, exibidos de acordo com o perfil do usuário, por investimento no pagamento de propagandas... Por exemplo, uma opção de busca é fornecida para livros (título, autor), porque a navegação hierárquica iria requerer muito esforço, considerando que provavelmente o usuário possui alguma informação sobre o livro no qual está interessado.

 

O que fazer

• Deixe a busca disponível em todas as páginas.
• Utilize um campo de busca grande o suficiente para exibir completamente uma pergunta comum.

• Inclua a busca preferencialmente em uma área bem visível e acessível do site, de tamanho não menor que 27 caracteres, com layout diferente de menus.

Exemplo

 

• Utilize sistemas de inteligência artificial para aumentar a capacidade do motor de pesquisa, assim a busca tenta entender palavras ou frases filtrando resultados, o que aumenta a eficiência da consulta.

Exemplo

 

• No resultado da busca, auxilie a decisão do usuário, apontando e classificando informações, como área do site em que se encontra a informação, assunto ao qual se refere, data de publicação do conteúdo. E mantenha os parâmetros pesquisados.

Exemplo

 

• Faça com que a função de busca retorne resultados úteis, mesmo que sejam digitados termos imprecisos ou incorretos. Ofereça um verificador ortográfico, em geral na forma de um link perguntando “Você quis dizer...”, com a proposta de ortografia correta.

Exemplo

 

• Ofereça um atalho (link) para a busca avançada, pois facilita o acesso e reduz a carga de trabalho do usuário avançado, que já sabe o que deseja.

Exemplo

 

• Exiba um número pequeno de resultados por página e deixe o usuário configurar listas maiores, pois os resultados apresentados estarão associados ao tempo de download do conteúdo e a resoluções utilizadas pelo usuário.
• Permita que as funções de busca sejam adequadas aos objetivos e à expectativa do usuário.

Exemplo

 

 

O que evitar

• Que o acesso a determinados conteúdos específicos sejam impedidos pelas limitações/restrições da tecnologia usada na funcionalidade de busca.
• Não incluir link para a busca avançada, especialmente em sites com muitos conteúdos, o que obriga o usuário a uma busca qualquer para poder ter acesso à busca avançada.
• Retornar uma grande quantidade de informações, que pode causar um esforço desnecessário para a análise do resultado.

Exemplo