Berühren

Alle Microsoft Windows-Anwendungen sollten über eine großartige Toucheingabe verfügen. Und das Erstellen einer solchen Erfahrung ist einfacher, als Sie denken.

Die Toucheingabe bezieht sich auf die Verwendung eines oder mehrerer Finger, um Eingaben über eine Geräteanzeige bereitzustellen und mit Windows und Apps zu interagieren. Eine touchoptimierte App verfügt über ein Benutzeroberflächen- und Interaktionsmodell, das für die größeren, weniger präzisen Berührungsbereiche, die verschiedenen Formfaktoren von Touchgeräten und die vielen Haltungen und Griffe geeignet ist, die Benutzer bei Verwendung eines Touchgeräts annehmen können.

Jedes Eingabegerät hat seine Stärken. Die Tastatur eignet sich am besten für die Texteingabe und das Übergeben von Befehlen mit minimaler Handbewegung. Die Maus eignet sich am besten für effizientes, präzises Zeigen. Toucheingabe eignet sich am besten für Objektmanipulation und einfache Befehle. Ein Stift eignet sich am besten für Freihandformausdruck, wie bei Handschrift und Zeichnung.

Windows 8.1 ist für Reaktionsfähigkeit, Genauigkeit und Benutzerfreundlichkeit mit Toucheingabe optimiert, während herkömmliche Eingabemethoden (z. B. Maus, Stift und Tastatur) vollständig unterstützt werden. Die Geschwindigkeit, Genauigkeit und taktiles Feedback, das herkömmliche Eingabemodi bereitstellen, sind vertraut und ansprechend für viele Benutzer und potenziell besser für bestimmte Interaktionsszenarien geeignet.

Richtlinien für Maus, Stift und Barrierefreiheit finden Sie in separaten Themen.

Wenn Sie über die Interaktionserfahrung für Ihre App nachdenken:

Gehen Sie nicht davon aus, dass eine Benutzeroberfläche gut für eine Maus funktioniert, auch gut für die Toucheingabe geeignet ist. Während eine gute Mausunterstützung ein Start ist, hat eine gute Toucheingabe einige zusätzliche Anforderungen.

Gehen Sie davon aus, dass eine Benutzeroberfläche für einen Finger auch gut für einen Stift funktioniert. Die Toucheingabe ihrer App ist ein langer Weg, um auch eine gute Stiftunterstützung zu bieten. Der Hauptunterschied besteht darin, dass Finger eine Blunterspitze haben, sodass sie größere Ziele benötigen.

Mit Toucheingabe können Sie Objekte und UI direkt bearbeiten, was zu einer schnelleren, natürlicheren und ansprechenderen Erfahrung führt.

Sorgen Sie für ein großartiges Toucherlebnis

Sie sollten sicherstellen, dass Benutzer wichtige und wichtige Aufgaben effizient mithilfe von Toucheingaben ausführen können. Bestimmte App-Funktionen, z. B. Text- oder Pixelmanipulation, eignen sich möglicherweise nicht für die Toucheingabe und können für das am besten geeignete Eingabegerät reserviert werden.

Wenn Sie nicht viel Erfahrung mit der Entwicklung von Touch-Apps haben, ist es am besten, indem Sie lernen. Rufen Sie einen touchfähigen Computer ab, legen Sie die Maus und tastatur beiseite, und verwenden Sie nur Ihre Finger, um mit Ihrer App zu interagieren. Wenn Sie ein Tablet haben, experimentieren Sie mit dem Halten an unterschiedlichen Positionen, z. B. auf Ihrem Schoß, flach auf einem Tisch oder in Ihren Armen, während Sie stehen. Versuchen Sie, sie im Hoch- und Querformat zu verwenden.

Touchoptimierte Apps, die am besten mit Touchinteraktionen funktionieren, sind in der Regel:

• Natürlich und intuitiv. Interaktionen sind so konzipiert, dass sie der Interaktion von Benutzern mit Objekten in der realen Welt entsprechen.
• Weniger aufdringlich. Die Verwendung von Toucheingaben ist stumm und daher viel weniger ablenkend als eingaben oder klicken.
• Tragbar. Touchgeräte sind kompakter, da viele Aufgaben ohne Tastatur, Maus, Stift oder Touchpad abgeschlossen werden können. Sie sind auch flexibler, da keine Arbeitsfläche erforderlich ist.
• Direkt und ansprechend. Mit der Toucheingabe fühlen Sie sich wie das direkte Bearbeiten von Objekten auf dem Bildschirm.
• Weniger genau. Benutzer können objekte im Vergleich zu einer Maus oder einem Stift nicht so genau wie per Toucheingabe ausrichten.

Touch bietet ein natürliches, reales Gefühl für Interaktion. Direkte Manipulation und Animation vervollständigen diesen Eindruck, indem Objekte eine realistische, dynamische Bewegung und Feedback erhalten. Betrachten Sie z. B. ein Kartenspiel. Nicht nur ist es bequem und einfach, Karten mit einem Finger zu ziehen, die Erfahrung übernimmt ein ansprechendes reales Gefühl, wenn Sie tossen, gleiten und die Karten drehen können, genau wie ein physisches Deck. Und wenn Sie versuchen, eine Karte zu verschieben, die nicht verschoben werden kann, ist es eine bessere Erfahrung, die Karte widerstand zu haben, aber keine Bewegung zu verhindern und sich wieder an Ort und Stelle zu setzen, um deutlich anzuzeigen, dass die Aktion erkannt wurde, aber nicht erledigt werden kann.

