Mémento Ergonomie Web d’Amélie Boucher

13 octobre 2008 - Catégorie : utilisabilité
Mots clés : , ,

Mémento Ergonomie web d'Amélie Boucher

Après la sortie remarquée de son livre il y a un an, Amélie Boucher récidive dans la propagation de la bonne parole en publiant un mémento sur l’ergonomie Web, toujours chez Eyrolles.

Sous la forme d’un dépliant en papier glacé “doré”, ce mémento est un aide-mémoire à toujours garder sous la main (ou au moins à côté de la souris). Il passe en revue les bases de l’ergonomie web au moyen d’exemples précis.

Après une définition qui permet de bien comprendre ce qu’est l’ergonomie web :

L’ergonomie web a pour objectif d’adapter un site Internet à ses visiteurs, de sorte que son utilisation soit ressentie comme facile, confortable et que ceux-ci aient envie de revenir.

Le mémento balaie les principes de base  :

  • L’organisation d’une page web
  • Les textes
  • Les titres et libellés
  • Les liens hypertextes
  • Les formulaires
  • Les menus
  • Les boutons d’action
  • Les listes et les tableaux
  • Les bannières publicitaires
  • Les messages d’information
  • Et une conclusion avec des recommandations

Simple et complet, je vous dis. A mettre sur tous les bureaux des concepteurs, graphistes, et chefs de projet Web. Et comme tous les mémentos, il ne coûte que 5€.

Pour en savoir plus :

Les processus de contact des sites e-commerce

18 décembre 2007 - Catégorie : utilisabilité
Mots clés : , , , ,

La dématérialisation des services déclenchée par le boum du e-commerce a soulevé une problématique : comment permettre à l’utilisateur de trouver des réponses à ses questions et ainsi contribuer à sa satisfaction lors de la visite ?

Les e-marchands répondent de manières différentes à cette problématique : FAQ, simple mail, formulaire de contact, sont parmi les principaux moyens utilisés. À cela viennent s’ajouter les hotlines téléphoniques, les hotlines par chat, et même les assistants virtuels, nouvelle mode depuis quelques mois. Afin de faire un tour d’horizon des différentes solutions, j’ai analysé les processus de contact de 6 grands sites marchands désignés meilleurs sites e-commerce 2007 (via) dans leur catégorie par la FEVAD :

Pour vivre heureux, vivons cachés

Premier constat : tous les sites ne clament pas haut et fort leur envie d’aider le chaland. Chez Ikea, on croise deux fois Anna, l’agent conversationnel, avant de tomber sur le lien “Contactez-nous”, qui ne mène même pas vers un formulaire, mais vers un chat… Chez NikeId, tout comme chez Annonces Jaunes, il faut descendre jusqu’en bas de page pour trouver une main tendue.

Aide NikeId

Chez FNAC.com, Yves Rocher, et La Redoute, le bouton d’aide/contact est en bonne place dans la navigation secondaire.

Aide FNAC

Plus j’en mets, plus t’en as

L’addition d’une FAQ, d’un formulaire de contact et d’un agent conversationnel, par exemple, est un moyen efficace de minimiser les contacts entre l’utilisateur et le site, et c’est un système gagnant-gagnant : l’utilisateur a sa réponse plus vite, le marchand a moins de gestion de clientèle à fournir.

Sur l’échantillon, FNAC.com et La Redoute ont très bien implémenté ce système. L’utilisateur dispose de beaucoup d’outils pour trouver sa réponse, et s’il ne trouve pas, il peut alors contacter le service clientèle. J’émets un bémol tout de même pour FNAC.com : pourquoi diable ouvrir une nouvelle page pour afficher cette rubrique d’aide ? Rien ne le justifie, et un clic sur un hyperlien vers le site FNAC.com fait qu’on se retrouve avec 2 fenêtres du même site…

NikeId l’a mal mis en place : pourquoi l’utilisateur s’embêterait-il à chercher sa réponse quand le moyen de contact est disponible immédiatement et que les questions/réponses sont aussi mal agencées et si inutilisables ? (ils connaissent pas la molette de la souris chez Nike ?)

Thématiques sur NikeId

Pas de ça chez Annonces Jaunes, Yves Rocher, ou Ikea. Chez Annonces Jaunes, les aides sont bien cachées dans le bas de page, et en deux parties : une rubrique questions/réponses bien fournie sur 4 écrans de hauteur (!) et un formulaire de contact qui va à l’essentiel. Il faut dire qu’Annonces Jaunes bénéficie d’une architecture de l’information bien fichue et a semé des aides contextuelles bien identifiées un peu partout sur son site.

Aide contextuelle sur Annonces Jaunes

Même partage chez Yves Rocher, à la différence que cette fois, ce sont les FAQ qui sont bien maigres et le formulaire qui est une vraie fiche d’état civil ! J’y reviendrai.

