Мобильный дизайн для e-commerce: что важно

Mobile-first

Mobile-first — это подход, при котором дизайн сначала проектируется под мобильные устройства, а потом адаптируется под планшеты и десктоп. Это не «модный тренд», а необходимость.

Почему mobile-first:

• 60–70% трафика — с мобильных;
• Покупатели заказывают с телефонов в удобное время;
• Google индексирует мобильную версию в первую очередь;
• Проще начать с малого экрана и расширять, чем наоборот.

При mobile-first дизайне вы фокусируетесь на главном: что важно для клиента на маленьком экране. Это делает дизайн более сфокусированным и эффективным.

Тач-жесты

Тач-жесты — это способы взаимодействия с сенсорным экраном: свайпы, тапы, pinch-to-zoom, долгое нажатие. В мобильном дизайне интернет-магазина они должны быть интуитивными.

Что важно:

• Свайп — для галереи товаров, карусели, переключения;
• Pinch-to-zoom — для увеличения фото товара;
• Долгое нажатие — для контекстного меню;
• Pull-to-refresh — для обновления списка;
• Свайп в корзину — для быстрого добавления.

Жесты должны быть очевидными или подсказанными. Если клиент не понимает, что можно свайпнуть, он не свайпнет.

Размеры кнопок

Размеры кнопок — критический параметр мобильного дизайна. Если кнопка слишком мелкая, клиент не сможет по ней попасть. Если слишком крупная — занимает весь экран.

Рекомендации:

• Минимум 44×44 px — рекомендованный размер Apple;
• 48×48 px — рекомендованный размер Google;
• Отступы между кнопками — минимум 8 px;
• Крупный текст — минимум 16 px;
• Контрастный цвет — чтобы кнопка выделялась.

Правильные размеры кнопок снижают количество ошибочных нажатий и повышают конверсию.

Скорость загрузки

Скорость загрузки на мобильных критична. Мобильный интернет часто медленнее, устройство слабее. Если сайт грузится долго, клиент уходит.

Что влияет на скорость:

• Изображения — WebP, AVIF, ленивая загрузка;
• Шрифты — font-display: swap;
• Скрипты — минификация, отложенная загрузка;
• Анимации — CSS вместо JS;
• Core Web Vitals — LCP, FID, CLS.

Мобильный дизайн должен проектироваться с учётом скорости. Красивый, но медленный сайт — это провал.

Мобильный checkout

Мобильный checkout — самый важный этап. 60–70% брошенных корзин — результат сложного оформления заказа. На мобильном это особенно критично: мелкие поля, сложные формы, много шагов.

Что работает в мобильном checkout:

• Один шаг — вместо 3–4 экранов;
• Гостевой заказ — без регистрации;
• Автозаполнение — данные из профиля;
• Крупные поля — минимум 44 px в высоту;
• Правильные типы клавиатур — цифровая для телефона, email для почты;
• Разные способы оплаты — карта, СБП, Apple Pay, Google Pay;
• Прозрачные сроки и стоимость доставки — сразу.

Упрощение мобильного checkout увеличивает конверсию на 20–40%.

Тестирование

Тестирование мобильного дизайна — обязательный этап. Нельзя проверить мобильный дизайн только в эмуляторе. Нужно тестировать на реальных устройствах.

Что тестировать:

• Разные устройства — iPhone, Samsung, Xiaomi, Honor;
• Разные размеры экранов — от 4,7 до 6,7 дюймов;
• Разные ОС — iOS, Android;
• Разные браузеры — Safari, Chrome, Яндекс.Браузер;
• Разную скорость интернета — 4G, 3G, Wi-Fi;
• Тач-жесты — свайпы, тапы, zoom.

Тестирование на реальных устройствах выявляет проблемы, которые не видны в эмуляторе.

Типичные ошибки