Siwy pilot w granatowej skórzanej kurtce siedzi w kokpicie zabytkowego samolotu, dłoń trzyma na dużej niebieskiej gałce tuż obok.AI

Prawa UX · Fitts's Law

Prawo
Fittsa.

Im większy i bliższy przycisk, tym szybciej w niego trafisz. Brzmi oczywiście, a jednak codziennie celujesz w małe „x” w rogu ekranu. Ile Cię to kosztuje? Sprawdź tutaj →

  1. 02Skąd się wzięło
  2. 03Test na sobie
  3. 04Wzór po ludzku
  4. 05Prawo Fittsa w interfejsie
  5. 06Jak duży przycisk
  6. 07Pytania
Deska z dwiema mosiężnymi płytkami różnej szerokości i metalowy rysik, obok stoper, duży niebieski przycisk, mały przełącznik i notes z wykresem.AI

Dwie płytki i rysik.

W 1954 roku psycholog Paul Fitts, który badał pracę pilotów dla lotnictwa USA, dał ludziom rysik i dwie metalowe płytki. Mieli stukać na zmianę w jedną i w drugą, najszybciej, jak się da. Fitts zmieniał tylko dwie rzeczy: odległość między płytkami i ich szerokość.

Im dalej i im węższy cel, tym dłużej trwa ruch. Tak samo jest z przyciskiem na ekranie.

Sprawdź to na sobie.

Osiem kółek: cztery duże i blisko, cztery małe i daleko, w losowej kolejności. Klikaj najszybciej, jak umiesz. Wynik zostaje w Twojej przeglądarce.

Klikaj w kółka0 / 8

Kliknij Start, a potem trafiaj w kółka, które się pojawią. 8 razy, najszybciej, jak umiesz.

Test działa z myszą, palcem albo rysikiem. Samą klawiaturą się nie da.

Co pokazał Twój test?

Prawo Fittsa: czas trafienia w cel rośnie z odległością do celu i maleje z jego rozmiarem. Fitts zapisał to wzorem. Nie musisz go liczyć, wystarczy zrozumieć dwie litery.

Dwa ruchy z tego samego miejsca. Do dużego celu blisko trwa krótko, do małego celu daleko trwa długo.Duży cel bliskoszybkoodległość Dszerokość WMały cel dalekowolnoodległość Dszerokość W

T = a + b · log2(D / W + 1)

T
czas trafienia
D
odległość do celu
W
szerokość celu
a, b
stałe dla osoby i urządzenia

Liczy się stosunek D do W: cel dwa razy dalej, ale dwa razy większy, zajmie tyle samo czasu. Logarytm sprawia, że powiększanie szybko przestaje pomagać: z 10 do 40 px zyskujesz dużo, ze 100 do 130 px już niewiele.

Pilot w hangarze tłumaczy coś młodemu kursantowi, wskazując otwarty kokpit kremowo niebieskiego samolotu.AI
Dłoń pilota trafia płasko w środek dużego niebieskiego przycisku na kremowym panelu.AI

Prawo Fittsa w interfejsie.

Przyspiesza

Większy obszar kliknięcia
Klikalny cały wiersz listy, cała karta, cała etykieta pola. Obszar może być większy niż to, co widać.
Cel blisko ręki
Przycisk tam, gdzie kończy się zadanie. Menu kontekstowe otwiera się pod kursorem, więc nie trzeba nigdzie jechać.
Krawędź ekranu
Kursor zatrzymuje się na brzegu, więc tam trudno przestrzelić. Dlatego menu w macOS siedzi na samej górze ekranu.
Pilot wyciąga rękę w górę do panelu z dziesiątkami małych, identycznych przełączników i szuka właściwego.AI

Spowalnia

Małe ikony
Ikona 16 px bez zapasu wokół. Na telefonie jeszcze gorzej, bo palec zasłania to, w co celuje.
Cel daleko od uwagi
„Zapisz” w górnym rogu, gdy formularz kończy się na dole. Każde kliknięcie zaczyna się od podróży kursorem.
Ciasno obok siebie
Małe przyciski stłoczone w rzędzie to wolniejsze ruchy i więcej pomyłek. Trafiasz w sąsiada.

Jak duży ma być przycisk?

Prawo Fittsa nie podaje pikseli, podają je wytyczne. A na telefonie liczy się też miejsce: najbliżej jest dół ekranu, bo tam sięga kciuk.

Przed „Dalej” jako mały napis w górnym rogu. Kciuk musi przejść przez cały ekran.
Po Przycisk na całą szerokość, na dole, w zasięgu kciuka.
WytyczneMinimumCo to znaczy
WCAG 2.2, poziom AA24 × 24 pxWymóg dostępności (kryterium 2.5.8). Mniejszy cel przejdzie tylko z odstępem od sąsiadów. Źródło
WCAG 2.2, poziom AAA44 × 44 pxNajwyższy poziom (kryterium 2.5.5). Dobra miara dla najważniejszych przycisków.
Apple44 × 44 ptWytyczne Human Interface Guidelines dla iPhone’a i iPada.
Material Design48 × 48 dpAndroid. Na ekranie to około 9 mm, mniej więcej opuszek palca.
Pilot i kursant przy stole nad rysunkiem kokpitu. Pilot przesuwa niebieskie kółko bliżej krawędzi rysunku.AI

Pytania o prawo Fittsa.

  1. 01

    Jaki jest wzór prawa Fittsa?

    T = a + b · log₂(D / W + 1). T to czas ruchu, D odległość do celu, W jego szerokość, a i b to stałe zmierzone dla osoby i urządzenia. Tę postać zaproponował Scott MacKenzie, Fitts pisał log₂(2D / W).

  2. 02

    Czy prawo Fittsa działa na telefonie?

    Tak, ale palec to nie kursor. Jest grubszy i zasłania cel, więc cele muszą być większe, a odległość liczysz od kciuka, nie od środka ekranu.

  3. 03

    Czym różni się od prawa Hicka?

    Fitts mówi, jak szybko trafisz w cel. Hick mówi, jak szybko go wybierzesz spośród wielu. Pierwsze dotyczy ręki, drugie decyzji.

  4. 04

    Czy większy przycisk jest zawsze lepszy?

    Nie. Gdy wszystko jest duże, nic się nie wyróżnia. A przy groźnych akcjach prawo działa w drugą stronę: „Usuń konto” może być mniejsze i dalej od „Zapisz”.

Kursant siedzi w kokpicie z dłonią na dużej niebieskiej gałce, a pilot stoi obok na skrzydle i patrzy na niego z uznaniem.AI

Prawo Fittsa w trzech zdaniach.

  1. 01Im większy i bliższy cel, tym szybciej w niego trafisz.
  2. 02Najważniejszą akcję zrób największą i postaw tam, gdzie kończy się zadanie.
  3. 03Groźne akcje zmniejsz i odsuń, żeby nikt nie trafił w nie przypadkiem.

Bliżej.

Branding, design i AI w pracy grafika.mikirobi.ai
01/08