Richtlinien für die Suche

Applies to Windows and Windows Phone

Beispiel für ein standardmäßiges Suchfeldsteuerelement

Befolgen Sie diese Richtlinien, um Suchergebnisse für den Inhalt Ihrer App bereitzustellen. Die Richtlinien enthalten Tipps zum Bereitstellen von Suchvorschlägen und Platzhaltertext im Suchfeld sowie zum Gestalten einer Suchergebnisseite.

In unserer Serie App-Features von A bis Z können Sie dieses Feature in Aktion sehen.:  Windows Store-App-UI von A bis Z

Beschreibung

Das Suchfeldsteuerelement dient der Eingabe von Text für eine Suchabfrage.

Fügen Sie Ihrer App-Canvas ein Suchfeld hinzu, wenn Benutzer hauptsächlich über die Suchfunktion auf Inhalte in Ihrer App zugreifen. Ein Suchfeld ist eine großartige Möglichkeit, um dem Benutzer zu zeigen, wo er anfangen muss. Wenn der Platz bei Ihrem Layout ein Problem ist, können Sie ein Symbol verwenden, mit dem ein Suchfeld eingeblendet wird. Sie können Ihr Suchfeld auch auf der App-Leiste platzieren. Fügen Sie ggf. auf jeder Seite Ihrer App ein Suchfeld hinzu. Für Benutzer kann es verwirrend sein, wenn manche Seiten ein Suchfeld enthalten und andere nicht. Diese Entscheidung hängt jedoch vom Kontext und Verwendungszweck Ihrer App ab.

Beispiel

Screenshot mit einem standardmäßigen Suchfeldsteuerelement

Implementieren der Suche

Wenn Ihre App Inhalte aufweist, nach denen Benutzer möglicherweise suchen möchten, fügen Sie Ihrem App-Canvas ein Suchfeld hinzu.

  • Verwenden Sie das SearchBox-Steuerelement für Windows Store-Apps mit C++, C# oder Visual Basic und das WinJS.UI.SearchBox-Objekt für Windows Store-Apps mit JavaScript.

  • Unabhängig davon, wo sich der Inhalt Ihrer App befindet (z. B. im lokalen Dateisystem oder über einen Webdienst bereitgestellt), können Sie mithilfe des Suchfelds auf Abfragen der Benutzer reagieren und Suchergebnisse auf einer selbst entworfenen App-Seite anzeigen.

  • Ein Suchfeld ist eine großartige Möglichkeit, um dem Benutzer zu zeigen, wo er anfangen muss. Wenn der Platz bei Ihrem Layout ein Problem ist, können Sie ein Symbol verwenden, mit dem ein Suchfeld eingeblendet wird. Sie können Ihr Suchfeld auch auf der App-Leiste platzieren.

  • Falls Sie eine Such-UI auf der App-Leiste benötigen, platzieren Sie sie in der oberen App-Leiste. In Windows Store-Apps mit JavaScript können Sie die Such-UI in der Navigationsleiste unterbringen.

  • Fügen Sie ggf. auf jeder Seite Ihrer App ein Suchfeld hinzu. Für Benutzer kann es verwirrend sein, wenn manche Seiten ein Suchfeld enthalten und andere nicht. Diese Entscheidung hängt jedoch vom Kontext und Verwendungszweck Ihrer App ab.

Anpassen von Vorschlägen und Platzhaltertext im Suchfeld

Wenn Benutzer mit der Eingabe einer Abfrage im Suchfeld beginnen, zeigt die App Suchvorschläge in einem Vorschlagsflyout unter dem Suchfeld an. Die App stellt diese Vorschläge mithilfe der AppendResultSuggestion- und der AppendQuerySuggestion-Methode bereit.

Das Suchfeld unterstützt maximal 25 Suchvorschläge.

