Как повысить юзабилити: рекомендации и примеры

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

Структура и обязательные элементы

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

Первый экран

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

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

Пример неудачного первого экрана, на котором не видно товаров.

Навигация

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

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

Пример подробного меню.

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

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

Перелинковка

Для вовлечения пользователя и увеличения глубины просмотра необходимо перелинковывать страницы между собой. Например, добавить блок «Похожие статьи» или «С этим товаром также покупают», а также ссылки в самом контенте. Подробнее о том, как сделать качественную перелинковку.

Привычное расположение элементов

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

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

Фильтры

Чтобы упростить поиск нужного товара, а также охватить СЧ и НЧ запросы, надо создать как можно больше фильтров. В этом поможет кластеризация семантического ядра и анализ потребностей пользователей. Подумайте о том, какие параметры товара могут быть важны, а также проанализируйте конкурентов. Если параметров получилось слишком много, их можно спрятать в спойлерах («Показать ещё») или перенести в расширенный поиск. В любом случае стоит предусмотреть все возможные варианты фильтров.

Пример расширенных параметров и заполненной карточки товара.

Сортировка

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

Пример реализации подробной сортировки

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

Обязательные компоненты товарной карточки:

• цена,
• кнопка «купить»,
• главные характеристики,
• описание,
• условия доставки и оплаты.

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

Поиск по сайту

Поиск — это также обязательный элемент на любом портале.

Технические параметры

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

Скорость сайта

Скорость сайта — важный фактор ранжирования (особенно для Гугл), так как пользователи обычно закрывают страницу, если она грузится дольше пяти секунд. Проверить скорость можно в Pagespeed Insights от Google либо при парсинге в Screaming Frog.

Адаптивность

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

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

Формы заказа

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

Эффективны формы, которые предлагают сделать заказ не напрямую. Их главной целью является получение контактных данных клиента. Например, это тесты или квизы с фразами: “Рассчитайте стоимость услуги” — где результат придёт на почту, или “Закажите бесплатную консультацию” —  где необходимо оставить телефон.

Интерактивные элементы

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

Чаты, обратный звонок

Одними из самых популярных инструментов, значительно повышающих конверсию, являются чаты и заказ обратного звонка. Чаты помогают быстро ответить на вопросы и взять контактные данные клиенты. Кроме того, они высвечиваются в сниппете в поисковой выдаче Яндекса, тем самым увеличивая его CTR. Лучшие сервисы — Jivosite и Calltouch.

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

Дизайн

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

Цветовая гамма

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

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

Читаемость текста

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

Также текст должен быть поделён на равномерные абзацы и иметь правильную иерархию заголовков.

Пустое пространство между элементами

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

Пример отсутствия пространства между карточками

Не более четырёх акцентов на странице

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

Четыре акцента: логотип, «Акции», баннер и кнопка «добавить в корзину».

Вывод

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