10 популярных ошибок в UX для e-commerce и способы их исправления

Для начала стоит проверить, есть ли такая проблема. Рекомендуем воспользоваться сервисом PageSpeed Insights или PR-CY. В результатах будут не только данные о скорости загрузки, но и рекомендации по исправлению. Также советуем изучить нашу подборку способов увеличения скорости загрузки.

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

Еще на страницах каталога и оформления заказа рядом с индикатором загрузки можно выводить понятные сообщения: «Загружаем товары…», «Проверяем наличие…», «Отправляем данные…» и т.д. Это поможет дополнительно проинформировать пользователя.

Сначала проанализируйте, как сейчас работают данные инструменты: кликают ли пользователи по предложениям в поп-апах, пишут ли в чат-боты или быстро закрывают их. Рекомендуем начать с просмотра записей в Вебвизоре Яндекс Метрике. А если у вас на сайте нет счетчика Яндекс Метрики, то рекомендуем заглянуть в данный туториал.

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

Чат-боты лучше раскрывать только после того, как пользователь провел на сайте хотя бы 30–60 секунд или просмотрел 2–3 страницы. Так он не будет навязчивым, а, наоборот, подтолкнет пользователя задать вопрос специалисту.

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

Четко сформулируйте предложение: что вы продаете, кому и почему это выгодно. Подробнее о том, как составить УТП.

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

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

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

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

Добавьте синонимы и словарь терминов (например, «айфон» = «iphone»).

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

Если ничего не найдено, то предложите похожие товары или популярные запросы, а не пустую страницу.

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

Структура каталога должна отражать то, как пользователи ищут товары, а не то, как они хранятся на складе. Это помогает быстрее находить нужное.

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

Возможность фильтровать по нескольким параметрам одновременно (цена, бренд, размер, цвет, рейтинг) делает выбор удобнее и быстрее.

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

Добавьте 3–5 качественных фото с разных ракурсов или видеообзор. Для услуги разместите фото процесса, примеры работ или короткое видео о том, как все проходит.

Составьте подробное описание. Вместо общих формулировок укажите конкретику: для товара – это состав и параметры (например, «хлопок 95%, эластан 5%, плотность 180 г/м²»), а для услуги – количество работ, входящих в нее, основные этапы, сроки и результат.

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

Указывайте цену или ориентир по стоимости. Если точная цена зависит от параметров, покажите диапазон, примеры или объясните, из чего она складывается.

На основе часто задаваемых вопросов можно добавить блок «Вопрос-ответ». Например, о размерах, уходе, совместимости для товара, о процессе, сроках и документах для услуги.

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

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

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

Дополнительно можно добавить меню со ссылками на основные блоки на странице.

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

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

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

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

Если форма заказа разделена на этапы, то сделайте возврат на предыдущий шаг без потери данных.

Если пользователь авторизовался, то рекомендуем в форме заказа добавить автозаполнение известных о нем данных, например, имени, телефона и адреса.

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

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

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

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

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

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

Дополнительно следите за размером шрифта. Мелкий текст с телефона читать некомфортно, а иногда и невозможно без увеличения. Комфортный размер для основного текста от 16 пикселей, а для второстепенной информации не меньше 14. Также стоит обратить внимание на межстрочный интервал и контраст текста с фоном.