Applications modernes

Implémentation de la fonction de recherche dans les applications Windows Store et Windows Phone Store

Rachel Appel Recherche fait partie intégrante de notre vie numérique. Millions de personnes utilisent les sites comme Bing et Google pour trouver des informations tous les jours. Des millions plus de recherche à travers le Web, des applications et des données exclusives magasins semblables. Parce que la recherche est sans doute le plus fréquemment utilisé fonction numérique, le choix judicieux est d'aider les utilisateurs que plus facilement Rechercher avec vos applications.

Comment Windows facilite la recherche

En raison des différences de facteur de forme physique de PC, tablettes et ordinateurs portables, les systèmes d'exploitation Windows fournir la recherche ISU qui se comportent en conséquence. Par exemple, Windows Phone 8.1 utilise Cortana pour rechercher (en savoir plus sur Cortana au bit.ly/1nFGMxG). Apps peuvent effectuer une recherche personnalisée depuis un app Store Windows Phone avec ou sans Cortana. Windows Phone périphériques disposent d'un bouton matériel spécial pour la recherche, situé en bas à droite du téléphone lui-même, à côté des fenêtres (Centre) et le dos boutons (gauche).

Vous pouvez faire un certain nombre de choses pour appeler recherche avec Windows 8. Le plus simple est de tout simplement de démarrer taper pendant que vous êtes sur l'écran de démarrage de Windows. Qui débute la recherche mondiale, à travers le dispositif et l'Internet. À l'aide d'un coup touchent le geste est une autre façon d'appeler Rechercher les périphériques tactiles. Vous pourriez aussi confiture la souris dans les coins haut-droite ou en bas à droite de l'écran pour lancer la recherche.

Enfin, si vous vivez et mourir par touches de raccourci, vous pouvez également utiliser Windows + S pour afficher le charme de Windows Search. Iconographie n'a pas besoin de changer en raison de facteurs de forme. Quand un utilisateur voit une loupe, il sait que cela signifie toujours rechercher.

Microsoft recommande d'utiliser le contrôle de la boîte de recherche, même s'il est bon d'utiliser le charme de recherche (également appelé un contrat de recherche) pour la compatibilité descendante. Vous pouvez lire plus au sujet bit.ly/1xkqwXN. Lorsque vous utilisez le contrôle de la boîte de recherche, vous pouvez l'ajouter à la toile de votre application ou l'afficher dans la barre de l'app. Si la recherche est l'une des principales méthodes d'interagir avec votre application, il est préférable de le présenter constamment tout au long de l'interface utilisateur d'application.

Un bon emplacement, c'est n'importe où facilement repéré sur la toile du PPA, généralement le coin supérieur droit. Les applications qui traitent des nouvelles, films, sports, articles académiques et rapports financiers sont d'excellents exemples d'applications qui ont besoin d'une boîte de recherche de premier plan. Parfois les utilisateurs aiment naviguer paresseusement, mais plus souvent, ils savent ce qu'ils veulent et préfèrent naviguer directement à elle via la recherche.

Vous pourriez être concerné avec une boîte de recherche prenant trop d'immobiliers d'écran. C'est une préoccupation légitime. À l'aide d'une icône de recherche révélateur est une façon de montrer une petite mais l'indicateur visuel de recherche notable. Après un utilisateur clique ou glyphe de recherche de robinets sur la révélation, la boîte de recherche se révèle afin qu'ils puissent atteindre un résultat de recherche chaîne et vue.

Vous pouvez utiliser la boîte de recherche pour trouver des données localement ou globalement. Comme vous vous en doutez, recherches mondiales sont lorsque votre application accède à des données en dehors de l'application elle-même. Cela peut être sur un périphérique amovible, réseau ou Internet. Si vous ne cherchez pas dans les fichiers tels que de la musique ou des photos sur l'appareil, n'oubliez pas de définir les fonctionnalités dans le manifeste du programme.

Mettre en œuvre la recherche avec le contrôle de la boîte de recherche

Vous pouvez incorporer des champs de recherche dans vos applications via XAML ou HTML pour magasin de Windows et Windows Phone Store apps. Les contrôles et les appels d'API conceptuellement le même travaillent à travers les langues, mais, naturellement, avec une syntaxe différente. Codage de recherche pour le charme de la recherche est également à peu près le même en complexité est matière. Le code doit effectuer les mêmes étapes de base, et les mêmes directives UX s'appliquent, indépendamment de la langue.

