Links

Observação

Este guia de design foi criado para o Windows 7 e não foi atualizado para versões mais recentes do Windows. Grande parte das diretrizes ainda se aplica em princípio, mas a apresentação e os exemplos não refletem nossas diretrizes de design atuais.

Com um link, os usuários podem navegar até outra página, janela ou tópico da Ajuda; exibir uma definição; iniciar um comando; ou escolha uma opção. Um link é um texto ou um gráfico que indica que ele pode ser clicado, normalmente sendo exibido usando as cores visitadas ou não visitadas do sistema de links. Tradicionalmente, os links também são sublinhados, mas essa abordagem geralmente é desnecessária e está caindo fora de favor para reduzir a desordem visual.

Quando os usuários focalizam um link, o texto do link aparece como sublinhado (se ainda não estava) e a forma do ponteiro muda para uma mão.

Um link de texto é o controle clicável de peso mais leve e geralmente é usado para reduzir a complexidade visual de um design.

Observação

Diretrizes relacionadas a links de comando e layout são apresentadas em artigos separados.

Esse é o controle correto?

Para decidir, considere estas perguntas:

• É o link usado para navegar até outra página, janela ou tópico da Ajuda; exibir uma definição; iniciar um comando; ou escolher uma opção? Se não, use outro controle.
• Um botão de comando seria uma opção melhor? Use um botão de comando se:
  • O controle inicia uma ação imediata, incluindo a exibição de uma janela, e esse comando está relacionado à finalidade primária da janela.
  • Uma janela é exibida para coletar entradas ou fazer escolhas, mesmo que para um comando secundário.
  • O rótulo é curto, consistindo em quatro ou menos palavras, evitando assim a aparência estranha de botões longos.
  • O comando não está embutido.
  • O controle aparece dentro de um grupo de outros botões de comando relacionados.
  • A ação é destrutiva ou irreversível. Como os usuários associam links à navegação (e à capacidade de recuar), os links não são apropriados para comandos com consequências significativas.
  • Da mesma forma, em um assistente ou fluxo de tarefas, o comando representa o compromisso. Nessas janelas, os botões de comando sugerem compromisso, enquanto os links sugerem navegar para a próxima etapa.

Conceitos de design

Tornando os links reconhecíveis

Os links não têm funcionalidade, o que significa que suas propriedades visuais não sugerem como eles são usados e são compreendidos apenas por meio da experiência. Os links sem um sublinhado e as cores do sistema de link aparecem como texto normal; a única maneira de verificar seu comportamento é a partir de sua apresentação, seu contexto ou posicionando o ponteiro sobre eles.

Surpreendentemente, essa falta de funcionalidade geralmente é uma motivação para o uso de links porque eles parecem tão leves, reduzindo assim a complexidade visual de um design. Os links eliminam o quadro visualmente pesado usado pelos botões de comando e pela borda usada por outros controles. Por exemplo, embora você possa usar botões de comando para tornar os comandos primários óbvios, você pode escolher links para comandos secundários para desenfatizá-los.

O desafio é então manter pistas visuais suficientes para que os usuários possam reconhecer os links. A diretriz fundamental é que os usuários devem ser capazes de reconhecer links apenas por inspeção visual, eles não devem ter que passar o mouse sobre um objeto ou clicar nele para determinar se ele é um link.

Os usuários poderão reconhecer um link apenas por inspeção visual se o link usar as cores do sistema de link e pelo menos uma das seguintes pistas visuais:

• Texto sublinhado.
• Um gráfico ou marcador, como com o texto com padrão de link de ícone.
• Posicionamento em um local padrão de navegação, opção ou comando, como a área de conteúdo de uma janela ou em uma barra de navegação, barra de menus, barra de ferramentas ou rodapé de página.

Os usuários também podem reconhecer um link por inspeção visual com as seguintes pistas visuais, mas essas pistas não são suficientes por si só:

• Texto que sugere clicar, como um comando começando com um verbo imperativo como Mostrar, Imprimir, Copiar ou Excluir.
• Posicionamento dentro de um bloco de texto normal.

É claro que os usuários sempre podem determinar um link por meio da interação passando o mouse ou clicando. Se a descoberta de um link não for necessária para tarefas significativas, você poderá desenfatizar esses links.

