Richtlinien für visuelles Feedback

Artikel
10/03/2013

Zeigen Sie Benutzern mit visuellem Feedback, wenn ihre Interaktionen mit einer Windows Store-App ermittelt, interpretiert und behandelt werden. Visuelles Feedback ist hilfreich für Benutzer und kann sie zur Interaktion ermutigen. Es weist auf erfolgreiche Interaktionen hin, was für den Benutzer das Gefühl der Kontrolle verstärkt. Darüber hinaus informiert es über den Systemstatus und verringert Fehler.

Sehen Sie dieses Feature in unserer Reihe App-Features von A bis Z in Aktion.: Benutzerinteraktion: Toucheingabe... und vieles mehr

Kontaktvisualisierungen sind gerade für Interaktionen per Fingereingabe wichtig, bei denen Genauigkeit und Präzision gefragt sind. Ihre App sollte z. B. eine Position, auf die getippt wurde, genau anzeigen, damit der Benutzer erkennen kann, ob er das Ziel verfehlt hat, wie weit er danebenliegt und welche Korrekturen erforderlich sind.

Mit den Plattformsteuerelementen der Sprachframeworks für Windows Store-Apps (Windows Store-Apps mit JavaScript und Windows Store-Apps mit C++, C# oder Visual Basic) können Sie Windows 8-Visualisierungen kostenlos nutzen. Falls Ihre App benutzerdefinierte Interaktionen beinhaltet, die angepasstes Feedback erfordern, müssen Sie sicherstellen, dass sich das Feedback für die jeweiligen Zwecke eignet, für alle unterstützten Eingabegeräte verfügbar ist und den Benutzer nicht von seiner eigentlichen Arbeit ablenkt. Dies kann insbesondere bei Spiel- oder Zeichnungs-Apps ein Problem sein, bei denen das visuelle Feedback wichtige UI-Elemente behindern oder verdecken kann.

Wichtig

Das Interaktionsverhalten der integrierten Gesten sollte nicht geändert werden.

Feedback-UI

Die Feedback-UI hängt im Allgemeinen vom Eingabegerät ab (Toucheingabe, Touchpad, Maus, Zeichen-/Eingabestift, Tastatur usw.). Das integrierte Feedback für die Maus z. B. beinhaltet normalerweise eine Bewegung und Änderung des Cursors, während für Touch- und Stifteingabe Berührungsvisualisierungen erforderlich sind und für die Eingabe und Navigation per Tastatur Fokusrechtecke und Hervorhebung verwendet werden.

Verwenden Sie das ShowGestureFeedback, um das Feedbackverhalten der Plattformgesten festzulegen.

Wenn Sie Anpassungen an der Feedback-UI vornehmen, muss das Feedback alle Eingabemodi unterstützen und für alle Modi geeignet sein.

Nachstehend finden Sie einige Beispiele für integrierte Kontaktvisualisierungen in Windows 8.

Screenshot mit einer Berührungsvisualisierung

Fingereingabevisualisierung

Maus-/Touchpadvisualisierung

Stiftvisualisierung

Tastaturvisualisierung

Informations-UI (Popups)

Eine der wichtigsten Formen des visuellen Feedbacks ist eine Informationsbenutzeroberfläche (oder Begriffserklärungsbenutzeroberfläche). Die Informations-UI enthält Informationen zu einem Objekt, eine Beschreibung seiner Funktion, Anweisungen für den Zugriff auf das Objekt und ggf. weitere Anleitungen.

Dies sind die unterschiedlichen Informations-UI-Typen, die von Windows Store-Apps unterstützt werden.

QuickInfos
Umfangreiche QuickInfos
Menüs
Meldungsdialogfelder
Flyouts

Die Informationsbenutzeroberfläche eignet sich besonders, um zu verhindern, dass Benutzeroberflächenelemente durch Finger verdeckt (behindert) werden, und Fingereingabeinteraktionen mit Ihrer App zu verbessern. Sie verfügt sogar über eine integrierte Geste: Gedrückthalten.

Das Gedrückthalten ist eine zeitgesteuerte Interaktion – ein Interaktionstyp, von dem in Windows 8 normalerweise abgeraten wird. Eine zeitgesteuerte Interaktion ist in diesem Fall akzeptabel, da sie für ein Tool dient, mit dem der Benutzer Zugriff auf weitere Informationen erhält (siehe Entwicklung von Fingereingabeinteraktionen). Die empfohlene Dauer hängt vom Typ der Informationsbenutzeroberfläche ab. Die folgende Tabelle enthält die empfohlenen Zeitschwellenwerte.

Informations-UI-Typ	Zeitliche Steuerung	Aktivierung	Verwendung
Okklusions-QuickInfo (für Scrubbing und kleine Ziele)	0 ms	Ja	Für die schnelle Erläuterung von Aktionen. Wird in der Regel für Befehle verwendet.
Okklusions-QuickInfo (für Aktionen)	200 ms	Ja
Umfangreiche QuickInfos	~2000 ms	Nein	Für langsameres, bewussteres Anzeigen zusätzlicher Informationen. Wird in der Regel für Auflistungselemente verwendet.
Interaktion mit automatischem Einblenden	~2000 ms	Nein
Kontextmenü	~2000 ms	Nein	Macht einen begrenzten Satz von Befehlen im Zusammenhang mit dem ausgewählten Objekt verfügbar.
Flyouts	~2000 ms	Nein	Macht einen begrenzten Satz von Befehlen im Zusammenhang mit dem ausgewählten Objekt verfügbar.

Weitere Informationen über das Bereitstellen von Informations-UIs finden Sie unter Gestalten der Benutzeroberfläche.

QuickInfos

Verwenden Sie QuickInfos, um dem Benutzer weitere Informationen zu einem Steuerelement zu bieten, bevor er zum Ausführen einer Aktion aufgefordert wird.

QuickInfos (ToolTip) werden automatisch angezeigt, wenn ein Benutzer ein Steuerelement oder Objekt gedrückt hält (oder ein Zeigerereignis erkannt wird). Sobald der Kontakt oder Zeiger nicht mehr auf dem Steuerelement oder Objekt ist, wird die QuickInfo wieder ausgeblendet. Eine QuickInfo kann Text und Bilder enthalten, aber nicht interaktiv sein.

Okklusions-QuickInfos für kleine Ziele

Okklusions-QuickInfos beschreiben das verdeckte Ziel. Diese QuickInfos sind beim Auswählen und Aktivieren von Zielen hilfreich, die kleiner als die Standardgröße für Fingereingabeziele sind, z. B. Hyperlinks auf einer Webseite.

Sie können diese QuickInfos nach Verstreichen eines bestimmten Zeitschwellenwerts durch ein Informationspopup ersetzen. Verwenden Sie z. B. eine Okklusions-QuickInfo, um den verdeckten Text des Links anzuzeigen, und ersetzen Sie die QuickInfo dann durch ein Popup mit der URL.

Okklusions-QuickInfos für Aktionen und Befehle

Diese QuickInfos beschreiben die Aktion oder den Befehl, die bzw. der ausgeführt wird, wenn der Benutzer den Finger von einem Element nimmt. Diese QuickInfos sind beim Auswählen und Aktivieren von Schaltflächen oder ähnlichen Steuerelementen hilfreich.

Nach einer QuickInfo für ein kleines Ziel kann nach einem bestimmten Zeitschwellenwert eine Aktions-QuickInfo angezeigt. In diesem Fall sollte die QuickInfo für das kleine Ziel so erweitert werden, dass sie die zusätzlichen Informationen aus der Aktions-QuickInfo enthält.

Umfangreiche QuickInfos

Diese QuickInfos zeigen sekundäre Informationen zu einem Element an. Bei einer umfangreichen QuickInfo kann es sich beispielsweise um eine Textbeschreibung eines Bilds, den vollständigen Text eines abgeschnittenen Titels oder andere für das Ziel relevante Informationen handeln.

Umfangreiche QuickInfos enthalten normalerweise Informationen, die nicht sofort verfügbar gemacht werden müssen und in manchen Fällen ablenken können, wenn sie zu schnell angezeigt werden. Bei einem längeren Zeitschwellenwert rufen Benutzer die Informationen bewusster ab.

Nach der Anzeige einer umfangreichen QuickInfo ist das Objekt nicht mehr aktiviert, wenn der Benutzer den Finger abhebt. Der Grund hierfür ist, dass die der QuickInfo entnommenen Informationen den Benutzer veranlassen können, dass Element nicht zu aktivieren.

Umfangreiche QuickInfos sollten sich sowohl hinsichtlich des Designs als auch des Informationsumfangs deutlich von Standard-QuickInfos unterscheiden.

Siehe Hinzufügen von QuickInfos.

Kontextmenü

Das Kontextmenü (PopupMenu) ist ein kompaktes Menü, über das Benutzer direkt auf Aktionen (z. B. Zwischenablagebefehle) für Text oder UI-Objekte in Windows Store-Apps zugreifen können.

Das für die Fingereingabe optimierte Kontextmenü besteht aus zwei Teilen. Als Ergebnis einer Halteinteraktion wird ein visueller Hinweis angezeigt. Das Kontextmenü selbst wird dann angezeigt, nachdem der Hinweis ausgeblendet und der Finger abgehoben wurde.

Die folgenden Abbildungen zeigen, wie Sie das Standardkontextmenü aufrufen, indem Sie in eine Auswahl oder auf ein Ziehelement tippen (Gedrückthalten kann auch verwendet werden).

Tippen (oder Gedrückthalten) in die Auswahl oder auf ein Ziehelement, um das Kontextmenü aufzurufen.

Siehe Schnellstart: Hinzufügen von Flyouts.

Meldungsdialog

Verwenden Sie Meldungsdialogfelder (MessageDialog), um die Benutzer aufzufordern, auf der Grundlage einer Benutzeraktion oder eines App-Status eine Eingabe zu machen, bevor sie fortfahren. Eine explizite Benutzerinteraktion ist erforderlich und Eingaben für die App werden blockiert, bis der Benutzer antwortet.

Meldungsdialog für eine Fehlermeldung

Dies sind einige typische Gründe, um einen Meldungsdialog anzuzeigen.

Darstellung wichtiger Informationen
Vor dem Fortsetzen eine Frage stellen
Fehlermeldungen anzeigen

Ein Flyout (Flyout) ist ein kleiner UI-Bereich, der angezeigt wird, wenn er durch Tippen, Klicken oder auf andere Weise aktiviert wird, und in dem den Benutzern Informationen, Fragen oder ein Optionsmenü zur aktuellen Aktivität angezeigt werden. Es kann leicht ausgeblendet werden (es wird ausgeblendet, wenn der Benutzer den Bildschirm außerhalb des Flyoutbereichs berührt oder anklickt oder ESC drückt). Mit anderen Worten: Ein Flyout kann ignoriert werden.

Anders als QuickInfos können bei Flyouts Eingaben gemacht werden. Anders als bei einem Meldungsdialog ist die App noch immer aktiv und nimmt Eingaben an.

Flyout mit Bestätigung

Automatisch eingeblendete UI

Eine Interaktion mit automatischem Einblenden ist ein informativer visueller Hinweis oder eine Animation, der bzw. die die Ausführung einer Aktion für ein Zielobjekt veranschaulicht und eine Vorschau des Ergebnisses der Aktion bereitstellt.

Die folgenden Abbildungen zeigen die Interaktion mit automatischem Einblenden für eine Auswahl durch Querziehen auf der Startseite. Wenn der Benutzer eine App-Kachel berührt (ohne die Kachel zu ziehen), gleitet die Kachel nach unten (wie beim Ziehen), um das Auswahlhäkchen einzublenden, das angezeigt würde, wenn die App tatsächlich ausgewählt wird.

Screenshot eines Zustands ohne Auswahl

Durch Drücken mit dem Finger auf ein Element wird die Interaktion mit automatischem Einblenden für die Auswahl gestartet. Die Interaktion mit automatischem Einblenden zeigt, welche Aktion für das Element ausgeführt wird.

Screenshot der Animation für die Auswahl

Durch eine Streifbewegung ohne Abheben des Fingers wird das Element tatsächlich ausgewählt.

Screenshot der Animation für Drag & Drop

Wenn der Benutzer die Streifbewegung fortführt, ändert sich die Visualisierung mit automatischem Einblenden, um anzuzeigen, dass das Objekt jetzt verschoben werden kann.

Nach der Anzeige einer Interaktion mit automatischem Einblenden ist das Objekt nicht mehr aktiviert, wenn der Benutzer den Finger hebt.

Empfohlene und nicht empfohlene Vorgehensweisen

Die folgenden empfohlenen und nicht empfohlenen Vorgehensweisen können Ihnen dabei helfen, ein gelungenes Benutzerinteraktionsverhalten für Ihre Kunden zu erstellen.

Empfohlene Vorgehensweisen

Stellen Sie unabhängig von der Kürze der Berührung immer ein visuelles Feedback bereit.

So kann der Benutzer:
- Sicher sein, dass der Touchscreen funktioniert.
- Feststellen, welches Ziel die Fingereingabe unterstützt oder reagiert.
- Sehen, ob er das gewünschte Ziel verfehlt hat.
Zeigen Sie für alle Interaktionsereignisse Feedback sofort an.
Stellen Sie Feedback bereit, das unaufdringliche, intuitive Hinweise liefert, ohne den Benutzer abzulenken.
Stellen Sie sicher, dass Fingereingabeziele während jeder Manipulation an der Fingerspitze "haften bleiben".
Ermöglichen Sie die Auswahl von Elementen mit der Streifbewegung, wenn das Verschieben auf eine Richtung beschränkt ist.

Nicht empfohlene Vorgehensweisen

Verwenden Sie keine Fingereingabevisualisierungen, wenn diese die Verwendung der App behindern können.

Weitere Informationen finden Sie im Abschnitt zu ShowGestureFeedback.
Zeigen Sie nur dann Feedback an, wenn dies absolut notwendig ist.

Sorgen Sie dafür, dass die Benutzeroberfläche übersichtlich bleibt. Zeigen Sie nur dann visuelles Feedback an, wenn die darin enthaltenen Informationen sonst nirgends verfügbar sind. Zeigen Sie niemals QuickInfos an, die bereits sichtbaren Text wiederholen. QuickInfos sollten bestimmten Situationen vorbehalten sein, z. B. abgeschnittener Text (Text mit Auslassungspunkten), der nicht angezeigt wird, wenn das Element ausgewählt ist, oder Fälle, in denen zusätzliche Informationen für das Verständnis oder die Verwendung Ihrer App erforderlich sind.
Verwenden Sie die Gedrückthaltebewegung nur für die Informationsbenutzeroberfläche.

Passen Sie das visuelle Feedbackverhalten der integrierten Windows 8-Gesten nicht an. Eine uneinheitliche Handhabung kann die Benutzerfreundlichkeit beeinträchtigen.

Wichtig Gedrückthalten kann für die Auswahl verwendet werden, wenn sowohl horizontales als auch vertikales Verschieben aktiviert ist.
Zeigen Sie beim Verschieben oder Ziehen kein visuelles Feedback an. Die tatsächliche Verschiebung des Objekts auf dem Bildschirm ist ausreichend. Wenn der Inhaltsbereich jedoch nicht verschoben oder kein Bildlauf durchgeführt werden kann, sollten Sie mit Visualisierungen darauf hinweisen.

Weitere Informationen finden Sie unter Richtlinien für Verschiebung.
Zeigen Sie kein Feedback für ein Steuerelement an, das nicht als Ziel ausgewählt wurde.

Visuelles Feedback ist wichtig, wenn die Fingereingabe für Aktivitäten verwendet wird, bei denen Positionsgenauigkeit gefragt ist. Wenn Sie bei jeder erkannten Fingereingabe Feedback anzeigen, können Benutzer die spezielle Auswahlheuristik Ihrer App und die zugehörigen Steuerelemente besser verstehen.
Verwenden Sie das für einen Eingabetyp vorgesehene Feedbackverhalten nicht für einen anderen Eingabetyp.

Beispiel: Tastaturfokusrechtecke sollten nur für die Tastatur- und nicht für die Toucheingabe verwendet werden.