Wenn Ihre App bereits gut konzipiert ist, ist es einfach, eine großartige Toucheingabe zu ermöglichen. Zu diesem Zweck ein gut gestaltetes Programm:

• Stellt sicher, dass die wichtigsten Aufgaben mithilfe eines Fingers effizient ausgeführt werden können (zumindest die Aufgaben, die nicht viele Eingaben oder detaillierte Pixelbearbeitung erfordern).
• Verwendet große Steuerelemente für die Toucheingabe. Allgemeine Steuerelemente haben eine Mindestgröße von 23 x 23 Pixel (13 x 13 DLUs), und die am häufigsten verwendeten Steuerelemente sind mindestens 40 x 40 Pixel (23x22 DLUs). Um nicht reagierende Verhaltensweisen zu vermeiden, sollten UI-Elemente mindestens 5 Pixel (3 DLUs) zwischen ihnen haben. Stellen Sie bei anderen Steuerelementen sicher, dass sie mindestens ein 23 x 23 Pixel (13x13 DLU)-Klickziel haben, auch wenn ihre statische Darstellung viel kleiner ist. Siehe Standardsteuerelementgröße.
• Unterstützt Mauseingaben. Die interaktiven Steuerelemente verfügen über klare, sichtbare Angebote. Objekte weisen Standardverhalten für die Standardmäßigen Mausinteraktionen auf (einzelne und doppelklick, rechtsklick, ziehen und darauf zeigen).
• Unterstützt Tastatureingaben. Die App stellt Standardtastenzuweisungen bereit, insbesondere für Navigations- und Bearbeitungsbefehle, die auch über Touchgesten generiert werden können.
• Stellt die Barrierefreiheit sicher. Verwendet die Benutzeroberflächenautomatisierung oder Microsoft Active Accessibility (MSAA), um programmgesteuerten Zugriff auf die Benutzeroberfläche für Hilfstechnologien bereitzustellen. Die App reagiert entsprechend auf Ausrichtungs-, Design-, Gebietsschema- und Systemmetrikänderungen.
• Entfernt unnötige Interaktionen. Verwenden Sie die sichersten und sichersten Standardwerte, um den Verlust von Daten oder Systemzugriff zu verhindern. Wenn Sicherheit und Sicherheit keine Faktoren sind, wählt die App die wahrscheinlichste oder bequeme Option aus.
• Stellt touchäquivalent zum Daraufzeigen bereit. Verlassen Sie sich nicht auf den Mauszeiger als einzige Möglichkeit zum Ausführen einer Aktion.
• Stellt sicher, dass Gesten sofort wirksam werden. Halten Sie kontaktpunkte unter den Fingern des Benutzers gleichmäßig während der gesamten Geste, wodurch die Auswirkung der Gestenzuordnung direkt zur Bewegung des Benutzers bereitgestellt wird.
• Verwendet standardmäßige Gesten, wenn möglich. Benutzerdefinierte Gesten nur für Interaktionen, die für Ihre App eindeutig sind.
• Stellt sicher, dass unerwünschte oder destruktive Befehle rückgängig gemacht oder korrigiert werden können. Versehentliche Aktionen sind wahrscheinlicher, wenn Sie die Fingereingabe verwenden.

Richtlinien für die Toucheingabe

Mit Toucheingabe kann Ihre Windows-App physische Gesten verwenden, um die direkte Manipulation von UI-Elementen zu emulieren.

Beachten Sie beim Entwerfen Ihrer app mit Toucheingabe die folgenden bewährten Methoden:

Reaktionsfähigkeit ist entscheidend für die Erstellung von Touchfunktionen, die sich direkt und ansprechend fühlen. Um sich direkt zu fühlen, müssen Gesten sofort wirksam werden, und die Kontaktpunkte eines Objekts müssen während der gesamten Geste reibungslos unter den Fingern des Benutzers bleiben. Der Effekt der Toucheingabe sollte direkt der Bewegung des Benutzers zugeordnet werden, z. B. wenn der Benutzer seine Finger um 90 Grad dreht, sollte das Objekt auch 90 Grad drehen. Jede Verzögerung, gehackte Reaktion, Verlust des Kontakts oder ungenaue Ergebnisse zerstört die Wahrnehmung der direkten Manipulation und auch der Qualität.

Konsistenz ist entscheidend für die Erstellung von Touch-Erlebnissen, die sich natürlich und intuitiv fühlen. Sobald Benutzer eine Standardgeste gelernt haben, erwarten sie, dass diese Geste für alle Apps denselben Effekt hat. Um Verwirrung und Frustration zu vermeiden, weisen Sie standardgesten niemals nicht standardmäßige Bedeutungen zu. Verwenden Sie stattdessen benutzerdefinierte Gesten für Interaktionen, die für Ihr Programm eindeutig sind.

Als Nächstes beschreiben wir die Windows-Sprache für die Fingereingabe, aber bevor wir fortfahren, finden Sie hier eine kurze Liste grundlegender Begriffe für die Toucheingabe.