Eine App kann zwei Arten von Suchvorschlägen bereitstellen: Abfragevorschläge und Ergebnisvorschläge. Sie können sich Ergebnisvorschläge als Antworten und Abfragevorschläge als Möglichkeiten vorstellen.

  • Abfragevorschläge sind meist automatische Vervollständigungen des Abfragetextes des Benutzers und stellen Abfragen bereit, mit denen der Benutzer suchen könnte. Beispiel: Der Benutzer sucht in der Store-App nach einer App und gibt im Suchfeld der Store-App die Abfrage "word" ein. Als Ergebnisvorschläge werden vielleicht "Wordament" und "Wordpress" und als Abfragevorschläge vielleicht "word games" und "words" angezeigt. Wenn der Benutzer einen der Abfragevorschläge auswählt, leitet die Windows Store-App ihn zu einer Suchergebnisseite für die ausgewählte Abfrage weiter. Abfragevorschläge sind zwar in der Regel automatische Vervollständigungen, dies ist aber nicht zwingend notwendig. Wenn Sie z. B. in einer Rezept-App nach "Eier" suchen, wäre Quiche ein brauchbarer Vorschlag.

  • Ergebnisvorschläge sind weitgehende oder genaue Übereinstimmungen mit der Abfrage des Benutzers, die sofort angezeigt werden können. Beispielsweise wird für die Abfrage "word" in der Windows Store-App die Wordament-App als Ergebnis (unter der Beschriftung "Empfehlungen") vorgeschlagen. Wählt der Benutzer den Ergebnisvorschlag "Wordament" aus, leitet die Windows Store-App ihn direkt zur Seite der Wordament-App im Store weiter.

Ergebnisvorschläge, die in der Regel genauere Übereinstimmungen sind, werden vor den Abfragevorschlägen am Anfang des Vorschlagsflyouts angezeigt.

Wenn der Benutzer eine Suchabfrage eingibt, zeigt das System automatisch auf dem Suchverlauf basierende Vorschläge für mögliche Abfragen im Suchfeld an. Diese Vorschläge beruhen auf den vorherigen Interaktionen des Benutzers mit dem Suchfeld Ihrer App und werden vor den von der App bereitgestellten Vorschlägen angezeigt. Sie können den Suchverlauf deaktivieren.

Verwenden Sie Vorschläge nicht, um Suchergebnisse für Ihre App zu filtern oder durch Bereiche einzuschränken. Filter- und Bereichsauswahloptionen sollten zusammen mit den Ergebnissen auf der Suchergebnisseite der App angezeigt werden, damit sie zum Eingrenzen der Suchergebnisse verwendet werden können. Vorschläge sollten dagegen im Suchfeld angezeigt werden, da sie direkt mit dem vom Benutzer eingegebenen Abfragetext zusammenhängen.

Abfragevorschläge

  • Sie können generell Abfragevorschläge bereitstellen, damit der Benutzer Suchvorgänge schnell ausführen kann.

  • Verwenden Sie Abfragevorschläge zur automatischen Vervollständigung des Abfragetextes, nach dem Benutzer in Ihrer App suchen können. Da der Eingabeaufwand dadurch deutlich geringer ist, können Benutzer Suchvorgänge schneller durchführen. Anstatt den gesamten Text einzugeben, können Benutzer eine der vorgeschlagenen Abfragen auswählen und die Suche sofort ausführen.

  • Wenn der Benutzer einen Abfragevorschlag auswählt, leiten Sie ihn sofort zu einer Suchergebnisseite für die ausgewählte Abfrage weiter.

  • Die Abfragevorschläge Ihrer App sollten den aktuellen Abfragetext des Benutzers enthalten. Da Ihre Abfragevorschläge in der Regel automatische Vervollständigungen des aktuellen Abfragetextes sind, müssen sie den aktuellen Abfragetext enthalten.

  • Ihre Abfragevorschläge sollten keine Ergebnisse aus einem globalen Kontext bereitstellen, sondern dem Inhalt Ihrer App und den Ergebnissen, die sie liefern kann, entsprechen. Wenn Sie zeigen, welche Inhalte Ihre App bereitstellen kann, können Benutzer herausfinden, nach was sie in Ihrer App suchen können. Die Wetter-App vervollständigt die Benutzerabfrage z. B. automatisch, um Städte vorzuschlagen, für die Wetterberichte angezeigt werden können.

