Почему проверять до запуска, а не после
Ошибку в макете исправить дешевле всего: правка в дизайне занимает час, а после запуска та же правка затрагивает вёрстку, логику и тексты. К тому же после запуска магазин уже тратит деньги на рекламу, и каждая неудобная деталь съедает часть этого бюджета.
Покупатели уходят из магазина чаще, чем кажется. По сводке Baymard Institute, в среднем по 50 исследованиям корзину бросают около 70% покупателей. Самая частая причина — неожиданные расходы, которые всплывают только на оформлении: доставка, сборы, наценки. Часть ухода не зависит от магазина: человек просто сравнивает цены. Но значительную часть закрывает дизайн, если проверить путь покупки целиком.
Первый экран продаёт, а не приветствует
Первый экран главной часто занимают слайдер с акциями и общие слова о компании. Человек, пришедший из поиска или рекламы, за несколько секунд решает, туда ли он попал. Ему нужно увидеть товар, цену и понятный следующий шаг.
В кейсе Нова.Маркет — магазине касс для малого бизнеса — первый экран устроен как прилавок: шесть касс стоят на столешнице, под каждой ценник с моделью, назначением в одну фразу и ценой. Ниже — подбор кассы по типу бизнеса. Покупатель сразу видит ассортимент и цены, без двух экранов «преимуществ».
Что проверить на первом экране:
- Виден товар или категория, а не абстрактная картинка.
- Видна цена или хотя бы порядок цен.
- Одно главное действие: в каталог, подобрать, купить.
- На телефоне всё это помещается без прокрутки.
- Поиск по магазину заметен, если товаров больше пары десятков.
Каталог и фильтры: по признакам покупателя
Фильтры часто собирают по полям из учётной системы: бренд, артикул, серия. Покупатель выбирает иначе: для чего товар, подойдёт ли к его задаче, сколько стоит, есть ли в наличии. Начните со списка вопросов, которые задают менеджерам до покупки, и превратите их в фильтры.
В Нова.Маркете каталог фильтруется по разделу, типу бизнеса, встроенным функциям, цене и наличию. Счётчики у каждого пункта пересчитываются с учётом уже выбранных условий, поэтому человек не попадает в пустую выдачу вслепую. Активные условия видны чипами с крестиком, а выбранный набор сохраняется в адресе страницы, и его можно отправить ссылкой.
Чек-лист каталога:
- Фильтры отвечают на вопросы покупателя, а не повторяют поля учётной системы.
- У пунктов фильтра есть счётчики, недоступные варианты отключены.
- Активные фильтры видны и снимаются в одно касание.
- Пустая выдача объясняет, почему ничего нет, и предлагает, что сделать.
- Сортировка по цене и популярности есть и сохраняется при переходах.
- На телефоне фильтры открываются отдельным листом с кнопкой «Показать N товаров».
Карточка товара: что именно покупают и за сколько
Карточка — главный экран магазина: здесь человек решает, покупать ли. Типичная ошибка — карточка показывает «коробку» и цену, а всё остальное спрятано во вкладках: что входит в комплект, нужны ли дополнительные покупки, сколько стоит доставка и когда товар приедет.
В Нова.Маркете панель покупки показывает четыре комплектации с пояснением, кому какая подходит, и доплатой за каждую. Цена пересчитывается сразу при выборе. Кнопка «В корзину» проходит состояния: «добавляем», «добавлено», «в корзине — оформить». Рядом таблица сравнения с соседними моделями и ответы на вопросы, которые задают до покупки. На телефоне цена и кнопка закреплены внизу, когда панель покупки уходит из экрана.
Что проверить в карточке:
- Цена видна сразу, вместе с тем, что в неё входит.
- Варианты (размер, цвет, комплект) меняют цену и фото на глазах.
- Видны наличие, сроки и стоимость доставки или ссылка на них рядом с кнопкой.
- Кнопка покупки показывает, что товар уже в корзине.
- Фото показывают товар в деле и в масштабе, а не только на белом фоне.
- Есть сравнение с похожими товарами, если покупатель выбирает между моделями.
Корзина и оформление: без сюрпризов и лишних полей
На оформлении магазин теряет покупателей, которые уже решили купить. Поэтому здесь важна каждая мелочь: обязательная регистрация, поле «отчество», которое нельзя пропустить, итоговая сумма, которая растёт на последнем шаге.
Хорошее оформление показывает итог с доставкой как можно раньше, разрешает купить без регистрации и спрашивает только то, что нужно для доставки и оплаты. Поля меняются под выбранный способ получения: курьеру нужен адрес, пункту выдачи — только город и точка. Ошибки видны рядом с полем сразу после ввода, а при отправке появляется сводка со ссылками на поля, которые нужно исправить.
Чек-лист оформления:
- Можно купить без регистрации; аккаунт предлагается после заказа.
- Итоговая сумма с доставкой видна до последнего шага.
- Шаги пронумерованы, видно, сколько осталось.
- Поля зависят от способа получения и оплаты; лишних полей нет.
- Ошибки говорят, что исправить, а не «неверный формат».
- Промокод отвечает и на успех, и на ошибку.
- Экран успеха показывает номер заказа, сумму и что будет дальше.
- Пустая корзина ведёт в каталог или к популярным товарам.
Телефон: отдельный макет, а не сжатая версия
Значительная часть покупателей заходит в магазин с телефона, особенно из рекламы и соцсетей. Поэтому мобильную версию проектируем отдельно: другой порядок блоков, фильтры в нижнем листе, кнопка покупки закреплена внизу, таблицы превращаются в карточки.
Несколько технических деталей, которые закладываются в дизайн. Текст в полях ввода — не меньше 16 пикселей, иначе iPhone увеличивает страницу при вводе. Цели касания по стандарту WCAG 2.2 на уровне AA — не меньше 24×24 CSS-пикселя, а на практике удобнее 44 пикселя и больше. Для телефона и почты нужны правильные типы полей, чтобы открывалась нужная клавиатура.
Состояния, которые забывают нарисовать
Макеты обычно показывают идеальный случай: товар в наличии, фото есть, название короткое, оплата прошла. В жизни магазина всё сложнее, и если состояние не нарисовано, разработчик сделает его на своё усмотрение. Перед запуском проверьте, что в макетах есть:
- Нет в наличии, предзаказ, осталось мало.
- Товар без фото и товар с очень длинным названием.
- Скидка, старая цена, товар дешевле в комплекте.
- Ошибка оплаты и что делать дальше.
- Загрузка каталога и карточки: скелетоны вместо белого экрана.
- Неверный промокод, недоступная доставка в выбранный город.
- Пустой поиск с подсказками.
Доверие и обязательная информация
Покупатель отдаёт деньги магазину, которого может не знать. Ему нужно понять, кто продаёт, как связаться и что будет, если товар не подойдёт. При дистанционной продаже закон о защите прав потребителей (статья 26.1) требует до заключения договора сообщить покупателю основные свойства товара, цену, условия доставки и оплаты, адрес и полное наименование продавца. Покупатель вправе отказаться от товара в течение семи дней после получения, и об этом порядке его тоже нужно известить.
В дизайне это значит: контакты и реквизиты продавца видны в подвале, условия доставки и возврата вынесены на отдельные страницы со ссылками из карточки и корзины, рядом с кнопкой заказа стоят согласие на обработку персональных данных и ссылка на политику. Отзывы — только настоящие: выдуманные отзывы считаются недостоверной рекламой и подрывают доверие быстрее, чем их отсутствие. Формулировки юридических страниц лучше показать юристу.
Как проверить магазин до разработки
Магазин — это путь покупки, поэтому проверять его лучше кликабельным прототипом, а не набором картинок. Соберите прототип главного сценария: найти товар, выбрать вариант, оформить заказ. Дайте его нескольким людям из вашей аудитории с конкретной задачей, например «купите кассу для кофейни с доставкой в пункт выдачи», и смотрите, где они останавливаются. По наблюдениям Nielsen Norman Group, уже пять участников находят большую часть проблем юзабилити.
Если магазин уже работает, начните с UX-аудита: пройдите путь покупки на компьютере и телефоне, сравните его с чек-листом выше и посмотрите в аналитике, на каком шаге уходят покупатели. После запуска настройте цели: добавление в корзину, начало оформления, заказ. Так видно, какой экран мешает продажам.
Сколько стоит дизайн интернет-магазина
У нас дизайн интернет-магазина стоит от 120 000 ₽, ориентировочно от 4 недель: структура и прототип, главная, каталог с фильтрами, карточка товара, корзина и оформление, макеты для компьютера и телефона со всеми состояниями и UI-кит для разработчиков. Интернет-магазин под ключ — от 200 000 ₽, от 8 недель: дизайн, разработка и запуск вместе с партнёрами студии по одному договору. Редизайн существующего сайта — от 60 000 ₽, от 3 недель. Если магазин уже работает и нужно понять, что в нём мешает, — UX-аудит от 60 000 ₽, ориентировочно от 1 недели.
Чтобы обсудить ваш магазин, напишите нам в Telegram, позвоните или отправьте письмо. Пришлите ссылку на текущий сайт или список товаров — с них и начнём.