• Geste

  Eine Geste ist der physische Akt oder die Bewegung, die auf dem Eingabegerät ausgeführt wird (Finger, Finger, Zeichen-/Eingabestift, Maus usw.). Um beispielsweise einen Befehl zu starten, zu aktivieren oder aufzurufen, verwenden Sie einen Finger für ein Touch- oder Touchpadgerät (entspricht einem Linkenklick mit einer Maus, einem Tippen mit einem Stift oder der EINGABETASTE auf einer Tastatur).

• Manipulation

  Eine Manipulation ist die sofortige Echtzeitreaktion oder Reaktion, die ein Objekt oder eine Benutzeroberfläche auf eine Geste hat. Beispielsweise führen sowohl die Folie als auch die Wischgesten in der Regel dazu, dass ein Element oder eine Benutzeroberfläche auf irgendeine Weise verschoben wird.

  Das endgültige Ergebnis einer Manipulation, wie es vom Objekt auf dem Bildschirm und in der Benutzeroberfläche manifestiert wird, ist die Interaktion.

• Interaktion

  Interaktionen hängen davon ab, wie eine Manipulation interpretiert wird, und der Befehl oder die Aktion, die aus der Manipulation resultiert. Objekte können z. B. mithilfe der Folie und der Streifbewegung verschoben werden, die Ergebnisse unterscheiden sich jedoch je nachdem, ob ein Abstandsschwellenwert überschritten wird. Folie kann verwendet werden, um ein Objekt zu ziehen oder eine Ansicht zu verschieben, während Wischen zum Auswählen eines Elements oder Anzeigen einer App-Leiste verwendet werden kann.

Die Windows-Sprache für die Toucheingabe

Windows bietet einen präzisen Satz von Touchinteraktionen, die im gesamten System verwendet werden. Wenn Sie diese Touchsprache konsistent anwenden, fühlt sich Ihre App mit den bereits bekannten Benutzern vertraut. Dies erhöht das Vertrauen der Benutzer, indem Ihre App leichter zu erlernen und zu verwenden ist. Weitere Informationen zur Implementierung von Fingereingabesprachen finden Sie unter Gesten, Manipulationen und Interaktionen.

Drücken und Halten, um

Die Gedrückthalten-Geste zeigt detaillierte Informationen oder visuelle Lernelemente an (z. B. eine QuickInfo oder ein Kontextmenü), ohne sich für eine Aktion oder einen Befehl zu engagieren. Das Verschieben ist weiterhin möglich, wenn eine Schiebebewegung gestartet wird, während das visuelle Element angezeigt wird.

Eingabezustand: Ein oder zwei Finger in Kontakt mit dem Bildschirm.

Bewegung: Keine Bewegung.

Beendigungszustand: Der letzte Finger nach oben endet die Geste.

Effekt: Weitere Informationen anzeigen.

Die Gedrückthalten-Geste.

Hover-

Das Daraufzeigen ist eine nützliche Interaktion, da Benutzer zusätzliche Informationen über Tipps abrufen können, bevor Sie eine Aktion initiieren. Wenn Sie diese Tipps sehen, fühlen sich Die Benutzer sicherer und reduzieren Fehler.

Leider wird das Daraufzeigen von Touchtechnologien nicht unterstützt, sodass Benutzer beim Verwenden eines Fingers nicht darauf zeigen können. Die einfache Lösung für dieses Problem besteht darin, den Mauszeiger vollständig zu nutzen, aber nur auf Arten, die nicht zum Ausführen einer Aktion erforderlich sind. In der Praxis bedeutet dies in der Regel, dass die Aktion auch durch Klicken ausgeführt werden kann, aber nicht unbedingt auf die gleiche Weise.

In diesem Beispiel können Benutzer das heutige Datum sehen, indem Sie entweder darauf zeigen oder darauf klicken.

Tippen für primäre Aktion

Durch Tippen auf ein Element wird die primäre Aktion aufgerufen, z. B. das Starten einer App oder das Ausführen eines Befehls.

Eingabezustand: Ein Finger in Kontakt mit dem Bildschirm oder Touchpad und aufgehoben, bevor der Zeitschwellenwert für eine Gedrückthalten-Interaktion auftritt.

Bewegung: Keine Bewegung.

Beendigungszustand: Mit dem Finger nach oben endet die Geste.

Effekt: Starten Sie eine App, oder führen Sie einen Befehl aus.

Die Tippbewegung.

Folie verschieben

Die Folie wird in erster Linie für Verschiebungsinteraktionen verwendet, kann aber auch zum Verschieben verwendet werden (wobei die Verschiebung auf eine Richtung beschränkt ist), zeichnen oder schreiben. Die Folie kann auch verwendet werden, um kleine, dicht gepackte Elemente durch Scrubbing (Ziehen des Fingers über verwandte Objekte wie Optionsfelder) zu erreichen.

Eingabezustand: Ein oder zwei Finger in Kontakt mit dem Bildschirm.

Bewegung: Ziehen Sie, wobei alle zusätzlichen Finger in derselben Position relativ zueinander verbleiben.

Beendigungszustand: Der letzte Finger nach oben endet die Geste.

