Дизайн интернет-магазина: рисуем состояния, а не страницы
У магазина непохожих экранов мало: каталог, карточка, корзина, оформление. Зато у каждого из них десяток видов, и половина этих видов — те, в которых что-то пошло не так. Товар без фотографии, поиск с опечаткой, фильтр, после которого ничего не нашлось, корзина, в которой цена изменилась с прошлой недели. Витрину рисуют все, а уходят люди именно здесь — причём те, кто уже решил купить и дошёл до конца.
- Карточка рисуется как шаблон на тысячу товаров, а не как одна красивая страница
- Пустой результат поиска и фильтр без совпадений — отдельные нарисованные экраны
- Мобильная корзина проверяется на телефоне с открытой клавиатурой
- Товар с тремя хорошими фотографиями и коротким названием
- Каталог, в котором всё нашлось и всё в наличии
- Корзина с одним товаром и понятной ценой
- Тот же товар без фото, под заказ и с названием в четыре строки
- Фильтр, после которого не нашлось ничего, — и что делать дальше
- Корзина, в которой товар закончился или подорожал
В правой колонке нет ничего изысканного — это обычные будни магазина. Именно поэтому такие экраны и забывают: на защите макета их никто не просит показать, а человек видит их каждый день.
Где магазин теряет покупателя и что чинит макет
Пять ступеней, и на каждой своя причина уйти. Процентов потерь здесь нет намеренно: чужие исследования мы не проверяли, а своей статистики по дизайну у студии нет — выдуманная цифра в блоке про честность стоила бы дороже, чем её отсутствие. Свои проценты вы увидите в собственном счётчике.
-
Каталог: человек не понимает, куда попал
Категории названы внутренними словами, сортировка по умолчанию случайная, а первый экран занимает баннер с акцией, до которой ещё нужно дожить. Человек видит витрину, но не видит своего товара
Рисуем каталог с видимыми фильтрами и понятной сортировкой, а баннеру отводим место, которое не выталкивает товары за экран
-
Фильтр и поиск: не нашлось ничего
Самое частое непрорисованное состояние. Человек выбрал три условия, получил пустую белую страницу и ушёл — хотя подходящий товар в магазине есть, просто на рубль дороже или другого цвета
Рисуем пустой результат как полноценный экран: что снять из условий, что похожее есть рядом, куда нажать, чтобы вернуться на шаг назад
-
Карточка: не хватает одного ответа
Обычно это срок доставки, наличие в нужном варианте или габариты. Человек не пишет в чат — он открывает соседнюю вкладку, где ответ есть. Фотографии при этом могут быть прекрасными: решает не красота, а полнота
Собираем список вопросов, которые задают перед покупкой, и отводим каждому место в шаблоне карточки — включая случай, когда данных нет
-
Корзина: итог не сходится с ожиданием
Цена товара была одна, в корзине стала другая: добавилась доставка, ушла скидка, закончился один из товаров. Если это объясняется мелким серым текстом, человек считает, что его обманули, — и уходит с уже собранным заказом
Рисуем корзину с изменениями: что подорожало, что закончилось, из чего складывается итог и что можно сделать, не начиная заново
-
Оформление: слишком много просят сразу
Регистрация до заказа, десять полей на одном экране, ошибка после нажатия кнопки без указания, где именно. На телефоне к этому добавляется клавиатура, закрывающая половину формы вместе с кнопкой
Разбиваем оформление на шаги, рисуем ошибку рядом с полем и проверяем экран на телефоне в руке — с открытой клавиатурой и пальцем на экране
Шесть групп состояний, которые входят в работу
Это и есть предмет сметы. Не «двенадцать страниц магазина», а вот эти шесть групп: каждая рисуется один раз и работает на весь каталог, сколько бы в нём ни было позиций. Список согласуется до рисования — чтобы потом не выяснилось, что половину экранов «дорисует верстальщик».
В наличии, под заказ, закончился, со скидкой, без фотографии, с названием в четыре строки. Плюс вариант с длинным описанием и вариант, где половина характеристик не заполнена, — так бывает всегда, когда каталог грузится из учётной системы.
Много товаров, мало товаров и ни одного. Последний экран рисуется всерьёз: что снять из условий, что предложить взамен, куда вернуться. Пустая белая страница — это не «редкий случай», а конец пути для человека, который искал именно у вас.
Сколько условий видно сразу, что прячется под «ещё», видно ли число результатов до применения и как выбранное снимается одним движением. На телефоне фильтр — отдельный экран, а не панель сбоку, и рисуется он отдельно.
Пустая, с одним товаром, с десятью, с исчезнувшим товаром и с изменившейся ценой. Отдельно — как человек понимает, что товар добавился: без этого подтверждения люди жмут кнопку дважды и получают два заказа.
Контакты, доставка, оплата, подтверждение. На каждом шаге видно, сколько осталось и из чего складывается итог. Ошибка показывается рядом с полем, а не сверху общим списком, и введённое не пропадает при возврате назад.
Оплата не прошла, адрес вне зоны доставки, промокод не подошёл, связь пропала на последнем шаге. Всё это происходит после того, как человек уже решил купить, — и именно поэтому такие экраны стоят дороже красивых.
Отдельная строка про мобильную версию: она не «адаптируется», а рисуется. Каталог с фильтром, карточка с галереей и корзина на телефоне устроены иначе, чем на широком экране, — и проверяются на живом устройстве, а не в уменьшенном окне браузера.
Проверьте свои состояния — семь попыток сломать магазин
Делать это нужно с телефона и на своём же магазине. Каждая проверка занимает полминуты, и после них вы будете знать о своём каталоге больше, чем показывает любой отчёт. Отметки остаются в этом браузере и никуда не отправляются.
Вердикт появится после первой отметки. Считается он от числа непройденных проверок: сойтись должны все семь, потому что каждая из них — это заказ, который человек уже собрался оформить.
Сходится 0 из 7
Если проверок не прошло две-три, это не повод рисовать магазин заново: недостающие состояния дорисовываются к существующему макету отдельной работой и стоят заметно меньше. Мы скажем это на разборе — и назовём, какие именно экраны нужны.
Прислать адрес магазина
Не прошли две-три проверки?Пришлите адрес магазина и напишите, какие именно. Скажем, дорисовываются ли эти экраны к вашему макету или дело в вёрстке и движке, — и во что примерно обойдётся. Без счёта и без созвона, если он не нужен.
Написать в Telegram Когда наши услуги не нужныШесть вопросов покупателя, на которые отвечает макет
Ни один из них человек вам не задаст: он просто откроет соседнюю вкладку, где ответ есть. Поэтому в шаблоне карточки у каждого вопроса должно быть своё место — включая случай, когда ответа пока нет и это надо честно показать.
-
«Мне подойдёт?»
Размер, габариты, совместимость, мощность — то, что человек сверяет со своим случаем. В макете это значит место для таблицы характеристик, которая читается на телефоне, и для подсказки «как выбрать размер». Если характеристики грузятся из учётной системы и заполнены наполовину, шаблон должен выдерживать и это.
-
«Когда привезут?»
Срок доставки — второй по частоте вопрос и первый по влиянию на решение. Он нужен на карточке, а не только на отдельной странице «Доставка и оплата»: до неё доходят единицы. В шаблоне под него отводится строка рядом с ценой, и в ней должен помещаться ответ вида «завтра», «на следующей неделе» и «уточним после заказа».
-
«Сколько итого?»
Цена товара — не то же самое, что сумма к оплате. Доставка, сборка, подъём, комиссия, скидка по промокоду — всё это должно быть видно до кнопки, а не после. Разрыв между ожиданием и итогом читается как обман, даже когда всё честно: просто человек узнал об этом позже, чем принял решение.
-
«Точно есть в наличии?»
«Под заказ», «мало», «нет» — три разных состояния с тремя разными следующими шагами, и каждое рисуется. Самое дорогое здесь — честность: магазин, который показывает наличие как есть, теряет часть заказов сразу и почти не теряет людей насовсем. Магазин, который скрывает, теряет их один раз и навсегда.
-
«А если не подойдёт?»
Условия возврата ищут перед покупкой, а не после. В макете под них место рядом с кнопкой, короткой строкой и без юридического языка: развёрнутый текст живёт на своей странице, а здесь нужен ответ на вопрос «рискую ли я». Особенно это заметно там, где товар дорогой и выбирают долго.
-
«Чем это отличается от соседнего?»
Когда в каталоге пять похожих позиций, человек либо сравнивает, либо уходит думать и не возвращается. В шаблоне под это — заметное отличие в самой карточке списка и понятный способ сравнить, а не только красивая фотография. Сравнение, которое нельзя сделать глазами за полминуты, делают в другом месте.
Сколько стоит: от 140 000 ₽, срок 5–7 недель
Своей цены у формата нет: магазин считается по второй смете направления, и сумма подставлена из того же канона, что и на родительской странице. Меняется она не от числа товаров — их может быть сорок или сорок тысяч, шаблон один, — а от числа состояний и от того, есть ли у вас уже структура каталога. Все три сметы описаны на странице направления
- Согласованный список состояний — до рисования, чтобы спорить о нём было дёшево
- Шаблоны каталога, фильтра и карточки со всеми видами из списка
- Корзина и оформление по шагам, включая отказы и ошибки оплаты
- Мобильные макеты: фильтр отдельным экраном, галерея, липкая кнопка покупки
- Набор компонентов магазина: карточки, кнопки, поля, метки наличия и скидки
- Передача разработчику и ответы на его вопросы до сдачи
- Вёрстка, движок и запуск. Это разработка магазина, и дизайн там внутри работы
- Обмен с учётной системой: остатки, цены, заказы. Макет показывает, что делать при расхождении, но обмен настраивает разработка
- Фотосъёмка товара и обработка снимков — зависят от города, объёма и предметника, называем после разбора
- Наполнение каталога: описания, характеристики, категории. Мы задаём правила, заполняете вы или ваш контент-менеджер
- Доработки после сдачи — по часам: 3 000 ₽ вне договора и 2 000 ₽ в абонементе
Число товаров на смету не влияет. Влияет число непохожих типов товара: если у вас одновременно продаются мебель с габаритами, услуги с записью и цифровые файлы, карточек будет три, а не одна. Это мы считаем на разборе и показываем списком до счёта.
Почему карточка товара — это не страница, а шаблон
Отсюда растёт половина различий между дизайном магазина и дизайном обычного сайта. Карточку рисуют один раз, а работает она на весь каталог — и значит, проверять её надо не на лучшем товаре, а на худшем.
Три шага, и третий объясняет, почему списки состояний согласуются до рисования.
- в карточку подставляются данные Название, цена, остаток, характеристики, фотографии — всё это приезжает из учётной системы и меняется каждый день. Дизайнер не рисует товар: он рисует рамку, в которую этот товар встанет, каким бы он ни был
- ломается рамка на краях Название в четыре строки вместо одной. Двадцать характеристик вместо пяти. Ни одной фотографии. Цена со скидкой, которой нет. Товар, закончившийся между добавлением в корзину и оформлением. Каждый такой случай в жизни встречается, а в макете — нет
- поэтому рисуется худший случай Макет проверяется на самом неудобном товаре каталога, а не на самом красивом. Если рамка выдержала его, она выдержит и остальные. Это и есть работа: не «нарисовать карточку», а нарисовать её так, чтобы верстальщику не пришлось ничего додумывать за вас
Практический вывод для приёмки, который работает с любым подрядчиком: попросите показать карточку на товаре без фотографии и каталог после фильтра, где ничего не нашлось. Ответ «это же редкий случай» означает, что эти экраны придумает верстальщик — и вы увидите их одновременно с покупателями.
Что останется у вас после работы
Список отличается от обычного дизайн-проекта двумя пунктами — правилами фотографии и спецификацией состояний. Оба нужны не нам, а вашим людям: тем, кто будет добавлять товары через год, когда наша работа давно закончится.
Правила фотографии товара — самый недооценённый пункт списка. Каталог выглядит целым не из-за дизайна, а из-за того, что снимки сделаны одинаково: один фон, одно расстояние, одна доля кадра. Без правил через полгода в каталоге соседствуют студийный кадр и фотография на складе с телефона, и никакой макет это не спасёт.
- Файл в Figma на вашем аккаунте с правами редактирования и историей версий
- Макеты всех согласованных состояний: каталог, фильтр, карточка, корзина, оформление
- Мобильные макеты отдельными файлами, включая фильтр и галерею
- Набор компонентов магазина: карточки, метки наличия и скидки, кнопки, поля
- Правила фотографии товара: фон, кадрирование, доля предмета, минимальный размер
- Спецификация состояний для разработчика: что показывать, когда данных нет
- Экспортированные иконки и изображения в нужных размерах
- Ссылка на прототип, которую можно показать кому угодно без установки программ
Эта страница — один из девяти форматов дизайна
Всё, что одинаково для любого дизайн-проекта, живёт на родительской странице: три сметы, порядок работы, гарантии, чем мы отличаемся от фрилансера и агентства. Здесь только то, что относится к магазину, — иначе девять страниц семьи превратились бы в девять копий одного текста.
Там же написано про исходники и итерации правок — общие правила студии, одинаковые для всех девяти форматов. Дизайн сайтов и интерфейсов
Когда дизайн магазина вам не нужен
Четыре случая. В первом мы отговариваем от работы вовсе, в остальных трёх называем, какая работа нужна вместо, — и делаем это на разборе, до счёта.
-
Если позиций мало и они почти не меняются
Десяток товаров, которые вы знаете наизусть, — это не каталог, а витрина. Состояний у неё почти нет: всё в наличии, у всего есть фотографии, фильтр не нужен. Такой магазин собирается на готовой теме и стоит кратно дешевле, а рисованный дизайн окупится только тогда, когда позиций станет много.
-
Если нужен работающий магазин, а не макеты
Мы отдаём файлы, а не витрину в браузере. Движок, корзина, оплата, обмен остатками с учётной системой — это разработка интернет-магазина, и дизайн входит в неё. Если своей команды разработки нет, отдельный дизайн окажется половиной пути, оплаченной целиком.
-
Если продажи идут в мессенджере
Когда покупают из Telegram и ассортимент небольшой, полноценный магазин часто не нужен вовсе: экран внутри мессенджера ближе к покупателю и не требует ни регистрации, ни ввода телефона. Тогда ваш случай — дизайн Mini App. Если же магазин на сайте уже есть и нужно, чтобы он ставился на телефон, — это PWA, и там же объяснена разница между ним и Mini App.
-
Если товара нет в наличии, а сроки плавают
Это не дизайнерская задача. Никакая карточка не удержит человека, если после заказа выясняется, что товар приедет через месяц; наоборот, хороший магазин ускорит разочарование. Сначала честные остатки и сроки в системе, потом макеты — и мы скажем это прямо, даже если работа сорвётся.
Во всех четырёх случаях мы называем, что делать вместоСписок таких ситуаций по всем услугам студии собран на отдельной странице — вместе с причинами.
Когда вам это не нужноКому в соседний формат, а не сюда
Соседние страницы отличаются не глубиной работы, а её предметом. Здесь предмет — состояния каталога и корзины. Если продавать вы собираетесь в другом месте или каталога у вас нет вовсе, честнее уйти отсюда сейчас.
Нижние границы всех направлений собраны на странице цен. Не понимаете, какой формат ваш, — это нормально: на разборе мы называем не сумму, а предмет работы и то, что останется у вас на руках.
Дизайн интернет-магазина: что стоит знать до заказа
Почему смета магазина не зависит от числа товаров
Товары не рисуются. Рисуется рамка, в которую они встают: шаблон карточки, шаблон списка, правила для фотографий. Сорок позиций и сорок тысяч дают одинаковый объём работы, если тип товара один, — разница будет в наполнении каталога, а это отдельная задача и обычно не дизайнерская.
А вот число непохожих типов товара влияет напрямую. Мебель с габаритами и сроком доставки, услуга с записью на время и цифровой файл, который приходит на почту, — это три разные карточки: у них разные поля, разные кнопки и разные состояния. Поэтому на разборе мы спрашиваем не «сколько у вас позиций», а «чем они отличаются друг от друга по способу покупки».
Второй множитель — состояния. Их список согласуется до рисования и становится предметом сметы: видно, за что вы платите, и видно, что решено не делать. Это же защищает от самой частой претензии на приёмке — «а почему этого экрана нет»: если его нет в списке, его нет и в цене, и обе стороны знали об этом с самого начала.
Готовая тема или свой дизайн
Готовая тема выигрывает, когда ассортимент небольшой и однородный, а способ покупки простой. Она стоит кратно дешевле, ставится за дни и уже содержит те самые состояния, которых не хватает многим рисованным макетам: пустой фильтр, товар без фото, ошибку оплаты. Это не компромисс, а разумный выбор, и мы говорим об этом прямо, хотя своей работы при таком ответе не получаем.
Своя отрисовка окупается в двух случаях. Первый — когда способ покупки не помещается в стандартную тему: подбор по параметрам, расчёт под размер, заказ с замером, несколько типов товара в одном каталоге. Второй — когда магазин уже работает и его надо не сделать, а изменить: тема правится ограниченно, и каждая новая правка накладывается на предыдущую, пока проще не становится перерисовать.
Промежуточный вариант тоже существует и часто оказывается лучшим: оставить тему и дорисовать к ней недостающие состояния. Это дешевле полного дизайна, быстрее и не требует переделки вёрстки. Мы предлагаем такой путь, когда видим, что магазин в целом работает, а спотыкается в трёх местах.
Что проверить в макете до того, как он уйдёт в вёрстку
Первое — карточку на худшем товаре каталога: без фотографии, с названием в четыре строки, с половиной незаполненных характеристик. Если она выдержала, выдержит и остальные. Второе — каталог после фильтра, в котором ничего не нашлось: этот экран человек видит чаще, чем кажется, и именно на нём заканчиваются поиски у многих магазинов.
Третье — корзину, в которой товар закончился или изменилась цена. Четвёртое — оформление на телефоне с открытой клавиатурой. Пятое — подтверждение заказа: что человек видит и что получает на почту. Эти пять проверок закрывают большую часть того, что обычно всплывает после запуска, и сделать их можно самостоятельно, не разбираясь в дизайне.
Если магазина ещё нет и нужен он целиком, а не макеты, смотрите разработку интернет-магазина: дизайн там входит в работу. Если магазин есть и вопрос в том, как он продаёт, а не как выглядит, — это работа над конверсией. Три сметы направления с составом каждой описаны на странице дизайна
Вопросы про дизайн магазина
Шесть вопросов, которые задают именно про каталог и корзину. Общие — про договор, оплату и гарантии — собраны на отдельной странице, а про дизайн вообще написано на странице направления
Остался вопрос?
Написать в Telegram, отвечаем за 30 минутНет. Карточка — это шаблон, и рисуется он один раз независимо от того, сколько позиций в него встанет. Смета меняется от другого: сколько у вас непохожих типов товара по способу покупки и сколько состояний мы договорились нарисовать. Вторая смета направления — от 140 000 ₽, срок 5–7 недель; окончательный состав называем после того, как разложим ваш каталог по типам.
Часто — да, и мы скажем это прямо, хотя работы при таком ответе не получаем. Тема выигрывает, когда ассортимент однородный, а способ покупки обычный: она дешевле, ставится за дни и уже содержит состояния, которых не хватает многим рисованным макетам. Своя отрисовка окупается там, где способ покупки в тему не помещается — подбор по параметрам, расчёт под размер, несколько типов товара сразу, — или где магазин уже работает и его надо менять, а не собирать.
Ровно те, которые попали в согласованный список, — и список этот составляется до рисования, а не в процессе. Обычно в него входят шесть групп: карточка, каталог и пустой результат, фильтры, корзина, оформление по шагам, отказы и ошибки. Список показывается до счёта, и в нём видно не только что мы делаем, но и что решили не делать. Это честнее, чем «нарисуем всё»: «всё» не бывает, а спор об этом на приёмке стоит дорого обеим сторонам.
В этом формате — нет, здесь вы покупаете макеты и спецификацию состояний. Вёрстка, движок, корзина, оплата и обмен остатками — это разработка магазина, и дизайн там внутри работы. Макет при этом описывает, что показывать при расхождении данных: товар пропал из остатков, цена изменилась, характеристика не заполнена. Настраивает обмен разработка, а рисуем поведение мы — и делаем это до того, как оно понадобится.
Сначала честно: дизайн этого не исправит, а хороший макет сделает разнобой заметнее. В работу входят правила съёмки — фон, кадрирование, доля предмета в кадре, минимальный размер, — по ним снимать может кто угодно, включая вашего сотрудника с телефоном. Сама съёмка и обработка считаются отдельно: цена зависит от города, объёма и предметника, и называть вилку заранее мы не станем — она будет выдуманной.
Да, и на магазине это критичнее, чем на обычном сайте. На телефоне фильтр — не панель сбоку, а отдельный экран с подтверждением; галерея листается пальцем; кнопка покупки прилипает к низу и обязана уживаться с клавиатурой при вводе количества. Проверяем мы это на живом устройстве: в уменьшенном окне браузера нет ни клавиатуры, ни пальца, закрывающего треть экрана, поэтому там всё всегда выглядит хорошо.
Пришлите адрес магазина — сломаем его вместе
- Полчаса: проходим каталог, карточку и корзину на телефоне и ищем непрорисованные состояния
- Скажем, дорисовываются ли находки к текущему макету или дело в вёрстке и движке
- Если возьмёмся — от 140 000 ₽, срок 5–7 недель, исходники и набор ваши
Заявка принята
Пройдём ваш каталог своими руками и вернёмся в течение рабочего дня. Если срочно — напишите в Telegram.
Или напишите сразу:
Telegram · отвечаем лично за 30 минут