Сьогодні у нас в руках безліч інструментів, досліджень і статей по ux/ui і те як сайт будуть читати і ідентифікувати. Але головне питання залишається відкритим. А чи знаєте ви, куди користувачі вашого (або зробленого вами) сайту натискають? Розібратися у цьому питанні допоможе теплова карта кліків.
Поговоримо про кнопки
Всі, напевно, хоч раз чули про те, що у кнопок є мінімальний допустимий розмір, існують якісь захисні поля, і що кнопки повинні бути схожі на кнопки. Але чи так це насправді?
Давайте розбиратися на прикладі.
Для нього “Роби бізнес” взяв клієнтський сайт — 2 кнопки і список посилань. (~600 користувачів, ~2 500 кліків, час охоплення — 1 рік). І проаналізував його за допомогою теплової карти від Яндекс.метрики.
Отриманий результат:
Елементи:
- Гамбургер;
- Список посилань;
- Підказки;
- Кнопка, що з’являється.
Гамбургер
Візуально гамбургер має розміри 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 недоступна, тож провести подібне дослідження можна лише завдяки інструменту Яндекс Метрики.
