Richtlinien für App-Einstellungen

  • Artikel

App-Einstellungen sind die vom Benutzer anpassbaren Teile Ihrer Windows-App, auf die über die Seite mit Einstellungen einer App zugegriffen werden kann. Beispielsweise kann ein Benutzer in einer Newsreader-App angeben, welche neuen Quellen oder wie viele Spalten auf dem Bildschirm angezeigt werden sollen, und eine Wetter-App könnte dem Benutzer ermöglichen, zwischen Celsius und Fahrenheit zu wählen. Dieser Artikel enthält Empfehlungen und bewährte Methoden für das Erstellen und Anzeigen von App-Einstellungen.

Wann sollte eine Einstellungenseite angegeben werden?

Hier sind Beispiele für App-Optionen, die zu einer Seite für App-Einstellungen gehören:

  • Konfigurationsoptionen, die sich auf das Verhalten der App auswirken und keine häufige erneute Anpassung erfordern (z. B. die Auswahl der Standardtemperatureinheit Celsius oder Fahrenheit in einer Wetter-App, das Ändern der Kontoeinstellungen für eine E-Mail-App, Einstellungen für Benachrichtigungen oder Barrierefreiheitsoptionen).
  • Optionen, die von den bevorzugten Benutzereinstellungen abhängen, wie Musik, Soundeffekte oder Farbdesigns.
  • App-Infos, die eher selten benötigt werden, z. B. Datenschutzrichtlinie, Hilfe, App-Version oder Copyright-Informationen.

Befehle, die Teil des typischen App-Workflows sind (z. B. das Ändern der Pinselgröße in einer Zeichen-App), sollten sich nicht auf einer Einstellungsseite befinden. Weitere Informationen zur Platzierung von Befehlen finden Sie unter Befehlsdesigngrundlagen.

Allgemeine Empfehlungen

  • Halten Sie die Einstellungsseiten möglichst einfach, und verwenden Sie binäre Steuerelemente (an/aus). Ein Umschalter ist in der Regel das beste Steuerelement für binäre Einstellungen.
  • Verwenden Sie Optionsfelder für Einstellungen, mit denen Benutzer aus bis zu fünf zusammenhängenden Optionen, die sich gegenseitig ausschließen, eine auswählen können.
  • Erstellen Sie einen Einstiegspunkt für alle App-Einstellungen auf der Einstellungsseite Ihrer App.
  • Verwenden Sie einfache Einstellungen. Definieren Sie intelligente Standardwerte, und halten Sie die Anzahl von Einstellungen so gering wie möglich.
  • Wenn ein Benutzer eine Einstellung ändert, sollte die App die Änderung sofort wiedergeben.
  • Fügen Sie keine Befehle hinzu, die zu einem häufig verwendeten App-Workflow gehören.

Einstiegspunkt

Die Methode, mit der Benutzer auf die Einstellungsseite Ihrer App zugreifen, sollte auf dem Layout Ihrer App basieren.

Navigationsbereich

Bei einem Navigationsbereichs-Layout sollten App-Einstellungen das letzte Element in der Navigationsliste und am Ende der Liste angeheftet sein:

App-Einstellungen-Einstiegspunkt für Navigationsbereich

Befehlsleiste

Wenn Sie eine Befehlsleiste oder Symbolleiste verwenden, platzieren Sie den Einstiegspunkt der Einstellungen als eines der letzten Elemente im Überlaufmenü "Mehr". Wenn eine bessere Auffindbarkeit für den Einstiegspunkt für die Einstellungen für Ihre App wichtig ist, platzieren Sie den Einstiegspunkt direkt auf der Befehlsleiste und nicht innerhalb des Überlaufs.

Einstiegspunkt für App-Einstellungen für die Befehlsleiste

Hub

Wenn Sie ein Hublayout verwenden, sollte der Einstiegspunkt für App-Einstellungen im Überlaufmenü "Mehr" einer Befehlsleiste platziert werden.

Registerkarten/Pivots