Figure 1 montre une boîte de recherche de XAML. Vous pouvez placer ce contrôle dans un contrôle conteneur tel qu'un StackPanel. Comme avec d'autres contrôles, vous devez associer les événements qui le feu en réponse à l'utilisateur invoquant la recherche. Lorsque vous utilisez le contrôle de la boîte de recherche, il n'y a pas besoin de définir l'icône de recherche. Vous aurez probablement envie de la FocusOnKeyboardInput la valeur True. Qui permet aux utilisateurs de simplement commencer à taper pour donner le contrôle de la mise au point à la boîte de recherche, ce qui en fait une expérience de recherche plus facile.

Figure 1 la boîte de recherche avec des Suggestions en utilisant XAML et c#

<SearchBox x:Name="SearchBox" Height="35"
  HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
  SuggestionsRequested="SearchBoxEventsSuggestionsRequested"  
  QuerySubmitted="SearchBoxEventsQuerySubmitted"
  FocusOnKeyboardInput="True"/>
public sealed partial class SearchBoxWithSuggestions :
  SDKTemplate.Common.LayoutAwarePage
{
  public SearchBoxWithSuggestions()
  {
    this.InitializeComponent();
  }
  private static readonly string[] suggestionList =
  {
    "ActionScript", "Ada", "Basic", "C", "C#", "C++", "Clipper",
      "Clojure", "COBOL", "ColdFusion", "Dart", "Delphi", "Erlang",
      "F#", "Haskell", "HTML", "Java", "JavaScript", "LISP",
      "Objective-C", "Pascal", "Perl", "PowerShell", "R", "Ruby",
      "Rust", "RPG", "SQL", "SmallTalk", "Small Basic", "Swift",
      "TypeScript", "Turbo C", "Visual Basic"
  };
  private void SearchBoxEventsSuggestionsRequested(
    object sender, SearchBoxSuggestionsRequestedEventArgs e)
  {
    string queryText = e.QueryText;
    if (!string.IsNullOrEmpty(queryText))
    {
      Windows.ApplicationModel.Search.
        SearchSuggestionCollection suggestionCollection =
        e.Request.SearchSuggestionCollection;
      int n = 0;
      foreach (string suggestion in suggestionList)
      {
        if (suggestion.StartsWith(queryText,
          StringComparison.CurrentCultureIgnoreCase))
        {
          Uri uri = new Uri("ms-appx:///Assets/laptop1.png");
          RandomAccessStreamReference imageSource =
            RandomAccessStreamReference.CreateFromUri(uri);
          suggestionCollection.AppendResultSuggestion(
            suggestion, "", n.ToString(), imageSource, suggestion);
        }
      }
    }
  }
  private void SearchBoxEventsQuerySubmitted(
    object sender, SearchBoxQuerySubmittedEventArgs e)
  {
    SearchListView.Items.Add(e.QueryText);
  }
}

En XAML, les événements SearchBoxEventsSuggestionsRequested et SearchBoxEventsQuerySubmitted sont les deux événement primaire fil-ups que vous aurez besoin. SearchBoxEventsSuggestionsRequested se déclenche une fois pour chaque séquence de touches est entré pour capturer les séquences de touches en temps réel. Comme son nom l'indique, SearchBoxEventsQuerySubmitted se produit lorsque l'utilisateur appuie sur entrée, clique, clique sur l'icône de recherche ou dans le cas contraire déclenche une recherche. L'événement SearchBoxEventsQuerySubmitted est où vous ajoutez du code pour effectuer la recherche proprement dite. Figure 1 montre les deux événements en action.

En c#, la première chose que vous devez faire est de fournir une liste de chaînes de recherche à utiliser comme suggestions. Figure 1 montre un tableau de chaînes nommé suggestionList. La liste contient les noms de plusieurs langages de programmation. Le code dans Figure 1 illustre une implémentation de Rechercher avec la SearchSuggestionCollection. Lorsque les SearchBoxEventsSuggestionsrequis événement se déclenche, son argument nommé « e » contient la SearchSuggestionCollection auquel vous pouvez ajouter des requêtes. Cela se traduit en Figure 1 quand la variable suggestionCollection est déclarée et la valeur.

Vous pouvez ajouter des requêtes à le SearchSuggestionCollection à travers les méthodes AppendQuerySuggestion, AppendQuerySuggestions, AppendSearchSuggestion ou AppendResultSuggestion. Résultat suggestions apparaissent dans la même liste que les suggestions de requête, mais ils vous permettent de passer à des données supplémentaires, par exemple une image dans la boîte de recherche.

Tandis que le XAML a la notion d'une ressource pour définir des styles et des caractéristiques esthétiques, HTML utilise CSS pour effectuer ces tâches. Par exemple, parce que le <div> élément dans Figure 2 ne contient aucune référence à tous les styles, il utilise la bibliothèque Windows par défaut pour la classe de .win-searchbox JavaScript (WinJS) qui fait partie de la CSS de base de WinJS.