Effekt: Bewegen Sie das zugrunde liegende Objekt direkt und sofort, wenn sich die Finger bewegen. Achten Sie darauf, den Kontaktpunkt während der gesamten Geste unter dem Finger zu halten.

Die Verschiebungsgeste.

Zum Auswählen, Befehl und Verschieben

Wenn Sie den Finger über einen kurzen Abstand bewegen, senkrecht zur Verschiebungsrichtung (wobei die Verschiebung auf eine Richtung beschränkt ist), markiert Objekte in einer Liste oder einem Raster. Zeigen Sie die App-Leiste mit relevanten Befehlen an, wenn Objekte ausgewählt werden.

Eingabezustand: Mindestens ein Finger berührt den Bildschirm.

Bewegung: Ziehen Sie einen kurzen Abstand, und heben Sie ihn an, bevor der Abstandsschwellenwert für eine Bewegungsinteraktion auftritt.

Beendigungszustand: Der letzte Finger nach oben endet die Geste.

Effekt: Das zugrunde liegende Objekt wird ausgewählt oder verschoben, oder die App-Leiste wird angezeigt. Achten Sie darauf, den Kontaktpunkt während der gesamten Geste unter dem Finger zu halten.

Die Streifbewegung.

Zusammendrücken und Aufziehen zum Zoomen

Die Zusammendrücken und Gesten zum Aufziehen werden für drei Arten von Interaktionen verwendet: optischer Zoom, Größenänderung und semantischer Zoom.

Der optische Zoom passt die Vergrößerungsebene des gesamten Inhaltsbereichs an, um eine detailliertere Ansicht des Inhalts zu erhalten. Im Gegensatz dazu ist die Größenänderung ein Verfahren zum Anpassen der relativen Größe eines oder mehrerer Objekte innerhalb eines Inhaltsbereichs, ohne die Ansicht in den Inhaltsbereich zu ändern.

Der semantische Zoom ist eine touchoptimierte Technik zum Darstellen und Navigieren in strukturierten Daten oder Inhalten innerhalb einer einzelnen Ansicht (z. B. die Ordnerstruktur eines Computers, eine Dokumentbibliothek oder ein Fotoalbum), ohne dass Verschiebungs-, Bildlauf- oder Strukturansichtssteuerelemente erforderlich sind. Der semantische Zoom bietet zwei verschiedene Ansichten desselben Inhalts, indem Sie beim Verkleineren mehr Details anzeigen und weniger Details anzeigen können.

Eingabezustand: Zwei Finger in Kontakt mit dem Bildschirm gleichzeitig.

Bewegung: Finger bewegen sich auseinander (Strecken) oder zusammen (Zusammendrücken) entlang einer Achse.

Ausgangszustand: Jeder Finger nach oben endet die Geste.

Effekt: Zoomen Sie das zugrunde liegende Objekt direkt und sofort, wenn sich die Finger auf der Achse trennen oder nähern. Achten Sie darauf, die Kontaktpunkte während der gesamten Geste unter dem Finger zu halten.

Die Zoombewegung.

Drehen

Durch das Drehen mit zwei oder mehr Fingern wird ein Objekt gedreht. Drehen Sie das Gerät selbst, um den gesamten Bildschirm zu drehen.

Eingabezustand: Zwei Finger in Kontakt mit dem Bildschirm gleichzeitig.

Bewegung: Ein oder beide Finger drehen sich um den anderen, und bewegen sich senkrecht zur Linie dazwischen.

Ausgangszustand: Jeder Finger nach oben endet die Geste.

Effekt: Drehen Sie das zugrunde liegende Objekt so, wie die Finger gedreht haben. Achten Sie darauf, die Kontaktpunkte während der gesamten Geste unter dem Finger zu halten.

Die Drehbewegung.

Drehung ist nur für bestimmte Objekttypen sinnvoll, sodass sie keiner Windows-Systeminteraktion zugeordnet ist.

Die Drehung erfolgt häufig unterschiedlich von verschiedenen Personen. Einige Personen ziehen es vor, einen Finger um einen Pivotfinger zu drehen, während andere beide Finger in einer kreisförmigen Bewegung drehen möchten. Die meisten Personen verwenden eine Kombination aus den beiden, wobei ein Finger mehr als die andere bewegt. Während eine reibungslose Drehung in einen beliebigen Winkel die beste Interaktion ist, empfiehlt es sich in vielen Kontexten, z. B. der Fotoanzeige, sich auf die nächste Drehung von 90 Grad zu begleichen, sobald der Benutzer loslässt. Bei der Fotobearbeitung können Sie eine kleine Drehung verwenden, um das Foto zu glätten.

Vom Rand wischen für App-Befehle

Wenn Sie den Finger kurz vom unteren oder oberen Bildschirmrand wischen, werden App-Befehle in einer App-Leiste angezeigt.

Einstiegszustand: Mindestens ein Finger berührt die Abzel.

Bewegung: Ziehen Sie einen kurzen Abstand auf den Bildschirm, und heben Sie ihn an.

Beendigungszustand: Der letzte Finger nach oben endet die Geste.

Effekt: Die App-Leiste wird angezeigt.

Die Streifbewegung vom Rand.

