Fittsův zákon (Fitts’s Law)

Fittsův zákon (anglicky Fitts’s Law) je princip, podle kterého čas potřebný k tomu, abys trefil nějaký cíl, závisí na jeho velikosti a vzdálenosti. Čím je cíl větší a blíž, tím rychleji a spolehlivěji na něj klikneš. Čím je menší a dál, tím to trvá déle a děláš víc chyb. Zní to jako triviální fyzika pohybu, ale ve světě webů a aplikací je to jeden z nejpraktičtějších zákonů UX designu vůbec. Rozhoduje totiž o tom, jak snadno se lidé dostanou k tlačítku koupit, a tím přímo o tvých konverzích.

Zařazení

• Příčina (Cognitive Bias Codex): Potřeba jednat rychle
• Mentální oblast: Motorika a pozornost (UX)
• Marketingová funkce: UX a konverze (CTA)
• Nákupní cesta: Rozhodnutí a akce
• Cialdiniho principy: nevztahuje se
• System 1 / System 2: System 1 (rychlé, automatické)

Ve zkratce

• Co to je: velký a blízký cíl se trefuje rychleji a s menším počtem chyb.
• Proč to řešit: snadné kliknutí na CTA přímo zvyšuje konverze.
• Kde to potkáš: tlačítka, odkazy, formuláře, hlavně na mobilu.
• Jak to využít: dělej klíčová tlačítka velká a umísti je tam, kam dosáhne palec.

Příběh ze života

Zákon formuloval americký psycholog Paul Fitts v roce 1954 v práci publikované v Journal of Experimental Psychology. Původně měřil pohyby lidské ruky, ale s příchodem počítačů a myši se z jeho zjištění stal jeden ze základních kamenů návrhu rozhraní. Dnes ho denně používá každý, kdo navrhuje weby a aplikace, ať už o tom ví, nebo ne.

Vezmi si nákup na mobilu. Když je tlačítko koupit malé a schované nahoře v rohu, uživatel se natahuje, míjí ho a vzteká se. Když je velké, kontrastní a v dolní části obrazovky, kam pohodlně dosáhne palcem, kliknutí je otázka vteřiny. Rozdíl v designu pár pixelů, rozdíl v počtu dokončených objednávek klidně výrazný. Proto mají appky hlavní akce dole a velké, ne nahoře a drobné.

Jak Fittsův zákon funguje

Náš pohyb k cíli má vždy dvě fáze: rychlý přesun směrem k cíli a jemné doladění na konci. Malý cíl vyžaduje víc doladění, takže trvá déle a snáz ho minneme. Velký a blízký cíl doladění skoro nepotřebuje. Na mobilu se navíc přidává dosah palce, takže záleží i na tom, kde na obrazovce tlačítko je. Princip se pojí s Von Restorffovým efektem, protože výrazné a kontrastní tlačítko zároveň lépe upoutá pozornost, a s efektem výchozí volby, kde snadná cesta k akci rozhoduje o tom, co uživatel udělá.

Využití v marketingu a na webu

1. Zvětši hlavní CTA. Tlačítko koupit nebo odeslat ať je velké a snadno zasažitelné. Drobné odkazy patří vedlejším akcím.
2. Mysli na palec. Na mobilu umísti hlavní akce do dolní třetiny obrazovky, kam pohodlně dosáhne palec.
3. Dej klikatelným prvkům prostor. Dostatečné rozestupy sníží chybná kliknutí, hlavně na dotykových zařízeních.
4. Zvětši celou klikací plochu. Klikatelný ať je celý řádek nebo karta, ne jen malý text uvnitř.
5. Nenuť k přesnosti. Malá zavírací křížka a titěrné odkazy uživatele frustrují. Dej jim slušnou velikost.

Jak s tím pracovat

1. Testuj na mobilu. Většina návštěv chodí z telefonu. Co jde palcem, jde dobře.
2. Hlídej velikost a rozestupy. Klikací prvky drž dost velké a od sebe.
3. Nejdůležitější = největší a nejblíž. Priorita akce se má promítnout do její velikosti a umístění.

Jak se to potkává s dalšími zkresleními

Fittsův zákon nejlíp funguje ve dvojici s Von Restorffovým efektem. Fitts říká, ať je tlačítko velké a po ruce, Von Restorff dodává, ať zároveň barevně vyčnívá z okolí. Velké, kontrastní a dobře umístěné CTA tak uživatel snadno najde i snadno zasáhne. Když k tomu přidáš jednoduchost podle paradoxu volby a jedno hlavní tlačítko na stránku, dostaneš přesně tu bezmyšlenkovitě snadnou cestu k akci, o kterou v konverzích jde.

Časté otázky

Co je Fittsův zákon?

Princip UX designu, podle kterého čas na zasažení cíle závisí na jeho velikosti a vzdálenosti. Větší a bližší cíl se trefuje rychleji a s menším počtem chyb.

Kdo Fittsův zákon vytvořil?

Americký psycholog Paul Fitts v roce 1954. Původně pro pohyby ruky, dnes je základem návrhu webů a aplikací.

Jak Fittsův zákon využít na webu?

Dělat hlavní tlačítka velká, s dostatečnými rozestupy a na mobilu je umísťovat do dosahu palce, aby se na ně snadno a rychle klikalo.