Зображення може зробити опцію продукту легшою для розуміння, але лише якщо покупець може зрозуміти, що воно представляє і чи вибрано його. Ряд привабливих кольорових квадратів не є покращенням, коли клієнти не можуть розрізнити два схожі відтінки або дізнатися, який розмір недоступний.
Improve Options Design PRO може представляти значення опцій OpenCart як зображення або текст і використовувати глобально налаштовані або специфічні для продукту зображення опцій. Використовуйте ці можливості, щоб пояснити вибір, а потім перевірте результат на пристроях, які використовують ваші клієнти.
Виберіть зображення для візуальних відмінностей
Зображення корисні, коли різниця дійсно візуальна: тканина, обробка, візерунок або колір. Текст може бути зрозумілішим для вимірювань, кількостей упаковки або технічних специфікацій. Не намагайтеся втиснути кожну опцію в одну й ту ж презентацію лише для того, щоб зробити сторінку продукту виглядати послідовно.
| Опція | Корисна презентація | Інформація для збереження |
|---|---|---|
| Обробка тканини | Послідовні крупні плани | Зрозуміла назва оздоблення |
| Розмір сорочки | Вибір тексту | Мітка розміру та посилання на посібник по розмірах |
| Ємність пристрою | Вибір тексту | Ємність і будь-яка різниця в ціні |
| Колір продукту | Зображення або зразок плюс текст | Назва кольору та вибраний стан |
Використовуйте послідовні обрізки, освітлення та масштаб. Більша або яскравіша ескіз не повинна випадково натякати, що одне значення вибрано. Зробіть вибраний стан відмінним від станів наведення, фокусу та недоступності.
Визначте, де керуються зображення опцій
Глобальне зображення може підходити для спільного значення опції, що використовується в багатьох продуктах. Специфічне для продукту зображення є більш доречним, коли одна й та ж етикетка виглядає по-різному на різних товарах. “Дуб” на столі не повинен обов'язково повторно використовувати зображення, вибране для незв'язаної обробки шафи.
Виберіть правило володіння та задокументуйте його. Якщо змінюється зображення глобальної опції, перегляньте типові продукти, які його успадковують. Для зображень, прив’язаних до конкретного продукту, ведіть простий контрольний список, щоб новододані товари не залишалися з неінформативною типовою мініатюрою.
Зробіть підписи та стани вибору зрозумілими
Не спілкуйтеся про доступність або вибір лише через колір. Залишайте читабельні текстові мітки та видимий індикатор фокусу, а також перевірте, що навігація за допомогою клавіатури досягає кожного інтерактивного вибору. Перевірте фактичний вихід теми та будь-які налаштування інтеграції; не припускайте, що додавання зображення автоматично забезпечує доступну поведінку.
Після вибору опції покупець повинен мати можливість відповісти на три питання: яке значення вибрано, чи змінює воно загальну суму і чи доступно воно. Підтверджуйте, що ці відповіді залишаються видимими, коли курсор відходить або сторінка прокручується.
Тестуйте поведінку дотику без використання наведення
Функція збільшення при наведенні розширення може допомогти користувачам настільних ПК переглядати зображення опцій. Мобільні відвідувачі не мають постійного наведення миші, тому важлива інформація повинна залишатися доступною без нього. Протестуйте реальний сенсорний пристрій, включаючи маленький екран і більший телефон.
- Виберіть опцію та перевірте, що вибір відбувається передбачувано.
- Змінити свій вибір і підтвердити, що лише заплановане значення залишається активним.
- Прокручуйте область опцій, не вибираючи випадкове значення.
- Використовуйте клавіатуру або допоміжний метод навігації, щоб перевірити ті ж елементи управління.
- Додайте продукт до тестового кошика та перевірте, що вибрані значення записуються правильно.
Відрізняти презентацію від варіантів на складі
Зробити рідний варіант виглядати краще - це інше завдання, ніж надати комбінації розміру та кольору власний SKU та запас. Якщо вам потрібні дані на рівні комбінацій, перегляньте Options combinations і робочий процес варіантів-складів. Підтверджуйте, як обидва розширення взаємодіють перед їх спільним використанням.
Той же принцип застосовується до розширень цін та галерей. Перевірте всі модулі, які змінюють область опцій, і протестуйте повну конфігурацію, особливо на налаштованій темі. Успішний тест на темі за замовчуванням не доводить, що ваш шаблон продукту працює ідентично.
Перегляньте всю сторінку продукту після зміни
Тримайте файли зображень відповідного розміру для їхньої області відображення та уникайте завантаження фотографій з повною роздільною здатністю для маленьких зразків. Перевірте стабільність макета під час завантаження зображень і переконайтеся, що область опцій не відсуває основну інформацію про покупку в заплутаний порядок. Наш аудит мобільної сторінки продукту пов'язує ці перевірки з рештою шляху покупки.
Оцінюйте результат за спостережуваною поведінкою: менше незрозумілих виборів у тестуванні зручності, правильно зафіксовані опції кошика та макет, який залишається зручним на малих екранах. Не обіцяйте збільшення конверсії через візуальні зміни, перш ніж виміряти це на своєму магазині.