Zum ersten Mal wieder vereint
Einführung
Seit fast 30 Jahren stehen bei der Entwicklung von Desktop-Computern eine Tastatur und eine Maus oder ein Touchpad als Eingabegeräte im Mittelpunkt. Im letzten Jahrzehnt haben Smartphones und Tablets jedoch ein neues Interaktionsparadigma eingeführt: das Touch-Display. Mit der Einführung von Touch-fähigen Windows 8-Computern und jetzt mit der Veröffentlichung des fantastischen Touch-fähigen Chromebook Pixel wird die Touchbedienung jetzt zu einem erwarteten Bestandteil der Desktop-Nutzung. Eine der größten Herausforderungen besteht darin, eine Benutzeroberfläche zu entwickeln, die nicht nur auf Touch- und Mausgeräten funktioniert, sondern auch auf Geräten, auf denen Nutzer beide Eingabemethoden verwenden – manchmal sogar gleichzeitig.
In diesem Artikel erfahren Sie, wie Touchbedienung in den Browser integriert ist, wie Sie diesen neuen Benutzeroberflächenmechanismus in Ihre vorhandenen Apps einbinden können und wie sich Touchbedienung mit der Mauseingabe kombinieren lässt.
Der Stand der Touchbedienung auf der Webplattform
Das iPhone war die erste beliebte Plattform mit speziellen Touch-APIs, die in den Webbrowser integriert waren. Mehrere andere Browseranbieter haben ähnliche API-Schnittstellen entwickelt, die mit der iOS-Implementierung kompatibel sind. Diese wird jetzt in der Spezifikation „Touch Events Version 1“ beschrieben. Touch-Ereignisse werden von Chrome und Firefox auf Computern, von Safari auf iOS und Chrome und vom Android-Browser unter Android sowie von anderen mobilen Browsern wie dem BlackBerry-Browser unterstützt.
Mein Kollege Boris Smus hat ein tolles HTML5Rocks-Tutorial zu Touch-Ereignissen verfasst, das auch für den Einstieg gut geeignet ist, wenn Sie sich bisher noch nicht mit Touch-Ereignissen befasst haben. Wenn Sie noch nie mit Touch-Ereignissen gearbeitet haben, lesen Sie den Artikel jetzt, bevor Sie fortfahren. Bitte fahren Sie fort, ich warte.
Alles erledigt? Nachdem Sie nun eine grundlegende Kenntnis von Touch-Ereignissen haben, besteht die Herausforderung beim Erstellen von Touch-fähigen Interaktionen darin, dass sich die Touch-Interaktionen erheblich von Maus-Ereignissen (und von Maus-emulierenden Touchpads und Trackballs) unterscheiden können. Obwohl Touchbedienungen in der Regel versuchen, Mäuse zu emulieren, ist diese Emulation nicht perfekt oder vollständig. Sie müssen wirklich beide Interaktionsstile durcharbeiten und möglicherweise jede Benutzeroberfläche unabhängig voneinander unterstützen.
Das Wichtigste: Der Nutzer kann eine Maus und Berührung haben.
Viele Entwickler haben Websites erstellt, die statisch erkennen, ob eine Umgebung Touch-Ereignisse unterstützt, und dann davon ausgehen, dass nur Touch-Ereignisse (und keine Mausereignisse) unterstützt werden müssen. Das ist eine falsche Annahme. Nur weil Touch-Ereignisse vorhanden sind, bedeutet das nicht, dass der Nutzer hauptsächlich dieses Eingabegerät verwendet. Geräte wie das Chromebook Pixel und einige Windows 8-Laptops unterstützen jetzt sowohl die Eingabemethode „Maus“ als auch die Eingabemethode „Touch“. Weitere werden in naher Zukunft hinzukommen. Auf diesen Geräten ist es für Nutzer ganz normal, sowohl die Maus als auch den Touchscreen zur Interaktion mit Anwendungen zu verwenden. „Unterstützt Touch“ bedeutet also nicht dasselbe wie „Benötigt keine Mausunterstützung“. Sie können das Problem nicht als „Ich muss zwei verschiedene Interaktionsstile schreiben und zwischen ihnen wechseln“ betrachten. Sie müssen überlegen, wie beide Interaktionen zusammen und unabhängig voneinander funktionieren. Auf meinem Chromebook Pixel verwende ich häufig das Touchpad, aber ich benutze auch den Touchscreen. In derselben App oder auf derselben Seite mache ich immer das, was sich im Moment am natürlichsten anfühlt. Andererseits verwenden einige Nutzer von Laptops mit Touchscreen den Touchscreen selten oder gar nicht. Die Touchbedienung sollte daher die Maussteuerung nicht deaktivieren oder beeinträchtigen.
Leider ist es oft schwierig zu erkennen, ob die Browserumgebung eines Nutzers Touch-Eingabe unterstützt. Idealerweise würde ein Browser auf einem Desktop-Computer immer die Unterstützung von Touch-Ereignissen anzeigen, damit ein Touchscreen jederzeit angeschlossen werden kann (z. B. wenn ein über einen KVM angeschlossener Touchscreen verfügbar wird). Aus all diesen Gründen sollten Ihre Apps nicht zwischen Touchbedienung und Maus wechseln, sondern beides unterstützen.
Unterstützung von Maus und Touchscreen
#1 – Klicken und Tippen – die „natürliche“ Ordnung der Dinge
Das erste Problem besteht darin, dass Touchoberflächen normalerweise versuchen, Mausklicks zu emulieren – natürlich, da Touchoberflächen bei Anwendungen funktionieren müssen, die zuvor nur mit Mausereignissen interagiert haben! Sie können dies als Verknüpfung verwenden, da „Klick“-Ereignisse weiterhin ausgelöst werden, unabhängig davon, ob der Nutzer mit der Maus geklickt oder mit dem Finger auf den Bildschirm getippt hat. Es gibt jedoch einige Probleme mit dieser Verknüpfung.
Bei der Gestaltung erweiterter Touch-Interaktionen ist Vorsicht geboten: Wenn der Nutzer eine Maus verwendet, wird über ein Klickereignis reagiert. Wenn er jedoch den Bildschirm berührt, treten sowohl Touch- als auch Klickereignisse auf. Bei einem einzelnen Klick ist die Reihenfolge der Ereignisse so:
- touchstart
- touchmove
- touchend
- Mouseover
- mousemove
- Mousedown
- Mouseup
- Klick
Das bedeutet natürlich, dass Sie bei der Verarbeitung von Touch-Ereignissen wie touchstart darauf achten müssen, dass Sie nicht auch das entsprechende Mousedown- und/oder Klickereignis verarbeiten. Wenn Sie die Touch-Ereignisse abbrechen können, indem Sie im Ereignis-Handler "preventDefault()" aufrufen, werden keine Mausereignisse für Berührungen generiert. Eine der wichtigsten Regeln für Touch-Handler lautet:
Dadurch wird jedoch auch andere standardmäßige Browserfunktionen (z. B. Scrollen) verhindert, obwohl Sie normalerweise das Touch-Ereignis vollständig in Ihrem Handler verarbeiten und Sie WANT, die Standardaktionen zu deaktivieren. Im Allgemeinen sollten Sie entweder alle Touch-Ereignisse verarbeiten und abbrechen oder keinen Handler für dieses Ereignis haben.
Zweitens: Wenn ein Nutzer auf einem Mobilgerät auf ein Element auf einer Webseite tippt, haben Seiten, die nicht für mobile Interaktionen entwickelt wurden, eine Verzögerung von mindestens 300 Millisekunden zwischen dem Touchstart-Ereignis und der Verarbeitung von Mausereignissen (Mouse-Down). Das ist mit Chrome möglich. Sie können in den Chrome-Entwicklertools die Option Touch-Ereignisse emulieren aktivieren, um Touchbedienungen auf einem Gerät ohne Touchbedienung zu testen.
Mit dieser Verzögerung kann der Browser feststellen, ob der Nutzer eine andere Geste ausführt, insbesondere das Zoomen durch zweimaliges Tippen. Das kann natürlich problematisch sein, wenn Sie eine sofortige Reaktion auf eine Fingerberührung benötigen. Wir arbeiten daran, die Anzahl der Fälle zu reduzieren, in denen diese Verzögerung automatisch auftritt.
Die einfachste Möglichkeit, diese Verzögerung zu vermeiden, besteht darin, dem mobilen Browser mitzuteilen, dass Ihre Seite nicht herangezoomt werden muss. Dies kann mit einem festen Darstellungsbereich erfolgen, indem Sie beispielsweise Folgendes in Ihre Seite einfügen:
<meta name="viewport" content="width=device-width,user-scalable=no">
Das ist natürlich nicht immer angebracht. Dadurch wird das Zoomen per Finger-Pinch-Geste deaktiviert, was aus Gründen der Barrierefreiheit erforderlich sein kann. Verwenden Sie diese Option daher sparsam oder gar nicht. Wenn Sie die Nutzerskalierung deaktivieren, sollten Sie eine andere Möglichkeit anbieten, die Lesbarkeit von Text in Ihrer Anwendung zu verbessern. Außerdem gilt diese Verzögerung nicht für Chrome auf Geräten der Desktopklasse, die Touchbedienung unterstützen, und andere Browser auf Mobilplattformen, wenn die Seite nicht skalierbare Darstellungsbereiche hat.
#2: Mausbewegungsereignisse werden nicht durch Touch ausgelöst
Die Emulation von Mausereignissen in einer Touchbedienung umfasst in der Regel nicht die Emulation von mousemove-Ereignissen. Wenn Sie also ein schönes mausgesteuertes Steuerelement mit mousemove-Ereignissen erstellen, funktioniert es auf einem Touchgerät wahrscheinlich nicht, es sei denn, Sie fügen auch Touchmove-Handler hinzu.
Browser implementieren in der Regel automatisch die entsprechende Interaktion für Touch-Interaktionen mit den HTML-Steuerelementen. So funktionieren beispielsweise die HTML5-Bereichssteuerelemente einfach, wenn Sie Touch-Interaktionen verwenden. Wenn Sie jedoch eigene Steuerelemente implementiert haben, funktionieren diese bei Interaktionen vom Typ „Klicken und Ziehen“ wahrscheinlich nicht. Tatsächlich unterstützen einige häufig verwendete Bibliotheken (z. B. jQueryUI) Touch-Interaktionen auf diese Weise noch nicht nativ. Für jQueryUI gibt es jedoch mehrere Monkey-Patch-Problembehebungen für dieses Problem. Das war eines der ersten Probleme, auf die ich beim Umstellen meiner Web Audio Playground-Anwendung auf die Touchbedienung stieß. Die Schieberegler waren auf jQueryUI basierend und funktionierten daher nicht mit Klick-und-Ziehen-Interaktionen. Nach der Umstellung auf HTML5-Bereichssteuerelemente haben sie funktioniert. Alternativ könnte ich natürlich auch einfach Touchmove-Handler hinzufügen, um die Schieberegler zu aktualisieren, aber es gibt ein Problem dabei...
#3: Touchmove und MouseMove sind nicht dasselbe
Ein Problem, das bei einigen Entwicklern problematisch ist, besteht darin, dass die Handler „touchmove“ und „mousemove“ dieselben Codepfade aufrufen. Das Verhalten dieser Ereignisse ist sehr ähnlich, aber leicht unterschiedlich. Insbesondere sind Touch-Ereignisse immer auf das Element ausgerichtet, an dem die Berührung BEGONNEN ist, während Mausereignisse auf das Element ausgerichtet sind, das sich derzeit unter dem Mauszeiger befindet. Deshalb gibt es mouseover- und mouseout-Ereignisse, aber keine entsprechenden touchover- und touchout-Ereignisse – nur touchend.
Das kann am häufigsten passieren, wenn Sie das Element entfernen oder verschieben, das der Nutzer gerade berührt hat. Angenommen, Sie haben ein Bildkarussell mit einem Touch-Handler für das gesamte Karussell, um ein benutzerdefiniertes Scrollverhalten zu unterstützen. Da sich die verfügbaren Bilder ändern, entfernen Sie einige <img>-Elemente und fügen andere hinzu. Wenn der Nutzer eines dieser Bilder berührt und Sie es dann entfernen, erhält Ihr Handler (der sich auf einem Vorfahren des img-Elements befindet) keine Touch-Ereignisse mehr, da sie an ein Ziel gesendet werden, das sich nicht mehr im Baum befindet. Es sieht so aus, als würde der Nutzer seinen Finger an einer Stelle halten, auch wenn er ihn möglicherweise bewegt und schließlich entfernt hat.
Sie können dieses Problem natürlich vermeiden, indem Sie keine Elemente entfernen, die Touch-Handler haben (oder Vorfahren haben, die Touch-Handler haben), während eine Berührung aktiv ist. Alternativ können Sie statt statischer Touchend-/Touchmove-Handler warten, bis ein Touchstart-Ereignis eintritt, und dann dem Ziel des Touchstart-Ereignisses Touchmove-/Touchend-/Touchcancel-Handler hinzufügen (und sie bei Ende/Abbruch entfernen). So erhalten Sie weiterhin Ereignisse für die Berührung, auch wenn das Zielelement verschoben oder entfernt wird. Hier können Sie damit ein wenig herumspielen: Tippen Sie auf das rote Feld und halten Sie die Escape-Taste gedrückt, um es aus dem DOM zu entfernen.
#4: Berühren und schweben
Die Mauszeigermetapher trennte die Cursorposition von der aktiven Auswahl. So konnten Entwickler mithilfe von Hover-Status Informationen ausblenden und anzeigen, die für die Nutzer relevant sein könnten. Die meisten Touchbildschirme erkennen jedoch nicht, wenn ein Finger über ein Ziel schwebt. Daher ist es nicht empfehlenswert, semantisch wichtige Informationen (z. B. ein Pop-up mit der Frage „Was ist dieses Steuerelement?“) basierend auf dem Schweben des Fingers anzuzeigen, es sei denn, Sie bieten auch eine berührungsfreundliche Möglichkeit, auf diese Informationen zuzugreifen. Sie müssen darauf achten, wie Sie Informationen an Nutzer weitergeben, wenn Sie den Mauszeiger bewegen.
Interessanterweise kann der CSS-Pseudoklass :hover in einigen Fällen durch Touchbedienung ausgelöst werden. Wenn Sie auf ein Element tippen, wird es :aktiv, solange der Finger darauf ruht, und es erhält auch den Status :hover. Im Internet Explorer ist :hover nur aktiv, solange der Finger des Nutzers auf der Maustaste gedrückt ist. In anderen Browsern bleibt :hover bis zum nächsten Tippen oder Mausbewegung aktiv. Dies ist ein guter Ansatz, um Pop-out-Menüs auf Touchbildschirmen zu verwenden. Ein Nebeneffekt der Aktivierung eines Elements ist, dass auch der :hover-Status angewendet wird. Beispiel:
<style>
img ~ .content {
display:none;
}
img:hover ~ .content {
display:block;
}
</style>
<img src="/awesome.png">
<div class="content">This is an awesome picture of me</div>
Sobald ein anderes Element angetippt wird, ist das Element nicht mehr aktiv und der Hover-Status verschwindet, als würde der Nutzer den Mauszeiger vom Element weg bewegen. Sie können die Inhalte in ein <a>-Element einschließen, um daraus auch einen Tabulatorstopp zu machen. So können Nutzer die zusätzlichen Informationen durch Bewegen des Mauszeigers oder Klicken, durch Tippen oder durch Drücken einer Taste ein- und ausblenden, ohne dass JavaScript erforderlich ist. Ich war angenehm überrascht, als ich damit begann, mein Web Audio Playground für Touchbedienungen zu optimieren, dass meine Pop-out-Menüs bereits gut funktionierten, da ich diese Art von Struktur verwendet hatte.
Die oben beschriebene Methode funktioniert gut für mauszeigerbasierte Benutzeroberflächen sowie für Touchbedienungen. Das ist im Gegensatz zum Verwenden von „title“-Attributen beim Hovering, die NICHT angezeigt werden, wenn das Element aktiviert ist:
<img src="/awesome.png" title="this doesn't show up in touch">
#5: Genauigkeit von Touchbedienung und Maus
Obwohl Mäuse nicht der Realität entsprechen, sind sie äußerst genau, da das zugrunde liegende Betriebssystem den Cursor in der Regel mit Pixelgenauigkeit verfolgt. Entwickler von Apps für Mobilgeräte haben hingegen festgestellt, dass Fingerberührungen auf einem Touchscreen nicht so genau sind, vor allem aufgrund der Größe der Fingeroberfläche, die mit dem Display in Kontakt kommt, und teilweise auch, weil die Finger das Display verdecken.
Viele Einzelpersonen und Unternehmen haben umfangreiche Nutzerstudien durchgeführt, um herauszufinden, wie Apps und Websites gestaltet werden können, die eine fingerbasierte Interaktion ermöglichen. Außerdem wurden viele Bücher zu diesem Thema geschrieben. Im Grunde sollten Sie die Größe der Touch-Ziele durch ein größeres Abstandselement erhöhen und die Wahrscheinlichkeit von Fehltippen verringern, indem Sie den Abstand zwischen den Elementen vergrößern. Ränder werden bei der Erfassung von Touch- und Klickereignissen nicht berücksichtigt, aber Abstände. Eine der wichtigsten Korrekturen, die ich am Web Audio Playground vornehmen musste, bestand darin, die Größe der Verbindungspunkte zu erhöhen, damit sie besser erfasst werden konnten.
Viele Browseranbieter, die Touch-basierte Oberflächen verwenden, haben auch eine Logik in den Browser eingeführt, um das richtige Element zu erreichen, wenn ein Nutzer den Bildschirm berührt, und die Wahrscheinlichkeit falscher Klicks zu reduzieren. Dadurch werden jedoch in der Regel nur Click-Events und keine Bewegungen korrigiert (obwohl Internet Explorer Mousedown-, mousemove- und mouseup-Ereignisse auch zu ändern scheint).
#6: Touch-Handler klein halten, sonst ruckelt das Scrollen
Außerdem sollten Touch-Handler nur auf die Elemente beschränkt werden, bei denen sie benötigt werden. Touch-Elemente können eine sehr hohe Bandbreite haben. Daher sollten Sie Touch-Handler für Scrollelemente vermeiden, da Ihre Verarbeitung die Browseroptimierungen für schnelles, ruckelfreies Touch-Scrolling beeinträchtigen kann. Moderne Browser versuchen, über einen GPU-Thread zu scrollen. Dies ist jedoch nicht möglich, wenn sie zuerst mit JavaScript prüfen müssen, ob jedes Touch-Ereignis von der App verarbeitet wird. Hier finden Sie ein Beispiel.
Wenn Sie Touch-Ereignisse nur in einem kleinen Teil Ihrer Benutzeroberfläche verarbeiten, sollten Sie die Touch-Handler nur dort anhängen (nicht z. B. auf der <body> der Seite). Begrenzen Sie den Umfang Ihrer Touch-Handler also so weit wie möglich.
#7: Multi-Touch
Die letzte interessante Herausforderung besteht darin, dass, obwohl wir sie bisher als "Touch"-Benutzeroberfläche bezeichnet haben, die Multi-Touch-Unterstützung fast universell unterstützt wird, d. h. die APIs bieten mehr als eine Berührungseingabe gleichzeitig. Wenn Sie mit der Unterstützung von Berührungen in Ihren Anwendungen beginnen, sollten Sie überlegen, wie sich mehrere Berührungen auf Ihre Anwendung auswirken könnten.
Wenn Sie bisher hauptsächlich mit der Maus Apps erstellt haben, sind Sie es gewohnt, mit höchstens einem Cursorpunkt zu arbeiten. Systeme unterstützen in der Regel nicht mehrere Mauscursor. Bei vielen Anwendungen ordnen Sie Touch-Ereignisse nur einer einzigen Cursoroberfläche zu. Die meisten Hardwarekomponenten für die Touchbedienung auf dem Computer können jedoch mindestens zwei Eingaben gleichzeitig verarbeiten. Die meisten neuen Hardwarekomponenten unterstützen offenbar mindestens fünf Eingaben gleichzeitig. Wenn Sie eine Bildschirmtastatur für ein Klavier entwickeln, sollten Sie natürlich mehrere gleichzeitige Toucheingaben unterstützen können.
Die derzeit implementierten W3C Touch APIs haben keine API, um zu ermitteln, wie viele Touchpoints die Hardware unterstützt. Sie müssen also Ihre beste Schätzung dafür verwenden, wie viele Touchpoints Ihre Nutzer benötigen. Sie können sich aber auch darauf konzentrieren, wie viele Touchpoints Sie in der Praxis sehen, und sich entsprechend anpassen. Wenn in einer Klavier-App beispielsweise nie mehr als zwei Touchpunkte zu sehen sind, sollten Sie eine Benutzeroberfläche für Akkorde hinzufügen. Die PointerEvents API hat eine API, mit der die Funktionen des Geräts ermittelt werden können.
Nachbearbeitung
Wir hoffen, dass dieser Artikel Ihnen einige Hinweise zu den häufigsten Herausforderungen bei der Implementierung von Touchbedienung und Mausinteraktionen gegeben hat. Wichtiger als alle anderen Ratschläge ist natürlich, dass Sie Ihre App auf Mobilgeräten, Tablets und Desktop-Umgebungen mit Maus und Touchbedienung testen. Wenn Sie keine Touch-Maus haben, können Sie die verschiedenen Szenarien mit der Chrome-Funktion Touch-Ereignisse emulieren testen.
Wenn Sie diese Tipps befolgen, ist es nicht nur möglich, sondern relativ einfach, ansprechende interaktive Funktionen zu erstellen, die gut mit Touchbedienung, Mauseingabe und sogar mit beiden Interaktionsarten gleichzeitig funktionieren.