От проблем к успеху: анализ юзабилити сайта и его трансформация

Диана Башко

Специалист по юзабилити маркетингового агентства Demis Group

Зачем работать над юзабилити

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

Юзабилити влияет на успех сайта по нескольким причинам:

1. Удовлетворенность пользователей. Когда пользователи легко находят нужное и могут быстро выполнить задачи, они с большей вероятностью вернутся на сайт в будущем.
2. Коэффициент конверсии. Чем проще совершить покупку или заполнить форму, тем больше вероятность, что пользователь станет клиентом. Это напрямую влияет на доход компании.
3. Снижение коэффициента отказов. Если пользователи сталкиваются с трудностями на сайте, они уходят. Оптимизация юзабилити помогает удерживать их и побуждает к действиям, таким как покупки или регистрации.
4. Повышение доверия. Сайт с хорошим юзабилити выглядит профессионально и надежно, что повышает доверие пользователей и создает положительный имидж бренда.
5. Конкурентное преимущество. Пользователи выбирают сайты, которые предлагают лучший опыт.

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

Оптимизация юзабилити от А до Я

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

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

Целевая аудитория сайта:

80% клиентов компании — бюджетные организации, которые осуществляют закупку оборудования вне конкурсов и аукционов (школы, детские сады, библиотеки и музеи). Кроме того, среди клиентов имеются коммерческие заказчики (торговые и бизнес-центры, детские развлекательные комплексы и медицинские учреждения).

Анализ состояния сайта до реализации юзабилити:

• Количество посетителей в месяц: 520.
• Среднее время, проведенное пользователями на сайте: 3,1 минут.
• Показатель отказов: 20,74%
• Конверсия (процент посетителей, совершивших целевое действие): 0,30%
• Количество страниц, просмотренных за сеанс: 2,55%
• Процент мобильных пользователей: 24,5%

Данные Яндекс Метрики за месяц до проработки юзабилити

Оптимизация пользовательского пути на сайте

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

Хедер

В удобстве и простоте навигации на сайте ключевую роль играет хедер.

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

Хедер до проработки юзабилити

В процессе работы:

• Проведен комплексный редизайн хедера, что повысило его визуальную привлекательность и улучшило функциональность навигации.
• Переработано расположение элементов для создания сбалансированной и четкой структуры.
• Выделены призывы к действию, чтобы упростить пользователям ориентацию и принятие решений.
• Добавлена электронная почта, что увеличило конверсию по цели «Клик по E-mail» на 0,20% и обеспечило удобство связи с магазином.

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

Каталог

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

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

Каталог до проработки юзабилити

Были выполнены следующие работы:

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

Каталог после проработки юзабилити

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

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

До оптимизации:

• Важные элементы (цена и кнопки действия) не были выделены визуально, усложняя процесс принятия решения.
• Отсутствие структурированности и неинтуитивный интерфейс затрудняли доступ к ключевой информации.
• Сложности с поиском условий доставки и оплаты снижали вероятность завершения покупки.

Карточка товара до проработки юзабилити

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

Карточка товара после проработки юзабилити

Оформление заказа

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

До начала работы над улучшением юзабилити:

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

Согласно данным Яндекс Метрики, конверсия на этапе оформления заказа составляла всего 0,14%. Однако после внедрения улучшений она увеличилась до 0,39%.

Страница оформления заказа до проработки юзабилити

Были внедрены следующие изменения:

• Редизайн страницы. Интерфейс был полностью переработан. Четкая структура формы ввода информации повысила ее читаемость и восприятие.
• Информирование о последующих действиях. Добавлен текст, разъясняющий пользователю, что после отправки формы с ним свяжется менеджер для уточнения деталей и подтверждения заказа. Это уменьшило неопределенность и укрепило доверие к процессу покупки.
• Расширение формы. Включены поля для ввода адреса доставки, реквизитов оплаты и другой важной информации. Это сократило количество вопросов и упростило процесс оформления.
• Блок с просмотренными товарами теперь дает пользователям возможность быстро вернуться к интересующим их позициям, что способствует увеличению среднего чека и росту общей конверсии.

Страница оформления заказа после проработки юзабилити

Результаты улучшения юзабилити

Повышение конверсии

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

• Увеличению числа кликов.
• Росту количества просмотров товаров.
• Увеличению частоты добавления товаров в корзину.
• Повышению процента завершенных покупок.

Показатели статистики благодаря проработке юзабилити

Улучшение пользовательского опыта

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

Формирование доверия

Благодаря продуманному дизайну и четкой структуре, пользователи стали увереннее совершать покупки.

Достижение бизнес-целей

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

Улучшать — значит инвестировать в успех

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