Prawo Fittsa w erze dotyku

Opublikowany: 2022-03-10
Krótkie podsumowanie ↬ W tym artykule Steven Hoober zwraca uwagę na prawo Fittsa i wyjaśnia, dlaczego zawsze powinniśmy zadawać pytania i zastanawiać się, co poszczególne wytyczne i lekcje oznaczają dla naszych użytkowników i naszych produktów.

Kiedy zacząłem pisać Touch Design for Mobile Interfaces , regularnie znajdowałem interesujący temat lub styczną, która prowadziła daleko w chwasty i musiałem powstrzymać się od dążenia do tego zbyt daleko. Nie chciałem zostać pustelnikiem, który umiera z nigdy nie ukończonym piętnastotomowym dziełem na ciągle zmieniający się temat.

Ale o wielu warto porozmawiać niezależnie, a jednym, który może ci się spodobać, jest Prawo Fittsa i to, jak działa z ekranami dotykowymi. Większość interaktywnych projektantów dowolnego rodzaju rozpozna to i ogólnie zna bardzo mały podzbiór lekcji na pamięć. Prawo, jak stwierdzono, jest takie, że:

„Ilość czasu potrzebnego na przesunięcie wskaźnika do obszaru docelowego jest funkcją odległości do celu podzielonej przez rozmiar celu”.

Z tego wynika szereg terminów i możliwych do wykorzystania lekcji. Niektóre typowe:

  • Punkt zerowy
    Piksel pod wskaźnikiem myszy lub kursorem jest natychmiast użyteczny, bez ruchu.
  • Większe jest lepsze
    Większy cel jest zawsze łatwiejszy do kliknięcia niż mniejszy.
  • Magiczne krawędzie
    Krawędzie ekranu są „nieskończenie głębokie”; nie możesz przegapić krawędzi, gdy mysz zatrzymuje się, gdy tam dotrze. Na przykład menu wzdłuż górnej krawędzi są łatwiejsze do kliknięcia niż elementy o tym samym rozmiarze, które są tylko nieco przesunięte.
  • Magiczne Zakątki
    Ta nieskończona głębia jest podwójnie prawdziwa dla narożników, więc to właśnie te obszary są najłatwiejsze do zaznaczenia poza myszą.

Oczywiście wszyscy wiemy, że wiele z tego nie jest uniwersalną prawdą. W grę wchodzą inne czynniki. Zbyt duże przyciski są w rzeczywistości dość trudne w użyciu, ponieważ przestają być postrzegane jako przyciski. Ludzie skupiają się na obiektach akcji, więc spróbują kliknąć ikonę lub etykietę tekstową wewnątrz przycisku, wysysając część mocy rozmiaru.

A może krawędź nie jest krawędzią. Albo wiemy, gdzie jest mysz, ale nie wiemy, gdzie jest ręce użytkownika. Albo w ogóle nie ma myszy.

Obserwuj swoje założenia

Paul Fitts był psychologiem, który w czasie wojny był starszym oficerem Sił Powietrznych USA. Był przekonany, że zbyt wiele strat samolotów i załogi nastąpiło z powodu tak zwanych słabych względów ludzkich . Założył Laboratorium Badawcze Psychologii Lotnictwa na Uniwersytecie Stanowym Ohio, gdzie oprócz jego dobrze znanych badań wykonywano wiele ważnych prac związanych z bezpieczeństwem lotniczym.

Wiele z tego, co robimy w projektowaniu UX, jest zakorzenionych w standardach czynnika ludzkiego, ale musimy być ostrożni w ich stosowaniu. Często robili na przykład założenia dotyczące tego, kim są użytkownicy. Badano tylko sprawnych, młodych, nierozróżniających kolorów, na ogół białych Europejczyków, ponieważ to właśnie oni latali samolotami i (w większości) obsługiwali skomplikowane maszyny, gdy standardy przeniosły się do przemysłu.

