Richtlinien und Prüfliste für Statussteuerelemente (Windows Store-Apps)

Befolgen Sie diese Richtlinien, um einer Windows Store-App progress-Steuerelemente hinzuzufügen.

Ist dies das richtige Steuerelement?

Das progress-Steuerelement zeigt Benutzern den Fortschritt eines Vorgangs an, der mehr als 2 Sekunden lang dauert. Ein Statussteuerelement kann den ungefähren Prozentsatz für den Abschluss eines Vorgangs (bestimmter Status) anzeigen oder angeben, dass ein Vorgang ausgeführt wird (unbestimmter Status).

Der Gebrauch eines Statussteuerelements ist nicht in jedem Fall erforderlich. Der Status einer Aufgabe kann auch so ausreichend zu erkennen oder der Vorgang so schnell abgeschlossen sein, dass eine entsprechende Anzeige nur unnötig ablenken würde. Bei der Entscheidung, ob ein Statussteuerelement angezeigt werden sollte, sind einige Überlegungen zu berücksichtigen.

• Dauert der Vorgang mehr als zwei Sekunden?

  Zeigen Sie in diesem Fall mit dem Start des Vorgangs ein Statussteuerelement an. Wenn ein Vorgang meistens (aber nicht immer) länger als zwei Sekunden dauert, warten Sie 500 ms, bevor Sie das Steuerelement anzeigen. Dadurch soll Flimmern vermieden werden.

• Wartet der Vorgang darauf, dass der Benutzer eine Aufgabe ausführt?

  Wenn ja, zeigen Sie keine Statusleiste an. Statusleisten sind für den Status des Computers gedacht, nicht für den der Benutzer.

• Müssen Benutzer wissen, dass etwas geschieht?

  Wenn die App beispielsweise im Hintergrund einen Download ausführt, der nicht vom Benutzer eingeleitet wurde, ist es auch nicht erforderlich, den Benutzer darüber zu informieren.

• Wird der Vorgang im Hintergrund ausgeführt, ohne die Aktivitäten des Benutzers zu blockieren, und ist er für Benutzer von geringem Interesse, aber nicht völlig irrelevant?

  Verwenden Sie Text und Ellipsen, wenn die App Aufgaben ausführt, die zwar nicht immer sichtbar sein müssen, bei denen aber doch der Status angezeigt werden soll.

  

  Verwenden Sie die Ellipsen, um darauf hinzuweisen, dass eine Aufgabe ausgeführt wird. Bei mehreren Aufgaben oder Elementen können Sie die Anzahl der verbleibenden Aufgaben angeben. Wenn alle Aufgaben abgeschlossen sind, schließen Sie die Anzeige.

• Können Sie den Inhalt des Vorgangs verwenden, um den Status zu visualisieren?

  Wenn ja, zeigen Sie kein Statussteuerelement an. Wenn beispielsweise vom Datenträger geladene Bilder angezeigt werden, erscheinen die geladenen Bilder nacheinander auf dem Bildschirm. Das Anzeigen eines Statussteuerelements bringt hier keine Vorteile, sondern würde nur zu Lasten einer übersichtlichen Benutzeroberfläche gehen.

Verwenden Sie nicht den "Wartecursor", um auf Aktivitäten hinzuweisen. Benutzer, die über Fingereingaben mit dem System interagieren, sehen diesen nicht, und Benutzer, die die Maus verwenden, benötigen nicht zwei Methoden zum Visualisieren von Aktivitäten (Cursor und Statussteuerelement).

Auswählen des richtigen Stiltyps für das Statussteuerelement

Es gibt drei Stile für das Statussteuerelement:

• Bestimmter Statusleistenstil

  

  Verwenden Sie den bestimmten Statusanzeigenstil für bestimmte Aufgaben, deren Dauer klar festgelegt ist oder die über ein vorhersehbares Ende verfügen. Im Folgenden finden Sie einige Beispiele für bestimmte Aufgaben:

  • Ein Foto mit einer Größe von 500 KB wird von der App heruntergeladen; bis jetzt wurden 100 KB empfangen.
  • Eine Werbung mit einer Dauer von 15 Sekunden wird von der App angezeigt; bisher sind 2 Sekunden verstrichen. Wenn die Aufgabe nicht bestimmt ist, verwenden Sie die unbestimmte Statusanzeige oder den Statusring.
