Jetez l’ancre !

J’ai eu une discussion fort intéressante avec Jean-Marc sur l’utilisation des ancres. Pour rappel, une ancre est un lien pointant vers un point précis sur la page active ou une autre. Elle convient pour un article assez long, une FAQ, une liste de définitions… Placée en début, elle permet d’accéder rapidement à un chapitre. Un bouton top se trouve généralement au bas du chapitre pour remonter au sommaire. Petit truc, le signe # a pour effet de rafraîchir la page et donc de positionner la page tout au début.

Jean-Marc exploite très bien ce principe. Sur cet article, le haut de page présente d’emblée un sommaire interactif et permet une vue d’ensemble des sujets traités. Un clic envoie directement au chapitre concerné. On peut regretter de ne pas avoir un lien de retour vers le sommaire ce qui permettrait un aller-retour plus efficace.

Personnellement, je trouve ce système très peu intuitif pour les débutants et peu efficace, voire désagréable, pour les habitués. Très peu intuitif parce que le quidam clique sur un lien et s’attend à avoir une nouvelle page. L’effet entre le clic et l’affichage de la page est brutal et il ne perçoit pas nécessairement qu’il s’est simplement déplacé plus bas dans la page. Certains, comme Stephane Thomas, ont opté pour un défilement doux. On comprend tout de suite où on se situe.

Pour ma part, j’ai pris l’habitude d’ouvrir les liens dans un nouvel onglet en arrière-plan. Ça me permet de continuer la lecture sans être perturbé par des liens connexes. Dans le cas d’un sommaire, aucune distinction n’est faite entre un lien hypertexte et un lien d’ancrage. Du coup, l’ancre perd tout son intérêt.

Dernier inconvénient, les dernières ancres peuvent renvoyer vers le même affichage écran si les chapitres ne sont pas suffisamment espacés entre eux. Dans l’exemple, les trois dernières ancres mènent toutes au même résultat. Pas très efficace.

Une alternative aux ancres c’est d’utiliser un découpage de l’article en plusieurs pages. Les avantages sont multiples: des pages plus courtes donc plus légères, moins de scroll, un contenu bref et court encourage à lire, avec au final un meilleur référencement.

Jean-Marc me fait remarquer que cette découpe ne permet pas une vue d’ensemble de l’article. Le comportement des utilisateurs a évolué et ils ne sont plus aussi réticents au scroll. Autres inconvénients: l’impression, la recherche ou l’enregistrement dans tout l’article sont plus difficiles. Enfin, le morcellement peut nuire à la convivialité.

Publicités

Grille d’analyse d’un site web

Cette grille d’analyse reprend des critères à vérifier avant, pendant ou après l’élaboration d’un site. Elle peut également servir à repérer les points forts et les points faibles des sites concurrents. Pour une étude plus approfondie, je vous conseille de vous baser sur les bonnes pratiques d’Opquast.

Lisibilité & design

  • la page d’accueil donne envie de continuer; la première impression est bonne
  • les dimensions de page sont adaptées à la lecture à l’écran
  • le texte est facilement lisible: contraste, couleur, choix de la police…
  • le design est simple, sans surcharge, les éléments importants sont mis en valeur
  • la charte graphique est homogène sur chaque page
  • le site a une identité visuelle propre

Ergonomie

  • le site utilise une adresse web facile à retenir
  • le site est logiquement organisé
  • les pages s’affichent en conservant une cohérence graphique
  • le site de plus de 20 pages propose un plan
  • le site dispose d’un moteur de recherche interne si les pages sont nombreuses
  • le visiteur peut facilement se retrouver dans la navigation: fil d’Ariane, lien actif différencié et mis en évidence…
  • les liens sont clairement identifiés, explicités et homogènes tout au long du site
  • les liens externes vers une langue étrangère sont précisés
  • toutes les pages et services sont fonctionnels (pas de page « en construction »)
  • l’intégration multimédia (vidéo, animation) s’affiche correctement et sans difficulté
  • le format et la taille des fichiers à télécharger est affiché
  • les messages d’erreurs sont ciblés et des alternatives sont proposés