Ale robią też założenia dotyczące środowiska. Chociaż samolot może być surowy i bezlitosny, wiemy, gdzie znajduje się pilot w stosunku do elementów sterujących. Nawet na stanowisku komputerowym; jednak nie mamy pojęcia, gdzie jest ręka użytkownika. Zastosowanie pracy Fittsa zakłada, że ​​ręka jest cały czas na myszy; zero czasu ani wysiłku, aby kliknąć to, co jest pod wskaźnikiem. Ale co, jeśli piszę na maszynie lub piszę na papierze, albo właśnie odłożyłem słuchawkę, albo jakąkolwiek z tysiąca innych rzeczy? Właściwie chodzi o ruch człowieka, a nie o ruch myszy, prawda?

W projektowaniu przyjmujemy wiele założeń bez ich przemyślenia. Kontrolki umieszczamy na krawędziach stron internetowych i aplikacji, ale krawędzie okienek ekranu bardzo często nie są krawędziami wyświetlaczy. Przeglądarki internetowe mają wokół siebie chrome, a nawet zmaksymalizowane aplikacje w systemie Windows nie zakrywają paska zadań. Dolna krawędź i rogi twojej aplikacji nie są teraz nieskończenie głębokie, prawda?

Oczywiście dość trudno jest tak łatwo i bezproblemowo nałożyć na dotyk.

Więcej po skoku! Kontynuuj czytanie poniżej ↓

Gdzie są twoje ręce?

Z pewnością praca Fitta jest prawdziwa. Odległość i wielkość celu mają zastosowanie dość powszechnie. Ale prostota, która wynika z założeń w systemach komputerowych sterowanych myszą, tak naprawdę nie ma zastosowania do systemów dotykowych.

Chociaż właśnie podniosłem kwestię, że być może użytkownik nie trzyma myszy, w przypadku dotyku tak naprawdę nigdy nie mamy pojęcia, gdzie jest ręka. Naprawdę nie. Jeśli nie czytałeś żadnej z moich prac, możesz pomyśleć, że wszyscy trzymają telefon jedną ręką i stukają kciukiem, tak:

Ilustracja, na której ktoś trzyma telefon jedną ręką i stuka kciukiem
(duży podgląd)

Ale po prostu tego nie robią. Mamy solidne informacje, szczegółowo opisane w rozdziale 5 „Projektowanie dotykowe dla interfejsów mobilnych”, że ludzie trzymają telefony na wiele sposobów i stale zmieniają sposób trzymania. Nawet w przypadku poszczególnych typów zadań nie ma jednego preferowanego sposobu wstrzymania, więc nie możemy przewidzieć, co ludzie robią z jakąkolwiek dokładnością.

Wykres słupkowy, który pokazuje różne sposoby i pozycje rąk w stosunku do pożądanego celu na telefonie
(duży podgląd)

Więc gdzie są twoje ręce w stosunku do pożądanego celu na telefonie, tablecie lub komputerze z ekranem dotykowym? Nie mamy pojęcia. Komputer nie może tego wykryć, a my nie mamy wskazówek ani prawdopodobieństwa, gdzie jest ręka. Żaden cel, a właściwie żadna część ekranu nie znajduje się bliżej wskaźnika — ręki użytkownika — niż inna.

Zasady etycznego projektowania

Kilka pokoleń przed Fittsem FW Taylor tworzył dziedzinę zarządzania naukowego z zasadami analitycznymi, które można w pełni zbadać dzięki badaniom czasu i ruchu Gilbretha. Wszystkie z nich zostały uznane za praktyki zarządzania i zostały zaprojektowane w celu optymalizacji wyników i wydajności poprzez znalezienie „jednego najlepszego sposobu” wykonania zadania.

