Styles et états des hyperliens

Soyons réalistes, le Web est très grand et il est très facile de s'y perdre ou d'oublier ce qu'on cherchait à l'origine (on s'est tous déjà retrouvé à regarder des vidéos de chats sur YouTube).

Soyons réalistes, le Web est très grand et il est très facile de s'y perdre ou d'oublier ce qu'on cherchait à l'origine (on s'est tous déjà retrouvé à regarder des vidéos de chats sur YouTube). La navigation des sites Web et applications est fondamentale pour plusieurs raisons :

  1. Accompagner vos clients vers le but final, c'est-à-dire acheter votre produit
  2. Aider vos clients à trouver les informations souhaitées



Les hyperliens sont des éléments clés pour une expérience utilisateur réussie. Ils permettent d'indiquer au visiteur ce qu'il a déjà consulté, ce qu'il lui reste à consulter et, chose importante pour les pages Web chargées, ce sur quoi il clique. Les hyperliens sont polyvalents, c'est pourquoi vous ne devez pas négliger l'utilisation d'états et de styles différents selon les états.

Les états des hyperliens

Il existe quatre états différents : normal, visité, sensitif et actif. Cet article se concentrera sur les états normal, visité et sensitif, qui sont les plus courants et, selon moi, les plus importants.

État normal

La plupart des liens que l'utilisateur rencontre sur le Web présentent un « état normal ». Cet état décrit les liens des pages Web que l'utilisateur n'a pas encore consultées. Ces liens étant particulièrement abondants, il est important de bien en définir le style.

Ils doivent ressortir par rapport au reste du contenu de la page et le style doit être cohérent sur l'intégralité du site Web. Autrement dit, ne changez pas la couleur des liens d'une page à l'autre.

Par défaut, les navigateurs affichent les liens présentant un état normal en bleu et soulignés, conformément à la convention employée depuis la création du Web, il y a plus de 20 ans.

État visité

Rien de plus agaçant que de cliquer sur un lien pour arriver sur une page que l'on a déjà consultée. L'utilisation d'un style différent pour cet état permet aux visiteurs d'identifier les pages déjà consultées. L'état visité indique les liens sur lesquels ils ont déjà cliqué.

Pour différencier cet état de l'état normal, les concepteurs ont généralement recours à une variation de couleur ou à une couleur moins éclatante. Le style de ces liens doit être similaire à celui des liens dont l'état est normal ; une légère modification suffit.

État sensitif

Les pages Web encombrées ou désordonnées ont un mauvais impact sur l'expérience utilisateur et doivent être évitées dans la mesure du possible. Pour cela, vous pouvez utiliser un état sensitif indiquant à l'utilisateur le lien qu'il est en train de survoler.

Parmi les styles courants pour l'état sensitif, nous avons le soulignage du lien (ou la suppression du soulignage si l'état normal est souligné), le changement de la couleur du texte ou le changement de la couleur en arrière-plan.

Remarques

Veuillez noter que je n'ai pas parlé de modifier la taille de police des liens dans cet article. Cette pratique ne fait pas partie des conventions et très peu de créateurs de sites Web l'utilisent pour différencier les états des liens. La différence entre les états doit être légère ; ne changez pas trop les styles d'un état à l'autre.