Melhores práticas em web design

Princípios de web e web design

1. World-wide web (web): um serviço da Internet. 
   Criada por Tim Berners-Lee (físico britânico) em 1989 para compartilhamento de documentos "hipermídia" (hipertexto, multimídia). Meio operacional: servidor, browser, endereço URL, protocolo HTTP e código HTML.

2. ---

   Web design (estilo, autoria, usabilidade): fácil de usar.

3. ---

   O que se entende por "boas práticas em web design"? Web design é diferente de design gráfico.
   Jakob Nielsen (danês, dinamarquês): "the king of usability", "user advocate". Possui 79 patentes sobre formas de tornar a Internet mais fácil de usar.

4. ---

   Desafio do web design: como organizar a informação em um website complexo?
   Como escrever corretamente? O que enfatizar? O que evitar?

5. ---

   Qual o foco? A "missão" da instituição? Quem é o usuário?

6. ---

   Pessoas são orientadas a "buscar no website".
   Dica: oferecer uma "máquina de busca", índice A..Z, mapa do site etc..

7. ---

   O website deve ser organizado para pessoas externas à instituição.
   Dica: não reproduzir a estrutura organizacional.

8. ---

   Como as pessoas leem na web? Pessoas não leem, elas "scaneiam".
   Dica: usar parágrafos com marcadores, realçar palavras importantes (negrito, itálico), tabela.

9. ---

   Texto deve ser fácil de ler, agradável, simples.
   "Evite que o texto e o design gráfico fale mais do que o usuário quer saber."

10. ---

    Tamanho do texto: 1/3 do tamanho original (em papel). Texto deve ser sucinto, objetivo (ir direto ao assunto), sem redundância.
    Pessoas preferem ler em papel do que ler na tela.

11. ---

    Navegação: elemento fundamental de qualquer website. Transmitir a sensação de que ao navegar pelas páginas o usuário continua "dentro do mesmo website".
    Dica: website independente de "navegador".

12. ---

    Imagem: usar ou não usar? 
    "Uma imagem vale por 1.000 palavras". Seja crítico: depende da imagem e depende de quais são as "1.000 palavras"
    Dica: usar imagem somente se ela reforçar o texto, se ajudar na compreensão do texto.

13. ---

    Síndrome do "click here".
    "Para baixar o material necessário na aula do dia xx/xx/xxxx o aluno deve clicar aqui"
    "Material da aula em xx/xx/xxxx"
    Dica: texto do link deve ser autoexplicativo.

14. ---

    Optar por padrões: Word, Excel não são padrões. PDF padrão "de facto".

15. ---

    Carga rápida das páginas. Se uma página não abrir em torno de 10 segundos perde-se 1/3 dos visitantes.
    Dica: usar ferramentas de compactação para arquivos "pdf", "jpg" e outros.

16. ---

    Cuidado com imagem animada, "page not found", link inativo, sublinhado. 
    Botão Voltar (onde está?). Botão Sair (onde está?)

17. ---

    Cores: cuidado com o efeito "dithering". 
    Dica: optar por "cores seguras".

18. ---

    Autoria: quem é o responsável pela página? Exibir datas (criação, atualização, expiração).

19. ---

    Manter o website simples, flexível a manutenção e atualização.

20. ---

    Interatividade: Formulário de Contato, Enquete.
    Mensagens de erro do sistema devem possuir uma redação simples e clara 

Referências

1. Art and the Zen of web sites

2. How users read on the web

3. Top 10 mistakes in web design

4. Introduction to usability

5. As 10 heurísticas de usabilidade do Nielsen

6. The same link twice on the same page: do duplicates help or hurt?

7. Be succinct: how to write for the web

8. Inverted pyramids in cyberspace

9. Safe color codes hexadecimal

10. BERNERS-LEE, T., et. alli. The World-Wide Web. Communications of the ACM, 1994.