Richtlinien für Zielbestimmung

In diesem Thema wird die Verwendung von Kontaktgeometrie für die Bestimmung von Fingereingabezielen auf der neuen Windows-UI beschrieben. Außerdem erhalten Sie Richtlinien für die Gestaltung der Benutzeroberfläche, die Sie berücksichtigen sollten, wenn Sie diese neuen Zielbestimmungsmechanismen in Windows Store-Apps verwenden.

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

Übersicht über die Zielbestimmung durch Kontaktgeometrie

Die Zielbestimmung für Fingereingaben in Windows 8 verwendet den vollständigen Kontaktbereich eines jeden Fingers, der durch einen Fingereingabedigitzer erkannt wird. Die größere und komplexere Menge an Eingabedaten, die vom Digitizer gemeldet wird, wird verwendet, um die Genauigkeit bei der Ermittlung des durch den Benutzer (höchstwahrscheinlich) beabsichtigten Ziels zu erhöhen. Dadurch wird die Benutzerfreundlichkeit erheblich erhöht, da die Genauigkeit verbessert wird und der Benutzer Zuversicht bei seinen Fingerinteraktionen gewinnt.

In den folgenden Empfehlungen wird beschrieben, wie Sie eine Anwendung für die Zielbestimmung bei der Fingereingabe optimieren.

Maße und Skalierung

Um die Konsistenz bei unterschiedlichen Bildschirmgrößen und Pixeldichten zu wahren, sind alle Zielgrößen in physischen Einheiten (Millimeter) angegeben. Physische Einheiten können mit der folgenden Gleichung in Pixel konvertiert werden:

Pixel = Pixeldichte × Maße

Die folgenden Beispiele verwenden diese Formel, um eine Zielgröße von 9 mm auf einem Display mit 135 PPI (Pixel Per Inch, Pixel pro Zoll) und einem einfachen Skalierungsplateau in die Pixelgröße umrechnen:

Pixel: 135 PPI × 9 mm

Pixel = 135 PPI × (0,03937 Zoll pro mm × 9 mm)

Pixel = 135 PPI × 0,35433 Zoll

Pixel = 48 Pixel

Dieses Ergebnis muss an jedes der im System definierten Skalierungsplateaus angepasst werden.

Schwellenwerte

Entfernungs- und Zeitschwellenwerte können verwendet werden, um das Ergebnis einer Interaktion zu ermitteln.

Wenn zum Beispiel ein Aufsetzen erkannt wird, wird ein Tippen registriert, wenn das Objekt in weniger als 2,7 mm Entfernung vom Aufsetzpunkt gezogen wird und die Berührung innerhalb von 0,1 Sekunden oder kürzer vom Aufsetzen aufgehoben wird. Wenn der Finger über den Schwellenwert von 2,7 mm hinaus bewegt wird, wird das Objekt gezogen und entweder ausgewählt oder verschoben (weitere Informationen finden Sie unter Richtlinien für Querziehen). Wenn Sie abhängig von Ihrer App den Finger länger als 0,1 Sekunde gedrückt halten, kann dadurch die Ausführung einer Interaktion mit automatischem Einblenden durch das System ausgelöst werden (weitere Informationen finden Sie unter Richtlinien für visuelles Feedback).

Zielgrößen

Es gibt keine definitiven Empfehlungen für die Größe eines Ziels oder für die Platzierung innerhalb Ihrer App. Die Größe und der Zielbereich eines Objekts hängen von verschiedenen Faktoren ab, beispielsweise von den Benutzeroberflächenszenarien und vom Kontext der Interaktion.

Im folgenden Diagramm wird gezeigt, dass die Größe eines Ziels in der Regel eine Kombination aus visuellem Ziel, tatsächlicher Zielgröße und dem Abstand zwischen dem tatsächlichen Ziel und den anderen potenziellen Zielen ist.

Diagramm mit den empfohlenen Größen für visuelles Ziel, tatsächliches Ziel und Abstand

In der folgenden Tabelle werden die Mindestgrößen und die empfohlenen Größen für alle Komponenten eines Fingereingabeziels aufgeführt.

Zielkomponente Mindestgröße Empfohlene Größe
Abstand 2 mm Nicht zutreffend
Visuelle Zielgröße < 60 % der tatsächlichen Größe 90 -100 % der tatsächlichen Größe
Tatsächliche Zielgröße 9 x 9 mm (48 x 48 px @ 1x)

Für Elemente, die kleiner sind als in den Richtlinien für die Gestaltung der Benutzeroberfläche empfohlen, sollte der Abstand zwischen dem Mittelpunkt eines Elements und dem Mittelpunkt des anderen Elements mindestens 9 mm betragen.

Nicht zutreffend
Gesamtzielgröße 11 x 11 mm (ca. 60 px: drei 20-px-Rastereinheiten @ 1x) 13,5 x 13,5 mm (72 x 72 px @ 1x)

Dies impliziert, dass die Größe des tatsächlichen Ziels und des Abstands zusammen größer sein muss als die jeweiligen Mindestgrößen.

 