Ergebnisvorschläge

  • Stellen Sie Ergebnisvorschläge bereit, wenn Sie für Benutzerabfragen fast genaue oder genaue Übereinstimmungen empfehlen möchten.

  • Mit Ergebnisvorschlägen können Sie Benutzer direkt zu den Details eines bestimmten Ergebnisses leiten, ohne dass zuerst zu einer Suchergebnisseite navigiert werden muss.

  • Ein Ergebnisvorschlag sollte aus einem geeigneten Bild oder Miniaturbild, einem aussagekräftigen Titel oder einer Beschriftung und einer kurzen Beschreibung bestehen. Die Bildgröße beträgt immer 40 x 40 Pixel und kann nicht geändert werden.

  • Anhand des Bilds, des Titels und der Beschreibung können Benutzer schnell feststellen, ob das vorgeschlagene Ergebnis das ist, was sie suchen.

  • Bei einem kleinen Resultset sollten Sie Ergebnisse ggf. auf der App-Canvas filtern, d. h. die Ergebnisse sofort bei jeder Tastenbetätigung des Benutzers aktualisieren. Dies ist eine Form der Filterung während der Benutzereingabe. Die Leselisten-App filtert Ergebnisse z. B. auf diese Weise. Der Suchverlauf sollte deaktiviert werden, und die App muss die Canvas so schnell wie möglich aktualisieren. Die Implementierung dieses Features ist von der UI-Leistung abhängig und davon, wie schnell Sie einen kleinen Resultset (normalerweise maximal zehn Ergebnisse) zurückgeben können. Wenn der Benutzer mehr als drei Zeichen eingeben muss, um zehn Ergebnisse zu erhalten, sollten Sie ggf. wie oben beschrieben Vorschläge verwenden.

Trennzeichen

  • Verwenden Sie ein Trennzeichen, um eine Gruppe ähnlicher oder thematisch zusammenhängender Ergebnisse zu definieren.

  • Sie können der Liste mit Vorschlägen, die Ihre App im Suchbereich bereitstellt, Trennzeichen hinzufügen. Jedes Trennzeichen zählt bei der Begrenzung auf 25 Vorschläge jedoch als Vorschlag.

  • Verwenden Sie beschriftete Trennzeichen, wenn Sie mehrere Arten von Ergebnisvorschlägen bereitstellen möchten, damit Benutzer zwischen den Ergebnissen unterscheiden können. Wenn Sie z. B. mehrere Vorschläge für Ergebnisse mit unterschiedlichen Inhaltstypen (z. B. Filme im Gegensatz zu Fernsehsendungen) bereitstellen, verwenden Sie ein entsprechendes beschriftetes Trennzeichen zur Unterscheidung zwischen Filmen und Fernsehsendungen.

Platzhaltertext

  • Sie können Platzhaltertext im Suchfeld verwenden, um zu beschreiben, wonach Benutzer in Ihrer App suchen können. In einer Rezept-App könnte z. B. "Rezepte suchen" angezeigt werden.

  • Zeigen Sie Platzhaltertext nur an, wenn das Suchfeld leer ist. Löschen Sie den Platzhaltertext, wenn der Benutzer mit der Eingabe im Suchfeld beginnt.

  • Verwenden Sie als Platzhaltertext des Suchfelds eine kurze Beschreibung des durchsuchbaren Inhalts Ihrer App. Eine Musik-App, die die Suche nach Albumname, Musiktitel oder Interpret unterstützt, könnte z. B. als Platzhaltertext "Album, Interpret oder Titel" enthalten.

  • Verwenden Sie Platzhaltertext, um dem Benutzer zu zeigen, in welchem Kontext gesucht wird. Dies ist wichtig, wenn in einem bestimmten Kontext eine Teilmenge der App durchsucht wird. In einer Musik-App, in der in entsprechenden Unterabschnitten nach Interpreten oder Alben gesucht wird, können Sie z. B. einen Text wie "Interpret" oder "Album" verwenden.

Entwerfen einer Suchergebnisseite

Richten Sie die Gestaltung Ihrer Suchbenutzeroberfläche auf Ihre Marke aus. Die Benutzeroberfläche (UX) für Suchergebnisse sollte ähnlich wie die Darstellung von Inhalten in der App auf Ihre Inhalte abgestimmt sein.

Wenn der Benutzer Suchabfragen an Ihre App übermittelt, sieht er eine Seite mit Suchergebnissen für die Abfrage. Da Sie die Suchergebnisseite für Ihre App entwerfen, können Sie sicherstellen, dass die angezeigten Ergebnisse hilfreich sind und über ein geeignetes Layout verfügen.

Verwenden Sie einen Titel für die Suchergebnisseite, und zeigen Sie den Abfragetext des Benutzers im Suchfeld an, um Kontext bereitzustellen.

