Przeciwieństwo Prawa Fittsa

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.

dźwignia do katapultacji

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:

Gmail send vs save now

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.

Gmail archive vs report spam

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.

wordpress update vs trash

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!

Data publikacji oryginału: 24 marca, 2010

6 komentarze:

Konradzik pisze...

Trzeba przyznać, że uwaga jest ciekawa i warto wziąć ją pod uwagę projektując interfejs. Jednak nie ma co dramatyzować - gmail ma "cofnij", większość aplikacji ma "czy na pewno?" - nie tak łatwo jest popełnić błąd.

Zresztą, ja nie pamiętam w swoim życiu sytuacji gdzie chcąc kliknąć przycisk A kliknąłem B (choć może nie pamiętam) i z tego co czytam w komentarzach na codinghorror ludzie też nie mają większych problemów z trafieniem w odpowiedni guzik. Myślę, że rozrzucenie przycisków zgodnie z wspomnianym prawem, nawet jeżeli drastycznie zmniejszy ilość błędów tego typu, to będzie zmianą w stylu z 0.5% na 0.1% - czyli z "rzadko" na "rzadziej".

Anonimowy pisze...

Nie "wykłucałeś", a "wykłócałeś".

rafek pisze...

@Anonimowy: Dziękuję :)

Eloar pisze...

@Konradzik: Ja bym wolał mieć interface w aplikacjach zaprojektowany tak, aby nie trafiać w coś przypadkowo, niż być 10x pytanym, czy na pewno chcę tego czego chcę.

Greg pisze...

Moim zdaniem przeciwieństwo prawa Fitsa to bzdura. Niebezpieczne elementy nie muszą być trudne do kliknięcia (w końcu to część funkcjonalności i mają być łatwe w kliknięciu). Tak jak w przykładzie z katapultą - nie powinien to być przycisk wielkości główki od szpilki w trudno dostępnym miejscu.

Takie elementy mają się tylko wyróżniać (przykład WP - wielki przycisk vs. link tekstowy). Nikt przy zdrowych myślach nie zrobi elementu "usuń" czcionką wielkości 3px.

Konradzik pisze...

@Eloar - od czasu Visty nikt już chyba nie twierdzi, że komunikaty "wiesz co robisz?" mają sens. Wręcz przeciwnie, są one źle kojarzone. Jednak czy nie stały się one nieodzowną częścią każdej akcji typu "usuń"? Czy jak dam przycisk 'katapulty' w miejscu zgodnym z tym co napisano w artykule to zrezygnuję z dodatkowego zabezpieczenia w postaci komunikatu? Wątpię.

To co napisał Greg też daje do myślenia - dostęp do wszystkich opcji powinien być równie szybki - jak chcę usunąć jakiś element to nie mam zamiaru szukać po całym oknie/stronie odpowiedniej funkcji.

Prześlij komentarz

Related Posts with Thumbnails