Галерея товара: как показывать фотографии, детали и масштаб

Состав снимков для выбора

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

Назначение каждого кадра

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

• Общий вид. Видна форма предмета целиком, без обрезанных частей, существенных для выбора.
• Деталь. Крупный план показывает нужный узел, текстуру или крепление, а не повторяет главный кадр с небольшим сдвигом.
• Масштаб. Размер объяснён измерением или понятным сравнением, которое не искажает пропорции предмета.
• Комплект. Можно различить то, что входит в покупку, и предметы, использованные для демонстрации.

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

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

Правда о варианте и комплекте

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

Привязка изображений

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

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

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

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

Редакционная проверка

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

Увеличение без тупика

Крупный просмотр имеет смысл, если он открывает больше различимых подробностей. Растянутый маленький файл лишь занимает экран и создаёт дополнительное действие перед возвращением к выбору.

Содержание увеличения

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

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

Для окна, которое блокирует остальную страницу, W3C описывает модальный диалог: Tab и Shift+Tab перемещают фокус внутри, Escape закрывает окно, после закрытия фокус обычно возвращается к вызвавшему элементу. На демонстрации эту последовательность проходят без мыши. Если просмотр сделан иначе, исполнитель объясняет соответствующее поведение. Называть любой большой снимок модальным окном автоматически не нужно.

• Увеличенный кадр открывается для той миниатюры, которую выбрали.
• Закрытие возвращает в ту же карточку и к тому же варианту товара.
• Кнопки поверх фотографии различимы, их названия понятны при использовании средств доступности.
• Поворот телефона не оставляет изображение или крестик вне доступной области.

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

Перелистывание пальцем и клавишами

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

Управление без догадок

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

Руководство W3C по каруселям описывает управление с клавиатуры и возможность приостановить автоматическое движение. Таймер мешает изучать деталь. Для товарной галереи предпочтительно ручное перелистывание: покупатель сам решает, когда закончил рассматривать снимок.

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

У тонкой стрелки может быть просторная область нажатия, поэтому по одному рисунку в макете нельзя оценить управление: на телефоне испытывают соседние кнопки и выясняют, удаётся ли открыть нужный кадр с первого касания. В критерии 2.5.8 ориентир составляет 24 на 24 CSS-пикселя с исключениями, учитывающими также расстояние между целями. Для частого мобильного действия можно выбрать более просторную область. Это решение принимают по удобству. Уменьшать её до формального минимума ради плотного дизайна незачем.

Текстовые альтернативы

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

Приёмка после наполнения

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

Набор товаров для испытания

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

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

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

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

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

Достаточный набор для публикации

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

Количество снимков вторично. Лишний ракурс не компенсирует отсутствие информации о комплекте или неработающую кнопку закрытия.

Финальный лист

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

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