Figure 2 la boîte de recherche avec des Suggestions à l'aide de HTML et JavaScript

<div id="searchBox" data-win-control="WinJS.UI.SearchBox"></div>
(function () {
"use strict";
var suggestionList = ["ActionScript", "Ada", "Basic", "C", "C#", "C++", "Clipper",
  "Clojure", "COBOL", "ColdFusion", "Dart", "Delphi", "Erlang", "F#", "Haskell",
  "HTML", "Java", "JavaScript", "LISP", "Objective-C", "Pascal", "Perl",
  "PowerShell", "R", "Ruby", "Rust", "RPG", "SQL", "SmallTalk",
  "Small Basic", "Swift", "TypeScript", "Turbo C", "Visual Basic"];
var page = WinJS.UI.Pages.define("/html/S1-SearchBoxWithSuggestions.html", {
    ready: function (element, options) {
      var searchBox = document.getElementById("searchBox");
      searchBox.addEventListener("suggestionsrequested",
        suggestionsRequestedHandler);
      searchBox.addEventListener("querysubmitted", querySubmittedHandler);
      searchBox.winControl.focusOnKeyboardInput = true;
    }
  });
function suggestionsRequestedHandler(eventObject) {
    var queryText = eventObject.detail.queryText,
      query = queryText.toLowerCase(),
      suggestionCollection = eventObject.detail.searchSuggestionCollection;
    if (queryText.length > 0) {
      for (var i = 0, len = suggestionList.length; i < len; i++) {
        if (suggestionList[i].substr(0, query.length).toLowerCase() === query) {
          suggestionCollection.appendQuerySuggestion(suggestionList[i]);
        }
      }
    }
  }
function querySubmittedHandler(eventObject) {
    var queryText = eventObject.detail.queryText;
    WinJS.log && WinJS.log(queryText, "sample", "status");
  }
})();

Figure 3 montre les résultats de l'exécution d'un Figure 1 ou Figure 2.

Three SearchBoxes avec les requêtes et Suggestions de résultat
Figure 3 SearchBoxes avec les requêtes et Suggestions de résultat

Remarquez le SearchBoxes en Figure 3 montrer filtrées suggestions basées sur ce que l'utilisateur a entré. Il s'agit d'une grande fonctionnalité. Heureusement, c'est quelque chose que le contrôle de la boîte de recherche fait pour vous automatiquement en XAML ou HTML. Toutefois, vous devez effectuer la recherche proprement dite vous-même dans l'événement de présentation de requête. Cela signifie que c'est à vous de lire les fichiers, accéder aux bases de données et services Web ou effectuer une recherche Internet.

Lorsque vous ajoutez des éléments à la SuggestionCollection, la méthode AppendResultSuggestion vous permet de fournir davantage d'informations que la méthode AppendQuerySuggestion. Passer dans le texte de désignation, image et texte de remplacement d'appliquer les éléments de la liste, comme le code de Figure 4 révèle. Figure 5 illustre la capture d'écran du moment de l'exécution du code dans Figure 4 va créer.

Figure 4 Code pour ajouter des Images aux Suggestions

