Não espere encontrar apenas código nessa matéria.

Li recentemente um livro de Cláudia Dias chamado Usabilidade na Web. Ele é voltado apenas para portais, porém, suas dicas podem ser utilizadas em qualquer site.

O site deve ser fácil de aprender de tal forma que o usuário consiga rapidamente explorá-lo e realizar suas tarefas com ele. É interessante que muitos sites utilizam a idéia de que site bonito tem que ser complicado. O que é horrível. Felizmente muita gente está mudando esse conceito.

Após um certo período sem utilizá-lo o usuário não freqüente é capaz de retornar ao site e realizar suas tarefas sem a necessidade de reaprender como interagir com ele. Meu portifólio muda freqüentemente de layout mas, eu sempre sigo o mesmo conceito. De utilizar menu horizontal, títulos, textos, etc… O importante é não fugir do seu conceito original.

O Frederick van Amstel é uma referência em Usabilidade, e que oferece seus serviços como consultor em seu blog. É interessante conferir o blog dele também pois existem diversas informações úteis.

Quando falamos em usabilidade, lembramos de acessibilidade (mesmo que os termos não signifiquem a mesma coisa). E Cláudia Dias dá dicas importantes sobre Acessibilidade:

1. Fornecer alternativas equivalentes ao conteúdo sonoro e visual
2. Não recorrer apenas à cor
3. Utilizar corretamente marcações e folhas de estilo (CSS)
4. Indicar claramente qual o idioma utilizado (lembram que eu mostrei no meu post sobre Wordpress?)
5. Criar tabelas passíveis de transformação harmoniosa (por meu ver, eu abolia as tabelas)
6. Assegurar que as páginas dotadas de novas tecnologias sejam transformadas harmoniosamente
7. Assegurar o controle do usuário sobre as alterações temporais do conteúdo
8. Assegurar a acessibilidade direta de interfaces de usuário integradas
9. Projetas páginas considerando a independência de dispositivos
10. Utilizar soluções de transição
11. Utilizar tecnologia e recomendações do W3C
12. Fornecer informações de contexto e orientações
13. Fornecer mecanismos de navegação claros
14. Assegurar a clareza e a simplicidade dos documentos

Eu acredito que você não saiba mas, a acessibilidade é um norma estabelecida pela W3C (World Wide Web Consortium), que também está presente no Brasil.

Você pode validar seu site de diversas formas, eu particularmente prefiro o “oficial” o W3C Validator. Quanto a validação da Acessibilidade, tem o DaSilva que é totalmente brasileiro.

Existem algumas recomendações de Heurísticas, vou mostrar algumas:

Heurística 1

• A página principal do site deve ser capaz de responder as perguntas: Onde estou? e O que esse site faz?
• Apresentar em destaque o nome da página principal em todas as páginas do site, preferencialmente no canto superior esquerdo. Pode-se usar o termo Home ou o logotipo da empresa.
• A navegação entre as páginas do portal deve responder às três perguntas: Onde estou? Onde estive? e Para onde posso ir?
• Apresentar o mapa de navegação do site, ressaltando a página atual onde o usuário está.
• Apresentar, em todas as páginas, os níveis anteriores da estrutura de navegação (em formas de links) até chegar à página atual.
• Não usar expressões como “Clique Aqui!”.
• Marcar o texto e não o endereço URL
• Apontar exatamente para o conteúdo descrito no link (por exemplo se tiver escrito Google, aponte para o Google e não para o Yahoo)
• Identificar de forma diferente links para endereços externos ao portal
• Usar o atributo ALT com o significado das imagens para que o texto apareça enquanto a imagem está sendo carregada.

Heurística 2

• Ocupar 50% a 80% da página com conteúdo
• Ocupar no máximo 20% da página com informações sobre a navegação
• Evitar frames, pois diminuem o espaço disponível para apresentação do conteúdo, além de ser anti-acessibilidade.
• Fornecer apenas informação útil aos usuários
• Evitar menos pull-down com opções para as outras páginas do site, pois suas opções não ficam visíveis para os usuários (nem para os sites de busca)
• Usar um conjunto limitado de cores
• Evitar cores berrantes, caracteres brilhando ou piscando (Gifs)
• Usar no máximo dois tipos de fontes (alguns dizem três)
• Usar tamanho de fonte legível
• Não usar caixa alta em excesso