Neste exemplo, Fale conosco, Termos de Uso, Marcas Comerciais e Política de Privacidade são links. Eles são intencionalmente desacentados porque não são necessários para nenhuma tarefa importante. As únicas pistas de que eles são links são de que eles têm um ponteiro do mouse ao passar o mouse e são posicionados em uma área de navegação padrão na parte inferior da janela.

Tornando os links específicos, relevantes e previsíveis

O texto do link deve indicar o resultado de clicar no link.

Links específicos são mais atraentes para os usuários do que links gerais, portanto, use rótulos de link que fornecem informações descritivas específicas sobre o resultado de clicar no link. No entanto, certifique-se de que o texto do link não seja tão específico que seja enganoso e desestimule o uso adequado.

Links concisos são mais propensos a serem lidos do que links detalhados. Eliminar texto e detalhes desnecessários. Os rótulos de link não precisam ser abrangentes.

Para avaliar o texto do link:

• Verifique se o texto do link reflete os cenários aos quais o link dá suporte.
• Verifique se os resultados do link são previsíveis. Os usuários não devem se surpreender com os resultados.

Se você fizer apenas duas coisas...

1. Torne os links detectáveis apenas pela inspeção visual. Os usuários não devem ter que interagir com seu programa para encontrar links.

2. Use links que fornecem informações descritivas específicas sobre o resultado de clicar no link, usando o máximo de texto necessário. Os usuários devem ser capazes de prever com precisão o resultado de um link de seu texto de link e dica de informações opcional.

Padrões de uso

Os links têm vários padrões funcionais:

Uso	Exemplo
Links de navegação Um link usado para navegar até outra página ou janela.	Clicar no link navega no local para outra página, como em uma janela ou assistente do navegador; ou exibe uma nova janela. Ao contrário dos links de tarefa, a navegação não inicia uma tarefa, mas simplesmente navega para outro local ou prossegue com uma tarefa já em andamento. A navegação implica segurança porque o usuário sempre pode voltar. Notícias Neste exemplo, clicar no link navega até a página Manchetes de notícias.
Links de tarefa Um link usado para iniciar um novo comando.	Clicar no link executa um comando imediatamente ou exibe uma caixa de diálogo ou uma página para coletar mais entradas. Ao contrário dos links de navegação, os links de tarefa iniciam uma nova tarefa em vez de continuar com uma tarefa existente. As tarefas não implicam que os safetyusers não podem reverter ao estado anterior com um comando Back. Links de tarefa são chamados para evitar confusão com links de comando. Logon Neste exemplo, clicar no link inicia um comando de logon.
Links de ajuda Um link de texto usado para exibir um tópico da Ajuda.	Clicar no link exibe um artigo da Ajuda em uma janela separada. O que é uma senha forte? Neste exemplo, clicar no link exibe uma janela ajuda com o tópico fornecido.
Links de definição um link de texto usado para exibir uma definição em uma dica de informação quando o usuário clica ou passa o mouse sobre o link.	esse padrão é útil para definir termos que podem não ser conhecidos por seus usuários sem adicionar desordem de tela. Neste exemplo, a definição de dica de informação é exibida.
Links de menu um conjunto de links de tarefa usados para criar um menu.	porque o contexto do menu indica um conjunto de links, o texto geralmente não é sublinhado (exceto ao passar o mouse) e pode não usar as cores do sistema de links. Neste exemplo, um conjunto de links cria um menu.
Links de opção uma opção selecionada ou seu espaço reservado, em que clicar no link invoca um comando para alterar essa opção.	ao contrário dos links de texto regulares, o link altera seu texto para refletir a opção selecionada no momento e é sempre desenhado usando a cor do link não supervisionado. o exemplo à esquerda mostra uma regra do assistente de regras do Microsoft Outlook com opções de espaço reservado. depois que os usuários clicam nos links e selecionam algumas opções, o exemplo à direita atualiza o texto do link para mostrar os resultados. usar links de opção é particularmente adequado se as opções tiverem um formato variável. o exemplo à direita mostra que as regras do Outlook têm um formato variável. O exemplo à esquerda mostra um link de opção. Ela se torna uma lista suspensa quando selecionada, conforme mostrado à direita.

Os links também têm vários padrões de apresentação:

Uso	Exemplo
Links de texto sem formatação consistem apenas em texto.	esta apresentação é a mais flexível porque pode ser usada em qualquer lugar, incluindo embutido. Neste exemplo, a cor do texto identifica claramente um link embutido.
Texto com links de ícone texto com um ícone anterior que indica sua função.	como o gráfico fornece uma indicação visual adicional de um link, é mais fácil reconhecer como um link do que um link de texto sem formatação que não está sublinhado. esse padrão normalmente usa um ícone de 16 x 16 pixels. neste exemplo, os ícones fornecem uma indicação visual adicional de um link. Neste exemplo, o símbolo de reprodução triangular padrão indica que esse texto é um comando.
Links somente gráficos consistem apenas em um gráfico.	dada a falta de um link de texto, não há nenhuma cor de link ou sublinhado para indicar o link. esses links dependem do design gráfico para sugerir cliques ou texto dentro do gráfico que sugere uma ação quando os usuários clicam. às vezes, os links somente gráficos têm um efeito sobre o mouse para indicar o link. essa abordagem ajuda, mas não é detectável apenas pela inspeção visual. Neste exemplo, o link não é detectável apenas pela inspeção visual. Devido a seus possíveis problemas de reconhecimento e localização, os links somente gráficos não são recomendados como a única maneira de executar uma tarefa.

Diretrizes

Interação

• Exiba um ponteiro ocupado se o resultado de clicar em um link não for instantâneo. Sem comentários, os usuários podem assumir que o clique não aconteceu e clicar novamente.

Cor

• Use o tema ou vincule as cores do sistema para links visitados e não supervisionados. O significado dessas cores é consistente em todos os programas. Se, por algum motivo, os usuários não gostarem dessas cores (talvez por motivos de acessibilidade), eles mesmos poderão alterá-las.

• Para links de navegação, use cores diferentes para links visitados e não supervisionados. Mantenha o histórico de links visitados somente durante a instância do programa. A cor visitada é importante para indicar onde os usuários já estiveram, impedindo-os de revisitar acidentalmente as mesmas páginas repetidamente.

• Para outros tipos de links, não use a cor do link visitado. Não há valor suficiente na identificação de comandos "visitados", por exemplo.

• Não colora o texto que não é um link porque os usuários podem assumir que ele é um link. Use negrito ou um tom de cinza em que, de outra forma, você usaria texto colorido.

• Exceção: você poderá usar texto colorido se todos os links forem sublinhados ou colocados em locais de comando ou navegação padrão.

  Incorreto:

  

  Neste exemplo, o texto azul é usado incorretamente para texto que não é um link.

• Use cores de plano de fundo que contrastam com as cores do link. A cor do sistema de janela é sempre uma boa opção.

  Incorreto:

  

  Neste exemplo, a cor da tela de fundo fornece baixo contraste com a cor do link.

Sublinhando

• Para links necessários para executar uma tarefa principal, forneça pistas visuais para que os usuários possam reconhecer links apenas por inspeção visual. Essas pistas incluem sublinhados, gráficos ou marcadores e locais de link padrão. Os usuários não devem ter que passar o mouse sobre um objeto ou tentar clicar nele para determinar se ele é um link. Use texto sublinhado se o link não for óbvio em seu contexto.
• Não sublinhar o texto que não é um link porque os usuários podem assumir que ele é um link. Use itálico em que, de outra forma, você usaria texto sublinhado. Reserve o sublinhado apenas para links.
• Ao imprimir, não imprima sublinhados ou cores de link. Os links impressos não têm valor e são potencialmente confusos.

Texto com links de ícone

• Use o ícone de seta somente para links de comando. Os links regulares não devem usar o ícone de seta, a menos que estejam sendo usados como um substituto para links de comando no Windows XP.
• Coloque o ícone à esquerda do texto. O ícone precisa levar ao texto visualmente.

Correto:

Incorreto:

No exemplo incorreto, o ícone não leva ao texto.

• Torne o resultado de clicar no ícone da mesma forma que clicar no texto. Fazer o contrário seria inesperado e confuso.

Links somente gráficos

• Não use links somente gráficos. Os usuários têm dificuldade em reconhecê-los como links e qualquer texto dentro do gráfico (usado para indicar sua ação quando clicado) cria um problema de localização.

Links de navegação

