Dotykanie i mysz

Znowu razem

Chris Wilson

Paul Kinlan

Wstęp

Od niemal 30 lat komputery stacjonarne to głównie klawiatura, mysz lub trackpad. Jednak w ciągu ostatniej dekady smartfony i tablety zyskały nowy paradygmat interakcji: dotyk. Wraz z wprowadzeniem komputerów z obsługą dotykową z systemem Windows 8 oraz na premierze wspaniałego Chromebooka Pixel z obsługą dotykową, dotyk staje się jedną z dostępnych funkcji na komputerach. Jednym z największych wyzwań jest tworzenie rozwiązań, które działają nie tylko na urządzeniach dotykowych i myszach, ale także na urządzeniach, na których użytkownik korzysta z obu metod wprowadzania, czasem jednocześnie.

Z tego artykułu dowiesz się, jak wbudowane funkcje dotykowe są wbudowane w przeglądarkę, jak zintegrować nowy mechanizm interfejsu z istniejącymi aplikacjami i jak dobrze działa dotykowo z użyciem myszy.

Stan kontaktu na platformie internetowej

iPhone był pierwszą popularną platformą ze specjalnymi interfejsami API dotykowymi wbudowanymi w przeglądarkę. Kilku innych dostawców przeglądarek opracowało podobne interfejsy API opracowane pod kątem zgodności z implementacją na iOS. Zostały one obecnie opisane w specyfikacji zdarzeń dotyku w wersji 1. Zdarzenia kliknięcia są obsługiwane w przeglądarkach Chrome i Firefox na komputerze oraz w Safari na urządzeniach z iOS i Chrome oraz w przeglądarce Androida na urządzeniach z Androidem, a także w innych przeglądarkach mobilnych, np. na telefonie BlackBerry.

Mój kolega Boris Smus napisał świetny samouczek HTML5Rocks na temat zdarzeń dotyku. To dobry sposób na rozpoczęcie korzystania ze zdarzeń dotyku. Jeśli jeszcze nie znasz zdarzeń dotyku, przeczytaj ten artykuł, zanim przejdziesz dalej. Dalej, poczekam.

Wszystko gotowe? Teraz, gdy masz już podstawowe informacje na temat zdarzeń dotyku, wyzwaniem przy pisaniu interakcji dotykowych jest to, że interakcje te mogą znacznie różnić się od zdarzeń myszy (oraz emulacji trackpada i kulki). Chociaż interfejsy dotykowe zwykle próbują emulować myszy, ta emulacja nie jest doskonała ani nie jest kompletna. Trzeba więc pracować przez oba style interakcji i może być konieczne korzystanie z każdego z nich niezależnie.

Co najważniejsze: użytkownik może dotknąć myszy,

Wielu programistów tworzy witryny, które statycznie wykrywają, czy środowisko obsługuje zdarzenia dotknięcia, a następnie zakłada, że muszą obsługiwać tylko zdarzenia dotyku (a nie myszy). Jest to teraz błędne założenie. Obecność zdarzeń dotyku nie oznacza, że użytkownik używa głównie tego dotykowego urządzenia wejściowego. Urządzenia, takie jak Chromebook Pixel i niektóre laptopy z systemem Windows 8, obsługują teraz ZARÓWNO mysz i metodę dotykową, a w najbliższej przyszłości wprowadzimy też inne metody. Na takich urządzeniach użytkownicy mogą korzystać z aplikacji zarówno za pomocą myszy, jak i ekranu dotykowego, więc „obsługa dotyku” to nie to samo co „nie wymaga obsługi myszy”. Nie wyobrażasz sobie tego problemu jako „muszę napisać dwa różne style interakcji i przełączać się między nimi”, musisz zastanowić się, jak obie te interakcje będą ze sobą współdziałać i jak będą działać niezależnie. Na moim Chromebooku Pixel często używam trackpada, ale też się dotykam i dotykam ekranu – na tej samej aplikacji lub stronie robię to, co wydaje się teraz najbardziej naturalne. Z drugiej strony niektórzy użytkownicy laptopów z ekranem dotykowym rzadko (lub w ogóle) korzystają z ekranu dotykowego, więc obecność dotyku nie powinna wyłączać ani utrudniać sterowania myszą.

