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

Юзабилити — это комфорт взаимодействия посетителя с интерфейсом, меню, формами и элементами сайта или приложения. Сюда относится всё, что может способствовать целевому действию:

1. понятная навигация;
2. написанные человеческим языком тексты;
3. подходящие по смыслу изображения;
4. опрятная вёрстка;
5. стабильность каждого отдельного элемента и всего веб-ресурса в целом.

Если совсем просто, то usability сайта — это одёжка, по которой пользователи составляют первое мнение о площадке, после чего пополняют ряды лояльной аудитории либо уходят к конкурентам.

Принципы юзабилити веб-сайтов

Любой интернет-сервис, независимо от коммерческого или социального профиля, видит своей основной целью увеличение трафика. Разработчики добиваются этого разными средствами, но наиболее простой способ обеспечить посещаемость — сделать сервис полезным и простым. Что это значит?

Сдержанный дизайн

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

1. Дизайн — это утилитарный инструмент для конвертации посетителей в лиды, а не поле для экспериментов с креативом.

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

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

Комфортный текстовый контент

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

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

Общение с пользователями

Посетитель не должен ломать голову в поиске ответов на вопросы, с которыми он пришёл на сайт. Какой бы простой/сложной не была схема интернет-ресурса клиенту нужны подсказки.

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

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

Удобная навигация

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

Как оценить юзабилити сайта

Причины, вынуждающие делать анализ usability, стандартны

1. жалобы посетителей на сложный, запутанный интерфейс;
2. отрицательная динамика при наблюдении за ключевыми метриками;
3. отказ клиентов совершать целевое действие;
4. тестирование новых версий страниц/элементов/форм;
5. сбор данных для построения гипотез;
6. получение обратной связи от целевой аудитории.

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

Как подготовиться к анализу usability сайта

Перед началом активных работ команда разработчиков (аудитор) согласовывают ключевые моменты — цели и условия тестирования.

Задачи

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

1. Пример: с внедрением на коммерческий сайт поп-апа с рекламой акции, конверсия снизилась на 30%.

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

Гипотезы

Определив цели тестирования, готовят несколько версий страницы/формы/элемента, чтобы подтвердить либо опровергнуть причину проблем

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

Как вариант — форма содержит слишком много необязательных полей, на заполнение которых клиенты не хотят тратить время. Для проверки гипотезы необходимо сократить количество полей в контрольном образце.

Сценарии

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

1. Пример: покупатели книжного магазина — это женщины и мужчины, студенты и работающие специалисты и т. д.

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

Условия анализа

Помимо стратегических задач перед аудитом стоит продумать технические условия.

Модерация:

1. да — тестирование проходит под контролем модератора, который следит за соблюдением сценария и фиксирует ключевые моменты процесса;
2. нет — респонденты самостоятельны в выборе вариантов решения задач, а сбор и обработка данных ведётся автоматически.

Цели:

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

Локация:

1. очно — модератор наблюдает за действиями респондентов непосредственно в месте проведение тестов;
2. удалённо — члены фокус-группы находятся в разных местах (дома, на работе).

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

Метрики при тестировании юзабилити

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

1. Процент отказов (BR, bounce rate) — количество людей, которые покинули сайт со страницы входа. Как правило, это происходит из-за нерелевантного запросу контента и неоднозначного меню. Высокий bounce rate не нравится поисковым системам и понижает сайт в выдаче.
2. Вернувшиеся пользователи (RV, returning visitors) — это те, кто в рамках отчётного периода делал несколько повторных визитов. Высокий показатель returning visitors свидетельствует о лояльности ЦА и относительно качественном usability сайта.
3. Глубина просмотра (PPV, pages per visit) — число страниц, открытых посетителем за одно посещение веб-ресурса. Чем больше таких внутренних переходов в течение сессии, тем выше популярность платформы у ЦА и тем лояльнее отношение к ней поисковых систем.
4. Время, проведённое пользователем на сайте (TSS, time spent on site) — самый понятный показатель эффективности. Раз люди задерживаются, изучая контент, значит, он полезен. Поисковые системы учитывают продолжительность сессий при ранжировании.

Названные метрики — небольшой пример возможностей, которые дают для оценки юзабилити сервисы Google Analytics (GA) и Яндекс.Метрики (ЯМ). Следует, однако, учитывать, что для отдельных показателей системы используют различные алгоритмы расчёта. Принципиального значения для идентификации и последующего контроля проблем они не имеют, но возможны погрешности.

Тестирование юзабилити сайта

Удобство использования сайта можно проверить несколькими способами.

Коридорный тест

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

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

Анализ отзывов

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

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

A/B-тестирование

Классика анализа в продуктовом маркетинге, когда целевой аудитории предлагают оценить два варианта системы или объекта — страницы, формы, динамического элемента, юзабилити web-сайта.

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

