Quatre étapes pour choisir les éléments de formulaire

26 octobre 2007 - Catégorie : utilisabilité
Mots clés : , , ,

Je vous propose la traduction de “Should I use a drop-down ? Four steps for choosing form elements on the Web” (Article original, au format pdf) de Sarah Allen et Caroline Jarrett.

Du bon usage des listes déroulantes : Quatre étapes pour choisir les éléments de formulaire

Vous concevez un formulaire pour un site Internet et vous voulez faciliter son remplissage par les utilisateurs. Vous avez alors 5 éléments HTML de formulaire à votre disposition : les listes déroulantes, boutons radio, cases à cocher, champs texte et hyperliens. Lequel est le plus utilisable ?

Nous présentons ici un processus en quatre étapes pour vous aider à choisir vos éléments de formulaire.

Premièrement, déterminez si le but principal de votre page est la navigation ou la collecte d’informations.
Deuxièmement, posez vous 6 questions afin de réduire le nombre d’éléments nécessaires à la question de votre formulaire.
Troisièmement, observez l’impact de votre choix sur votre formulaire dans son ensemble. Choisissez un ordre pour vos options, rendez les aussi courtes que possibles, et évitez d’avoir trop d’éléments différents sur votre formulaire.
Quatrièmement, pensez aux utilisateurs et à leur interaction avec leur navigateur. Pourront-ils utiliser correctement et facilement le formulaire ?

Introduction

La plupart d’entre nous a fait l’expérience de la frustration de se retrouver devant une implémentation inappropriée des listes déroulantes. Choisir son pays parmi une liste de plus de 100, chercher son jour de naissance parmi 31 choix, sont autant d’exemples de mauvaises implémentations. Mais une liste déroulante peut être une méthode commode pour exposer des choix, et peut permettre de réduire l’espace requis par le formulaire et ainsi le rendre moins intimidant.

Nous avons développé un processus en quatre étapes pour vous aider à choisir vos éléments de formulaire parmi les cinq éléments HTML. Bien sûr, il est possible de créer des formulaires bien plus sophistiqués avec l’aide de technologies comme les applets Java ou du mapping d’images apposé directement dans la page web, mais ces technologies peuvent faire apparaître d’autres problèmes, et nous supposons que vous souhaitez utiliser uniquement du HTML.

Pour illustrer notre processus, nous avons choisi quelques questions tirés d’un formulaire de réservation d’une chaîne d’hôtels. Nous souhaitons obtenir les informations suivantes de la part de l’utilisateur :

  • nom de la personne
  • nombre de personnes
  • nom de l’hôtel
  • type de chambre (simple, double ou jumelle)
  • type de carte de crédit

Les 5 éléments HTML de formulaire

HTML dispose de 5 éléments de formulaire qui sont utilisés pour obtenir une information de l’utilisateur en lui soumettant des choix. On les retrouve sur chaque formulaire, et les utilisateurs sont habitués à une utilisation bien précise pour chacun d’entre eux.

Élément de formulaire Comment les utilisateurs s’attendent à ce qu’il fonctionne
1. La liste déroulante Liste déroulante Vue du choix par défaut. Si ce choix ne lui convient pas, l’utilisateur :

  • clique sur la flèche pour afficher les autres choix,
  • navigue dans la liste si nécessaire, au moyen d’un ascenseur,
  • clique sur une option pour la sélectionner

Une des options peut être vide.

2. Les boutons radio boutons radio Vue du choix par défaut. Si ce choix ne lui convient pas, l’utilisateur clique sur un autre choix pour le sélectionner.L’utilisateur s’attend à ne choisir qu’une option.
3. Les cases à cocher Cases à cocher L’utilisateur clique sur chacun des choix qui lui convient.Il peut ne pas cliquer sur un choix si aucun ne lui convient.
4. Le champ texte champ texte L’utilisateur écrit une réponse ou laisse le champ vide.
5. Les hyperliens hyperliens L’utilisateur clique sur un lien pour aller sur une nouvelle page.

Étape 1 : le but principal de la page

Tout d’abord, Demandez vous pourquoi vous mettez l’utilisateur devant un choix à faire. Le but de la page est-il de permettre à l’utilisateur de poursuivre sa visite ? Ou le but est-il de collecter des informations de cet utilisateur ?

Les pages de navigation

