Юзабилити аудит сайта: 60+ пунктов для проверки
Сайтов в интернете с каждым днем становится все больше и больше. Что это значит для их владельцев? А то, что у пользователей появляется больше выбора. А значит, они не будут мириться с неразборчивым шрифтом, закрывать глаза на странный формат поиска и тратить час, чтобы понять, где посмотреть стоимость доставки.
Мы приготовили чек-лист из более, чем 60-ти пунктов, который поможет проверить сайт на дружелюбность к пользователю. А еще собрали инструменты, которые помогут провести проверку юзабилити сайта онлайн. Дальше дело за вами: внедрять изменения или плыть по течению и надеяться, что какой-то случайный пользователь не пожалеет времени на то, чтобы разобраться в хитросплетениях вашего сайта.
Что такое юзабилити аудит сайта?
Юзабилити аудит — это проверка сайта на простоту и удобство использования.
Если не проводить ее регулярно, вы не будете понимать, почему вдруг снизился уровень конверсии или вырос процент отказов. Представьте ситуацию: вы сделали на сайте обновление и дизайнеру показалось хорошей идеей немного по-новому обыграть строку поиска. Теперь многие пользователи сайта вообще не могут ее найти, тратят время, а потом просто уходят к конкурентам.
Чтобы таких ситуаций не происходило, важно проводить тестирование и постоянно следить за поведением пользователей на сайте.
В каких ситуациях важно проводить анализ юзабилити сайта?
-
во время разработки нового сайта. Чтобы он был сделан для людей, а не ради галочки;
-
если на сайт вносятся какие-то изменения. Даже небольшие правки могут повлиять на уровень юзабилити;
-
если вы заметили снижение уровня конверсии или рост процента отказов. Эти показатели напрямую зависят от юзабилити;
-
если сайт уже несколько лет работает, а вы ни разу не вносили туда серьезных изменений. Однажды ваш ресурс может просто устареть и конверсия начнет снижаться, а вы будете гадать в чем причина.
Сервисы, которые помогут провести анализ юзабилити сайта онлайн
-
Яндекс.Метрика и Google Analytics
Самые базовые инструменты, которые помогают отслеживать поведение пользователей на сайте. С их помощью можно провести анализ юзабилити бесплатно. Как? Например, в Метрике есть такие инструменты:
-
Вебвизор. Создает видео, на котором можно посмотреть, как пользователь перемещает курсор по экрану, заполняет формы, выделяет какие-то элементы и кликает на них;
-
Карта кликов. На ней подсвечены области, куда чаще всего кликают пользователи;
-
Карта скроллинга. Видно как далеко средний пользователь прокручивает страницу сайта или лендинг и как долго зависает на одном участке;
-
UsabilityHub.
Сервис полезен тем, что можно протестировать сайт перед тем, как делать его релиз. Тестированием занимаются коллеги из диджитал-сферы: разработчики, дизайнеры, аналитики и так далее. Можно получить тепловую карту кликов, протестировать навигацию, попросить проголосовать за один из вариантов дизайна и так далее.
-
TestoGraf
Сервис, где можно создавать опросы для пользователей вашего ресурса. Его плюс в том, что в нем уже есть готовые шаблоны для оценки юзабилити сайтов и ПО.
-
Feng-GUI
Сервис дает возможность загрузить скриншот страницы сайта и анализирует его, имитируя взгляд пользователя. На выходе вы получаете карту, которая показывает, как перемещается взгляд человека, и какие области привлекают внимание больше всего.
-
PageSpeed Insights от Google
Помогает измерить скорость загрузки сайта с ПК и мобильных устройств. Дает небольшие советы по оптимизации.
Проверка юзабилити сайта: подробная структура
Бесплатный аудит юзабилити сайта вполне реально провести самостоятельно. Он должен строиться на проверке всех основных элементов. При этом проверять надо и мобильную версию, и ПК.
Какие объекты должны входить в аудит?
-
шапка сайта. Она должна сразу давать понять куда человек попал;
-
меню. Должно быть понятным, неперегруженным и удобным;
-
главная страница. Часто это первое, что видит человек, попадая на ваш сайт;
-
контент. Все текстовые и графические элементы сайта;
-
всплывающие окна. Это все формы для заполнения и баннеры с информацией о скидках и акциях. Они могут всплывать по клику или автоматически;
-
раздел с категориями товаров. Здесь собраны все товары в одной категории. Последовательность товаров и их количество можно фильтровать;
-
карточки товаров. Это страницы со всей нужной информацией о товаре;
-
корзина. Один из главных разделов в интернет-магазине, который помогает завершить покупку;
-
футер сайта (или подвал). Самый низ любой страницы сайта;
-
общее удобство сайта. Помимо отдельных разделов, есть и общие моменты, которые помогают пользователям комфортно пользоваться сайтом.
Чек-лист юзабилити сайта
А теперь пройдемся по основным пунктам, которые нужно обязательно проверить во время юзабилити аудита.
-
в шапке есть кликабельный логотип компании. При клике он с любой страницы переводит на главную;
-
есть контакты вашей компании;
-
телефон компании кликабельный. Особенно это важно для мобильной версии ресурса. Никому не захочется вводить ваш телефон вручную;
-
есть раздел личного кабинета (если он нужен на вашем сайте).
-
меню расположено в шапке или сразу же внизу под ней;
-
в меню используются понятные пользователям названия. Лишний креатив тут не приветствуется;
-
при наведении курсора выбранный пункт меню подсвечивается/подчеркивается/выделяется жирным;
-
пунктов в меню не слишком много. Стандартные рекомендации — не больше пяти;
-
хлебные крошки кликабельны. Хлебные крошки — это элемент навигации, который подсказывает пользователю в каком разделе он сейчас находится и как ему вернуться назад. Особенно они актуальны для сайтов со сложной структурой и интернет-магазинов, где много разделов;
-
на всех страницах есть ссылки на другие. Ни одна не должна вести в тупик ;
-
нет пустых разделов.
Главная страница
-
пользователь с первого взгляда может понять, чем занимается компания. Тут действует правило трех секунд: если за три секунды человек не понял, кто вы и чем занимаетесь — сайт плохо выполняет свою функцию;
-
есть строка поиска (особенно актуально для интернет-магазинов, где много товаров);
-
настроен умный поиск. Даже если человек совершил ошибку в слове, система все равно поймет, что он хотел найти. А еще, по мере набора букв, поиск сразу должен предлагать пользователю подходящие варианты;
-
на странице используется минимальное количество анимации. Иначе время загрузки сайта может увеличиваться.
Контент
-
текст на сайте читабельный: он нормального размера, на контрастном фоне, написан понятным шрифтом и разделен на абзацы;
-
в тексте нет орфографических ошибок;
-
на сайте есть иллюстрации, фотографии, видео;
-
контент адаптирован для людей с ограниченными возможностями;
-
все кнопки должны быть оптимального размера и контрастными по отношению к фону. Кликабельной должна быть не только надпись, но и все пространство кнопки;
-
все контакты должны быть представлены в виде текста, а не картинки. Так пользователю будет легко их скопировать.
Всплывающие окна
-
окно можно легко закрыть. Кнопка закрытия находится в привычном месте и ее легко заметить;
-
автоматические всплывающие окна не открываются слишком часто. Оптимально, когда поп-апы вылетают не больше трех раз за одно посещение сайта;
-
при заполнении формы и отправке данных система реагирует на действия человека. Например, это может быть текст вроде “Вы успешно подписались на рассылку”.
Раздел с категориями товаров
-
возможность сортировки. Главные опции: по цене, по популярности, по бренду, по рейтингу, по наличию;
-
есть фильтры. Они помогают оставить только те товары, которые удовлетворяют определенным критериям;
-
пользователь видит, какие фильтры включены сейчас и может легко отменить их по одному.
Карточки товаров
-
есть несколько изображений товара со всех сторон. Их можно приблизить;
-
цена расположена на видном месте и легко читаема;
-
кнопка “Купить” контрастно выделена на общем фоне;
-
кнопка “Купить” меняет цвет или надпись, если товар уже в корзине;
-
в карточке есть подробное описание товара;
-
характеристики во всех товарах приведены к одному виду. То есть, если диагональ одного телевизора указана в дюймах, то и у другого должно быть то же самое. Так пользователю будет проще сравнивать товары между собой;
-
если в описании указаны непонятные термины, при наведении на них курсора всплывает подсказка;
-
есть кнопка быстрой покупки. Она пригодится, если пользователь не хочет добавлять товар в корзину и сам заполнять форму. Человек должен иметь возможность просто оставить вам заявку. А потом оператор связывается с ним и уточняет всю нужную информацию по телефону. Так ваш сайт сможет подстроиться под разные типы клиентов;
-
указано наличие или отсутствие товара. Не заставляйте человека делать заказ, а потом разочаровываться, когда чего-то не окажется в наличии.
Корзина
-
кнопка, по которой можно перейти в корзину, находится в шапке сайта и “гуляет” за пользователем по всем страницам;
-
значок корзины в шапке меняется, если в ней уже что-то лежит;
-
человек легко может удалить товар или изменить его количество;
-
видно цену каждого товара и конечную сумму;
-
отображается стоимость доставки;
-
товары в корзине кликабельны. Человек должен иметь возможность вернуться в карточку товара, чтобы проверить правильный ли выбор он сделал;
-
пользователь может вернуться на шаг (или несколько) назад и не потерять то, что он уже заполнил;
-
для оформления заказа нужны только самые важные данные. Форма не перегружена ненужными полями;
-
обязательные для заполнения поля помечены специальным значком (обычно это звездочка);
-
поля проверяются на правильность ввода данных. То есть, если человек ввел адрес своей почты без значка @, система должна его предупредить;
-
кнопка для очистки корзины не должна быть слишком близко к другим важным кнопкам типа “оформить заказ”. Иначе пользователь может случайно нажать не туда;
-
после оформления заказа пользователь видит страницу благодарности. Человек должен понимать, что магазин получил его заказ и скоро начнется сборка.
Подвал (футер) сайта
-
есть иконки социальных сетей. Это повышает привлекательность сайта для поисковиков и приводит новых подписчиков;
-
есть контакты компании. Это может быть телефон, адрес, почта, мессенджеры и размещение офиса компании на карте;
-
добавлена кнопка “наверх”. Пользователь должен иметь возможность быстро оказаться вверху страницы. не заставляйте его долго скроллить обратно;
-
есть карта ресурса. Если на сайте много разделов, есть смысл добавить вниз самые популярные из них, чтобы человек легко мог туда перейти;
-
есть ссылки на важные документы: политику конфиденциальности, политику использования файлов cookie;
-
есть раздел с помощью или самыми частыми вопросами.
Общее удобство сайта
-
скорость загрузки сайта не больше трех секунд. Исследования говорят о том, что это оптимальное время загрузки, которое пользователи готовы ждать;
-
на сайте отсутствуют битые ссылки;
-
со страницы 404 есть возможность перейти на главную или любую другую страницу сайта. Ошибка 404 возникает, когда пользователь пытается перейти на несуществующую страницу сайта. Например, у вас закончилась какая-то акция, но рекламу с ней выключить забыли. Люди кликают по рекламе, а им выдает ошибку, ведь эту страницу с сайта уже удалили. Если не дать человеку возможность перейти в другой раздел, он просто уйдет;
-
сайт адаптирован под мобильные устройства. То есть вся страница полностью помещается в экран и отсутствует горизонтальная прокрутка;
-
дизайн сайта не мешает взаимодействию с ним и отвечает современным тенденциям;
-
у сайта есть уникальный фавикон. Это значок, который помогает выделить вкладку с вашим сайтом среди других. Часто в качестве фавикона используется логотип компании;
-
есть SSL-сертификат. Он обеспечивает безопасность связи между пользователем и сервером. То есть гарантирует, что никакие данные не будут перехвачены посередине. Сайты, без этого сертификата хуже ранжируются в поисковых системах;
-
для регистрации на сайте не требуется заполнять длинную форму. В среднем достаточно 2-4 строки. Также можно добавить авторизацию с помощью социальных сетей;
-
курсор-стрелка при наведении на кликабельный элемент меняется (чаще всего он становится рукой).
Шапка
Главное меню и навигация
А что дальше?
После того, как вы проверили сайт, важно подготовить план по улучшению ситуации. Ведь если просто провести аудит, а потом оставить все так как есть, получится, что вы просто впустую потратили время.
Все внесенные изменения также надо протестировать. Первое время лучше постоянно наблюдать за поведением пользователей на сайте: не пытаются ли они нажать туда, где нет кнопки, не зависают ли в поисках какого-то раздела, не упала ли конверсия и т.д. Если изменения облегчат пользователям жизнь, и с вашим сайтом станет проще и приятнее взаимодействовать, рост поведенческих факторов ранжирования не заставит себя ждать. А там подтянутся и позиции в поисковиках, и конверсия, и прибыль.
на лидирующие позиции в поиске
-
Спасибо за развернутый материал. Сервис "Новофон" действительно бюджетный и качествен...