Oryginalny post: The Opposite of Fitts' Law
Autor: Jeff Atwood
Jeśli kiedykolwiek wykłócałeś się o interfejs użytkownika, to prawdopodobnie słyszałeś o Prawie Fittsa. To całkiem proste -- im większy obiekt i im bliżej kursora się znajduje, tym łatwiej jest na niego kliknąć. Kevin Hale stworzył świetne wizualne streszczenie Prawa Fittsa, tak więc zamiast tłumaczyć, odsyłam Was tam.
Krótka wersja Prawa Fittsa, aby oszczędzić Wam tego nudnego czytania, jest następująca:
- Umieszczaj powszechnie używane elementy UI na krawędziach ekranu. Jako iż kursor automatycznie zatrzymuje się na krawędziach, będzie łatwiej na nie klikać.
- Obszary, na które się klika, uczyń możliwie jak największymi. Większe obiekty są łatwiejsze do klikania.
Wiem, że to bardzo proste, niemal za proste, ale zrób to dla mnie i wykonaj poniższe ćwiczenia. Wyobraź sobie siebie próbującego kliknąć na ...
- obiekt rozmiaru 1 x 1 o losowym położeniu
- obiekt rozmiaru 5 x 5 o losowym położeniu
- obiekt rozmiaru 50 x 50 o losowym położeniu
- obiekt rozmiaru 5 x 5 umiejscowiony w rogu ekranu
- obiekt rozmiaru 1 x 100 umiejscowiony na samym dole ekranu
Prawo Fittsa to w dużej mierze zdrowy rozsądek i cieszy się ono wystarczającą popularnością wśród projektantów UI, którzy prawdopodobnie o nim wiedzą mimo, iż nie przestrzegają go tak pobożnie jak powinni. Niestety, zauważyłem, iż projektanci jeszcze w mniejszej mierze biorą pod uwagę przeciwieństwo Prawa Fittsa, które jest niewątpliwie równie ważne.
Jeśli elementy UI, które chcielibyśmy, aby użytkownicy klikali, powinniśmy robić duże i umieszczać w rogach bądź na krawędziach dla ułatwienia klikania -- to co powinniśmy robić z elementami UI, na które nie chcielibyśmy, aby użytkownicy klikali? Jak na przykład przycisk "Skasuj całą moją pracę"?
Alan Cooper, w książce About Face 3, nazywa to dźwignią do katapultacji.
W kokpicie każdego myśliwca znajduje się jasno pokolorowana dźwignia, która po pociągnięciu, wystrzeliwuje mały silnik rakietowy znajdujący się pod fotelem pilota, wyrzucając pilota razem z siedzeniem z samolotu, aby wylądował bezpiecznie na ziemi. Dźwignie do katapultacji mogą być użyte tylko raz i konsekwencje tego są znaczące i nieodwracalne.
Aplikacje muszą posiadać takie dźwignie, aby użytkownicy mogli-co-jakiś-czas-zmieniać położenie stałych elementów interfejsu bądź dramatycznie (czasem nieodwracalnie) zmieniać funkcjonowanie albo zachowanie aplikacji. Jedyną rzeczą, jaka nie powinna się nigdy wydarzyć, jest przypadkowe uruchomienie takiej dźwigni.
![]()
Konstrukcja interfejsu musi zapewniać, aby użytkownik nigdy nieumyślnie nie odpalił dźwigni do katapultacji podczas rutynowych operacji w programie.
Przychodzi mi na myśl kilka aplikacji, których używam regularnie, a gdzie przycisk dźwigni do katapultacji jest w niewytłumaczalny sposób zaraz obok przycisku do włączania świateł w kabinie. Spójrzmy dla przykładu na naszego starego przyjaciela, czyli pocztę GMail:
Mogę Ci powiedzieć o czym myślisz. Czy kliknął Wyślij czy Zapisz teraz? Tak więc, aby być szczerym, to w tym całym uniesieniu podczas pisania tego pełnego wściekłości e-maila, pogubiłem się w tym co robię. Dobre jest to, że w łatwy sposób możemy anulować wysłanego e-maila! A nie, czekaj, to jest niemożliwe. Wyobraź sobie mój fotel, albo przynajmniej tego pochopnego e-maila, wystrzelonego.
Jest jeszcze gorzej podczas archiwizowania e-maili.
O ile w poprzednim przykładzie było przynajmniej 10 pikseli pomiędzy przyciskami, to w tym są całe... trzy. Co kilka dni przypadkowo naciskam Zgłoś Spam, kiedy tak naprawdę chciałem kliknąć Archiwizuj. Ale, na obronę Google'a, oferują oni prostą możliwość cofania dla tych przypadkowych kliknięć. Ale nie mogę przestać się zastanawiać nad tym, dlaczego te dwa przyciski, o zupełnie różnych funkcjonalnościach, muszą się znajdować jeden obok drugiego.
Cofanie zmian to potężna rzecz, ale czyż nie lepiej by było, gdybyśmy ciągle nie pociągali za dźwignię do katapultacji? Czy nie byłoby sensowniej umieścić tę ryzykowną dźwignię w innej lokalizacji i uczynić ją mniejszą? Zobacz edytor wpisów na WordPressie.
Tutaj, powszechna operacja Aktualizuj jest w postaci dużego i oczywistego przycisku -- jest łatwy do zauważenia i do kliknięcia. Rzadziej używana operacja Przenieś do kosza jest mniejsza, zaprezentowana jako zwykły odnośnik i umieszczona z daleka od operacji Aktualizacji.
Następnym razem, gdy będziesz tworzył interfejs użytkownika, koniecznie powinieneś przestrzegać Prawa Fittsa. To po prostu ma sens. Lecz nie zapomnij przestrzegać też przeciwieństwa Prawa Fittsa -- rzadko używane i niebezpieczne elementu UI powinny być trudne do kliknięcia!