Podstawy interfejsu Windows 8 - Projektowanie dotyku  

Tłumaczenie na podstawie Touch interaction design: Aurelia Tokarek

[Ta dokumentacja jest wstępna i może ulec zmianie.]

Opublikowano: 2012-04-17

Ten temat opisuje interakcje dotykowe dla Windows 8 Consumer Preview. Zawiera on jednocześnie wytyczne projektowania interakcji dotykowych.

Przewodnik

1.   Użyj języka dotykowego Windows 8.

Windows 8 zawiera zwięzły zestaw interakcji dotykowych, konsekwentnie stosowanych w całym systemie. Stosując ten język konsekwentnie, sprawisz, że Twoja aplikacja stanie się znajoma dla użytkownika bądź szybko się nauczy ją używać, zwiększając tym samym jego zaufanie.

2.   Używaj palców do tego w czym są dobre.

Mysz i pióro są precyzyjne, w przeciwieństwie do palców. Małe cele wymagają precyzji, duże wspierają bezpośrednią manipulację oraz dostarczają bogaty zestaw interakcji dotykowych. Przesuwanie dużego elementu w dół jest szybkie i łatwe, ponieważ celem wyboru jest cały element.

3.   Przeglądaj zawartość za pomocą dotyku.

Zoom semantyczny oraz panorama sprawiają, że aplikacja działa szybko i płynnie. Zamiast umieszczać treści na wielu kartach lub stronach, używaj dużych elementów wspierających panoramę i zoom semantyczny.

4.   Pokaż reakcję.

Zwiększ zaufanie użytkownika poprzez zapewnienie natychmiastowej informacji, gdy ekran jest dotykany. Interaktywne elementy powinny reagować na zmianę koloru, rozmiaru lub przesuwać się. Elementy, które nie są interaktywne powinny pokazać dotykowe wizualizacje tylko wtedy, gdy ekran jest dotykany.

5.   Zawartość podążająca za palcem.

Elementy, które mogą być przenoszone lub przeciągane przez użytkownika, np.: elementy canvas lub slider, powinny podążać za palcem użytkownika. Przyciski i inne elementy, które się nie poruszają, powinny powrócić do stanu domyślnego, gdy użytkownik przesuwa lub podnosi swój palec z elementu.

6.   Zachowuj interakcje odwracalne.

Jeśli podnosisz książkę, możesz ją z powrotem opuścić na dół, tam skąd ją podniosłeś. Interakcje dotykowe powinny zachowywać się w podobny sposób, powinny być odwracalne, zapewniając wizualną reakcję na to, co się stanie, gdy użytkownik podniesie palec. Spowoduje to, że Twoja aplikacja będzie korzystała bezpiecznie z dotyku.

7.   Zezwalaj na dowolną liczbę palców.

Ludzie korzystają często z więcej niż jednego palca, nie zdając sobie z tego sprawy. Dlatego interakcje dotykowe nie powinny się zmieniać radykalnie, w zależności od liczby palców dotykających ekran. Podobnie, jak w realnym świecie, przesuwanie czegoś za pomocą dwóch lub trzech palców nie robi większej różnicy.

8.   Nie ograniczaj czasowo interakcji.

Interakcje, które wymagają złożonych gestów, takich jak podwójne stuknięcie lub naciśnięcie i przytrzymanie, musza być wykonane w określonym czasie. Należy unikać interakcji czasowych, ponieważ są trudne i często wyzwalane przypadkowo.

Windows 8 – język dotyku

Poniższa lista opisuje interakcje dotykowe, używane w Windows 8.

Ważne: Nie twórz niestandardowych interakcji, aby nie dezorientować użytkowników.

	wciśnij i przytrzymaj	Ta interakcja powoduje wyświetlenie szczegółowych informacji (tooltip - podpowiedź, menu kontekstowe) bez zobowiązania się do akcji. Jeśli użytkownik zacznie przesuwać panoramę palcem, to wszystko, co jest w ten sposób wyświetlane, nie powinno jej blokować.
	stuknij	Stuknięcie na elemencie wywołuje podstawową czynność - przypisaną do elementu, na przykład uruchamianie aplikacji lub wykonanie jakiegoś polecenia.
	przesuń	Przesuwanie służy przede wszystkim do poruszania się po panoramie, ale może być także wykorzystywane do przenoszenia, rysowania oraz pisania.
	swipe do zaznaczenia, wydania polecenia i przesunięcia	Przesunięcie palcem w niewielkiej odległości, prostopadle do standardowego kierunku przesuwania, wybiera obiekty na liście lub siatce (ListView i kontrolka GridLayout). Kiedy obiekty są zaznaczone, wyświetla pasek aplikacji z odpowiednimi poleceniami.
	ściągnij i rozciągnij, aby zmienić rozmiar	Ściąganie i rozciąganie to czynności, które są powszechnie używane do zmiany rozmiaru, ale także umożliwiają przejście na początek, koniec lub gdziekolwiek w treści za pomocą zoomu semantycznego. Kontrolka Semantyczny zoom zapewnia pomniejszenie widoku, pokazując grupy elementów i umożliwia szybkie przechodzenie pomiędzy nimi.
	obróć	Obracanie dwóch lub więcej palców powoduje obrót obiektu. Obracając urządzenie, obróci się ekran.
	swipe od krawędzi – pasek aplikacji	Przesuniecie palcem od dolnej lub górnej krawędzi wyświetli pasek aplikacji z poleceniami.
	swipe od krawędzi – pasek poleceń systemowych	Przesuniecie palcem od prawej krawędzi ekranu pokazuje pasek poleceń systemowych. Przesunięcie palcem od lewej krawędzi wyświetla poprzednio używane aplikacje. Przesuniecie palcem od górnej krawędzi do dolnej powoduje zamknięcie aplikacji.

