Редакция DDRW ·

Варианты товара и дополнительные опции: как сделать выбор понятным

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

Три разновидности объёмного изделия на подиуме; центральный вариант выделен прозрачной рамкой

Сначала определите, что именно выбирает покупатель

Одна карточка может объединять несколько способов получить продукт. Размер футболки, объём упаковки или формат консультации меняют выбранную позицию. Подарочная упаковка или дополнительная настройка дополняют её. Для посетителя эта разница должна быть понятна без знакомства с устройством каталога.

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

Разделите разновидности и дополнения

Условный пример — консультация о цифровом продукте. Доступны онлайн-встреча за 5 000 ₽ и встреча с выездом команды за 10 000 ₽. Это два альтернативных формата одной услуги. Их не стоит показывать как независимые флажки: посетитель может случайно выбрать оба и решить, что покупает пакет встреч. Лучше предложить один явный выбор формата.

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

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

Если разновидности равноценны по назначению, удобно заранее выбрать первый доступный вариант. Тогда цена и кнопка покупки сразу относятся к конкретной позиции. В приведённом примере посетитель видит выбранную онлайн-консультацию и её стоимость. Это рекомендация для такого каталога; для подбора по индивидуальным параметрам может понадобиться отдельный обязательный выбор.

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

Свяжите цену с выбранным состоянием

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

Для условной консультации переход на выездной формат должен показать 10 000 ₽, указать необходимость согласовать место и время и сохранить выбранный формат рядом с кнопкой. Нельзя заранее обещать доступность команды на любой день. Для физического товара полезно показать выбранный размер, комплект и наличие, чтобы человек не искал эти сведения в длинном описании.

Определите правила количества и доступности

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

Особенно важно определить последствия изменения доступности после открытия страницы. Посетитель мог оставить карточку открытой, а вариант уже закончился или снят с продажи. При добавлении в корзину и перед оформлением система должна проверить актуальные условия и понятным сообщением предложить исправить выбор. Неподтверждённая цена из открытой вкладки не должна сама становиться основанием для оплаты.

Сохраните выбор в корзине

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

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

Проведите короткую проверку карточки

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

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

Повторите проверку на телефоне: длинные подписи не должны скрывать цену или выбранное состояние. Попросите человека, не участвовавшего в проектировании, объяснить, что именно он покупает. Его ответ покажет, какие формулировки нужно уточнить. Структуру вариантов и правила заказа удобно согласовать до разработки интернет-магазина, когда изменение модели каталога ещё не затрагивает заполненные карточки и существующие заказы.

Услуги и проекты по теме

Обсудим вашу задачу

Пришлите описание продукта, текущий сайт или список вопросов. Уточним состав работ и предложим следующий шаг для оценки проекта.

Связаться с DDRW
Все материалы