private void SearchBoxEventsSuggestionsRequested(object sender,
  SearchBoxSuggestionsRequestedEventArgs e)
{
  string queryText = e.QueryText;
  if (!string.IsNullOrEmpty(queryText))
  {
    Windows.ApplicationModel.
      Search.SearchSuggestionCollection suggestionCollection =
      e.Request.SearchSuggestionCollection;
    int n = 0;
    foreach (string suggestion in suggestionList)
    {
      if (suggestion.StartsWith(queryText,
        StringComparison.CurrentCultureIgnoreCase))
      {
        Uri uri = new Uri("ms-appx:///Assets/laptop.png");
        RandomAccessStreamReference imageSource =
          RandomAccessStreamReference.CreateFromUri(uri);
        suggestionCollection.AppendResultSuggestion(
          suggestion, "", n.ToString(), imageSource, suggestion);
      }
    }
  }

Figure 5 SearchBox avec Suggestions de résultat et les Images

L'argument d'image transmis à la classe AppendResultSuggestions est un type de IRandomAccessStreamReference de la Windows.Storâge.Espace de noms courants. Si vous utilisez JavaScript, vous devrez créer un Uri en utilisant la même méthode de CreateFromUri. Il s'agit contrairement à l'accoutumée de mettre une image en HTML avec un attribut src.

À ce stade, vous avez un travail SearchBox et suggestions avec texte et images. L'étape suivante consiste à afficher les résultats de recherche. En XAML et en HTML, vous pouvez ajouter une page de résultats de recherche prédéfinis pour afficher et interagir avec les résultats. Visual Studio fournit des modèles de page avec le code que les écrans recherche résultats avec une liste filtrée des données que vous fournissez. Parce que ces pages sont personnalisables, vous pouvez afficher les résultats exactement comment vous voulez.

Lorsque vous ajoutez une SearchResultsPage de la boîte de dialogue nouveau fichier dans Visual Studio, il crée une page avec un ListView pour afficher les résultats de recherche. Pour plus d'informations sur l'utilisation de ListView, consultez mon article de décembre 2013, « Tout vous besoin à savoir sur le contrôle ListView » (msdn.microsoft.com/magazine/dn532209). Bien sûr, ce n'est pas obligatoire, vous utilisez le modèle de page de résultats de recherche, vous pouvez intégrer des résultats de recherche n'importe où dans l'interface utilisateur qui est logique et est plus facile pour l'utilisateur. Lorsque vous le faites, assurez-vous que vous vérifiez les orientations UX d'abord.

Directives concernant la recherche UX

Si l'utilisateur ne peut jamais trouver quoi que ce soit, ou a mal à la recherche, il sera plus apt à évaluer votre application mal dans le magasin. Pire encore est quand un utilisateur n'achètera votre app parce que la recherche dans la version d'essai ne fonctionne pas.

Parce que la recherche est une telle caractéristique fréquemment utilisée, prenez le temps de faire droit à la fois payé et apps du procès. Voici quelques suggestions sur la façon d'implémenter la recherche dans vos applications et monter les cotes d'écoute :

Si la recherche est une fonctionnalité fréquemment utilisée de votre app, placez-la où les utilisateurs peuvent immédiatement trouver et l'utiliser.
Aider les utilisateurs avec des suggestions de requête et résultat. Utilisateurs s'appuient sur les suggestions de rapidement naviguer tout au long de l'application et effectuer des actions.
Afficher les résultats pour qu'elles soient faciles à parcourir. Renseignements agrégés sont l'ami de vous et l'utilisateur. Le point de recherche consiste à présenter des informations aux utilisateurs afin qu'ils peuvent faire un choix quant à quels détails de poursuivre.
S'assurer que la zone de recherche fonctionne avec un clavier tactile, ainsi que des claviers physiques.
Appuyer Ctrl + F comme raccourci clavier pour trouver le texte dans votre application (Windows uniquement).

Plusieurs de ces points sont esthétiques dans la nature. Si quoi que ce soit, lignes directrices Windows UX pécher par excès de présenter moins nombreux mais plus importants éléments d'information. Un utilisateur doit être capable de naviguer en arrière vers son emplacement précédent d'après les résultats de recherche grâce à un bouton "retour". Pour rattraper ou actualiser vos connaissances sur la navigation dans les applications Windows Store, lisez mon article d'août 2013, « Navigation Essentials dans Windows Store Apps » (msdn.microsoft.com/magazine/dn342878).

Vous devez toujours fournir des suggestions de recherche, surtout sur le téléphone. Aucun utilisateur ne veut entrer une requête de recherche et de ne recevoir aucune autre aide. Il est également beaucoup plus difficile de taper rapidement et correctement sur les petits appareils. Les utilisateurs de téléphones ont des méthodes plus ou moins restreints de saisie. Avoir à taper les mots entiers juste rend votre application plus difficile à utiliser et frustre l'utilisateur.

Vous cherchez la Conclusion

Comme vous pouvez le voir, mettre en œuvre une expérience de recherche agréable est facile à faire pour les apps Store de Windows et Windows Phone Store. Ajout de fonctionnalités de recherche rend non seulement votre application plus robuste, mais il offre aux utilisateurs un accès facile à des caractéristiques importantes et fréquemment utilisées. Gardez à l'esprit que vous pouvez rechercher des données globales et locales.

Don' t oublier d'examiner et de suivre les directives décrites dans cet article et ceux que Microsoft décrit à bit.ly/1BQ5fGZ lors de l'implémentation de rechercher dans votre application.

Rachel Appel est un consultant, auteur, mentor et ancien employé de Microsoft avec plus de 20 ans d'expérience dans l'industrie. Elle intervient dans des conférences de l'industrie haut tels que Visual Studio Live!, DevConnections, MIX et bien plus encore. Son expertise réside dans l'élaboration de solutions qui alignent des affaires et la technologie mise au point sur la pile de dev de Microsoft et ouvrir Web. Pour plus d'infos sur Appel, visitez son site Web à rachelappel.com.

Grâce à l'expert technique Microsoft suivant d'avoir relu cet article : Frank La Vigne

Partager via