Изображение может сделать опцию продукта более понятной, но только если покупатель может понять, что оно представляет и выбрано ли оно. Ряд привлекательных цветных квадратов не является улучшением, когда клиенты не могут различить два похожих оттенка или узнать, какой размер недоступен.
Improve Options Design PRO может представлять значения нативных опций OpenCart в виде изображений или текста и использовать глобально настроенные или специфические для продукта изображения опций. Используйте эти возможности, чтобы объяснить выбор, затем подтвердите результат на устройствах, которые используют ваши клиенты.
Выберите изображения для визуальных различий
Изображения полезны, когда разница действительно визуальна: ткань, отделка, узор или цвет. Текст может быть более ясным для измерений, количества упаковок или технической спецификации. Не заставляйте каждую опцию представляться одинаково, просто чтобы страница продукта выглядела согласованной.
| Опция | Полезная презентация | Информация для сохранения |
|---|---|---|
| Отделка ткани | Последовательные крупные планы | Читаемое название завершения |
| Размер рубашки | Выбор текста | Этикетка размера и ссылка на руководство по размерам |
| Вместимость устройства | Выбор текста | Вместимость и любая разница в цене |
| Цвет продукта | Изображение или образец плюс текст | Название цвета и выбранное состояние |
Используйте одинаковые обрезки, освещение и масштаб. Более крупная или яркая миниатюра не должна случайно создавать впечатление, что выбрано определённое значение. Сделайте выбранное состояние отличимым от состояний наведения, фокуса и недоступности.
Решите, где управляются изображения опций
Глобальное изображение может подойти для общего значения опции, используемой в нескольких продуктах. Изображение, специфичное для продукта, более уместно, когда одна и та же метка выглядит по-разному на разных товарах. "Дуб" на столе не должен обязательно повторно использовать изображение, выбранное для несвязанной отделки шкафа.
Выберите правило владения и задокументируйте его. Если изображение глобальной опции изменяется, просмотрите представительные продукты, которые его наследуют. Для изображений, специфичных для продукта, ведите простой контрольный список, чтобы вновь добавленные продукты не тихо возвращались к бесполезной общей миниатюре.
Сохраняйте метки и состояния выбора ясными
Не сообщайте о доступности или выборе только с помощью цвета. Сохраняйте читаемые текстовые метки и видимый индикатор фокуса, и проверьте, что навигация с клавиатуры достигает каждого интерактивного выбора. Проверьте фактический вывод темы и любую настройку интеграции; не предполагайте, что добавление изображения автоматически обеспечивает доступное поведение.
После выбора варианта покупатель должен иметь возможность ответить на три вопроса: какое значение выбрано, изменяет ли оно общую сумму и доступно ли оно. Подтвердите, что эти ответы остаются видимыми, когда указатель уходит или страница прокручивается.
Тестируйте поведение касания без зависимости от наведения
Функция увеличения при наведении расширения может помочь пользователям настольных ПК просматривать изображение опции. Мобильные посетители не имеют постоянного наведения мыши, поэтому важная информация должна оставаться доступной без него. Протестируйте реальное сенсорное устройство, включая маленький экран и более крупный телефон.
- Выберите вариант и убедитесь, что выбор происходит предсказуемо.
- Измените свой выбор и подтвердите, что только предполагаемое значение остается активным.
- Прокручивайте область опций, не выбирая случайно другое значение.
- Используйте клавиатуру или вспомогательный метод навигации для проверки тех же элементов управления.
- Добавьте продукт в тестовую корзину и проверьте, что выбранные значения записаны правильно.
Отличайте презентацию от варианта инвентаря
Сделать так, чтобы родной вариант выглядел лучше, - это другая задача, чем дать комбинации размера и цвета свой собственный SKU и запасы. Если вам нужны данные на уровне комбинации, просмотрите Options combinations и рабочий процесс вариантов запасов. Подтвердите, как оба расширения взаимодействуют перед их совместным развертыванием.
Тот же принцип применяется к расширениям цен и галереи. Проверьте все модули, которые изменяют область опций, и протестируйте полную конфигурацию, особенно на настроенной теме. Успешное тестирование на теме по умолчанию не доказывает, что ваш пользовательский шаблон продукта ведет себя идентично.
Просмотрите всю страницу продукта после изменения
Сохраняйте файлы изображений соответствующего размера для их области отображения и избегайте загрузки фотографий в полном разрешении для маленьких образцов. Проверьте стабильность макета во время загрузки изображений и убедитесь, что область выбора не сдвигает основную информацию о покупке в запутанный порядок. Наши аудит мобильной страницы продукта соединяет эти проверки с остальной частью процесса покупки.
Оцените результат с наблюдаемым поведением: меньше неясных выборов в тестировании удобства, правильно записанные параметры корзины и макет, который остается удобным на маленьких экранах. Не обещайте увеличение конверсии из-за визуального изменения, прежде чем измерить это на своем собственном магазине.