Retour à l'accueilLes interfaces
La page de recherche
La page de recherche se présente le plus souvent de deux manières différentes.
Soit l’input est incorporé dans une page de recherche externe ou alors il reste dans la page d’origine, une petite animation de focus imitant le clic.
L’exemple de Google Play est intéressant; une base de données gigantesque et surtout le fait que l’utilisateur sache probablement déjà quelle application il veut télécharger, conforte l’idée qu’un simple overlay réduit le nombre de clic jusqu’au téléchargement.
À l’inverse, une page entière est un bon moyen d’aider l’utilisateur dans sa réflexion, en lui proposant des facettes ou des suggestions.
Jet (IOS) et Play Store (Android)
Mais alors comment les guider depuis cette page ?
- Recherche récente
Proposer des recherches récentes encourage l’utilisateur à avoir un usage récurrent de l’application, l’incitant à revenir plus tard. C’est un bon choix par exemple pour des applications e-commerce, ou comportant des inputs utilisateurs assez complexes et demandant de la réflexion.
Plus la requête est compliquée à réaliser ou à mémoriser, plus le besoin d’un historique facilement accessible est important.
- Recherche populaire
Mise en exergue par les réseaux sociaux, comme vu plus haut avec l’exemple d’Instagram, mettre en avant des recherches populaires est plutôt un moyen d’aide à la décision, voir d’orientation, afin de mieux guider l’utilisateur vers ce dont il a besoin, ou vers un objectif de conversion plus rapide.
- Recherche par facettes
Les catégories peuvent aider l’utilisateur dans la spécification de sa recherche, en contextualisant ce qu’il veut trouver, ce qui peut être pratique dans des applications avec un catalogue trop important pour être filtré par des mots-clés.
Filtrer & Trier
Proposer des options de filtrage est essentiel dans les applications mobiles, que ce soit pour le confort de l’utilisateur ou pour lui proposer le meilleur contenu possible. Les possibilités sont infinies et dépendent totalement de votre indexation et de votre typologie de contenu. On observe parfois même l’utilisation unique de recherche par filtre, supplantant l’usage de mots-clés.
Les défis sont multiples :
Burberry (IOS), Ikea Place (IOS) et Over (IOS)
Notre but en tant que designers est de réduire le plus possible le parcours entre l’utilisateur le contenu qu’il recherche. Pour cela, identifier le principal atout d’un produit est essentiel.
L’application Ikea Place propose directement une barre de filtrage du prix après recherche. Un pari osé, car il supplante tous les autres filtres, mais qui permet sans superflus d’identifier directement les produits dans une gamme de prix, ce qui doit être le principal moteur de conversion pour Ikea.
Une page dédiée aux filtres prend le parti de sortir l’utilisateur de l’exploration et de se plonger dans le filtrage des résultats, tandis qu’une section rend le filtrage plus rapide et moins fastidieux, tout en réduisant le nombre de filtres affichables.
L’exemple d’Airbnb est un cas qui l’illustre bien. Elle propose tout d’abord une sélection de filtres couramment utilisés dans la zone de recherche, et donnent ensuite le nombre de résultats en fonction des filtres choisis. La fourchette de prix permet de voir combien de résultats apparaîtront dans telle gamme financière.
Airbnb (Android)
Tripadvisor (Android)
Ici Tripadvisor divise le filtrage en deux sections, les plus importants sont en haut et visibles tout le long de l’exploration de la page. D’autres moins utilisés sont accessibles via le bouton “Filtrer”.
Résultats
Navigation
Aujourd’hui la plupart des applications mobile se sont converties au scroll infini.
La preuve, il m’a été très difficile d’en trouver une avec de la pagination ou tout autre moyen de navigation. La popularisation de l’exploration sur mobile est une preuve du succès du scroll infini. Des applications comme Twitter, Instagram ou Facebook l’utilise pour afficher des résultats.
Mais cette solution n’a pas que des avantages. Plus l’utilisateur scrollera, plus l’application devra charger et afficher de contenu, ce qui peut par la suite limiter sa réactivité.
Une solution est le bouton “Voir plus”, affiché après un certain nombre de résultats. L’avantage est multiple, pouvoir compenser un possible manque de résultats pertinents avec la position de ce bouton; plus il sera haut afin de masquer les résultats qui semblent moins pertinents. Mais aussi afin de moins surcharger l’interface et de laisser l’utilisateur garder le contrôle.
Posons-nous également la question de l’éthique d’une telle démarche, est-il convenable de laisser un scroll infini qui ne laisse aucun contrôle à l’utilisateur sur l’interface ? Ou au contraire, est-il trop coûteux pour l’utilisateur de faire l’action du tap sur le bouton “Voir plus” ? À nous de décider, en connaissance de cause.
Visualisation
Dropbox (Android)
Agencer les résultats sous forme de liste permet de montrer un plus grand nombre de résultats.
La vue liste est judicieuse pour des applications dont le but n’est pas commercialle ou à visée exploratoire, mais plus indexative, comme Dropbox ci-contre.
Ici, le but est de retrouver le plus rapidement possible ces fichiers personnels.
La vue liste est aussi intéressante lorsque très peu de données sont suffisantes afin d’identifier un produit.
Mucho (IOS)
La visualisation par Cards est le moyen idéal pour mettre en valeur son produit, souvent à des finalités de vente.
Prenant le pas sur le nombre de résultats affichés sur la page, la forme doit être suffisamment attirante ou puissante pour convaincre l’utilisateur de la pertinence des résultats affichés selon l’objectif de conversion.
- L’exemple de Spotify
Spotify (Android)
Spotify utilise deux méthodes de visualisation en fonction de la qualité des données du résultat. Entre Boards of Canada et Drake, il n’y a pas photo en terme de contenu. Drake est aujourd’hui l’artiste le plus écouté de la plateforme depuis sa création. Comment Spotify matérialise cette différence dans son moteur de recherche ?
Pour BoC, qui possède moins de popularité et donc moins de contenu affilié, Spotify utilise la visualisation par liste, avec seulement une image, le titre et le nom de l’artiste pour visualiser son contenu. C’est pertinent dans le sens où en n’ayant pas fait d’effort de scroll, sept résultats apparaissent.
Pour Drake, Spotify se permet de faire remonter plus d’informations, avec la section “Avec Drake”, où des playlists et des radios avec celui-ci sont misent en avant. Sachant que ces contenus sont produits par Spotify et non par Drake, Spotify utilise les Cards afin de convaincre l’utilisateur de la pertinence de ses contenus, les Cards laissant la place aux visuels de s’exprimer.
- Ressources et Guidelines visuelles
Les applications mobiles se ressemblent souvent entre elles, cela n’échappe à personne.
Cette uniformisation vient de deux facteurs :
-
Le refus, surtout par Apple, d’applications non conformes aux standards visuels énoncés par les éditeurs de système d’exploitation mobiles.
-
La publication de ces mêmes standards visuels, ou guidelines, par Android et IOS, qui font maintenant figures de références lors de créations d’applications. Souvent parce que leur implémentation est native dans les environnements de développement (Android Studio, XCode), qui rend celui-ci beaucoup plus rapide.
Ces guidelines sont disponibles en ligne : Material Guidelines pour Android et Human Interface Guidelines pour IOS
- Microcopy
Il ne faut pas négliger non plus le wording de notre interface. Au lieu de simplement mettre un “Rechercher” comme placeholder de notre input, posons nous la question, pourrait-il inciter ou attirer l’utilisateur vers la recherche ? Ou pouvoir simplement devenir un autre support de l’identité de marque ? Mais comment, sur des phrases aussi courtes ? Grâce à un principe qu’on appelle la Microcopy.
La microcopy est une phrase ou un mot très court utilisée afin de synthétiser le contexte et le but d’une action.
Nous en voyons partout : Les boutons de formulaires, les labels d’en-têtes, ou aussi les placeholders des champs de recherche.
Pour trouver des exemples, je conseille ce site web, qui réunit beaucoup d’exemples de microcopies intelligentes.
Dans notre cas, la microcopy peut être utilisée à des endroits précis, comme par exemple le champ de recherche, les filtres et les résultats.
Airbnb (IOS) et Entale (IOS)
L’exemple d’Airbnb en est encore une fois une illustration assez claire. Le placeholder du champ de recherche est “Try Costa Brava” (En français même constat : “Essayez Barcelone” ). Airbnb nous incite subtilement à essayer de rechercher et de voir ce qu’il peut en retourner. Ou comme Entale, une application de podcast, qui se sert d’une microcopy pour contextualiser la recherche de l’utilisateur.
La Microcopy possède donc de multiples intérêts. En plus de l’effet attirant que certaines peuvent produire et qui peut servir l’intérêt de la marque, elle permet surtout de contextualiser la recherche pour l’utilisateur et ainsi le guider dans celle-ci.
Aller plus loin : Micro-Interactions
Je suis prêt à parier que vous ayez déjà entendu parlé des micro-interactions.
C’est un buzzword chez les designers, et comme n’importe quel buzzword il est abusé par beaucoup. Mais dans le cadre de la recherche, les micro-interactions symbolisent l’attention au détail, à la précision, qui si elles sont porteuses de sens, peuvent s’avérer très importantes pour votre application.
Je recommande ce livre https://www.amazon.de/Microinteractions-Full-Color-Designing-Details/dp/1491945923 ou cet article https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf afin d’en apprendre plus sur les les micro-interactions en général.
Les micro-interactions sont des petits détails, souvent d’interfaces, faisant références à des actions prises par l’utilisateur.
Elles servent principalement à Communiquez un feedback ou le résultat d’une action. Accomplir une tâche unique. Améliorer le sentiment de contrôle. Aider les utilisateurs à visualiser les résultats et prévenir les erreurs. Quelques exemples choisis: Le like d’instagram qui fait une petite animation une fois choisi; Le vibreur du téléphone lorsque le mode vibreur est activé.
Dans le cas des interfaces de recherche, les MIs nous seront très pratiques pour des actions telles que filtrer ou trier, où le besoin de visualisation et de contrôle est peut-être le plus fort. La vidéo ci-dessous est un exemple de filtres post-recherche sur l’application Airbnb :
Ici on peut remarquer deux micro-interactions principales :
- Sur les inputs, des petites animations émettent le feedback du tap de l’utilisateur
- L’animation de chargement sur le bouton, qui indique à l’utilisateur que son filtre est pris en compte et qu’Airbnb calcule le nombre de résultats correspondants.
Ici les micro-interactions sont utilisées à la fois pour
- Donner du feedback au choix des filtres
- Communiquer le chargement
- Valider l’application des filtres
