Zum ersten Mal wieder zusammen
Einleitung
Seit fast 30 Jahren stehen beim Desktop-Computing hauptsächlich Tastaturen und Maus oder Touchpads als Eingabegeräte zur Verfügung. In den letzten zehn Jahren haben Smartphones und Tablets jedoch ein neues Interaktionsparadigma eingeführt: die Berührung. Mit der Einführung von Touchscreen-Geräten mit Windows 8 und der Veröffentlichung des genialen Chromebooks Pixel mit Touchbedienung wird Touchscreen nun Teil der erwarteten Desktop-Nutzung sein. Eine der größten Herausforderungen besteht darin, User Experiences zu entwickeln, die nicht nur auf Touchscreen- und Mausgeräten funktionieren, sondern auch auf diesen Geräten, bei denen die Nutzenden beide Eingabemethoden verwenden – manchmal gleichzeitig!
In diesem Artikel erfahren Sie, wie die Touchbedienung im Browser integriert ist, wie Sie diesen neuen Benutzeroberflächenmechanismus in Ihre vorhandenen Apps integrieren können und wie die Touchbedienung bei Eingabe per Maus optimal funktioniert.
The State of Touch in 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, die nun in der Spezifikation für Touch-Ereignisse Version 1 beschrieben wird. Touch-Ereignisse werden von Chrome und Firefox auf Computern und von Safari unter iOS und Chrome, dem Android-Browser unter Android sowie von anderen mobilen Browsern wie dem BlackBerry-Browser unterstützt.
Mein Kollege Boris Smus hat eine tolle HTML5Rocks-Anleitung zu Touch-Ereignissen verfasst, die auch für den Einstieg gut geeignet ist, wenn Sie sich noch nicht mit Touch-Ereignissen befasst haben. Wenn Sie noch nie mit Touch-Ereignissen gearbeitet haben, lesen Sie diesen Artikel jetzt, bevor Sie fortfahren. Nur zu, ich warte.
Fertig? Nachdem Sie nun einen Grundwissen zu Touch-Ereignissen haben, besteht die Herausforderung beim Schreiben von Touch-Interaktionen darin, dass sich Touch-Interaktionen stark von Maus- (und Maus-Emulations-Touchpad und Trackball) unterscheiden können. Obwohl Touchoberflächen normalerweise Mäuse emulieren, ist diese Emulation nicht perfekt oder vollständig; Sie müssen wirklich beide Interaktionsstile durcharbeiten und möglicherweise jede Oberfläche unabhängig unterstützen.
Das Wichtigste: Der Nutzer hat möglicherweise Berührungen und eine Maus
Viele Entwickler haben Websites erstellt, die statisch feststellen, ob eine Umgebung Touch-Ereignisse unterstützt, und dann davon ausgehen, dass sie nur Touch-Ereignisse und keine Maus-Ereignisse unterstützen müssen. Das ist nun eine falsche Annahme. Nur weil Touch-Ereignisse vorhanden sind, bedeutet das nicht, dass der Nutzer dieses Touch-Eingabegerät hauptsächlich verwendet. Geräte wie das Chromebook Pixel und einige Windows 8-Laptops unterstützen jetzt sowohl die Maus als auch die Touch-Eingabemethoden. Weitere werden in naher Zukunft folgen. Auf diesen Geräten ist es ganz normal, dass Nutzer sowohl die Maus als auch den Touchscreen verwenden, um mit Apps zu interagieren. „Unterstützt Touchscreen“ ist also nicht dasselbe wie „Benötigt keine Mausunterstützung“. Sie können sich das Problem nicht als „Ich muss zwei verschiedene Interaktionsstile schreiben und zwischen ihnen wechseln“ vorstellen. Sie müssen darüber nachdenken, wie beide Interaktionen zusammenwirken und unabhängig voneinander funktionieren. Auf meinem Chromebook Pixel verwende ich häufig das Touchpad, aber ich greife auch nach oben und berühre den Bildschirm – in derselben App oder Seite tue ich das, was mir gerade ganz natürlich anfühlt. Auf der anderen Seite verwenden einige Nutzer von Touchscreen-Laptops den Touchscreen selten, wenn überhaupt. Die Eingabe per Berührung sollte also die Maussteuerung nicht beeinträchtigen oder behindern.
Leider lässt sich nicht immer genau feststellen, ob die Browserumgebung eines Nutzers die Eingabe per Berührung unterstützt. Im Idealfall weist ein Browser auf einem Desktop-Computer immer auf die Unterstützung für Touch-Ereignisse hin, sodass jederzeit ein Touchscreen-Display angeschlossen werden kann, z. B. wenn ein über eine KVM angeschlossener Touchscreen verfügbar wird. Aus all diesen Gründen sollten Ihre Apps nicht versuchen, zwischen Touchscreen und Maus zu wechseln, sondern beide unterstützen.
Unterstützung für Maus und Berührung
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 – natürlich, da Touch-Oberflächen in Anwendungen funktionieren müssen, die zuvor nur mit Maus-Ereignissen interagiert haben! Sie können dies als Verknüpfung verwenden, da Klickereignisse weiterhin ausgelöst werden, unabhängig davon, ob der Nutzer mit der Maus geklickt oder mit dem Finger auf den Bildschirm getippt hat. Allerdings gibt es bei dieser Tastenkombination ein paar Probleme.
Zunächst müssen Sie beim Entwerfen komplexerer Touch-Interaktionen vorsichtig sein: Wenn Nutzende eine Maus verwenden, reagiert sie über ein Klickereignis, aber wenn sie den Bildschirm berühren, treten sowohl Touch- als auch Klickereignisse auf. Die Reihenfolge der Ereignisse für einen einzelnen Klick lautet wie folgt:
- Touchstart
- Touchmove
- Touchende
- Mouseover
- mousemove
- Mousedown
- Mouseup
- click
Wenn Sie Touch-Ereignisse wie „touchstart“ verarbeiten, bedeutet dies natürlich, dass Sie nicht auch das entsprechende Mousedown- und/oder Klickereignis verarbeiten müssen. Wenn Sie die Touch-Ereignisse abbrechen (aufrufen Sie „preventDefault()“ im Event-Handler), werden keine Mausereignisse für Touch-Ereignisse generiert. Eine der wichtigsten Regeln von Touch-Handlern ist:
Dies verhindert jedoch auch andere Standardaktionen des Browsers (z. B. Scrollen). Allerdings bearbeiten Sie normalerweise das Touch-Ereignis vollständig im Handler, sodass Sie die Standardaktionen deaktivieren möchten. 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, kommt es bei Seiten, die nicht für die Interaktion mit Mobilgeräten konzipiert sind, zu einer Verzögerung von mindestens 300 Millisekunden zwischen dem Touchstart-Ereignis und der Verarbeitung der Mausereignisse (Mousedown). Das kann in Chrome erfolgen. Sie können in den Chrome-Entwicklertools Touch-Ereignisse simulieren aktivieren, um Touch-Oberflächen auf einem Nicht-Touch-System zu testen.
Durch diese Verzögerung kann der Browser feststellen, ob der Nutzer eine andere Geste ausführt, insbesondere das Zoomen durch zweimaliges Tippen. Dies kann natürlich problematisch sein, wenn Sie sofort auf eine Berührung mit einem Finger reagieren möchten. Wir arbeiten kontinuierlich daran, die Szenarien, in denen diese Verzögerung automatisch auftritt, zu begrenzen.
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 über einen festen Darstellungsbereich erfolgen, z. B. durch Einfügen in Ihre Seite:
<meta name="viewport" content="width=device-width,user-scalable=no">
Dies ist nicht immer angemessen, da so das Zoomen durch Auseinander- und Zusammenziehen der Finger deaktiviert wird, was aus Gründen der Barrierefreiheit erforderlich sein kann. Verwenden Sie es daher sparsam, wenn Sie die Nutzerskalierung deaktivieren, sollten Sie möglicherweise eine andere Möglichkeit bieten, die Lesbarkeit des Textes in Ihrer App zu verbessern. Auch bei Chrome auf Geräten der Desktopklasse, die Touchscreen unterstützen, und anderen Browsern auf mobilen Plattformen, bei denen die Seite nicht skalierbare Darstellungsbereiche enthält, gilt diese Verzögerung nicht.
2. Mousemove-Ereignisse werden nicht durch Berührung ausgelöst
An dieser Stelle ist es wichtig zu beachten, dass sich die Emulation von Mausereignissen auf einer Touch-Oberfläche normalerweise nicht auf die Emulation von Mausmove-Ereignissen erstreckt. Wenn Sie also ein schönes mausgesteuertes Steuerelement erstellen, das Mausmove-Ereignisse verwendet, funktioniert es wahrscheinlich nicht mit einem Touch-Gerät, sofern Sie nicht zusätzlich Touchmove-Handler hinzufügen.
Browser implementieren in der Regel automatisch die entsprechende Interaktion für Touch-Interaktionen auf den HTML-Steuerelementen. So funktionieren beispielsweise die HTML5-Bereichssteuerelemente auch dann problemlos, wenn Sie Touchinteraktionen verwenden. Wenn Sie jedoch Ihre eigenen Steuerelemente implementiert haben, funktionieren diese wahrscheinlich nicht bei Interaktionen durch Klicken und Ziehen. Tatsächlich unterstützen einige häufig verwendete Bibliotheken (wie jQueryUI) nativ noch keine Touchbedienung auf diese Weise (obwohl es für jQueryUI mehrere Monkey-Patch-Korrekturen zu diesem Problem gibt). Dies war eines der ersten Probleme, auf das ich beim Upgrade meiner Web Audio Playground-Anwendung für Berührungen gestoßen bin. Die Schieberegler waren jQueryUI-basiert und funktionierten daher nicht bei Click-and-Drag-Interaktionen. Ich wechselte zu den HTML5-Bereichssteuerungen und sie haben funktioniert. Alternativ hätte ich einfach Touchmove-Handler hinzufügen können, um die Schieberegler zu aktualisieren, aber es gibt ein Problem damit...
3. Touchmove und MouseMove sind nicht dasselbe
Ein Problem, das einige Entwickler betrafen, ist, dass Touchmove- und Mousemove-Handler in denselben Codepfaden aufgerufen werden. Diese Ereignisse verhalten sich sehr nah, aber auch geringfügig anders. Insbesondere berühren Touch-Ereignisse immer das Element, auf dem die Berührung STARTED erfolgt ist, während Mausereignisse auf das Element ausgerichtet sind, das sich momentan befindet, auf dem sich der Mauszeiger befindet. Aus diesem Grund gibt es Mouseover- und Mouseout-Ereignisse, aber es gibt keine entsprechenden Touchover- und Touchout-Ereignisse, nur Touchend.
Üblicherweise beißen Sie dies, wenn Sie zufällig das Element entfernen oder neu positionieren, das die Nutzenden begonnen haben. Stellen Sie sich zum Beispiel ein Bilderkarussell 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 weitere hinzu. Wenn der Nutzer auf eines dieser Bilder tippt und Sie es dann entfernen, empfängt der Handler (der sich auf einem Vorgänger des img-Elements befindet) keine Berührungsereignisse mehr, da er an ein Ziel gesendet wird, das sich nicht mehr im Baum befindet. 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 vermeiden, Elemente zu entfernen, die Touch-Handler haben oder Vorgänger aufweisen, während eine Berührung aktiv ist. Alternativ ist es am besten, statische Touchend-/touchmove-Handler zu registrieren. Warten Sie, bis Sie ein touchstart-Ereignis erhalten, und fügen Sie dann touchmove-/touchend-/touchcancel-Handler zum target des touchstart-Ereignisses hinzu und entfernen Sie sie beim Beenden/Abbrechen. So erhalten Sie weiterhin Ereignisse für Berührungen, auch wenn das Zielelement verschoben oder entfernt wird. Hier können Sie das ausprobieren. Tippen Sie auf das rote Feld und halten Sie die Esc-Taste gedrückt, um es aus dem DOM zu entfernen.
4. Tippen und Mauszeiger bewegen
Die Metapher des Mauszeigers trennte die Cursorposition von der aktiven Auswahl. Dies ermöglichte es Entwicklern, Mouseover-Zustände zu verwenden, um Informationen ein- und auszublenden, die für Nutzer relevant sein könnten. Die meisten Oberflächen mit Touchbedienung erkennen derzeit jedoch kein Bewegen des Fingers über ein Ziel. Daher ist es kein Nein, wenn Sie den Mauszeiger darüber bewegen, semantisch wichtige Informationen bereitzustellen (z. B. das Pop-up „Was ist dieses Steuerelement?“), es sei denn, Sie bieten eine Möglichkeit, auf diese Informationen zuzugreifen. Sie müssen vorsichtig sein, wenn Sie den Mauszeiger auf die Anzeige bewegen, um Informationen an Nutzer weiterzugeben.
Interessanterweise kann die Pseudoklasse CSS :hover in einigen Fällen durch Touch-Oberflächen ausgelöst werden. Durch Antippen eines Elements wird es aktiviert, während der Finger unten liegt, und erhält auch den Status :hover. Beim Internet Explorer wird die Maus nur dann angezeigt, wenn der Nutzer den Finger nach unten hält. Bei anderen Browsern bleibt die Bewegung bis zum nächsten Tippen oder einer Mausbewegung aktiv. Dies ist ein guter Ansatz, um Pop-out-Menüs auf Touch-Oberflächen verwenden zu können. Ein Nebeneffekt beim Aktivieren eines Elements besteht darin, dass auch der Status :hover 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 auf ein anderes Element getippt wird, ist das Element nicht mehr aktiv und der Hover-Zustand verschwindet, so als würde der Nutzer es mit einem Mauszeiger vom Element wegbewegen. Sie können den Inhalt auch in ein <a>-Element einbinden, um es zu einem Tabstopp zu machen. So kann der Nutzer die zusätzlichen Informationen per Mausklick oder -klick, Tippen oder Tastendruck aktivieren und deaktivieren, ohne dass JavaScript erforderlich ist. Ich war angenehm überrascht, als ich begann, meinen Web Audio Playground so zu gestalten, dass er gut mit Touch-Oberflächen funktioniert, die in meinen Pop-out-Menüs bereits gut funktionierten, da ich diese Art von Struktur verwendet hatte.
Die obige Methode eignet sich gut für Oberflächen, die auf Mauszeiger basieren, sowie für Touchoberflächen. Dies steht im Gegensatz zur Verwendung von "title"-Attributen, die bei Aktivierung des Elements NICHT angezeigt werden, wenn der Mauszeiger darauf bewegt wird:
<img src="/awesome.png" title="this doesn't show up in touch">
5.: Präzision bei Berührung oder Maus im Vergleich
Mäuse sind zwar konzeptionell dissoziiert von der Realität, stellt sich jedoch heraus, dass sie sehr genau sind, da das zugrunde liegende Betriebssystem im Allgemeinen die genaue Pixelgenauigkeit für den Cursor erfasst. Mobile Entwickler haben andererseits herausgefunden, dass Berührungen mit den Fingern auf einem Touchscreen nicht so genau sind. Das liegt vor allem an der Größe der Oberfläche des Fingers, wenn dieser in Kontakt mit dem Bildschirm ist (und zum Teil daran, dass Ihre Finger den Bildschirm verdecken).
Viele Einzelpersonen und Unternehmen haben umfangreiche Nutzungsforschung zur Entwicklung von Anwendungen und Websites durchgeführt, die fingerbasierte Interaktionen ermöglichen. Zu diesem Thema wurden viele Bücher geschrieben. Der grundlegende Tipp lautet: Erhöhen Sie die Größe der Berührungszielbereiche, indem Sie den Abstand erhöhen, und verringern Sie die Wahrscheinlichkeit von falschen Tippaktionen, indem Sie den Rand zwischen den Elementen vergrößern. Ränder werden bei der Verarbeitung von Berührungs- und Klickereignissen in der Treffererkennung nicht berücksichtigt, während die Abstände beim Verarbeiten verwendet werden. Eine der Hauptkorrekturen, die ich am Web Audio Playground vornehmen musste, war die Vergrößerung der Verbindungspunkte, damit sie leichter und präziser angetippt werden konnten.
Viele Browser-Anbieter, die mit Touch-Oberflächen arbeiten, haben auch eine Logik in den Browser integriert, um die Ausrichtung auf das richtige Element zu ermöglichen, wenn ein Nutzer den Bildschirm berührt, und die Wahrscheinlichkeit von falschen Klicks zu verringern. Dabei werden normalerweise nur Klickereignisse und keine Verschiebungen korrigiert (obwohl Internet Explorer auch Maus-Down-, Maus-Move-/Mouseup-Ereignisse zu ändern).
6.: Touch-Handler aufhalten, sonst verzerren sie das Scrollen
Es ist außerdem wichtig, Touch-Handler auf die Elemente zu beschränken, in denen Sie sie benötigen. Touch-Elemente können eine sehr hohe Bandbreite haben. Daher ist es wichtig, Touch-Handler für Scroll-Elemente zu vermeiden, da Ihre Verarbeitung Browseroptimierungen für schnelles, ruckelfreies Scrollen durch Tippen beeinträchtigen kann. Moderne Browser versuchen, in einem GPU-Thread zu scrollen. Dies ist jedoch unmöglich, wenn sie zuerst mit JavaScript überprüfen müssen, ob jedes Touch-Ereignis von der App verarbeitet wird. Hier findest du ein Beispiel für dieses Verhalten.
Eine Anleitung, die Sie befolgen sollten, um dieses Problem zu vermeiden, besteht darin, sicherzustellen, dass Sie, wenn Sie Touch-Ereignisse nur in einem kleinen Teil Ihrer Benutzeroberfläche verarbeiten, dort nur Touch-Handler hinzufügen (nicht z. B. auf der <body> der Seite). Kurz gesagt: Begrenzen Sie den Umfang Ihrer Touch-Handler so weit wie möglich.
7. Multi-Touchpoint
Die letzte interessante Herausforderung besteht darin, dass wir sie zwar als „Touch“-Benutzeroberfläche bezeichnen, aber fast überall unterstützt wird, sodass Multi-Touch unterstützt wird, d. h. die APIs bieten mehr als eine Touch-Eingabe gleichzeitig. Wenn Sie damit beginnen, die Touchbedienung in Ihren Apps zu unterstützen, sollten Sie überlegen, welche Auswirkungen mehrere Berührungen auf Ihre App haben könnten.
Wenn Sie Apps hauptsächlich mit Maus entwickelt haben, sind Sie es gewohnt, nur mit einem Cursor zu arbeiten. Systeme unterstützen in der Regel nicht mehrere Mäuse-Cursor. In vielen Anwendungen werden Touch-Ereignisse lediglich einer einzelnen Cursor-Oberfläche zugeordnet, aber die meisten Hardware, die wir für die Desktop-Touch-Eingabe gesehen haben, kann mindestens zwei gleichzeitige Eingaben verarbeiten, und die meisten neuen Hardware-Anwendungen unterstützen mindestens fünf gleichzeitige Eingaben. Für die Entwicklung einer Bildschirmtastatur möchten Sie natürlich mehrere Touch-Eingaben gleichzeitig unterstützen.
Die derzeit implementierten W3C Touch APIs haben keine API, mit der bestimmt werden kann, wie viele Touchpoints die Hardware unterstützt. Daher müssen Sie Ihre beste Schätzung dafür verwenden, wie viele Touchpoints Ihre Nutzer benötigen – oder natürlich darauf achten, wie viele Touchpoints Sie in der Praxis sehen und anpassen. Wenn Sie beispielsweise in einer Piano-App nie mehr als zwei Berührungspunkte sehen, können Sie eine Benutzeroberfläche für Akkorde hinzufügen. Die PointerEvents API verfügt über eine API, mit der die Funktionen des Geräts ermittelt werden können.
Retusche
Dieser Artikel soll Ihnen hoffentlich einige Hinweise zu häufigen Herausforderungen bei der Implementierung von Berührungen neben Mausinteraktionen vermitteln. Wichtiger als jeder andere Ratschlag ist natürlich, dass Sie Ihre App auf Mobilgeräten, Tablets und kombinierten Maus-und-Touch-Desktop-Umgebungen testen müssen. Wenn Sie keine Hardware für Berührungen und Maus haben, verwenden Sie Touch-Ereignisse simulieren in Chrome, um die verschiedenen Szenarien zu testen.
Es ist nicht nur möglich, sondern auch relativ einfach, diese Anleitung zu befolgen, um ansprechende interaktive Erlebnisse zu entwickeln, die gut mit Touch-Eingabe, Mauseingabe und sogar beider Interaktionsstile gleichzeitig funktionieren.