Редакция Romanov Lab · Опубликовано
Покупатель нажал «Синий», но увидел бежевую фотографию, оставшуюся от предыдущего выбора. Даже если артикул в корзине правильный, интерфейс заставляет сомневаться. Ошибка особенно неприятна, когда вариант отличается материалом, рисунком или формой, а не только названием цвета.
Задача решается связью между идентификатором исполнения и проверенным набором изображений. Красивой галереи недостаточно: нужно задать порядок выбора файлов, поведение при их отсутствии и согласованность на всех шагах покупки.
Опишите фотографии по назначению
Для каждого файла храните товар или вариант, тип ракурса, порядок, текстовое описание и статус проверки. Условные роли: общий вид, вид сзади, фактура, маркировка, комплектация, схема размеров. Один файл может быть общим для нескольких исполнений, если изображаемая информация действительно одинакова.
Имена файлов полезны редактору, но не должны быть единственным механизмом связи. Переименование blue-final-2.jpg не должно менять принадлежность изображения. Используйте устойчивые идентификаторы и явные назначения в каталоге.
В многомерном товаре разделите визуальные признаки. Размер M и L может использовать одну фотографию одинакового цвета, если внешний вид и пропорции не вводят в заблуждение. Но для разных объёмов бутылки, конструкции корпуса или рисунка ткани общее фото может быть недостаточным. Правило наследования утверждается для категории, а исключения задаются отдельно.
Задайте безопасный порядок наследования
- Проверенная фотография точного исполнения.
- Изображение группы исполнений с одинаковым подтверждённым внешним видом.
- Общий технический ракурс, который не противоречит выбору.
- Ясное сообщение об отсутствии фотографии выбранного исполнения.
Последний пункт лучше случайной картинки другого цвета. Если общая фотография показывает другое исполнение, подпишите её прямо: «На фото другой цвет; фотография выбранного варианта пока не добавлена». Для товара, где оттенок критичен, такой резервный показ может быть недостаточным для продажи; это решение принимает владелец каталога.
Не обещайте точного соответствия оттенка экрану. Освещение съёмки, обработка и дисплей меняют восприятие. Название цвета и реальный образец материала помогают там, где фотография не может дать гарантии.
Учебный пример: кресло с тремя тканями
У вымышленного кресла есть серая, синяя и зелёная обивка, а также два типа основания. Схема размеров относится к обоим основаниям только после проверки; общий вид зависит сразу от ткани и основания. Макроснимок фактуры зависит от ткани, но не от основания.
Если хранить одну папку на цвет, при смене основания можно показать неверные ножки. Если дублировать всю галерею для каждой комбинации, возрастает объём ручной работы и риск устаревших схем. Решение — назначать изображения по проверенным условиям: общий вид конкретной комбинации, фактура конкретной ткани, схема конкретной конструкции.
Покупатель выбирает синюю ткань и деревянное основание. Система собирает галерею по этим признакам, выбирает общий вид первым, затем фактуру и соответствующую схему. Если общего вида нет, не подменяет его серым креслом на металлическом основании без пояснения.
Синхронизируйте выбор и асинхронную загрузку
Типичный дефект возникает при быстрых переключениях. Запрос для синего варианта отправился первым, для зелёного — вторым. Ответ зелёного пришёл быстрее, затем запоздавший синий перерисовал экран. В результате подпись и цена относятся к зелёному, а фотография — к синему.
Привязывайте результат загрузки к идентификатору текущего выбора или версии запроса. Перед обновлением галереи проверяйте, что ответ ещё актуален. Старая загрузка может завершиться и попасть в кэш, но не должна менять текущую карточку.
При переключении сохраняйте устойчивую область изображения, показывайте понятное состояние загрузки и обновляйте описание вместе с файлом. Кнопка добавления должна отправлять выбранный вариант. Нельзя определять его по текущей картинке или её порядковому номеру.
Если нужный файл не загрузился, оставьте название выбранного исполнения и сообщение о проблеме. Предусмотрите повторную загрузку без сброса выбора. Ошибка изображения не должна сама переключать покупателя на другой продаваемый вариант.
Сделайте выбор понятным без цвета
У образца цвета должно быть доступное название: «Тёмно-синий», «Натуральный дуб», «Рисунок: клетка». Выбранное состояние обозначают текстом, отметкой или формой, а не только оттенком рамки. Это соответствует принципу WCAG о недопустимости передачи смысла одним цветом.
Подпись изображения описывает полезное содержание. Например: «Кресло, синяя ткань, деревянное основание, вид сбоку». Не нужно повторять цену, рекламные эпитеты и все характеристики в alt. W3C рекомендует передавать текстовой альтернативой смысл информативного изображения; её формулировка зависит от роли конкретного снимка.
При управлении клавиатурой должны быть доступны и выбор исполнения, и миниатюры галереи. Смена фотографии не переносит фокус произвольно. О состоянии выбранного варианта можно сообщить коротким текстом, не озвучивая заново всю карточку после каждого нажатия.
Проверьте путь до заказа
Связь файла с вариантом нужна не только в карточке. Миниатюры корзины, оформления и истории заказа должны помогать проверить тот же выбор. Сохраните в заказе точный идентификатор, название исполнения и достаточное описание. Если важна историческая фотография, заранее определите её версионирование: замена текущего файла не должна незаметно менять доказательное представление старого заказа.
Регулярная проверка контента ищет варианты без основного изображения, файлы без назначения, неподтверждённое наследование и несоответствие текста цвету. Такие ошибки лучше показывать редактору до публикации, чем собирать по обращениям покупателей.
Приёмка на неудобных сценариях
- Быстро переключить три цвета при медленной сети. Последний выбор остаётся последним после завершения всех загрузок.
- Открыть прямую ссылку на определённое исполнение. Заголовок выбора, изображение и добавляемый артикул согласованы.
- Удалить основной файл одного варианта. Сайт показывает предусмотренный резервный сценарий.
- Сменить второй параметр, влияющий на внешний вид: основание, материал или объём.
- Добавить товар, вернуться назад и открыть корзину. Миниатюра и описание не откатываются к варианту по умолчанию.
- Пройти выбор без мыши и проверить понятность названий образцов.
Итог работы — матрица назначений фотографий и проверенный переход от выбора к заказу. Это позволяет расширять ассортимент без надежды на то, что редактор каждый раз вручную угадает правильную папку.
Нужен план для вашего проекта? Напишите нам в Telegram или по электронной почте. Обсудим разработку, продвижение или поддержку сайта.