Heurística 3

• Possibilitar o retorno à página principal
• Possibilitar aos usuários interromper ou cancelar o processamento ou transação atual
• Não desviar para outra página, a não ser que o usuário queira ou aperte Enter ou clique com mouse
• Não abrir janelas popup
• Fornecer serviço de busca em todas as páginas do site
• Não usar plug-ins auto-instaláveis (flash é um deles)

Existem outras heurísticas, mas resolvi postar apenas essas três. As outras são: Heurística 4 - Flexibilidade e eficiência de uso, Heurística 5 - Prevenção de Erros, Heurística 6 - Consistência, Heurística 7 - Compatibilidade com o contexto.

É interessante também seguir alguns conceitos como, não faça um link para e-mail e que as pessoas pensem que não seja para e-mail, entendeu? Explico melhor…

Existem algumas pessoas que colocam um link com seu nome, por exemplo: Yeltsin Lima e, não informam que ao clicar nesse link, você será redirecionado para meu e-mail. Você também tem que ter cuidados em algumas coisas que de cara podem parecer bestas mas, são muito chatas.

Nomeie seus arquivos corretamente

Já vi diversos sites com seus arquivos nomeados erroneamente. Por exemplo, use todas as letras minúsculas, use apenas letras ou números, você também pode usar o til, o sublinhado, o hífen e o ponto. Jamais use espaço, e sempre ponha uma extensão no final de arquivo. Tenha em mente também que algumas pessoas acessam seu site pelo arquivo, por isso, mantenha as URL’s mais curta possíveis

Alinhamento

O alinhamento horizontal é tão importante quanto o vertical. É muito comum ver botões onde a digitação não se alinha horizontalmente. Essa alternância estilo onda: para cima e para baixo/para cima e para baixo, torna a navegação confusa. Assim, além de pensar sobre o alinhamento vertical, verifique também o alinhamento horizontal de seus botões e links.

A mesma coisa serve para formulários. Mantendo um alinhamento vertical direito os usuários preencherão os formulários mais rápido e, não terão dificuldades em compreendê-los.

Coisas que você deve evitar

• O texto todo em maiúsculos, além de texto branco com fundo preto.
• Verificar regulamente os links do seu site, inclusive os externos.
• Não diga qual o browser e a resolução é melhor visualizada. Seu site deveria ser acessível em todos.
• Não faça botões normais parecerem com botões-links.
• Rolagem horizontal é um saco, principalmente dentro de um frame.
• Fundo azul com texto azul…
• Tabelas com bordas
• Arquivos gráficos gigantes que demoram para carregar
• Gráficos que não se ajustam à tela
• Contadores de visitas
• Muitas figuras na primeira página
• Links com texto não-sublinhados

Diferenças entre .gif, .jpeg e .png

Resolvi também mostrar a diferença entre esses três formatos de imagens. E é exatamente isso que eu vou falar: “uma imagem vale mais que mil palavras”.

Essa imagem foi salva em formato .gif, seu tamanho: 39.71KB - Cores: 256

Essa imagem foi salva em formato .gif, seu tamanho 31.70KB - Cores: 128

Essa imagem foi salva em formato .gif, seu tamanho 24.68KB - Cores: 64

Essa imagem foi salva em formato .jpg, seu tamanho 9.15KB - Qualidade: 70%

Essa imagem foi salva em formato .jpg, seu tamanho 67.96KB - Qualidade: 100%

Diferentemente da gif, a jpg não perde apenas as cores, perde também os pixels. Por exemplo, a comparação entre a foto aí de cima com 100% de qualidade, dá de baixo com 1% de qualidade:

Essa imagem foi salva em formato .jpg, seu tamanho 1.72KB - Qualidade: 1%

Em contrapartida a gif 256 em comparação com a gif 8:

Essa imagem foi salva em formato .gif seu tamanho 39.71KB - Cores: 256

Essa imagem foi salva em formato .gif, seu tamanho 8.53KB - Cores: 8

O PNG 8 é uma versão parecida com a GIF porém, seu tamanho é inferior. Por exemplo, a foto gif aí de cima de 256 cores possui 39.71KB enquanto a mesma em png possuí 33.88KB.

O PNG 32 tem tamanho 124.62KB por isso não coloquei-o aqui.