Дизайн интернет-магазина по страницам: от главной до оплаты заказа

Дизайн интернет-магазина строится по пути покупателя

Дизайн интернет-магазина проще всего оценивать постранично, в том порядке, в каком страницы встречает покупатель: главная или результат поиска, список товаров, карточка, корзина, оформление заказа, подтверждение. У каждой страницы своя задача, и красивый магазин может провалиться на любом шаге. Baymard Institute — исследовательская группа, которая проверяет интернет-магазины на живых пользователях, — оценивает главную страницу и навигацию по каталогу у среднего крупного сайта США и Европы как плохие. В её сравнительном тесте 76% сайтов работают посредственно или хуже.

У главной страницы задача уже, чем обычно думают владельцы. Она сразу показывает, что продаёт магазин, открывает основные разделы, даёт поиск и называет условия доставки и возврата. История основания и карусель из пяти баннеров ей не нужны. Многие покупатели её и не увидят: поисковая выдача и реклама ведут их сразу в раздел или на карточку товара.

Навигация, дерево разделов и поиск по каталогу магазина

Названия разделов должны быть теми словами, которыми пользуются покупатели, а сам покупатель всегда должен видеть, где находится. Мобильный тест Baymard 2026 года показал: 94% мобильных сайтов не выделяют в главном меню текущий раздел. Ещё 42% не дают пункта «Смотреть все» на каждом уровне каталога. Цепочка «хлебных крошек» и ссылка «Смотреть все» вверху каждого раздела закрывают обе дыры.

Поиск — вторая парадная дверь. В тестах Baymard 34% пользователей искали не товары, а, например, условия возврата, но 15% сайтов из выборки такие базовые запросы не поддерживают. На мобильных у 27% сайтов нет кнопки отправки рядом с полем поиска, а 28% не предлагают ничего полезного при близкой опечатке. Проверьте поиск на десяти словах, которые реально вводят ваши клиенты, включая неправильные написания.

Страницы списков товаров: фильтры, сортировка и миниатюры

В списке товаров магазины теряют людей незаметно. В исследовании списков Baymard на сайтах с посредственным удобством списка отказывались от покупки в 67–90% случаев, а на сайтах с чуть лучшим набором инструментов — в 17–33%. В бенчмарке 2025 года 58% десктопных и 78% мобильных сайтов оцениваются как посредственные или хуже. Проверка проста: может ли покупатель сузить двести товаров до пяти.

Исправления конкретны. Объедините варианты цвета и размера одного товара в одну позицию списка — 42% сайтов этого не делают — и показывайте у позиции три миниатюры и больше, чего не делают 80%. Дайте выбрать сразу два значения одного фильтра и покажите применённые фильтры над списком. Предложите четыре вида сортировки, которые искали пользователи в тестах: по цене, по оценке покупателей, по продажам и по новизне; хотя бы частично их нет у 69% сайтов.

Техническую сторону описывает Google Search Central. В его руководстве по постраничной разбивке сказано: роботы Google не нажимают кнопки, поэтому «загрузить ещё» или бесконечной прокрутке нужны настоящие ссылки на пронумерованные страницы, и у каждой свой адрес вроде ?page=2. Отфильтрованные и пересортированные списки он советует закрывать от индекса через noindex или правила robots.txt. В задании на дизайн стоит указать, какие виды списков должны находиться через поиск.

Дизайн карточки товара: фото, варианты, цена и возврат

Карточка товара отвечает на то, о чём покупатель спросил бы консультанта в обычном магазине. Свежий бенчмарк Baymard по карточкам товара: приемлемого или хорошего уровня достигают лишь 48% ведущих десктопных сайтов и 38% мобильных. В тестах 42% пользователей пытались оценить размер товара по фотографиям, а это трудно без снимка в масштабе — рядом с рукой или в комнате. И у 23% сайтов нет фото на живой модели.

Варианты выбирают кнопками, но 57% сайтов не используют кнопки для выбора размера. Цена, наличие и кнопка покупки лежат в одном блоке, с оценкой полной стоимости вместе с доставкой — её не дают 67% сайтов. Варианты и сроки доставки зависят от направления и точного адреса, поэтому запрашивайте индекс или страну и показывайте дату. В исследовании оформления заказа Baymard насчитал 48% сайтов, которые показывают скорость вместо даты доставки.

Информация о возврате должна быть на самой карточке. В опросе Baymard, где было 1032 респондента, 60% сказали, что ищут условия возврата именно там, но 44% сайтов их не показывают и не ссылаются на них. Руководство Google по адресам просит дать каждому варианту собственный адрес, например /t-shirt/green или /t-shirt?color=green. Один шаблон, в который заложены эти правила, избавляет от правки сотен страниц позже.

Дизайн оформления заказа: гостевая покупка, поля формы и полная стоимость

