Аудит юзабилити

Юзабилити сайта — это степень удобства сайта для человека. Критерий, отражающий насколько сайт адаптирован под пользовательские ожидания, интуитивно понятен и способствует увеличению конверсии.

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

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

Рассказываем:

• Как оформить юзабилити-аудит?
• Какие данные из сервисов аналитики использовать?
• Преимущества ручной проверки
• Чек-лист UX аудита сайта

Как должен выглядеть юзабилити-аудит?

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

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

• Показатель отказов
• Среднее время на сайте
• Глубина просмотра
• Достижения по целям

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

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

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

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

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

Сервисы или ручная проверка?

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

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

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

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

Основные требования

• Первый контент при загрузке страницы отображается не дольше, чем через 3 секунды. Если пользователь перешел на сайт, который долго грузится, он его вероятнее всего быстро покинет и в дальнейшем будет игнорировать. Для вас это будут испорченные поведенческие факторы и отсутствие конверсии. Чтобы проверить скорость загрузки сайта используйте сервисы PageSpeed или Test My Site.
• Сайт должен быть адаптирован под мобильные устройства. Объем мобильного трафика растет. Проверьте с помощью данных сервисов аналитики свою аудиторию: какая доля использует мобильные устройства для посещения сайта? Не игнорируйте их потребности, регулярно работайте с мобильной версией сайта.
• Отсутствие горизонтальной прокрутки.
• На сайте должен быть установлен SSL-сертификат, повышающий доверие посетителей сайта.
• Логотип в хедере должен быть кликабельным на всех страницах и вести на главную.
• Каждая страница должна быть оформлена таким образом, чтобы пользователь в первые секунды на ней понимал, чем занимается компания.
• В шапке и футере сайта должна дублироваться контактная информация.
• У сайта должен быть понятный и запоминающийся фавикон.
• Если у вас очень длинные посадочные страницы, добавьте возможность быстро попасть в начало страницы.
• Есть быстрая возможность сменить регион.
• Уберите автоматическое воспроизведение мультимедиа.
• Убедитесь в том, что у вас грамотно разработана страница 404 ошибки. Основные критерии: 1) понятный посыл для пользователя, 2) призыв к действию т.е. перейти на другую страницу или связаться с менеджером, 3) привлекательное оформление, которое нивелирует возможный негатив пользователя из-за того, что он не попал на ожидаемую и нужную ему страницу.

Дизайн сайта

У компании должен быть брендбук, на который смогут опираться дизайнеры, маркетологи и другие специалисты, работающие с визуалом компании. Если брендбука нет, следуйте этим рекомендациям:

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

Навигация

• При наведении курсора на активные элементы, они должны реагировать. Например, кнопка должна менять свой цвет или подсвечиваться.
• Описание всех элементов при наведении должно быть простым и понятным.
• Следите за тем, чтобы у вас на сайте кнопки типа «Купить» и «Очистить фильтр» не находились рядом т.к. пользователь может ошибиться, промахнуться, а потом просто полениться заново проходить путь выбора параметров для товара/услуги.
• Проанализируйте анкор-лист. Пользователь должен по тексту ссылки понимать, куда она ведет.
• Меню должно располагаться в одном и том же месте на каждой странице.
• На каждой странице должна быть навигационная цепочка, которую еще называют хлебными крошками. По ней пользователю удобно понимать, где он находится, а также возвращаться на шаг или несколько шагов назад.
• Сервисные страницы (О компании, Оплата, Доставка, Гарантия) должны находиться в одном интуитивно понятном месте на сайте.
• Заголовок H1 должен четко отражать содержание страницы.

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

Хедер (шапка сайта):

• Закреплена при скролле.
• Содержит кликабельный номер.
• Логотип кликабельный и ведёт на главную.
• Меню не перегружено и содержит основные (самые востребованные) разделы.
• Указан график и время работы.
• Если в компании много услуг/продуктов, есть свернутая строка поиска.

Первый экран должен давать пользователю полезную информацию, которая задержит его на вашем сайте. Это может быть:

• Позиционирование компании, описание деятельности.
• УТП, ключевые преимущества компании или продукта.
• Ссылки на самые популярные разделы или акции.

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

• Качественные изображения в одной стилистике.
• Вся полезная информация визуализирована таким образом, чтобы пользователь мог быстро ее заметить и лучше ориентироваться по странице.
• Текст, представляющий ценность для пользователя. Избегайте длинных текстовых полотен на страницах.
• Лидформы с разными посылами.
• Персонификация. Есть много вариантов, как это реализовать на сайте. Например, поместить внизу страницы фото руководителя с текстом не банальным-продающим, а для людей. Примерное содержание: “Ого, вы дошли до самого низа страницы. По статистике так делает не больше 3% людей. Дарю вам за это промокод BERSERK, напишите его менеджеру и получите от нас сюрприз”.

