O problema de sublinhar links
Aqui é onde o design do hiperlink fica um pouco simples .
Aqui é onde nossa convenção de sublinhar links falha. Há um estudo que mostra que a legibilidade diminui quando sublinhamos o texto em nossos hiperlinks. O estudo diz que os links sublinhados têm “ efeitos seriamente subestimados na usabilidade das páginas da Web. ” O estudo relata que nossa convenção atual de sublinhar hiperlinks “ pode reduzir significativamente a legibilidade do texto. ” Os pesquisadores chegam a dizer que “ as alternativas devem ser cuidadosamente consideradas para o design de futuros navegadores da Web. ” Essencialmente, os pesquisadores estão dizendo que nossas convenções atuais para hiperlinks, texto sublinhado, devem ser alteradas sistematicamente.
A razão pela qual os hiperlinks sublinhados reduzem a legibilidade é que certos caracteres que ficam abaixo da linha de base, caracteres com descendentes estendendo-se abaixo do sublinhado, como p, g, j e q, estão sendo afetados pelo text-decoration: underlinevalor da propriedade CSS.
Qual é a solução para este problema de legibilidade?
Podemos corrigir esse problema de legibilidade por conta própria. Não precisamos esperar por uma mudança na forma como os navegadores da Web renderizam o texto sublinhado por padrão.
Como? Podemos usar a border-bottompropriedade CSS em vez da text-decorationpropriedade CSS para sublinhar nossos elementos de hiperlink. O uso da border-bottompropriedade pode colocar o sublinhado alguns pixels abaixo dos caracteres afetados, facilitando a leitura do hiperlink.
Aqui está o CSS em questão:
a { text-decoration: none; fundo de preenchimento: 3px; borda inferior: azul sólido de 1px; }
Ainda mais poderoso do que apenas corrigir um problema de legibilidade, também podemos controlar o estilo do sublinhado independentemente da cor do texto do hiperlink, dissociando esses dois componentes de um hiperlink. Por exemplo, podemos reduzir a distinção do sublinhado do hiperlink para tornar o texto mais legível, ou podemos torná-lo mais distinto para destacar todo o design do hiperlink.
CSS:
a { text-decoration: none; fundo de preenchimento: 1px; borda inferior: 1px sólido #8
Tornar o texto do hiperlink mais longo
Este próximo conceito que vou discutir vai um pouco no território da estratégia de conteúdo (que é uma grande parte do processo de web design ).
Alguns de vocês podem não gostar dessa sugestão porque ela lida com o processo de criação de conteúdo, e alguns de vocês podem não ter controle sobre essa parte do processo de desenvolvimento web. A base para esta próxima dica que vou compartilhar é a Lei de Fitts . O conceito da Lei de Fitts é simples.
A lei afirma que quanto maior algo é, mais fácil é ver e interagir. Isso faz sentido, especialmente no contexto de dispositivos de tela sensível ao toque, onde o tamanho de seus elementos é importante, onde o dispositivo de entrada (nossos dedos) é menos preciso que o ponteiro do mouse. Usar um dedo para clicar em um hiperlink pode ser uma dor; muitas vezes você terá que aumentar o zoom para links pequenos, adicionando uma barreira adicional para os usuários obterem a ação que desejam (que é interagir com o hiperlink). Mas não há muito o que fazer com o estilo de nossos links.
Podemos negrito-los, sublinhá-los, mudar sua cor. Que tal torná-los maiores alterando o tamanho da fonte? Se alterarmos a propriedade <a>do elemento font-size, isso afetará o fluxo de leitura e poderá afetar a consistência de nossas alturas de linha.
Veja como a continuidade da experiência de leitura é interrompida pelo aumento do tamanho da fonte dos hiperlinks. Portanto, não podemos expandi-los verticalmente. Precisaremos expandi-los horizontalmente.