Варианты товара: как выбирать размер, цвет и комплектацию

Выбор меняет заказ, а не украшение карточки

Потеря выбранного размера превращает аккуратную карточку в неверный заказ: покупатель видит нужное исполнение, но цена остаётся от другого варианта, а при добавлении в корзину магазин получает товар, который человек покупать не собирался. Приёмка начинается с соответствия выбранных свойств, цены и наличия. Разберём готовые варианты товара в магазине на 1С-Битрикс: каждое исполнение отличается размером, цветом или составом комплекта. Для демонстрации выбирают такое сочетание, которое легко отличить и на карточке, и в корзине, иначе потеря выбора останется незаметной.

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

Для цветочного гипермаркета ШТАБ ИТ разработал сайт на 1С-Битрикс с каталогом, в котором используются торговые предложения. Я считаю правильным проследить выбор до заказа, потому что цветные кнопки на витрине лишь помогают отметить исполнение, а его точное содержание покупатель принимает на следующем экране. В корзине он узнаёт свой вариант по понятной подписи, а не по общему названию модели.

• Результат выбора назван словами: покупатель понимает, какое исполнение отмечено.
• Стоимость и доступность относятся к этому исполнению, а не к соседнему варианту.
• После добавления в корзину свойства сохраняются и остаются различимыми.

Устройство торговых предложений и обмен с учётной системой подробно разобраны в статье о вариантах товара в Битрикс, здесь же важен результат на экране покупателя.

Какие параметры действительно выбирает покупатель

Размеры и цвета в карточке товара помогают определиться с покупкой, поэтому выбор не стоит смешивать с перечнем всех характеристик. Материал корпуса может быть общим для модели, а объём памяти — менять исполнение. Общие сведения остаются в описании. Изменяемые параметры располагают около цены и действия покупки, чтобы человек видел последствия своего решения.

В стандартной карточке Битрикс параметр «Свойства для отбора предложений» определяет, по каким свойствам группировать варианты. Это указано в документации компонента. Название пригодится при разговоре с исполнителем: маркетолог передаёт перечень различий, которые покупатель выбирает, а специалист настраивает их вывод. Самостоятельно разбираться во внутренних идентификаторах не требуется.

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

• Для размера — обозначение и доступная рядом информация о соответствии размеров.
• Для цвета — название вместе с образцом.
• Для комплектации — состав и отличие от базового исполнения.
• Для отдельной услуги — собственный выбор и цена, если она меняет итог.

Цвет, фотография и название говорят об одном

Цветовой образец сопровождают понятным названием и отметкой выбора, чтобы человек мог различить похожие оттенки, назвать исполнение менеджеру и узнать его в корзине, даже если дисплей изменил цвет или покупатель не различает оттенки. Наведение мыши не означает выбор. Рамка либо другая явная отметка обозначает состояние, а подпись — название цвета. Критерий 1.4.1 стандарта WCAG 2.2 требует передавать смысл не только цветом. В пояснении W3C названы дополнительные способы, в том числе форма и текст. Для магазина из этого следует правило: доступность и выбранный вариант нельзя различать лишь по оттенку заливки. Подпись остаётся понятной и человеку, который не различает эти цвета.

Фото тоже участвует в выборе. В Битрикс для варианта задаются «Дополнительные картинки предложения» — документация описывает отдельное свойство с изображениями. Если у исполнений различается внешний вид, фотографии связывают с выбранным исполнением. Замена только первой картинки при сохранении галереи соседнего цвета вводит в заблуждение. Лучше оставить меньше точных кадров, чем заполнить галерею изображениями, которые противоречат выбору. Во время просмотра увеличенной фотографии название варианта остаётся доступным, а после закрытия изображения выбор сохраняется. Так человек возвращается к покупке того изделия, которое рассматривал, вместо повторного поиска нужного образца среди похожих значений.

Цена относится к выбранной комплектации

Стоимость рядом с кнопкой покупки читается как цена того, что сейчас выбрано. Если на карточке осталась минимальная сумма всей модели, покупатель узнает цену нужного исполнения только в корзине. Это поздно. Приёмочный критерий простой: итог выбора доступен до добавления, а стоимость отдельного дополнения названа отдельно.

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

Расчётный пример: базовое исполнение стоит 2 000 рублей, выбранное — 2 200 рублей. В карточке после выбора видна вторая сумма. В корзине при одной единице получается та же стоимость. Если увеличивается количество, отдельно меняется итог строки, а покупатель по-прежнему видит стоимость единицы. Эти числа иллюстрируют соответствие экранов и не описывают цены реального клиента.

• Нет выбора — ясно, к чему относится минимальная цена.
• Исполнение выбрано — названа его стоимость.
• Количество изменено — различимы цена единицы и сумма строки.
• Появилась доплата — рядом объяснено, какое действие её добавило.

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

Что означает недоступный вариант

Когда сочетание свойств вообще не продаётся, человеку предлагают изменить выбор, а когда исполнение закончилось, объясняют его текущую недоступность и дальнейшее действие. Покупателю, который ищет определённый размер, полезно понять, появится ли он позже или придётся выбирать другую модель.

В Битрикс настройка «Недоступные торговые предложения» позволяет скрыть их, оставить варианты с подпиской либо вывести все. Возможности описаны в справке карточки. Выбор способа отображения поручают специалисту после решения магазина, какие сведения об ассортименте нужны покупателю. Если отсутствие размера временное, различимый недоступный пункт с объяснением обычно информативнее бесследного исчезновения.

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

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

В корзину попадает то, что выбрали

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

У Битрикс параметр «Свойства предложений, добавляемые в корзину» определяет, какие свойства выбранного варианта передавать дальше. Он документирован отдельно от свойств для отбора. Поэтому работающий переключатель на карточке ещё оставляет вопрос к корзине: получит ли она нужные подписи? Приёмку проводят на товаре, варианты которого легко отличить словами, а не только по внутреннему номеру.

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

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

Телефон и клавиатура входят в приёмку

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

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

Критерий 2.1.1 WCAG 2.2 посвящён управлению с клавиатуры, и W3C объясняет, почему мышь не может быть единственным способом выполнить действие. Для выбора варианта это означает возможность добраться до элементов клавиатурой, различить текущую позицию и изменить значение. Конкретные клавиши зависят от вида элемента. Подрядчик демонстрирует весь выбор и добавление в корзину, не трогая мышь.

Особое внимание — возвращению после ошибки. Если нужное сочетание недоступно, человек узнаёт причину и продолжает выбор в том же месте, вместо прыжка к началу карточки, где его прежнее действие уже невозможно понять.

Покупка на чужом телефоне

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

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

Передавая задачу по сайту команде ШТАБ ИТ, назовите адрес карточки, выбранные параметры и экран, на котором исчезло соответствие. Такая заявка описывает воспроизводимое действие. Исполнитель сможет исправить определённый переход, а вы — повторить его и принять результат.