Utilité & contenu

  • le site fournit à l’utilisateur une information utile, qui répond à son besoin
  • le contenu est riche et sera sans doute revisité
  • le contenu réalise bien les objectifs du site
  • le style d’écriture est adapté au média web (concis et efficace)
  • bonne utilisation des médias intégrés (graphiques, sons, vidéos…): chacun sert un but précis et apporte une contribution significative au site
  • il y a des liens pour des ressources additionnelles

Crédibilité

  • les informations de l’auteur apparaissent clairement et sont valides: e-mail, téléphone, adresse postale, photo de l’auteur ou des employés
  • les informations sur la société sont accessibles: plan d’accès, heures d’ouverture, photo du bâtiment
  • le style d’écriture est clair, direct et sincère
  • les fautes d’orthographe, de grammaire ou de style sont inexistantes
  • les sources et références sont toujours citées
  • le contenu est mis régulièrement à jour
  • les liens externes sont crédibles et vérifiés régulièrement
  • les actualités, les articles sont datés (année, mois, jour)
  • le site possède un nom de domaine
  • l’usage de la publicité est discret et clairement identifiable
  • le visuel du site est pro et inspire la confiance
  • la vente d’articles en ligne est sécurisée (généralement https)
  • les sites d’e-commerce se plient à la réglementation
  • le site a-t-il reçu un prix, une récompense
  • quelles sont les références, sont-elles des sociétés importantes
  • d’autres sites respectables ou des magazines ont-ils parler de vous favorablement

Réactivité

  • la page web s’affiche rapidement (moins de 10 secondes)
  • le poids des éléments graphiques est optimisé, ils se chargent rapidement
  • utilisation des vignettes pour les grandes photos
  • utilisation du streaming pour les éléments multimédias
  • une alternative « bas débit » est offerte s’il y a des médias lourds

Visibilité & référencement

  • le site n’utilise pas de système de cadre (frame)
  • les pages ont chacune leur titre et leurs mots clés
  • compatibilité avec les principaux navigateurs et les systèmes d’exploitation

Standards & accessibilité

  • le site passe la validation HTML, XHTML, CSS
  • le doctype est approprié, la langue précisée…
  • les images contiennent toutes un texte alternatif
  • les abréviations, acronymes sont définis dans le code source
  • la navigation ne se trouve pas enfermée dans une animation Flash

Impression

  • les adresses électroniques, URL, les liens hypertextes s’affichent en clair
  • la police de caractère, la couleur, la taille sont adaptées
  • la mise en page graphique est optimisée pour l’impression
  • le texte n’est pas rogné, les veuves et orphelins sont évités

Loi de Fitts

Selon la loi de Fitts, le temps mis pour atteindre une cible est proportionnel à sa distance et inversement proportionnel à sa taille. Autrement dit, on met plus de temps à cliquer sur un élément si celui-ci est loin et petit. Ça semble évident et pourtant les contre-exemples sont nombreux. Tout ceci me rappelle mes débuts en Flash et la mise en place d’un menu réactif. Le bouton ne réagissait qu’au survol du texte (figure de gauche). Pour contrer le problème, j’avais mis une zone transparente sensible par dessus. Du bricolage de jeunesse. Encore aujourd’hui, subsiste des traces de cette mauvaise manipulation. Mieux vaut miser sur une large zone réactive (figure de droite), plus confortable à l’utilisation et facilite le clic.

Cette loi est intéressante dans les résultats Google. Deux modèles de navigation sont possibles: soit par les liens Précédent et Suivant, soit en sélectionnant le numéro de page. Dans le dernier cas, la précision du geste nécessite un peu plus de temps. On aurait pu penser que ce dispositif allait disparaître… que du contraire. Le système d’archivage des blogs par exemple utilise largement cette classification. Pour voir des exemples, Smashing Magazine a consacré tout un billet.