Często trudno jest stwierdzić, czy środowisko przeglądarki użytkownika obsługuje dotykowe wprowadzanie danych.Najlepiej, by przeglądarka na komputerze zawsze obsługiwała obsługę zdarzeń dotyku, dzięki czemu w dowolnym momencie można podłączyć wyświetlacz dotykowy (np. jeśli będzie dostępny ekran dotykowy podłączony za pomocą KVM). Z tego względu aplikacje nie powinny próbować przełączać się między dotykiem a myszą – powinny obsługiwać obie.

Obsługa myszy i dotyku

1. Klikanie i klikanie – „naturalna” kolejność rzeczy

Pierwszym problemem jest to, że interfejsy dotykowe zwykle próbują emulować kliknięcia myszą, oczywiście, ponieważ interfejsy dotykowe muszą działać w aplikacjach, które wcześniej reagowały tylko na zdarzenia myszy. Możesz wykorzystać tę funkcję jako skrót, ponieważ zdarzenia „kliknięcia” będą nadal wywoływane bez względu na to, czy użytkownik kliknął reklamę myszką, czy dotknął ekranu palcem. Z tym skrótem występują jednak pewne problemy.

Po pierwsze, projektując bardziej zaawansowane interakcje dotykowe, musisz zachować ostrożność. Gdy użytkownik korzysta z myszy, reaguje ona poprzez zdarzenie kliknięcia, ale gdy dotknie ekranu, następuje zarówno kliknięcie, jak i dotknięcie. Kolejność zdarzeń dla jednego kliknięcia wynosi:

1. Touchstart
2. Ruch dotykowy
3. Touchend
4. ruch kursora myszy|najechanie kursorem myszy (na obiekt)
5. mousemove
6. najechanie kursorem myszy
7. mysz na ekranie
8. click

Oznacza to oczywiście, że jeśli przetwarzasz zdarzenia dotknięcia, np. Touchstart, musisz zadbać o to, aby nie przetwarzać odpowiadającego mu zdarzenia ruchu kursora myszy ani kliknięcia. Jeśli możesz anulować zdarzenia dotknięcia (wywołaj metodę preventDefault() w module obsługi zdarzeń), nie będą generowane żadne zdarzenia myszy w przypadku dotyku. Jedna z najważniejszych zasad obsługi dotyku:

Uniemożliwia to też jednak inne domyślne zachowanie przeglądarki (takie jak przewijanie), chociaż zwykle obsługujesz zdarzenie dotknięcia w całości w module obsługi i chcesz wyłączyć działania domyślne. Zasadniczo dobrze jest obsługiwać i anulować wszystkie zdarzenia dotknięcia lub unikać obsługi tego zdarzenia.

Po drugie, gdy użytkownik klika element na stronie internetowej na urządzeniu mobilnym, strony, które nie zostały zaprojektowane z myślą o interakcjach z urządzeniami mobilnymi, mają opóźnienie wynoszące co najmniej 300 milisekund między zdarzeniem uruchomienia dotykowego a przetworzeniem zdarzeń myszy (myszką). Można to zrobić w Chrome. W Narzędziach deweloperskich w Chrome możesz włączyć opcję „Emuluj zdarzenia dotyku”, aby przetestować interfejsy dotykowe w systemie niedotykowym.

To opóźnienie pozwala przeglądarce na określenie, czy użytkownik wykonuje inny gest – w szczególności – powiększanie dwukrotnym dotknięciem. Oczywiście może to powodować problemy, jeśli potrzebujesz natychmiastowej reakcji na dotknięcie palcem. Stale pracujemy nad ograniczeniem przypadków, w których to opóźnienie występuje automatycznie.

Pierwszym i najłatwiejszym sposobem uniknięcia tego opóźnienia jest poinformowanie przeglądarki mobilnej, że nie będzie trzeba powiększać strony.Można to zrobić przy użyciu stałego widocznego obszaru, np. umieszczając w treści strony:

<meta name="viewport" content="width=device-width,user-scalable=no">

