Créer une expérience de recherche mobile exceptionnelle

Piège n° 1 : Petit écran, gros doigts

Nombre des difficultés rencontrées sur les plateformes mobiles proviennent de la limitation extrême de l'espace d'affichage. Une erreur fréquente consiste à vouloir afficher toutes les données disponibles comme sur un ordinateur de bureau.

De plus, transférer des informations de l'esprit à une application est facile lorsque l'utilisateur peut utiliser ses dix doigts sur un clavier de taille normale. C'est beaucoup plus difficile lorsqu'il tapote sur un écran mobile avec deux pouces. Sur mobile, la quantité d'informations transmises est considérablement réduite.

Piège n° 2 : Les utilisateurs mobiles sont, eh bien, mobiles

Nous utilisons nos téléphones portables dans des conditions loin d'être optimales, par exemple dans un train qui tangue ou en marchant. Ces environnements ne favorisent pas une bonne concentration et peuvent rendre la saisie d'informations plus difficile pour l'utilisateur.

Piège n° 3 : Le réseau, ou son absence

L'avantage du mobile réside dans la possibilité d'emporter son appareil partout avec soi et de se connecter à Internet. Cependant, la couverture réseau n'est pas toujours optimale, même dans les villes les plus fréquentées. Une mauvaise connexion est extrêmement frustrante pour l'utilisateur : il est donc essentiel d'anticiper les interruptions de service et d'adapter son offre en conséquence.

Piège n° 4 : Compromis entre quantité et qualité

Compte tenu des contraintes mentionnées, le nombre de résultats affichés et la quantité d'informations fournies pour chaque résultat sont des éléments essentiels. Moins de résultats par page impliquent une plus grande exigence de pertinence : il est impensable d'afficher un seul résultat de mauvaise qualité si seulement 5 résultats sont affichés. La quantité d'informations par résultat doit être réduite au minimum afin de répondre à deux objectifs simples :

1. Ce résultat est-il pertinent pour la requête ?
2. Ce résultat est-il intéressant en soi ?

Pensez également au filtrage et à l'affinage. Sur un ordinateur de bureau, la barre latérale offre suffisamment d'espace pour inclure des filtres et des facettes ; en revanche, lorsque l'espace à l'écran est limité et que l'interface utilisateur est tactile, vous devrez privilégier l'un ou l'autre.

Les appareils mobiles doivent donner aux utilisateurs l'impression d'avoir accès à tout du bout des doigts, mais en coulisses, nous devons être sélectifs parmi la multitude d'options d'affichage de notre application mobile.

Piège n° 5 : La recherche est un processus actif

Un écran tactile est idéal lorsque l'utilisateur consulte du contenu de manière semi-passive, mais la recherche est plus complexe. L'utilisateur doit saisir du texte puis analyser les résultats. Le processus de recherche est loin d'être instantané : minimiser l'effort de l'utilisateur, notamment le nombre de clics, est crucial. Nous devons proposer un contenu pertinent en limitant au maximum les reformulations nécessaires.

Piège n° 6 : Attentes élevées des utilisateurs

Les utilisateurs sont habitués à des recherches rapides et réactives. Depuis des années, Google propose des suggestions de requêtes pertinentes en temps réel, instantanément. Amazon, de son côté, nous donne accès à son immense catalogue, consultable grâce à un menu déroulant de suggestions automatiques et à des filtres dynamiques. Pour offrir une expérience de recherche de qualité, nous devons satisfaire, voire dépasser, les attentes des utilisateurs déjà établies par les géants du secteur.

Section 2 : Comment, quoi et pourquoi – solutions aux pièges de l’expérience utilisateur mobile

Maintenant que nous avons examiné les principaux problèmes que les appareils mobiles peuvent présenter en matière d'expérience de recherche, quelles sont les mesures que nous pouvons prendre pour les atténuer ?

La solution réside dans une interaction stratégique entre la barre de recherche et les résultats. Cela concerne la configuration de votre barre de recherche, le contenu de votre écran de recherche et, surtout, la raison pour laquelle l'utilisateur effectue une recherche : les résultats eux-mêmes. Tous ces éléments doivent s'harmoniser pour offrir une expérience utilisateur à la fois cohérente et agréable.

Comment : Configurer la barre de recherche