• Verifique se os links de navegação não exigem compromisso. Os usuários sempre poderão retornar ao estado inicial usando Voltar para navegação insubstituível ou Cancelar para fechar uma nova janela.

• Link para conteúdo específico em vez de conteúdo geral. Por exemplo, é melhor vincular à seção relevante de um documento do que vincular ao início.

• Use um link somente se o material vinculado for relevante, útil e não redundante. Usar contenção em links de navegação não os usa apenas porque você pode.

• Se um link navegar para um site externo, coloque a URL na dica de informações para que os usuários possam determinar o destino do link.

• Vincule apenas a primeira ocorrência do texto do link. Links redundantes são desnecessários e podem dificultar a leitura do texto.

  Correto:

  A pasta Imagens facilita o compartilhamento de suas imagens. Você pode usar as tarefas em Imagens para enviar suas imagens por email ou publicá-las em um local seguro e privado na Web. Você também pode imprimir suas imagens diretamente da pasta Imagens.

  Incorreto:

  A pasta Imagens facilita o compartilhamento de suas imagens. Você pode usar as tarefas em Imagens para enviar suas imagens por email ou publicá-las em um local seguro e privado na Web. Você também pode imprimir suas imagens diretamente da pasta Imagens.

  No exemplo correto, apenas a primeira ocorrência do texto relevante está vinculada.

  Exceções:

  • Se uma instrução tiver um link, coloque o link na instrução .

    Usar senhas fortes é muito importante. Para obter mais informações, consulte Senhas seguras.

    Neste exemplo, o link está na instrução em vez da primeira ocorrência.

  • Vincule-se a ocorrências posteriores se elas estiverem longe da primeira. Por exemplo, você pode vincular redundantemente em seções diferentes em um tópico da Ajuda.

Links de tarefa

• Use links de tarefa para comandos que não são destrutivos ou são facilmente reversíveis. Como os usuários associam links à navegação (e à capacidade de fazer backup), os links não são apropriados para comandos com consequências significativas. Comandos que exibem uma caixa de diálogo ou uma confirmação são uma boa opção.

  Correto:

  Iniciar

  Stop

  Incorreto:

  Excluir arquivo

  No exemplo incorreto, o comando é destrutivo.

Links de menu

• Agrupar links de navegação e tarefa relacionados a menus. Um menu de links relacionados colocados em um local de comando ou navegação padrão torna mais fácil localizar e entender os links do que quando eles são colocados separadamente.

• Para menus dependentes de seleção, remova links de menu que não se aplicam. Não os desabilite. Isso elimina a desordem e os usuários não perderão links que exigem seleção.

• Para menus independentes de seleção, desabilite os links de menu que não se aplicam. Não os remova. Isso torna os menus mais estáveis e esses links mais fáceis de encontrar.

  

  Neste exemplo de Windows Update, uma atualização está sendo executada, portanto, o comando Verificar atualizações está desabilitado em vez de removido.

Dicas de informações de link

• Se um link exigir mais explicações, forneça a explicação em uma explicação complementar em um controle de texto separado ou umadica de informações, mas não em ambos. Use frases completas e pontuação final. Fornecer ambos será desnecessário se o texto for o mesmo e confuso se o texto for diferente.

  

  Neste exemplo, uma explicação complementar fornece mais informações sobre o link.

  

  Neste exemplo, uma dica de informações fornece mais informações.

• Não forneça uma dica de informação que seja apenas uma reformulação do texto do link.

  Incorreto:

  

  Neste exemplo, a dica de informações corre o risco de irritar os usuários por sua repetição.

Texto

• Não atribua uma chave de acesso. Os links são acessados usando a tecla Tab.

• Use links que fornecem informações descritivas específicas sobre o resultado do clique no link, usando o máximo de texto necessário. O texto do link deve indicar o resultado de clicar no link. Os usuários devem ser capazes de prever com precisão o resultado de um link de seu texto de link e dica de informações opcional.

  Incorreto:

  

  Neste exemplo, embora o link pareça importante, seu rótulo é muito geral. Os usuários têm maior probabilidade de clicar em um link mais específico.