Oczywiście nie zawsze jest to właściwe. Wyłącza to powiększanie ściągnięciem palców, które może być wymagane ze względu na ułatwienia dostępu, więc nie używaj go z umiarem (jeśli wyłączysz skalowanie przez użytkownika, być może warto podać inny sposób na zwiększenie czytelności tekstu w aplikacji). To opóźnienie nie występuje także w przypadku Chrome na komputerach, które obsługują dotyk, oraz w innych przeglądarkach na platformach mobilnych, gdy widoczny obszar strony ma nieskalowalne widoczne obszary.

2. Zdarzenia Mousemove nie są wywoływane dotykiem

Pamiętaj, że emulacja zdarzeń myszy w interfejsie dotykowym zwykle nie obejmuje emulacji takich zdarzeń. Jeśli więc utworzysz efektowny element sterujący sterowany myszą, który wykorzystuje zdarzenia ruchu myszy, prawdopodobnie nie będzie on działał z urządzeniami dotykowymi, chyba że dodasz również moduły obsługi dotyku.

Przeglądarki zazwyczaj automatycznie implementują odpowiednie interakcje w przypadku dotyku elementów sterujących HTML – na przykład ustawienia zakresu HTML5 działają tylko po dotknięciu. Jeśli jednak masz zaimplementowane własne elementy sterujące, prawdopodobnie nie będą one działać w przypadku interakcji typu „kliknij i przeciągnij”. W rzeczywistości niektóre często używane biblioteki (np. jQueryUI) nie obsługują jeszcze natywnie w ten sposób interakcji dotykowych (chociaż w przypadku jQueryUI istnieje kilka małpych poprawek tego problemu). Był to jeden z pierwszych problemów, które napotkałem przy uaktualnianiu aplikacji Web Audio Playground do obsługi dotyku. Suwaki były oparte na języku jQueryUI, więc nie działały z interakcjami typu „kliknij i przeciągnij”. Zacząłem korzystać z ustawień zakresu HTML5 i działało. Mogę też dodać elementy obsługi dotyku, aby zaktualizować suwaki, ale jest z tym jeden problem...

3. Ruch dotykowy i MouseMove to nie to samo

Pewna pułapka, z jaką spotykałem się u kilku programistów, polegała na tym, że moduły obsługi dotyku i obsługi ruchu kursora myszy wywołują te same ścieżki kodu. Sposób działania tych zdarzeń jest bardzo podobny, ale jednak nieco inny. W szczególności zdarzenia dotknięcia zawsze dotyczą tego elementu, w którym dotyka się START, a zdarzenia myszy wskazują element znajdujący się aktualnie po najechaniu kursorem myszy. Właśnie dlatego mamy zdarzenia najechania kursorem i wyjechania kursorem, ale nie ma żadnych powiązanych z nimi zdarzeń dotknięcia lub dotknięcia, a jedynie dotknięcie.

Najczęstszym sposobem może być usunięcie (lub przeniesienie) elementu, który użytkownik zaczął dotykać. Wyobraźmy sobie na przykład karuzelę obrazów z elementem obsługi dotyku w całej karuzeli, która obsługuje niestandardowe przewijanie. W miarę zmiany dostępnych obrazów usuniesz niektóre elementy <img> i dodasz inne. Jeśli użytkownik zacznie dotykać któregoś z tych obrazów, a potem go usuniesz, moduł obsługi (który znajduje się na elemencie nadrzędnym elementu img) przestanie otrzymywać zdarzenia dotyku (ponieważ są wysyłane do celu, którego nie ma już na drzewie) – użytkownik będzie trzymać palec w jednym miejscu, mimo że przesunął i w końcu go usunął.

Możesz oczywiście uniknąć tego problemu, unikając usuwania elementów, które mają (lub ich elementy nadrzędne), które mają) moduły obsługi dotyku, gdy dotknięcie jest aktywne. Z drugiej strony najlepiej nie rejestrować statycznego modułu obsługi dotyku lub ekranu dotykowego. Poczekaj, aż pojawi się zdarzenie uruchamiania dotykiem, a potem dodaj moduły obsługi dotykowo/dotykowe do celu tego zdarzenia (i usuwaj je po zakończeniu lub anulowaniu). Dzięki temu będziesz nadal otrzymywać zdarzenia polegające na dotknięciu, nawet jeśli element docelowy zostanie przeniesiony lub usunięty. Możesz się tym pobawić tutaj – kliknij czerwone pole i przytrzymaj Escape, aby usunąć to z DOM.