Le choix de la manière de guider l'utilisateur dans sa recherche mobile dépend de nombreux facteurs : la taille et la complexité de votre ensemble de données, les connaissances attendues de l'utilisateur sur ces données, et votre volonté d'équilibrer découverte et intention dans l'expérience de recherche. La forme et l'emplacement de votre barre de recherche sur l'écran mobile sont des éléments importants qui influencent la navigation de l'utilisateur dans votre application. Trois options sont généralement proposées : barre de recherche complète, barre d'onglets et icône.

Barre de recherche complète

La barre de recherche complète apparaît généralement en haut de l'écran principal, offrant un accès instantané à la fonction de recherche.

Si votre produit ou application vise à offrir à vos utilisateurs un accès rapide et facile à une grande quantité de contenu, alors c'est la solution idéale. La recherche devient l'élément central de l'interaction utilisateur, les résultats s'affichant en temps réel sous la barre de recherche.

Barre d'onglets

La barre d'onglets n'est pas toujours une barre à proprement parler ; il s'agit souvent d'une icône qui, lorsqu'on clique dessus, redirige les utilisateurs vers une page de recherche distincte de votre page d'accueil. Pensez à utiliser la barre d'onglets si la recherche n'est pas le principal point d'accès à votre contenu, mais que vous souhaitez tout de même la rendre accessible aux utilisateurs. Par exemple, Spotify privilégie les suggestions d'albums, de playlists ou de titres sur son écran d'accueil, mais on peut accéder à un titre précis via son icône dans la barre d'onglets.

Icône

L'icône de recherche contextuelle est l'une des options les moins intrusives. C'est sans doute l'approche la plus flexible : vous pouvez afficher le bouton uniquement dans les parties de l'application où la recherche est pertinente.

Pour Gmail, l'utilisation principale consiste à consulter les courriels dans la boîte de réception. L'icône de recherche située dans la barre de navigation en haut à droite permet aux utilisateurs de rechercher parmi tous les courriels.

Quoi : Afficher son intention via l’écran de recherche

Dès qu'un champ de recherche est rempli via l'une des configurations de recherche décrites précédemment, l'intention de l'utilisateur est indiquée. Cette intention peut être perçue comme une transition entre l'interface principale (hors recherche) et la page de résultats.

Faciliter ce parcours grâce à une interface utilisateur bien pensée peut aider l'utilisateur à effectuer sa recherche. Au lieu d'un tableau vide par défaut qui attend que l'utilisateur récupère et affiche le contenu, il existe de meilleures options pour l'accompagner jusqu'à son panier.

• Recherches récentes : lorsqu’un utilisateur recherche un produit, il est judicieux de lui proposer un aperçu rapide et pratique de ses recherches précédentes à des fins de comparaison.
• Recherches populaires : Guidez l’utilisateur en lui montrant les recherches effectuées par d’autres utilisateurs dans votre application. Cela permet à un client en manque d’inspiration de découvrir facilement des produits.
• Catégories : Proposez à l’utilisateur plusieurs options de filtrage thématiques. Plus vous affinerez votre recherche et plus vous la préciserez, plus vous trouverez rapidement ce que vous cherchez.

Pourquoi : Stratégie d’affichage des résultats

L'écran de résultats affiche la réponse à la requête de l'utilisateur et doit répondre à la principale motivation des acheteurs qui visitent votre site e-commerce. Cet écran doit être pertinent et organisé, ce qui représente un véritable défi si votre catalogue est important ou si le périmètre de la recherche est imprécis. La recherche en temps réel peut s'avérer très utile. Aujourd'hui, les utilisateurs s'attendent à une recherche instantanée, tant au niveau de la rapidité d'affichage des résultats que de leur fréquence de mise à jour. Grâce à cette fonctionnalité, chaque frappe au clavier génère de nouveaux résultats, actualisés instantanément.

Voici trois stratégies UX qui s'appuient sur la fonctionnalité de recherche en temps réel :

Suggestions de recherche

Les suggestions de recherche offrent une brève pause entre la recherche et l'affichage des résultats, facilitant ainsi le tri parmi les résultats denses. Lorsqu'une requête est saisie, les résultats génèrent des suggestions complètes, triées par popularité ou pertinence. Par exemple, si je saisis « iPhone » dans le champ de recherche, les suggestions affichées seront des suggestions basées sur la saisie textuelle, comme « coque iPhone » et « câble iPhone ».

