Web Design · Гид
Карточка товара
Фотографии, цена, варианты, доставка и кнопка. Разбираем порядок элементов, работу с галереей и то, где чаще всего теряется покупатель.
Дизайн интернет-магазинов
Витрина, каталог и касса в одном интерфейсе
Дизайн электронной коммерции: карточка товара, каталог и фильтры, корзина и оформление заказа, фотография товара, мобильная покупка.
Витрина, каталог и касса в одном интерфейсе
Электронная коммерция отличается от других интерфейсов тем, что каждый её экран измеряется деньгами. Карточка товара, фильтры каталога и форма оформления — это места, где покупатель либо остаётся, либо уходит, и причины ухода известны и повторяются.
Исследования брошенных корзин из года в год дают схожую картину: на первом месте неожиданные дополнительные расходы, затем обязательная регистрация, сложный процесс и недоверие к оплате. Все четыре причины устраняются дизайном, а не скидками.
Что должно быть на первом экране карточки
На мобильном первый экран — это примерно 600 пикселей высоты, и в них должно поместиться всё, что нужно для решения.
- Изображение с возможностью увеличить.
- Название товара.
- Цена — конкретная, а не «от».
- Выбор варианта с показом недоступных.
- Кнопка добавления в корзину.
Фотография как описание
В электронной коммерции изображение выполняет работу, которую в офлайне делают руки: показывает материал, размер, качество швов и то, как предмет выглядит в реальности. Минимальный набор — общий план, макро фактуры, контекст использования и масштаб относительно понятного объекта.
Точность цвета здесь не только про доверие: существенное расхождение цвета товара с изображением может трактоваться как введение покупателя в заблуждение.
Что читать в этой теме
Материалы разбирают карточку товара, каталог и фильтры, оформление заказа, требования к предметной фотографии и специфику мобильной покупки.
Коротко
- Почему покупатели бросают корзину?
- Четыре повторяющиеся причины: неожиданная стоимость доставки, обязательная регистрация, слишком долгий процесс и недоверие к способам оплаты. Все устраняются дизайном: показать итоговую сумму заранее, разрешить заказ без аккаунта, уместить оформление в один экран.
- Сколько фотографий нужно в карточке товара?
- Минимум четыре: общий план на нейтральном фоне, макро фактуры или детали, предмет в контексте использования и масштаб относительно понятного объекта. Для мебели и декора обязательна схема с габаритами.
- Как показывать недоступные варианты товара?
- Зачёркнутыми, но видимыми. Скрывать отсутствующие размеры и цвета нельзя: покупатель решит, что их не существует, и уйдёт. Смена варианта обязана менять фотографию — иначе доверие разрушается мгновенно.
- Пагинация или бесконечная прокрутка в каталоге?
- Для каталога — пагинация или кнопка «Показать ещё». Бесконечная прокрутка ломает возврат из карточки к списку и делает недостижимым подвал с контактами и условиями доставки. Она уместна в лентах, где нет конкретной цели.
Главный материал темы
Все материалы темы
Каталог и фильтры
Сколько товаров показывать в ряд, какие фильтры выносить наверх, как быть с пустой выдачей и почему бесконечная прокрутка вредит каталогу.
Оформление заказа
Обязательная регистрация, скрытая доставка, слишком много шагов и неудобная оплата. Разбираем причины брошенных корзин и то, что с ними делать.
Фотография товара
Свет, фон, ракурсы, цветопередача и масштаб. Разбираем, какие снимки нужны для каждой категории и почему цвет на фото — юридический вопрос.
Мобильная покупка
Зоны досягаемости, клавиатура, перекрывающая половину экрана, и жесты браузера. Разбираем специфику мобильной электронной коммерции.