Comunicação Visual para Web I AULA 5

Prévia do material em texto

Aula
05Comunicação Visual para Web - UNIGRAN
USABILIDADE APLICADA À 
NAVEGAÇÃO
Caros(as) alunos(as), nessa aula veremos a importância do design 
aplicado na web e os conceitos que constituem esta área multidisciplinar. 
Se ao final desta aula tiverem dúvidas, vocês poderão saná-las através das 
ferramentas “fórum” ou “quadro de avisos” e “chat”.
Comecemos, então, analisando os objetivos e verificando as 
seções que serão desenvolvidas ao longo desta aula.
Bom trabalho!
Objetivos de aprendizagem
Ao final desta aula, vocês serão capazes de:
• conhecer as principais diretrizes de usabilidade aplicadas 
à navegação;
• conhecer quais são os principais recursos navegacionais em 
um website; 
• compreender os impactos da má aplicação de recursos de 
navegação na estrutura do website;
• construir interfaces com estruturas e ferramentas adequadas 
que propiciam uma boa navegação. 
79
Comunicação Visual para Web - UNIGRAN
Seções de estudo
• Seção 1 - Usabilidade Aplicada à Navegação
• Seção 2 - Sessões principais
• Seção 3 - Menus de Navegação
• Seção 4 - Rótulos
• Seção 5 - Ferramentas de Pesquisa
• Seção 6 - Breadcrumbs
• Seção 7 - Recursos Cromáticos
• Seção 8 - Links
• Seção 9 - Estrutura Navegacional
Seção 1 - Usabilidade aplicada à navegação
Segundo Jakob Nielsen, autor do livro Usabilidade na Web: Projetando 
Web Sites com Qualidade, a capacidade de se localizar em um site está focada em 
quatro áreas: navegação, menu, links e arquitetura da informação.
Sites com bom esquema informacional possibilitam o acesso dos usuários 
aos conteúdos e informações desejadas em qualquer momento, independente do 
dispositivo de acesso. Quando isso não acontece os usuários acabam desistindo 
ou indo para outros sites. 
Sites mal estruturados tornam a navegação lenta desencorajando o usuário 
a utilizá-lo. Um site com bom design navegacional mostra aos usuários onde 
eles estão, onde as informações estão localizadas e como eles irão agir para 
conseguir o que precisam intuitivamente, concentrando-se apenas nas tarefas, 
sem se preocupar com a estrutura do site. 
Sites eficazes organizam suas informações de forma intuitiva para que os 
usuários possam ser “conduzidos” aos lugares corretos, sem que eles tenham que 
percorrer caminhos ambíguos para encontrar o conteúdo. 
Algumas empresas categorizam as informações do site de acordo com 
seus gráficos organizacionais, mas esse modelo nem sempre é compreensível 
para o usuário. Jakob afirma que “Tentar projetar a estrutura do seu site sem um 
feedback dos seus clientes é um grande equívoco que pode lhe custar milhares ou 
milhões de dólares. Projete para conveniência deles, não para sua.” 
Ao entrarmos em um site imediatamente o analisamos e criamos 
mentalmente uma lógica de funcionamento, para então decidirmos onde 
clicaremos. Essa lógica refere-se ao sentido de localização do usuário em relação 
80
Comunicação Visual para Web - UNIGRAN
a um site, de quais caminhos ele precisa percorrer para encontrar uma 
determina informação.
A percepção espacial do site não é igual para todas as pessoas, é preciso 
prever as variações de como os usuários irão navegar pelo site e como estes podem 
ser orientados durante o processo de navegação para que não se sintam perdidos 
e encontrem a informação desejada.
As características da interface das páginas internas, tais como fontes, 
cores, estilo gráfico, dentre outras, devem ser as mesmas da home, para que seja 
mantida a unificação visual e consistência na estrutura navegacional, assim o 
usuário terá certeza de que está no mesmo site, pois quando ocorrem mudanças 
nessa estrutura de uma página para outra o usuário precisará desviar sua atenção 
do uso do site para entender como utilizá-lo, deixando-os inseguros e hesitantes. 
Na Web, existem certas convenções como no mundo real, por exemplo: 
espera-se encontrar placas de sinalização de ruas, nas esquinas, no alto de um 
poste (não na sua base). Na internet também acontece o mesmo, baseado-se em 
nossa experiência cibernética criamos certas convenções de que iremos encontrar, 
por exemplo: o logotipo no canto superior esquerdo, o link para retornar para 
home no canto superior direito, etc. 
Essas convenções nos dão um pré-conhecimento sobre a localização 
dos elementos na interface de um website, reduzindo esforços para localizar uma 
determinada informação, uma vez que temos em mente onde procurá-las. 
Uma boa navegação deve ser previsível, ter sentido e ordem e fazer 
com que os usuários se sintam confortáveis ao navegar pelo site. As informações 
devem ser organizadas de forma coerente, sem ambiguidades e redundâncias. Os 
usuários não precisam entender ou memorizar a estrutura navegacional, apenas 
serem conduzidos intuitivamente, permitindo que estes se movam em todos os 
sentidos no site e sintam-se confiantes e seguros durante a navegação. 
Nas próximas seções, serão apresentadas convenções e diretrizes de 
usabilidade aplicadas em elementos de navegação que podem ajudar o usuário a 
localizar as informações desejadas ou executar ações como uma compra on-line:
Seção 2 - Seções principais
Iniciaremos analisando as seções principais de um modelo convencional 
de navegação. Observe a estrutura:
81
Comunicação Visual para Web - UNIGRAN
Seção 3 - Menus de Navegação
Menus são elementos essenciais para a navegação, no entanto é preciso 
observar alguns critérios de usabilidade para utiliza-los de forma eficaz. Vejamos 
alguns considerações os diferentes tipos de menus:
Menus verticais: Posicionados geralmente no lado esquerdo da tela, 
são amplamente utilizados devido a sua flexibilidade, assim são indicados para 
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Em geral, a navegação se inicia através das sessões principais do website, que 
devem estar posicionadas nas áreas privilegiadas com maior visualização. Os rótulos 
das seções devem ser claros e persuasivos, pois o usuário só iniciará a navegação se as 
informações de destaque lhe despertarem o interesse. 
JAMAIS anime ou coloque efeitos intermitentes nas sessões principais, pois 
nem os usuários possuem destreza ou o tempo necessário para interagir com o site. 
As sessões principais devem estar sempre visíveis e organizadas por assuntos em 
categorias e subcategorias, para que o usuário compreenda a hierarquia e a profundidade 
dos links. Não oculte as seções principais com intuíto que o usuário mova o mouse sobre 
as áreas de navegação para descobri-las, pois eles podem não encontrar as informações 
que procuram. Outro agravante é que os usuários não gostam muito de movimentar o 
mouse durante a navegação. 
A localização do usuários deve ser destacada visualmente durante a navegação, 
para que este saiba exatamente em que lugar ele está no site. Mudanças sutis nas cores dos 
links e/ou imagens do plano de fundo dos menus, são recursos que auxiliam nesta tarefa. 
Nos sites de comércio eletrônico, é importante orientar os usuários para encontrar 
os produtos ou serviços, pois caso contrário, entenderão que estes não existem no site. 
Durante o processo de compra é imprescindível que os usuário entendam cada etapa do 
processo para que estes sinta confiança em realizar tal transação. 
82
Comunicação Visual para Web - UNIGRAN
sites que frequentemente precisam alterar a quantidade de tópicos, sem ajustes na 
diagramação do layout.
Menus horizontais: a disposição das informações em linha horizontal é 
comprometida pelo espaço limitado, uma vez que não podem acomodar muitos 
tópicos, sendo assim, este tipo de menu é indicado apenas para exibir informações 
fixas uma vez que a rolagem horizontal não é convencionalmente utilizada na Web. 
 Uma solução para tal problemática é a utilização de menu drop-dow 
