Recommandations en matière de recherche

Applies to Windows and Windows Phone

Exemple de contrôle de zone de recherche standard

Utilisez ces recommandations pour fournir des résultats de la recherche pour le contenu de votre application. Les recommandations offrent de l’aide pour l’affichage de suggestions de recherche et de texte d’espace réservé dans la zone de recherche, et pour la conception d’une page de résultats de recherche.

Voir cette fonctionnalité en action dans le cadre de notre série Fonctionnalités d’application de A à Z:  Interface utilisateur des applications du Windows Store de A à Z

Description

La zone de recherche est un contrôle dans lequel l’utilisateur peut entrer le texte d’une requête de recherche.

Pensez à ajouter une zone de recherche au Canvas de votre application si la recherche permet d’accéder au contenu au sein de votre application. Une zone de recherche permet aux utilisateurs de savoir par où commencer. Si l’espace représente un problème pour votre disposition, utilisez une icône qui s’étend pour afficher une zone de recherche. Vous pouvez également placer la zone de recherche dans la barre de l’application. Envisagez de placer la zone de recherche sur chaque page de votre application. Les utilisateurs peuvent être désorientés si certaines pages comportent une zone de recherche et pas d’autres, mais cette décision dépend du contexte et de l’objectif de votre application.

Exemple

Capture d’écran du contrôle de zone de recherche standard

Implémentation de la recherche

Si votre application propose du contenu que les utilisateurs peuvent rechercher, ajoutez une zone de recherche au Canvas de l’application.

  • Utilisez le contrôle SearchBox pour les applications du Windows Store en C++, C# ou Visual Basic, et l’objet WinJS.UI.SearchBox pour les applications du Windows Store en JavaScript.

  • Indépendamment de l’emplacement du contenu de votre application, par exemple sur le système de fichiers local ou via un service Web, la zone de recherche vous permet de répondre aux requêtes des utilisateurs et d’afficher les résultats de recherche dans une page d’application que vous aurez conçue vous-même.

  • Une zone de recherche permet aux utilisateurs de savoir par où commencer. Si l’espace représente un problème pour votre disposition, utilisez une icône qui s’étend pour afficher une zone de recherche. Vous pouvez également placer la zone de recherche dans la barre de l’application.

  • Si vous avez besoin d’une interface utilisateur de recherche dans la barre de l’application, placez-la dans la barre de l’application supérieure. Dans les applications du Windows Store en JavaScript, vous pouvez placer l’interface utilisateur de recherche dans la barre de navigation.

  • Envisagez de placer la zone de recherche sur chaque page de votre application. Les utilisateurs peuvent être désorientés si certaines pages comportent une zone de recherche et pas d’autres, mais cette décision dépend du contexte et de l’objectif de votre application.

Personnalisation des suggestions et du texte d’espace réservé dans la zone de recherche

Quand des utilisateurs commencent à saisir une requête dans la zone de recherche, l’application affiche des suggestions de recherche dans un menu volant de suggestions sous la zone de recherche. L’application fournit ces suggestions à l’aide des méthodes AppendResultSuggestion et AppendQuerySuggestion.

La zone de recherche accepte un maximum de 25 suggestions de recherche.

Une application peut fournir deux types de suggestions de recherche : des suggestions de requêtes et des suggestions de résultats. Vous pouvez considérer les suggestions de résultats comme des réponses et les suggestions de requêtes comme des possibilités.

  • Les suggestions de requêtes sont souvent des suggestions de saisie semi-automatique basées sur le texte de requête entré par l’utilisateur. Elles fournissent des requêtes de recherche que l’utilisateur est susceptible d’exécuter. Par exemple, imaginons que l’utilisateur recherche une application dans l’application du Windows Store et entre la requête « word » (mot) dans la zone de recherche de l’application du Windows Store. Les termes « Wordament » et « Wordpress » peuvent lui être suggérés mais les requêtes « word games » et « words » peuvent également compter parmi les suggestions. Si l’utilisateur sélectionne l’une des suggestions de requête, l’application du Windows Store affiche une page de résultats de recherche pour la requête sélectionnée. Même si les suggestions de requêtes sont en général des suggestions de saisie semi-automatique, cela n’est pas une obligation. Par exemple, si vous recherchez « œufs » dans une application de recettes, « quiche » est une suggestion de requête possible.

  • Les suggestions de résultats sont des correspondances fortes ou exactes, affichables immédiatement, de la requête que l’utilisateur est susceptible de vouloir exécuter. Par exemple, l’application Wordament est suggérée en tant que résultat sous l’étiquette Recommandations pour la requête « word » dans l’application du Windows Store. Si l’utilisateur sélectionne la suggestion de résultat Wordament, l’application du Windows Store renvoie l’utilisateur directement à la page de l’application Wordament dans le Windows Store.

