Les liens hypertextes

Un doigt humain sur un smartphone, c’est un peu comme un éléphant qui joue à la marelle. Faut pas trop lui demander !

Le doigt est moins précis que le curseur de la souris. Les zones de clic doivent donc être suffisamment généreuses pour accueillir un clic confortable. Concrètement, la zone de clic devrait atteindre 1 cm x 1 cm au minimum.

Confort de la zone de clic

Vous éviterez de trop rapprocher les éléments cliquables afin de limiter le risque d’erreur d’un utilisateur qui clique sur le mauvais contenu, trop voisin. Ce phénomène est connu des ergonomes sous le nom de fat finger syndrome (littéralement : le « syndrome du gros doigt »).

Ci-dessous, sur le site officiel de la commune d’Ixelles en Belgique, les textes cliquables sont trop petits et trop rapprochés. L’utilisateur doit fournir un trop grand effort de précision et le risque d’erreur de clic est bien réel.

Source : ixelles.be
© image : yellowdolphins.com

Les utilisateurs d’interfaces tactiles cliquent facilement sur un élément par inadvertance. Pour éviter les interactions malencontreuses, rendez les liens très explicites, en leur attribuant une couleur très repérable, éventuellement dédoublée par le soulignement.

Liens dans le corps de texte

Sur un site web classique, il est déjà déconseillé d’abuser de liens dans le corps de texte, car ils constituent des digressions à la lecture et dispersent la navigation. Regrouper les liens utiles dans le prolongement d’un article reste souvent préférable.

Sur les mobiles, nous déconseillons doublement les liens dispersés dans le texte, pour les motifs suivants :

1. Les liens hypertextes sont moins confortables que les boutons. Ils obligent souvent les utilisateurs à zoomer pour cliquer.
2. Les interfaces tactiles amènent les utilisateurs à balayer l’écran pour faire défiler la page (scrolling tactile). La présence de liens au sein du texte constitue un piège : l’utilisateur clique parfois sur un lien et se voit parachuté sur une autre page, alors qu’il désirait simplement faire défiler la page.

Observez un paramètre qui améliore la lecture et l’interaction : l’interligne. Dans l’exemple de gauche, Wikipedia place de nombreux liens cliquables dans le corps de texte, mais l’espace entre chaque ligne de texte est confortable. Dans l’exemple de droite, sur le site web des Grottes de Han, le texte est plus serré. Résultat les zones de clic rentrent davantage en conflit.

Sources (de gauche à droite) : wikipedia.org et grotte-de-han.be – 16 août 2018

Si vous décidez tout de même d’inclure des liens dans le corps de texte, évitez que ces liens soient trop contigus. Un bon rédacteur web sera conscient de ce problème et trouvera des solutions pour espacer les liens au sein du texte dans la mesure du possible. Par exemple en rajoutant un saut de ligne ou en utilisant une liste à puce.

Liens qui déclenchent le téléphone

En langage HTML, vous avez une syntaxe très simple pour déclencher un appel téléphonique ou envoyer un texto, en un clic. Elle épargne beaucoup d’énergie à l’utilisateur qui désire vous contacter.

Lien « téléphone » :

<a href ="tel:+33711223344">Appelez-nous !</a>

Lien « texto » :

<a href ="sms:+33711223344">Cliquez ici pour envoyer un SMS</a>

Il est important d’inclure le préfixe international si vous désirez que les personnes puissent vous contacter facilement de l’étranger.

>> REVENIR AU SOMMAIRE DU DOSSIER <<
Rédiger pour les mobiles (12 bonnes pratiques)