Zum ersten Mal wieder vereint
Einführung
Seit fast 30 Jahren dreht sich die Nutzung von Computern hauptsächlich um Tastatur und Maus oder Trackpad als primäre Eingabegeräte. In den letzten zehn Jahren haben Smartphones und Tablets jedoch ein neues Interaktionsparadigma eingeführt: die Touch-Bedienung. Mit der Einführung von Windows 8-Geräten mit Touch-Funktion und der Veröffentlichung des Chromebook Pixel mit Touch-Funktion wird die Touch-Funktion nun zu einem erwarteten Bestandteil der Desktop-Umgebung. Eine der größten Herausforderungen besteht darin, Benutzeroberflächen zu entwickeln, die nicht nur auf Touch- und Mausgeräten funktionieren, sondern auch auf Geräten, auf denen der Nutzer beide Eingabemethoden verwendet – manchmal sogar gleichzeitig.
In diesem Artikel erfahren Sie, wie Touch-Funktionen in den Browser integriert sind, wie Sie diesen neuen Interaktionsmechanismus in Ihre vorhandenen Apps einbinden und wie Touch- und Mauseingabe zusammenarbeiten können.
Der Status von Touch auf der Webplattform
Das iPhone war die erste beliebte Plattform, in deren Webbrowser spezielle Touch-APIs 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 sowie von Safari unter iOS und von Chrome und dem Android-Browser unter Android unterstützt. Das gilt auch für andere mobile Browser wie den Blackberry-Browser.
Mein Kollege Boris Smus hat ein tolles HTML5Rocks-Tutorial zu Touch-Ereignissen geschrieben, das immer noch eine gute Möglichkeit ist, mit Touch-Ereignissen zu beginnen, wenn Sie sich noch nicht damit beschäftigt haben. Wenn Sie noch nicht mit Touch-Ereignissen gearbeitet haben, sollten Sie diesen Artikel lesen, bevor Sie fortfahren. Mach ruhig, ich warte.
Alles erledigt? Nachdem Sie nun die Grundlagen von Touch-Ereignissen kennen, besteht die Herausforderung beim Schreiben von Touch-fähigen Interaktionen darin, dass sich die Touch-Interaktionen erheblich von Mausereignissen (und Maus-emulierenden Trackpad- und Trackball-Ereignissen) unterscheiden können. Obwohl Touch-Oberflächen in der Regel versuchen, Mäuse zu emulieren, ist diese Emulation nicht perfekt oder vollständig. Sie müssen beide Interaktionsstile durcharbeiten und möglicherweise jede Oberfläche unabhängig unterstützen.
Wichtig: Der Nutzer hat möglicherweise sowohl Touch- als auch Mausbedienung.
Viele Entwickler haben Websites erstellt, auf denen statisch erkannt wird, ob eine Umgebung Touch-Ereignisse unterstützt. Sie gehen dann davon aus, dass sie nur Touch-Ereignisse (und keine Mausereignisse) unterstützen müssen. Das ist jetzt eine fehlerhafte Annahme. Nur weil Touch-Ereignisse vorhanden sind, bedeutet das nicht, dass der Nutzer hauptsächlich dieses Touch-Eingabegerät verwendet. Geräte wie das Chromebook Pixel und einige Windows 8-Laptops unterstützen jetzt sowohl die Maus- als auch die Touch-Eingabe. In naher Zukunft werden weitere Geräte folgen. Auf diesen Geräten ist es ganz natürlich, dass Nutzer sowohl die Maus als auch den Touchscreen verwenden, um mit Anwendungen zu interagieren. „Unterstützt Touch“ bedeutet also nicht, dass keine Mausunterstützung erforderlich ist. Sie dürfen das Problem nicht so betrachten, dass Sie zwei verschiedene Interaktionsstile schreiben und zwischen ihnen wechseln müssen. 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 berühre auch den Bildschirm – in derselben Anwendung oder auf derselben Seite mache ich das, was sich gerade am natürlichsten anfühlt. Andererseits verwenden einige Nutzer von Touchscreen-Laptops den Touchscreen nur selten oder gar nicht. Daher sollte die Touch-Eingabe die Maussteuerung nicht deaktivieren oder behindern.
Leider ist es schwierig, herauszufinden, ob die Browserumgebung eines Nutzers die Touch-Eingabe unterstützt. Idealerweise würde ein Browser auf einem Desktopcomputer immer die Unterstützung von Touch-Ereignissen angeben, damit jederzeit ein Touchscreen angeschlossen werden kann (z. B. wenn ein über ein KVM angeschlossener Touchscreen verfügbar wird). Aus all diesen Gründen sollten Ihre Anwendungen nicht versuchen, zwischen Touch und Maus zu wechseln, sondern einfach beide unterstützen.
Maus- und Touch-Unterstützung kombinieren
1. Klicken und Tippen – die „natürliche“ Reihenfolge der Dinge
Das erste Problem besteht darin, dass Touch-Oberflächen in der Regel versuchen, Mausklicks zu emulieren. Das ist natürlich notwendig, da Touch-Oberflächen mit Anwendungen funktionieren müssen, die zuvor nur mit Mausereignissen interagiert haben. Sie können dies als Abkürzung verwenden, da „click“-Ereignisse weiterhin ausgelöst werden, unabhängig davon, ob der Nutzer mit einer Maus geklickt oder mit dem Finger auf den Bildschirm getippt hat. Es gibt jedoch ein paar Probleme mit dieser Tastenkombination.
Bei der Entwicklung komplexerer Touch-Interaktionen ist Vorsicht geboten: Wenn der Nutzer eine Maus verwendet, wird über ein Klickereignis reagiert. Wenn der Nutzer den Bildschirm berührt, werden sowohl Touch- als auch Klickereignisse ausgelöst. Bei einem einzelnen Klick ist die Reihenfolge der Ereignisse:
- touchstart
- touchmove
- touchend
- Mouseover
- mousemove
- Mousedown
- mouseup
- Klick
Wenn Sie Touch-Ereignisse wie „touchstart“ verarbeiten, müssen Sie natürlich darauf achten, dass Sie das entsprechende „mousedown“- und/oder „click“-Ereignis nicht auch verarbeiten. Wenn Sie die Touch-Ereignisse abbrechen können (rufen Sie „preventDefault()“ im Event-Handler auf), werden keine Mausereignisse für Touch-Eingaben generiert. Eine der wichtigsten Regeln für Touch-Handler lautet:
Dadurch wird jedoch auch anderes Standardbrowserverhalten (z. B. Scrollen) verhindert. Normalerweise verarbeiten Sie das Touch-Ereignis jedoch vollständig in Ihrem Handler und MÖCHTEN die Standardaktionen 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, die nicht für die mobile Interaktion entwickelt wurde, kommt es zu einer Verzögerung von mindestens 300 Millisekunden zwischen dem „touchstart“-Ereignis und der Verarbeitung von Mausereignissen („mousedown“). Das ist mit Chrome möglich. Sie können in den Chrome-Entwicklertools die Option Touch-Ereignisse emulieren aktivieren, um Touch-Oberflächen auf einem System ohne Touchscreen zu testen.
Diese Verzögerung soll dem Browser Zeit geben, um festzustellen, ob der Nutzer eine andere Geste ausführt, insbesondere das Zoomen durch Doppeltippen. Das kann natürlich problematisch sein, wenn Sie eine sofortige Reaktion auf eine Berührung mit dem Finger wünschen. Wir arbeiten daran, die Szenarien zu begrenzen, in denen diese Verzögerung automatisch auftritt.
Die erste und einfachste Möglichkeit, diese Verzögerung zu vermeiden, besteht darin, dem mobilen Browser mitzuteilen, dass Ihre Seite nicht gezoomt werden muss. Dies kann mit einem festen Darstellungsbereich erfolgen, z. B. durch Einfügen des folgenden Codes auf Ihrer Seite:
<meta name="viewport" content="width=device-width,user-scalable=no">
Das ist natürlich nicht immer angemessen, da dadurch das Zoomen per Pinch-Geste deaktiviert wird, was aus Gründen der Barrierefreiheit erforderlich sein kann. Verwenden Sie es daher nur sparsam (wenn Sie die Nutzerskalierung deaktivieren, sollten Sie eine andere Möglichkeit zur Verbesserung der Lesbarkeit von Text in Ihrer Anwendung anbieten). Bei Chrome auf Desktopgeräten, die Touchscreen unterstützen, und bei anderen Browsern auf mobilen Plattformen, wenn die Seite Darstellungsbereiche hat, die nicht skalierbar sind, gilt diese Verzögerung nicht.
#2: Mousemove-Ereignisse werden nicht durch Berührung ausgelöst
Es ist wichtig zu beachten, dass die Emulation von Mausereignissen auf einer Touch-Oberfläche in der Regel nicht auf die Emulation von mousemove-Ereignissen ausgeweitet wird. Wenn Sie also ein schönes, mausgesteuertes Steuerelement erstellen, das mousemove-Ereignisse verwendet, funktioniert es wahrscheinlich nicht mit einem Touch-Gerät, es sei denn, Sie fügen auch touchmove-Handler hinzu.
Browser implementieren in der Regel automatisch die entsprechende Interaktion für Touch-Interaktionen bei den HTML-Steuerelementen. So funktionieren beispielsweise HTML5-Bereichssteuerelemente einfach, wenn Sie Touch-Interaktionen verwenden. Wenn Sie jedoch eigene Steuerelemente implementiert haben, funktionieren diese wahrscheinlich nicht bei Drag-and-drop-Interaktionen. 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-Korrekturen für dieses Problem. Das war eines der ersten Probleme, auf die ich gestoßen bin, als ich meine Web Audio Playground-Anwendung für die Touch-Bedienung aktualisiert habe. Die Schieberegler basierten auf jQueryUI und funktionierten daher nicht mit Click-and-Drag-Interaktionen. Ich habe auf HTML5-Bereichssteuerungen umgestellt und sie haben funktioniert. Alternativ hätte ich natürlich auch einfach touchmove-Handler hinzufügen können, um die Slider zu aktualisieren, aber das hat einen Haken…
#3: Touchmove und MouseMove sind nicht dasselbe
Ein häufiger Fehler, den ich bei einigen Entwicklern beobachtet habe, ist, dass touchmove- und mousemove-Handler dieselben Codepfade aufrufen. Das Verhalten dieser Ereignisse ist sehr ähnlich, aber subtil unterschiedlich. Touch-Ereignisse zielen immer auf das Element ab, in dem der Touch BEGONNEN hat, während Mausereignisse auf das Element abzielen, das sich gerade unter dem Mauszeiger befindet. Aus diesem Grund gibt es die Ereignisse „mouseover“ und „mouseout“, aber keine entsprechenden Ereignisse für Touch-Gesten wie „touchover“ und „touchout“ – nur „touchend“.
Das kann am häufigsten passieren, wenn Sie das Element entfernen oder verschieben, das der Nutzer berührt hat. Stellen Sie sich beispielsweise ein Bildkarussell mit einem Touch-Handler für das gesamte Karussell vor, um benutzerdefiniertes Scrollverhalten zu unterstützen. Wenn 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, empfängt Ihr Handler (der sich in einem übergeordneten Element des img-Elements befindet) keine Touch-Ereignisse mehr, da sie an ein Ziel gesendet werden, das nicht mehr im Baum vorhanden ist. Es sieht so aus, als würde der Nutzer seinen Finger an einer Stelle halten, obwohl 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 deren Vorfahren Touch-Handler haben), während eine Berührung aktiv ist. Alternativ ist es am besten, nicht statische touchend-/touchmove-Handler zu registrieren, sondern zu warten, bis Sie ein touchstart-Ereignis erhalten, und dann touchmove-/touchend-/touchcancel-Handler für das target des touchstart-Ereignisses hinzuzufügen (und sie bei Ende/Abbrechen zu entfernen). So erhalten Sie weiterhin Ereignisse für die Berührung, auch wenn das Zielelement verschoben oder entfernt wird. Hier können Sie das ausprobieren: Tippen Sie auf das rote Feld und halten Sie es gedrückt, während Sie die Esc-Taste drücken, um es aus dem DOM zu entfernen.
Nr. 4: Berühren und Hover
Durch die Mauszeiger-Metapher wurde die Cursorposition von der aktiven Auswahl getrennt. So konnten Entwickler Hover-Zustände verwenden, um Informationen ein- und auszublenden, die für die Nutzer relevant sein könnten. Die meisten Touch-Oberflächen erkennen jedoch derzeit nicht, wenn ein Finger über einem Ziel schwebt. Daher ist es nicht zulässig, semantisch wichtige Informationen (z. B. ein Pop-up mit der Frage „Was ist das?“) auf Grundlage des Schwebens bereitzustellen, es sei denn, Sie bieten auch eine touchfreundliche Möglichkeit, auf diese Informationen zuzugreifen. Sie müssen vorsichtig sein, wie Sie Hover verwenden, um Nutzern Informationen zu vermitteln.
Interessanterweise kann die CSS-Pseudoklasse :hover in einigen Fällen jedoch durch Touch-Oberflächen ausgelöst werden. Wenn Sie auf ein Element tippen, wird es aktiviert (:active), solange der Finger auf dem Display ist, und es erhält auch den Status :hover. Bei Internet Explorer ist :hover nur aktiv, solange der Finger des Nutzers auf dem Display ist. Bei anderen Browsern bleibt :hover bis zum nächsten Tippen oder zur nächsten Mausbewegung aktiv. Das ist ein guter Ansatz, um Pop-out-Menüs auf Touch-Oberflächen zu ermöglichen. 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 angeklickt wird, ist das Element nicht mehr aktiv und der Mouseover-Status wird beendet, so als hätte der Nutzer einen Mauszeiger verwendet und ihn vom Element weg bewegt. Sie können den Inhalt in ein <a>-Element einfügen, um ihn ebenfalls zu einem Tabstopp zu machen. So kann der Nutzer die zusätzlichen Informationen durch Bewegen des Mauszeigers, Klicken, Tippen oder Drücken einer Taste ein- und ausblenden, ohne dass JavaScript erforderlich ist. Ich war angenehm überrascht, als ich mit der Arbeit begann, meinen Web Audio Playground für Touch-Oberflächen zu optimieren. Meine Pop-up-Menüs funktionierten bereits gut auf Touch-Geräten, weil ich diese Art von Struktur verwendet hatte.
Die oben beschriebene Methode eignet sich sowohl für Mauszeiger- als auch für Touch-Oberflächen. Im Gegensatz dazu werden „title“-Attribute beim Hovern NICHT angezeigt, wenn das Element aktiviert ist:
<img src="/awesome.png" title="this doesn't show up in touch">
Nr. 5: Touch- im Vergleich zur Mauspräzision
Mäuse haben zwar eine konzeptionelle Abkopplung von der Realität, aber es stellt sich heraus, dass sie extrem genau sind, da das zugrunde liegende Betriebssystem in der Regel die genaue Pixelgenauigkeit für den Cursor verfolgt. Mobile Entwickler haben jedoch gelernt, dass Fingerberührungen auf einem Touchscreen nicht so genau sind, was hauptsächlich an der Größe der Oberfläche des Fingers liegt, wenn er den Bildschirm berührt (und teilweise daran, dass Ihre Finger den Bildschirm verdecken).
Viele Einzelpersonen und Unternehmen haben umfangreiche Nutzerstudien dazu durchgeführt, wie Anwendungen und Websites für die Interaktion mit Fingern gestaltet werden können. Es gibt auch viele Bücher zu diesem Thema. Die grundlegende Empfehlung lautet, die Größe der Berührungsziele durch Erhöhen des Innenabstands zu vergrößern und die Wahrscheinlichkeit falscher Berührungen durch Erhöhen des Rands zwischen Elementen zu verringern. Ränder werden bei der Treffererkennung von Touch- und Klickereignissen nicht berücksichtigt, Innenabstand schon. Eine der wichtigsten Änderungen, die ich am Web Audio Playground vornehmen musste, war, die Größe der Verbindungspunkte zu erhöhen, damit sie leichter genau berührt werden konnten.
Viele Browseranbieter, die Touch-basierte Oberflächen unterstützen, haben auch Logik in den Browser eingeführt, um das richtige Element anzusteuern, wenn ein Nutzer den Bildschirm berührt, und die Wahrscheinlichkeit falscher Klicks zu verringern. Dies korrigiert jedoch in der Regel nur Klickereignisse, nicht Bewegungen (obwohl Internet Explorer auch mousedown-/mousemove-/mouseup-Ereignisse zu ändern scheint).
#6: Touch-Handler eingrenzen, damit das Scrollen nicht ruckelt
Außerdem ist es wichtig, Touch-Handler nur auf die Elemente zu beschränken, für die sie benötigt werden. Touch-Elemente können sehr bandbreitenintensiv sein. Daher sollten Sie Touch-Handler für scrollende Elemente vermeiden, da die Verarbeitung die Browseroptimierungen für schnelles, ruckelfreies Touch-Scrolling beeinträchtigen kann. Moderne Browser versuchen, auf einem GPU-Thread zu scrollen. Das 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 für dieses Verhalten.
Um dieses Problem zu vermeiden, sollten Sie Touch-Handler nur für den Teil der Benutzeroberfläche anhängen, in dem Sie Touch-Ereignisse verarbeiten. Hängen Sie sie also nicht z. B. an das <body> der Seite an. Beschränken Sie den Umfang Ihrer Touch-Handler so weit wie möglich.
#7: Multi-Touch
Eine weitere interessante Herausforderung besteht darin, dass die Benutzeroberfläche zwar als „Touch“-Benutzeroberfläche bezeichnet wird, die Unterstützung aber fast immer für Multi-Touch gilt. Das bedeutet, dass die APIs mehr als eine Berührungseingabe gleichzeitig ermöglichen. Wenn Sie mit der Unterstützung von Touch-Eingaben in Ihren Anwendungen beginnen, sollten Sie berücksichtigen, wie sich mehrere Berührungen auf Ihre Anwendung auswirken können.
Wenn Sie Apps hauptsächlich für die Maus entwickelt haben, sind Sie es gewohnt, mit höchstens einem Cursorpunkt zu arbeiten, da Systeme in der Regel nicht mehrere Mauszeiger unterstützen. Bei vielen Anwendungen werden Touch-Ereignisse einfach einer einzelnen Cursorschnittstelle zugeordnet. Die meisten Hardwaregeräte, die wir für die Touch-Eingabe auf dem Desktop gesehen haben, können jedoch mindestens zwei gleichzeitige Eingaben verarbeiten. Die meisten neuen Hardwaregeräte unterstützen mindestens fünf gleichzeitige Eingaben. Wenn Sie eine Klaviertastatur auf dem Bildschirm entwickeln, möchten Sie natürlich mehrere gleichzeitige Berührungseingaben unterstützen.
Die derzeit implementierten W3C Touch APIs haben keine API, um zu bestimmen, wie viele Touchpoints die Hardware unterstützt. Sie müssen also eine Schätzung vornehmen, wie viele Touchpoints Ihre Nutzer benötigen, oder natürlich darauf achten, wie viele Touchpoints in der Praxis verwendet werden, und die Anzahl entsprechend anpassen. Wenn Sie beispielsweise in einer Klavieranwendung nie mehr als zwei Berührungspunkte sehen, sollten Sie möglicherweise eine Benutzeroberfläche für Akkorde hinzufügen. Die PointerEvents API bietet eine API, mit der die Funktionen des Geräts ermittelt werden können.
Retuschieren
Wir hoffen, dass dieser Artikel Ihnen einige Hinweise zu häufigen Herausforderungen bei der Implementierung von Touch- und Mausinteraktionen gegeben hat. Am wichtigsten ist es natürlich, dass Sie Ihre App auf Mobilgeräten, Tablets und Computern mit Maus- und Touch-Bedienung testen. Wenn Sie keine Hardware mit Touch- und Mausbedienung haben, können Sie mit der Chrome-Funktion Touch-Ereignisse emulieren die verschiedenen Szenarien testen.
Es ist nicht nur möglich, sondern mit diesen Anleitungen auch relativ einfach, ansprechende interaktive Erlebnisse zu schaffen, die sowohl mit Touch- als auch mit Mauseingabe funktionieren und sogar beide Interaktionsarten gleichzeitig unterstützen.