Юзабилити аудит сайта: 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. есть ссылки на важные документы: политику конфиденциальности, политику использования файлов cookie;

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

    

    
    

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

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

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

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

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

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

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

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

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

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

А что дальше?

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

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