Geben Sie die gewünschte Rangfolge der Suchergebnisse an, indem Sie sie absteigend nach Relevanz darstellen.

Geben Sie an, warum ein Suchergebnis mit der Abfrage übereinstimmt.

Spiegeln Sie das Suchsymbol in bidirektionalen Sprachen nicht.

Heben Sie die übereinstimmenden Suchbegriffe hervor, um den Teil des Vorschlags anzuzeigen, der der Suchabfrage entspricht. Die Anzeige der verglichenen Eigenschaft ist in allen Fällen für den Benutzer hilfreich.

Filtern von Ergebnissen

  • Sie können die Suchergebnisseite der App verbessern, indem Sie den Benutzern ermöglichen, Filter und Bereiche festzulegen, um die Suchergebnisse einzuschränken.

  • Wenn für eine Abfrage viele Ergebnisse vorhanden sind, sollten Sie dem Benutzer ggf. die Möglichkeit bieten, die Ergebnisse zu filtern.

  • Ermöglichen Sie den Benutzern das Filtern und Definieren von Bereichen für Suchergebnisse auf der Suchergebnisseite.

  • Geben Sie die Anzahl der verfügbaren Ergebnisse für jeden Filter oder jeden Bereich an. Auf diese Weise können die Benutzer besser einschätzen, ob sie ihre Suche effizient einschränken.

  • Bieten Sie eine Möglichkeit, um die Filter zu löschen und alle Ergebnisse anzuzeigen.

Anpassung der Suchfeldgröße

  • Berücksichtigen Sie bei der Verwendung des Steuerelements für die In-App-Suche die verschiedenen Fenstergrößen und die Position des Steuerelements in Bezug auf den Titel.

  • Beschneiden Sie den Titel nicht.

  • Bei kleineren Fenstern ist es abhängig vom Inhalt der Titelleiste möglicherweise ratsam, das Suchfeld auf eine Schaltfläche mit dem Suchsymbol zu reduzieren. Wenn Benutzer klicken, erweitern Sie das Suchfeld und blenden Sie die Elemente aus, die davon verdeckt würden, beispielsweise der Titel.

  • Verdecken Sie nicht die Zurück-Schaltfläche, da diese ein Kernelement der Navigation darstellt und für die Benutzer unbedingt immer erreichbar sein muss.

  • Die Mindesthöhe des Flyouts für Vorschläge beträgt 200 Pixel.

  • Die standardmäßige maximale Höhe ist 300 Pixel. Dieser Wert kann geändert werden.

  • Die Mindestbreite ist 270 Pixel. Sie können diesen Wert ändern, die Breite des Eingabemethoden-Editor (IME)-Fensters beträgt jedoch immer mindestens 270 Pixel.

Füllen Sie die Abfrage auf Ergebnisseiten immer vorab auf. Die Ergebnisse sollten erhalten bleiben, wenn der Benutzer die Seite verlässt und dann zu ihr zurückkehrt. Löschen Sie den Abfragetext bei einer Vorwärtsnavigation (auch von einer Ergebnisseite).

Die maximale Länge des Platzhaltertexts ist 128 Zeichen. Die maximale Länge des Abfragetextes ist 2048 Zeichen. Die maximale Länge aller Textfelder in einem Vorschlag (Text, Detailtext, alternativer Bildtext) beträgt 512 Zeichen.

Aktivieren der direkten Suchtexteingabe

Überlegen Sie bei Verwendung des Suchfelds, ob Sie die Suche durch direkte Eingabe ermöglichen, ohne dass Benutzer zuerst auf das Suchfeldsteuerelement klicken oder tippen müssen. Aktivieren Sie dazu searchPane.showOnKeyboardInput bzw. FocusOnKeyboardInput. Dies ist das Verhalten, das Benutzer von der Startseite von Windows 8 kennen. Viele Benutzer verwenden eine Tastatur, um mit Windows 8 zu interagieren, und die Suche durch direkte Eingabe in das Suchfeld ermöglicht eine effiziente Interaktion per Tastatur.

Aktivieren Sie die direkte Suchtexteingabe nicht auf jeder Seite Ihrer App. Überlegen Sie, an welchen Stellen diese Funktion für Benutzer am nützlichsten wäre und wo sie Probleme verursachen könnte. Beispielsweise könnten Sie die direkte Suchtexteingabe deaktivieren, wenn andere Steuerelemente, in die Text eingegeben werden kann, den Fokus erhalten. Andernfalls werden die Zeichen weiter in das Suchfeld eingegeben.

