[UI] Fittsův zákon
Říkal jsem si, že nebude od věci oprášit pár základních pojmů v teoriích kolem uživatelského rozhraní. Pro začátek jsem vybral Fittsův zákon.
Sám jsem měl pro sebe Fittsův zákon zjednodušený zhruba do podoby „čím větší objekt, na který se kliká, tím jednodušší je trefit se na něj”. Ve skutečnosti je to složitější, ale o to užitečnější.
Matematika nuda je, má však cenné údaje
Nebojte, nebude to bolet. Nejdřív postraším vzorečkem:
MT = a + b log2(2A/W)
- MT je průměrný čas pro dokončení pohybu
- A je vzdálenost počátečního místa pohybu do středu cílového objektu (např. tlačítka)
- W zastupuje šířku cíle podél osy pohybu
- a, b jsou empiricky zjišťované konstanty týkající se rychlosti pohybu (podrobněji viz Wikipedia)
Tento vzoreček můžeme interpretovat asi takhle: „Čas potřebný pro dosažení cílového objektu odpovídá logaritmické funkci vzdálenosti a velikosti cíle”
Logaritmická funkce má zajímavé důsledky. Pokud je cílový objekt malý, tak i jeho malé zvětšení povede k výraznému zkrácení potřebného času. Analogicky pro vzdálenost objektu. Typickým příkladem jsou prosté textové odkazy v porovnání s tím, když jim dáme ještě padding a roztáhneme tak aktivní oblast. Myslím, že snadno poznáte, který je který. Zkuste si párkrát přijet z různých míst na oba odkazy. Rozdíl je výrazný.
Tohoto efektu můžeme samozřejmě použít i „opačně” – pro ztížení přístupu k funkcím, které by měl uživatel aktivovat s větší pozorností (typicky mazání).
Všimněte si také, že šířka cíle se počítá podél osy pohybu, takže u pohybu zdola nahoru je to vlastně výška. Pří návrhu tedy musíme myslet i na to, který rozměr se vyplatí zvětšit, což může být samozřejmě mnohdy těžké určit (nějaká pomoc by se našla).
Nekonečné rohy a okraje
Virtuální prostor displejů našich počítačů dává Fittsovu zákonu další zajímavý „rozměr”. Představte si totiž takové tlačítko (nebo jinou aktivní plochu) umístěné na okraji obrazovky. Pokud na něj najíždíme myší, nemusíme se starat o to, jestli ho přejedeme, protože nás zastaví pevný okraj plochy. V tu chvíli má pro nás tlačítko v tomto směru vlastně nekonečnou šířku. Nejvýhodnějším místem jsou tedy rohy displeje, protože ty jsou „nekonečné” ve dvou směrech.
Okno webového prohlížeče tuto tvrdou zarážku sice nenabízí, ale přesto mám takový pocit, že podvědomě začneme brzdit pohyb myši dřív, když najíždíme k okrajům, protože nechceme „vypadnout z okna”.
Nožičky a závěr
Je hezké vidět, kolik složitosti se skrývá za něčím zdánlivě tak triviálním, jako je pohyb a klikání myší, ne? Rozhodně doporučuji, abyste se mrkli na tenhle kvíz, protože ukáže aplikaci Fittsova zákona na řešení praktických problémů. Nějaké připomínky, nápady na jiná témata kolem uživatelského rozhraní, která si zaslouží vypíchnout?
Pekný článok.
K podvedomému spomaľovaniu u rohov u mňa však nedochádza. Radšej to do rohu nejak napálim, a potom pohyb spätne korigujem. To sa mi ale občas vymstieva pri dvoch monitoroch, kde mi kurzor skončí na tom druhom, a musím ho vracať na prvý, čím sa znižuje „produktivita klikania“.
octopuss: Jasný, do rohů monitoru zpomalovat nemusíme, protože tam se myš sama zarazí, proto jsou to taky tak výhodná místa z hlediska Fittsova zákona. S tím podvědomím zpomalováním jsem to myslel jen u ukna prohlížeče a nemám to podpořeno, žádným důkazem, jen takový pocit.
Jinak s těma dvěma (či více) monitorama máš pravdu, rozšiřujeme si tím plochu, ale zase se okrádáme právě o tu výhodu „zarážky na okraji“. Já to mám vyřešeno tak, že menší displej notebooku je pozicovaný malinko níž než větší LCDčko, takže pravý horní a pravý dolní LCDčka jsou stále skutečné rohy, ačkoli je virtuálně vedle nalepený displej notebooku.
Mě zastaví vždy pravý a dolní okraj monitoru. Levý a horní je mi nějaký „nesympatický“ a snažím se k němu nepřibližovat :-D Ani nevím kdy naposledy jsem horní a levý okraj sejmul. Jsem pravák a když kutím webové stránky, tak se vždy snažím nacpat menu a důležité info do pravého strany stránky :-D Zajímavé. Nikdy jsem o tom nepřemýšlel, až teď po přečtení tohoto článku. Paráda.
vyborny clanok len ma este napadlo ze volakde na nete bola stranka s java aplikaciou kde sa to dalo testovat ze sa nahodne zobrazil nejaky obdzlin a ze ako dlho to potrva kliknut
aby ludia videli aky rozdiel to spravi..l bohuzial nepamatam si link… skus pohladat… ;)
someone: Nevím, jestli je to, co myslíš, ale já narazil na tohle demo.
Velice zajímavý článek Honzo, díky :)
Mě by třeba dále zajímalo, ber to prosím jako návod na pokračování UI seriálu, nějaký rozbor, jaký prvek/element kam umístit v závislosti na tom, kam se uživatel nejčastěji dívá. Myslím, že ke znázornění tohoto jevu se používají tzv. heatmaps, nijak zvlášť jsem se tím ale nezabýval, tak to snad moc nepletu.
Skvelý článok! Fitsov zákon som poznal najmä v súvislosti s konetxtovým menu na OS X umiestneným na horný okraj (neviem si to vynachváliť odkedy som switchol), ale nikdy som priamo ho nevužíval v takom zmysle že by som urobil tlačítka v navigácii veľké lebo tak hovorí zákon, ale urobil som to tak lebo som vedel že je to tak správne. Teda podvedome, resp. vedome ale nevedome že ide o tento zákon som sa tým riadil. No v každom prípade teraz sa nad viacej vecami asi zamyslím týmto spôsobom, takže ešte raz ďakujem za pripomenutie a aj za súvisiace odkazy. Mimochodom, teraz ma napadlo, že sa to dá aplikovať aj na oči. Trafiť sa na nejaký objekt pohľadom je tiež dôležité, ešte o tom pouvažujem.
Jan Horna: Hm, zajímavý námět. Píšu si ;)
Výborný článek, díky. Napadl mne jeden konkrétní související postřeh s těmi okraji a rohy obrazovek. Windowsovské tlačítko Start (respektive jeho kulatý následovník ve Vistách) je graficky realizováno tak, že mezi ním a spodním levým rohem obrazovky je odsazení. Až dneska jsem si uvědomil, že se na Start dá klikat i při zajetí úplně do rohu. Dosud jsem se snažil vždycky trefit přesně – tedy nejdřív do rohu a pak se vrátit o těch 10-15 bodů zpátky a pak teprve kliknout. Považuji to za chybu grafické realizace onoho tlačítka, které vizuálně nevyužívá právě té „nekonečnosti“ levého spodního rohu.
Na zkoušení, zda se člověk zarazí o kraj monitoru, je dobré si připojit druhý monitor. Rázem se myš nezarazí a například rozšíření plochy tak, že je druhý monitor pod (u mě nad) panelem (třeba Start), je docela veselé. Nebo spíše je to peklo…
Jinak velmi zajímavý článek. Víc takových. Nejsem na UI odborník ani mě to moc nebere, přesto je to velmi zajímavé.
@Jan Tichý:
Nemyslím že je to chyba grafické realizace, jestli sis rovněž všiml, tak při najetí na aktivní oblast onoho tlačítka (je jedno jestli do rohu, nebo do středu) tlačítko „svítí“, což signalizuje, že se na něj dá kliknout.
Teď se přiznám, že nevím jestli to tak taky funguje ve Vistách, nebo jen Win7. Nemám žádné Visty na vyzkoušení poblíž.
„Matematika nuda je, má však cenné údaje“ není pravda. Statistika nuda je… A nemyslím tím text písničky. MATEMATIKA JE VĚC KOUZELNÁ. Nezávisí na autoritě, názoru, politické situaci… A poslední dobou jsem zjistil, že i statistika může nabízet zajímavé pohledy – a to jsem se díval jen na Wikipedii.
Opera 11 má taby kousek pod okrajem obrazovky, takže je člověk přejede… Matematici používají Chrome.