Richtlinien für Flyouts

Applies to Windows and Windows Phone

Beispiel für ein standardmäßiges Flyout-Steuerelement

Beschreibung

Ein Flyout ist ein kleines Popupmenü, das vorübergehend UI zu aktuellen Benutzeraktionen anzeigt. Das Flyout-Steuerelement kann ein Menü, ein ausgeblendetes Steuerelement oder weitere Details zu einem Element anzeigen oder den Benutzer zum Bestätigen einer Aktion auffordern. Flyouts sollten nur als Reaktion auf eine Tipp- oder Klickaktion durch den Benutzer angezeigt werden. Ein Flyout wird standardmäßig geschlossen, wenn der Benutzer außerhalb des Flyouts tippt.

Beispiel

Screenshot mit einem standardmäßigen Flyout-Steuerelement

Empfohlene und nicht empfohlene Vorgehensweisen

  • Verwenden Sie Flyouts für UI-Elemente, die nur bei Bedarf angezeigt werden sollen. Ein Flyout kann vom Benutzer durch Tippen, Klicken außerhalb des Flyouts oder Drücken der ESC-TASTE jederzeit geschlossen werden. Nachdem der Benutzer eine Option im Flyout ausgewählt hat, sollte es wieder geschlossen werden.
  • Positionieren Sie ein Flyout nahe der Aufrufstelle. Wenn der Benutzer auf eine Schaltfläche auf der App-Leiste tippt, um ein Flyout aufzurufen, sollte das Flyout über oder unter der App-Leistenschaltfläche angezeigt werden. Falls dadurch wichtige Inhalte verdeckt würden, kann das Flyout auch links oder rechts davon positioniert werden. Sie positionieren das Flyout, indem Sie das Objekt angeben, mit dem das Flyout verankert werden soll, und die Seite des Objekts, an der das Flyout angezeigt werden soll. Flyouts sollten am Anker zentriert werden, es sei denn, der Anker befindet sich am äußersten Rand des Bildschirms (wie das Flyout für die Benutzerkachel auf der Startseite).
  • Verwenden Sie Flyouts für folgende Möglichkeiten:
    • Informationen sammeln: Wenn der Benutzer eine Aktion auswählt, die weitere Eingaben erfordert (z. B. das Auswählen einer Option oder das Eingeben von Informationen), können diese UI-Elemente in einem Flyout platziert werden, damit der Benutzer im ursprünglichen Kontext bleiben kann. Angenommen, Benutzer können in einer Karten-App die von ihnen markierten Standorte mit einer Beschriftung versehen. Wenn der Benutzer auf einen Standort tippt, um ihn zu markieren, kann die App ein Flyout anzeigen, in dem die Beschriftung eingegeben werden kann.

      Beispiel: Um ein Element im Browser an die Startseite anzuheften, tippt der Benutzer auf das Symbol "Anheften" auf der App-Leiste. Anschließend gibt der Benutzer den Namen der neuen Kachel in einem Flyout ein.

    • Warnungen und Bestätigungen: Warnen Sie den Benutzer vor dem Ausführen einer möglicherweise schädlichen Aktion.

      Beispiel: Der Benutzer drückt in der Symbolleiste einer Foto-App auf das Symbol zum Löschen. Ein Flyout neben der Symbolleistenschaltfläche warnt den Benutzer, dass die Fotos unwiderruflich gelöscht werden, und stellt den Befehl zum Löschen bereit. Der Benutzer kann dann einfach auf den angezeigten Befehl zum Löschen drücken oder das Flyout ausblenden, wenn er versehentlich auf das Symbol zum Löschen getippt hat.

      Hinweis  In einem Flyout sollten nur Warnungen oder Fehler angezeigt werden, die direkt dargestellt werden können und das unmittelbare Ergebnis einer Aktion des Benutzers sind. Weitere Informationen finden Sie unter Auswählen der richtigen Benutzeroberflächen: Fehler.
    • Dropdownmenüs: Wenn eine Schaltfläche in einer App-Leiste über mehrere Optionen verfügt, können Sie ein Dropdownmenü anzeigen, um dem Benutzer die Auswahl einer Option zu ermöglichen.

      Beispiel: In einer E-Mail-App drückt der Benutzer in der App-Leiste auf "Antworten". Daraufhin wird ein Menü geöffnet, in dem er zwischen den Antwortmöglichkeiten "Antworten", "Allen antworten" und "Weiterleiten" auswählen kann. Wenn der Benutzer in der App-Leiste auf "Abbrechen" drückt, wird ein Menü angezeigt, indem er zwischen den Abbruchmöglichkeiten "Verwerfen" oder "Entwurf speichern" auswählen kann.

      Hinweis  Verwenden Sie anstelle von Flyouts Kontextmenüs für kontextbezogene Aktionen bei Textauswahlen.
    • Weitere Informationen anzeigen: Zeigen Sie weitere Informationen zu einem Element auf dem Bildschirm an, über das der Benutzer mehr erfahren möchte.

      Beispiel: Beim InPrivate-Browsen wählt der Benutzer das Symbol "InPrivate" aus. Ein Flyout wird angezeigt, das weitere Informationen zum InPrivate-Modus enthält. So bleibt die Browser-UI die meiste Zeit übersichtlich, bei Bedarf können aber Informationen für den Benutzer bereitgestellt werden.

  • Bestimmen Sie die Reihenfolge, in der Benutzer die TAB-TASTE verwenden, um von einem Element zu einem anderen in Ihrem Flyout zu wechseln. Achten Sie darauf, die Tabindizes auf positive Werte festzulegen (0 entspricht einem nicht festgelegten Wert), und stellen Sie sicher, dass sich der Bereich der Tabindizes innerhalb des Flyouts nicht mit den Bereichen von Tabindizes außerhalb des Flyouts überlappt. Andernfalls springen Benutzer zwischen dem Flyout und der Hauptseite der App hin und her.
  • Schließen Sie Flyouts nicht programmgesteuert, solange der Benutzer weder eine Befehlsschaltfläche noch ein Menüelement im Flyout ausgewählt hat. Flyouts sollten nicht automatisch geschlossen werden, nur weil der Benutzer z. B. eine Einstellung umgeschaltet hat.
  • Verwenden Sie kein Flyout, wenn die Meldung, der Fehler, die Warnung oder ein anderer Bestandteil der Benutzeroberfläche zum entsprechenden Zeitpunkt nicht direkt durch den Benutzer aufgerufen wird. Beispiel: Benachrichtigungen über verfügbare Updates, den Ablauf eines Testzeitraums oder die Nichtverfügbarkeit einer Internetverbindung sollten nicht mithilfe von Flyouts dargestellt werden. Informationen zur Darstellung dieser UI-Elemente finden Sie unter Auswählen der richtigen Benutzeroberflächen: Fehler.
  • Verwenden Sie kein Flyout, wenn eine Oberfläche eine ausgedehnte Interaktion, mehrere Bildschirme oder eine umfangreiche Benutzeroberfläche erfordert. Integrieren Sie die Benutzeroberfläche stattdessen in die Canvas der App. Beispiel:
    • Der Benutzer verwendet einen Assistenten, der zahlreiche Texteingaben erforderlich macht.
    • Der Benutzer ändert eine lange Liste mit Einstellungen.
  • Verwenden Sie keine Flyouts für die primäre Befehlsliste Ihrer App. Verwenden Sie stattdessen die App-Leiste. Weitere Informationen finden Sie unter Richtlinien für App-Leisten.
  • Verwenden Sie kein Flyout, wenn ein Menü ausschließlich für Befehle über eine Textauswahl erforderlich ist. Verwenden Sie stattdessen ein Kontextmenü. Siehe Richtlinien für Kontextmenüs.
  • Nehmen Sie in ein Flyout keine Steuerelemente auf, die in der jeweiligen Situation nicht erforderlich sind. Wenn der Benutzer beispielsweise gar keine Aktionen ausführen kann, sollten Sie auch keine Schaltflächen bereitstellen. Die Schaltflächen "Schließen" und "OK" sind nicht erforderlich. Das einfache Ausblenden (Schließen des Flyouts, wenn der Benutzer an einer Stelle außerhalb des Flyouts tippt) ist vollkommen ausreichend. Wenn ein Titel nicht unbedingt erforderlich ist, sollte er ebenfalls weggelassen werden.
  • Außer dem Abstand des Flyouts selbst ist kein zusätzlicher Innenabstand erforderlich. Das Flyout sollte nur so groß sein, wie es für die enthaltenen Elemente erforderlich ist.
  • Flyouts sollten nicht ohne Kontext positioniert werden, beispielsweise in der Mitte des Bildschirms. Dies hat mehrere Gründe:
    • Wenn Elemente der Benutzeroberfläche nicht im Zusammenhang mit der Aktion angezeigt werden, durch die sie aufgerufen wurden, muss der Benutzer danach suchen und verliert Zeit. Der Arbeitsfluss wird unterbrochen, und die Benutzeroberfläche erscheint dem Benutzer weniger ansprechend und fließend.
    • Möglicherweise bemerkt der Benutzer auch gar nicht, dass ein Flyout angezeigt wird, und blendet es durch Tippen auf den Bildschirm versehentlich wieder aus, sodass der Eindruck entsteht, die App würde nicht reagieren.
    • Benutzer erwarten bei zentrierten (oder anderen willkürlich positionierten) Fenstern eine Schaltfläche zum Schließen oder Abbrechen und würden diese auch dann verwenden, wenn das Fenster einfach ausgeblendet würde. Dies widerspricht dem Ziel einer intuitiven und unkomplizierten Benutzeroberfläche.