Sur un menu de navigation, notre objectif est de proposer un accès facile à la prochaine page. Si vous avez un site avec un grand nombre de pages, les listes de choix peuvent devenir excessives. Vous pouvez imaginer que la réponse idéale est alors de proposer une liste déroulante avec un bouton “Ok”. Vous gagnez de l’espace sur la page, et vous pouvez proposer différentes listes de choix dans une surface réduite et fixe de votre design.

Il est néanmoins conseillé d’éviter les listes déroulantes sur les menus de navigation car :

  • un menu en liste déroulante ne permet pas d’avoir toutes les options du premier coup d’oeil; À moins que l’utilisateur ne soit un visiteur très régulier, il devra redérouler la liste pour accéder à tous les choix.
  • les hyperliens permettent la navigation en 1 clic; une liste déroulante demande plus d’efforts à l’utilisateur.
  • une liste d’hyperliens correctement disposés est bien plus compréhensible que la boite d’une liste déroulante.
  • s’il y a beaucoup de choix, il sera impossible pour l’utilisateur de voir toutes les options de la liste sans avoir à utiliser un ascenseur vertical.

Repensez la structure générale de votre site si vous sentez que vous ne pouvez faire autrement que d’utiliser une liste déroulante pour votre menu. Peut-être pouvez vous exclure la nécessité de proposer tant de choix à l’utilisateur en structurant votre contenu différemment.

La collecte d’informations

Dans la plupart des cas, la problématique principale des formulaires sur le Web est la collecte d’informations sur l’utilisateur. Vous avez conçu une question à poser à l’utilisateur et déterminé un ensemble délimité de réponses valides. Quelle est la meilleure méthode de présenter ces choix à l’utilisateur afin de maximiser vos chances d’obtenir la meilleure réponse ?

Étape 2 : 6 questions

Quand nous choisissons des éléments pour baliser un formulaire destiné à collecter des informations, il est conseillé de se poser les 6 questions suivantes :

  1. Est-il plus naturel pour l’utilisateur de taper une réponse ou de la sélectionner ?
  2. Est-il aisé de faire un erreur en tapant la réponse ?
  3. L’utilisateur doit-il analyser les options pour comprendre la question ?
  4. Combien d’options y-a-t-il ?
  5. L’utilisateur peut-il sélectionner plusieurs options ?
  6. Les options sont-elles visuellement différentes ?

Nous avons classé ces questions pour cet article, mais elles sont toutes aussi importantes les unes que les autres.

1. Est-il plus naturel pour l’utilisateur de taper une réponse ou de la sélectionner ?

Les informations personnelles comme le nom, l’adresse postale, et la date de naissance sont des données nous concernant que nous connaissons tellement bien qu’il est bien plus naturel de les taper directement plutôt que de les sélectionner dans une liste. Nous pensons que le nom d’une personne et le nombre d’invités sont des données qu’il est préférable de taper plutôt que d’avoir à les sélectionner. L’élément de formulaire à choisir est par conséquent un champ de type “texte”.

Le tableau suivant montre chaque donnée de notre exemple de formulaire pour site d’hôtel.

Champ Est-il plus naturel pour l’utilisateur de taper une réponse ou de la sélectionner ? Choix préférable d’élément de formulaire
Nom de l’invité Oui, il est plus naturel de taper cette information que de la sélectionner Champ “texte”
Nombre d’invités Oui, il est plus naturel de taper cette information que de la sélectionner Champ “texte”
Nom de l’hôtel Non  
Type de chambre Non  
Type de carte de crédit Non  

Valider le champ “texte” aidera l’utilisateur. par exemple, si l’utilisateur tape un chiffre supérieur à 4 pour “nombre d’invités”, vous pouvez alors choisir de déclencher une inscription de type groupe, ou alors permettre de changer l’information pour un nombre inférieur.

2. Est-il aisé de faire un erreur en tapant la réponse ?

À moins que l’utilisateur ne travaille pour l’hôtel dans lequel il souhaite réserver, il y a peu de chance qu’il tape le nom complet sans faire de faute d’orthographe ou en utilisant une abréviation que l’hôtel n’utilise pas. Il est donc exclu d’utiliser un champ “texte”. Mais en fonction du design du formulaire, n’importe quel autre élément pourra être utilisé.

