Lightning Talk sobre Design de Navegação Web que rolou no Encontro Locaweb em 19/05/2011 no RJ

2. Design de
Navegação Web
13˚ Encontro Locaweb - 2011
@richardbarros
www.rbinterativa.com.br

3. Navegar é preciso.

4. Navegar é uma arte precisa.

5. Navegar é uma arte precisa.
(ou pelo menos deveria ser)

6. Links

7. Hierarquia

8. Pode parecer fácil, mas...

9. Pra você ter uma ideia....
Criar uma página no Joomla.
1. Painel de controle
2. Adicionar novo artigo
3. Digite um titulo,
escolha categoria e
seção.
4. Salve.

10. Pra você ter uma ideia....
Criar uma página no Joomla.
5. Em Menu, selecione
uma área onde deseja
criar a página.
6. Selecione Novo,
Links internos, Artigos
e finalmente o template
do Artigo.

11. Pra você ter uma ideia....
Criar uma página no Joomla.
7. Preencha um título
para o objeto de menu.
8. Na lista da direita,
clique em selecionar e
escolha um dos artigos
criados.

12. Pra você ter uma ideia....
Criar uma página no Joomla.
9. Salve.

14. Uma boa interface é aquela que
passa despercebida.

15. Pra você ter uma ideia....
Criar uma página no Wordpress.
1. Em Páginas, selecione
Adicionar Nova.
2. Preencha o conteúdo
e escolha a página Pai,
caso exista.
3. Publique.

16. Design centrado na tecnologia?
“Só dá pra fazer se for assim”

17. Design centrado no designer?
“Dei uma revolucionada no menu”

18. Design centrado no usuário.

19. 5 dicas para uma boa navegação.
1) Balanço
Quanto mais ítens de menu, menor a profundidade
e quanto menos itens de menu, maior a hierarquia.
Equilibre a navegação.

20. 5 dicas para uma boa navegação.
2) Curva de aprendizado
O usuário não espera aprender a usar um site. Não existe
expectativa de estudar um manual para entender o que você
faz.
Use com bom senso os padrões de navegação.

21. 5 dicas para uma boa navegação.
3) Consistência
O usuário espera encontrar uma experiência de
navegação semelhante ao longo de todo o site.
Mantenha um padrão para o peso e a posição dos links.

22. 5 dicas para uma boa navegação.
4) Feedback
O usuário precisa de recursos visuais para entender em
que nível de acesso ele está na hierarquia de páginas.
Ofereça informações sobre o andamento da navegação.

23. 5 dicas para uma boa navegação.
5) Interações ricas
Nem sempre é necessário carregar uma nova página para
navegar pelo site. Você pode enriquecer sua interface com
javascript e css.
Crie soluções interativas.

24. Onde posso aprender mais?
Steve Krug, James Kalbach, Russ Unger/Carolyn Chandler,
Não me faça pensar. Design de navegação web. Project Guide to UX Design.

25. Obrigado!
siga @richardbarros
www.richardbarros.com.br