• Unbestimmter Statusringstil

  

  Verwenden Sie diesen Stil für Aufgaben, die nicht bestimmt sind und modal sind (Benutzerinteraktionen werden blockiert).

• Unbestimmter Statusleistenstil

  

  Verwenden Sie diesen Stil für Aufgaben, die nicht bestimmt und nicht modal sind (Benutzerinteraktionen werden nicht blockiert).

Behandeln Sie teilweise modale Aufgaben als nicht modal. Bei einigen Aufgaben wird die Interaktion blockiert, bis ein Fortschritt erzielt wurde. Anschließend kan die Interaktion des Benutzers mit der App fortgesetzt werden. Wenn beispielsweise Benutzer eine Suchabfrage ausführen, wird die Interaktion bis zur Anzeige des ersten Ergebnisses blockiert. Behandeln Sie diese Aufgaben als nicht modal, und verwenden Sie den unbestimmten Statusleistenstil, wenn der modale Status weniger als 2 Sekunden andauert. Wenn der modale Status mehr als 2 Sekunden andauern kann, sollten Sie den unbestimmten Statusring für die modale Phase und die unbestimmte Statusleiste für die nicht modale Phase der Aufgabe verwenden.

Entscheidungsbaum zum Auswählen einer Statusformatvorlage

• Müssen Benutzer wissen, dass etwas geschieht?

  Falls nicht, zeigen Sie kein Statussteuerelement an.

• Ist bekannt, wie lange es dauert, die Aufgabe abzuschließen?
  • Ja: Dauert es länger als zwei Sekunden, bis die Aufgabe abgeschlossen ist?
    • Ja: Verwenden Sie eine bestimmte Statusanzeige. Stellen Sie für Aufgaben, die länger als 10 Sekunden dauern, eine Option zum Abbrechen der Aufgabe bereit.
    • Nein: Zeigen Sie kein Statussteuerelement an.
  • Nein: Ist die Interaktion mit der UI für Benutzer blockiert, bis die Aufgabe abgeschlossen ist?
    • Ja: Ist diese Aufgabe Teil eines Prozesses aus mehreren Schritten, bei dem der Benutzer spezifische Details zum Prozess wissen muss?
      • Ja: Verwenden Sie einen unbestimmten Statusring mit horizontalem Statustext in der Mitte des Bildschirms.
      • Nein: Verwenden Sie einen unbestimmten Statusring ohne Text in der Mitte des Bildschirms.
    • Nein: Handelt es sich um eine primäre Aktivität?
      • Ja: Hängt der Status mit einem einzelnen, spezifischen Element auf der UI zusammen?
        • Ja: Verwenden Sie einen unbestimmten Inlinestatusring mit Statustext neben dem zugehörigen UI-Element.
        • Nein: Wird eine große Datenmenge in eine Liste geladen?
          • Ja: Verwenden Sie die unbestimmte Statusleiste oben mit Platzhaltern, um eingehende Inhalte darzustellen.
          • Nein: Verwenden Sie die unbestimmte Statusleiste oben im Bildschirm oder auf der Oberfläche.
      • Nein: Verwenden Sie Statustext in einer Ecke oben im Bildschirm.

Allgemeine Richtlinien

Hier sind ein paar Richtlinien, die Sie unabhängig vom verwendeten Statussteuerelementstil einhalten sollten.

• Zeigen Sie für mehrere verwandte aktive Aufgaben ein einziges Statussteuerelement an. Wenn auf dem Bildschirm mehrere verwandte Elemente angezeigt werden, die alle gleichzeitig eine Aktivität ausführen, zeigen Sie nicht mehrere Statussteuerelemente an. Zeigen Sie stattdessen nur ein Steuerelement an, das endet, wenn die letzte Aufgabe beendet ist. Wenn die App beispielsweise mehrere Fotos herunterlädt, sollten Sie nur ein einziges Statussteuerelement anstelle eines Steuerelements je Foto anzeigen.
• Ändern Sie die Position oder die Größe des Statussteuerelements nicht, während die Aufgabe ausgeführt wird.

