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

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

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

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

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

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

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

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

• Во время разработки нового сайта. Чтобы он был сделан для людей, а не ради галочки.
• Если на сайт вносятся какие-то изменения. Даже небольшие правки могут повлиять на уровень юзабилити.
• Если вы заметили снижение уровня конверсии или рост процента отказов. Эти показатели напрямую зависят от юзабилити.
• Если сайт уже несколько лет работает, а вы ни разу не вносили туда серьезных изменений. Однажды ваш ресурс может просто устареть и конверсия начнет снижаться, а вы будете гадать в чем причина.

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

1. Яндекс.Метрика и Google Analytics. Самые базовые инструменты, которые помогают отслеживать поведение пользователей на сайте. С их помощью можно провести анализ юзабилити бесплатно. Как? Например, в Метрике есть такие инструменты:
   • Вебвизор. Создает видео, на котором можно посмотреть, как пользователь перемещает курсор по экрану, заполняет формы, выделяет какие-то элементы и кликает на них;
   • Карта кликов. На ней подсвечены области, куда чаще всего кликают пользователи;
   • Карта скроллинга. Видно как далеко средний пользователь прокручивает страницу сайта или лендинг и как долго зависает на одном участке.

     

2. UsabilityHub. Сервис полезен тем, что можно протестировать сайт перед тем, как делать его релиз. Тестированием занимаются коллеги из диджитал-сферы: разработчики, дизайнеры, аналитики и так далее. Можно получить тепловую карту кликов, протестировать навигацию, попросить проголосовать за один из вариантов дизайна и так далее.
3. TestoGraf. Сервис, где можно создавать опросы для пользователей вашего ресурса. Его плюс в том, что в нем уже есть готовые шаблоны для оценки юзабилити сайтов и ПО.
4. Feng-GUI. Сервис дает возможность загрузить скриншот страницы сайта и анализирует его, имитируя взгляд пользователя. На выходе вы получаете карту, которая показывает, как перемещается взгляд человека, и какие области привлекают внимание больше всего.
5. 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. Подвал (футер) сайта:
    • есть иконки социальных сетей. Это повышает привлекательность сайта для поисковиков и приводит новых подписчиков;
    • есть контакты компании. Это может быть телефон, адрес, почта, мессенджеры и размещение офиса компании на карте;
    • добавлена кнопка “наверх”. Пользователь должен иметь возможность быстро оказаться вверху страницы. не заставляйте его долго скроллить обратно;
    • есть карта ресурса. Если на сайте много разделов, есть смысл добавить вниз самые популярные из них, чтобы человек легко мог туда перейти;
    • есть ссылки на важные документы: политику конфиденциальности, политику использования файлов cookie;
    • есть раздел с помощью или самыми частыми вопросами.

      

13. Общее удобство сайта:
    • скорость загрузки сайта не больше трех секунд. Исследования говорят о том, что это оптимальное время загрузки, которое пользователи готовы ждать;
    • на сайте отсутствуют битые ссылки;
    • со страницы 404 есть возможность перейти на главную или любую другую страницу сайта. Ошибка 404 возникает, когда пользователь пытается перейти на несуществующую страницу сайта. Например, у вас закончилась какая-то акция, но рекламу с ней выключить забыли. Люди кликают по рекламе, а им выдает ошибку, ведь эту страницу с сайта уже удалили. Если не дать человеку возможность перейти в другой раздел, он просто уйдет;
    • сайт адаптирован под мобильные устройства. То есть вся страница полностью помещается в экран и отсутствует горизонтальная прокрутка;
    • дизайн сайта не мешает взаимодействию с ним и отвечает современным тенденциям;
    • у сайта есть уникальный фавикон. Это значок, который помогает выделить вкладку с вашим сайтом среди других. Часто в качестве фавикона используется логотип компании;
    • есть SSL-сертификат. Он обеспечивает безопасность связи между пользователем и сервером. То есть гарантирует, что никакие данные не будут перехвачены посередине. Сайты, без этого сертификата хуже ранжируются в поисковых системах
    • для регистрации на сайте не требуется заполнять длинную форму. В среднем достаточно 2-4 строки. Также можно добавить авторизацию с помощью социальных сетей;
    • курсор-стрелка при наведении на кликабельный элемент меняется (чаще всего он становится рукой).

А что дальше?

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

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