Sie können diese Empfehlungen für die Zielgröße an die Anforderungen des jeweiligen Szenarios anpassen. In die Empfehlungen sind unter anderem die folgenden Überlegungen eingeflossen:

  • Häufigkeit der Fingereingaben: Erwägen Sie, Ziele, die wiederholt bzw. häufig berührt werden, größer als die Mindestgröße auszulegen.
  • Folgen von Fehlern: Ziele, bei denen die versehentliche Berührung schwerwiegende Folgen hat, sollten einen größeren Abstand haben und weiter vom Rand des Inhaltsbereichs entfernt platziert werden. Dies gilt insbesondere für Ziele, die häufig berührt werden.
  • Position im Inhaltsbereich
  • Formfaktor und Bildschirmgröße
  • Fingerhaltung
  • Fingereingabevisualisierungen
  • Hardware und Fingereingabe-Digitalisierungsgeräte

Unterstützung bei der Zielbestimmung

Windows unterstützt die Zielbestimmung für Szenarien, in denen die hier genannten Empfehlungen für Mindestgröße und Abstand nicht anwendbar sind. Dies gilt beispielsweise für Hyperlinks auf einer Webseite, Kalendersteuerelemente, Dropdownlisten und Kombinationsfelder oder für eine Textauswahl.

Diese Verbesserungen der Zielbestimmungsplattform und des Verhaltens der Benutzeroberfläche bewirken in Kombination mit visuellem Feedback (Mehrdeutigkeitsvermeidungs-UI) mehr Genauigkeit und Sicherheit für die Benutzer. Weitere Informationen finden Sie unter Richtlinien für visuelles Feedback.

Wenn ein berührbares Element kleiner als die empfohlene Mindestzielgröße sein muss, können Sie mit den folgenden Techniken die dadurch entstehenden Probleme bei der Zielbestimmung minimieren.

Anzeigen einer Verbindungslinie

Durch Anzeigen einer Verbindungslinie (zwischen einem Kontaktpunkt und dem Begrenzungsrechteck eines Objekts) können Sie Benutzer visuell darauf hinweisen, dass sie mit einem Objekt verbunden sind und mit diesem interagieren, obwohl kein direkter Kontakt zwischen Eingabekontakt und Objekt besteht. Dies ist in folgenden Situationen möglich:

  • Ein Berührungskontakt wurde zuerst innerhalb eines Näherungsschwellenwerts für ein Objekt erkannt, und das Objekt wurde als wahrscheinlichstes Ziel des Kontakts identifiziert.
  • Ein Berührungskontakt wurde von einem Objekt wegbewegt, aber der Kontakt befindet sich noch innerhalb eines Näherungsschwellenwerts.

Dieses Feature wird für Entwickler von Windows Store-Apps, die JavaScript verwenden, nicht verfügbar gemacht.

Scrubbing

Beim Scrubbing wird eine beliebige Stelle in einem Feld mit Zielen berührt, und das gewünschte Ziel wird durch Ziehen ausgewählt. Der Finger wird dabei erst gehoben, wenn er sich auf dem gewünschten Ziel befindet. Dies wird auch als "Loslassaktivierung" bezeichnet, bei der das Objekt aktiviert wird, das zuletzt berührt wurde, als der Finger vom Bildschirm gehoben wurde.

Halten Sie sich an die folgenden Richtlinien, wenn Sie Scrubbinginteraktionen designen:

  • Scrubbing wird in Verbindung mit der Mehrdeutigkeitsvermeidungs-UI verwendet. Weitere Informationen finden Sie unter Richtlinien für visuelles Feedback.
  • Die empfohlene Mindestgröße für ein Scrubbing-Fingereingabeziel beträgt 20 px (3,75 mm @ 1x Größe).
  • Scrubbing hat Vorrang, wenn es auf einer Oberfläche ausgeführt wird, die Verschieben unterstützt (beispielsweise eine Webseite).
  • Scrubbingziele sollten nah beieinander liegen.
  • Eine Aktion wird abgebrochen, wenn Benutzer einen Finger vom Scrubbingziel wegziehen.
  • Das Anzeigen einer Verbindungslinie zu einem Scrubbingziel wird angegeben, wenn die vom Ziel ausgeführten Aktionen nicht destruktiv sind (beispielsweise das Wechseln zwischen Daten in einem Kalender).
  • Das Anzeigen von Verbindungslinien wird in einer einzigen Richtung angegeben: horizontal oder vertikal.

Verwandte Themen

Konzept

Richtlinien für häufige Benutzerinteraktionen

Design für Interaktion per Fingereingabe

Lernprogramm (Windows Store-Apps mit JavaScript)

Schnellstart: Zeiger

Schnellstart: DOM-Gesten und -Manipulationen

Schnellstart: Statische Gesten

Schnellstart: Manipulationsgesten

Lernprogramm (Windows Store-Apps mit C#/VB/C++ und XAML)

Schnellstart: Fingereingabe

Schnellstart: Zeiger

Lernprogramm (Windows Store-Apps mit C++ und DirectX)

Reagieren auf Fingereingaben (DirectX und C++)

Beispiele (DOM)

Beispiel für HTML-Bildlauf, -Verschiebung und -Zoomen

Eingabe: Beispiel für instanziierbare Gesten

Beispiele (Windows Store-App-APIs)

Eingabe: Beispiel Manipulationen und Gesten (JavaScript)

Eingabe: Beispiel für Windows 8-Bewegungen

Eingabe: Beispiel XAML-Benutzereingabeereignisse

Beispiel für XAML-Bildlauf, -Verschiebung und -Zoomen

Beispiele (DirectX)

Beispiel für die DirectX-Fingereingabe

Eingabe: Beispiel Manipulationen und Gesten (C++)

Eingabe: Beispiel Fingereingabe-Treffertest

Referenz

Windows.UI.Core

Windows.UI.Input

Windows.UI.Xaml.Input