Содержание
Дизайн интернет-магазина — это прежде всего повторяющиеся экраны: листинг, карточка, корзина, оформление. Главную видит часть покупателей, а через карточку проходит каждый, кто что-то купил. Поэтому время проекта распределяем по важности сценариев, а не по порядку страниц в меню.
Листинг: что видно без клика
В списке человек сравнивает, поэтому карточка листинга показывает всё, что нужно для решения «открыть или пролистать»: фото, название, цену, наличие, иногда рейтинг и главный параметр — объём, размер, мощность. Остальное — внутри. Если в карточку списка сложить всё сразу, взгляду не за что зацепиться.
На компьютере в строку обычно ставят три-четыре карточки, на телефоне — одну или две. Два столбца на маленьком экране удобны для одежды и декора, где решает фото, одна колонка — для техники, где нужно прочитать характеристики. Этот выбор делаем на прототипе вместе с вами.
Карточка товара на телефоне
На телефоне карточка превращается в длинную ленту, и главное — не потерять в ней решение о покупке. Сверху — фото, которые листают пальцем, под ними название, цена и наличие, затем выбор размера или цвета и кнопка. Когда человек прокручивает к характеристикам и отзывам, кнопка покупки остаётся внизу экрана вместе с ценой.
Характеристики удобнее показывать короткой таблицей с раскрытием полного списка, а отзывы — с фильтром по оценке. Если у позиции есть варианты, при выборе меняются фото и цена: покупатель должен видеть именно то, что положит в корзину.
Цены и цифры
В магазине много цифр: цены, размеры, остатки, сроки доставки. Их набираем шрифтом, в котором цифры одинаковой ширины и хорошо различаются — 1 и 7, 3 и 8. Цена в листинге и карточке — самый крупный текст после названия. Если в каталоге есть цена за штуку и за упаковку, оба значения подписаны, чтобы человек не гадал, за что платит.
Фильтры: сбоку или сверху
Боковая колонка подходит каталогам с большим числом параметров: запчасти, электроника, стройматериалы. Горизонтальная панель — там, где параметров немного и важнее показать сами вещи: одежда, подарки, мебель. На телефоне оба варианта превращаются в отдельный экран, и главное на нём — кнопка применения с числом найденных позиций.
Отдельно продумываем пустой результат. Если сочетание фильтров ничего не находит, человек должен понять, какой параметр снять, а не упираться в белую страницу.
Оформление заказа: одна страница или шаги
Одностраничное оформление удобно, когда полей мало: имя, телефон, адрес, способ оплаты. Шаги нужны, если есть выбор доставки с разными условиями, покупки от юридических лиц или пункты выдачи на карте. В обоих случаях итог виден постоянно, а переход назад не стирает введённое.
Способы доставки и оплаты показываем с ценой и сроком прямо в списке выбора. Неожиданности на последнем шаге — частая причина вернуться к сравнению магазинов, и лучше, если их нет совсем. Если платёжный сервис поддерживает быстрые способы оплаты, их кнопки ставим первыми: ввод данных карты на телефоне — самый утомительный шаг.
Когда товара нет
В любом каталоге есть позиции, которые закончились, ждут поставки или продаются под заказ. Для них в макетах предусмотрены отдельные состояния: цена остаётся на месте, вместо кнопки покупки — «Сообщить о поступлении» или срок поставки, рядом — похожие вещи. Пустая страница или удалённая карточка хуже любого из этих вариантов: человек уходит за тем же товаром к конкуренту.
Оптовым покупателям — свои экраны
Если магазин продаёт и в розницу, и оптом, у оптовика другие задачи: заказать списком по артикулам, увидеть цену по договору, повторить прошлую поставку, скачать счёт. Эти сценарии рисуем отдельно, чтобы розничному покупателю они не мешали, а оптовому не приходилось собирать заказ по одной позиции.
Как смотреть примеры дизайна магазинов
Подборки красивых магазинов полезны, если смотреть на них глазами покупателя. Откройте пример с телефона, найдите вещь через поиск, примените два-три фильтра, положите её в корзину и дойдите до оплаты. Так видно, как решены экраны, которых нет на картинке для подборки.
Присылайте нам примеры с комментарием, что понравилось: удобный фильтр, крупные фото, короткая форма. Это полезнее ссылки на главную, где видна только обложка.
Дизайн под платформу магазина
У готовых платформ и тем своя логика корзины и кабинета: переделывать её целиком дорого, поэтому макеты строим в её рамках и меняем то, что заметно покупателю. При собственной разработке свободы больше, и тогда особенно важен UI-кит: каждый элемент описан вместе с состояниями, и программистам не приходится угадывать.
Если у магазина есть самовывоз и курьеры в Волгограде, в оформлении пригодятся карта пунктов выдачи и выбор интервала доставки — их рисуем, когда это позволяет логистика.