Richtlinien für bestimmbare Aufgaben

Verwenden Sie eine exakte Statusanzeige, wenn Sie die verbleibende Arbeit (ausgedrückt als Dauer, Bytes, Dateien oder durch eine andere quantifizierbare Größe) abschätzen können. Im Folgenden finden Sie einige Richtlinien für die Verwendung der Statusanzeige für bestimmbare Aufgaben.

Wechseln von unbestimmten zu bestimmbaren Aufgaben Wenn eine gewisse Zeit (oder eine Aufgabe) notwendig ist, bis mit der Angabe des exakten Status begonnen werden kann, sollten Sie zuerst die unbestimmte Anzeige verwenden, um dann zur exakten Anzeige zu wechseln. Wenn der erste Schritt bei einem Download beispielsweise der Aufbau der Serververbindung ist, können Sie nicht einschätzen, wie lange dieser Vorgang dauert. Nachdem die Verbindung aufgebaut wurde, wechseln Sie zur exakten Statusanzeige, um den Downloadstatus anzuzeigen. Achten Sie darauf, dass die Statusanzeige nach dem Wechsel an exakt derselben Position und in derselben Größe angezeigt wird.
Inlineanzeige von Fortschritt und Status Angenommen, es gibt eine Liste mit Elementen, beispielsweise eine Liste mit Druckern, und bestimmte Aktionen können einen Vorgang für Elemente in dieser Liste auslösen (beispielsweise die Installation eines Treibers für einen der Drucker). Wenn dies geschieht und es sich um einen bestimmbaren Vorgang handelt, zeigen Sie eine exakte Statusanzeige neben diesem Element an. Zeigen Sie den Inhalt (die Beschriftung) der Aufgabe über der Statusanzeige und den Status darunter an. Geben Sie keinen Statustext aus, wenn klar erkennbar ist, was gerade geschieht. Blenden Sie die Statusanzeige nach Beendigung des Vorgangs aus. Verwenden Sie den Statustext, um den Benutzer über den neuen Status einen Elements zu informieren.
Anzeigen mehrerer Vorgänge Wenn Sie eine Liste mit Aufgaben anzeigen möchten, richten Sie den Inhalt in einem Raster aus, damit die Benutzer den Status auf einen Blick erfassen können. Zeigen Sie Statusanzeigen für alle Elemente an – auch für solche, für die der Vorgang noch nicht begonnen hat. Da diese Liste dazu dient, laufende Vorgänge anzuzeigen, sollten Sie beendete Vorgänge aus der Liste entfernen.
Anzeigen des App-modalen exakten Status auf der App-Leiste Wenn ein Benutzer eine Aufgabe über die App-Leiste gestartet hat und die Benutzerinteraktion blockiert wird, zeigen Sie das Statussteuerelement in der App-Leiste an. Wenn klar ist, worauf sich die Statusleiste bezieht, können Sie diese oben an der App-Leiste ausrichten und auf eine Beschriftung sowie Angaben zum Status verzichten. Andernfalls sollten Sie sowohl eine Beschriftung als auch Statustext angeben. Deaktivieren Sie Interaktionen während der Aufgabe, indem Sie Steuerelemente auf der App-Leiste deaktivieren und Eingaben im Inhaltsbereich ignorieren.

Empfohlene und nicht empfohlene Vorgehensweisen bei bestimmten Aufgaben

Richtlinien für unbestimmte Aufgaben

Wenn die Aufgabe modal ist (Interaktion wird bis zum Abschluss blockiert), verwenden Sie den unbestimmten Statusringstil. Wenn die Aufgabe nicht modal ist, verwenden Sie die unbestimmte Statusleiste.

Unbestimmter Statusring

Halten Sie sich an die folgenden Richtlinien für das Anzeigen des Statusrings:

