Este documento discute erros comuns no desenvolvimento de websites e como reconhecê-los e evitá-los. Aborda erros relacionados a conteúdo, suporte a tarefas, navegação, formulários, pesquisa, apresentação de texto e links, e design gráfico. O documento enfatiza a importância de compreender as necessidades dos usuários e as melhores práticas de usabilidade para criar websites úteis.

1. Escola Superior de Educação de Santarém
Curso de Educação e Comunicação Multimédia
Laboratório Audiovisual:
Hipermédia
2007
Pedro Tavares

2. Agenda
• Usabilidade na web (continuação)
– Erros comuns no desenvolvimento de websites (web
bloopers)
• Erros de conteúdo
• Erros ligados a tarefas
• Erros de navegação
• Erros no design gráfico e layout
– Como reconhecer e evitar
• Componente prática: desenvolvimento de
website (continuação): arquitectura informação
e design

3. Introdução
• Ter conhecimentos de
programação e
webdesign não significa
que se perceba as
necessidades ligadas à
experiência de utilizador
e à usabilidade:
Desenvolver um website “usável” implica
dominar conceitos para lá do webdesign

4. Introdução
Um bom website requer a compreensão das
necessidades e objectivos dos utilizadores
Interacção
permanente

5. A preocupação com a usabilidade melhora
a web
• Fornece instrumentos de análise
• Alarga competências
• Desenvolve uma consciência crítica

6. Erros principais em websites
• Categorizar esses erros (UI Wizards, Inc.):
– Conteúdo
– Suporte à tarefa
– Navegação
– Formulários
– Pesquisa
– Apresentação de Texto
– Apresentação de links
– Design gráfico e layout

7. Conteúdo
• Falta de identificação da homepage:
• O quê, como, para quem

8. Conteúdo
• Utilizadores fazem uma visualização rápida do
website: deve dizer claramente o que é o
website e quais os objectivos

9. • Evitar paragrafos longos
• Utilizar sub-títulos, hiperligações (com pouco
texto com link, listas
Elimine metade do texto e depois elimine a outra metade da
metade que restou
Steve Krug, Don't Make Me Think: A Common Sense Approach to Web
Usability

10. Conteúdo
• Conteúdo por terminar: não colocar online sem
ter o website finalizado. Verificar!

11. Conteúdo
• Perceber contexto de aplicação das mensagens

12. Suporte à tarefa
• Requerer dados
desnecessários
Necessidade de
solicitar o
mínimo
necessário

13. Suporte à tarefa
• Aplicação
desenvolvida
sobre informação
irrelevante para
o utilizador

14. Navegação
• Vários tipos diferentes de navegação

15. Navegação
• Página actual não indicada

16. Formulários
• Parece ser texto editável mas não é
Aqui é propositado!

17. Pesquisa
• Pesquisa mal
categorizada e sem
metadados
Necessidade de organizar a
informação, indexar,
perceber tendências de
pesquisa,testar: recorrer A funcionalidade
às melhores práticas mais utilizada na
web!

18. Hiperligações
• Botões difíceis de descobrir

19. Hiperligações
• Links não visíveis

20. Design gráfico e layout
• Principais erros:
– Texto demasiado pequeno
– Esquemas de cores demasiado subtis ou invasivos
– Texto centrado
– Utilização de tecnologias e versões sem aviso ao
utilizador (exº Flash)
– Desrespeito por regras de acessibilidade

21. Design gráfico e layout

22. Design gráfico e layout

23. Design gráfico e layout

24. Em resumo
• Esta é uma área que necessita de análise, de reflexão,
de conhecimento e de estudo prévio
• Ter conhecimentos de design ou programação não
preenche todos os requisitos de um profissional de
usabilidade
• Necesidade de conhecer as melhores práticas
• Diagnóstico de situações pode ajudar a melhor
desenvolvimento em projectos futuros

25. Tarefa: Diagnosticar erros
• www.portaldaempresa.pt
• http://www.valweb.org
• http://www.ghostowlflutes.com/first_flute.htm
• http://www.kpmg.com/
• http://www.baldbuddha.com/

26. Bibliografia suplementar
• Uma checklist para websites:
http://books.elsevier.com/companions/155860
8400/checklist.php
• Jakob Nielsen, Designing Web Usability: The Practice of Simplicity, New
Riders, 1999.
• Jakob Nielsen and Marie Tahir, Homepage Usability: Fifty Websites
Deconstructed, New Riders, 2001. P
• Jeff Johnson, 60 Common Web Design Mistakes and How to Avoid
Them, Morgan Kaufmann, 2005

27. Componente prática
• desenvolvimento de website (continuação):
– Finalização da arquitectura informação
– design do website

28. ptavares@netcabo.pt
skype: pltavares2115
msn:pftavares@hotmail.com