Студия Турум-бурум

5 критических ошибок интернет-магазинов на примере экспресс UX-аудита сайта Terrasport.ua

5 критических ошибок интернет-магазинов на примере экспресс UX-аудита сайта Terrasport.ua
374

Наша команда  провела экспресс UX-аудит ecommerce проекта Terrasport и пополнила список наиболее распространенных ошибок интерфейсов интернет-магазинов. Ранее мы уже сталкивались с подобными проблемами при анализе юзабилити таких сайтов, как Toys.com, Veneto.ua и Эра Электроники.

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

1. Нарушена структура каталога

Каталог товаров выполнен в виде горизонтальной панели с указанием основных групп товаров. При этом раздел «спорт» перегружен. Он разбит на большое количество категорий, во многих из которых представлено очень мало товаров. Например, в блоке «джамперы» всего 4 товара. Выносить такие категории отдельно нецелесообразно, т.к. пользователь тратит больше времени на поиск нужного товара. 

Выпадающий список не влазит в один экран

Выпадающий список не влазит в один экран

Рекомендация

Объединить категории в более широкие разделы – это сэкономит много пространства и поможет в поиске. Например, секундомеры, суппорты,  экшн-камеры, сумки, спортивные бутылки можно сгруппировать в одну категорию «аксессуары для спорта», а турники, брусья, упоры для отжиманий, шведские стенки - в категорию «workout».

2. Нерациональное использование пространства в адаптиве

Если зайти в интернет-магазин Terrasport с мобильного телефона, то шапка займет ровно половину экрана. Это усложняет просмотр страниц. Некоторые элементы не нужны в таком объеме в процессе покупки.

Нерациональное использование пространства стартовой страницы в мобильной версии интернет-магазина Terrasport

Нерациональное использование пространства стартовой страницы в мобильной версии интернет-магазина Terrasport

Рекомендация

Уменьшить логотип, свернуть поиск до размера иконки. Акции, телефоны и выпадающий список покупателю – переместить в меню.

Хороший пример реализации:

Стартовая страница интернет-магазина Lamoda в адаптивной версии

Стартовая страница интернет-магазина Lamoda в адаптивной версии

3. Размеры элементов страницы не сочетаются 

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

Страница выдачи интернет-магазина спортивных товаров Terrasport

Страница выдачи интернет-магазина спортивных товаров Terrasport

Рекомендация

Адаптировать баннеры специально для выдачи, уменьшив их площадь или вставить их в плитку вместе с товарами.

4. Нарушена логика подачи информации на странице выдачи

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

Ошибки интерфейса на странице выдачи в адаптивной версии интернет-магазина Terrasport

Ошибки интерфейса на странице выдачи в адаптивной версии интернет-магазина Terrasport

Рекомендация

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

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

5. Не расставлены приоритеты на странице товара

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

Так выглядит страница товара интернет-магазина Terrasport

Так выглядит страница товара интернет-магазина Terrasport

Рекомендация

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

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

Мы видим, что даже беглый анализ эффективен для выявления ошибок интерфейса  интернет-магазина. Устранение этих недостатков поможет не просто улучшить юзабилити, а и повлиять на ключевые метрики сайта. Наглядный пример, как с помощью улучшения интерфейса за 3 месяца мы увеличили доход на пользователя на 11,46% для интернет-магазина Интертоп, смотрите в нашем портфолио. 

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



Оставьте номер и мы перезвоним
Спасибо!
Мы скоро свяжемся с Вами.
Напишите нам
Выберите направление:
    Спасибо!
    Мы скоро свяжемся с Вами.