На мобильной странице продукта покупатели должны понимать продукт, выбрать действующий вариант и увидеть, как его купить. Страница, которая просто помещается на экран, все равно может затруднить выполнение этих задач. Проверьте фактический путь, а не просто проверьте, вызывает ли тема себя адаптивной.
Mobile Professional Framework предоставляет настраиваемое мобильное/планшетное отображение для OpenCart с управлением разделами и видимостью модулей. Независимо от того, используете ли вы этот подход или адаптивную основную тему, проверьте точное содержимое товаров и элементы управления, отображаемые мобильным посетителям.
Начните с представительных продуктов
Выберите простой продукт, продукт с несколькими опциями, недоступный товар и товар с длинным описанием или таблицей спецификаций. Протестируйте телефон в портретной ориентации и более широком устройстве. Эмуляция браузера полезна для проверки макета, но тестирование на реальных устройствах показывает поведение клавиатуры, касания и браузерного интерфейса, которое скриншоты не могут отобразить.
Для каждого продукта запишите три факта, которые покупатель должен понять перед покупкой: что это, сколько стоит выбранная версия и доступна ли эта версия. Эти факты должны оставаться ясными без открытия нескольких несвязанных вкладок или прокрутки мимо большого рекламного блока.
Сравните контент для мобильных и настольных устройств
Просмотрите заголовки, описания, спецификации продуктов, названия опций, изображения и структурированные данные. Скрытие декоративных модулей может упростить мобильный макет; удаление важной информации о продукте может создать неполный опыт. Убедитесь, что мобильная презентация сохраняет контент, необходимый клиентам и поисковым системам.
Использовать Руководство Google по индексации с приоритетом для мобильных устройств при рассмотрении различий между презентациями. Если ваша настройка изменяет URL-адреса или рендеринг в зависимости от устройства, включите эти различия в технический обзор, а не предполагайте, что отдельный мобильный макет автоматически эквивалентен.
Сделайте выбор продуктов понятным
Выберите каждый тип опции, который использует ваш магазин: текст, список, изображение, дата или комбинация. Держите текущий выбор видимым и отличайте недоступные значения от невыбранных значений. Ясно отображайте изменения цен, чтобы покупатель мог понять итоговую сумму.
Образец цвета должен иметь значимую метку, а выбор размера не должен зависеть от крошечного изображения. Проверьте, что область выбора может прокручиваться без непреднамеренного выбора. Наши руководство по опции-изображению охватывает презентацию, в то время как руководство по комбинациям-акциям охватывает идентичность инвентаря.
Смотрите страницу во время её загрузки
Используйте более медленное соединение и наблюдайте, когда текст, изображения и элементы управления появляются. Не отталкивает ли большое изображение кнопку покупки, когда кто-то нажимает? Меняет ли изменение шрифта расположение элементов управления опциями? Зарезервируйте разумные размеры для изображений и избегайте того, чтобы несущественные виджеты были предварительным условием для появления информации о продукте.
| Проверить | Полезные доказательства |
|---|---|
| Стабильность макета | Запишите, какой элемент перемещается и что загружается сразу перед ним |
| Доставка изображений | Сравните загруженные размеры с отображаемым размером |
| Готовность к взаимодействию | Обратите внимание, когда варианты и добавление в корзину реагируют надежно |
| Препятствие | Проверьте управление cookie, виджеты чата и липкие панели вместе |
Следуйте пути от продукта к корзине
- Выберите действительную конфигурацию продукта и количество.
- Добавьте его в корзину и проверьте, что сообщение подтверждения видно.
- Откройте корзину и подтвердите выбранные значения, количество и цену.
- Вернуться к продукту и проверить, что навигация остается понятной.
- Повторите с недоступной конфигурацией и чрезмерным количеством.
Не тестируйте кнопку добавления в корзину изолированно. Ее окружающее состояние загрузки, подтверждение и следующее действие определяют, понимают ли покупатели, что произошло. Продолжайте в контрольный список мобильного оформления заказа когда путь продукта в корзину работает.
Приоритизируйте изменения по задаче, которую они затрагивают
Исправить проблемы, которые мешают пониманию, выбору или покупке перед полировкой незначительных пробелов. Сохраните воспроизводимый тестовый случай для каждого исправления и повторите его после обновления темы или модуля. Используйте измерения производительности и поведение клиентов вместе, с последовательными условиями тестирования, а не представляя единственный лабораторный результат как доказательство того, что каждая мобильная страница продукта работает хорошо.