Bei einem Registerkarten- oder Pivots-Layout raten wir davon ab, den Einstiegspunkt für App-Einstellungen als eines der Elemente der obersten Ebene in der Navigation zu platzieren. Stattdessen sollte der Einstiegspunkt für App-Einstellungen im Überlaufmenü "Mehr" einer Befehlsleiste platziert werden.

Liste-Details

Anstatt den Einstiegspunkt für App-Einstellungen innerhalb eines Liste/Details-Bereichs zu u verstecken, machen Sie ihn als letztes angeheftete Element auf der obersten Ebene des Listenbereichs verfügbar.

Layout

Das Fenster der App-Einstellungen sollte sich im Vollbildmodus öffnen und das gesamte Fenster ausfüllen. Wenn das App-Einstellungsmenü über bis zu vier Gruppen auf oberster Ebene verfügt, sollten diese Gruppen eine Spalte nach unten kaskadieren.

Layout der Seite für App-Einstellungen auf Desktops

Einstellungen für den Farbmodus

Wenn Ihre App Benutzern die Auswahl des Farbmodus ermöglicht, machen Sie diese Optionen mit Optionsfeldern oder einem Kombinationsfeld mit dem Header „Wählen Sie einen App-Modus“ verfügbar. Die Optionen sollten lauten:

  • Leicht
  • Dunkel
  • Standard (Windows)

Wir empfehlen außerdem, einen Hyperlink zur Seite „Farben” der Windows-Einstellungen-App hinzuzufügen. Dort können Benutzer auf den aktuellen App-Standardmodus zugreifen und ihn ändern. Verwenden Sie die Zeichenfolge „Windows-Farbeinstellungen“ als Text für den Link und ms-settings:colors für den URI.

Abschnitt für die Modusauswahl

Abschnitt „Info” und Feedbackschaltfläche

Es wird empfohlen, den Abschnitt "Über diese App" in Ihrer App entweder als dedizierte Seite oder in einem eigenen Abschnitt zu platzieren. Wenn Sie eine „Feedback senden”-Schaltfläche benötigen, platzieren Sie diese unten auf der Seite „Info/Über diese App”.

Unter einer Unterüberschrift „Rechtliches” können Sie alle „Nutzungsbedingungen” und „Datenschutzerklärung” (sollten Hyperlinkschaltflächen mit Textumbruch sein) sowie weitere rechtliche Informationen, wie z. B. das Urheberrecht, einfügen.

Abschnitt „Info“ mit Schaltfläche „Feedback“

Empfohlene Seiteninhalte