Les bonnes pratiques recommandent de minimiser le nombre de clics et de défilements nécessaires à l'utilisateur pour atteindre sa destination. Bien que les suggestions de requêtes ajoutent une étape, elles constituent une excellente solution pour les utilisateurs effectuant des recherches dans d'immenses ensembles de données, où le volume de résultats possibles pourrait les submerger.

Entre le risque de se perdre parmi trop de résultats et le risque de cliquer une fois de plus, les suggestions de requêtes constituent une stratégie préférable pour obtenir des résultats à la fois rapides et pertinents.

Instant résultats

Les résultats instantanés répondent à la question « pourquoi ? » en procédant à l'inverse. Ils affichent un ensemble limité de résultats, partant du principe que la recherche est terminée. Cette approche est particulièrement efficace lorsque l'ensemble de données est restreint ou lorsque l'utilisateur a une idée précise de ce qu'il recherche. Dans l'exemple de Spotify, le service limite naturellement la recherche aux albums, chansons, playlists et artistes. Lorsqu'une recherche comme « Beatles » est effectuée, afficher « Les Beatles (artiste) » en premier résultat évite les étapes inutiles entre la requête et les résultats. Les informations complémentaires liées à la requête, telles que les albums, les chansons et les playlists, peuvent être affichées par petits groupes au fur et à mesure que l'utilisateur fait défiler la page.

Combinaison de suggestions de requêtes et de résultats instantanés

Il est également possible de combiner les deux stratégies afin de permettre aux utilisateurs d'accéder plus rapidement au contenu ou au produit recherché. Cette approche mixte est efficace lorsqu'on dispose d'un grand volume de données et qu'on est capable d'identifier des correspondances pertinentes dans les résultats. Le Google Play Store utilise cette stratégie pour afficher les résultats de la recherche « airbnb ». Le premier résultat redirige directement vers l'application Airbnb (bien qu'il existe des millions d'autres applications, celle-ci est la plus probable), tandis que les résultats suivants, plus précis, se rapprochent de la requête initiale.

Section 3 : Concevoir une expérience utilisateur mobile esthétique

En matière d'expérience utilisateur mobile, la notion de beauté est légèrement différente. Certes, l'harmonie visuelle de votre barre de recherche avec le design de votre site mobile est importante. Mais du point de vue de l'expérience utilisateur, l'affichage mobile reflète-t-il l'état de votre recherche ou de vos filtres ? L'assiste-t-il et la complète-t-il pour offrir une expérience à la fois agréable à regarder et fonctionnelle ?

Afficher les résultats correctement

Lors de l'affichage des résultats de recherche, l'utilisateur doit pouvoir visualiser et sélectionner facilement l'article. Il est donc important de présenter l'information de manière percutante tout en optimisant l'espace limité à l'écran. Commencez par analyser comment les clients parcourent votre catalogue. Pour les articles sélectionnés visuellement, comme les chaussures ou les vêtements, vous pouvez présenter les résultats de recherche sous forme d'images agrandies.

En revanche, des filtres comme le prix, la distance et les notes peuvent être utilisés pour afficher les résultats des entrées très spécifiques, comme les restaurants.

Affichage des commentaires lors du filtrage

Les filtres permettent de cibler les résultats et de consulter rapidement un grand nombre de données. Cependant, il est difficile d'afficher à la fois les filtres et les résultats de recherche dans la même vue sans surcharger l'écran.

Mais la plupart du temps, nous devrons afficher une vue dédiée avec tous les filtres possibles. Les interfaces de filtrage efficaces ont un point commun : elles fournissent un retour d’information lorsque l’utilisateur applique un filtre.

Par exemple, Amazon affiche un panneau occupant les deux tiers de la largeur de l'écran mobile. Lorsqu'un filtre est appliqué, l'affichage des résultats de la recherche en arrière-plan se met à jour instantanément pour afficher les nouveaux résultats.

Un autre exemple est l'application Airbnb, où un bouton en bas de l'écran affiche le nombre de résultats à chaque modification d'un filtre.

Afficher les résultats pertinents

La pertinence est primordiale sur mobile, car la petite taille de l'écran limite le nombre de résultats affichés. Sur ordinateur, le résultat le plus pertinent n'a pas forcément besoin d'être en tête de liste, puisque l'utilisateur peut faire défiler la page. Sur mobile, l'espace restreint fait que seuls les premiers résultats de recherche sont visibles ; ils doivent donc impérativement être pertinents.

