Sostav.ru
Москва, ул. Полковая 3 стр.3, офис 120
© Sostav независимый проект брендингового агентства Depot
Использование опубликованных материалов доступно только при указании источника.

Дизайн сайта - Liqium

18+
Во вторник в 07:50

Анализ юзабилити сайта и его трансформация

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

Диана Башко, Demis Group

Исследования показывают, что пользователи часто покидают сайты, которые не соответствуют их ожиданиям по удобству. Это приводит к потере трафика, потенциальных клиентов и прибыли. Как же выявить и решить проблемы юзабилити? Sostav вместе с Дианой Башко, специалистом по юзабилити маркетингового агентства Demis Group разобрали решение на примере реального кейса.

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

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

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

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

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

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

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

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

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

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

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

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

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

Хедер

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

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

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

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

Каталог

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

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

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

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

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

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

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

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

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

В процессе оптимизации были внедрены следующие изменения:

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

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

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

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

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

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

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

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

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

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

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

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

В результате это привело к увеличению:

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

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

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

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

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

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

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

От юзабилити к росту продаж

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

Обсудить с другими читателями:
5
1
и, заметьте, это ни капли не рейдерство! :)))))))
и, вообще, никакое не давление! :)))))
и, конечно же, не попытка поставить под дополнительный контроль условно-независимое медиа :))))
Неизвестный 14.01.2025 в 11:20
4
Вынипанимаити! Этадругоэ!
Неизвестный 15.01.2025 в 09:27
1
14
ну он хоть адекватный
Неизвестный 14.01.2025 в 12:41
12
1
Кто, маск? Ахахаха
Неизвестный 14.01.2025 в 13:27
6
1
В чем адекватный, в освоении бюджетов НАСА?
Неизвестный 14.01.2025 в 14:23
1
5
он визионер, он за долгосрочное успешное развитие человечества, поэтому его интересует колонизация Марса, поэтому он против войн и конфликтов в в мире. А если вам не нравится его позиция, это не значит. что он неправ!
Неизвестный 14.01.2025 в 15:34
6
1
"Для человека популяризирующего электромобили он тратит слишком много ракетного топлива"
Неизвестный 14.01.2025 в 15:58
3
А какая у него позиция?
Неизвестный 14.01.2025 в 16:22
3
4
"живи сам, дать жить другим" - вот его позиция. в отличии от Европы, где считают, что у них есть права, интересы, геополитика, а у России их быть не должно
Неизвестный 15.01.2025 в 09:18
3
2
да, россия очень дает жить другим, прямо вся дорогу этим занимается. и маск, который лезет в политику германии, британии и канады, тоже.
Неизвестный 15.01.2025 в 14:14
3
1
и он против абортов!
Неизвестный 14.01.2025 в 20:33
и за то, чтобы называть детей цифровыми шифрами
Неизвестный 14.01.2025 в 20:37
и что? зато их у него 12! а чего вы добились?
Неизвестный 15.01.2025 в 09:44
у меня в приоритете качество, а не количество
Неизвестный 15.01.2025 в 10:58
а в результате европоиды вымирают((
Неизвестный 15.01.2025 в 11:28
1
так пусть не делает, его же не заставляют
Неизвестный 15.01.2025 в 10:59
1
наш слон
Неизвестный 14.01.2025 в 15:37
Ваш браузер устарел
На сайте Sostav.ru используются технологии, которые не доступны в вашем браузере, в связи с чем страница может отображаться некорректно.
Чтобы страница отображалась корректно, обновите ваш браузер.