Entwickler: Weitere Informationen finden Sie unter DIRECTMANIPULATION_CONFIGURATION Enumeration.

Steuern der Nutzung

Hier stellen wir einige Richtlinien für die Optimierung von Steuerelementen für die Toucheingabenutzung bereit.

• Verwenden Sie allgemeine Steuerelemente. Die häufigsten Steuerelemente sind so konzipiert, dass sie eine gute Toucheingabe unterstützen.
• Wählen Sie benutzerdefinierte Steuerelemente aus, die für die Unterstützung der Toucheingabe vorgesehen sind. Möglicherweise benötigen Sie benutzerdefinierte Steuerelemente, um die speziellen Erfahrungen Ihres Programms zu unterstützen. Wählen Sie benutzerdefinierte Steuerelemente aus, die:
  • Kann groß genug sein, um eine einfache Zielbestimmung und Manipulation zu ermöglichen.
  • Wenn Sie manipuliert werden, bewegen und reagieren Sie so, wie reale Objekte sich bewegen und reagieren, z. B. durch Bewegung und Reibung.
  • Verzeihen Sie, indem Sie Benutzern die Möglichkeit geben, Fehler einfach zu korrigieren.
  • Verzeihen Sie Ungenauigkeiten beim Klicken und Ziehen. Objekte, die in der Nähe ihres Ziels abgelegt werden, sollten an die richtige Stelle fallen.
  • Haben Sie klares visuelles Feedback, wenn sich der Finger über dem Steuerelement befindet.
• Verwenden Sie eingeschränkte Steuerelemente. Eingeschränkte Steuerelemente wie Listen und Schieberegler können besser sein als nicht eingeschränkte Steuerelemente wie Textfelder, da sie den Bedarf an Texteingaben verringern.
• Geben Sie geeignete Standardwerte an. Wählen Sie standardmäßig die sicherste Option (um Datenverlust oder Systemzugriff zu verhindern) und die sicherste Option aus. Wenn Sicherheit und Sicherheit keine Faktoren sind, wählen Sie die wahrscheinlichste oder bequeme Option aus, wodurch unnötige Interaktionen vermieden werden.
• Bereitstellen der automatischen Textvervollständigung. Stellt eine Liste mit höchstwahrscheinlichen Werten oder zuletzt eingegebenen Werten bereit, um die Texteingabe wesentlich zu vereinfachen.
• Für wichtige Aufgaben, die mehrere Auswahl-verwenden, stellen Sie bei normaler Verwendung einer Standardmäßigen Mehrfachauswahlliste stattdessen eine Option für die Verwendung einer Kontrollkästchenliste bereit.

Steuerelementgrößen und Touchadressierung

Aufgrund des großen Oberflächenbereichs der Fingerspitzen kann es schwierig sein, kleine Steuerelemente, die zu nah zusammen sind, präzise abzuzielen.

Im Allgemeinen ist eine Steuerelementgröße von 23 x 23 Pixel (13x13 DLUs) eine gute interaktive Mindestgröße für jedes Eingabegerät. Im Gegensatz dazu sind die Drehsteuerelemente mit 15 x 11 Pixeln viel zu klein, um effektiv mit Toucheingaben verwendet zu werden.

Beachten Sie, dass die Mindestgröße wirklich auf physischen Bereichen basiert, nicht auf Layoutmetriken wie Pixel oder DLUs. Forschungsergebnisse deuten darauf hin, dass der minimale Zielbereich für eine effiziente, genaue Interaktion mit einem Finger 6 x 6 Millimeter (mm) beträgt. Dieser Bereich wird wie folgt in Layoutmetriken übersetzt:

Schriftart	Millimeter	Relative Pixel	DLUs
9 Punkt Segoe UI	6x6	23 x 23	13 x 13
8 Punkt Tahoma	6x6	23 x 23	15 x 14

Darüber hinaus zeigt die Forschung, dass eine Mindestgröße von 10x10 mm (ca. 40 x 40 Pixel) eine bessere Geschwindigkeit und Genauigkeit ermöglicht und sich auch für die Benutzer wohler fühlt. Verwenden Sie diese größere Größe bei Befehlsschaltflächen, die für die wichtigsten oder häufig verwendeten Befehle verwendet werden.

Das Ziel ist nicht, riesige Steuerelemente zu haben, nur solche, die leicht mit Toucheingaben verwendet werden.

In diesem Beispiel verwendet Microsoft Word Schaltflächen, die größer als 10 x 10 mm sind, für die wichtigsten Befehle.

Diese Version des Rechners verwendet Schaltflächen, die größer als 10 x 10 mm sind, für die am häufigsten verwendeten Befehle.

Es gibt keine perfekte Größe für Touchziele. Unterschiedliche Größen funktionieren für unterschiedliche Situationen. Aktionen mit schwerwiegenden Folgen (z. B. Löschen und Schließen) oder häufig verwendete Aktionen sollten große Fingereingabeziele verwenden. Selten verwendete Aktionen mit geringfügigen Folgen können kleine Ziele verwenden.

Richtlinien für die Zielgröße für benutzerdefinierte Steuerelemente

