Покупатель в интернет-магазине не любуется дизайном. Он ищет нужный товар, сравнивает, проверяет цену с доставкой и решает, доверять ли магазину. Каждый лишний клик, непонятный фильтр или поле в форме — повод закрыть вкладку и открыть соседний магазин из выдачи.
Поэтому дизайн интернет-магазина — это в первую очередь проектирование пути покупателя: от категории до кнопки «Оформить заказ». Разберём по шагам, что должно быть в каталоге, карточке товара и корзине, где чаще всего теряются покупатели и что проверить перед запуском.
Путь покупателя: с чего начинается UX интернет-магазина
Прежде чем рисовать экраны, стоит разложить путь человека, который пришёл купить. В типичном магазине он выглядит так:
- Вход. Главная, категория из меню, страница из поиска Яндекса или переход из рекламы сразу на товар.
- Листинг. Список товаров категории, где покупатель сужает выбор фильтрами и сортировкой.
- Карточка товара. Фото, цена, характеристики, условия доставки — здесь принимается решение.
- Корзина. Проверка состава заказа, количества и суммы.
- Оформление. Контакты, доставка, оплата и подтверждение.
Важно, что люди входят в эту цепочку с разных мест. Тот, кто пришёл из поиска по запросу с названием модели, попадает сразу в карточку, и каждая страница должна работать как точка входа: показывать, где человек находится, и давать дорогу дальше.
Путь стоит проверить на реальных сценариях. Купить конкретную модель, подобрать товар под задачу, повторить прошлый заказ, сравнить два варианта — у каждого сценария свои главные экраны и свои узкие места. Конверсия интернет-магазина складывается из того, сколько людей проходит каждый шаг, поэтому слабое звено ищут по всей цепочке, а не только на главной.
Дизайн каталога: навигация, фильтры и поиск
Структура каталога и меню
Структура каталога строится от того, как ищет покупатель, а не от того, как товары лежат в учётной системе. Внутренние группы склада вроде «Прочее-2» или разбиение по поставщикам покупателю ничего не говорят. Названия категорий лучше сверять с поисковыми запросами: так каталог одновременно становится понятнее людям и даёт посадочные страницы для SEO.
Для большого ассортимента нужно меню с подкатегориями, но не глубже двух-трёх уровней. Хлебные крошки показывают, где человек находится, и позволяют подняться на уровень выше, не возвращаясь на главную.
Фильтры в интернет-магазине
Фильтры — то место, где магазин либо помогает выбрать, либо мешает. Хороший набор фильтров отвечает на вопрос «по каким признакам люди отбирают этот товар». Для аккумуляторов это ёмкость, полярность и размеры, для одежды — размер, цвет и цена, для стройматериалов — назначение и габариты.
- фильтры у каждой категории свои, общий список «для всего каталога» почти всегда бесполезен;
- самые важные фильтры стоят первыми и раскрыты, редкие свёрнуты;
- рядом со значением видно число товаров, а пустые варианты неактивны;
- выбранные фильтры собраны над листингом, каждый снимается одним нажатием;
- результат обновляется сразу или по понятной кнопке «Показать N товаров».
Сортировка и поиск
Сортировка по умолчанию определяет, что покупатель увидит первым. Обычно это «популярные» или «рекомендуемые», дальше — по цене и новизне. Товары, которых нет в наличии, лучше опускать в конец списка.
Поиск по сайту должен понимать опечатки, неправильную раскладку, артикулы и синонимы, а подсказки в строке — показывать товары и категории ещё до нажатия Enter. Отдельно стоит продумать страницу «ничего не найдено»: вместо тупика на ней нужны похожие запросы, популярные категории и контакты.
Листинг: что показывать в плитке товара
Плитка в листинге — короткая версия карточки. По ней человек решает, открывать ли товар, поэтому в ней должно быть то, по чему сравнивают позиции между собой, и ничего лишнего.
- фото на однородном фоне и в едином масштабе, чтобы товары можно было сравнивать на глаз;
- название, которое различает модели, а не обрывается на середине;
- цена, а при скидке — старая цена рядом;
- наличие или срок поставки;
- 2–4 ключевых параметра, если по ним выбирают товар в этой категории;
- кнопка «В корзину», которая не уводит со страницы листинга.
Рейтинг и число отзывов уместны, когда отзывов действительно много. Плашки «хит» и «новинка» работают, пока их мало: если они висят на каждом третьем товаре, взгляд перестаёт их замечать. Для больших категорий полезен переключатель между плиткой и списком, где видно больше характеристик.
Дизайн карточки товара
Карточка товара — главная страница магазина. На ней покупатель должен получить ответы на все вопросы, которые иначе задал бы продавцу в зале.
Хорошая карточка товара отвечает на вопросы покупателя раньше, чем он соберётся звонить.
- Фото. Несколько ракурсов, детали, товар в использовании, увеличение по нажатию. Для товаров, где важен размер, — фото с понятным масштабом или схема с габаритами.
- Цена и наличие. Рядом с названием, крупно. Если цена зависит от варианта — цвета, объёма, размера, — она меняется при выборе варианта, без перезагрузки страницы.
- Кнопка покупки. Одна главная кнопка «В корзину» на первом экране. После нажатия покупатель видит, что товар добавлен, и может перейти в корзину или продолжить покупки.
- Доставка и оплата. Сроки и стоимость для города покупателя прямо в карточке, а не только на отдельной странице «Доставка».
- Характеристики. Таблица параметров в едином формате для всей категории, ключевые — повыше, полный список — ниже.
- Описание. Для чего товар, кому подходит, чем отличается от соседних моделей — то, чего нет в сухих характеристиках.
- Сравнение и избранное. Нужны в категориях, где выбирают между похожими моделями по параметрам: техника, аккумуляторы, инструмент.
- Отзывы и вопросы. С фото покупателей, сортировкой и ответами магазина на критику.
Ниже основной информации уместны сопутствующие товары и аналоги. Они помогают, когда подобраны по смыслу: к аккумулятору — зарядное устройство, к ёлке — подставка, а не случайные позиции из той же категории.
Корзина и оформление заказа
На этом шаге человек уже решил купить, и задача дизайна — не помешать. Корзина интернет-магазина должна позволять поменять количество, удалить товар и вернуть его обратно, ввести промокод и сразу увидеть, как изменилась сумма.
Меньше полей и гостевой заказ
Каждое поле формы — повод остановиться. Для заказа обычно хватает имени, телефона, почты и адреса, если нужна доставка. Адрес удобно вводить с подсказками, а город — определять автоматически с возможностью поменять. Обязательная регистрация перед покупкой — лишний шаг: оформление заказа без регистрации должно быть доступно всегда, а кабинет можно предложить создать после.
Доставка, оплата и итоговая сумма
Способы доставки показывают со сроками и стоимостью для выбранного адреса, пункты выдачи — на карте и списком. Способы оплаты перечисляют до того, как человек нажмёт «Оплатить»: картой, через СБП, при получении, по счёту для юрлиц, если магазин работает с компаниями.
Итоговая сумма с доставкой, скидками и комиссиями видна до последнего шага. Сумма, которая вырастает на экране оплаты, вызывает недоверие даже при честной причине. После заказа покупатель видит номер, состав, сумму, способ получения и что будет дальше: когда позвонят, когда придёт уведомление.
Доверие и мобильная версия магазина
Что вызывает доверие
Перед первой покупкой в незнакомом магазине человек проверяет, что за ним стоят реальная компания и понятные условия. Для этого на сайте должны быть:
- реквизиты продавца, адрес, телефон и способы связи;
- понятные условия доставки, оплаты, возврата и гарантии;
- отзывы, в том числе со ссылкой на внешние площадки;
- аккуратные карточки без пустых полей и битых фото.
Те же элементы Яндекс учитывает как коммерческие факторы, так что работа над доверием помогает и продвижению.
Мобильная версия магазина
Мобильная версия магазина — не уменьшенный десктоп. Фильтры уходят в отдельную панель с кнопкой «Показать товары», кнопка покупки закреплена внизу экрана карточки, корзина доступна из шапки в одно нажатие. Поля формы открывают нужную клавиатуру, а оплата поддерживает быстрые способы, которые не требуют вводить данные карты вручную.
Типичные ошибки в дизайне интернет-магазина
Большинство ошибок появляется, когда дизайн начинают с главной и баннеров, а каталог, карточку и корзину рисуют по остаточному принципу.
- Слайдер вместо навигации. Главная из сменяющихся баннеров, через которую трудно попасть в категории.
- Одинаковые фильтры для всех категорий. Покупатель видит десятки параметров, из которых нужны два.
- Нет состояний. Не продумано, как выглядят пустая корзина, закончившийся товар, ошибка оплаты, пустой результат фильтра.
- Сюрпризы в конце. Стоимость доставки или минимальная сумма заказа появляются только на последнем шаге.
- Всплывающие окна. Подписка и чат закрывают кнопку покупки на телефоне.
Чек-лист: дизайн интернет-магазина перед запуском
Этот список удобно пройти на телефоне и компьютере, оформив несколько тестовых заказов разными способами.
- из любой карточки понятно, где находишься, и можно перейти в категорию;
- у каждой категории свои фильтры, выбранные фильтры видны и снимаются одним нажатием;
- поиск находит товары по артикулу, с опечаткой и в неправильной раскладке;
- в плитке листинга видны фото, цена, наличие и кнопка покупки;
- в карточке есть цена, наличие, сроки и стоимость доставки, характеристики и отзывы;
- добавление в корзину даёт понятную обратную связь;
- заказ можно оформить без регистрации, в форме только нужные поля;
- итоговая сумма с доставкой видна до перехода к оплате;
- продуманы пустые состояния и ошибки: пустая корзина, нет в наличии, оплата не прошла;
- на телефоне кнопка покупки и корзина всегда под рукой, фильтры открываются в отдельной панели;
- в аналитике настроена воронка: карточка, корзина, оформление, заказ.
Мы проектируем магазины от каталога и сценариев покупателя: сначала разбираем ассортимент, конкурентов и путь покупки, потом рисуем ключевые экраны в мобильной и десктопной версиях. Проекты, включая интернет-магазины, собраны на странице с нашими работами.
Частые вопросы
Сколько страниц нужно нарисовать для дизайна интернет-магазина?
Минимальный набор — главная, категория с листингом, карточка товара, корзина, оформление заказа, страница успешного заказа, поиск и личный кабинет. Каждую ключевую страницу рисуют для телефона и компьютера, плюс состояния: пустая корзина, ничего не найдено, товар закончился, ошибка оплаты. Остальные страницы собираются из тех же компонентов.
Нужна ли регистрация для оформления заказа?
Обязательная регистрация — лишний шаг перед покупкой. Лучше дать оформить заказ как гость по телефону или почте, а после заказа предложить сохранить данные и создать кабинет одним действием. Покупателю, который вернётся, это всё равно пригодится.
Как понять, где интернет-магазин теряет покупателей?
Настроить в аналитике воронку по шагам: просмотр листинга, карточки, добавление в корзину, начало оформления, заказ. Шаг, на котором уходит заметно больше людей, чем на соседних, и есть место для разбора. Дальше помогают записи сессий и карта кликов на этой странице, а также разговоры с менеджерами, которые слышат вопросы покупателей.
Можно ли сделать дизайн магазина на готовом шаблоне?
Для старта с небольшим ассортиментом — можно, если шаблон закрывает нужные фильтры, характеристики и способы доставки. Когда у товаров сложные параметры, есть подбор по совместимости, оптовые цены или своя логистика, шаблон начинает мешать, и дизайн проектируют под конкретный каталог и сценарии покупателей.