Les suggestions de résultats, qui sont habituellement des correspondances plus proches, s’affichent en haut du menu volant des suggestions, suivies des suggestions de requêtes.

Quand l’utilisateur saisit une requête de recherche, le système affiche automatiquement des suggestions de l’historique de recherche pour les requêtes possibles dans la zone de recherche. Ces suggestions sont basées sur les interactions précédentes de l’utilisateur avec la zone de recherche de votre application, avant les suggestions fournies par l’application. Vous pouvez désactiver l’historique de recherche.

N’utilisez pas de suggestions pour filtrer ou définir l’étendue des résultats de la recherche pour votre application. Les options de filtrage et d’étendues doivent être placées avec les résultats, dans la page des résultats de recherche de l’application, où ils peuvent être affinés au besoin. À l’opposé, les suggestions doivent être reprises dans la zone de recherche, car elles sont directement liées au texte de la requête que l’utilisateur entre.

Suggestions de requêtes

  • En règle générale, envisagez de fournir des suggestions de requêtes pour aider l’utilisateur à trouver rapidement ce qu’il cherche.

  • Utilisez les suggestions de requêtes comme moyen de saisie semi-automatique du texte de requête recherché par les utilisateurs dans votre application. De cette façon, les utilisateurs n’ont pas à saisir la totalité du texte de requête, ce qui accélère le processus de recherche. Au lieu de saisir leur requête en entier, les utilisateurs peuvent sélectionner l’une des requêtes suggérées et lancer immédiatement la recherche.

  • Si l’utilisateur sélectionne une suggestion de requête, il doit pouvoir accéder directement à une page de résultats de recherche pour la requête sélectionnée.

  • Les suggestions de requêtes de votre application doivent contenir le texte de la requête actuelle de l’utilisateur. Étant donné que les suggestions de requêtes sont généralement des suggestions de saisie semi-automatique basées sur le texte de la requête actuelle, elles doivent contenir ce texte.

  • Vos suggestions de requêtes doivent refléter le contenu de votre application et les résultats qu’elle peut offrir, au lieu de fournir des résultats à partir d’un contexte plus global. En effectuant des recherches dans le contenu que votre application peut fournir, elles aident les utilisateurs à imaginer ce qui leur est possible de rechercher dans votre application. Par exemple, l’application Météo complète automatiquement la requête de l’utilisateur afin de suggérer des villes pour lesquelles elle peut proposer des bulletins météorologiques.

Suggestions de résultats

  • Si vous souhaitez suggérer des correspondances fortes ou exactes pour la requête de l’utilisateur, fournissez plutôt des suggestions de résultats.

  • Utilisez les suggestions de résultats pour mener directement l’utilisateur aux détails d’un résultat en particulier sans le diriger au préalable vers une page de résultats de recherche.

  • Une suggestion de résultat doit être constituée d’une miniature ou d’une image appropriée, d’un titre ou d’un libellé pertinent et d’une courte description. La taille de l’image est fixée à 40x40 pixels.

  • L’image, le titre et la description aident l’utilisateur à déterminer rapidement si le résultat suggéré correspond à ce qu’il cherche.

  • Avec un jeu de résultats de petite taille, envisagez de filtrer les résultats sur le Canvas de l’application, ce qui signifie qu’à mesure que l’utilisateur tape, les résultats sont immédiatement mis à jour à chaque séquence de touches. Il s’agit d’une forme de filtrage à mesure que l’utilisateur tape. Par exemple, l’application Liste de lectures filtre les résultats de cette façon. L’historique de recherche doit être désactivé et l’application met à jour sa zone de dessin aussi vite que possible. L’implémentation de cette fonctionnalité dépend des performances de l’interface utilisateur et de la vitesse à laquelle vous pouvez renvoyer un jeu de résultats de petite taille, généralement avec dix résultats au maximum. Si l’utilisateur doit taper plus de trois caractères pour obtenir un jeu de dix résultats, envisagez d’utiliser les suggestions comme décrit précédemment.

Séparateurs

  • Utilisez un séparateur pour définir un groupe de résultats similaires ou alignés de manière conceptuelle.

  • Des séparateurs peuvent être ajoutés à la liste de suggestions fournie par votre application dans la zone de recherche, mais chaque séparateur compte pour la limite des 25 suggestions.

  • Si vous voulez fournir plusieurs types de suggestions de résultats, utilisez des séparateurs associés à des libellés pour aider les utilisateurs à distinguer les différents résultats. Par exemple, si vous fournissez plusieurs suggestions pour des résultats avec des types de contenus différents (comme des films et des émissions de télévision), utilisez un séparateur avec un libellé de façon à bien distinguer les types de contenus « films » et « émissions de télévision ».

