Главное Свежее Вакансии   Проекты
Продвинуть свой проект
21 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Глазами эксперта: анализ юзабилити интернет-магазина Terrasport.ua

Команда Турум-бурум провела экспресс UX-аудит ecommerce проекта Terrasport и пополнила список наиболее распространенных ошибок интерфейсов интернет-магазинов.

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

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

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

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

b_5d99ef7ead4f7.jpg

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

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

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

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

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

b_5d99ef7f2ccdb.jpg

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

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

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

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

b_5d99ef7f91679.jpg

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

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

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

b_5d99ef8008075.jpg

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

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

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

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

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

b_5d99ef8083f6a.jpg

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

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

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

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

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

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

b_5d99ef80ef043.jpg

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

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

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

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

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

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

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Первые Новые Популярные
Комментариев еще не оставлено
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.