Nawet w specjalistycznych dziedzinach, takich jak lotnictwo, okazało się to zbyt uproszczone. Ludzie nie są maszynami, więc w ciągu ostatnich kilku dekad ponownie poprawiono bezpieczeństwo lotnicze dzięki praktykom takim jak CRM. Zarządzanie zasobami załogi w sposób skoncentrowany na ludziach, aby skłonić zespoły do ​​współpracy, rozwiązywania problemów — lub częściej, unikania problemów — wraz z listami kontrolnymi i procedurami.

Jedyny najlepszy sposób myślenia jest nadal w biznesie. Jest to nawet nazwa zestawu ulepszeń procesów stosowanych ostatnio przez WalMart. Zdecydowanie widzę to przefiltrowane do zespołów zajmujących się projektowaniem produktów cyfrowych, programistów, a nawet projektantów. Jeśli zawsze zaczynasz od szczęśliwej ścieżki i nie martwisz się innymi sposobami, w jakie użytkownicy mogą pracować z systemem, komunikaty o błędach lub unikanie błędów są nieistotne, ponieważ po prostu użytkownicy robią to „niewłaściwie”.

UX ma być rzecznikiem użytkowników, więc przynajmniej w moim obszarze praktyki uważam, że takie myślenie jest po prostu nieetyczne.

Zbyt wiele standardów i założeń, na których opierają się procesy i standardy cyfrowe, zakłada stację roboczą, ale od dawna nie wiemy, czym i gdzie jest komputer.

Teraz, wraz z przejściem na dotyk i urządzenia mobilne, naprawdę musimy przyznać, że nie ma miejsca na tak sztywne spojrzenie na świat; możemy przewidzieć, ale nie możemy zakładać, wiele rzeczy dotyczących tego, gdzie są użytkownicy i jak pracują. Jak zobaczymy, te założenia i tak nie zawsze mają zastosowanie, więc zmuszanie ich do dopasowania może być receptą na zamieszanie i porażkę.

Próbując zastosować pracę Fittsa, aby dotknąć

Podczas gdy kontekstem badań prowadzonych przez Fittsa i innych było lotnictwo, maszyny lub sterowanie, rzeczywista matematyka za tym wszystkim dotyczy tylko ruchu jednowymiarowego. Ile czasu zajmuje nie poruszanie się nawet po płaszczyźnie kontrolek lub ekranie, ale przesuwanie kontrolki z jednej pozycji do drugiej z pewną precyzją.

Chociaż możesz z tym pracować, domyślna interpretacja tego dla interfejsów sterowanych myszą powoduje pewne kłopotliwe założenia. Na przykład rozmiar docelowy jest zawsze mierzony jako składnik poziomy. Tak, nawet jeśli jest to przycisk znacznie szerszy niż wysoki, a kursor zaczyna się poniżej celu. To jest problem.

W przypadku urządzeń mobilnych domyślnym zachowaniem po dotknięciu kontrolki lub przewinięciu jest wyczyszczenie obszaru roboczego. Czasami oznacza to, że palec lub kciuk odsuwa się od obszaru ostrości, aby zobaczyć, co się stało, ale w większości przypadków oznacza to, że palce całkowicie odsuwają się od ekranu i unoszą się lub odpoczywają w pewnej odległości. Oczywiście niektórzy użytkownicy przechodzą na model bez zaangażowania, w którym spodziewają się, że przez jakiś czas nie będą musieli wchodzić w interakcję z urządzeniem. Niezależnie od tego, czy chodzi o drinka, włożenie telefonu do kieszeni, czy odłożenie go, aby obejrzeć wideo. Telefon jest teraz bardzo daleko, użytkownik musi podjąć inne działania, aby rozpocząć interakcję, i wykonać nieco długą zmianę poznawczą, aby powrócić do trybu interakcji.

Dość szybko zdałem sobie sprawę, że próba zastosowania wzoru Fittsa do uzyskania wskaźnika trudności, a następnie użycie moich danych eksperymentalnych, aby spróbować dopasować do tego nachylenie wartości czasu, byłaby głupcem. Jest zbyt wiele zmiennych, więc skodyfikowanie wielu rodzajów interakcji byłoby pracą całego życia.