Texte d’espace réservé

  • Envisagez d’utiliser le texte d’espace réservé dans la zone de recherche pour décrire ce que les utilisateurs peuvent rechercher dans votre application. Par exemple, une application de recettes peut afficher « Recherche de recettes ».

  • Affichez le texte d’espace réservé uniquement quand la zone de recherche est vide. Effacez le texte d’espace réservé quand l’utilisateur commence à taper dans la zone de recherche.

  • Le texte d’espace réservé de la zone de recherche doit décrire brièvement le contenu de votre application sur lequel peuvent porter les recherches. Par exemple, dans une application musicale où il est possible de faire des recherches par titre d’album, titre de chanson ou nom d’artiste, le texte d’espace réservé peut être défini comme suit : Album, Artiste ou Chanson.

  • Utilisez le texte d’espace réservé pour fournir un contexte à l’utilisateur sur l’objet de la recherche. Cela est important lorsque des recherches sont effectuées dans un sous-ensemble de l’application dans un contexte donné. Par exemple, utilisez un texte comme « Artiste » ou « Album » dans une application musicale qui recherche des artistes ou albums dans les sous-sections consacrées à ces sujets.

Conception d’une page de résultats de recherche

Créez votre expérience de recherche autour de votre marque. L’expérience utilisateur des résultats de la recherche doit être adaptée à votre contenu, de la même façon que vous présentez le contenu dans votre application.

Quand les utilisateurs soumettent des requêtes de recherche à votre application, une page doit s’afficher pour présenter les résultats de recherche correspondant à la requête. En tant que concepteur de la page de résultats de recherche de votre application, il vous revient de présenter des résultats pertinents et faciles à exploiter pour l’utilisateur.

Affectez un titre à la page de résultats de la recherche et placez le texte de la requête de l’utilisateur dans la zone de recherche pour fournir un contexte.

Indiquez le classement des résultats de la recherche en les organisant et en les disposant par degré de pertinence, du meilleur résultat au plus faible.

Indiquez pourquoi un résultat de recherche correspond à la requête.

Ne faites pas pivoter l’icône de recherche dans les langues bidirectionnelles.

Mettez en surbrillance les termes recherchés correspondants pour afficher la partie de la suggestion qui correspond à la requête. Cela est très utile dans tous les cas si la propriété de correspondance est affichée pour l’utilisateur.

Filtrage des résultats

  • Vous pouvez améliorer la page des résultats de recherche de votre application en permettant aux utilisateurs de définir des filtres et des étendues pour affiner le jeu des résultats de recherche.

  • Si un grand nombre de résultats sont retournés d’une requête, envisagez de fournir à l’utilisateur un moyen de filtrer les résultats.

  • Laissez les utilisateurs filtrer et modifier l’étendue des résultats de recherche à partir de la page des résultats de la recherche.

  • Indiquez le nombre de résultats disponibles avec chaque filtre ou dans chaque étendue. Ceci aide les utilisateurs à comprendre s’ils affinent efficacement leur recherche.

  • Donnez la possibilité d’effacer les filtres et de voir tous les résultats.

Dimensionnement de la zone de recherche

  • Quand vous utilisez le contrôle de zone de recherche dans l’application, gardez à l’esprit les différentes tailles de fenêtres et la position du contrôle par rapport au titre.

  • Évitez de détourer le titre.

  • Dans les fenêtres plus petites, vous voudrez peut-être réduire la zone de recherche à un bouton avec l’icône de recherche, suivant le contenu de votre barre de titre. Quand les utilisateurs cliquent dessus, la zone de recherche s’agrandit et masque les éléments qu’elle obstruerait, comme le titre.

  • Ne masquez pas le bouton Précédent, car il s’agit d’un élément essentiel de navigation et il est important qu’il soit accessible aux utilisateurs à tout moment.

  • La hauteur minimale du menu volant des suggestions est de 200 pixels.

  • La hauteur maximale par défaut est de 300 pixels et vous pouvez la modifier.

  • La largeur minimale est de 270 pixels. Vous pouvez la modifier, mais la fenêtre IME (Éditeur de méthode d’entrée) ne propose pas de largeur inférieure à 270 pixels.

Préremplissez toujours la requête dans les pages des résultats. Les résultats doivent être conservés si l’utilisateur quitte la page et y revient. Effacez le texte de la requête pendant la navigation avant, même à partir d’une page des résultats.