Ikea a mis en place 3 systèmes : le chat, l’agent conversationnel, et la FAQ. Hé non ! Pas de formulaire de contact, pas la trace d’un tout petit mail. À la place, Ikea a choisi de privilégier le contact par téléphone, par service et par magasin. Testé sous Firefox, le chat ne se lance tout simplement pas, et les liens promis par Anna, l’agent conversationnel, ne s’ouvrent pas. En gros, sur le site d’Ikea, pour obtenir une information, il faut avoir un peu de temps devant soi. Un chat ou un appel téléphonique prennent du temps, voire même coûtent de l’argent à l’utilisateur, tandis que la FAQ est franchement bordélique. À vouloir gagner en documentation, Ikea a perdu en clarté.

Plus t’en mets, plus j’en ai

Encore faut-il que l’utilisateur soit enclin à laisser son adresse postale pour trouver une réponse à une information qu’il n’a pas pu trouver sur le site ! Les formulaires de contact sont là pour aider l’utilisateur, pas pour récolter des informations sur lui. Un formulaire trop dense à de fortes chances de rebuter l’utilisateur, donc de provoquer son insatisfaction, donc d’en faire un client potentiel perdu. Et même un tout petit champ autre que l’email, l’objet, et le message, est superflu. Néanmoins, il est désormais d’usage de demander la civilité et le nom de l’internaute dans le but de personnaliser le message.

Chez Ikea, au moins c’est simple, il n’y a pas de formulaire. Les seules solutions de réponse “humaine” ou “humanisée” sont le chat ou l’appel direct en magasin. Je ne sais pas trop quoi penser de cette approche de la relation client en ligne, juste que c’est beaucoup trop commercial à mon goût. Si quelqu’un a un avis ou un retour sur cette expérience, je suis preneur.

Chez les autres commerçants, pas mal de bonnes pratiques volent en éclat. Chez FNAC.com, ce doit être un joyeux bordel de maintenir tous ces formulaires de contact : Il y en a 9 différents, additionnés à 2 adresses email. L’utilisateur qui veut poser une question sur la disponibilité d’un CD et l’ouverture de la billetterie d’un spectacle doit se fendre de 2 remplissages de formulaires. M’est avis que ça ne doit pas arriver souvent, et que le service client de FNAC.com doit du coup se retrouver avec des questions sur la billetterie dans le workflow de mailings des CD.

Les formulaires chez FNAC.com

Chez NikeId, sûrement embarrassés de leur site full flash, ils ont préféré ouvrir un formulaire HTML dans un popup. Passé cette aberration technique, l’utilisateur fait face à un formulaire un peu riquiqui (surtout au niveau du champ “message”) où aucun champ n’est superflu. Par contre, vous pouvez envoyer un message sans objet, ce qui doit être très pratique à gérer. NikeId fait ici peu de cas de la capacité à écrire intelligiblement des utilisateurs de son propre site. Une liste déroulante avec des thèmes prédéfinis aurait très simplement permis à l’utilisateur de classer son besoin sans avoir à mettre un objet incompréhensible par NikeId.

Chez Yves Rocher, le formulaire s’ouvre sur un layer à fond gris, permettant à l’utilisateur de focaliser son attention sur les informations à compléter. Et c’est à ce moment-là qu’il se rend compte qu’il doit sortir sa fiche d’état civil pour espérer une réponse de la part du site. En quoi connaitre l’adresse postale de l’utilisateur va-t-il aider Yves Rocher ? Même chose pour le numéro de téléphone : tous les utilisateurs ne veulent sûrement pas pouvoir être appelés, même pour avoir une réponse à leur question. Si Yves Rocher souhaitait vraiment avoir ces informations, il aurait fallu le demander simplement par une phrase d’introduction, et en ne mettant pas ces champs comme obligatoires à la validation du formulaire.

Le formulaire chez Yves Rocher

C’est un peu la même chose chez La Redoute, mais dans une moindre mesure. Le champ “code postal” est obligatoire, et on se demande bien pourquoi. Le gros point positif du formulaire de contact de La Redoute est que la provenance de l’utilisateur a été tracé (voir le champ d’adresse Internet de votre navigateur). La Redoute sait donc dans quel contexte d’interrogation ce message lui est adressé.

En fait, le seul vrai formulaire de contact, à mon sens, est celui d’Annonces Jaunes. Aucun message perturbateur, pas de champ superflu, une tabulation bien ordonnée, une gestion simple mais habile des erreurs de remplissage, des champs utiles et légitimes aux yeux de l’utilisateur. Encore que le nom et la civilité…

Le formulaire chez Annonces Jaunes

Utilisateur satisfait = client content