Anhand der folgenden Richtlinien können Sie herausfinden, wie Sie die Benutzerfreundlichkeit Ihrer App mithilfe der direkten Suchtexteingabe verbessern können.

  • Aktivieren Sie die Suchtexteingabe auf der Hauptseite (bzw. den Hauptseiten) Ihrer App.

    Verwenden Sie die direkte Suchtexteingabe für die Hauptseite Ihrer App und alle App-Seiten, die direkt oder indirekt den gesamten durchsuchbaren Inhalt Ihrer App anzeigen. Die Hauptseite ist die Seite, die angezeigt wird, wenn der Benutzer Ihre App startet. Mitunter kann eine App mehrere Hauptseiten enthalten, bei denen es sich um unterschiedliche Darstellungen ähnlicher Inhalte handelt. In diesem Fall sollte die direkte Suchtexteingabe auf allen Hauptseiten aktiviert werden.

  • Aktivieren Sie die direkte Suchtexteingabe auf den Suchergebnisseiten Ihrer App.

    Benutzer möchten häufig erneut eine Suche ausführen, nachdem Suchergebnisse angezeigt wurden. Damit Tastaturbenutzer schnell eine weitere Suche ausführen können, sollten Sie die direkte Suchtexteingabe auf Suchergebnisseiten aktivieren.

  • Deaktivieren Sie die direkte Suchtexteingabe auf den meisten anderen Seiten Ihrer App.

    In den meisten Fällten sollte die direkte Suchtexteingabe auf Seiten, bei denen es sich nicht um die Hauptseite der App oder eine Suchergebnisseite handelt, deaktiviert werden. Bei Seiten mit Eingabefeldern kann Ihre App die direkte Suchtexteingabe deaktivieren, wenn ein Textfeld den Fokus erhält.

Verwenden des Vertrags für "Suche"

Halten Sie sich an die folgenden Richtlinien, wenn Ihre App den Vertrag für "Suche" verwendet.

  • Sie können Ihrer App eine Schaltfläche mit dem Suchsymbol hinzufügen, um den Suchbereich programmgesteuert aufzurufen und den korrekten Bereich auszuwählen. Verwenden Sie die Suchglyphe, Segoe UI Symbol 0xE0094 bei 15 pt, um den Bereich aufzurufen.

  • Durch ein Suchsymbol an gut sichtbarer Stelle kann der Benutzer direkt erkennen, wo er beginnen muss. Wenn der Benutzer auf das Symbol Ihrer App klickt, sollte der Charm "Suche" programmgesteuert geöffnet werden, sodass der Benutzer seine Abfrage im Suchbereich eingeben kann. Wenn Sie den Charm "Suche" auf diese Weise nutzen, können Sie die Suchoberfläche Ihrer App intuitiver gestalten.

  • Wenn Sie das Suchfeld in Ihrer App verwenden, können Sie die SearchPane-APIs nicht mehr aufrufen. Andernfalls wird eine Ausnahme mit der Meldung "Erstellen einer Instanz vom Typ 'Windows.UI.Xaml.Controls.SearchBox' nicht möglich" ausgelöst. Der Vertrag für die "Suche" kann von Ihrer App weiterhin verwendet werden. Vielmehr sollten Sie den Vertrag für die "Suche" zur Unterstützung des Suchaktivierungscodes verwenden.

Weitere Informationen zur Suche und zum Vertrag "Suche" finden Sie unter Hinzufügen von Suchfunktionen zu einer App, und ein Codebeispiel ist unter Schnellstart: Hinzufügen von Suchfunktionen zu einer App verfügbar.

Verwandte Themen

Für Designer
Richtlinien für die Funktion "Auf Seite suchen"
Für Entwickler (Windows-Runtime-Apps mit JavaScript und HTML)
WinJS.UI.SearchBox
Hinzufügen von Suchfunktionen
Schnellstart: Hinzufügen von Suchfunktionen
Für Entwickler (Windows-Runtime-Apps mit C#/VB/C++ und XAML)
SearchBox
Hinzufügen von Suchfunktionen
Schnellstart: Hinzufügen von Suchfunktionen

 

 

Anzeigen:
© 2014 Microsoft