На мобільній сторінці продукту покупці повинні розуміти продукт, вибрати дійсний варіант і побачити, як його купити. Сторінка, яка просто вписується в екран, може все ще ускладнити ці завдання. Перевірте фактичний шлях, а не просто перевіряйте, чи тема називає себе адаптивною.
Mobile Professional Framework надає налаштовувану мобільну/планшетну презентацію для OpenCart з контролем секцій і видимості модулів. Незалежно від того, чи використовуєте ви цей підхід або адаптивну основну тему, перевіряйте точний вміст товару та елементи керування, які бачать мобільні відвідувачі.
Почніть з репрезентативних продуктів
Виберіть простий продукт, продукт з кількома варіантами, недоступний товар і товар з довгим описом або таблицею специфікацій. Тестуйте телефон у портретній орієнтації та ширший пристрій. Емуляція браузера корисна для перевірки макета, але тестування на реальних пристроях виявляє поведінку клавіатури, сенсорного екрану та браузерного хрому, яку знімки екрана пропускають.
Для кожного товару запишіть три факти, які покупець має знати перед покупкою: що це, скільки коштує вибраний варіант і чи доступний цей варіант. Ці факти повинні залишатися зрозумілими без відкриття кількох непов’язаних вкладок або прокручування повз великий рекламний блок.
Порівняйте контент для мобільних і настільних пристроїв
Перегляньте заголовки, описи, специфікації продукту, назви опцій, зображення та структуровані дані. Сховування декоративних модулів може спростити макет телефону; видалення важливої інформації про продукт може створити неповний досвід. Переконайтеся, що мобільна презентація зберігає контент, необхідний клієнтам та пошуковим системам.
Використання Рекомендації Google щодо індексації для мобільних пристроїв коли переглядаєте відмінності між презентаціями. Якщо ваша конфігурація змінює URL-адреси або рендеринг на основі пристрою, включіть ці відмінності в технічний огляд, а не припускайте, що окреме мобільне оформлення автоматично еквівалентне.
Зробіть вибір зрозумілим
Виберіть кожен тип опції, який використовує ваш магазин: текст, список, зображення, дата або комбінація. Залишайте поточний вибір видимим і відрізняйте недоступні значення від не вибраних значень. Чітко відображайте зміни цін, щоб покупець міг зрозуміти загальну суму.
Зразок кольору повинен мати значущий ярлик, а вибір розміру не повинен залежати від маленького зображення. Перевірте, чи можна прокручувати область опцій без ненавмисного вибору. Наш посібник з опцій-зображень охоплює презентацію, в той час як посібник з комбінацій-складу охоплює ідентичність інвентарю.
Дивіться сторінку, поки вона завантажується
Використовуйте повільніше з'єднання та спостерігайте, коли з'являються текст, зображення та елементи управління. Чи велике зображення відштовхує кнопку покупки, коли хтось натискає? Чи змінює шрифт положення елементів управління? Залиште розумні розміри для зображень і уникайте того, щоб неістотні віджети були обов'язковими для відображення інформації про продукт.
| Перевірити | Корисні докази |
|---|---|
| Стабільність макета | Запишіть, який елемент рухається і що завантажується безпосередньо перед ним |
| Доставка зображень | Порівняйте завантажені розміри з відображеним розміром |
| Готовність до взаємодії | Зверніть увагу, коли варіанти та додавання в кошик реагують надійно |
| Перешкода | Перевірте контролі cookie, віджети чату та липкі панелі разом |
Слідкуйте за шляхом від продукту до кошика
- Виберіть дійсну конфігурацію продукту та кількість.
- Додайте його до кошика та перевірте, що повідомлення про підтвердження видно.
- Відкрийте кошик і підтвердіть вибрані значення, кількість та ціну.
- Поверніться до продукту та перевірте, що навігація залишається зрозумілою.
- Повторіть з недоступною конфігурацією та надмірною кількістю.
Не тестуйте кнопку додавання в кошик ізольовано. Її оточуючий стан завантаження, підтвердження та наступна дія визначають, чи розуміють покупці, що сталося. Продовжте в контрольний список мобільного оформлення замовлення коли процес додавання товару до кошика працює.
Пріоритизуйте зміни за завданням, на яке вони впливають
Виправляйте проблеми, які заважають розумінню, вибору чи купівлі, ще до виправлення дрібних відступів. Зберігайте відтворюваний тестовий кейс для кожного виправлення і повторюйте його після оновлень теми чи модуля. Використовуйте вимірювання продуктивності разом із поведінкою клієнтів і стабільними умовами тестування, а не подавайте окремий лабораторний бал як доказ того, що кожна мобільна сторінка продукту працює добре.