Größenrichtlinie	Beschreibung
	7 x 7 mm: Empfohlene Mindestgröße 7x7 mm ist eine gute Mindestgröße, wenn das Berühren des falschen Ziels in einer oder zwei Gesten oder innerhalb von fünf Sekunden korrigiert werden kann. Der Abstand zwischen Zielen ist genauso wichtig wie die Zielgröße.
	Wenn die Genauigkeit Schließen, Löschen und andere Aktionen mit schwerwiegenden Folgen können sich nicht versehentliche Tippen leisten. Verwenden Sie 9x9 mm-Ziele, wenn beim Berühren des falschen Ziels mehr als zwei Gesten, fünf Sekunden oder eine wesentliche Kontextänderung erforderlich sind, um dies zu korrigieren.
	Wenn dies nicht passt Wenn Sie feststellen, dass Sie dinge passen, ist es in Ordnung, 5 x 5 mm Ziele zu verwenden, solange das Berühren des falschen Ziels mit einer Geste korrigiert werden kann. Die Verwendung von 2 mm Abstand zwischen Zielen ist in diesem Fall äußerst wichtig.

richtlinien für Zielgröße für allgemeine Steuerelemente

• Verwenden Sie für allgemeine Steuerelemente die empfohlenen Steuerelementgrößen. Die empfohlene Steuerelementgröße entspricht der Mindestgröße von 23 x 23 Pixel (13 x 13 DLU), mit Ausnahme von Kontrollkästchen und Optionsfeldern (ihre Textbreite kompensiert etwas), Drehsteuerelemente (die nicht mit Toucheingabe verwendet werden können, aber redundant sind) und Splitter.

  

  Die empfohlenen Steuergrößen lassen sich leicht berühren.

• Für Befehlsschaltflächen, die für die wichtigsten oder am häufigsten verwendeten Befehle verwendet werden, verwenden Sie bei praktischer Praxis eine Mindestgröße von 40 x 40 Pixeln (23 x 22 DLUs). Dies führt zu einer besseren Geschwindigkeit und Genauigkeit und fühlt sich auch für die Benutzer wohler.

  

  Verwenden Sie immer dann größere Befehlsschaltflächen für wichtige oder häufig verwendete Befehle.

• Für andere Steuerelemente:

  • Verwenden Sie größere Klickziele. Bei kleinen Steuerelementen wird die Zielgröße größer als das statisch sichtbare UI-Element. Beispielsweise können 16 x 16 Pixel-Symbolschaltflächen eine Zielschaltfläche mit 23 x 23 Pixeln aufweisen, und Textelemente können auswahlrechtecks 8 Pixel breiter sein als der Text und 23 Pixel hoch.

    Richtig:

    

    Unrichtig:

    

    Richtig:

    

    In den richtigen Beispielen sind die Klickziele größer als die statisch sichtbaren UI-Elemente.

  • Verwenden Sie redundante Klickziele. Es ist zulässig, dass Klickziele kleiner als die Mindestgröße sein, wenn dieses Steuerelement über redundante Funktionen verfügt.

    Die vom Steuerelement für die Strukturansicht verwendeten progressiven Offenlegungsdreiecks sind beispielsweise nur 6 x 9 Pixel, ihre Funktionalität ist jedoch mit den zugehörigen Elementbeschriftungen redundant.

    

    Die Dreiecke der Strukturansicht sind zu klein, um leicht zu berühren, aber sie sind redundant in der Funktionalität mit ihren größeren zugeordneten Bezeichnungen.

    Beachten Sie Systemmetriken. Hartcodieren Sie keine Größen. Bei Bedarf können Benutzer die Systemmetriken oder dpi ändern, um ihre Anforderungen zu erfüllen. Behandeln Sie dies jedoch als letzte Möglichkeit, da Benutzer normalerweise keine Systemeinstellungen anpassen müssen, um die Benutzeroberfläche nutzbar zu machen.

    

    In diesem Beispiel wurde die Systemmetrik für die Menühöhe geändert.

Bearbeiten von Text

Das Bearbeiten von Text ist eine der anspruchsvollsten Interaktionen bei Verwendung eines Fingers. Durch die Verwendung von eingeschränkten Steuerelementen, geeigneten Standardwerten und der automatischen Vervollständigung wird die Eingabe von Text vermieden oder reduziert. Wenn Ihre App jedoch das Bearbeiten von Text umfasst, können Sie benutzer produktiver machen, indem Sie die Eingabe-UI bei Verwendung der Toucheingabe standardmäßig auf bis zu 150 Prozent zoomen.

Ein E-Mail-Programm könnte z. B. eine Benutzeroberfläche in einer normalen touchbaren Größe anzeigen, aber die Eingabebenutzeroberfläche auf 150 Prozent zoomen, um Nachrichten zu verfassen.

In diesem Beispiel wird die Eingabe-UI auf 150 Prozent vergrößert.

Steuern des Layouts und des Abstands

Der Abstand zwischen Steuerelementen ist ein wichtiger Faktor, um Steuerelemente leicht zu berühren. Die Zielbestimmung ist schneller, aber weniger präziser, wenn Sie einen Finger als Zeigegerät verwenden, was dazu führt, dass Benutzer häufiger außerhalb ihres beabsichtigten Ziels tippen. Wenn interaktive Steuerelemente sehr nahe beieinander platziert werden, aber nicht tatsächlich berühren, können Benutzer auf inaktiven Platz zwischen den Steuerelementen klicken. Da das Klicken auf inaktiven Bereich kein Ergebnis oder visuelles Feedback hat, sind Die Benutzer oft unsicher, was schief gegangen ist.

