Boas práticas para construir a Arquitetura da Informação em sites
A organização da informação é a parte mais importante na experiência de uso em um ambiente digital. Portanto, é preciso ter em mente quem é o seu público-alvo para direcionar o conteúdo de forma que oriente o usuário a encontrar o que está procurando.
Dicas para criar um bom conteúdo
Confira dados analíticos, feedbacks, etc.
Escreva em português claro, sem abreviações ou termos muito regionais.
Utilize quebras de parágrafo para organizar o conteúdo.
Inclua links com descrições que deixem claro onde ele levará o usuário.
Substitua informações longas e complexas por listas
Se alguma informação já existe em outro lugar, faça um link para ela, evitando cópias em diferentes versões.
Pense em melhorar a localização por mecanismos de buscas (Google Search, Bing, etc)
- De siglas sem a apresentação de seu significado na sua primeira ocorrência no texto;
- De letra maiúscula para frases completas como método de ênfase;
- De sublinhado onde não há links;
- De texto em itálico para frases longas;
- De texto justificado porque dificulta a leitura de usuários disléxicos.
Acessibilidade
Para garantir a acessibilidade considere descrever as informações contemplando as pessoas com deficiência. Este público encontra barreiras que dificultam, ou muitas vezes, impossibilitam o acesso à informação de um site.
Páginas acessíveis, além de tornarem possível que pessoas com deficiência (visual, física, auditiva e intelectual) façam parte da vida digital, facilitam o acesso para pessoas idosas, sem habilidade para usar a internet, que utilizam dispositivos móveis ou que tenham pouca alfabetização.
Estas expressões não fazem sentido fora do contexto, tornando-se insuficientes para o usuário saber o destino do link.
É preciso considerar que, quando um usuário de leitor de tela navega pelos links de uma página, recebe apenas a informação do texto do link e não de todo o seu contexto.
Em consideração a cegos:
- Dê preferência a frases como "leia abaixo" ao invés de "veja abaixo";
- Evite a descrição de links que não levem em conta a deficiência como "clique no botão verde".
Exemplos
Texto com link na página
Como o leitor de tela irá ler
(utilizando navegação por links)
Forma correta do link
Na navegação por links o leitor irá pular o texto e ir direto para os links "Clique aqui", lendo desta forma: "clique aqui link"; "Clique aqui link".
- Clique aqui para saber mais a respeito da acessibilidade.
- Projeto Arte na Escola: coordenadora recebe prêmio. Leia mais.
Descrição de imagens
A imagem abaixo ilustra o organograma da instituição
Você conseguiu compreender a imagem?
No contexto ao lado, se faltar a imagem, não conseguimos compreender a informação. O mesmo ocorre no caso de pessoas cegas tentando acessar o conteúdo presente em imagens que não foram descritas.
Portanto, ao incluir imagens na página, é preciso utilizar no sistema o campo "Texto alternativo" para descrever de maneira apropriada todas as imagens que transmitem conteúdo.
Exemplos de descrição de imagens
Texto alternativo
Acesso à informação
Texto alternativo
Ligue para ouvidoria 0800-644-2013
Texto alternativo
Foto de um cão-guia utilizando harness (peitoral) e alça rígida.
Há casos, em que é importante fornecer uma alternativa textual incluindo um link para a descrição detalhada logo após a imagem.
Texto alternativo
Gráfico demonstrativo do nível de escolaridade dos usuários
Texto alternativo
Mapa dos Estados do Paraná, Santa Catarina e Rio Grande do Sul
Não existe uma restrição oficial para o tamanho do texto alternativo. Adote como referência de concisão a seguinte regra: 100 caracteres é ruim, 200 é bom, 300 é demais.
Nomenclatura da extensão do arquivo
Em links de arquivos para download (pdf, doc, etc) é necessário informar a extensão do arquivo no próprio texto do link.
Exemplos
- Cartilha de Acessibilidade do W3C (pdf)
- Consulte o Manual de Identidade visual do órgão (pdf 10,7MB) - caso o arquivo seja grande, que necessite de tempo maior para download, informe também o tamanho do arquivo.
Otimização de arquivos
Não há restrição quanto ao tamanho de arquivos a serem incluídos no site, porém quando grandes demais diminuem a velocidade do site, aumentando o tempo de carregamento da página. Uma página que demora muito para carregar, pode fazer com que o visitante desista de esperar e para outro conteúdo.
Recomendações de tamanhos e formatos para utilizar no site
| Tipo de arquivo | Tamanho* | Formatos mais utilizados |
|---|---|---|
| Imagens - considerar a largura da página para o conteúdo 1140px | Considerar no máximo até 3MB por imagem | jpg, png, gif |
| Documentos | considerar no máximo até 20MB por arquivo | pdf, doc, odt, xls, ppt, cdr, zip, ... |
| Vídeos | Considerar no máximo até 100MB por vídeo | mp4, webm, ogg, ogv |
| Áudios | considerar até 10MB como média para um áudio de 5 minutos | mp3, ogg, wav, wma, aiff, aac |
(*) O Sistema aceita tamanhos maiores, porém deve-se levar em conta a diversidade de usuários e as condições de conexão de baixa velocidade, o que pode impossibilitar o download e acesso à informação.
Qual o tamanho de imagem que devo utilizar?
O uso correto de imagens melhora a organização do site, e consequentemente, a experiência do usuário. Imagens muito pesadas tornam o carregamento da página lento.
Para os sites a largura da área disponível para o conteúdo é de 1140px.
Então, inclua imagens com tamanhos adaptados a área disponível, evitando arquivos pesados.
Considere também, que o sistema disponibiliza templates (imagem ao lado) que adaptarão as imagens em formatos determinados.
Confira sugestões de tamanhos que atenderão as variações de versões mobile e desktop.
Banner de destaque (Superior)
O espaço destinado ao banner de destaque (superior) possui as medidas de 1903x350px. Para garantir que a informação apareça de forma correta nas versões mobile e desktop, é preciso incluir a mensagem principal na área de segurança.
Conforme o exemplo abaixo, as áreas que estão fora da demarcação tracejada em vermelho correm o rico de não transmitir a informação textual, portanto o ideal é que o texto esteja na área de segurança.