Теплова карта кліків — як користувачі ведуть себе на сайті

Теплова карта кліків — як користувачі ведуть себе на сайті

Сьогодні у нас в руках безліч інструментів, досліджень і статей по ux/ui і те як сайт будуть читати і ідентифікувати. Але головне питання залишається відкритим. А чи знаєте ви, куди користувачі вашого (або зробленого вами) сайту натискають? Розібратися у цьому питанні допоможе теплова карта кліків.

Поговоримо про кнопки

Всі, напевно, хоч раз чули про те, що у кнопок є мінімальний допустимий розмір, існують якісь захисні поля, і що кнопки повинні бути схожі на кнопки. Але чи так це насправді?

Давайте розбиратися на прикладі.

Для нього "Роби бізнес" взяв клієнтський сайт — 2 кнопки і список посилань. (~600 користувачів, ~2 500 кліків, час охоплення — 1 рік). І проаналізував його за допомогою теплової карти від Яндекс.метрики.

Отриманий результат:

Карта натискань на сайті
Карта натискань на сайті

Елементи:

  1. Гамбургер;
  2. Список посилань;
  3. Підказки;
  4. Кнопка, що з'являється.

Гамбургер

Візуально гамбургер має розміри 32х26 пікселів. Разом із захисними полями область кліка — 40х33 пікселя. Користувач же в основному натискає по області розміром 46х42 пікселя.

А це означає, що не вистачає приблизно по 4px по периметру в конкретно цьому випадку.

Розрахунок:

Тепловая карта кликов — как пользователи ведут себя на сайте Тепловая карта кликов — как пользователи ведут себя на сайте

І за 8px в цілому.

Розрахунок:

Тепловая карта кликов — как пользователи ведут себя на сайте Тепловая карта кликов — как пользователи ведут себя на сайте

Об'єкт, на який клікає користувач
Об'єкт, на який клікає користувач

Висновок: для основних кнопок типу: "гамбургер", "назад", "додому" область кліка повинна бути збільшена щонайменше на 8px з кожної зі сторін. І прагнути до розміру 48х48рх.

Список посилань

Далі йде просто список посилань. Він клікабельний по всій ширині і візуально це показується при наведенні.

Список посилань у меню
Список посилань у меню

Як показує теплова карта кліків, основна щільність натискань припадає на середину середньої довжини слів. ~55px (62%) від лівого краю.

Розрахунок:

Тепловая карта кликов — как пользователи ведут себя на сайте

Тепловая карта кликов — как пользователи ведут себя на сайте

Тепловая карта кликов — как пользователи ведут себя на сайте

Тепловая карта кликов — как пользователи ведут себя на сайте

Якщо враховувати стандартну висоту рядка (normal), то "промах" становить приблизно від 2px до 5px.

Меню сайту на мобільному пристрої

У списку з'являється стрілка (як і на десктопі). І користувачі на "мобілці" наступною дією клацає по ній.

Анімація з вибором елементів меню
Анімація з вибором елементів меню

Кнопка закриття з'являється коли ми вибрали якийсь елемент списку. І характер кліків по ній не відрізняється від самого списку.

Висновок: для текстових списків посилань область кліка повинна бути збільшена на 4px з верхньої і нижньої сторони.

Тепловая карта кликов — как пользователи ведут себя на сайте

Підказки

Блок з підказками знаходиться у правому верхньому куті, зроблений досить непомітним і не реагує на наведення. Але візуально трохи схожий на кнопку.

Карта натискань головного меню
Карта натискань головного меню

Кількість людей, яка натискала на цю "псевдо кнопку" помітно менша від загального числа. І ті, хто натискав і розумів, що нічого не відбувається, просто пішли.

Висновок: якщо ви хочете, щоб на кнопку натиснули, потрібно міняти її стан при наведенні, змінювати курсор або виробляти дію при натисканні.

Кнопка, що з'являється

Кнопка має розмір 200+px x 48px і як видно практично 100% кліків знаходяться всередині, що підтверджує пункт 1.

Теплова карта кліків по кнопці
Теплова карта кліків по кнопці

Основна частина натискань припадає на центр кнопки з невеликим зсувом до центру екрану (~12px)

Висновок: кнопка достатнього розміру близька до центральної частини екрану — профіт.

Теплова карта кліків: Епілог

Так до чого це все? Можна багато читати статті про ux/ui, вивчати патерни сканування і дивитися відео на ютубі. Але краще 1 раз побачити і вивчити метрику, аніж слухати історії. На превеликий жаль, наразі така функція у панелі вебмастера Google недоступна, тож провести подібне дослідження можна лише завдяки інструменту Яндекс Метрики.

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту та натисніть Ctrl+Enter.

Дуже поганоПоганоНормальноДобреВідмінно (1 оцінок, середнє: 5,00 з 5)
Loading...
Like this post? Please share to your friends:
Залишити відповідь

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: