Windows Dev Center

Recommandations en matière de recherche

[Cet article contient des informations propres aux applications de plateforme Windows universelle (UWP) et à Windows 10. Pour obtenir de l’aide concernant Windows 8.1, téléchargez le document PDF de recommandations pour Windows 8.1 (en anglais).]

L’option de recherche est l’un des moyens les plus courants pour permettre aux utilisateurs de rechercher du contenu dans votre application. Les recommandations de cet article abordent différents aspects de l’expérience de recherche, les zones de recherche, l’implémentation et des exemples de recherche en contexte.

Aspects de l’expérience de recherche

Entrée.  La saisie de texte est le mode d’entrée de recherche le plus courant et le sujet principal de ce guide. Les modes d’entrée Voix et Webcam sont également couramment utilisés, mais ils nécessitent généralement de pouvoir communiquer avec le matériel et, dans certains cas, l’ajout de contrôles ou d’une interface utilisateur personnalisée au sein de l’application.

Entrée nulle.  Lorsque le champ d’entrée est activé par l’utilisateur, mais qu’aucun texte n’a été saisi, vous pouvez afficher ce que l’on appelle un « canevas d’entrée nulle » Le canevas d’entrée nulle apparaît généralement dans les canevas de l’application, afin que la fonction formulation de requêtes/suggestion automatique remplace ce contenu lorsque l’utilisateur commence à entrer sa requête. L’historique des dernières recherches, les tendances des recherches, les suggestions de recherche contextuelles, les astuces et les conseils sont tous de bons candidats pour l’état d’entrée nulle.

Exemple de Cortana dans un canevas d’entrée nulle

 

Formulation de requêtes/suggestion automatique.  La formulation de requêtes remplace le contenu d’entrée nulle dès que l’utilisateur commence à entrée sa requête. Lorsque les utilisateurs entrent une chaîne de requête, ces derniers aperçoivent un ensemble de suggestions de requête ou d’options de désambiguïsation mis à jour en continu afin d’accélérer le processus d’entrée et de les aider à formuler leur requête. Le comportement des suggestions de requête est intégré au contrôle de suggestion automatique. Il permet également d’afficher l’icône à l’intérieur de la recherche (comme un micro ou une icône de validation). Tout autre comportement incombe à l’application.

Exemple de suggestion automatique de requête/formulation

 

Jeu de résultats.  En règle générale, les résultats de la recherche apparaissent directement sous le champ de recherche. Bien que facultative, la juxtaposition des entrées et des résultats permet de maintenir un contexte et d’accéder immédiatement à la modification de la requête ou à la saisie de nouvelles recherches. Ce lien peut être indiqué plus loin en remplaçant le texte d’information par la requête à l’origine du jeu de résultats.

Vous pouvez faciliter l’accès aux fonctions de modification des requêtes et de saisie d’une nouvelle recherche en mettant en surbrillance la dernière requête lorsque le champ est réactivé. Ainsi, la dernière chaîne est remplacée par la séquence de touches saisie, mais la chaîne est conservée afin que l’utilisateur puisse placer son curseur et modifier ou ajouter la chaîne précédente.

L’affichage du jeu de résultats peut prendre différentes formes en fonction du contenu. Le mode Liste offre une grande flexibilité et convient parfaitement à la plupart des recherches. Le mode Grille fonctionne bien pour les images ou les autres contenus multimédia. Vous pouvez utiliser une carte pour indiquer la distribution spatiale.

Zones de recherche

La fonction recherche est d’utilisation. Les interfaces utilisateur de recherche sont intégrées à l’interpréteur de commandes et à de nombreuses applications. Bien que les points d’entrée de recherche présentent généralement un aspect similaire, ils permettent d’obtenir des résultats aussi larges (recherche sur le web ou sur un périphérique) que précis (liste de contacts d’un utilisateur). Le point d’entrée de recherche doit être juxtaposé au contenu en cours de recherche.

Voici quelques exemples d’étendues de recherche courantes :

Global.  Rechercher dans plusieurs sources du cloud et du contenu local. Résultats variés incluant des URL, des documents, des médias, des actions, des applications et plus encore.

Web.  Rechercher dans un index Web. Les résultats peuvent contenir des pages, des entités et des réponses.

Mon contenu.  Rechercher des informations sur plusieurs périphériques, dans le cloud, des graphiques sociaux et plus encore. Les résultats sont différents, mais sont limités par le lien aux comptes d’utilisateur.

Contextuel/optimal.  Rechercher dans plusieurs sources du cloud et du contenu local. Résultats variés incluant des URL, des documents, des médias, des actions, des applications et plus encore.

Utilisez un texte d’information afin d’indiquer l’étendue de la recherche. Par exemple :

« Rechercher sur Windows et sur le Web »

« Rechercher dans la liste de contacts »

« Rechercher dans la boîte aux lettres »

« Rechercher dans les paramètres »

« Rechercher un emplacement »

Exemple de texte d’information de recherche

 

En délimitant précisément l’étendue d’un point d’entrée de recherche, vous permettez à l’utilisateur de s’assurer que ses critères correspondent bien à la fonction de recherche et vous limitez ainsi les désagréments éventuels.

Implémentation

Les champs d’entrée de texte sont recommandés pour la plupart des applications, car ils offrent un point d’entrée de recherche bien visible. Les textes d’information facilitent également la découverte et la communication avec l’étendue de la recherche. Lorsque la recherche est une fonction plus secondaire, ou lorsque l’espace est limité, l’icône de recherche peut servir de point d’entrée, sans qu’un champ d’entrée ne lui soit associé. Lorsque la recherche est affichée sous forme d’une icône, assurez-vous qu’il reste suffisamment d’espace pour afficher la zone de recherche modale, comme illustré dans les exemples ci-dessous.

Avant de cliquer sur l’icône de recherche :

Exemple d’icône de recherche et de zone de recherche réduite

 

Après avoir cliqué sur l’icône de recherche :

Exemple d’icône de recherche et de zone de recherche développée

 

La recherche utilise toujours un glyphe en forme de loupe orienté vers la droite comme point d’entrée. Le glyphe à utiliser est encodé en Segoe UI Symbol, code de caractère hexadécimal 0xE0094, et possède généralement une taille de police de 15 epx.

Le point d’entrée de recherche peut être placé à différents endroits. Son placement indique l’étendue et le contexte de la recherche. Les recherches réunissant des résultats relatifs à une expérience ou externes à l’application sont généralement situés dans un chrome d’application de niveau supérieur, telles que les barres de commandes globales ou la navigation.

À mesure que l’étendue de la recherche s’affine ou se contextualise, l’emplacement indiqué correspond davantage au contenu à rechercher, telle qu’une zone de canevas, un en-tête de liste ou des barres de commandes contextuelles. Dans tous les cas, le lien entre l’entrée de recherche et les résultats (ou le contenu filtré) doit apparaître clairement.

Dans le cas des listes de défilement, il est utile d’afficher systématiquement les entrées de recherche. Nous vous recommandons de rendre l’entrée de recherche rémanente et de faire défiler le contenu en arrière-plan.

Les fonctionnalités d’entrée nulle et de formulation de requêtes sont facultatives pour les recherches contextuelles/optimales, dans lesquelles la liste est filtrée en temps réel par l’entrée de l’utilisateur. Des exceptions existent, notamment lorsque les suggestions de mise en forme des requêtes sont disponibles, comme les options de filtrage de la boîte de réception (à :<input string>, de : <input string>, objet : <input string>, etc.).

Exemple

Cette section présente des exemples de recherche en contexte.

Recherche en tant qu’action dans la barre d’outils Windows :

Exemple de recherche en tant qu’action dans la barre d’outils Windows

 

Recherche en tant qu’entrée sur le canevas d’application :

Exemple de recherche sur un canevas d’application

 

Recherche dans un volet de navigation :

Exemple de recherche dans un menu de navigation

 

La recherche en ligne est réservée au cas où la recherche est rarement utilisée ou est hautement contextuelle :

Exemple de recherche en ligne

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