Section 4 : Ergonomie : respecter l'effort de l'utilisateur

Repérer les fautes de frappe

Les fautes de frappe sont malheureusement fréquentes, surtout sur les petits écrans des téléphones portables. Un système tolérant aux fautes de frappe vous permettra d'anticiper l'intention de l'utilisateur tout en fournissant des résultats proches de ce que la saisie erronée tente de communiquer.

Laissez-les analyser les résultats

La mise en évidence des résultats permet aux utilisateurs de les parcourir rapidement et de comprendre l'origine de certains résultats ou suggestions. Cette mise en évidence présente deux avantages majeurs. La mise en évidence standard, qui correspond exactement à la requête, est idéale pour afficher des résultats instantanés.

La seconde est la mise en évidence inversée, qui met en évidence tout sauf la requête de recherche. Cette stratégie est particulièrement utile pour les suggestions de requêtes .

Environnement : vitesse et connectivité

L'expérience de recherche doit être adaptée aux conditions d'utilisation d'un appareil mobile avec une connexion faible. Elle doit réagir au mieux à ces circonstances afin de garantir une expérience utilisateur optimale.

Lorsque la connexion est lente, il existe des options permettant à l'utilisateur de suivre l'avancement de sa tâche et de recevoir des commentaires :

1. Utilisez un indicateur de progression comme une roue de chargement, une icône de chargement ou une barre de progression.
2. Affichez un écran squelettique avec des espaces réservés, comme illustré dans la capture d'écran ci-dessus. Cela permet à l'utilisateur de visualiser la progression et de recevoir un retour d'information.
3. Mettez en œuvre le chargement différé, qui consiste à donner la priorité à certains types de contenu par rapport à d'autres et à les récupérer séparément.

Dans le cas redouté d'une absence totale de réseau, vous pouvez offrir à l'utilisateur de meilleures options que le simple affichage d'un bouton « réessayer » : vous pouvez mettre en cache les meilleurs résultats hors ligne, puis proposer une expérience de recherche locale basique.

Une meilleure solution consiste à proposer un moteur de recherche léger et complet directement sur l'appareil, capable d'effectuer la plupart des tâches d'un moteur en ligne. Cependant, cette solution n'est pas à la portée de tous et exige beaucoup de compétences, de ressources et de temps, comme nous l'avons constaté en la développant avec Algolia .

Section 5 : Points clés à retenir

La recherche doit s'inscrire dans un dialogue fluide entre l'utilisateur et le produit, notamment sur mobile. Dans un souci d'expérience utilisateur optimale, le parcours client, de la requête à l'ajout au panier, doit être simple et intuitif.

Mais pour que les consommateurs puissent commencer à formuler leurs questions, il est important de mettre en place des stratégies visant à surmonter les limitations imposées par l'affichage mobile.

1. Il est nécessaire de contourner les difficultés physiques telles que l'effet de gros doigt et la connectivité erratique d'un réseau.
2. Bien que l'emplacement de votre barre de recherche ou la manière dont les résultats sont présentés puissent sembler évidents, l'application d'une stratégie UX appropriée fait toute la différence pour offrir à l'utilisateur un accès plus rapide au panier d'achat.
3. Sur mobile, les utilisateurs sont constamment en déplacement, souvent avec une connexion internet faible ou inexistante. L'expérience de recherche doit s'adapter à ces conditions afin de garantir une navigation fluide.
4. Le mobile est un puissant catalyseur pour connecter les acheteurs à votre site : grâce à des expériences de recherche et de navigation performantes, vous pouvez éliminer les obstacles à la recherche du bon produit et augmenter la taille du panier, aussi bien sur mobile que via des stratégies omnicanales.

À propos d'Algolia

Algolia permet aux entreprises e-commerce de créer des expériences de recherche et de découverte rapides, pertinentes et intuitives, optimisant ainsi les conversions, l'engagement et la fidélisation client. Nous offrons des expériences d'achat personnalisées et dynamisons votre stratégie digitale grâce à des technologies de recherche sophistiquées, comme la recherche conversationnelle. Plus de 9 000 entreprises, telles que Under Armour, Lacoste, Birchbox, Dior, L'Occitane en Provence et Bringmeister, font confiance à Algolia.