Оформление заказа — самая изученная часть работы над магазином, потому что потери здесь легко посчитать. В списке Baymard из 50 исследований средний задокументированный уровень отказа от корзины — 70,22%. Если не считать тех, кто просто смотрел, главные причины таковы: дополнительные расходы (40%), медленная доставка (20%), недоверие к сайту при вводе данных карты (19%), обязательная регистрация (18%) и слишком длинное оформление (17%). Ещё 12% не увидели полную стоимость заранее.

Тесты Baymard показывают, что в идеальном оформлении может быть 12–14 элементов формы, тогда как в среднем американском оформлении по умолчанию их 23,48. Гостевая покупка должна быть самым заметным вариантом, а 62% сайтов этого не добиваются. Отмечайте и обязательные, и необязательные поля: 32% участников пропустили обязательное поле, когда подписаны были только необязательные. Если просите телефон, объясните зачем: больше 70% опрошенных не хотят его давать.

Многие оформления ломаются на сообщениях об ошибках. Baymard насчитал 94% сайтов без адаптивных сообщений — тех, что называют настоящую причину, например слишком короткий номер телефона. Подсказка адреса ловит опечатки до того, как посылка уйдёт не туда, а на 54% мобильных сайтов её нет. По оценке Baymard, средний крупный магазин мог бы поднять конверсию на 35,26% только за счёт улучшения оформления заказа.

Корзина, аккаунт, страницы доверия и сообщения после заказа

В корзине каждый товар показан с вариантом и картинкой, есть управление количеством, оценка доставки и итог. Baymard выяснил, что 97% сайтов не используют кнопки для изменения количества, отсюда ошибки: покупатель вписывает 2 рядом с «1» по умолчанию и получает 21. Аккаунт должен быть необязательным и лёгким для входа. В тестах строгие требования к паролю вызывали до 19% отказов при оформлении среди тех, у кого аккаунт уже есть.

Доверие создают простые страницы, которые легко найти: доставка, возврат, оплата, контакты и сведения о продавце. В опросе Baymard 13% покупателей ушли из-за неудовлетворительных условий возврата. Что магазин обязан раскрывать, определяет закон о защите прав потребителей, а он различается по странам, поэтому проверяйте эти страницы с юристом в каждой стране. Страница подтверждения и письма затем повторяют номер заказа, товары, итог, адрес и ожидаемую дату, со ссылками на отслеживание и возврат.

Мобильная версия, Core Web Vitals и закон о доступности для магазинов

Проектируйте дизайн интернет-магазина сначала для телефона. Baymard отмечает, что на многих сайтах электронной коммерции мобильные устройства нередко дают 50% трафика, а в бенчмарке 2026 года 75% мобильных сайтов оценены лишь как посредственные. Руководство Google web.dev считает показатели Core Web Vitals хорошими, если Largest Contentful Paint укладывается в 2,5 секунды, Interaction to Next Paint не больше 200 миллисекунд, а Cumulative Layout Shift не больше 0,1. Их измеряют на 75-м процентиле загрузок страницы, отдельно для мобильных и десктопа.

W3C опубликовал WCAG 2.2 как Рекомендацию 5 октября 2023 года, и несколько новых критериев прямо касаются магазинов. Target Size (Minimum) требует, чтобы элементы для нажатия были не меньше 24 на 24 CSS-пикселя, с исключениями. Redundant Entry говорит, что данные, уже введённые в рамках одного процесса, нужно подставлять или предлагать к выбору, как платёжный адрес. Accessible Authentication исключает вход, зависящий от теста когнитивной функции, например запоминания пароля, если нет альтернативы или вспомогательного механизма.

В ЕС Европейская комиссия называет электронную торговлю среди услуг, на которые распространяется Европейский акт о доступности. Ирландская Комиссия по конкуренции и защите прав потребителей — орган, который следит там за соблюдением правил в электронной торговле, — сообщает, что акт вступил в силу 28 июня 2025 года. Краткое изложение в «Википедии» описывает исключение для микропредприятий, оказывающих услуги: менее 10 человек и оборот или баланс не больше 2 млн евро. Правила Великобритании, США или стран Залива отличаются, поэтому проверьте свой случай у специалиста для каждого рынка.

Готовая тема или индивидуальный дизайн, и что подготовить к заданию

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

VITON13 Studio делает это как проект с фиксированным объёмом: пути по каталогу, система карточки товара и сценарии оформления заказа. На странице услуги проект указан от $113 с помощью ИИ или от $173 при работе человека, срок 6–10 рабочих дней, 2 круга правок. Объём подтверждается письменно до начала работ. Когда каталог, фото и политики готовы, хороший дизайн интернет-магазина начинается с настоящих страниц, а не с открытых вопросов.