Наблюдение со стороны

Фокус-группа использует сайт или приложение в обычном режиме. За происходящим наблюдает модератор, который присутствует в том же помещении или отслеживает действия участников при помощи Яндекс.Вебвизора либо аналогичного сервиса.

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

Экспертный аудит

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

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

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

Обладая некоторым опытом, удобство использования интернет-ресурса можно оценить самостоятельно. Предлагаем список разделов с контрольными пунктами, на которые стоит обратить внимание при проверке.

Главное

1. У сайта есть адаптивные версии для мобильных гаджетов и больших экранов.
2. Время загрузки страницы — 1-2 сек.
3. На веб-ресурсе установлен SSL-сертификат.
4. Принципы юзабилити очевидны сразу — посетитель видит, куда он попал, что именно здесь предлагают, как двигаться дальше.
5. Регион визитёра определяется автоматически, языковая версия корректна, переключатель хорошо заметен.
6. Сайт имеет узнаваемый фавикон.
7. Для каждой страницы прописан содержательный тайтл.
8. Вход в личный кабинет (если предусмотрена регистрация), возможен через соцсети.
9. У веб-ресурса есть 404-страница с набором ссылок на ключевые разделы.
10. Сайт не содержит пустых, незаконченных страниц.

Навигация

1. Логотип активен, клик инициирует переход на главную страницу, для лендинга — экран.
2. Навигационное меню находится в шапке, страницы верхнего уровня повторяются в подвале.
3. Количество ссылок в меню — не больше восьми (основные разделы).
4. Логика меню — важное вначале и в конце.
5. Пункты меню имеют понятные пользователям названия.
6. Ссылка активного раздела подсвечена в меню, но неактивна и не отвечает на курсор.
7. Все страницы нижнего уровня имеют кликабельные «хлебные крошки», позволяющие в одно касание вернуться в родительский раздел.
8. Кнопка «Назад», активирующая переход на предыдущую страницу, есть во всех разделах.
9. Для каждой страницы прописан внятный заголовок H1, описывающий её содержание.

Поиск

1. На сайте присутствует поиск по внутренним разделам. Для повышения юзабилити сайта он активируется кнопкой либо клавишей Enter.
2. Система подсказывает подходящие результаты во время введения запроса.
3. Алгоритм автоматически исправляет ошибки, подбирая похожие по смыслу и семантике варианты.
4. Для коммерческих или информационных веб-ресурсов с большим числом категорий предусмотрена сортировка результатов.

Дизайн и UI

1. Текстовый контент имеет вид текста, а не картинки.
2. Иконки на сайте несут смысловую нагрузку.
3. Все страницы сформированы по единому шаблону.
4. У всех общих элементов есть своё постоянное место. Пример: логотип — вверху по центру, корзина — внизу слева.
5. Важный контент расположен ближе к левому краю страницы, за ним менее значимый.
6. Возможность взаимодействия с интерактивными элементами понятна без пояснений, они подсвечены, имеют достаточный для попадания курсором размер.
7. Стрелка курсора видоизменяется при контакте с активным элементом.
8. Длина строки текста не превышает 80 символов.
9. По сайту можно перемещаться без мыши, при помощи кнопок клавиатуры.
10. Размер шрифта — минимум 16px. Знаки умеренно контрастны.

Конверсия (Call to action, CTI)

1. Формы, связанные с конверсией, выделены относительно других элементов.
2. Целевое действие доступно с любой коммерческой страницы/экрана.
3. Надписи на кнопках прямо указывают на результат, достигаемый нажатием.

Контакты, формы, обратная связь

1. Контактные телефоны имеют международный формат, если их много, они сгруппированы по блокам.
2. На сайте есть интерактивная карта, показывающая месторасположение офиса или производства.
3. Блок с формой обратной связи хорошо заметен, расположен в знакомом пользователю месте.
4. Виджеты помощи не назойливы, включаются по требованию, не закрывают контент.
5. Формы на сайте имеют минимум обязательных полей для заполнения.
6. Формы, в которых избежать большого количества полей не получается, имеют пошаговый алгоритм с подключённым индикатором заполнения.
7. Внешний вид обязательных полей отличается от необязательных.
8. Шаблон ввода встроен в поля, по необходимости.
9. На форме активно используются автоматические подсказки.

Текст

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

Изображения

1. Графический набор сайта — фоны, фото/рисунки продукта, иконки — несёт смысловую нагрузку. Изображения атрибутированы — alt и title, выполнены качественно, в высоком разрешении.

Вывод

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

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

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

Для эффективного аудита юзабилити важны комплексность в подходе и уверенная экспертность проверяющего.

Оригинал статьи: https://sibdev.pro/blog/articles/chto-takoe-usability-sajta