aula 5navegabil

Prévia do material em texto

Aula 5: Navegabilidade
Arquitetura da Informação
Navegabilidade
Interação
Profª Mônica Paz
 
Uma arquitetura da informação mal 
feita...
● Perder tempo na busca da informação
● Dificuldade de avançar ou retroceder
● Conteúdos inacessíveis 
● Desistência
● Sem fidelização/retorno
 
Arquitetura da Informação
● Visa facilitar o uso da interface e o acesso a informação 
com agilidade
● Organização 
● Rotulação
● Navegação
● Busca
 
Usabilidade
Heurísticas 
de usabilidade (1)
Heurísticas 
de usabilidade (1)
Ofereça atalhos
Crie diálogos simples e naturais
Crie um help
Heurísticas 
de usabilidade (2)
Heurísticas 
de usabilidade (2)
Seja consistente
Forneça feedback
Reduza a carga de memória 
Fale a linguagem do usuário
Previna a ocorrência de erros
Exiba mensagens de erro claras
Marque as saídas com clareza
 
Padronização
● Uso de símbolos e expressões já praticadas em outros 
sites
– Sobre, Quem somos, Sobre [empresa], 
– Home, Início, Logomarca
– Contato, Fale conosco
● Links
– Embutidos (no texto)
– Associativos (mais informações)
– Estruturais (apontam para a estrutura de links)
 
Navegabilidade
● Navegar na web
– hiperlinks
● Navegar no site ou sistema
– Menus
– Links
– Botões
 
As interfaces de navegação 
devem responder
● "Onde estou?"
● "Onde estive?"
● "Para onde posso ir?"
 
Outras funções da navegação
● Apresentar o conteúdo do site
● Explicar como o site deve ser usado 
– Onde começar
– Quais as opções
● Gerar confiança
– Futuros retornos
● É uma forma de proporcionar usabilidade
 
Tipo de Navegação
● Principal/Global x Local
● Estrutural
– Conteúdos em uma hierarquia
● Associativa
– Por assunto independente da hierarquia
– Ex: categorias de notícias, tags
● Utilitária
– Relacionada a funcionalidades de busca, etc.
 
Navegação estrutural
● Portal > Seção > Sub-seção
– No alto da página
– Sinal de separação
– Fonte pequenas
– Último item destacado
● Mapa de profundidade
● Caminho percorrido
 
Navegação Estrutural
Breadcrumb
 
Mapa do site
1.Estrutura hierárquica das 
páginas de um site
2.Arquivo XML utilizados 
por indexadores
– sitemaps.org
– Ajuda do Search 
Console
● <urlset 
xmlns="http://www.sitemaps.org/schemas/sitemap
/0.9">
● <url>
● <loc>http://www.seusite.com.br/index.html</loc>
● <changefreq>weekly</changefreq>
● <priority>0.9</priority>
● </url>
● <url>
● <loc>http://www.seusite.com.br/quem-
somos.html</loc>
● <changefreq>weekly</changefreq>
● <priority>0.5</priority>
● </url>
● </urlset>
 
Sitemap
 
Rodapé
 
Navegação Associativa
Categorização
● Por tipo de mídia
– Foto, vídeo, áudio, texto, infográfico, etc.
● Por tipo de conteúdo
– Matéria, Resenha, Artigo, etc.
– Cultura, Cidade, Policial, Esporte, etc.
● Por perfil de usuário
– Fornecedor, cliente
– Professor, aluno
 
Sistema de Gerenciamento de 
Conteúdo - CMS
● Facilidade de edição
● Organização do conteúdo
– Bancos de dados
● Gerencia de mídia
● Estatísticas
● Usuários
● SEO
 
 Padrões para navegação em 
grupo de informações
● Slide show
● Galeria
● Rolagem contínua
● Navegador de mapa
● Nuvens de tags
 
Tipos de Menus
● Megamenu secundário
● Menu vertical retrátil
● Menu em abas
● Menu em acordeão
● Menu em listas hierárquicas
 
Menu Vertical
 
Menu Horizontal
 
Menu Cabeçalho Fixo - I
 
Menu Cabeçalho Fixo - II
 
Menu Cabeçalho Fixo - III
 
Menu Âncora Flutuante
 
Exercício
● Em seu site, uma banda quer disponibilizar seus 
conteúdos.
● Eles querem falar sobre o seu gênero musical, 
composição da banda, biografia de cada um, 
informações sobre os seus 3 álbuns, mostrar fotos, 
agenda, disponibilizar algumas faixas, informações 
para contato e manter contato com os fãs, notícias 
relacionados, citações na mídia.
● Quais ferramentas de navegação usar? 
 
Na sequência veremos...
● Princípios do design
● Layout
– Cores
– Grids
– Wireframes
– Mockup
 
Referências
● Usabilidade de Interfaces e Arquitetura da Informação: Navegação 
Estrutural <http://www.fmemoria.com.br/artigos/nav_estr.pdf>
● Aprenda a criar menus descolados 
<http://visualdicas.blogspot.com.br/2010/11/aprenda-criar-menus-
descolados-para-o.html>
● Criando o Menu Certo para Seu Site: as 6 Melhores Opções para 
2016<https://pt.wix.com/blog/2016/02/criando-o-menu-certo-para-seu-
site-as-6-melhores-opcoes-para-2016/>
● Desing de navegação web parte III 
<https://pt.slideshare.net/wellmarion/desing-de-navegao-web-parte-iii-
4956997>
● Como Planejar um Site <http://pt.wikihow.com/Planejar-um-Site>
● Criando o Menu Certo para Seu Site: as 6 Melhores Opções para 2016 
https://pt.wix.com/blog/2016/02/criando-o-menu-certo-para-seu-site-as-6-
melhores-opcoes-para-2016/
● Criando o Menu Certo para Seu Site: as 6 Melhores Opções para 2016 
https://medium.com/vivareal-ux-chapter/as-6-metas-de-usabilidade-
9491442fd56a
Heurísticas 
de usabilidade (1)
Heurísticas 
de usabilidade (1)
Ofereça atalhos
Crie diálogos simples e naturais
Crie um help
Heurísticas 
de usabilidade (2)
Heurísticas 
de usabilidade (2)
Seja consistente
Forneça feedback
Reduza a carga de memória 
Fale a linguagem do usuário
Previna a ocorrência de erros
Exiba mensagens de erro claras
Marque as saídas com clareza
	Slide 1
	Slide 2
	Slide 3
	Slide 4
	Slide 5
	Slide 6
	Slide 7
	Slide 8
	Slide 9
	Slide 10
	Slide 11
	Slide 12
	Slide 13
	Slide 14
	Slide 15
	Slide 16
	Slide 17
	Slide 18
	Slide 19
	Slide 20
	Slide 21
	Slide 22
	Slide 23
	Slide 24
	Slide 25
	Slide 26
	Slide 27
	Slide 28
	Slide 29