La longueur maximale du texte d’espace réservé est de 128 caractères. La longueur maximale du texte de requête est de 2 048 caractères. La longueur maximale de tous les champs textuels d’une suggestion (texte, DetailText, texte de l’image associée) est de 512 caractères.

Activation de la recherche lors de la saisie

Si vous utilisez la zone de recherche, pensez à laisser les utilisateurs à effectuer des recherches par simple saisie, sans avoir à cliquer ou à appuyer d’abord sur le contrôle de zone de recherche. Pour ce faire, vous pouvez activer searchPane.showOnKeyboardInput ou FocusOnKeyboardInput. Il s’agit du type de comportement auquel les utilisateurs sont habitués dans l’écran d’accueil de Windows 8. De nombreuses personnes passent par le clavier pour leurs tâches dans Windows 8. La possibilité de rechercher en tapant permet un usage performant de l’interaction au clavier.

N’activez pas la recherche lors de la saisie dans chaque page de votre application. Réfléchissez aux emplacements où la recherche lors de la saisie s’avère le plus utile pour vos utilisateurs et où elle poserait problème. Par exemple, vous auriez intérêt à désactiver la recherche lors de la saisie si d’autres contrôles qui acceptent les entrées, à l’instar d’une zone de texte, ont le focus. Sinon, la zone de recherche continue d’accepter les caractères.

Suivez les recommandations ci-dessous pour vous aider à déterminer comment ajouter la fonction de recherche lors de la saisie à votre application afin qu’elle génère une expérience positive pour vos utilisateurs.

  • Activez la recherche dès la saisie dans la ou les pages principales de votre application.

    Procédez ainsi pour la page principale de votre application et toute autre page de l’application qui affiche, directement ou indirectement, l’intégralité du contenu de votre application sur lequel il est possible d’effectuer des recherches. Votre page principale représente la page qui s’affiche lorsque les utilisateurs accèdent à votre application. Dans certains cas, il se peut qu’une application offre plusieurs pages principales qui proposent différentes présentations pour du contenu semblable. Dans ce cas, la fonction de recherche dès la saisie doit être activée sur toutes ces pages.

  • Activez la recherche dès la saisie dans les pages des résultats de recherche de votre application.

    Une fois que les utilisateurs obtiennent les résultats de leur recherche, ils tendent souvent à vouloir effectuer une autre recherche. Vous devez activer la saisie directement dans le champ de recherche à partir des pages de résultats de recherche afin que les utilisateurs du clavier puissent effectuer rapidement une autre recherche.

  • Désactivez la recherche dès la saisie dans la plupart des autres pages de votre application.

    Dans la plupart des cas, vous devez désactiver la saisie directe dans le champ de recherche des pages qui ne correspondent pas à la page principale de votre application ou à une page de résultats de recherche. Pour les pages avec une ou plusieurs zones de saisie, votre application peut désactiver la recherche lors de la saisie si une zone de texte a le focus.

Utilisation du contrat de recherche

Utilisez les conseils suivants si votre application utilise le contrat de recherche.

  • Ajoutez un bouton avec l’icône de recherche à votre application pour appeler le volet de recherche par programme et définir correctement son étendue. Utilisez le glyphe de recherche, Segoe UI Symbol 0xE0094 15pt, pour appeler le volet.

  • Une icône de recherche bien en évidence offre aux utilisateurs une indication visuelle claire d’où commencer. Si les utilisateurs sélectionnent l’icône, votre application doit ouvrir l’icône Rechercher par programme afin qu’ils puissent entrer leur requête par le biais du volet de recherche. Une telle utilisation de l’icône Rechercher rend votre application plus intuitive.

  • Si vous utilisez la zone de recherche dans votre application, vous ne pouvez plus appeler les API SearchPane ; cela lèvera une exception avec le message : « Cannot create instance of type ’Windows.UI.Xaml.Controls.SearchBox.’ » Votre application peut continuer à utiliser le contrat de recherche ; vous devrez même utiliser le contrat de recherche pour prendre en charge le code d’activation de la recherche.

Voir Ajout d’une fonctionnalité de recherche à une application pour plus d’informations sur la fonctionnalité de recherche et le contrat de recherche, ainsi que Démarrage rapide : ajout d’une fonctionnalité de recherche à une application pour obtenir un exemple de code.

Rubriques associées

Pour les concepteurs
Recommandations en matière de recherche dans la page
Pour les développeurs (HTML)
WinJS.UI.SearchBox
Ajout de la fonctionnalité de recherche
Démarrage rapide : ajout de la fonctionnalité de recherche
Pour les développeurs (XAML)
SearchBox
Ajout de la fonctionnalité de recherche
Démarrage rapide : ajout de la fonctionnalité de recherche

 

 

Afficher:
© 2015 Microsoft