Як керувати мобільним оформленням Хорошопу

Мобільне оформлення Хорошопу варто змінювати під конкретний шлях покупця. Відвідувач має знайти розділ, зрозуміти вибрані умови й прочитати дані товару без наведення курсора. Колір кнопки не виправить ситуацію, коли потрібна підкатегорія прихована, а матеріал видно лише в комп’ютерній мінікартці.

Підготуйте перелік мобільних змін: місце налаштування, дія відвідувача й очікуваний результат. Розглянемо його на умовному магазині домашнього текстилю. Каталог і перевірки нижче вигадані для пояснення; налаштування чинного сайту не змінювалися. Результат статті – спосіб керувати доступними опціями та приймати їхнє відображення окремо на телефоні, планшеті й комп’ютері.

Обмежте зміну потрібною частиною сайту

Мобільна група розташована в «Сайт → Дизайн → Редактор дизайну → Мобільна версія сайту». У посібнику мобільного редактора окремо описані меню, сторінка категорії, мінікартка та сторінка товару. Вибирайте конкретний елемент, а не змінюйте оформлення цілком заради одного незручного переходу.

Збережіть попередні значення та знімки відповідних місць. Запишіть, що має змінитися, а що потрібно зберегти на комп’ютері. Готова палітра й комплект банерів не замінюють такого запису: тут приймається дія відвідувача, а не загальний стиль магазину.

У навчальному каталозі розділ «Постільна білизна» містить «Наволочки» та «Підковдри». Для наволочок уже підготовлені матеріал, розміри й відповідні фільтри. Мета – дійти до наволочок, вибрати розмір 70×70 та побачити матеріал відповідного товару. Створення характеристик і виправлення товарних зв’язків до цього прикладу не входять.

Розмежуйте два входи до каталогу

Розкривне меню шапки та кнопка каталогу на головній налаштовуються незалежно. В інструкції з навігації для меню передбачені окремі опції: «Відображати кнопку “Каталог” на першому рівні» та «Відкривати наступні рівні категорій у підменю». Вони визначають початок маршруту й спосіб розкриття вкладених розділів.

Наприклад, щоб починати відразу з розділів першого рівня, інструкція пропонує вимкнути першу опцію. Другу залишають увімкненою, якщо вкладені категорії мають відкриватися в окремих панелях. Це один допустимий варіант. Його не слід оголошувати найкращим для будь-якого асортименту чи вмикати без погодженого зразка.

Після зміни пройдіть обидва входи. Якщо меню шапки веде через панелі, це ще не підтверджує такої самої поведінки кнопки на головній. Для навчального магазину в кожному маршруті потрібно знайти «Наволочки» й перевірити кінцевий розділ. Не перебудовуйте дерево категорій лише заради подібності двох меню.

Перевірте умови відображення всередині категорії

На сторінці категорії є власний блок «Меню підкатегорій». Документація мобільного каталогу описує компактний вигляд кнопками та вертикальний вигляд рядками. Частина списку може ховатися під кнопкою «Усі категорії». Перевірте, що відвідувач справді може відкрити решту пунктів.

Блок має залежність: у налаштуваннях самої сторінки повинна бути ввімкнена опція «Відображати навігацію за вкладеними категоріями». Самих параметрів зовнішнього вигляду недостатньо. Якщо дочірніх розділів немає, блок показує категорії того самого рівня. Для «Наволочок» це може бути сусідній розділ, а не помилково додана підкатегорія.

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

Покажіть потрібні відомості без наведення

Мобільна мінікартка не змінюється під час наведення курсора. Тому відомості, які на комп’ютері з’являються лише під час наведення, потрібно окремо оцінити для мобільного відображення. У редакторі передбачені перемикачі бренду, наявності, модифікацій, коротких характеристик та інших елементів. Вмикайте те, що потрібно вибраному сценарію.

Для коротких характеристик джерело міститься в полі сторінки «Характеристики для мінікартки». Якщо матеріал не вибраний або не заповнений у товарі, один перемикач оформлення не створить потрібного рядка. Розгляньте окремо налаштування відображення й самі дані. Не додавайте повторну характеристику заради появи тексту на одному екрані.

До збереження корисно скласти таку таблицю очікувань. Це умовна перевірка маршруту; вона не підтверджує виконаного налаштування чи правильності всього каталогу.

Розрізняйте телефон і планшет

Сторінка товару в мобільному редакторі складається з верхньої, лівої, правої та нижньої секцій. За документацією телефон показує їх послідовно в цьому порядку. На планшеті ліва й права розташовані поруч. Один знімок вузького вікна не підтверджує обох варіантів.

Переносьте лише доступні групи й елементи в погоджені секції. Потім прочитайте картку цілком: де опинилися фотографія, розмір, наявність і опис. Переміщення блоку не повинно залишати важливу умову покупки в недоступному місці. Відповідність вибраного розміру даним варіанта перевіряють окремо за налаштуванням модифікацій Хорошопу.

Прийміть зміну за повторюваним маршрутом

Після погодженого збереження повторіть ті самі дії на тих самих сторінках. Запишіть мову, пристрій, версію браузера, початкову умову й фактичний результат. Окремо відкрийте комп’ютерну версію: збереження її погодженої поведінки теж потребує спостереження.

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

Для пошукової перевірки орієнтуйтеся на рекомендації Google щодо мобільного вмісту. Google використовує мобільну версію для індексування; основний контент має залишатися доступним і еквівалентним комп’ютерному. Інший макет або вкладки допустимі. Наявність потрібного тексту в HTML не доводить фактичної індексації сторінки чи зручності на конкретному телефоні.

Якщо очікуваного результату не отримано, передайте виконавцю точний перехід, адресу й налаштування разом зі знімком розбіжності. Повторна зміна всіх мобільних параметрів ускладнить пошук причини. Приймання такої зміни підтверджує погоджене відображення й дії в перевірених умовах; вплив на продажі, швидкість і пошукові позиції оцінюють окремо.