• Zeigen Sie den Statusring im Kontext der Aktion an, d. h. nahe der Position, an der die Aktion vom Benutzer gestartet wurde oder an der die resultierenden Daten angezeigt werden.
• Platzieren Sie den Statustext rechts neben dem Statusring.
• Verwenden Sie für den Statusring die gleiche Farbe wie für den zugehörigen Statustext.
• Deaktivieren Sie die Steuerelemente, mit denen der Benutzer während der Ausführung der Aufgabe nicht arbeiten soll.
• Wenn die Aufgabe zu einem Fehler führt, blenden Sie die Statusanzeige und den Statustext aus, und zeigen Sie stattdessen an der gleichen Stelle eine Fehlermeldung an.

Im Folgenden finden Sie einige Richtlinien für bestimmte Situationen, in denen ein Statusring zum Einsatz kommt.

In einem Dialogfeld wird eine Aktion ausgeführt, bevor Sie mit dem nächsten Bildschirm fortfahren Platzieren Sie den Statusring direkt über dem Schaltflächenbereich, und zwar links mit dem Inhalt des Dialogfelds ausgerichtet.
Anzeige des Status in einem App-Fenster mit rechts ausgerichteten Steuerelementen Platzieren Sie den Statusring links von dem oder oberhalb des Steuerelements, das die Aktion ausgelöst hat. Richten Sie den Statusring links am zugehörigen Inhalt aus.
Anzeige des Status in einem App-Fenster mit links ausgerichteten Steuerelementen Wenn ein Steuerelement, das die modale Aktion auslöst, links ausgerichtet ist, platzieren Sie den Statusring rechts neben diesem Steuerelement. Alternativ können Sie ihn auch unter dem Steuerelement platzieren.	– oder –
Anzeige des Status in einem Flyout Verwenden Sie ein Flyout, falls die Aktivität im Hintergrund fortgesetzt werden kann, sobald der Benutzer das Flyout durch Tippen außerhalb des Flyouts ausblendet.
Anzeigen mehrerer Elemente Platzieren Sie den Statusring und den Statustext unter dem Titel des Elements. Ersetzen Sie den Statusring und den Statustext bei Auftreten eines Fehlers durch den Fehlertext.

Unbestimmte Statusanzeige

Verwenden Sie die unbestimmte Statusleiste für Aufgaben, die die Benutzerinteraktion nicht blockieren (nicht modal).

Im Folgenden finden Sie einige Richtlinien für spezifische Verwendungsszenarien unbestimmter Statusleisten.

Anzeige des Status in einem Flyout Platzieren Sie die unbestimmte Statusanzeige am oberen Rand des Flyouts, und legen Sie die Breite so fest, dass sie sich über die gesamte Breite des Flyouts erstreckt. Durch diese Platzierung vermeiden Sie übermäßige Ablenkungen, aber der Benutzer wird weiterhin über die laufende Aktivität informiert Geben Sie dem Flyout keinen Titel. Ein Titel verhindert die Platzierung der Statusanzeige am oberen Rand des Flyouts.

In einem App-Fenster Platzieren Sie die unbestimmte Statusleiste oben im App-Fenster und über die gesamte Breite.

Richtlinien für Statustext

• Wenn Sie die exakte Statusanzeige verwenden, geben Sie den Prozentsatz des Fortschritts nicht im Statustext an. Das Steuerelement liefert diese Information bereits.
• Wenn Sie Text ohne Statussteuerelement zur Angabe einer Aktivität verwenden, sollten Sie durch eine Ellipse signalisieren, dass es sich um eine laufende Aktivität handelt.
• Wenn Sie ein Statussteuerelement verwenden, ist eine Ellipse nicht erforderlich, da die laufende Aktivität in diesem Fall ja bereits durch das Statussteuerelement signalisiert wird.

Layoutmuster

Im Folgenden finden Sie einige Layoutrichtlinien für verschiedene gängige Varianten bei der Verwendung eines Statussteuerelements.

• Exakte Statusanzeige mit Beschriftung und Status

  

• Mehrere Statusanzeigen

  

• Unbestimmter Statusring mit Statustext

  

• Unbestimmte Statusanzeige

  

Verwandte Themen

Schnellstart: Hinzufügen von Statussteuerelementen