UX / UI Середній вплив Просте 15–30 хв

Читабельність та розмір посилань/кнопок

Клікабельні елементи мають бути читабельними та легко натискатися.

Що це

Посилання й кнопки з дрібним шрифтом гірше читаються й, головне, на сенсорному екрані гірше натискаються пальцем. Це пов'язано з розміром так званого tap-target (області натискання).

Чому це важливо

Малі клікабельні елементи підвищують частоту помилок, користувач замість кліку промахується чи влучає в сусіднє посилання. Це дратує та знижує конверсії. Google рекомендує tap-target щонайменше 48×48 px із відступами.

Як це зробити

1Посиланням та кнопкам дайте читабельний шрифт (ідеально 14px+).
2Забезпечте достатню область натискання (мін. ~44–48 px) через padding, а не лише розмір тексту.
3Між сусідніми клікабельними елементами залиште відступ (напр., 8px+), щоб пальці не перекривалися.
4На мобільному тестуйте великим пальцем, а не мишею.

Приклад

Правильно

.btn, nav a {
  font-size: 1rem;
  padding: 12px 16px;   /* достатня область натискання */
  display: inline-block;
}

Висновок

Клікабельні елементи робіть щедро, читабельний шрифт, достатній padding та відступи. Точний розмір tap-target перевірите лише в браузері, але дрібні клікабельні тексти, чіткий сигнал до виправлення. Менше помилкових кліків = більше конверсій.

Повʼязані теми