Návrh UX: Fittsův zákon – pro určení optimální velikosti a polohy prvků na webu

Článek pro začínající designéry, výzkumníky a analytiky UX/UI. Tento zákon pomáhá určit optimální velikost a umístění prvků na webu, aby se zjednodušila a urychlila interakce uživatelů s nimi.

Americký psycholog Paul Morris Fitts, který pracoval na Ohio State University, provedl v roce 1954 experiment popisující pohyb osoby při dosažení cíle v dvourozměrném prostoru.

Podstata experimentu byla následující: na desce jsou dva citlivé pruhy – terče (černé pruhy, na obrázku níže). Když se některého z těchto proužků dotkne speciální stylus (analogický s moderním stylusem), zaznamená se „zasažení cíle“.

Úkol subjektu: co nejrychleji se střídavě dotkněte nejdříve pera, poté druhého pruhu. V tomto případě se vzdálenost mezi pruhy a šířkou každého z nich pravidelně měnila.

Sledováním času dotyků odvodil Fitts vztah: čím větší je vzdálenost od jednoho cíle k druhému a čím menší je samotný cíl, tím déle to trvá. Naopak, čím menší je vzdálenost od jednoho cíle k druhému a čím větší je velikost cíle, tím méně času trvá, než jej dosáhnete. Toto je Fittsův zákon.

Všechno se zdá být logické, u velkého cíle můžete snadněji mířit a rychleji zasáhnout. Ale je tu zajímavý detail: až do určitého bodu, i malé zvětšení velikosti vede k výraznému zkrácení času. Ale po určité fázi nemá zvýšení cíle prakticky žádný vliv na rychlost jeho dosažení.

Tyto závěry jsou vysvětleny logaritmickou závislostí mezi proměnnými. Pro přehlednost je obrázek níže grafem funkce, která popisuje vztah mezi velikostí cíle a časem potřebným k dosažení cíle v konstantní vzdálenosti. Například zvětšení velikosti z 0,5 na 1 zkracuje čas z 0,45 na 0,3, tj. asi o 30% (vlevo na obrázku).

Čím více se ale velikost zvětšuje, tím kratší je čas na dosažení cíle. Vezměte prosím na vědomí, že když zvětšíte velikost z 8 na 10, čas do dosažení se téměř nezmění (vpravo na obrázku). Jednoduše řečeno, je vhodné zvětšovat a přibližovat důležité objekty v rozhraní, ale neměli byste je zvětšovat, protože to nepřinese významné zlepšení.

Oznámení ve vc. en Zakázat reklamy Nová volná místa ve specializovaném SMM vc.ru na dálku Backendový vývojář (PHP) Vzdáleně šéfredaktor komerčního vydání vc.ru, TJournal a D… Vzdáleně

Matematicky je zákon napsán jako:

Kde:

  • T je průměrná doba strávená akcí.
  • a je průměrná doba spuštění/zastavení pohybu.
  • b – hodnota v závislosti na typické rychlosti pohybu.
  • D – vzdálenost od počátečního bodu ke středu cíle.
  • W – šířkové cíle měřené podél osy pohybu.

Aplikování Fittova zákona na design webových stránek

Podobně platí Fittsův zákon i na design webových stránek nebo rozhraní. Například: čím dále je tlačítko (od posledního kliknutí myší) a čím menší je jeho velikost, tím déle trvá, než na něj uživatel klikne.

Rovněž lze použít Fittsův zákon k záměrnému zkomplikování cesty uživatele, například zmenšením tlačítka „Odstranit“ bude méně pravděpodobné, že na něj uživatelé omylem kliknou. Místo tlačítka může být na stránce jakýkoli jiný objekt nebo cíl.

V některých případech je potřeba zvětšit jeden z prvků může být v rozporu s celkovým designem stránky. V takových případech stačí zvětšit nejen samotný objekt, ale pouze lisovanou oblast.

Například na webu M.Video (obrázek níže) je oblast kliknutí v sekci „Přihlášení“ (zobrazena červeně tečkovaným čtvercem) dvakrát větší než ikona s malým mužem a podpisem „Přihlášení“ . Klikatelná oblast je tedy větší, díky čemuž je kliknutí na ni rychlejší a pohodlnější (zejména na mobilních zařízeních). Design webu však neutrpěl.

Tento přístup je použitelný nejen pro tlačítka. Níže je uveden další příklad zvětšení oblasti zásahu, nikoli samotného objektu. V tomto případě se jedná o položky textové nabídky v katalogu Ozon marketplace. Zde je klikatelná oblast větší než viditelný textový název samotné sekce adresáře.

Výstup

Při navrhování a navrhování stránek pamatujte na Fittsův zákon. Pokud je to možné, zmenšete vzdálenost k důležitým cílům a zvětšete velikost samotných cílů (ale nezvětšujte je příliš). Aby bylo zajištěno, že tento přístup nebude v rozporu s designem jiných prvků na stránce, použijte kliknutelnou oblast prvku větší, než je viditelná.

Tento článek velmi stručně pojednává pouze o jednom zákonu pro zlepšení uživatelská zkušenost. Pokud se chcete dozvědět více o designu UX na základě psychologie a výzkumu UX, pak jsme speciálně pro vás sestavili elektronickou učebnici Konverze na steroidech, která obsahuje mnoho podobných bodů růstu konverze.

#ux

Máte zájem o podobný design?

Další práce

Objednávka designu

Naše portfolio obsahuje stovky projektů: interiérový design, webové stránky, reklamní kampaně, loga, corporate identity. Každý úkol řešíme smysluplně, elegantně a krásně.

Abychom mohli začít, musíme si promluvit. Stačí něco říct o vašem projektu, nechat kontakty a my Vás budeme kontaktovat, abychom vše probrali.