Рекомендации по дизайну магазина для главной, навигации, категорий, поиска, карточек товаров и мобильной версии: что добавить и каких ошибок избегать.
Понятная покупателям навигация, быстрые страницы, крупные фотографии товаров с увеличением, цена и доставка рядом с кнопкой добавления в корзину, видимые отзывы, работающий поиск и короткое оформление заказа с гостевой покупкой. В первую очередь проектируйте для телефонов: там происходит большая часть просмотров магазинов.
Достаточно для сравнения без бесконечных переходов по страницам. Многие магазины показывают 24–48 товаров или используют кнопку «Показать еще». Еще важнее — фильтры по признакам, которые учитывают при выборе: размер, цвет, цена и наличие.
Название товара, основная фотография, цена, ключевые варианты (размер, цвет), наличие, кнопка добавления в корзину и строка о доставке или сроке получения. Если есть отзывы, там же нужны рейтинг и число отзывов.
Обычно нет. Автоматически сменяющиеся слайды часто игнорируют, они могут мешать доступности и замедлять загрузку. Один сильный первый экран с ясным сообщением и ссылками на популярные категории чаще работает лучше.
Хороший дизайн интернет-магазина помогает быстро выполнить три задачи: найти нужный товар, довериться ему и купить без лишних препятствий. На практике для этого нужна понятная навигация, быстрые мобильные страницы, крупные фотографии, ранний показ цен и доставки, заметные отзывы и короткое оформление.
Вместо общего списка принципов пройдемся по страницам: вопрос покупателя меняется на каждом этапе.
У главной есть несколько секунд, чтобы объяснить, что вы продаете и для кого.
Добавьте:
Избегайте: автоматически сменяющихся каруселей, всплывающих окон до загрузки страницы и видео на первом экране, замедляющего отображение на телефоне.
Здесь происходит большая часть сравнения.
| Элемент | Рекомендация |
|---|---|
| Карточки товаров | Одинаковое соотношение сторон фотографий, название, цена, рейтинг и второе фото при наведении |
| Фильтры | По реальному выбору: размер, цвет, цена, материал, наличие; показывайте число результатов |
| Сортировка | По умолчанию «Рекомендуем» или «Бестселлеры»; добавьте цену и новинки |
| Наличие | Скрывайте отсутствующие товары или явно помечайте их |
| Переходы | Кнопка «Показать еще» или номера страниц; возвращайте состояние фильтров после перехода назад |
| Мобильная версия | Фильтры в выдвижной панели и заметная кнопка «Показать 34 результата» |
Частая ошибка — фильтры сбрасываются, когда покупатель открывает товар и возвращается. Проверьте кнопку «Назад».
Пользователи поиска обычно готовы к покупке, поэтому слабая строка поиска напрямую снижает продажи.
Карточка товара продает. Прорабатывайте ее сверху вниз.
Сначала расскажите, какую пользу товар дает покупателю, затем приводите характеристики. Размеры, материалы и уход удобно показать в небольшой таблице. Таблица размеров должна открываться панелью на той же странице, а не уводить посетителя.
Добавьте структурированные данные Product (название, фото, цена, наличие и отзывы), чтобы цена и рейтинг могли отображаться в результатах поиска.
Дизайн оформления заказа — отдельная дисциплина. Кратко: заранее покажите полную цену, разрешите гостевую покупку, сократите форму и предложите быстрые кошельки Apple Pay и Google Pay. Подробности каждого шага — в руководстве по оптимизации оформления заказа.
Дизайн не заканчивается на кнопке оплаты. Почти каждый покупатель внимательно читает подтверждение заказа и письмо.
Большинство посещений магазина происходит с телефонов. Сначала проектируйте и проверяйте мобильный макет, затем расширяйте его для компьютера.
Это решения о дизайне, а не только технические настройки.
Скорость: сжимайте изображения и используйте WebP или AVIF, задавайте ширину и высоту, чтобы макет не прыгал, ограничивайте сторонние приложения и скрипты, проверяйте Core Web Vitals в Google PageSpeed Insights.
Доступность: цветовой контраст по WCAG 2.2 AA, alt-текст у изображений товаров, подписи полей, меню и фильтры с управлением клавиатурой, сообщения об ошибках с объяснением проблемы. Доступным магазином проще пользоваться всем, а во многих регионах доступность также является юридическим требованием.
Если начинаете с нуля, хорошая стартовая структура сэкономит время на этих решениях. Посмотрите шаблоны для магазинов или опишите магазин в чате We.Inc: конструктор создаст интернет-магазин со страницами товаров, корзиной и оплатой. Его можно доработать визуально или в коде; хостинг и SSL включены.
Начать бесплатно · Банковская карта не нужна