Cette loi est toujours effective dans certains cas précis où le site doit attirer l’attention du visiteur sur un élément précis de l’interface et l’inciter à cliquer sur le bouton: participer à un concours, demande de devis, inscription gratuite… La communauté Mozilla l’a bien compris avec son navigateur. Tous les liens vers les extensions se trouvent derrière un gros bouton vert bien identifiable. Même chose pour celui qui cherche à télécharger le navigateur, il atterrit sur une page très explicite.


Mozilla-europe.org

Le fold en ergonomie

Cette notion est assez simple, il s’agit de la partie visible d’un site web sans aucun défilement de la page par l’utilisateur. Ce n’est pas bien nouveau puisqu’on retrouve ce principe pour les journaux présentés en kiosque. Un journal déplié tel que Le Soir (format berlinois: 47 cm x 32 cm) occupe beaucoup trop de place dans les étalages. On le trouve alors plié en deux et déposé sur un support vertical ou à plat.

On remarque très vite l’importance de cette partie du journal dont le rôle consiste à attirer la curiosité et à déclencher le processus d’achat. L’information essentielle doit se retrouver dans cet espace fortement exposé, que les anglophones ont appelé « above the fold » (au-dessus du pli). Très souvent, l’image à la une est sectionnée pour inciter à prendre le journal en mains.

Plusieurs Une du journal Le Soir
Journaux Le Soir pliés en deux

Sur le web, on peut également définir une zone visible après le chargement complet de la page et sans intervention de l’internaute. Cette limite dépend de la résolution d’écran, mais aussi du navigateur et des éléments affichés: menus, barre d’outils, barre personnelle, barre de recherche, barre additionnelle. Une multitude d’autres facteurs peuvent être pris en compte: blocage des éléments sur la page, taille du texte, redimensionnement de la fenêtre dans le cas des larges écrans de type 16/9. Il y a autant d’espace visible affichable que d’utilisateurs. Et encore, dans mon cas par exemple, j’utilise Internet Explorer sur mon écran 17″ en 1024*768 et Firefox (Adblock activé) sur mon 19″ en 1280*1024.

Capture d'écran Le Figaro sous Internet Explorer
Capture Lefigaro.fr sous Internet Explorer 6.0

Capture d'écran Le Figaro sous Firefox
Capture Lefigaro.fr sous Firefox 2.0, plugin Adblock

Connaître cette limite virtuelle en fonction du public cible, permet de mieux organiser l’information sur la page et de s’arranger pour suggérer l’utilisation du scroll pour lire la suite du contenu par différentes méthodes: fond, image, texte. Les études actuelles en ergonomie confirment qu’une majorité des utilisateurs connaissent et emploient le défilement vertical. Cependant, le temps de fixation de l’œil accroit en fonction de la longueur de la page. Une longue page favorise une lecture en diagonale à la recherche de mot-clé.

Dans le cas suivant, l’annonceur place au mieux sa publicité au-dessus de la zone de flottaison (en cyan sur l’illustration pour une résolution de 1024*768). Trois formats sont présents pour augmenter au maximum sa visibilité: un fond de page, une bannière en haut et un encart dans la colonne de droite.

Capture d'écran Liberation
Capture Liberation.fr

D’autres sont plus maladroits. WebRankInfo, longtemps considéré comme inévitable en terme de référencement, s’est vu inondé de publicité au fil du temps. Sur un affichage en 1024*768, la partie réservée à l’information est enfouie dans un décor de publicités. La limite de flottaison est très mal positionnée car l’utilisateur suppose un limite après les annonces Google. Ce choix est sans doute le résultat d’une optimisation pour les internautes équipés d’écrans larges.

Capture d'écran WebRankInfo
Capture Webrankinfo.com

Même les Pro du web semblent ne pas connaitre cette notion. On ne saisit pas bien l’intérêt de mettre une immense illustration abstraite dans le haut de la page. Toutes les rubriques sont logées à la même enseigne. Aucune information textuelle pertinente ne se trouve dans ladite zone. Le lecteur est obligé à chaque fois de descendre pour trouver le contenu.