Bon ok, ce n’est pas aussi simple que ça. Nous évoluons dans un domaine où les stats nous apprennent tous les jours des choses qu’on n’a pas envie d’entendre. Je ne souhaite pas m’attarder sur ce point sans données concrètes analysées suite à des tests utilisateurs. Seulement, si l’on s’appuie sur une bonne dose de bon sens et un certain respect des conventions, un utilisateur aura beaucoup plus de chances de satisfaire ses interrogations sur le site de FNAC.com que sur NikeId.

Dans ce panel des meilleurs sites e-commerce 2007, s’ils remplissent très bien leurs principales fonctions, c’est à dire être un relai d’une marque ou d’un distributeur sur Internet, et même s’ils sont primés pour ça, beaucoup de choses restent à faire pour la satisfaction de l’utilisateur soit totale en toute circonstance. De plus, une analyse plus poussée du fonctionnement des formulaires (gestion des erreurs, intégration au site, accessibilité) montrerait bien d’autres lacunes, et cela pourra faire l’objet d’autres articles.

On peut cependant dégager quelques bonnes pratiques (complètement subjectives) qui sont mises en œuvre :

  • La section d’aide ou de contact est visible et identifiable;
  • Le formulaire de contact s’en tient au strict nécessaire en matière de demande d’informations à l’utilisateur;
  • Les parcours sont optimisés par des FAQ, qui mènent au formulaire de contact utilisé dans un contexte identifié.

La perfection n’existera certainement pas dans le domaine de la satisfaction client. Néanmoins, l’application de bonnes pratiques et de règles simples d’ergonomie peuvent permettre d’atteindre un niveau élevé de satisfaction.

PS : Si certains d’entre vous ont un avis ou un retour sur les agents conversationnels, çà m’intéresse. Parce qu’à part tester leur capacité à comprendre des insultes (la demoiselle virtuelle de FNAC.com, en plus d’être mignonne, est sacrément rancunière !), je n’ai jamais poussé l’expérience et l’analyse pour faire ressortir les pour et les contre de ces systèmes.

L’agent conversationnel de FNAC.com

Et merci à Vincent pour la relecture !

Designers Interactifs : Conférence sur la publicité

Même si je ne suis pas (encore) membre de l’association Designers Interactifs, j’ai pu assister la semaine dernière à la Conférence sur la publicité interactive qui se tenait chez Adobe France, sur l’avenue Kléber dans le 16ème.

Aurélie de Villeneuve, directrice de création chez Duke Interactive, a présenté brièvement les acteurs du processus de fabrication d’une publicité interactive. Elle a ensuite démontré au travers de 3 exemples pour Sony que l’interactivité et la créativité d’une publicité permettaient de s’affranchir des barrières posées par les formats préétablis en proposant du contenu à priori non souhaité par l’utilisateur, le détournant de son parcours sur le site support.

Amélie Boucher, consultante en ergonomie et fondatrice d’Ergolab, a présenté la publicité interactive par le regard de l’ergonome, en démontrant que la pub n’est pas anti-ergonomique, et en s’attachant à donner les bonnes pratiques qui ne mettront pas les utilisateurs en rogne contre le site support. Pour Amélie, une pub sera plus ou moins ergonomique en prenant en compte l’ergonomie de l’emplacement de la pub (dans le web, dans le site, dans la page) et l’ergonomie de la forme du contenu (limiter l’intrusion, ne pas tromper l’internaute). Elle a conclu en assurant que le respect de grands principes d’ergonomie n’allait pas à l’encontre de la fabrication de publicités sympas.

Benoît Drouillat, directeur de création de Wordappeal et président de l’association Designers Interactifs, a présenté 7 tendances actuelles de la publicité interactive, parmi lesquelles les réseaux sociaux, l’hypervidéo, la participation gestuelle de l’internaute, et l’explosion des formats.

Personnellement, j’ai été très heureux d’entendre les mots “bonnes pratiques” lors de la conférence d’Amélie, c’est une étape vers l’établissement de normes et l’application de standards, à l’image de ce qui est en train de (timidement, certes) se passer du côté du développement. Je suis ravi car c’est en mettant en place des bonnes pratiques dès la conception, et l’ergonomie fait partie de la phase de conception, que l’on arrivera à sortir des sites propres et réalisés pour l’utilisateur.

Cette conférence m’a aussi permis de mettre à jour mes connaissances sur toute la créativité des pubs actuelles. Je dois avouer qu’en tant que “surfeur” chevronné, j’applique le “banner blindness” puissance 1000 et ne voit plus une seule pub sur un site web…

Vous pouvez approfondir le sujet en allant lire le bilan de la soirée sur le blog de Designers Interactifs et en regardant les slides d’Amélie et ceux de Benoît directement sur Slideshare, le code généré par Wordpress pour intégrer l’embed me donne des hauts-le-coeur…

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.