(menus expansíveis), no entanto,estes devem ser utilizados com critério, pois 
embora os usuários já esteja habituados em utilizá-los, o número de níveis deve 
ser limitado a no máximo dois, pois quanto maior a quantidade de tópicos, menor 
a possibilidade de não serem lidos. 
Muitos níveis também podem conduzir o usuário a cometer ações errôneas 
ou confundi-lo, não permitindo que este encontre a informações desejadas. 
Certifique-se de que os sub-níves permaneçam na página por tempo 
suficiente para que o usuário clique na opção desejada. 
Menus de Rodapé: Menus utilizados nesta região são utilizados para 
exibir informações secundários ou apenas repetem o menu horizontal disposto na 
parte superior do site. Este tipo de menu é indicado para páginas muito longas, 
para que o usuário não tenha que voltar ao topo para continuar a navegação.
Diretrizes para elaboração de menus:
• Classifiquem os tópicos: se houver poucos itens, classifiquem pelo 
grau de importância; se tiver muitos itens dívida as sessões em tópicos e sub-
tópicos e classifique por ordem alfabética.
• Mantenham a mesma estrutura em todas as páginas: A organização 
do menu deve ser a mesma em todas as páginas. Se a estrutura for alterada nas 
páginas internas comprometerá a navegação. 
• Evitem cliques desnecessários: Os sub-tópicos devem ser exibidos 
sem que seja necessário clicar no tópico principal, para abrir uma nova página, 
para então exibir os sub-tópicos. 
• A utilização de ícones ao invés de palavras no menu (como a cartinha 
que sinaliza “contato”) é recomendável apenas para menus pequenos de até 5 
itens. As diretrizes para elaboração de ícones devem ser observadas nesse caso.
• Padronizem esteticamente o menu, mantendo a mesma tipografia, 
texto, cores, etc.
• Organizem de forma hierárquica os menus, destacando o que tiver 
maior importância, colocando-o nas áreas privilegiadas. 
83
Comunicação Visual para Web - UNIGRAN
Seção 4 - Rótulos
Os rótulos conduzem a navegação e sintetizam a temática e os principais 
assuntos que estão sendo abordados pelo canal online. Observe a interface do site 
da Apple. (Acessado em 25/11/2013)
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Notem que os rótulos são claros e significativos, e facilitam a varredura 
visual. Os usuários preferem rótulos descritivos e curtos, a longas descrições 
detalhadas. A nomenclatura dos rótulos devem ter coerência com o conteúdo que 
será apresentado, assim certifique-se que o conteúdo exibido em uma página possui 
relação com a nomenclatura do link que o usuário clicou para exibi - lá. 
Pode ocorre situações em que o nome empregado na página (<title>) ou 
cabeçalho (<h1>) seja mais extenso por uma questão explicativa, no entanto ele 
deve ser equivalente ao link. 
Cabeçalhos:
Na hierarquia visual, os cabeçalhos das páginas (<h1> ao <h5>) devem 
aparecer englobando o conteúdo, que deve ser pertinente e único para cada página.
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
84
Comunicação Visual para Web - UNIGRAN
Seção 5 - Ferramenta de Pesquisa
A ferramenta de pesquisa é um dos recursos mais utilizados para os 
usuários encontrarem o que estão procurando. Segundo Rosenfeld em seu 
livro: Information Architecture for the World Wide Web, metade das pessoas ao 
acessarem um site pela primeira vez preferem pesquisar a navegar pelos links.
De acordo com Jakob Nielsen, quando o usuário precisa pesquisar uma 
determinada informação esse número sobre para 88%, principalmente quando 
visitam o website pela primeira vez. (Fonte: http://www.nngroup.com/articles/
search-engines-become-answer-engines/, acessado em: 15/11/13).
No contexto da acessibilidade, a ferramenta de pesquisa é essencial 
para os portadores de deficiências visuais, segundo um estudo realizado pela 
WebAIM mais da metade dos pesquisados (com limitações visuais) sempre 
ou frequentemente utilizam a ferramenta de pesquisa para navegar no website. 
(Fonte: http://webaim.org/, acessado em: 15/11/13).
Muitos estudos apontam que os usuários denotam maior importância aos 
conteúdos textuais, desta forma a nomenclatura correta e adequada é fundamental 
para que o usuário inicie a navegação no canal online.
A ferramenta de pesquisa deve ser simples e fácil de utilizar, para que 
qualquer pessoas consiga buscar uma determinada informação sem dificuldade. 
Quanto a aparência: 
A ferramenta de pesquisa deve ser evidente no site. Os usuários esperam 
encontra algo semelhante a imagem abaixo:
Segundo estudos do Poynter Institute, os olhos dos 
usuários detectam primeiro os textos, especialmente os 
cabeçalhos (manchetes) do alto à esquerda. Só depois se 
atêm às imagens.?
VOCÊ SABIA
Recomenda-se que seja obrigatoriamente disponibilizada ferramenta de pesquisa 
em sites grandes e complexos com mais de 200 páginas.
85
Comunicação Visual para Web - UNIGRAN
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Junto ao campo de pesquise utilizem as palavras “Pesquisar” ou “Buscar”. 
Não utilizem rótulos incomuns ou em outros idiomas, pois pode confundir o usuário. 
Posicionem a ferramenta de pesquisa em áreas privilegiadas, na parte 
superior de todas as páginas do site, para que esta seja encontrada rapidamente. 
A utilização da ferramenta deve ser simples e fácil. Lembre-se que o usuário irá 
recorrer à pesquisa principalmente quando estiver perdido. 
Quanto a caixa de inserção de dados:
Em média, as pesquisas feitas pelos usuários possuem 14 caracteres. Com 
base nesta métrica recomenda-se que a caixa de texto comporte 27 caracteres, 
pelos seguintes motivos: 
• Primeiro: caixas maiores estimulam os usuários a digitarem consultas 
maiores, o que leva a resultados mais precisos e satisfatórios. 
• Segundo: quando as pessoas visualizam o que estão digitando a 
ocorrência de erros ortográficos é menor. Para especificar corretamente qual o 
tamanho indicado para a caixa de pesquisa, analise os logs do sistema de pesquisa 
do seu site para verificar as palavras mais pesquisadas, ou utilize ferramentas 
como Google Analytics ou Keyword Selector Tool do Yahoo, que fornecem as 
palavras mais pesquisadas no site.
Se o sistema de pesquisa oferecer pesquisa restrita (categorizadas por 
sessões do site) divida-a em intervalos ou sessões, no entanto a opção de pesquisa 
global deve sempre ser disponibilizada. 
Quanto aos resultados:
Os resultados da pesquisa devem ser exibidos linearmente, categorizados 
pelos de maior relevância ao de menor relevância, é claro que em alguns sites como 
os de notícias, por exemplo, o indicado seria categorizar por data, a ordenação 
deve ser feita baseada no objetivo do site. 
Cada resultado da pesquisa deve iniciar com o título clicável (com 
aparência de link), seguido por um pequeno resumo sobre o assunto de duas ou 
três linhas. A quantidade de registros encontrados também deve ser informada 
para que o usuário tenha noção da profundidade de retornos gerados. 
86
Comunicação Visual para Web - UNIGRAN
O título deve ser claro e significativo, para que os usuários entendam 
imediatamente do que se trata o assunto. As primeiras três palavras são as 
mais importantes porque os usuários normalmente não leem o título inteiro. É 
importante destacar no contexto do resultado da pesquisa os termos pesquisados. 
Ex: veja o resultado da pesquisa pelo termo “copa do mundo” realizada no website 
do Estadão (www.estadao.com.br).
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Veja que no resultado de pesquisa apresentado podemos encontrar as 
recomendações dadas anteriormente. Note que o usuário poderá classificar os 
resultados por sessões e por tipo de conteúdo (fotos, vídeos etc.).A quantidade 
de registros está sendo informada e o termo pesquisado (copa do mundo) aparece 
destacado nos textos. 
As diretrizes descritas são mais adequadas para portais de notícias ou 
para web sites que possuem conteúdos no formato texto. Tais diretrizes nem 
sempre são aplicáveis à e-commerces, que neste caso a relevância da pesquisa 
deve ser a funcionalidade principal. 
Quanto as funcionalidades adicionais:
Disponham de recursos que ajudem o usuário a encontrar a informação 
desejada, como por exemplo os itens mais pesquisados no web site correlatos ao 
termo informado. Ex ao digitar o termo “brinquedos” a ferramenta oferece opções 
de busca baseada nos termos mais pesquisados.
87
Comunicação Visual para Web - UNIGRAN
Fonte: < https://www.google.com.br <imghp?hl=pt-
PT&tab=wi&ei=pkgTVKK_LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Em alguns websites é interessante que seja oferecido históricos de 
pesquisa que seja exibido ao usuário dados das consultas anteriores para que este 
apenas altere ou refaça a pesquisa e não tenha que digitar tudo novamente. 
Quando a entrada de dados incorretos:
Quando o usuário digitar um termo com a grafia incorreta, informe que 
não há resultados para aquela pesquisa ou valide a ferramenta para que busque 
os termos mesmo com erros ortográficos. Se a pesquisa não retornar nenhum 
resultado, é preciso informar claramente ao usuário que nada foi encontrado e não 
retornar uma página em branco, pois isso pode confundir os usuários. Nesse caso, 
é recomendável oferecer o usuário a opção de realizar uma pesquisa avançada, 
embora na maioria das vezes elas só confundam mais o usuário. Observem o 
seguinte exemplo:
Fonte: < https://www.google.com.br <imghp?hl=pt-
PT&tab=wi&ei=pkgTVKK_LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
88
Comunicação Visual para Web - UNIGRAN
Note que ao informar um termo com erro na grafia o web site retorna 
o resultado da pesquisa informando claramente o termo pesquisado “cupa do 
mundo” e a quantidade de resultados encontrados “0” para este termo. 
Quando a pesquisa retornar apenas um resultado, mostre-o na tela e não 
direcione o usuário diretamente na página do resultado em questão, pois podem 
confundir o usuário e violar suas expectativas. 
Evitem que os resultados da pesquisem apontem para outras páginas fora 
do site atual, pois quando o usuário faz uma pesquisa entende-se que ele deseja 
encontrar uma determinada informação dentro do site que está navegando, caso 
contrário estes poderiam utilizar seus sistemas favoritos de busca como Google 
ou Yahoo.
Devido ao grau de importância dessa ferramenta, é preciso aperfeiçoá-
la constantemente, a fim de garantir o retorno de melhores resultados. É 
preciso observar nas estatísticas de acesso quais as palavras ou expressões mais 
pesquisadas, quais resultados tem maior índice de cliques, de quais páginas são 
feitas o maior número de pesquisas. Ao observarmos esses dados traçamos um 
perfil do comportamento do usuário no site, assim podemos empregar ações para 
aperfeiçoar as funcionalidades do site como a arquitetura da informação e as 
tecnologias empregadas para otimiza-lo para os sistema de Pesquisa. 
A Pesquisa é uma ferramenta de estrema importância no Web site, pois 
uma vez que funcionamento dessa ferramenta é otimizado dentro do website 
também ficará otimizado para buscadores externos. Sabemos que a maioria 
das pessoas pesquisam apenas na primeira página dos resultados de pesquisa, 
imagine então se a página em questão se tratar de um comércio eletrônico, qual a 
importância do site aparecer na primeira página? 
Através das estatísticas do sistema de pesquisa, vocês poderão obter 
importantes informações: como quais são as palavras mais pesquisadas, para 
incluí-las como palavra-chave caso elas não estejam especificadas; identificar o 
comportamento do usuário, em quais resultados ele clica mais; em quais páginas 
eles fazem mais pesquisas; o uso excessivo de pesquisa no site, isso pode indicar 
que o usuário não estão encontrando as informações através da navegação normal. 
A análise desses comportamentos é importante para efetuar melhorias 
continuas no site, desde a arquitetura de informações, navegação, conteúdo, como 
o emprego de novas tecnologias.
89
Comunicação Visual para Web - UNIGRAN
Seção 6 - Breadcrumbs (Migalhas de Pão)
Quem não se lembra do conto de João e Maria, que para não se perderem 
o caminho de volta para casa, jogaram no caminho da floresta um rastro de 
migalhas de pão. Da mesma forma funciona o recurso de breadcrumbs, conforme 
o usuário vai navegando pelo site o caminho percorrido vai sendo registrado. 
Veja o exemplo deste website. Observe que acima do produto estão 
descritas as sessões percorridas (Tablets > Tablets > AndroidTablet Samsung 
Galaxy) até encontrá-lo, desta forma o usuário poderá retroceder na navegação 
seguindo do próprios passos. 
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Permitam que os usuários acessem as informações ou os produtos do 
site por diferentes caminhos. Os usuários não têm que entender como o site foi 
estruturado. Não os forcem a pensar.
90
Comunicação Visual para Web - UNIGRAN
Seção 7 - Recursos Cromáticos
Os recursos cromáticos são importantíssimos para orientar o usuário 
durante a navegação, destacar informações e associado a semântica das cores 
agregar informações enriquecendo a navegação no website de forma intuitiva. 
Os recursos cromáticos podem ser utilizado com bastante eficácia para 
dividir as sessões. Veja o exemplo do site da Discovery Mulher que utiliza cores 
para dividir suas sessões, assim o usuário que estiver navegando nas páginas 
internas poderá identificar a sessão que está localizado pela cor.
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
Sessão “Beleza”: Note que ao navegar pela sessão Beleza o padrão de 
cores da home foi mantido criando uma unificação visual. 
Fonte: < https://www.google.com.br <imghp?hl=pt-PT&tab=wi&ei=pkgTVKK_
LIiT8QGZqoBg&ved=0CAQQqi4oAg/>
91
Comunicação Visual para Web - UNIGRAN
Os recursos cromáticos são excelentes quando utilizados com critério, 
o emprego de cores inadequadas pode confundir o usuário durante a navegação. 
Veremos nas próximas aulas mais diretrizes sobre o emprego de cores, nesta aula 
foi enfatizado apenas como elas podem contribuir com a navegação.
Seção 8 - Links
Links são o principal recurso de navegação. Através dos links o usuário 
poderá navegar entre as seções e páginas do site ou ir para outro site através de 
uma estrutura hipertextual de informações. A correta utilização dos links garante 
segurança aos usuários durante a navegação. 
Certifique-se de que os links estejam sinalizados claramente e os usuários 
possam perceber o que é clicável e o que não é. 
Textos coloridos e/ou sublinhados, ou em negrito indicam clicabilidade. 
Em geral todos os elementos que apresentam saliência ou destacam-se na tela 
indicam clicabilidade. 
Em algumas situações recomenda-se o uso de cores para diferenciar 
os links visitados e não visitado para que os usuários possam identificar os 
caminhos percorridos. 
Devido maturidade navegacional é aceitável usar várias cores em links, no 
entanto criou-se um estigma de que textos com a cor azul sejam links, por isso não 
devem ser usados em textos que não são links. 
Imagens que se assemelham a botões mas não são clicáveis devem ser evitadas.
Seção 9 - Estrutura Navegacional
Coloquem-se na seguinte situação: vocês gostariam de comprar um 
celular e fazem uma pesquisa no Google (a maioria das pessoas, algo em torno 
de 90%, começam a pesquisa pelo Google) sobre um determinado assunto, no 
Atenção! A estéƟ ca do link precisa ser associada à clicabilidade.
Atenção! Use a cor azul em textossomente para links
Hipertextos são 
um conjunto 
de elementos 
conectados que 
formam uma rede 
de informação. 
Estes elementos 
podem ser 
palavras, imagens, 
vídeos, áudio, 
documentos, etc. 
92
Comunicação Visual para Web - UNIGRAN
retorno de sua pesquisa você clica em um dos resultados e é jogado no meio de 
um site. Se na página em questão você conseguir responder as questões abaixo 
sem hesitações, com certeza esse site possui uma boa estrutura navegacional.
• que site é esse? (identificação do site)
• em qual página eu estou? (nome da página)
• quais as principais seções desta página (Seções)
• quais são as minhas opções neste nível? (navegação local)
• onde eu estou no esquema das coisas? (breacrumbs)
• como eu posso realizar uma pesquisa?
Caros alunos o conteúdo e os exemplos explanados estão focados no 
desenvolvimento de site, no entanto todas essa recomendações podem ser 
aplicadas no desenvolvimento de softwares, cabe a você utilizar o seu bom senso 
na aplicação desses conceitos e sempre colocar-se no lugar dos seus usuários. 
Retomando a conversa inicial
• Seção 1 - Usabilidade Aplicada à Navegação
A capacidade de se localizar em um site está focada em quatro áreas: 
navegação, menu, links e arquitetura da informação.
Sites mal estruturados tornam a navegação lenta desencorajando o usuário 
a utilizá-lo. Um site com bom design navegacional mostra aos usuários onde 
eles estão, onde as informações estão localizadas e como eles irão agir para 
conseguir o que precisam intuitivamente, concentrando-se apenas nas tarefas, 
sem se preocupar com a estrutura do site. 
• Seção 2 - Seções principais
As seções principais do website devem estar posicionadas nas áreas 
privilegiadas com maior visualização. Os rótulos das seções devem ser claros e 
Parece que estamos indo bem. Então, para encerrar esse tópico, 
vamos recordar:
Lembre-se: você pode ter desenvolvido um excelente soŌ ware, mas se os usuários 
não conseguirem uƟ lizá-lo de nada valerá seu trabalho.
93
Comunicação Visual para Web - UNIGRAN
persuasivos, pois o usuário só iniciará a navegação se as informações de destaque 
lhe despertarem o interesse. 
• Seção 3 - Menus de Navegação
Menus verticais: são indicados para sites que frequentemente precisam 
alterar a quantidade de tópicos, sem ajustes na diagramação do layout.
Menus horizontais: são indicados apenas para exibir informações fixas 
uma vez que a rolagem horizontal não é convencionalmente utilizada na Web. 
Diretrizes para elaboração de menus:
• classifique os tópicos;
• mantenha a mesma estrutura em todas as páginas; 
• evite cliques desnecessários; 
• utilize ícones apenas em menus pequenos;
• padronize esteticamente;
• organize de forma hierárquica;
• Seção 4 - Rótulos
Os rótulos devem conduzir a navegação informando aos usuários os 
principais assuntos que estão sendo abordados pelo canal online.
• Seção 5 - Ferramentas de Pesquisa
A ferramenta de pesquisa é um dos recursos mais utilizados para os 
usuários encontrarem o que estão procurando. A disponibilização dessa ferramenta 
é obrigatória em grandes portais que possuem mais de 200 páginas. 
Recomendações para aplicar nas ferramentas de pesquisa: 
- posicione o índice de pesquisa em um local visível da página. 
- a largura do campo de entrada de palavras-chaves deve ser configurado 
com um tamanho suficiente para atender a maioria das pesquisas.
- o botão para iniciar a pesquisa deve ter o rótulo visível e claro.
- utilize escopos para filtrar as pesquisas quando houver necessidade, a 
exemplo da livrarias que possibilitam pesquisas por : Auto/Titulo/Palavra-chave. 
Os resultados devem ser exibidos por ordem de relevância. 
- informe quantos resultados foram encontrados para que o usuário tenha 
noção da quantidade de conteúdos relacionados a sua pesquisa.
• Seção 6 - Breadcrumbs
Os Breadcrumbs descrevem o caminho que foi percorrido pelo usuário, 
orientando-o onde ele está, para onde pode ir ou voltar. 
94
Comunicação Visual para Web - UNIGRAN
• Seção 7 – Recursos Cromáticos
Os recursos cromáticos são importantíssimos para orientar o usuário 
durante a navegação, destacar informações e associado a semântica das cores 
agregar informações enriquecendo a navegação no website de forma intuitiva.
• Seção 8 – Links
Links são o principal recurso de navegação. Certifique-se de que os links 
estejam sinalizados claramente e os usuários possam perceber o que é clicável e 
o que não é. 
Sugestões de leituras
• Leituras:
TIDWELL, Jennifer. Designing interfaces. Editora: O'Reilly.
KALBACH, James. Designing Web Navigation. Editora: O'Reilly.
Obs.: Se ao fi nal desta aula Ɵ verem dúvidas, vocês poderão saná-
las através das ferramentas “fórum” ou “quadro de avisos” e 
“chat”. Ou ainda poderão enviar para o e-mail renata@unigran.br?
?
95