Ponadto wiadomo, że praca Fittsa nie ma już ogólnego zastosowania. Dotyczy to tylko systemów z ruchem kończyn. To oznacza całe ramię, a nie tylko poruszanie palcami. Pomyśl o tym, jak używasz myszy, gładzika, joysticka, jarzma lub tabletu piórkowego. Przeważnie poruszasz, choć nieznacznie, całym ramieniem.

W dobrze zbadanym kontrprzykładzie joysticki izometryczne i inne elementy sterujące wykorzystujące wykrywanie siły zamiast ruchu nie są dobrze modelowane lub wymagają własnych modyfikacji lub modeli. Chociaż jest to możliwe, trudno jest je zastosować, ponieważ musisz modelować interakcje dla różnych części swoich systemów na różne sposoby. A czy słyszałeś o pracy SK Card nad tym w latach 70. i 80.? Nie, oczywiście, że nie, ponieważ jest to skomplikowane. Praktycy potrzebują sprowadzonej, uproszczonej wersji.

Z odrobiny analizy i badania wyników badań stwierdzam, że to samo dotyczy interakcji dotykowych . Że w odkryciach jest przewidywalność i powtarzalność, ale nie pasują one do żadnego istniejącego modelu.

I w sumie dlatego podaję wskazówki, a nie modele matematyczne. W przypadku przenośnych tabletów i telefonów z ekranem dotykowym ludzie dotykają środka szybciej i dokładniej niż krawędzie.

Ilustracja przedstawiająca ręce trzymające telefon z kciukiem na środku ekranu
(duży podgląd)

Istnieją te wytyczne (wszystkie są szczegółowo opisane w książce) dotyczące rozmiarów docelowych, a także pewne mylące kwestie, o których należy pamiętać — wszystko, co pomoże ci zaprojektować interfejsy i interakcje.

Ilustracja z różnymi rozmiarami docelowymi do projektowania interfejsów pokazana na dwóch telefonach
(duży podgląd)

Uwzględnianie szybkości codziennego życia

W mojej dotychczasowej pracy, takiej jak w książce, celowo nie dzieliłem czasu na stukanie, ponieważ różnią się one tak bardzo w zależności od kontekstu użycia. Ale możemy teraz podać kolejną wskazówkę dotyczącą tego, w jaki sposób urządzenia mobilne różnią się w użyciu od mentalności stacji roboczej. To oczywiście oznacza, że ​​większość projektów powinna odłożyć na bok założenie o sterowaniu myszką i skupieniu uwagi.

Moje ulubione znikają kontrolki . Często je widzimy: w paskach przewijania, w chrome i nie tylko. Ale spójrzmy na wszechobecny odtwarzacz wideo, ponieważ teraz wideo online jest normą. Załóżmy, że stukasz odtwarzacz wideo, aby rozpocząć odtwarzanie. Po krótkim czasie elementy sterujące znikają lub wysuwają się, dzięki czemu można oglądać wideo na pełnym ekranie. Kiedy jest się skoncentrowanym i zwykle za pomocą myszy, działa to dobrze. Możesz grać, a następnie przejść do „ugh, kredyty” i natychmiast je pominąć, ponieważ w pobliżu znajdują się elementy sterujące pomijania lub pasek postępu. Możesz także przesunąć wskaźnik nieco, aby przesunąć odtwarzanie na dłużej, a następnie usiąść wygodnie i obserwować, jak kontrolki znikają.

Na ekranach dotykowych, podczas gdy także rozprasza się normalne życie lub przypadkowe oglądanie, ten sam czas, gdy stosowane są wygaszanie elementów sterujących, ale nie wystarczy, aby można było z nich korzystać. Palce są nieprzezroczyste, więc stukamy, a następnie przesuwamy palce lub kciuki poza ekran. Ale może zaaklimatyzujemy się, żeby to obejrzeć, a potem zdamy sobie sprawę, że musimy pominąć tę głupią część. Więc teraz musimy przestawić nasze mózgi z powrotem do trybu interaktywnego . Orientujemy się na to, co widzimy i cofamy się, aby podjąć działanie. Oczywiście do tego czasu elementy sterujące — wszystko jest ustawione na mysz — zniknęły.

