Introduction
L’auto-complétion de l’anglais autocomplete, est un pattern d’interface permettant d’assister l’utilisateur lors de la saisie d’une chaîne de caractères dans un champ texte (de recherche généralement). Il se présente sous forme d’une liste de résultats ou suggestions correspondants à la chaîne de caractères préalablement saisis.
Plus précisément, le système propose des éléments commençant ou éventuellement contenant les caractères saisis par l’utilisateur.
Ce pattern est devenu incontournable dès lors que l’on réalise une application riche dont on souhaite soigner l’utilisabilité.
On le retrouve notamment sur les champs des moteurs de recherche Web ou des sites d’e-commerce, dans les éditeurs de code source ou encore dans les clients de messagerie lors de la saisie d’un contact.
Dans le contexte des applications métiers où l’on recherche simplicité d’utilisation tout en gardant une certaine puissance fonctionnelle, cette fonctionnalité trouve également sa place.
Bien entendu, son implémentation technique est à étudier mais la technologie RIA Flex avec son approche orientée composant et sa flexibilité la facilite.
Mais quand et comment l’utiliser ? Quels sont les bons comportements à mettre en œuvre afin de s’adapter au mieux aux besoins des utilisateurs ?
L’auto-complétion représente une solution à trois objectifs d’un utilisateur :
- Accéder rapidement à l’information
- Prévenir les erreurs de saisie
- Explorer des données
Commençons avec quelques recommandations globales :
- Ajouter un feedback de chargement (loader) pour indiquer à l’utilisateur l’état du système lorsque le chargement des suggestions n’est pas instantané (recherche de correspondances dans une vaste base de données).
- Proposer une liste de 6 à 8 suggestions maximum.
Objectif utilisateur n°1
Accéder rapidement à l’information
L’utilisateur ne veut pas perdre son temps et il s’attend à retrouver dans les applications métiers les fonctionnalités dont il dispose dans ses applications quotidiennes et dont il a l’habitude de profiter.
Lorsqu’il sait ce qu’il cherche, l’auto-complétion joue un rôle d’accélérateur/facilitateur. Elle permet un accès plus rapide aux informations qu’il s’agisse d’un nombre de résultats limité (liste, combobox) ou non (recherche Web).
Sous Mac OS X, l’utilisateur peut lancer rapidement une application ou ouvrir un fichier en quelques frappes clavier grâce à l’outil de recherche Spotlight.
Nos recommandations :
- Sélectionner par défaut le premier résultat de la liste pour accélérer la validation (économie d’un appui sur la touche flèche Bas pour la sélection).
Voir l’exemple ci-dessus. - Permettre la navigation au clavier dans la liste de résultats :
L’utilisateur est en train de saisir des caractères, il a donc les mains sur son clavier et non sur sa souris. Il est primordial de l’autoriser à se déplacer dans les résultats à l’aide des flèches Haut et Bas du clavier, à compléter sa saisie avec la touche Tab et à valider un résultat avec la touche Entrée.
L’utilisateur n’est donc pas obligé de changer de mode d’interaction pour sélectionner un résultat. - Mettre en évidence le lien entre les résultats proposés et la saisie de l’utilisateur surtout si les résultats ne débutent pas par les caractères saisis.
Objectif utilisateur n°2
Prévenir les erreurs de saisie
Si l’auto-complétion est efficace pour accélérer le remplissage, elle permet aussi de prévenir les erreurs de saisie. En effet, lors de la saisie de mots ou noms compliqués ou dont l’utilisateur ne maîtrise pas l’orthographe, elle l’empêche de commettre une erreur en saisissant des données incorrectes.
Les solutions alternatives à l’utilisation de ce pattern sont l’utilisation d’un référentiel (sélection dans une liste de contact, un dictionnaire, …) ou une vérification a posteriori (déconseillée et pouvant vite s’avérer fastidieuse).
Nos recommandations :
- Afficher une liste de résultat vide avec un message dans la liste (ex. : « Aucun résultat ») lorsque aucune donnée ne correspond à la saisie.
Ce feedback informe l’utilisateur d’une potentielle erreur de saisie comme une faute de frappe. - Afficher dans le champs de saisie, avec un contraste réduit, le premier élément de la liste de suggestions à la suite de la chaîne de caractères saisie par l’utilisateur.
Ce procédé est mis en œuvre par Google pour guider l’utilisateur dans sa saisie.
- Tenter de prévenir une éventuelle erreur de l’utilisateur et d’en proposer une correction.
- Proposer des suggestions avec plusieurs dénominations par item pour s’adapter aux habitudes de tous les utilisateurs.
Si les données à sélectionner supportent plusieurs nomenclatures/dénominations comme par exemple un produit identifié par un libellé textuel, un code et une référence (ex. : libellé : “Peugeot 207 CC”, code : “Z89”, référence : “1PZ0”), l’auto-complétion doit s’adapter aux habitudes et aux connaissances des différents utilisateurs et permettre la saisie et la reconnaissance des trois dénominations. L’association des trois dans la liste des résultats peut également permettre à l’utilisateur de confirmer sa saisie, voire de gagner en performance (ex. : apprentissage du code “Z89” plus rapide à saisir). (voir la liste des codes projets Peugeot)
Objectif utilisateur n°3
Explorer des données
Lors d’une recherche Web par exemple, l’utilisateur ne sait pas exactement ce qu’il doit saisir pour obtenir les résultats qu’il recherche. Dans ce cas, le rôle de l’auto-complétion est de l’orienter en lui proposant des suggestions permettant de le guider dans la rédaction de la requête et ainsi lui permettre d’obtenir des résultats pertinents.
Nos recommandations :
- Si le nombre de résultats est très important, se limiter aux résultats qui débutent par les caractères saisis pas l’utilisateur et les classer selon la correspondance orthographique et la popularité. Les caractères qui sont mis en évidence dans la liste de suggestions ne sont alors pas ceux qui ont été saisis, car ils sont toujours au début, mais les autres pour mettre en valeur les propositions du système.
- Présenter les résultats au fil de la rédaction de la requête et la navigation dans la liste de suggestions pour permettre à l’utilisateur d’avoir un aperçu direct des résultats associés avant de modifier ou terminer sa recherche.
Conclusion
Au même titre que les applications riches destinées au grand public, les applications métiers doivent proposer à l’utilisateur ce type de pattern.
L’expérience nous a montré que lorsque cette fonctionnalité a été correctement spécifiée et prévue au bon moment, sa mise en œuvre fonctionnelle et technique n’est pas complexe.
Son apport en terme d’efficience est réel mais aussi au niveau du ressenti global par rapport à une application. Elle est plus intuitive et plus réactive dans le dialogue avec l’Homme.
Pour terminer, sachez que la librairie Flex Klovis par Kap IT propose deux composants open-source Autocomplete (Flex 4) correspondant à deux nuances d’usage. Il ne faut pas s’en priver !
- Autocomplete: Search : auto-complétion sur un ensemble d’éléments. Voir la live démo du composant Autocomplete: Search
- Autocomplete: Filter : Auto-complétion sur un ensemble d’éléments fini avec la possibilité de découvrir directement ces éléments grâce à l’emploi d’un bouton pour ouvrir la liste des éléments. Voir la live démo du composant Autocomplete: Filter
- Page de présentation/téléchargement de la librairie open-source Klovis