Prawo Fittsa to fundamentalna zasada ergonomii i projektowania interfejsów użytkownika (UI/UX), która opisuje, jak wielkość celu oraz jego odległość od punktu startowego wpływają na czas wykonania ruchu (kliknięcie, dotknięcie).
Im cel jest większy i bliżej, tym szybciej użytkownik go osiągnie — to bezpośrednio przekłada się na lepsze UX i wyższą efektywność interakcji w aplikacjach i na stronach internetowych.
W erze cyfrowego marketingu zrozumienie prawa Fittsa pozwala projektantom i marketerom zwiększać konwersję, optymalizować kluczowe przyciski CTA i minimalizować frustrację użytkowników.
Definicja i historia prawa Fittsa
Prawo Fittsa, znane również jako Fitts’s Law, sformułował w 1954 roku amerykański psycholog Paul Fitts, badając ruchy człowieka w kontekście komunikacji człowiek–maszyna. Pierwotnie odnosiło się do fizycznych zadań (np. chwytanie obiektów), ale szybko znalazło zastosowanie w projektowaniu cyfrowym — ruch kursora myszy lub palca po ekranie podlega tym samym zasadom.
Matematycznie prawo to wyraża następujący wzór:
MT = a + b * log2(2D/W + 1)
gdzie:
- MT – czas ruchu;
- D – odległość do celu;
- W – szerokość (wielkość) celu;
- a i b – stałe empiryczne zależne od urządzenia wejściowego.
Prościej: czas wykonania zadania rośnie wraz z odległością do celu i maleje wraz z jego wielkością. Mały przycisk oddalony o kilkaset pikseli wymaga więcej czasu na kliknięcie niż duży, umieszczony blisko kursora.
Prawo Fittsa działa zarówno na desktopie (mysz), jak i na urządzeniach mobilnych (dotyk), co podkreśla jego uniwersalność i psychologiczne podstawy ludzkiego ruchu.
Mechanizm działania – wielkość i odległość w praktyce
Wielkość celu bezpośrednio wpływa na precyzję i prędkość trafienia. Większe elementy (np. przyciski o szerokości co najmniej 44 × 44 px na urządzeniach mobilnych, zgodnie z wytycznymi Apple/Google) mają większą „powierzchnię trafienia”, co zmniejsza ryzyko błędów. Małe cele, jak 10‑pikselowy link, wymuszają ekstremalną precyzję, co frustruje użytkownika i wydłuża interakcję.
Odległość do celu to drugi kluczowy czynnik. Im dalej od aktualnej pozycji kursora (lub palca), tym dłuższy ruch, a co za tym idzie — większy czas i ryzyko pomyłki. Prawo Fittsa wyjaśnia także efekt krawędzi: krawędzie ekranu działają jak „nieskończenie duże” cele, do których łatwiej trafić.
W UX te zmienne łączą się w indeks trudności (ID):
ID = log2(2D/W + 1)
Im wyższy ID, tym trudniejsze i wolniejsze zadanie.
Przykłady zastosowania w projektowaniu stron i aplikacji
1. Przyciski CTA w marketingu i e‑commerce
Na stronach docelowych kluczowe CTA, jak „Kup teraz” czy „Zapisz się”, powinny być duże i położone blisko centrum uwagi użytkownika. W sklepach online przycisk „Dodaj do koszyka” umieszcza się tuż pod zdjęciem produktu — to minimalizuje D i maksymalizuje W, skracając czas kliknięcia i kumulując zysk w tysiącach interakcji.
Przykład: Amazon pozycjonuje przycisk „Kup teraz” blisko miniatury produktu, co zwiększa konwersję zgodnie z prawem Fittsa.
2. Menu nawigacyjne i paski narzędzi
Główne menu przy krawędzi ekranu korzysta z efektu krawędzi — użytkownik szybko do niego dociera, bo brzeg ekranu działa jak „ogromny” cel. W aplikacjach typu Photoshop narzędzia edycji są blisko płótna roboczego, co redukuje koszt interakcji przez grupowanie powiązanych funkcji.
3. Formularze i aplikacje mobilne
W formularzach kontaktowych pola i przycisk „Wyślij” muszą być duże i blisko siebie — to ogranicza przypadkowe kliknięcia. W aplikacjach bankowych przycisk „Potwierdź przelew” często ma ponadstandardowy rozmiar, co minimalizuje błędy.
Dla jasności zestawiamy najczęstsze przypadki implementacji oraz wynikające z nich korzyści:
| Element interfejsu | Zła implementacja (wysoki czas) | Dobra implementacja (niski czas) | Korzyść z prawa Fittsa |
|---|---|---|---|
| Przycisk CTA | Mały (20 px), na dole strony | Duży (48 px+), pod nagłówkiem | +30–50% szybsze kliknięcia |
| Menu hamburgerowe | Głęboko zagnieżdżone opcje | Na krawędzi, duże ikony | Mniej frustracji, wyższa retencja |
| Formularz logowania | Przycisk 1 cm od pola hasła | Natychmiast obok pola | Redukcja błędów o 40% |
4. Reklamy display i banery
W kampaniach reklamowych prawo Fittsa pomaga optymalizować layout: kluczowe CTA (np. „Zamów”) są duże i centralne, aby zwiększyć klikalność. Zbyt małe, odległe linki w banerach obniżają konwersję.
Wpływ na UX, konwersje i biznes
Stosowanie prawa Fittsa skraca czas interakcji (nawet o 20–50%) i ogranicza błędy (o 30–40%). W marketingu to przekłada się na wyższe konwersje — użytkownicy szybciej docierają do zakupu, subskrypcji czy kontaktu.
Najważniejsze korzyści biznesowe są następujące:
- przewaga konkurencyjna – strony zoptymalizowane pod Fittsa budują pozytywne pierwsze wrażenie, kluczowe w erze mobilnej;
- zwiększona retencja – mniej frustracji = dłuższy czas na stronie i niższy współczynnik odrzuceń;
- efektywność reklam – optymalne CTA w reklamach podnoszą CTR (współczynnik klikalności);
- dostępność – duże cele wspierają użytkowników z niepełnosprawnościami, zgodnie z WCAG.
W e‑commerce, gdzie konkurencja jest ostra, ignorowanie tej zasady to realna strata — redesign z większymi przyciskami potrafi podnieść konwersję o 10–20%.
Najważniejsze zasady do zapamiętania w projektowaniu
Podczas projektowania interfejsów stosuj poniższe, praktyczne wytyczne:
- priorytetyzuj kluczowe cele – najważniejsze elementy (CTA, wyszukiwarka) powinny być największe i położone najbliżej głównego obszaru uwagi;
- minimalizuj odległości – grupuj powiązane funkcje (np. akcje edycji blisko podglądu);
- rozmiary minimalne – desktop: 16–24 px wysokości przycisków; mobile: 44–48 px;
- efekt krawędzi – umieszczaj istotne menu i paski nawigacji przy obrzeżach ekranu;
- testuj empirycznie – weryfikuj projekt mapami cieplnymi (np. Hotjar) i pomiarem czasów kliknięć.