Capture d'écran Produweb
Capture Produweb.be

Ergonomie des liens hypertextes

En tant que webmaster, ne soyez pas avare des références extérieures sous prétexte de contenir le visiteur dans votre royaume. Utilisés à bon escient, ils représentent une plus-value et votre visiteur vous en sera reconnaissant. Dans tous les cas, les libellés des liens doivent être courts, explicites et la destination doit avoir un rapport direct avec le lien.

Les liens visités changent de couleur

Les usagers ont souvent la mémoire courte, le clic facile et le surf rapide. Un formatage adapté des liens permet de se retrouver aisément dans la navigation. Les liens doivent se distinguer du texte. De la même manière, les liens visités sont des indicateurs visuels importants pour se situer dans l’architecture. Jakob Nielsen dénonce depuis toujours cette absence de distinction entre les liens et les liens visités. Il qualifie ce problème de grave et récurant sur la plupart des sites. Malgré sa facilité de mise en place, ce basique d’ergonomie web est majoritairement sous exploité. Seule exception à la règle: les zones régulièrement visitées comme dans le cas d’un menu de navigation.

Capture Pompage.net
Capture Pompage.net — Les liens cliqués sont atténués par rapport aux autres

Les ergonomes conseillent aux webmasters de se normaliser aux couleurs par défaut: liens en bleu et liens visités en violet. Même si ces couleurs sont devenues les teintes par excellence de l’hypertexte, il ne faut pas être intégriste ! À l’origine, la colorisation du texte cliquable sert à le distinguer par rapport au texte courant. Dans cette même optique, le recours aux feuilles de style remplit tout à fait ce rôle. La personnalisation de l’hypertexte (au niveau des couleurs et du formatage) profite à l’harmonie de la charte graphique du site.

Pour ce qui est de la feuille de style, pensez à respecter l’ordre d’apparition des déclarations. Un moyen mnémotechnique: LoVe Fuck HAte pour Link, Visited, Focus, Hover et Active.

{code type=css}
a {
color: blue;
}

a:link {
color: blue;
}

a:visited {
color: purple;
}

a:focus {
color: green;
}

a:hover {
color: green;
}

a:active {
color: red;
}
{/code}

Le soulignement réservé aux liens

À la différence d’un document écrit, le soulignement doit être réservé exclusivement aux liens hypertextes. C’est devenu une convention respectée de manière générale par les concepteurs. Le soulignement est un reliquat des machines à écrire. C’était la seule façon de mettre un texte en évidence.

Dans des cas bien précis, le soulignement reste la meilleure façon de mettre en valeur du texte. Par exemple pour attirer l’attention sur une particularité du texte. Wikipédia utilise cette méthode pour mettre en valeur la terminaison des verbes dans un sujet sur la conjugaison. Utilisez de préférence une feuille de style (text-decoration:underline) plutôt que la balise désuète <u>.

Soulignement dans Wikipédia
Capture Wikipedia.org

Ouvrir ses liens dans la même fenêtre

De nombreux concepteurs décident d’ouvrir les liens externes dans une nouvelle page. L’idée est de différencier les sites externes et de conserver la page source en arrière-plan. Cette manœuvre brise la logique de navigation, basée sur le passage d’une page à l’autre au sein d’une même fenêtre ! Que dire aussi des personnes qui n’ont pas compris qu’il s’agissait de l’ouverture d’une nouvelle page et qui cherchent à revenir sur la précédente grâce au bouton retour (back) du navigateur ?

Signalons au passage que le code HTML pour ouvrir une page dans une nouvelle fenêtre (target="_blank") n’est pas conforme en (X)HTML strict. Si le sujet vous intéresse, Éric Daspet a largement approfondi la question: « Liens et nouvelle fenêtre » (Cybercodeur).

