Un maximum d’effet pour un minimum d’espace !

Exemple sur www.amazon.fr

Pour quoi ?
Pour donner accès aux pages phares de manière omniprésente.

Une liste déroulante est un élément de formulaire accompagné d’une flèche orientée vers le bas. Lorsque l’internaute clique sur la flèche une longue liste d’options apparait.

La liste est très longue ? Donnez-lui du volume
Pour aider vos internautes à trouver ce qu’ils cherchent parmi une longue liste d’éléments, vous pourrez grouper vos catégories. En HTML standard, l’intitulé du groupe n’est pas sélectionnable.

Exemple de liste déroulante sur http://unfortunatelypaul.com/

Cette fonctionnalité est principalement utilisée :
- en fin d’article pour promouvoir l’accès à des produits ou thèmes
- en haut de site pour donner un accès rapide à tous les thèmes ou aux pages les plus utilisées par les internautes.

Selon le système créé, l’internaute peut être transféré sur une autre page dès qu’il a sélectionné un élément de la liste ou le système le fait cliquer sur un bouton de type « OK » pour valider sa sélection. Le système automatique en une étape utilise encore moins d’espace. Mais il correspond plus à une audience d’internautes experts. Le système automatique de changement de page est déconseillé avec certaines cibles car
ce type de liste n’est pas facile à utiliser pour les handicapés moteurs (tremblement,difficultés à viser sur la petite flèche).

Sans bouton « OK » pour valider son choix, il est possible que l’internaute ne se rende pas compte que le curseur de sa souris soit toujours placé dans la liste. Si l’utilisateur a une molette de scroll sur sa souris, lorsqu’il croira faire défiler sa page, il fera défiler la liste déroulante. Il se verra transférer vers une autre page, sans comprendre pourquoi.
Ce qui génère chez les internautes de l’agacement.
Sans bouton « OK », l’internaute n’a pas droit à l’erreur. Pour corriger son erreur, il doit attendre que la nouvelle page se charge et revenir en arrière.

Exemple sur www.nonlinear.ca

Exemple d’utilisation
Une utilisation ingénieuse des listes
déroulantes est d’insérer toutes les
questions qu’un internaute peut se
poser en visitant votre site. Insérez les
éléments sous une forme interrogative,
ainsi l’internaute pourra s’identifier

Succession de listes déroulantes
Pour sélectionner un pays, puis une région, puis une ville, évitez de recharger la page.
Préférez un affichage sans rechargement de la page, c’est plus confortable et rapide pour l’internaute. Ceci demande l’utilisation d’un script (Javascript, Ajax…). Insérez son alternative pour le rendre accessible aux utilisateurs n’ayant pas accès aux scripts.
Cette navigation est principalement utilisée pour donner aux internautes un accès rapide et omniprésent vers d’autres catégories du site. Ce qui fait de ce type de navigation une navigation dite transversale. Comme toute navigation transversale, il est idéal de la placer sur la droite de l’écran.

Les listes déroulantes utilisent toujours le même espace en hauteur. En largeur la taille de la liste déroulante dépend de la taille de l’élément le plus long de la liste. Soyez vigilant à bien tester vos listes déroulantes sur plusieurs types de navigateur car leurs hauteurs et largeurs peuvent varier.

Concernant les réponses
Si vous choisissez d’insérer un module
sous forme de liste déroulante « Que
recherchez-vous vraiment ? », dirigez
l’internaute vers les vraies pages.
Évitez de créer une page réponse qui
serait incomplète par rapport à
d’autres pages du site.

Veillez à :