O documento discute arquitetura de informação, interface e usabilidade em sites. A arquitetura de informação planeja a estrutura e hierarquia do site. Interfaces evoluíram de texto para gráficos e hipermídia. Usabilidade requer que sites sejam fáceis de usar e compreender para o usuário.

1. Prof. Me. Marcelo Träsel
Comunicação Digital em Publicidade e Propaganda
Famecos/PUCRS
Arquitetura e
usabilidade
segunda-feira, 25 de outubro de 2010

2. Arquitetura de
informação
• Projeto da estrutura de um site. É a base
para a colocação do conteúdo depois e por
isso deve ser planejado de acordo com o
que uma previsão do material.
• Orienta a organização das páginas, navegação
do usuário e hierarquia interna do site.
segunda-feira, 25 de outubro de 2010

3. Interface
• Micros eram texto puro - DOS, monitores
verdes
• Desktop (vulgo área de trabalho) - MacOS
• Janelas - Windows
• Hiperlinks - web, navegadores
• Flash/Vídeo -You Tube
• 3D - CAD, Second Life
segunda-feira, 25 de outubro de 2010

4. Interface
segunda-feira, 25 de outubro de 2010

5. Interface
segunda-feira, 25 de outubro de 2010

6. Interface
segunda-feira, 25 de outubro de 2010

7. Usabilidade
• Usabilidade é o modo como um navegador
"degusta" a informação.
• Interface simples e até mesmo feinha não
significa que o site não tenha boa
usabilidade.
• “NÃO ME FAÇA PENSAR!” - Steve Krug
segunda-feira, 25 de outubro de 2010

8. Usabilidade
segunda-feira, 25 de outubro de 2010

9. Usabilidade
segunda-feira, 25 de outubro de 2010

10. Usabilidade
segunda-feira, 25 de outubro de 2010

11. Usabilidade
• Ser fácil de aprender
• Oferecer eficiência no uso
• Ter capacidade de guardar os caminhos
realizados
• Não ter erros ou caminhos perdidos
• Dar satisfação para o leitor
Para Jakob Nielsen, um site deve:
segunda-feira, 25 de outubro de 2010

12. Usabilidade
• Que site é esse?
• O que posso fazer aqui?
• Onde está a informação de que preciso?
• O que esse símbolo quer dizer?
O usuário jamais deve se perguntar:
segunda-feira, 25 de outubro de 2010

13. Usabilidade
• Atendimento online
• Central de atendimento
• Meu cadastro
• Meus pedidos
• Busca
• Minhas compras
segunda-feira, 25 de outubro de 2010

14. Usabilidade
• Marca no canto superior esquerdo
• Busca na parte superior
• Navegação global na parte superior
• Navegação local na coluna da esquerda
• “Caminho de pão” na parte superior
• Conteúdo no centro
segunda-feira, 25 de outubro de 2010

15. Usabilidade
segunda-feira, 25 de outubro de 2010

16. Usabilidade
• Manter a identidade visual
• Usar as convenções
• Deixar óbvio o que pode ser clicado
• Evitar a confusão
• Evitar a enrolação
• Nunca, jamais impor música de fundo
• Animações: evite
segunda-feira, 25 de outubro de 2010

17. Etapas de um projeto
• POR QUE alguém visitará nosso site?
• QUEM visitará nosso site?
• O QUE nosso usuário quer encontrar?
• O que nós ofereceremos ao usuário que ele
NÃO ENCONTRARÁ EM OUTRO SITES?
segunda-feira, 25 de outubro de 2010

18. segunda-feira, 25 de outubro de 2010

19. segunda-feira, 25 de outubro de 2010

20. Etapas de um projeto
• Proposta inicial
• Benchmark
• Levantamento do conteúdo
• Definição das “atrações” do site
• Criação do wireframe
• Venda de anúncios
segunda-feira, 25 de outubro de 2010

21. Etapas de um projeto
• Definição e colocação da identidade visual
• Produção/edição de conteúdo
• Teste
• Publicação
• Divulgação
segunda-feira, 25 de outubro de 2010

22. #FAIL
segunda-feira, 25 de outubro de 2010

23. #FAIL
segunda-feira, 25 de outubro de 2010

24. #FAIL
segunda-feira, 25 de outubro de 2010

25. #FAIL
segunda-feira, 25 de outubro de 2010

26. #FAIL
segunda-feira, 25 de outubro de 2010

27. #FAIL
segunda-feira, 25 de outubro de 2010

28. #FAIL
segunda-feira, 25 de outubro de 2010