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

    Сегодня у нас в руках множество инструментов, исследований и статей по 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 раз увидеть изучить метрику, чем слушать истории.


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

    Поделиться публикацией

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 9

      0
      А это законно собирать тепловую карту с компьютеров пользователей?
      Можно как-то защититься от отправки данных о передвижении курсора, кликов с точностью до пикселя, передачи аудио- и видео- изображения, захвата экрана и т.д.?
        0
        да, инфа же анонимная)
        0
        Давайте проведём исследование: в какую часть тарелки наши пользователи попадают вилкой при поедании утреннего омлета? Неожиданный вывод! В большинстве случаев это как раз та часть тарелки, где есть омлет, где его больше всего.
          +2
          На самом деле, тепловая карта очень помогает при поиске неочевидных сценариев поведения пользователя на сайте. Я таким образом узнал, что в большинстве своем люди не нажимают на указанный в виде ссылки номер телефона в мобильной версии сайта, а вводят его ручками в звонилку, что стало большим открытием для меня. Поэтому на мобилках стал использовать кнопку с надписью «Позвонить нам».
            0
            Вот эта информация уже более полезная.
          0
          А нет ли тут обратной корреляции? Величина теплового пятна зависит от величины кнопки (а не наоборот). Соответветственно увеличивая кнопку — увеличивается пятно и чтобы под него подстроится надо снова увеличивать кнопку (и так по рекурсии). Пока не приходим к последнему кейсу — кнопка настолько большая что пятно проваливается целиком в нее.
          Но нет метрики что кнопка слишком большая ибо пользователь если может жать на край кнопки — он будет туда нажимать.
            0

            Ну на примере с большей кнопкой такой тенденции не видно)) так что я думаю есть переходный размер

            –1
            Еще нужно смотреть как Яндекс Метрика пишет клики с разных расширений. Вот тут, есть анализ и сравнение карт кликов www.plerdy.com/ru/blog/plerdy-yandex-metrica-hotjar-comparison
              0
              Вывод: Для списков текстовых ссылок область клика должна быть увеличена на 4px с верхней и нижней стороны.
              У вас на сайте действительно маленькие области клика. Меню (список) вообще печалька в этом плане. От margin-bottom в 15px часть надо перекинуть на padding.

              Но я даже немного не об этом хотел сказать. Тут и в других местах вы делаете выводы, основываясь на личной интерпретации полученных результатов одиночного теста. Я бы рассуждал иначе — «Вывод: делаю такие-то изменения на странице, провожу новый тест (желательно A/B, чтоб на однородной аудитории), сравниваю полученные результаты, и делаю правильный вывод (правда иногда до окончательного правильного вывода может потребоваться провести еще с десяток дополнительных тестов)».

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

              Самое читаемое