Футер (подвал сайта):

• Ссылки на основные разделы.
• Контакты.
• График и время работы.
• Ссылки на соцсети.

Страница услуги/продукта

• Качественные изображения.
• Понятная навигация по странице.
• Функциональные блоки.
• Преимущества продукта/услуги понятно описаны.
• Удобное расположение лидформ.
• На странице размещены все нужные ссылки.
• Для конверсии нужно совершить не больше 3-х кликов.

Строка поиска

• Поле поиска одно и находится в шапке сайте или верхней части страницы.
• При клике внутри поисковой строки курсор меняет свой вид.
• Учитывается неправильная раскладка, опечатки и синонимы.
• При вводе слова поисковая строка должна предлагать варианты подходящих страниц.
• Если пользователь вводит товар, которого нет в наличии, поисковая строка должна предлагать товары в схожей тематике.
• Пользователь должен видеть информацию о результатах поиска (количество подходящих страниц, данные по каждому результату).

Текстовый контент

Тексты на сайте нужны в первую очередь для того, чтобы продвигать посадочные по конкретным поисковым запросам. Но алгоритмы поисковых сетей Яндекс и Google становятся сложнее и все больше ориентированы на то, чтобы сайты развивались для людей, а не угадывали, как угодить поисковым роботам. Это сильно коснулось текстов на сайте. Что важно:

• Структура и навигация — пользователь должен за пару секунд понимать, в какой части текста находится нужная ему информация.
• Использование тематических подзаголовков, списков.
• Цвет текста и фона хорошо контрастируют.
• Польза для целевой аудитории сайта.
• Качественная перелинковка.
• Для SEO важно, чтобы в тексте было много тематических слов. Но для удобства пользователей необходимо использовать простой понятный язык. Если используете узкопрофильную терминологию, то только ту, которую точно поймет ваша целевая аудитория. 

Изображения и видео

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

Контакты компании

• Дублируются в шапке, футере и на отдельной странице Контакты.
• Телефон, почта и карта кликабельные.
• Возможность быстро связаться с компанией (заказ обратного звонка, чат с онлайн-консультантом, ссылки на мессенджеры).
• Полнота информации. На сайте должны быть указаны: телефоны, адрес, email, мессенджеры, соцсети и карта проезда.

Онлайн-консультант

• Расположен в очевидном месте на сайте: справа внизу.
• При открытии не перекрывает важный контент сайта.
• Есть возможность закрыть, не появляется слишком часто.
• Призыв к действиям в зависимости от статуса оператора. Если онлайн — написать, если офлайн — оставить свои контакты для связи.
• В профиле размещено настоящее фото консультанта, а не изображение со стока.

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

• Оптимальное количество на странице — до 20
• Возможность выбрать отображение на странице большего или меньшего количества карточек
• В карточке должна присутствовать вся полезная информация о товаре: описание, характеристики, преимущества, фото и возможность его приблизить, видео, параметры, состав, стоимость, валюта, данные о производителе, информация об акции, отзывы, документы/сертификаты,  информация о наличии, кнопка Купить и т.д.
• Наличие блока с сопутствующими или похожими товарами.
• Наличие фильтров для быстрого выбора подходящего товара.
• Адрес страницы должен меняться при выборе разных фильтров.

Корзина

• Оптимальное количество полей для заполнения — важно, чтобы пользователь в процессе не сбился, не утомился и не бросил товар на этапе оформления заказа. Такое происходит, если корзина слишком сложная.
• Обязательные для заполнения поля должны быть выделены цветом.
• Подсказки при заполнении полей.
• Уведомления об ошибке (неверный формат номера, пропущено важное для заполнения поле).
• Значок корзины находится в очевидном для пользователя месте и хорошо заметен на сайте.
• Пользователь видит, как меняется количество товаров в корзине.
• Пользователь может указать нужное количество товаров в корзине, а не добавлять каждый раз по одному.

Выводы

Мы описали простой чек-лист юзабилити-аудита. Такая проверка предполагает анализ ваших точек контакта вашей целевой аудитории с сайтом. Зафиксируйте все недочеты по пунктам и начните внедрять правки. Отследите результат, который достигнете через 1-2 месяца. И продолжайте совершенствовать ресурс.

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

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