• Para links embutidos:

  • Preservar a capitalização e a pontuação do texto.

  • Não inclua pontuação final no link, a menos que o texto seja uma pergunta.

  • Vincule a parte mais relevante do texto e escolha o texto do link que é grande o suficiente para ser fácil de clicar.

    Correto:

    Vá para um grupo de notícias.

    Incorreto:

    Vá para um grupo de notícias.

    Nesses exemplos, "Go" não é a parte mais relevante do texto e não é grande o suficiente para fazer um bom destino de clique, enquanto "newsgroup" é.

  • Evite colocar dois links embutidos diferentes um ao lado do outro. É provável que os usuários acreditem que são um único link.

    Incorreto:

    Para obter mais informações, consulte Diretrizes de UX.

    Neste exemplo, "UX" e "diretrizes" são dois links diferentes.

• Para links independentes (não embutidos):

  • Use maiúsculas no estilo de frase.
  • Não use a pontuação final, a menos que o link seja uma pergunta.
  • Use todo o texto como o link.

• Use links que são claramente diferenciados dos outros links na tela. Os usuários devem ser capazes de prever e diferenciar com precisão entre destinos de link.

  Incorreto:

  Localizar software antivírus

  Obter software antivírus

  Correto:

  Como saber se o software antivírus está instalado

  Instalar um software antivírus

  No exemplo incorreto, a distinção entre os dois links não está clara.

• Não adicione Clique ou Clique aqui no texto do link. Não é necessário porque um link implica clicar. Além disso, clique aqui e aqui sozinho não transmita informações sobre o link quando lido por um leitor de tela.

  Incorreto:

  Clique aqui para obter a descrição.

  Correto:

  Descrição

  Nos exemplos incorretos, "clique aqui" fica sem dizer e não transmite nenhuma informação sobre o link.

Links de navegação

• Inicie o link com um substantivo e descreva claramente para onde o link será clicado. Não use pontuação final. Às vezes, talvez seja necessário iniciar links de navegação com um verbo, mas não use verbos que reiteram a navegação que já está implícita pelo fato de vincular, como Exibir, Abrir ou Ir para.

• Apresente um link de navegação como uma URL se ele navegar para uma página da Web e você espera que os usuários de destino lembrem da URL e digitem-na em um navegador. Se possível, crie essas URLs para serem curtas e fáceis de lembrar.

• Se o link incluir uma URL para um site começando com "www", omita o nome do protocolo https:// e use texto em letras minúsculas.

  Incorreto:

  https://www.microsoft.com

  www.microsoft.com

  Correto:

  microsoft.com

  Nos exemplos incorretos, os "https://" e "www" ficam sem dizer.

Links de tarefa

• Inicie o link com um verbo imperativo e descreva claramente a tarefa que o link executa. Não use pontuação final.

• Termine o link com reticências se o comando precisar de informações adicionais (incluindo uma confirmação) para conclusão bem-sucedida. Não use reticências quando a conclusão bem-sucedida da tarefa for exibir outra janela somente quando forem necessárias informações adicionais para executar a tarefa.

  Imprimir...

  Neste exemplo, o botão Imprimir... O link do comando exibe uma caixa de diálogo Imprimir para coletar mais informações.

  Imprimir

  Por outro lado, neste exemplo, um link de comando Imprimir imprime uma única cópia de um documento para a impressora padrão sem qualquer interação adicional do usuário.

  O uso adequado de reticências é importante para indicar que os usuários podem fazer outras escolhas antes de executar a tarefa ou podem cancelar totalmente a tarefa. A indicação visual oferecida por reticências permite que os usuários explorem seu software sem medo.

• Se necessário, encerre um link de tarefa com "agora" para distingui-lo de um link de navegação.

  Baixar arquivos

  Baixar arquivos agora

  Neste exemplo, "Baixar arquivos" navega até uma página para baixar arquivos, enquanto "Baixar arquivos agora" realmente executa o comando.

Links de ajuda

Para obter diretrizes e exemplos, consulte Ajuda.

Dicas de informações de link

• Use frases completas e pontuação final.

Para obter mais diretrizes e exemplos, consulte Dicas de ferramentas e dicas de informações.

Documentação

Ao se referir a links:

• Use o texto exato do link, incluindo sua capitalização, mas não inclua as reticências.
• Para descrever a interação do usuário, use clique.
• Quando possível, formate o texto do link usando texto em negrito. Caso contrário, coloque o texto do link entre aspas somente se necessário para evitar confusão.

Exemplo: para iniciar a verificação, clique em Examinar um computador.