Юзабилити

Что такое юзабилити сайта и посадочных страниц

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

Юзабилити (англ. «usability») — это показатель, который позволяет оценить, насколько посетителям удобно пользоваться сайтом или страницей. Влияет на общее представление пользователя — непонятный сайт с неудобной навигацией может оттолкнуть, компания не получит заявку.

Что входит в юзабилити сайта

Юзабилити включает следующее.

1. Дизайн, который не отвлекает, не мешает, не раздражает.
2. Интуитивно понятный интерфейс — меню, заголовки, кнопки расположены на ожидаемых местах.
3. Польза — помогает ли ресурс решить проблему посетителя.

Юзабилити — это важно. Почему? Удобство сайта влияет на конверсию и посещаемость веб-страницы — посетитель повторно зайдёт на сайт, если ему будет удобно работать с ресурсом. На странице с продуманной навигацией пользователю проще выполнить целевое действие: например, оставить заявку, запросить обратный звонок, заказать товар или услугу, подписаться на рассылку. Если на странице товара пользователь не сможет разобраться, что компания ему предлагает и где находится кнопка онлайн-консультанта — посетитель просто закроет сайт.

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

Рассказали в блоге: проверка юзабилити сайта — как перестать терять посетителей сайта.

Веб юзабилити измеряется стоимостью взаимодействия, единицей, определённой стандартом ISO 9241-210. Метрику считают низкой, если посетителям сайта не приходится прикладывать дополнительные усилия, чтобы найти нужный результат. То есть юзабилити можно оценивать по тому, сколько времени и какое количество кликов надо совершить пользователю, чтобы решить задачу.

Принципы юзабилити

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

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

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

2. F-паттерн чтения — по данным исследования UI/UX специалиста Якоба Нильсена, «горячие зоны» текста, которым пользователи уделяют больше внимания, визуально напоминают букву «F». Поэтому в верхнем левом углу страницы размещают главную информацию — цепляющий заголовок и основное описание.

3. Структурированные тексты — контент нужно понятно оформить и поделить на блоки для удобства навигации. Пользователи не всегда читают статью полностью. Часто они «скользят» глазами по заголовкам, чтобы найти интересующую информацию.

4. Ненавязчивая помощь посетителю сайта — возможно, перед покупкой пользователю понадобится консультация с менеджером компании. Добавьте на сайт виджеты, которые помогут связаться с сейлзом, например, Онлайн-чат или Ловец Лидов Roistat. В чате пользователь сможет задать свой менеджеру компании, а если решит закрыть страницу — Ловец Лидов «поймает» потенциального лида. Сервис предложит посетителю оставить контакты и получить обратный звонок от сейлза.

Рассказали в блоге: 6 способов получать больше заявок с сайта с помощью Ловца Лидов.

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

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

6. Заметное поле поиска — пользователи смогут быстро перейти к нужной странице сайта.

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

Рассказали в блоге: юзабилити аудит сайта — как сделать сайт удобным для посетителей.

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

Как сделать интерфейс удобным

По данным UX-агентства Intechnic, 70% посетителей уйдут с сайта, если им не нравится дизайн, 79% пользователей не вернутся на сайт с плохим юзабилити интерфейса.

Как сделать сайт удобным и понятным:

• дайте пользователю понимание, что в данный момент происходит на сайте: оставил заявку — увидел форму «Мы получили запрос», скопировал ссылку в UTM-генераторе — получил уведомление «Скопировано!»;
• не прекращайте взаимодействие посетителя с сайтом в квест: например, для обозначения корзины интернет-магазина лучше использовать знакомую иконку корзины или тележки из супермаркета;
• сделайте простую и понятную систему отмены: например, пользователь случайно добавил одно из блюд дважды в заказ. Если для внесения изменений придётся удалить всю корзину и собрать заказ заново, пользователь может просто разозлиться и покинуть сайт;
• придерживайтесь однотипных стандартов юзабилити дизайна сайта для упрощения навигации: меню — сверху, корзина — справа, ссылки — синие;
• упростите взаимодействие с сайтом и компанией с помощью подсказок: например, в полях формы заявки можно оставить подсказки, в каком формате указывать контакты, а в FAQ — рассказать о способах и сроках доставки;
• оформите страницу ошибки 404, чтобы избежать оттока пользователей: например, пользователь решил по памяти ввести URL страницы, которую увидел в наружной рекламе, ошибся и попал на страницу 404. Если страница будет пустой — пользователь может просто уйти с сайта, подумав, что просто акция закончилась. Если на 404 странице будет хотя бы ссылка на главную страницу или баннер акции — пользователю будет проще продолжить путь к покупке.

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

Улучшение юзабилити сайта: что делать

Шаг первый — оценка юзабилити дизайна, сайта или интерфейса. Сначала надо найти, что на сайте неудобно или непонятно. Для этого проводят анализ юзабилити сайта. Проверяют:

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

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

Цели тестирования:

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

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

Выбрать новое расположение кнопки поможет А/Б-тестирование — сравнение, какой вариант страницы приведёт больше заявок и продаж.

Прямо в сервисе Roistat «А/Б тесты» можно задать разные стили страницы и автоматизировать отслеживание количества визитов, заявок и продаж с каждого варианта сайта. Например, зададим тест кнопки и посмотрим результаты:

Рассказали в блоге: что такое А/Б-тестирование и как оно помогает увеличивать продажи.

Подписывайтесь на каналы Roistat в Telegram. Делимся статьями из блога и полезными видео, рассказываем о последних обновлениях продукта Roistat.