Jak powiedziałem, trudno jest zapewnić użyteczne i wykonalne wskazówki na czas. A gdybym przytoczył czasy interakcji na dotyk, to dla porównania musiałbym podać to samo dla systemu sterowanego myszą. Moją ogólną obserwacją — bez przeprowadzenia pełnego testu w tym celu — że czasy byłyby podobne dla podobnych interakcji, ale nie wszystkie interakcje i środowiska są równe.

Możesz spróbować tego, aby upewnić się, że projektujesz prawidłowo lub lepiej ocenić go w recenzjach i demonstracjach. Pomyśl tylko o kontekście i włóż telefon do kieszeni lub usiądź wygodnie i obserwuj działanie systemu, a następnie wróć do interakcji, gdy nadejdzie czas. Pamiętaj, że nawet testy użyteczności mogą przyciągnąć zbyt dużą uwagę użytkownika , więc ustaw nierealistyczne oczekiwania co do trybów użytkowania i oczekiwanych prędkości. Oglądaj analitykę, staraj się zajrzeć do prawdziwej etnografii i po prostu obserwuj użytkowników przez cały dzień, kiedy możesz, i zastanów się, jak ludzie mogą faktycznie korzystać z Twojego produktu w kontekście.

Przejście od WIMP do dotyku

W porządku, możesz pomyśleć, że jest dużo do zapamiętania i wymyślenia, jak zastosować się do swojej pracy. Ubezpieczyłem cię. Tak jak w książce, po tym, jak narzekam na historię, zagłębiam się w matematykę, poznanie, fizjologię czy etykę, wracam i kończę prostą listą kontrolną.

Ten był szczególnie trudny do złożenia, ponieważ musiałem wyjść i znaleźć wszystkie aktualne porady dotyczące projektowania interfejsów użytkownika, zwłaszcza z prawem Fittsa. Chociaż niektóre są dobre lub starają się jak najlepiej, istnieją również naprawdę złe rady.

Uwaga : ten wykres nie przechodzi całkowicie od najlepszych praktyk dotyczących myszy na dotyk, ponieważ przedstawia aktualne porady — dobre i złe — do nowych najlepszych porad, jakie mogę zaoferować.