En plus de ces arguments, les navigateurs actuels ont tous intégré un système d’onglet qui permet d’ouvrir un lien en arrière-plan. Dans Firefox, un clic milieu sur la molette de la souris ouvre le lien dans la même fenêtre mais dans un onglet en arrière-plan. Le visiteur est seul maître à bord pour décider et gérer son arrangement des fenêtres. Internet Explorer a également adopté cette solution tout comme Opera ou Chrome pour ne citer que ceux-là.

Un libellé efficace

L’internaute survole les pages en diagonale et son œil est attiré par les liens mis en exergue. Un lien « cliquez ici » ne lui donne aucune information de ce qui l’attend en cliquant dessus. Il est obligé de lire le contexte pour comprendre. Et ce qui est bon pour l’ergonomie est bon pour le référencement. Un lien correctement formulé et concis est beaucoup plus pertinent pour les moteurs de recherche.

Encourager le lecteur a agir

Le bouton call to action a pour fonction d’attirer l’internaute, le guider dans une direction et espérer de lui une action. Il s’agit de la souscription à une newsletter, le lancement d’une démo, la participation à un don, le téléchargement, etc. Ces boutons mis en exergue doivent se situer idéalement au-dessus du pli[¹].

Capture Apple
Capture Apple.com/fr/itunes

Une large zone de clic

La loi de Fitts est un concept assez simple en soi: le temps nécessaire pour cliquer sur une cible est inversement proportionnel à la taille de la cible. Autrement dit, plus la cible est petite plus on mettra du temps à cliquer dessus. Dans la page des résultats Google, ce dernier affiche des numéros de pages en bas de la recherche. Le risque d’erreur est inversement proportionnel à la zone de clic. Le bouton suivant atténue ce risque.

Une description facultative

Les liens peuvent être accompagnés d’une brève description ou l’URL grâce à l’attribut title. Lorsque la souris s’attarde sur le lien, la plupart des navigateurs affichent une infobulle. Cette information est précieuse pour les lecteurs d’écran. Pensez-y.

{code type=html}
Ornicar
{/code}

Des liens sur les images

Les images permettent une plus grande créativité dans la forme. Par contre, elles sont plus lourdes à charger, elles n’indiquent pas un lien visité, elles sont insensibles à l’agrandissement de police et la feuille de style personnelle du visiteur n’a aucun d’effet dessus. Indiquez toujours la valeur de l’attribut alt au cas où les images ne peuvent être affichées par le navigateur. Évitez les images animées souvent associées à de la publicité.

La langue de la page cible

En général, une page en langue française fournit des liens externes dans la même langue. Dans certains cas, la langue de la page est différente. Il est intéressant de préciser ce changement dans le code HTML grâce à l’attribut hreflang suivi de l’abréviation de la langue. Cet ajout est totalement transparent pour le visiteur. Pour afficher cette information en clair sur la page, il suffit d’avoir recours à une feuille de style. Dans l’exemple ci-dessous, le contenu de hreflang sera mis entre crochets à la suite du lien.

Dans la feuille de style:

{code type=css}
a[hreflang]:after {
content:  » [ » attr(hreflang) « ] « ;
}
{/code}

Dans le code source:

{code type=html}
Google
{/code}

Ce souci du détail est bien intégré par les robots mais risque de dérouter plus d’un visiteur ignorant cette pratique. Le procédé est loin d’être généralisé et encore moins intuitif. Le quidam aura du mal à deviner la signification d’une suite de deux lettres accolée à un lien. Dans le meilleur des cas, les habitués auront compris la signification de [en] pour l’anglais mais savez-vous que le code [hr] désigne le croate ?[²]

Afin de remédier à ce problème, on a vu apparaître des petits drapeaux en lieu et place de l’abréviation. Ainsi, une page cible en anglais se voyait dotée d’un drapeau… du Royaume-Uni. Cette représentation présente un risque de confusion et parfois de friction. Un article écrit par un Américain, un Canadien, un Australien – ou pire – un Irlandais, se verrait doté du même drapeau. Aussi, êtes-vous sûr que vos lecteurs connaissent tous les drapeaux ?

