Как подготовить сайт продуктового магазина к просмотру с телефона

Покупатель продуктового магазина часто открывает сайт на ходу: в очереди, в транспорте, на кухне, когда заметил, что закончилось молоко. Ему нужно быстро найти товар, увидеть цену и собрать заказ за несколько касаний. Ниже описано, что проверить на сайте и что обсудить с разработчиками.

Какие задачи решает покупатель на телефоне

Сначала выпишите типичные сценарии. Для продуктов это обычно повторить прошлый заказ, проверить наличие, найти акционные позиции, узнать условия и время доставки, выбрать слот. Если на сайте подключена статистика посещений, посмотрите, какие страницы чаще открывают с мобильных устройств. Если нет, понаблюдайте, как с сайтом работает кто-то из сотрудников или знакомых.

Техническая основа простая: в коде страниц должен быть мета-тег viewport. Без него смартфон показывает уменьшенную копию десктопной версии, и текст приходится увеличивать пальцами. Проверяйте на реальном телефоне, а не только в узком окне браузера на компьютере.

Каталог и поиск: как найти товар среди сотен позиций

• Поле поиска должно быть видно сразу, без открытия меню. Подсказки по мере ввода лучше настроить на разные формы слов и синонимы: «помидоры» и «томаты», «кефир» и «кефирный напиток».
• Категории удобнее показывать списком с крупными строками. Подкатегории раскрываются по касанию, а не при наведении курсора: на телефоне наведения нет.
• Фильтры («в наличии», «со скидкой», производитель) стоит выносить на отдельный экран с кнопкой «Показать результаты». Тогда они не занимают полэкрана над списком.
• Карточки в списке удобно расположить в две колонки и разместить кнопку «В корзину» прямо в карточке. Тогда не придётся открывать каждый товар.

Карточка товара: условный пример фрагмента

Возьмём условную карточку «Яблоки сезонные, цена за 1 кг». На экране смартфона её можно собрать так:

• Название и единица измерения стоят в первой строке и не обрезаются многоточием.
• Под ними крупно указана цена. Если товар весовой, рядом стоят кнопки «−» и «+» с шагом, например, 0,5 кг, а итоговая сумма пересчитывается сразу.
• Кнопка «В корзину» занимает всю ширину блока, а её высота позволяет попасть пальцем (ориентир — не меньше 44 px). После нажатия она превращается в счётчик количества.
• Если товара нет, вместо кнопки показан статус «Нет в наличии» и блок похожих позиций.
• Состав, срок годности, производитель и условия хранения находятся в раскрывающихся блоках ниже кнопки. Сама информация должна быть той, что предоставил магазин или поставщик.

Следите за тем, чтобы кнопки «−» и «+» не стояли вплотную друг к другу: при случайном нажатии покупатель получит лишний килограмм.

Корзина и оформление заказа на маленьком экране

Здесь чаще всего теряются заказы, поэтому проверьте каждый шаг вручную.

• Сумма корзины и кнопка «Оформить» закреплены внизу экрана и видны при прокрутке списка.
• Если есть минимальная сумма заказа, покажите это действием: «Добавьте товаров ещё на 300 ₽ до минимальной суммы». Цифра здесь условная, подставьте свою.
• Для телефона в форме задайте тип поля tel, чтобы открывалась цифровая клавиатура. Для адреса и имени включите атрибуты автозаполнения. Просите только то, без чего нельзя доставить заказ.
• Оформление без обязательной регистрации сокращает путь. Регистрацию можно предложить после заказа.
• Окна доставки показывайте крупными кнопками. Недоступное время делайте серым и объясняйте причину, например «слоты заняты».
• Для случая, когда нужного товара не оказалось, дайте выбор: заменить аналогом, убрать позицию или позвонить. Вариант хранится в заказе и виден сотруднику.
• Сообщение об ошибке выводите рядом с проблемным полем и не стирайте уже введённые данные.

Скорость загрузки каталога при слабом интернете

Каталог продуктов состоит из множества фотографий, и на мобильном соединении они замедляют страницу сильнее всего. Попросите разработчиков отдавать изображения в размере, подходящем для экрана (атрибут srcset), включить отложенную загрузку тех, что ниже первого экрана (loading=lazy), и сжать файлы. Вместо одной бесконечной страницы на 300 карточек лучше использовать постраничный вывод или кнопку «Показать ещё».

Проверить это можно самому: в инструментах разработчика браузера Chrome есть имитация медленной сети, а встроенный аудит Lighthouse покажет, какие файлы тормозят страницу. Это ориентир для обсуждения с исполнителем, а не гарантия результата.

Проверочный список перед запуском

• Страница не требует масштабирования и не прокручивается вбок.
• Поиск виден на главной и в каталоге, подсказки находят товар по разным названиям.
• Фильтры открываются отдельным экраном и сбрасываются одной кнопкой.
• Кнопки «В корзину», «−» и «+» легко нажимаются большим пальцем.
• Для весовых товаров сумма пересчитывается сразу при изменении количества.
• В корзине виден итог, минимальная сумма и стоимость доставки.
• В полях телефона и адреса открывается подходящая клавиатура и работает автозаполнение.
• Заказ можно оформить без регистрации.
• Тестовый заказ проведён на двух-трёх разных телефонах, включая старую модель, и дошёл до сотрудника.
• Каталог открывается приемлемо при имитации медленной сети.

Пройдите путь от поиска товара до подтверждения заказа сами, с одним свободным пальцем, как покупатель в очереди. Всё, на чём вы споткнулись, и есть ваш список задач для разработчиков.

Все статьи блога