Dynamische Anpassung des Abstands basierend auf dem verwendeten Eingabegerät. Dies ist besonders nützlich bei vorübergehenden UI-Elemente wie Menüs und Flyouts.

Stellen Sie mindestens 5 Pixel (3 DLUs) zwischen den Zielbereichen interaktiver Steuerelemente bereit. Wenn kleine Steuerelemente zu eng angeordnet sind, muss der Benutzer mit Genauigkeit tippen, um das Tippen auf das falsche Objekt zu vermeiden.

Vereinfachen Sie die Unterscheidung von Steuerelementen innerhalb von Gruppen, indem Sie mehr als den empfohlenen vertikalen Abstand zwischen Steuerelementen verwenden. Optionsfelder mit einer Höhe von 19 Pixeln sind beispielsweise kürzer als die empfohlene Mindestgröße von 23 Pixeln. Wenn Sie vertikalen Platz zur Verfügung haben, können Sie ungefähr den gleichen Effekt erzielen wie die empfohlene Größenanpassung, indem Sie zusätzliche 4 Pixel Abstand zu den Standardpixeln 7 Pixel hinzufügen.

Richtig:

Besser:

Im besseren Beispiel erleichtert der zusätzliche Abstand zwischen den Optionsfeldern die Unterscheidung.

Es kann Situationen geben, in denen zusätzlicher Abstand bei der Verwendung der Toucheingabe wünschenswert wäre, aber nicht bei Verwendung der Maus oder Tastatur. Verwenden Sie in solchen Fällen nur ein geräumigeres Design, wenn eine Aktion per Toucheingabe initiiert wird.

Wählen Sie ein Layout aus, das Steuerelemente nahe der Stelle platziert, an der sie am wahrscheinlichsten verwendet werden. Halten Sie Aufgabeninteraktionen in einem kleinen Bereich, wenn möglich, und suchen Sie Steuerelemente in der Nähe, an der sie am wahrscheinlichsten verwendet werden. Vermeiden Sie Lange-Distanz-Handbewegungen, insbesondere für häufige Aufgaben und für Ziehvorgänge.

Berücksichtigen Sie, dass die aktuelle Zeigerposition das am nächsten gelegene Ziel ist, wodurch es trivial zu erwerben ist. Daher nutzen Kontextmenüs das Recht von Fitts wie die von Microsoft Office verwendeten Minisymbolleisten.

Vermeiden Sie das Platzieren kleiner Steuerelemente am Rand der App oder des Bildschirms. Kleine Ziele in der Nähe von Rändern können schwierig zu berühren sein (Display-Rahmen können Ränder gesten stören). Um sicherzustellen, dass Steuerelemente einfach ausgerichtet werden können, wenn ein Fenster maximiert wird, machen Sie sie entweder mindestens 23 x 23 Pixel (13 x 13 DLUs) oder platzieren Sie sie außerhalb des Fensterrands.

Verwenden Sie den empfohlenen Abstand. Der empfohlene Abstand ist berührungsfreundlicher. Wenn Ihre App jedoch von größeren Größen und Abständen profitieren kann, sollten Sie bei Bedarf die empfohlene Größenanpassung und den empfohlenen Abstand berücksichtigen.

Stellen Sie mindestens 5 Pixel (3 DLUs) zwischen interaktiven Steuerelementen bereit. Dies verhindert Verwirrung, wenn Benutzer außerhalb ihres beabsichtigten Ziels tippen.

Erwägen Sie, mehr als den empfohlenen vertikalen Abstand innerhalb von Steuerelementgruppen hinzuzufügen, z. B. Befehlslinks, Kontrollkästchen und Optionsfelder sowie zwischen den Gruppen. Dies erleichtert ihnen die Unterscheidung.

Erwägen Sie, mehr als den empfohlenen vertikalen Abstand dynamisch hinzuzufügen, wenn eine Aktion per Toucheingabe initiiert wird. Dies erleichtert die Unterscheidung von Objekten, aber ohne mehr Platz bei Verwendung einer Tastatur oder Maus zu nehmen. Vergrößern Sie den Abstand um ein Drittel ihrer normalen Größe oder mindestens 8 Pixel.

In diesem Beispiel sind Die Sprunglisten der Windows 7-Taskleiste bei der Anzeige mit Toucheingaben umfangreicher.

Wechselwirkung

Wenn Sie die richtigen Steuerelemente verwenden, erhalten Sie nur einen Teil der Möglichkeit zu einer touchoptimierten App. Außerdem müssen Sie das allgemeine Interaktionsmodell berücksichtigen, das diese Steuerelemente unterstützen. Hier sind einige Richtlinien, die Ihnen dabei helfen.

• Machen Sie den Mauszeiger redundant. Der Mauszeiger wird von den meisten Touchtechnologien nicht unterstützt, sodass Benutzer mit solchen Touchscreens keine Aufgaben ausführen können, die das Daraufzeigen erfordern.

