CSS
JavaScript
HTML
Usability
Graphic design
July 16

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

Сегодня у нас в руках множество инструментов, исследований и статей по ux/ui и том как сайт будут читать и идентифицировать.


Но главный вопрос остаётся открытым.


А знаете ли именно вы, куда пользователи вашего (или сделанного вами) сайта тыкают?



Сегодня поговорим о кнопках


Все, наверное, хоть раз слышали о том, что у кнопок есть минимальный допустимый размер, существуют какие то защитные поля, и что кнопки должны быть похожи на кнопки.
Но так ли это на самом деле?


Давайте разбираться на примере


Для него я взял свой сайт — 2 кнопки и список ссылок. (~600 пользователей, ~2 500 кликов, временной охват — 1 год). И проанализировал его при помощи тепловой карты от Яндекс.метрики.


Полученый результат

image


Элементы:
1. Гамбургер
2. Список ссылок
3. Подсказки
4. Появляющаяся кнопка



Гамбургер


Визуально гамбургер имеет размеры 32х26 пикселей. Вместе с защитными полями область клика — 40х33 пикселя. Пользователь же в основном нажимает по области размером 46х42 пикселя.


А это значит, что не хватает приблизительно по 4px по периметру в моём случае.


Расчёт

$(46-40)/2=3(px);$ $(42-33)/2=4.5(px);$


И по 8px в целом.


Расчёт

$(46-32)/2=7(px);$ $(42-26)/2=8(px);$


Тепловая карта гамбургера




Вывод: для основных кнопок типа: "гамбургер", "назад", "домой" область клика должна быть увеличена минимум на 8px с каждой из сторон. И стремиться к размеру 48х48px.





Список ссылок


image alt

Далее идёт просто список ссылок. Он кликабелен по всей ширине и визуально это показывается при наведении.


Горизонтально
Как видно по тепловой карте, основная плотность кликов приходится на середину средней длины слов. ~55px (62%) от левого края.


Расчёт

$ 111,2=(108+186+83+132+170+113+ $
$ +69+105+62+84)/10 $
$ 108,0=(108+83+132+170+113+69+ $
$ +105+84)/8 $
$ 104,1=(108+83+132+113+105+84)/6 $
$ 108/100*57=61,56 $


Вертикально
Если учитывать стандартную высоту строки (normal), то "промах" составляет примерно от 2px до 5px.


Мобилка
В списке появляется стрелочка (как и на десктопе). И пользователи на мобилном устройстве следующим действием кликают по ней.


Анимация

Закрытие
Кнопка закрытия появляется когда мы выбрали какой-то элемент списка. И характер кликов по ней не отличается от самого списка.




Вывод: Для списков текстовых ссылок область клика должна быть увеличена на 4px с верхней и нижней стороны.






Подсказки


image alt

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


Активность
Кол-во людей кликнувших на эту "псевдо кнопку" заметно меньше от общего числа.
И те, кто кликнул и понял, что ничего не происходит, просто ушли. (это заметно что активность заканчивается только на первой кнопке)




Вывод: Если вы хотите, чтобы на кнопку нажали, нужно менять её состояние при наведении, менять курсор или производить действие при нажатии.





Появляющаяся кнопка


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



Основная часть кликов приходится в центр кнопки с небольшим смещением к центру экрана (~12px)




Вывод: Кнопка достаточного размера близкая к центральной части экрана — профит.




Эпилог


Так к чему я это всё? Можно много читать статей про ux/ui, изучать патерны сканирования контента пользователем и смотреть видео на ютубе.
Но лучше 1 раз увидеть изучить метрику, чем слушать истории.


Подключайте метрики и делитесь своими результатами :)


+8
3.9k 45
Comments 9
Top of the day