Champ Est-il aisé de faire un erreur en tapant la réponse ? Choix préférable d’élément de formulaire
Nom de l’invité Non  
Nombre d’invités Non  
Nom de l’hôtel Oui, l’erreur est facile Hyperliens
Type de chambre Oui, l’erreur est facile Boutons radio, Cases à cocher
Type de carte de crédit Non  

3. L’utilisateur doit-il analyser les options pour comprendre la question ?

L’utilisateur peut ne pas comprendre ce qui lui est demandé jusqu’à ce qu’il voit la liste des options. Des questions comme “type de chambre” peuvent avoir plusieurs ensembles de réponses pour définir des préférences :

  • simple, double, jumelles
  • 2 lits doubles, lit grande taille
  • accessible en fauteuil roulant, non accessible
  • fumeur, non fumeur
  • rez de chaussée, étage
  • style western, japonais…

Les éléments adéquats sont ici des boutons radio ou des cases à cocher. Si une liste déroulante est utilisée, l’utilisateur aura du mal à comprendre facilement la question.

Champ L’utilisateur doit-il analyser les options pour comprendre la question ? Choix préférable d’élément de formulaire
Nom de l’invité Non  
Nombre d’invités Non  
Nom de l’hôtel Non  
Type de chambre Oui, nécessité d’analyser les options Boutons radio, Cases à cocher
Type de carte de crédit Non  

4. Combien d’options y-a-t-il ?

la plupart des éléments de formulaire sont moins utilisables quand ils présentent un grand nombre d’options (30 ou plus), car il sera alors nécessaire d’utiliser un ascenseur pour naviguer dans la page ou la liste déroulante.

Quand il n’y a que 4 options ou moins, les boutons radio et les cases à cocher sont un meilleur choix que les listes déroulantes. L’utilisateur voit tous les choix du premier coup d’oeil, il lui suffit d’un clic pour faire son choix, et cela ne prend pas plus de place sur la page qu’une liste déroulante.

Champ Combien d’options y-a-t-il ? Choix préférable d’élément de formulaire
Nom de l’invité Beaucoup Champ “texte”
Nombre d’invités Potentiellement beaucoup, dans le cas d’une fête ou d’une conférence Champ “texte”
Nom de l’hôtel Peu, à moins que ce soir une grande chaîne d’hôtels Liste déroulante, boutons radio
Type de chambre Très peu Boutons radio, Cases à cocher
Type de carte de crédit Pas beaucoup Liste déroulante, boutons radio

5. L’utilisateur peut-il sélectionner plusieurs options ?

Il est judicieux de proposer plusieurs options lorsque l’utilisateur doit définir des préférences, ou par exemple, pour choisir des brochures. Beaucoup d’utilisateurs savent que les cases à cocher permettent des sélections multiples. Pour éviter d’avoir à expliquer à l’utilisateur comment faire un choix multiple, ou si vous redoutez qu’il ne saura pas faire, vous pouvez utiliser des boutons radio avec une option “n’importe quel choix”.

Champ L’utilisateur peut-il sélectionner plusieurs options ? Choix préférable d’élément de formulaire
Nom de l’invité Non  
Nombre d’invités Non  
Nom de l’hôtel Non  
Type de chambre Oui Boutons radio, Cases à cocher
Type de carte de crédit Non  

6. Les options sont-elles visuellement différentes ?

Il est plus facile de parcourir une liste d’options si elles sont visuellement différentes. Par exemple, les listes “simple”, “double”, et “jumelles” (type de chambre) ou “Visa”, “Mastercard” et “American Express” (type de carte de crédit) sont chacune facilement différenciable de l’autre. A contrario, les chiffres de 01 à 10, parce qu’ils ont tous 2 caractères de longueur, ne sont pas facilement différenciables sous forme de liste déroulante. Si vos options sont similaires, préférez un champ “texte”.

Si vous devez préférer une liste, rendez les options facilement identifiables en les modifiant ou en les abbréviant. Par exemple, si les hôtels d’une chaîne ont des noms similaires, il sera préférable d’utiliser la ville de domiciliation de chacun pour les identifier. Une autre façon de faire est de permettre le choix de l’hôtel en amont du formulaire, par l’intermédiaire d’un hyperlien.

Champ Les options sont-elles visuellement différentes ? Choix préférable d’élément de formulaire
Nom de l’invité Options non connues à l’avance  
Nombre d’invités Non  
Nom de l’hôtel Peuvent être similaires Liste déroulante, hyperlien
Type de chambre Oui, visuellement différenciables Boutons radio, Cases à cocher, Liste déroulante
Type de carte de crédit Oui, visuellement différenciables Boutons radio, Cases à cocher, Liste déroulante

Étape 3 : Impact sur le formulaire

Une fois choisis les éléments du formulaire, les recommandations suivantes vont nous permettre d’implémenter nos choix de manière à ce qu’ils soient le plus utilisables possibles.

Éviter d’avoir trop de champs différents

Même après avoir fait les bons choix à l’aide des 6 questions précédentes, le résultat peut ressembler à une démonstration de chaque élément utilisable dans un formulaire. Suivant les résultats trouvés précédemment, le formulaire de réservation de notre hôtel pourrait ressembler à ça :

Champ Choix préférable d’élément de formulaire
Nom de l’invité Champ “texte”
Nom de l’hôtel Hyperlien
Type de chambre Boutons radio avec option “n’importe quel choix”
Nombre d’invités Champ “texte”
Type de carte de crédit Liste déroulante

Trop d’éléments différents auront pour effet de perdre un peu les utilisateurs. Il est donc préférable d’analyser nos choix pour voir si une alternative n’aboutirait pas à un résultat plus probant.

Conserver des options courtes et lisibles

Afin de permettre à l’utilisateur de parcourir facilement la liste, il faut utiliser des options courtes et lisibles autant que possible, surtout en cas de liste déroulante.

Il est possible d’utiliser des phrases ou de courtes descriptions pour les options des boutons radio et des cases à cocher si on dispose de la place nécessaire, et si il n’y a pas un nombre important d’options. Dans le cas contraire, il est préférable de redéfinir la question pour éviter d’avoir une liste d’options trop longues.

Choisir un ordre logique pour classer les options

Pour faciliter la lecture des listes, il faut classer les options d’une manière logique pour l’utilisateur. Certains classements sont naturels, comme les mois de l’année, par exemple. Dans beaucoup d’autres cas, classer les options par ordre alphabétique permet à l’utilisateur de la parcourir facilement, même si des exceptions sont possibles, comme le montre l’exemple suivant. Classer ensemble les états des États-Unis et de l’Australie rend la lecture compliquée pour les utilisateurs Américains et Australiens.

Exemple formulaire

Étape 4 : Les utilisateurs et leur navigateur

Internet est utilisé par des personnes inégales devant leurs capacités à utiliser les différentes technologies. Par exemple, des utilisateurs peuvent utiliser un lecteur d’écran en raison de déficiences visuelles, d’autres peuvent avoir un handicap physique qui affecte leur utilisation de ces technologies. Tous les utilisateurs n’accèdent pas à Internet avec un ordinateur de bureau standard : ils peuvent utiliser d’autres technologies qui ne permettent que la navigation au clavier, sans souris, comme les téléphones mobiles surfant sur le WAP. Il y a au moins 2 façons d’aider ces utilisateurs à bien utiliser votre formulaire :

  • Une liste déroulante pour la navigation contrôlée par Javascript est impossible à utiliser avec une souris. Pour plus d’accessibilité, utilisez un bouton de type “submit” au lieu de Javascript pour enclencher l’action.
  • pour décrire une page aux utilisateurs, les lecteurs d’écran utilise l’attribut “name” des éléments de formulaire. Vérifiez bien que chacun de vos éléments comporte un nom unique et significatif.

Conclusion

Bien que le choix des éléments de formulaire est limité, il est néanmoins possible d’être devant un dilemme quant à l’emploi de tel ou tel élément. Nous avons montré qu’en suivant quelques étapes, vous pouvez presque toujours être sûr de créer une expérience satisfaisante pour votre utilisateur.

  • Pensez au but principal de votre page : navigation ou collecte d’informations ?
  • Posez vous 6 questions à propose des options
  • Vérifiez vos décisions : classez logiquement les options, conservez des options courtes et lisibles, évitez d’avoir trop de champs différents
  • Pour finir, pensez à vos utilisateurs et à leur utilisation de leur navigateur pour être sûr que votre formulaire sera accessible à tous.

Ressources

Sur le Web : www.formsthatwork.com, le site Internet des conseils sur les formulaires (Caroline Jarrett et Gerry Gaffney).

En livre : le livre de Jeff Johnson GUI Bloopers, Morgan Kaufmann.

Les auteures souhaitent remercier Debbie Stone pour son aide à la préparation de cet article.