Бесплатно по РФ 8 800 100-05-17
Москва 8 499 301-01-92
  • Telegram
  • WhatsApp

Юзабилити аудит сайта: 60+ пунктов для проверки

Содержание статьи:

Сайтов в интернете с каждым днем становится все больше и больше. Что это значит для их владельцев? А то, что у пользователей появляется больше выбора. А значит, они не будут мириться с неразборчивым шрифтом, закрывать глаза на странный формат поиска и тратить час, чтобы понять, где посмотреть стоимость доставки. 

Мы приготовили чек-лист из более, чем 60-ти пунктов, который поможет проверить сайт на дружелюбность к пользователю. А еще собрали инструменты, которые помогут провести проверку юзабилити сайта онлайн. Дальше дело за вами: внедрять изменения или плыть по течению и надеяться, что какой-то случайный пользователь не пожалеет времени на то, чтобы разобраться в хитросплетениях вашего сайта.

Что такое юзабилити аудит сайта?

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

Если не проводить ее регулярно, вы не будете понимать, почему вдруг снизился уровень конверсии или вырос процент отказов. Представьте ситуацию: вы сделали на сайте обновление и дизайнеру показалось хорошей идеей немного по-новому обыграть строку поиска. Теперь многие пользователи сайта вообще не могут ее найти, тратят время, а потом просто уходят к конкурентам. 


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

В каких ситуациях важно проводить анализ юзабилити сайта?

  • во время разработки нового сайта. Чтобы он был сделан для людей, а не ради галочки;

  • если на сайт вносятся какие-то изменения. Даже небольшие правки могут повлиять на уровень юзабилити;

  • если вы заметили снижение уровня конверсии или рост процента отказов. Эти показатели напрямую зависят от юзабилити;

  • если сайт уже несколько лет работает, а вы ни разу не вносили туда серьезных изменений. Однажды ваш ресурс может просто устареть и конверсия начнет снижаться, а вы будете гадать в чем причина.

Сервисы, которые помогут провести анализ юзабилити сайта онлайн

  • Яндекс.Метрика и Google Analytics

Самые базовые инструменты, которые помогают отслеживать поведение пользователей на сайте. С их помощью можно провести анализ юзабилити бесплатно. Как? Например, в Метрике есть такие инструменты:

  • Вебвизор. Создает видео, на котором можно посмотреть, как пользователь перемещает курсор по экрану, заполняет формы, выделяет какие-то элементы и кликает на них;

  • Карта кликов. На ней подсвечены области, куда чаще всего кликают пользователи;

  • Карта скроллинга. Видно как далеко средний пользователь прокручивает страницу сайта или лендинг и как долго зависает на одном участке;


  • UsabilityHub.

Сервис полезен тем, что можно протестировать сайт перед тем, как делать его релиз. Тестированием занимаются коллеги из диджитал-сферы: разработчики, дизайнеры, аналитики и так далее. Можно получить тепловую карту кликов, протестировать навигацию, попросить проголосовать за один из вариантов дизайна и так далее.

  • TestoGraf

Сервис, где можно создавать опросы для пользователей вашего ресурса. Его плюс в том, что в нем уже есть готовые шаблоны для оценки юзабилити сайтов и ПО. 

  • Feng-GUI

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

  • PageSpeed Insights от Google

Помогает измерить скорость загрузки сайта с ПК и мобильных устройств. Дает небольшие советы по оптимизации.

Проверка юзабилити сайта: подробная структура

Бесплатный аудит юзабилити сайта вполне реально провести самостоятельно. Он должен строиться на проверке всех основных элементов. При этом проверять надо и мобильную версию, и ПК.

Какие объекты должны входить в аудит?

  1. шапка сайта. Она должна сразу давать понять куда человек попал;

  2. меню. Должно быть понятным, неперегруженным и удобным;

  3. главная страница. Часто это первое, что видит человек, попадая на ваш сайт;

  4. контент. Все текстовые и графические элементы сайта;

  5. всплывающие окна. Это все формы для заполнения и баннеры с информацией о скидках и акциях. Они могут всплывать по клику или автоматически;

  6. раздел с категориями товаров. Здесь собраны все товары в одной категории. Последовательность товаров и их количество можно фильтровать;

  7. карточки товаров. Это страницы со всей нужной информацией о товаре;

  8. корзина. Один из главных разделов в интернет-магазине, который помогает завершить покупку;

  9. футер сайта (или подвал). Самый низ любой страницы сайта;

  10. общее удобство сайта. Помимо отдельных разделов, есть и общие моменты, которые помогают пользователям комфортно пользоваться сайтом.

Чек-лист юзабилити сайта

А теперь пройдемся по основным пунктам, которые нужно обязательно проверить во время юзабилити аудита. 


    Шапка

  1. в шапке есть кликабельный логотип компании. При клике он с любой страницы переводит на главную;

  2. есть контакты вашей компании;

  3. телефон компании кликабельный. Особенно это важно для мобильной версии ресурса. Никому не захочется вводить ваш телефон вручную;

  4. есть раздел личного кабинета (если он нужен на вашем сайте).


  5. Главное меню и навигация

  6. меню расположено в шапке или сразу же внизу под ней;

  7. в меню используются понятные пользователям названия. Лишний креатив тут не приветствуется;

  8. при наведении курсора выбранный пункт меню подсвечивается/подчеркивается/выделяется жирным;

  9. пунктов в меню не слишком много. Стандартные рекомендации — не больше пяти;

  10. хлебные крошки кликабельны. Хлебные крошки — это элемент навигации, который подсказывает пользователю в каком разделе он сейчас находится и как ему вернуться назад. Особенно они актуальны для сайтов со сложной структурой и интернет-магазинов, где много разделов;

  11. на всех страницах есть ссылки на другие. Ни одна не должна вести в тупик ;

  12. нет пустых разделов.


    Главная страница

  13. пользователь с первого взгляда может понять, чем занимается компания. Тут действует правило трех секунд: если за три секунды человек не понял, кто вы и чем занимаетесь — сайт плохо выполняет свою функцию;

  14. есть строка поиска (особенно актуально для интернет-магазинов, где много товаров);

  15. настроен умный поиск. Даже если человек совершил ошибку в слове, система все равно поймет, что он хотел найти. А еще, по мере набора букв, поиск сразу должен предлагать пользователю подходящие варианты;

  16. на странице используется минимальное количество анимации. Иначе время загрузки сайта может увеличиваться.


    Контент

  17. текст на сайте читабельный: он нормального размера, на контрастном фоне, написан понятным шрифтом и разделен на абзацы;

  18. в тексте нет орфографических ошибок;

  19. на сайте есть иллюстрации, фотографии, видео;

  20. контент адаптирован для людей с ограниченными возможностями;

  21. все кнопки должны быть оптимального размера и контрастными по отношению к фону. Кликабельной должна быть не только надпись, но и все пространство кнопки;

  22. все контакты должны быть представлены в виде текста, а не картинки. Так пользователю будет легко их скопировать.

    Всплывающие окна

  23. окно можно легко закрыть. Кнопка закрытия находится в привычном месте и ее легко заметить;

  24. автоматические всплывающие окна не открываются слишком часто. Оптимально, когда поп-апы вылетают не больше трех раз за одно посещение сайта;

  25. при заполнении формы и отправке данных система реагирует на действия человека. Например, это может быть текст вроде “Вы успешно подписались на рассылку”.


    Раздел с категориями товаров

  26. возможность сортировки. Главные опции: по цене, по популярности, по бренду, по рейтингу, по наличию;

  27. есть фильтры. Они помогают оставить только те товары, которые удовлетворяют определенным критериям;

  28. пользователь видит, какие фильтры включены сейчас и может легко отменить их по одному.


    Карточки товаров

  29. есть несколько изображений товара со всех сторон. Их можно приблизить;

  30. цена расположена на видном месте и легко читаема;

  31. кнопка “Купить” контрастно выделена на общем фоне;

  32. кнопка “Купить” меняет цвет или надпись, если товар уже в корзине;

  33. в карточке есть подробное описание товара;

  34. характеристики во всех товарах приведены к одному виду. То есть, если диагональ одного телевизора указана в дюймах, то и у другого должно быть то же самое. Так пользователю будет проще сравнивать товары между собой;

  35. если в описании указаны непонятные термины, при наведении на них курсора всплывает подсказка;

  36. есть кнопка быстрой покупки. Она пригодится, если пользователь не хочет добавлять товар в корзину и сам заполнять форму. Человек должен иметь возможность просто оставить вам заявку. А потом оператор связывается с ним и уточняет всю нужную информацию по телефону. Так ваш сайт сможет подстроиться под разные типы клиентов; 

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

    Корзина

  38. кнопка, по которой можно перейти в корзину, находится в шапке сайта и “гуляет” за пользователем по всем страницам;

  39. значок корзины в шапке меняется, если в ней уже что-то лежит;

  40. человек легко может удалить товар или изменить его количество;

  41. видно цену каждого товара и конечную сумму;

  42. отображается стоимость доставки;

  43. товары в корзине кликабельны. Человек должен иметь возможность вернуться в карточку товара, чтобы проверить правильный ли выбор он сделал;

  44. пользователь может вернуться на шаг (или несколько) назад и не потерять то, что он уже заполнил;

  45. для оформления заказа нужны только самые важные данные. Форма не перегружена ненужными полями;

  46. обязательные для заполнения поля помечены специальным значком (обычно это звездочка);

  47. поля проверяются на правильность ввода данных. То есть, если человек ввел адрес своей почты без значка @, система должна его предупредить;

  48. кнопка для очистки корзины не должна быть слишком близко к другим важным кнопкам типа “оформить заказ”. Иначе пользователь может случайно нажать не туда;

  49. после оформления заказа пользователь видит страницу благодарности. Человек должен понимать, что магазин получил его заказ и скоро начнется сборка.


    Подвал (футер) сайта

  50. есть иконки социальных сетей. Это повышает привлекательность сайта для поисковиков и приводит новых подписчиков;

  51. есть контакты компании. Это может быть телефон, адрес, почта, мессенджеры и размещение офиса компании на карте;

  52. добавлена кнопка “наверх”. Пользователь должен иметь возможность быстро оказаться вверху страницы. не заставляйте его долго скроллить обратно;

  53. есть карта ресурса. Если на сайте много разделов, есть смысл добавить вниз самые популярные из них, чтобы человек легко мог туда перейти;

  54. есть ссылки на важные документы: политику конфиденциальности, политику использования файлов cookie;

  55. есть раздел с помощью или самыми частыми вопросами.


    Общее удобство сайта

  56. скорость загрузки сайта не больше трех секунд. Исследования говорят о том, что это оптимальное время загрузки, которое пользователи готовы ждать;

  57. на сайте отсутствуют битые ссылки;

  58. со страницы 404 есть возможность перейти на главную или любую другую страницу сайта. Ошибка 404 возникает, когда пользователь пытается перейти на несуществующую страницу сайта. Например, у вас закончилась какая-то акция, но рекламу с ней выключить забыли. Люди кликают по рекламе, а им выдает ошибку, ведь эту страницу с сайта уже удалили. Если не дать человеку возможность перейти в другой раздел, он просто уйдет;

  59. сайт адаптирован под мобильные устройства. То есть вся страница полностью помещается в экран и отсутствует горизонтальная прокрутка;

  60. дизайн сайта не мешает взаимодействию с ним и отвечает современным тенденциям;

  61. у сайта есть уникальный фавикон. Это значок, который помогает выделить вкладку с вашим сайтом среди других. Часто в качестве фавикона используется логотип компании;

  62. есть SSL-сертификат. Он обеспечивает безопасность связи между пользователем и сервером. То есть гарантирует, что никакие данные не будут перехвачены посередине. Сайты, без этого сертификата хуже ранжируются в поисковых системах;

  63. для регистрации на сайте не требуется заполнять длинную форму. В среднем достаточно 2-4 строки. Также можно добавить авторизацию с помощью социальных сетей;

  64. курсор-стрелка при наведении на кликабельный элемент меняется (чаще всего он становится рукой).

А что дальше?

После того, как вы проверили сайт, важно подготовить план по улучшению ситуации. Ведь если просто провести аудит, а потом оставить все так как есть, получится, что вы просто впустую потратили время. 

Все внесенные изменения также надо протестировать. Первое время лучше постоянно наблюдать за поведением пользователей на сайте: не пытаются ли они нажать туда, где нет кнопки, не зависают ли в поисках какого-то раздела, не упала ли конверсия и т.д. Если изменения облегчат пользователям жизнь, и с вашим сайтом станет проще и приятнее взаимодействовать, рост поведенческих факторов ранжирования не заставит себя ждать. А там подтянутся и позиции в поисковиках, и конверсия, и прибыль.


Наши услуги по теме:
Продвижение сайта
на лидирующие позиции в поиске
Рекомендуем прочитать
Яндекс.Метрика и Google Analytics — минимальный джентльменский набор для веб-аналитики. Разбираемся, какую информацию они собирают и как её анализировать.
Скорость загрузки сайта может влиять на эффективность SEO-продвижения, рекламы и других инструментов. Как оценить скорость сайта? Когда пользователи всё-таки готовы подождать?
Как сделать так, чтобы сайт в результатах выдачи увидело максимальное количество людей? Один из рабочих вариантов — улучшить поведенческие показатели.
Понятно даже не специалистам! Что такое SEO-копирайтинг, какие 5 задач он решает и что нужно помнить, чтобы ваши SEO-тексты не принесли сайту вреда.
Подпишитесь на полезный контент
Есть интересный проект?
Давайте его обсудим!
Обсуждения
Полезное видео каждую неделю. Подписывайся!
Вернуться к оглавлению