Préférer la saisie assistée à l'autocomplétion

Ce que dit le référentiel

L'autocomplétion, ou complément automatique est une fonctionnalité très répandue consistant à suggérer à l'utilisateur des résultats correspondant à sa recherche pendant sa saisie. Par exemple, un site permettant de rechercher un itinéraire va proposer « Paris », « Lyon Part-Dieu » et « Paray le Monial » quand l'utilisateur tape « Par ».

L'implémentation de l'autocomplétion consiste à envoyer une requête au serveur à chaque caractère saisi pour récupérer les résultats correspondants. On peut donc avoir beaucoup de requêtes effectuées et beaucoup de ressources dépensées.

Dans la mesure du possible, cette fonctionnalité est à remplacer par la saisie assistée. Cela consiste à guider l’utilisateur par un ensemble d’informations et d’indices :

• Présentation du format attendu en grisé dans le champ de saisie (placeholder)
• Texte expliquant le format attendu
• Réaction de l’interface avec un message d’erreur ou un changement de couleur et aide textuelle lorsque la saisie est incorrecte
• etc.

Les interactions liées à la saisie assistée sont gérées localement, ce qui réduit les échanges avec le serveur.

Pour l'exemple de la recherche d'itinéraire et de la complétion des villes, il est possible, en cas d'ambiguïté, de proposer les différents résultats après la soumission du formulaire. L'utilisateur entre une chaine de caractère, par exemple « Lens », soumet le formulaire, et se voit à ce moment proposées différentes options : « Lens (France) », « Lens (Belgique) », « Loison sous Lens ».

Si le recours à l'autocomplétion ne peut pas être évité il est possible de minimiser le nombre de requêtes avec des optimisations simples :

• Ajouter un délai de quelque dixièmes de secondes entre l'ajout d'un caractère et la requête : cela permet de ne pas déclencher de requête si l'utilisateur n'a pas terminé sa saisie.
• Limiter le nombre de résultats affichés par l'autocomplétion, priorisés par une note de pertinence
• Fixer un nombre de caractères minimal avant de chercher à compléter.
• Si la taille de la base de données le permet, l'inclure dans le code html ou dans le local storage et effectuer l'autocomplétion côté client.
• Mettre en cache les résultats des recherches avec pour clef la chaîne saisie pour moins solliciter la base de données.
• Contextualiser les résultats pour en limiter le nombre.

Notre avis

Nous pouvons étudier et proposer des solutions techniques pour remplacer l'autocomplétion par des mécanismes de saisie assistée. React permet d'ajouter des éléments comme les placeholders dynamiques et des messages d'erreur en temps réel, améliorant l'expérience utilisateur tout en réduisant les requêtes serveur.

Si l'autocomplétion est indispensable, nous recommandons des optimisations comme des délais entre saisies et des requêtes différées pour limiter les interactions. Utiliser des librairies comme react-query pour gérer efficacement le cache côté client permet de minimiser la charge serveur tout en fournissant des suggestions pertinentes.