Weitere Hinweise zur Verwendung

Bestandteile eines Flyouts

Ein Flyout besteht aus drei Komponenten: Titel, Hauptinhalt und Befehlsschaltflächen.

Im Folgenden finden Sie Empfehlungen zur Verwendung der einzelnen Komponenten für gängige Verwendungszwecke des Flyouts.

  • Informationen sammeln:
    ÜberschriftKeine
    HauptinhaltNehmen Sie nur die tatsächlich erforderlichen Steuerelemente in das Flyout auf. Anweisungen und Links vom Typ "Weitere Informationen" sollten sehr zurückhaltend verwendet werden. Wenn der Benutzer beispielsweise eine Einstellung ändert oder einen Ein-/Aus-Schalter betätigt, sollte diese Aktion auch unmittelbar wirksam werden. Das Flyout sollte durch die Interaktion mit benutzerdefiniertem Inhalt nicht ausgeblendet werden. Sofern keine Befehlsschaltfläche vorhanden ist, sollte der Benutzer stets die Möglichkeit haben, das Flyout manuell auszublenden.
    SteuerelementeSchaltflächen, die nur dazu dienen, die Änderungen eines Benutzers zu bestätigen, sind nicht erforderlich, da die Änderungen automatisch übernommen werden sollten. Wenn mit der Schaltfläche eine Aktion ausgelöst wird (z. B. "Anmelden" oder "Dokument speichern"), oder wenn Text vom Benutzer eingegeben wurde, für den ein Commit ausgeführt werden soll, ist die Verwendung einer Schaltfläche angemessen, und das Flyout sollte nach Drücken der Schaltfläche durch den Benutzer geschlossen werden. Der Vorgang kann vom Benutzer jedoch abgebrochen werden, ohne Commit auszuführen, indem das Flyout einfach ausgeblendet wird.

    Flyout mit Texteingabefeld und Schaltfläche

     

  • Warnungen und Bestätigungen:
    ÜberschriftKeine
    HauptinhaltGeben Sie die Warnung an, die vom Benutzer zur Kenntnis genommen werden soll, bevor die entsprechende Aktion ausgeführt wird. Formulieren Sie die Warnung nicht als Frage.

    Flyout mit Bestätigungsschaltfläche

    Steuerelemente Nehmen Sie nur auf die Aktion Bezug, die vom Benutzer eingeleitet wurde, z. B. Löschen. Schließen Sie weder die gegenteilige Aktion noch eine Schaltfläche "Abbrechen" ein. Zu diesem Zweck kann der Benutzer das Flyout schließen.

     

  • Dropdownmenüs:
    ÜberschriftKeine
    HauptinhaltFühren Sie die Menüelemente auf, mit denen der Benutzer interagieren kann.

    Flyout mit Menüelementen

    SteuerelementeVerwenden Sie für diese Schaltflächen den MenuCommand.

     

  • Weitere Informationen anzeigen:
    ÜberschriftEin optionaler Titel zur Angabe des Status, oder eine Beschreibung des Symbols, das zum Aufrufen verwendet wurde.

    Flyout mit Titel und Inhalt

    HauptinhaltSchließen Sie die Informationen ein.

    Flyout mit Inhalt und ohne Titel

    SteuerelementeSchließen Sie optionale Schaltflächen ein, um weitere Aktionen für die Informationen im Flyout bereitzustellen.

     

Verwandte Themen

Für Designer
Hinzufügen von App-Leisten
Hinzufügen von Kontextmenüs
Richtlinien für Flyouts
Richtlinien für Befehle für die Zwischenablage
Gestalten der Benutzeroberfläche
Richtlinien für Meldungsdialogfelder
Für Entwickler (HTML)
WinJS.UI.Flyout
Für Entwickler (XAML)
Flyout class

 

 

Anzeigen:
© 2015 Microsoft