Sinalização: Ajudar os usuários a navegar pelo conteúdo
Navegar em informações desconhecidas na web requer ajudas.
Esses auxílios não têm uma agenda ou preconceito do jeito que a publicidade faz. Em vez disso, ajudas de navegação ajudam as pessoas a encontrar o caminho certo com base em seus interesses.
Sinalizações são um tipo de ajuda de navegação. Eles fornecem as informações de que as pessoas precisam para tomar suas próprias decisões enquanto pesquisam e navegam na web.
Deve um designer se preocupar com um site perdendo leitores? Muitos sites competem por atenção, atraindo audiências com ilustrações vibrantes, tipografia cativante e interfaces de usuário ricas.
Além de ser atraente, outros sites se esforçam para ser úteis. O objetivo da usabilidade não é chamar atenção, mas obter visitas repetidas. A publicidade perde os leitores, no sentido de direcioná-los para outros sites, enquanto a usabilidade diz respeito a garantir que eles não se percam.
Tal como os seus homólogos do mundo real, as “sinalizações” baseadas na Web são pistas visuais que guiam as pessoas através de novos territórios. No mundo físico, as pessoas confiam em marcos, mapas, sinalização e linhas de visão para encontrar o caminho através de um território desconhecido.
Online, passa-se por links descritivos, barras de navegação e títulos na página. Sinalizações reais e virtuais têm o mesmo propósito: ajudar as pessoas a encontrar o melhor caminho para o seu destino.
Hiperlinks são oportunidades negligenciadas
A web não funcionaria sem links. No entanto, visitantes e designers frequentemente descartam os links como eventos únicos. Clique, carregue e é isso. Mas a informação correta pode transformar hiperlinks simples em sinalização útil que leva os visitantes às informações que eles procuram.
Os hiperlinks são tão significativos quanto o texto clicável. Um link mal elaborado deixará as pessoas imaginando se o link vale um clique. As palavras dentro e ao redor de um link devem informar às pessoas o que o link fará (por exemplo, redirecioná-las para outra página ou site, baixar um arquivo, etc.) e o que faz com que deixar a página atual valha a pena.
- “ Clique aqui para procurar nossa coleção de histórias de detetives e crimes. ”
- “Navegue pela nossa coleção de detetive e Histórias de crime .
- “ Navegue pela nossa coleção de histórias de detetives e crimes .
Os exemplos acima parecem significar a mesma coisa, mas existem diferenças importantes:
- O primeiro exemplo usa a frase "clique aqui". A eficácia dessa frase há muito tempo debatido . Tanto o W3C e principais motores de busca afirmar que as palavras-chave nos links são mais úteis do que as frases genéricas. Ou seja, as pessoas que procuram por histórias de detetive são mais propensas a procurar por "detetive" do que por "clique aqui".
- O segundo exemplo obtém o maior número de links no menor número de palavras. Cada link por si só é menos específico do que “histórias de detetive”, mas pode ser mais apropriado dependendo de como o conteúdo dos sites vinculados é organizado.
- Há duas vantagens em um link como o do terceiro exemplo. Primeiro, o link tem palavras-chave, o que significa que não há dúvidas sobre o que leva. Em segundo lugar, sua área total clicável é maior; Pequenos links exigem mais precisão do visitante.
Design adiciona significado aos links
Infelizmente, pessoas avassaladoras com informações são possíveis. Por exemplo:
Algumas coisas para anotar:
- Nós movemos a maior parte do texto para o atributo "título". A maioria dos navegadores mostra o título apenas quando o usuário passa o cursor sobre o link, o que reduz a confusão na página.
- Nós saímos "Leia mais sobre" fora do link. Se remover frases como “clique aqui para…” e “veja mais…” depende do estilo da pessoa, mas em geral é melhor usar o mínimo de palavras-chave possível.
- Nos navegadores que suportam HTML5 e CSS3, o
relatributo indica o tipo de um link. Designers que usam Seletores de atributos CSS com aprovadorelvalores será capaz de estilo links de acordo com sua relevância. - Usamos um ícone para indicar que o link levará os usuários para outro website. Os ícones podem ser ambíguos, mas uma dica é melhor que nada.
Uma ressalva: evite repetir palavras do texto clicável no atributo de título. Se você não está dizendo aos seus leitores nada de novo, não faz sentido incluí-lo. Por exemplo…
Barras de Navegação Efetivas: Mais que a Soma de Seus Links
Qualquer link pode ser útil, mas a melhor orientação que um site oferece deve aparecer em sua barra de navegação.
Uma barra de navegação é uma lista de links para as principais partes de um site. As barras de navegação geralmente são colocadas na borda superior ou esquerda de todas as páginas de um site, e elas variam na aparência. Bares bem trabalhados fazem mais do que apenas fornecer links. Eles:
- Dê aos visitantes uma ideia do propósito e das prioridades do site.
- Servir como um mapa do site simplificado.
- Indique a localização da página atual dentro desse mapa.
- Diga aos visitantes onde eles já estiveram.
Mesmo que sejam magras, as barras de navegação merecem mais do que serem relegadas à margem de um layout. Uma barra de navegação ineficaz é vaga ou inútil e pode ter problemas como:
- Link de texto que pode ser encontrado em qualquer site. "Casa", "Sobre", "Serviços" e "Contato" podem ser precisos, mas esses títulos são genéricos demais para dar uma sensação de identidade ou propósito.
- Todos os links foram criados da mesma maneira. Em um site complexo, uma simples lista de links não é apenas inútil, é totalmente hostil.
- Links que apontam para as páginas erradas ou para páginas que não existem.
Mesmo que um visitante decida não clicar, o link ainda pode ser um sucesso. Digamos que um visitante queira o endereço de e-mail de uma empresa. A barra de navegação no site da empresa pode oferecer muitas opções:
Casa | Serviços | Sua conta | Serviços | História | Carreiras | Preços e políticas | Contato
A escolha óbvia é “contato”. E, obviamente, errados , os outros links dizem ao visitante para não clicar neles. Do ponto de vista de busca de conteúdo, esta barra de navegação está dizendo:
Não | Não | Não | Não | Não é provável | Talvez | Não | Provavelmente
Uma barra de navegação pode estar cheia de “não”? Certamente, se o site não tiver o que o usuário deseja. Boa navegação não é fornecer a resposta a qualquer custo. Ele simplesmente guia as pessoas para o conteúdo que elas querem com o mínimo de ambigüidade. O objetivo de uma barra de navegação efetiva é transformar tantos links “provavelmente” em links “sim” ou “não”.
Sinalização são ferramentas
Como todas as ferramentas, as sinalizações são um meio de criar soluções, mas não são soluções em si. O objetivo das sinalizações é simplificar para os leitores, não adicionar uma camada de complexidade.
Sinalizações baseadas na Web não devem atrair pessoas para seus destinos. Em vez disso, o designer deve informar às pessoas o que está disponível e capacitá-las a decidir para onde ir.
Escrito exclusivamente para Webdesigner Depot por Ben Gremillion. Ben é um web designer quem resolve problemas de comunicação com melhor design.
Como você torna o conteúdo mais fácil de navegar? Qual é o site mais difícil que você já teve que procurar? Compartilhe suas histórias na seção de comentários abaixo.