Plocha odkazu

Častým nedostatkem na webových stránkách je malá plocha odkazu. Zvlášť problematické je to na dotykových zařízeních s menšími displeji, kdy je problém malý odkaz prstem trefit.

V řadě případů přitom jde plochu odkazu zvětšit prostým využitím prázdného místa.

Menu

Budeme-li mít například následující menu:

Bylo by lepší, kdyby odkazy klikaly po celé šířce, často k tomu stačí jen přidat display: block.

Klikněte zde

Dále nedostatečnou plochou trpí prosté odkazy typu:

Zvětšit klikací plochu jde snadno uvedením výzvy k akci:

Kromě zvětšení plochy je to výhodné i pro uživatele, protože když se při rychlém pročítání stránky zastaví na odkazu jakožto výrazném prvku, rychle pochopí jeho význam (nemusí číst text okolo).

Obzvlášť důležitý odkaz je rozumné ještě zvýraznit odlišným stylem.

Stránkování

Níže uvedené stránkování bude nejspíš velmi nepohodlné.

Šlo by lehce vylepšit přidáním vycpávky (paddingu):

Zrovna v případě stránkování se ale dá celý problém často řešit úplně jinak a lépe:

Příliš velká plocha

Opačným problémem je naopak příliš velká klikací plocha. Uživatelé používající pro ovládání myš si ji potřebují někam odložit – mít kursor v části stránky, která nic nedělá. Hodí se to třeba při přepínání mezi nemaximalisovanými okny nebo pro použití kontextové nabídky.

Typickým (většinou) špatným příkladem je výpis témat v diskusním fóru, kde „klikají“ celé řádky.

Pro uživatele dotykových zařízeních to většinou problém nebývá.

Odstupy od odkazů

Co je naopak zásadní problém některých responsivních webů na dotykových zařízeních je nedostatečný prostor mezi jednotlivými odkazy. V kombinaci s malou plochou to může totálně znemožnit pohodlné trefení se na požadované místo.

Testování

Google při testování stránek, jestli se hodí pro mobilní zařízení, posuzuje jako jednu z věcí i právě velikost a rozestupy mezi odkazy. Úspěšné stránky potom označuje jako „mobile-friendly“.

Mobile-Friendly Test