Utiliser les standards (OS,…) afin que les utilisateurs n’aient pas à réapprendre autre chose.

Les listes verticales sont omniprésentes sur internet. Elle reste la manière la plus simple et efficace pour donner accès au contenu d’un site internet.

Exemple sur www.journaldunet.com

Pour qui ? Pour tous. Rares sont les sites qui n’affichent pas de liste de produits, de liste d’articles d’actualité, etc.

Une liste verticale affiche les uns sous les autres les éléments à découvrir sur le site ou dans une catégorie.

Étude Eye Tracking Les résultats indentés de Google seraient les plus cliqués ! Source : Nielsen L’Eye Tracking est une technique qui permet entre autre de mesurer l’endroit où les internautes posent leur regard sur une page.

Lorsque vous affichez des listes verticales :

faites des blocs bien séparés les uns des autres, afin que l’internaute puisse facilement différencier les blocs.

pour garder un aspect professionnel et sérieux, gardez une homogénéité dans la mise en forme des blocs affichés (format des dates, format général de mise en forme, etc.).

attention à donner du volume à votre liste. Afin d’aider votre internaute à scanner les éléments de la liste, insérez des illustrations (photos, pictogrammes), des variations de couleur ou de la longueur des textes pour mettre en avant certains contenus.

écrivez vos textes pour le web en utilisant la technique de la pyramide inversée. Décrivez l’information principale de la page cible.

insérez des éléments discriminants dans vos listes de produits. Ces critères doivent correspondre aux critères de sélection ou de rejet des utilisateurs.

triez la liste par ordre décroissant de sortie (les derniers articles en premier, les produits les plus populaires en premier…)

indiquez ce qui est cliquable très visiblement (soulignez les liens).

insérez les liens sur les illustrations. Beaucoup d’utilisateurs cliquent sur les images.

vous affichez des produits ? Affichez de grandes images (à partir de 110×110 pixels).

comme toujours, pensez à introduire des balises ALT explicites aux illustrations qui contiennent du texte et des balises ALT (exemple de code : alt=“”) vides pour les illustrations de décoration.

Étude utilisateur Les internautes trouvent plus vite une information lorsqu’ils ont à scroller plutôt que lorsqu’ils doivent changer de page.

Quelle taille pour mes images ? « Sur un site web marketing présentant des produits, affichez de grandes images. Sur un autre type de site, si les images sont connues du public cible, elles peuvent être petites tant que l’on discerne bien ce qu’elles représentent. »

Important : bannissez les liens de type « cliquez ici pour en savoir plus » optez pour des appels à action (en anglais CTA : Call To Action) plus explicite de type « Consultez la liste des cadeaux préférés des jeunes Mamans ». Ceci aidera aussi à mieux référencer les pages de votre site auprès des moteurs de recherche et à améliorer l’accessibilité de vos pages.

évitez les textes de plus de 4 lignes sans mise en forme. Les internautes n’investiront pas de temps pour le lire.

rendez vos titres cliquables. Les afficheurs braille présents sur le marché affichent un maximum de 80 caractères, évitez les libellés de liens de plus de 80 caractères.

affichez les liens déjà visités d’une autre couleur (code html vlink).

limitez vos listes à 3 écrans. Plus long, vous risquez de perdre l’attention de vos internautes.

Exemple sur www.luxuryhomes.com Si votre contenu affiche beaucoup d’images et peu de textes, vous pouvez afficher les produits sur plusieurs colonnes. Attention techniquement à ce que l’ordre des produits reste le même si la page est consultée de manière linéaire.

Rappel : gardez les lignes courtes. 80 caractères maximum. L’oeil n’arrive pas à se maintenir sur des lignes trop longues.

jouez avec la mise en forme. Plus une information est importante pour l’internaute plus elle doit être visible (contraste, couleur, graissage, etc.).