15.06.2017

1.8K

Частые ошибки юзабилити на сайтах по продаже автозапчастей

Сегодня рассмотрим сайт клиента в рамках тарифа «Skype-консультация». Компания занимается продажей запчастей для иномарок по всей России. Причём не только в розницу, но и сотрудничает с множеством магазинов в регионах.

Главная страница

Представим, что нам нужны новые шины, а заказ нужно доставить в Ростов-на-Дону.

Из поиска попадаем на такую Главную страницу:

Главная страница

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

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

Разделы поиска дублируются в боковом меню

Совет 1: не перегружайте основное меню, рекомендуемое значение 5-7 ссылок. Хотя бы визуально отделяйте общие страницы от категорий товаров.

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

Поиск по сайту оказался горизонтальным меню

Анимация на баннере слева отвлекает от содержимого сайта, а сам баннер сливается с фоном.

Баннер на Главной странице

Совет  2: продумываете цвета и содержимое баннеров. Они должны вписываться в дизайн сайта, но не сливаться с ним. А«мигающая» анимация будет только отвлекать от содержимого сайта, лучше без нее.

В блоке «Популярные товары» почему-то вперемешку категории и отдельные товары.

Среди популярных товаров можно встретить ссылки на категории

Текст на главной неплохой, но есть что доработать: следует убрать шаблонные фразы, вроде «Добро пожаловать», «Мы предлагаем» и добавить больше конкретики.

Синие заголовки текстов выглядят как ссылки.

Текст на главной странице

Совет 3: старайтесь сделать текст интересным и привлекательным для пользователей, убирайте шаблонные фразы и добавляйте больше конкретики.

Корзина в подвале сайта выглядит странно, а контактная информация оформлена совсем неприметно.

Подвал сайта

Совет 4: корзину товаров лучше располагать только в шапке сайта, в подвале лучше сделать акцент на контактную информацию.

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

Обзор страницы «О компании»

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

Страница «О компании»

Сейчас на странице слишком много информации, а из-за множества картинок, иконок и ссылок она тяжело воспринимается. Контактную информацию стоило вынести на отдельную страницу – «Контакты». Отзывы клиентов выглядят как сплошной текст:

Отзывы клиентов

Совет 5: страницы «О компании» и «Контакты» это не одно и тоже, первая рассказывает о компании, сотрудниках, основных направлениях, а на второй находится контактная информация, форма обратной связи.

Страница о компании, честно говоря, только оттолкнула большим количеством текста и отсутствием реальных фотографий офиса (склада) и персонала.

Обзор страниц товаров и оформление заказ

Попробуем выбрать интересующий нас товар, для этого переходим из бокового меню в раздел «Шины»:

Раздел каталога «Шины»

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

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

Хорошая идея в параметрах поиска показывать сначала популярные значения, но для пункта «Сезонность» эта опция лишняя.

Параметры сортировки товаров

Допустим, мы выбрали необходимые параметры и нам вывелись следующие товары:

Список товаров после выбора параметров поиска

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

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

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

Информация о доставке дублируется

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

Не совсем понятно, зачем под описанием товара добавлены ссылки из главного меню, а слово «Оформить» выглядит как кнопка (на деле это картинка):

Текст «Оформить» выглядит как кнопка

В карточке товара не указана цена, но есть кнопка «Посмотреть цены и сроки», после клика по ней видим ещё одну карточку товара:

«Вторая» карточка товара

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

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

Итак, цену мы узнали, добавляем в корзину и переходим к оформлению заказа:

Страница корзины

Информация о доставке представлена только для Москвы, а для других городов в виде ссылки на другую страницу, что неудобно:

Информация о доставке

Перейдём по данной ссылке, где информации о доставке в наш город катастрофически мало:

Информации о доставки в другие города недостаточно

Совет 9: в корзине всегда должна быть указана стоимость доставки, чтобы пользователь видел, сколько он заплатит в конечном итоге.

Возвращаемся в корзину и нажимаем на кнопку «Оформить заказ». Появляется всплывающее окно с предложением регистрации:

Всплывающее окно после клика по кнопке «Оформить заказ»

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

Всплывающее окно после клика по кнопке «Оформить заказ без регистрации»

Совет 10: используйте всплывающие окна по минимуму, не заставляйте пользователей совершать лишние действия.

Выбираем «Оформить заказ»:

Страница заказа

Форма выглядит непонятно, зачем-то указаны два поля комментариев и не понятно, что вводить в поле «Покупатель»:

Форма заказа перегружена дублирующимися полями

Также в способах оплаты не стоит указывать вариант «Наличными курьеру (до 25000р)» для заказов больше данной суммы:

Пункт «Наличными курьеру (до 25000р)» не подходит к нашему заказу

После отправки данных показывается следующая страница, где информация о доставке все также указана ссылкой:

Страница после отправки данных

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

Выводы: запутанная навигация и неполная информация о доставке

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

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

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

P.S. Хотите узнать основные ошибки на вашем сайте? Закажите skype-консультацию.

аудит сайта, юзабилити-аудит, кейсы

Автор Кира Светлова
Специалист по юзабилити сервиса 1PS

 

Понравилась статья?

Дайджест новых статей
по интернет-маркетингу
раз в неделю на ваш email

Правила комментирования блога

Услуга добавлена в корзину

Продолжить покупки Перейти в корзину