4. Dotknięcie i najechanie kursorem

Metafora wskaźnika myszy oddzielała pozycję kursora od aktywnego wybierania, dzięki czemu programiści mogli używać stanów najechania, aby ukrywać i wyświetlać informacje istotne dla użytkowników. Jednak obecnie większość interfejsów dotykowych nie wykrywa „najechania” palca na cel, dlatego podanie informacji znaczeniowych (np. podanie w wyskakującym okienku „Co to jest element sterujący?” nie jest dozwolone, chyba że użytkownik może też skorzystać z tych informacji w sposób dotykowy. Musisz uważać na sposób przekazywania informacji użytkownikom, najeżdżając na nie kursorem.

Co ciekawe, w niektórych przypadkach pseudoklasa CSS :hover MOŻE być wywoływana przez interfejsy dotykowe – dotknięcie elementu sprawia, że jest on aktywny, gdy palec opuszczony, ale też uzyskuje stan :hover. (W Internet Explorerze znak :hover działa tylko wtedy, gdy użytkownik przesuwa palec, inne przeglądarki zachowują ten znak do czasu kolejnego kliknięcia lub poruszenia myszą). To dobry sposób, by wyskakujące menu działało w interfejsach dotykowych. Efektem ubocznym uaktywnienia elementu jest stosowanie także stanu :hover. Na przykład:

<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>

Po kliknięciu kolejnego elementu element staje się nieaktywny, a stan najechania znika, tak jakby użytkownik przesunął go poza element za pomocą wskaźnika myszy. Zawartość elementu <a> możesz owinąć w element <a>, aby zawierał również tabulator – w ten sposób użytkownik będzie mógł przełączać dodatkowe informacje, najeżdżając kursorem myszy, klikając, dotknięciem czy naciśnięciem klawisza – bez obsługi JavaScriptu. Zacząłem miło zaskoczyć, gdy zacząłem pracować nad tym, by moje narzędzie Web Audio Playground dobrze współpracowało z interfejsami dotykowymi, z którymi moje wyskakujące menu dobrze się sprawdzały w przypadku obsługi dotykowej, ponieważ użyłem takiej struktury.

Powyższa metoda sprawdza się w przypadku interfejsów opartych na wskaźniku myszy i interfejsach dotykowych. Jest to przeciwieństwo używania atrybutów „tytuł” po najechaniu kursorem, które NIE wyświetlają się po aktywowaniu elementu:

<img src="/awesome.png" title="this doesn't show up in touch">

5. Precyzja dotyku a precyzja myszy

Choć myszki są pojęcie odseparowane od rzeczywistości, okazuje się, że są one niezwykle dokładne, ponieważ bazowy system operacyjny zazwyczaj śledzi dokładną precyzję pikseli wskazywanych przez kursor. Deweloperzy aplikacji mobilnych dowiedzieli się jednak, że dotykanie palcami ekranu dotykowego jest mniej dokładne, głównie z powodu wielkości powierzchni palca przy kontakcie z ekranem (a częściowo dlatego, że zasłaniają one ekran).

Wiele osób prywatnych i firm przeprowadziło szczegółowe badania opinii użytkowników na temat projektowania aplikacji i witryn umożliwiających interakcję za pomocą palca. Na ten temat napisano wiele książek. Podstawową radą jest zwiększenie rozmiaru docelowych elementów dotykowych przez zwiększenie dopełnienia i zmniejszenie prawdopodobieństwa nieprawidłowych kliknięć przez zwiększenie marginesu między elementami. (Marginesy nie są uwzględniane w wykrywaniu trafień w przypadku zdarzeń dotknięcia i kliknięcia, podczas gdy dopełnienie jest włączone). Jedną z głównych poprawek, które musiałem wprowadzić w Web Audio Playground, było zwiększenie rozmiaru punktów połączenia, dzięki czemu łatwiej było je dotknąć.

Wielu dostawców przeglądarek, którzy obsługują interfejsy dotykowe, wprowadza również w przeglądarce funkcje logiczne, które pomagają kierować reklamy do odpowiedniego elementu po dotknięciu ekranu przez użytkownika i zmniejszać prawdopodobieństwo nieprawidłowych kliknięć. Zazwyczaj koryguje to jednak tylko zdarzenia kliknięcia, a nie ruchów (chociaż Internet Explorer zdaje się modyfikować zdarzenia ruchu kursora myszy, ruchu myszy i myszy).

6. Dopilnuj, aby moduły obsługi dotyku znajdowały się w pomieszczeniach – w przeciwnym razie zostaną zakłócone.

Ważne jest też, aby moduły obsługi dotykowe ograniczały się tylko do tych elementów, w których są potrzebne. Elementy dotykowe mogą mieć dużą przepustowość, trzeba więc unikać modułów obsługi dotykowej przy przewijaniu (ponieważ przetwarzanie może zakłócać optymalizację przeglądarki pod kątem szybkiego przewijania dotykowego – nowoczesne przeglądarki starają się przewijać w wątku GPU, ale jest to niemożliwe, jeśli muszą najpierw sprawdzić obsługę każdego zdarzenia dotykowego w aplikacji). Zobacz przykład takiego zachowania.

Aby uniknąć tego problemu, zadbaj o to, aby w przypadku obsługi zdarzeń dotyku w niewielkiej części interfejsu obsługiwały się tylko moduły obsługi dotyku (a nie np.<body> strony). Krótko mówiąc, jak najbardziej ogranicz zakres tych modułów obsługi.

7. Wielodotyk

Ostatnim ciekawym wyzwaniem jest to, że chociaż wcześniej określaliśmy go mianem „dotykowego”, w rzeczywistości chodzi o obsługę wielodotyku – to znaczy, że interfejsy API umożliwiają podanie więcej niż jednego dotyku naraz. Rozpoczynając obsługę klienta w swoich aplikacjach, musisz zastanowić się, jak ich wielokrotne dotknięcie może wpłynąć na Twoją aplikację.

Jeśli tworzysz aplikacje obsługiwane głównie za pomocą myszy, przyzwyczaisz się do tego, że można w nich używać maksymalnie jednego punktu kursora. Systemy zwykle nie obsługują wielu kursorów myszy. W wielu aplikacjach będzie to po prostu mapowanie zdarzeń dotyku na interfejs z jednym kursorem, ale większość urządzeń, które napotkaliśmy w przypadku dotykowego wprowadzania danych na komputerze, obsługuje co najmniej 2 równoczesne wejścia, a większość nowych urządzeń wydaje się obsługiwać co najmniej 5 jednoczesnych wejść. Aby stworzyć ekranową klawiaturę fortepianową, na pewno warto mieć możliwość jednoczesnego wprowadzania wielu dotykowych klawiatur.

Obecnie zaimplementowane interfejsy W3C Touch API nie mają interfejsu API do określania liczby punktów styku obsługiwanych przez sprzęt. Dlatego liczbę punktów styku, które będą potrzebne użytkownikom, należy najlepiej oszacować na podstawie własnych szacunków, a także oczywiście zwracać uwagę na liczbę punktów kontaktu, które widzisz w praktyce, i dostosowywać. Na przykład jeśli w aplikacji fortepianu nie widzisz więcej niż 2 punktów styku, możesz dodać do interfejsu kilka „akordów”. PointerEvents API ma interfejs API określający możliwości urządzenia.

Retusz

Mamy nadzieję, że w tym artykule znajdziesz wskazówki dotyczące typowych problemów z wdrażaniem dotyku równolegle z interakcjami z użyciem myszy. Oczywiście ważniejsze niż inne porady jest to, że musisz przetestować swoją aplikację na komórce, tablecie oraz na komputerach połączonych z użyciem myszy i dotyku. Jeśli nie masz sprzętu dotykowego, użyj opcji „Emuluj zdarzenia dotknięcia” w Chrome, aby przetestować różne scenariusze.

Postępując zgodnie z tymi wskazówkami, nie tylko można, ale stosunkowo łatwo stworzyć atrakcyjne, interaktywne treści, które dobrze działają z dotykiem i użyciem myszy, a nawet z obu tych metod jednocześnie.