• Für Apps, die Texteingaben benötigen, integrieren Sie das Feature für die Bildschirmtastatur vollständig:

  • Bereitstellen geeigneter Standardwerte für die Benutzereingabe.
  • Bereitstellen von Vorschlägen zur automatischen Fertigstellung bei Bedarf.

  Anmerkung

  Entwickler: Weitere Informationen zum Integrieren der Bildschirmtastatur finden Sie unter ITextInputPanel-.

• Ermöglichen Sie Benutzern das Zoomen der Inhalts-UI, wenn Ihr Programm Aufgaben enthält, die Text bearbeiten müssen. Erwägen Sie das automatische Zoomen auf 150 Prozent, wenn die Fingereingabe verwendet wird.

• Sorgen Sie für reibungsloses, reaktionsfähiges Schwenken und Zoomen, wo immer sie geeignet sind. Zeichnen Sie schnell nach einer Verschiebung oder einem Zoom neu, um reaktionsfähig zu bleiben. Dies ist notwendig, um die direkte Manipulation wirklich direkt zu gestalten.

• Stellen Sie während einer Verschiebung oder eines Zooms sicher, dass die Kontaktpunkte während der gesamten Geste unter dem Finger bleiben. Andernfalls ist die Steuerung des Schwenkens oder Zooms schwierig.

• Da Gesten memoriert sind, weisen Sie ihnen Bedeutungen zu, die für alle Apps konsistent sind. Weisen Sie Gesten mit fester Semantik nicht unterschiedlichen Bedeutungen zu. Verwenden Sie stattdessen eine entsprechende App-spezifische Geste.

Vergebung

Direkte Manipulation macht die Toucheingabe natürlich, ausdrucksstark, effizient und ansprechend. Wenn es jedoch direkte Manipulationen gibt, kann es unbeabsichtigte Manipulationen geben und daher die Notwendigkeit der Vergebung.

Vergebung ist die Fähigkeit, eine unerwünschte Aktion einfach rückgängig zu machen oder zu korrigieren. Sie machen eine Touch-Erfahrung, indem Sie "Rückgängig" bereitstellen, ein gutes visuelles Feedback geben, eine klare physische Trennung zwischen häufig verwendeten Befehlen und destruktiven Befehlen haben und Benutzern das einfache Korrigieren von Fehlern ermöglichen. Im Zusammenhang mit Vergebung wird verhindert, dass unerwünschte Aktionen an erster Stelle ausgeführt werden, was Sie tun können, indem Sie eingeschränkte Steuerelemente und Bestätigungen für riskante Aktionen oder Befehle verwenden, die unbeabsichtigte Folgen haben.

• Stellen Sie einen Rückgängig-Befehl bereit. Es ist am besten, eine einfache Möglichkeit zum Rückgängigmachen aller Befehle bereitzustellen, ihre App verfügt jedoch möglicherweise über einige Befehle, deren Wirkung nicht rückgängig gemacht werden kann.

• Geben Sie, wann immer praktisch, ein gutes Feedback auf dem Finger nach unten, aber ergreifen Sie keine Aktionen, bis sie mit dem Finger nach oben gehen. Auf diese Weise können Benutzer Fehler korrigieren, bevor sie sie machen.

• Wenn dies praktisch ist, können Benutzer Fehler problemlos korrigieren. Wenn eine Aktion mit dem Finger nach oben wirksam wird, können Benutzer Fehler korrigieren, indem Sie gleiten, während der Finger noch unten ist.

• Geben Sie immer dann an, dass eine direkte Manipulation nicht durchgeführt werden kann, indem Sie der Bewegung widerstehen. Lassen Sie die Bewegung zu, lassen Sie das Objekt jedoch wieder ein, wenn es losgelassen wird, um deutlich anzugeben, dass die Aktion erkannt wurde, aber nicht möglich ist.

• Haben Sie eine klare physische Trennung zwischen häufig verwendeten Befehlen und destruktiven Befehlen. Andernfalls können Benutzer versehentlich destruktive Befehle berühren. Ein Befehl gilt als destruktiv, wenn seine Wirkung weit verbreitet ist und entweder nicht leicht rückgängig gemacht werden kann oder der Effekt nicht sofort erkennbar ist.

• Bestätigen Sie Befehle für riskante Aktionen oder Befehle, die unbeabsichtigte Folgen haben. Verwenden Sie hierfür ein Bestätigungsdialogfeld.

• Erwägen Sie, alle anderen Aktionen zu bestätigen, die Benutzer bei der Verwendung von Toucheingaben häufig versehentlich ausführen, und die entweder unbemerkt bleiben oder schwer rückgängig zu machen sind. Normalerweise werden diese als Routinebestätigungen bezeichnet und aufgrund der Annahme abgeraten, dass Benutzer solche Befehle nicht häufig versehentlich mit einer Maus oder Tastatur ausstellen. Um unnötige Bestätigungen zu verhindern, geben Sie diese Bestätigungen nur an, wenn der Befehl per Toucheingabe initiiert wurde.

  Routinebestätigungen sind für Interaktionen akzeptabel, die Benutzer häufig versehentlich per Toucheingabe verwenden.

  Entwickler: Sie können mithilfe der INPUT_MESSAGE_SOURCE-API zwischen Mausereignissen und Touchereignissen unterscheiden.