Uwaga: Użytkownicy mogą wykonywać bezpośrednie manipulacje, takie jak sidle-to-pan, pinch-to-zoom i turn-to-rotate, równocześnie z dowolną liczbą punktów dotykowych.

Windows 8 – zakres dotyku

Projektowanie, zorientowane na dotyk, jest czymś więcej niż projektowaniem wyświetlania na ekranie. Sposób trzymania urządzenia wymaga zaprojektowania.

Ludzie, trzymając tablet, mają zwykle kilka ulubionych chwytów.

Aktualnie wykonywane zadanie, i to jak się ono przedstawia, określa rodzaj używanego chwytu. Jednakże, wpływ na chwyt ma także najbliższe otoczenie oraz komfort fizyczny.

Spróbuj zoptymalizować aplikację dla różnych rodzajów chwytów, ale jeśli interakcja naturalnie nadaje się do konkretnego chwytu, zoptymalizuj ją pod tym kątem.

Obszary interakcji: Ponieważ tablety najczęściej trzymane są za boki rogu, więc boki są idealną lokalizacją elementów interaktywnych.

Obszary czytania: Zawartość w górnej połowie ekranu jest łatwiejsza do zobaczenia niż w dolnej, która często blokowana jest przez ręce lub ignorowana.

Chociaż istnieje wiele sposobów trzymania tabletu, te cztery są najczęściej używane. Cztery najczęstsze chwyty:

Chwyt	Chwyt i interakcja	Uwagi przy projektowaniu
	jedna ręka trzyma tablet, druga prowadzi interakcję	prawa lub dolna krawędź zapewnia szybką interakcję, prawy dolny róg może zostać zablokowany przez nadgarstek, dotykanie jest bardziej dokładne, czytanie, wyszukiwanie, pisanie.
	dwie ręce trzymają tablet, kciuki prowadzą interakcję	lewy i prawy dolny narożnik zapewniają szybką interakcję, umiejscowione kciuki zwiększają dokładność dotyku, element znajdujący się na środku jest trudny do osiągnięcia, dotknięcie środka ekranu wymaga zmiany postawy, czytanie, przeglądanie, lekkie pisanie, granie.
	urządzenie leży na kolanach lub stole, obie ręce są w stanie prowadzić interakcję	dół ekranu zapewnia szybką interakcję, dolne narożniki mogą być blokowane przez nadgarstki, dotyk jest bardzo dokładny, czytanie, przeglądanie, pisanie długich tekstów,
	urządzenie stoi, możliwa jest interakcja lub jej brak	dolna część ekranu zapewnia szybką interakcję, dotknięcie górnej części ekranu pochłania zawartość, dotknięcie górnej części ekranu może wytrącić urządzenie z równowagi, interakcja w odległości zmniejsza czytelność i dokładność, należy zwiększyć rozmiar elementu docelowego, aby poprawić czytelność i precyzję, oglądanie filmu, słuchanie muzyki.

Windows 8 – cel dotyku

Rozmiar vs wydajność - wpływ wielkości na liczbę błędów

Nie ma idealnych rozmiarów dla dotyku. Różne rozmiary nadają się do różnych sytuacji. Akcje, z poważnymi konsekwencjami (usuwanie czy zamykanie), lub działania, często używane, powinny korzystać z dużych elementów dotykowych. Rzadko stosowane działania, z niewielkimi skutkami, mogą wykorzystywać małe elementy.

Tłuste palce?

Ludzie często obwiniają się za to, że mają „tłuste palce”, ale nawet palce niemowląt są szersze niż większość celów dotykowych.

Obraz pokazuje szerokość palca przeciętnej dorosłej osoby, wynoszącą około 11 mm szerokości, choć niektórzy koszykarze mają palce szersze niż 19 mm, podczas gdy dziecko ma 8 mm.

Oto kilka informacji, jakiej wielkości powinny być cele dotykowe. Wytyczne rozmiarów celów:

	Zalecany minimalny rozmiar - 7x7 mm 7x7 mm - jeśli błędny dotyk może zostać skorygowany w jednym lub dwóch gestach, lub w ciągu pięciu sekund to jest to dobra, minimalna wielkość. Odległość pomiędzy celami jest tak samo ważna, jak docelowa wielkość.
	Gdy ważna jest dokładność Zamykanie, usuwanie i inne działania z poważnymi konsekwencjami nie mogą pozwolić sobie na przypadkowe stuknięcia. Użyj wielkości 9x9 mm – jeśli dotyk złego elementu wymaga więcej niż dwóch gestów, jest dłuższy niż pięć sekund lub wymaga zmiany dużej części zawartości.
	Gdy, to po prostu się nie zmieści Możesz użyć wielkości 5x5 mm, jeśli akcje można skorygować za pomocą jednego gestu, w tym przypadku bardzo ważny jest 2 mm odstęp.

Większość ludzi jest praworęczna

Większość ludzi trzyma tablet w lewym ręku i dotyka go prawą ręką. Ogólnie rzecz biorąc, elementy umieszczone po prawej stronie są łatwiejsze w dotyku, a umieszczając je po prawej stronie zapobiegniesz zablokowaniu głównego obszaru ekranu.

Tematy pokrewne

User experience (UX) design patterns for Metro style apps

Responding to user interaction