Рекомендации по юзабилити для интернет-магазина джинсовой одежды

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

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

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

Названия ссылок в первом горизонтальном меню слишком длинные, из-за чего не помещаются в одну строку. «Контакты/Реквизиты/Схема проезда» можно заменить на более короткое «Контакты». Дополнительно не рекомендуем для данной тематики размещать в шапке email, в подвале сайта этой информации будет достаточно. Кнопки соцсетей лучше показать ярче в основной части страницы.

Пролистываем страницу вниз и видим не слишком аккуратные блоки:

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

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

Не нагружайте шапку сайта и следите, чтобы элементы с разным предназначением были визуально отделены друг от друга.
Форма поиска должна быть удобной для ввода запроса и лучше располагать ее в шапке сайта.
Боковое меню на Главной странице лучше убирать, так как ссылки на разделы можно показать в основной части. Также не стоит в нем дублировать ссылки из горизонтального меню.
Слайдер в первом экране должен быть информативным и продающим. Расскажите в нем об акциях, спецпредложениях и новинках, добавив ссылки на разделы.
Следите, чтобы все изображения отображались.
Показывайте разделы компактно. Если это блок новинок, то разместите небольшой слайдер со ссылкой на полный раздел.
Основной текст показывайте по частям и выделяйте преимущества, чтобы пользователь при беглом просмотре прочел их.

Страница о компании

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

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

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

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

Выбор товара

После того как мы изучили информацию о компании, приступим к выбору товара. Для этого переходим в раздел «Мужская одежда -> Мужские прямые джинсы»:

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

Переходим на страницу понравившегося товара:

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

Чтобы пользователю было легче выбирать товар, рекомендуем:

Не дублировать ссылки в меню, чтобы не усложнять навигацию.
Всю дополнительную информацию из бокового меню убирать. Анонсы новостей, статей достаточно показать на Главной.
Фильтры лучше размещать в боковом меню, а сортировки – над списком товаров, такой вариант привычнее для пользователей. Проверять, чтобы все они были рабочими.
Описание товара лучше размещать в виде вкладок, чтобы не удлинять страницу. Обязательно добавляйте вкладку с кратким описанием способов оплаты и доставки.
После добавления товара в корзину настройте вывод всплывающего окна с предложением перейти в корзину или продолжить покупки.

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

Переходим в корзину, чтобы оформить заказ:

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

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

Чтобы процесс заказа прошел быстрее, рекомендуем:

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

Общее впечатление и вывод

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

А теперь обратите внимание на ваш сайт, встречаются ли на нем такие же ошибки? Если нашли недочеты, то поможем с доработками. Если же ошибок нет, но есть проблемы с продажами, поможем выяснить, в чем проблема.