Wenn Sie eine Liste der gewünschten Elemente auf der Seite für App-Einstellungen erstellt haben, berücksichtigen Sie die folgenden Richtlinien:

  • Gruppieren Sie ähnliche oder verwandte Einstellungen unter einer Einstellungsbezeichnung.

  • Versuchen Sie, die Gesamtanzahl der Einstellungen auf maximal vier oder fünf zu begrenzen.

  • Zeigen Sie unabhängig vom App-Kontext dieselben Einstellungen an. Sind einige Einstellungen in einem bestimmten Kontext nicht relevant, deaktivieren Sie sie im Einstellungen-Flyout der App.

  • Verwenden Sie für Einstellungen informative Beschriftungen, die nur aus einem Wort bestehen. Nennen Sie für kontobezogene Einstellungen die Einstellung „Konten“ statt „Kontoeinstellungen“. Wenn Sie nur eine Option für Ihre Einstellungen festlegen möchten und die Einstellungen selbst sich nicht als Beschriftung eignen, verwenden Sie „Optionen“ oder „Standardeinstellungen“.

  • Wird über eine Einstellung direkt das Web anstelle eines Flyouts aufgerufen, informieren Sie den Benutzer mit einem als Hyperlink formatierten visuellen Hinweis darüber, z. B. mit „Hilfe (online)“ oder „Webforen“. Mehrere Weblinks sollten Sie in einem Flyout mit einer einzelnen Einstellung gruppieren. Beispiel: Die Einstellung „Info“ könnte ein Flyout mit Links zu Ihren Nutzungsbedingungen, Datenschutzbestimmungen und App-Support-Infos öffnen.

  • Fassen Sie selten verwendete Einstellungen zu einem einzelnen Eintrag zusammen, damit für gängigere Einstellungen jeweils ein eigener Eintrag zur Verfügung steht. Fassen Sie Inhalte oder Links, die nur Informationen enthalten, unter der Einstellung „Info“ zusammen.

  • Wiederholen Sie die Funktionen nicht im Berechtigungsbereich. Windows stellt diesen Bereich standardmäßig bereit, und er kann nicht geändert werden.

  • Hinzufügen von Einstellungsinhalten zum Einstellungen-Flyout

  • Stellen Sie Inhalte von oben nach unten in einer einzelnen, ggf. bildlauffähigen Spalte dar. Beschränken Sie den Bildlauf auf die doppelte Bildschirmhöhe.

  • Verwenden Sie die folgenden Steuerelemente für App-Einstellungen:

    • Umschalter: Benutzer können Werte aktivieren oder deaktivieren.
    • Optionsfelder: Benutzer können aus bis zu fünf zusammenhängenden Optionen, die sich gegenseitig ausschließen, eine auswählen.
    • Texteingabefeld: Benutzer können hier Text eingeben. Wählen Sie die Art des Texteingabefelds passend zum Typ des vom Benutzer erhaltenen Texts aus, beispielsweise für E-Mail-Adressen oder Kennwörter.
    • Hyperlinks: Benutzer werden zu einer anderen Seite innerhalb der App oder zu einer externen Website weitergeleitet. Wenn ein Benutzer auf einen Hyperlink klickt, wird das Einstellungen-Flyout geschlossen.
    • Schaltflächen: Benutzer können eine Aktion sofort ausführen, ohne das aktuell geöffnete Einstellungenflyout zu schließen.

  • Wenn eines der Steuerelemente deaktiviert ist, fügen Sie eine beschreibende Meldung hinzu. Platzieren Sie diese Meldung über dem deaktivierten Steuerelement.

  • Zeigen Sie Inhalte und Steuerelemente als einzelnen Block per Animation an, nachdem das Einstellungen-Flyout und die Überschrift eingeblendet wurden. Animieren Sie Inhalte mit der Animation enterPage oder EntranceThemeTransition mit einem Offset links von 100 Pixel.

  • Verwenden Sie Abschnittsüberschriften, Absätze und Bezeichnungen, um Inhalte ggf. zu organisieren und zu erläutern.

  • Verwenden Sie zum Wiederholen von Einstellungen eine zusätzliche UI-Ebene oder ein Model zum Erweitern und Reduzieren. Beschränken Sie Hierarchien jedoch auf maximal zwei Ebenen. So könnte zum Beispiel in einer Wetter-App, deren Einstellungen sich auf die jeweilige Stadt beziehen, eine Liste mit Städten angezeigt werden. Der Benutzer muss dann nur auf die gewünschte Stadt zu tippen, um ein neues Flyout zu öffnen oder zu erweitern, um die Einstellungsoptionen anzuzeigen.

  • Wenn das Laden von Steuerelementen oder Webinhalten längere Zeit in Anspruch nimmt, informieren Sie den Benutzer mithilfe eines unbestimmten Statussteuerelements darüber, dass Informationen geladen werden. Weitere Informationen finden Sie unter Richtlinien für Statussteuerelemente.

  • Verwenden Sie keine Schaltflächen für die Navigation oder zum Übernehmen von Änderungen. Verwenden Sie Hyperlinks, um zu anderen Seiten zu navigieren, und speichern Sie Änderungen an App-Einstellungen automatisch, wenn ein Benutzer das Einstellungen-Flyout schließt, anstatt eine Schaltfläche für das Übernehmen von Änderungen zu verwenden.