Konwencjonalna mądrość dla myszy i pulpitu Najlepsze praktyki dotyczące dotyku i urządzeń mobilnych
Rozłóż zawartość od góry do dołu, od lewej do prawej, z najważniejszymi w lewym górnym rogu. Ludzie czytają i wchodzą w interakcję w najlepszy i najszybszy sposób ze środkiem ekranu. Umieść kluczowe informacje w dużym obszarze przewijania pośrodku.
Uważaj na fałdę, aby użytkownicy mogli zobaczyć wszystkie potrzebne im informacje. Nie ufaj przewijaniu, ponieważ paski przewijania są daleko. Każdy przewija, bo gest jest łatwy i powszechny. Upewnij się, że użytkownicy wiedzą, że jest więcej treści, ale oczekuj, że sami je odkryją.
Trzymaj wszystkie opcje sterowania blisko, aby ograniczyć ruchy myszy. „Anuluj” i „prześlij” muszą znajdować się tuż obok siebie. Wypadki się zdarzają, więc trzymaj odmienne i szczególnie destrukcyjne wybory z dala od pozytywnych działań.
Okna dialogowe ochrony („Czy na pewno?”) dobrze chronią przed przypadkową aktywacją. Unikaj w ogóle destrukcyjnych działań, a gdy jest to wymagane, upewnij się, że wszystkie mają metody cofania (lub fałszywe cofanie), a nie ochronę przed akcją.
Ludzie są skoncentrowani na wykonywanym zadaniu i chcą przede wszystkim szybkości. Ludzie żyją na świecie, więc są rozproszeni. Nie przekraczaj limitu czasu powiadomień ani nie zapewniaj ograniczonego czasu na wykonanie czynności.
Krawędzie i rogi są nieskończenie głębokie, więc umieść tam menu, aby mieć do nich szybki dostęp. Krawędzie i narożniki są najtrudniejsze do dotknięcia, ale są świetnymi miejscami do ukrycia mało używanych menu i zakotwiczonych działań. Ale tylko kilka; spraw, aby były duże, aby zapewnić użytkownikom możliwość ich pomyślnego wykorzystania.
Wyskakujące okienka są najlepsze, ponieważ mogą pojawiać się pod myszą, więc potrzeba mniej ruchu w porównaniu z menu i szufladami. Wyskakujące okienka są okropne pod wieloma względami, nie tylko są oderwane od kontekstu. Umieść elementy w interfejsie użytkownika lub użyj szuflad, akordeonów i innych elementów kontekstowych, aby wybrać.
Zapewnij użytkownikowi narzędzia do szybkiego wybierania, w tym przeskakiwanie myszy do podstawowej akcji. Daj użytkownikowi możliwość podejmowania świadomych decyzji. Przekaż im wystarczająco dużo informacji, aby mogli dokonywać dobrych wyborów. W przypadku wyborów następczych opóźnienie w przejściu do działania jest dobre i zapewnia chwilę na zastanowienie się, czy rzeczywiście chcą to zrobić.
Większe jest lepsze, więc nie krępuj się dopasowywać przycisków i używać bardzo długich etykiet dla najważniejszych przycisków. Twórz elementy interaktywne, takie jak przyciski, tylko tak duże, jak są potrzebne w oczekiwanym miejscu na ekranie. Etykiety powinny być przejrzyste i zwięzłe, aby użytkownicy mogli je przeczytać.
Menu kołowe są najszybsze z możliwych, ponieważ wszystkie opcje mają taką samą odległość od punktu początkowego. Menu kołowe tracą wiele ze swojej wartości po oddaleniu się od kursora i są nieoczekiwane, więc krzywa uczenia się przeszkadza ich teoretycznej wartości.

Wniosek

Istnieje takie ogólne założenie, które widzę w wielu miejscach, w których pracowałem, że wszyscy inni doskonale wiedzą, co robią. Nie tylko kopiujemy Apple czy Amazon, ani nie używamy Material Design, ale pożyczamy „inspirację” od konkurentów lub ulubionych produktów, których używamy i wierzymy bez wątpienia, że ​​wszystkie porady projektowe są słuszne.

Jak właśnie pokazałem, standardy i konwencje mogą się mylić . Mogą być nieaktualne, specyficzne dla technologii, których obecnie nie używamy, wąsko stosowane i nadmiernie stosowane, błędnie interpretowane i nadmiernie uproszczone lub niewłaściwie stosowane.

Technologia, miejsca pracy i życie codzienne często zmieniają sposoby, które sprawiają, że wcześniejsze założenia przestają mieć znaczenie. Jesteśmy w trakcie jednej z tych dużych zmian — przejścia z normalnego komputera, takiego jak komputer z myszą i klawiaturą, na mobilny ekran dotykowy.

Ale co ważniejsze, zawsze powinniśmy zadawać pytania i szukać głębszego zrozumienia . Powinniśmy nie tylko ślepo ich przestrzegać, ale zawsze zastanowić się, co wskazówki i lekcje oznaczają dla naszych użytkowników i naszych produktów.

Uwaga redaktora : w „Projekcie dotykowym dla interfejsów mobilnych” Steven dzieli się swoimi dogłębnymi badaniami na temat projektowania pod kątem dotyku z wytycznymi i heurystykami, które można natychmiast zastosować w swojej pracy. Przeczytaj fragment lub od razu otrzymaj książkę.