Capture Ergologique
Capture Ergologique.com

Dans les deux cas, l’idée part d’une bonne intention, mais elle est loin d’être comprise dans la pratique de manière intuitive.

Les liens dans le corps du texte ou en annexes

Est-il plus pertinent d’indiquer les liens hypertextes directement dans le contenu éditorial ou plutôt en fin d’article ? Dans le premier cas, les liens sont directement accessibles mais peuvent rompre la lecture. Un bien, un mal ? difficile de répondre dans la mesure où rien n’empêche l’internaute de revenir en arrière, ouvrir le lien dans un onglet ou une nouvelle fenêtre.

Dans la pratique, la plupart des sites intègrent directement les liens dans le corps du texte en laissant la liberté au visiteur de faire une escapade ou non. Certains éditeurs de contenu, comme le Journal du Net, optent pour une séparation entre le texte et les liens.

Capture Journal du Net
Capture Journaldunet.com

La chasse aux liens brisés

Le serveur ne trouve pas votre page (page renommée, déplacée, renommée) et renvoie le message indigeste d’une erreur 404. Pensez à élaborer une page personnalisée à cet effet [³]. Au-delà de deux erreurs de ce type, n’espérez plus revoir votre visiteur ! Faites la chasse aux liens morts et surtout de la veille.

Des liens sans hypertexte

Les pages web sont reliées entre elles par des liens. Chaque lien permet de prolonger la lecture. À son tour, cette page redirige vers d’autres liens externes. De cette manière, l’essence même du web est le maillage de toutes ces pages entre elles.

Certains ne l’entendent pas de cette oreille. Sous prétexte d’avoir un prétendu contrôle des liens entrants, des sites interdisent l’utilisation d’un lien hypertexte vers leur adresse web sans autorisation explicite préalable. Mention reprise dans les conditions d’utilisation. Ces sites sont regroupés sous l’abréviation PDLSA: pas de lien sans autorisation.

Quelques exemples: Coca-Cola France, Boursorama, Éditions First, Festival de Cannes, Groupon, L’Oréal, Nespresso, la SNCF, TF1, le Téléthon…

Pas certain que cette mention farfelue puisse être défendue devant les tribunaux. Quoi qu’il en soit, les responsables éditoriaux prennent leurs précautions en retirent l’hypertexte tout en gardant le libellé. L’internaute se trouve alors devant un texte inactif, sans comprendre les raisons de ce choix.

Une alerte pour les liens externes

On dit du web qu’il ressemble à une immense toile d’araignée car le visiteur passe d’une page à une autre pour entreprendre des chemins divers et variés. Selon son expérience, il juge de la pertinence d’un lien externe sur un site. Généralement, ce lien est offert par le webmaster. Ce dernier à tout intérêt de fournir une ressource vérifiée, fiable et pertinente. Il en va de sa crédibilité et de sa responsabilité.

Par contre, des liens peuvent être publiés par la communauté des internautes. C’est le cas des commentaires sur les blogs, des messages dans les forums ou des articles sur les réseaux sociaux. Dans la plupart des cas, la non-responsabilité du contenu tiré des liens externes est reprise dans les informations légales du site. Dans certains cas, l’éditeur prévoit un système d’alerte automatique pour prévenir le lecteur. Cette précaution (avant tout d’ordre juridique) est lourde dans la pratique pour le lecteur. Elle lance – a priori – un effet de suspicion. Ce rejet de responsabilité crée un climat de méfiance et nuit à la navigation.

Capture Blizzard
Capture Forums.battle.net

Facebook ne fait pas dans la demi-mesure en affichant un panneau d’alerte et un titre « Attention ».

Capture Facebook
Capture Facebook.com (05/07/10)

[¹] « La notion de fold en ergonomie »
[²] « Liste des codes ISO 639-1 » (Wikipédia)
[³] « Débusquer les liens morts »