1. Кнопка должна быть очевидной
Если CTA сливается с фоном или спрятан ниже сгиба — пользователь не купит. В e-commerce главная кнопка — это действие: «В корзину», «Купить», «Оформить заказ».
| До | После |
|---|---|
| Синяя «В корзину» на синем фоне — кнопку не замечали | Контрастная оранжевая «Купить со скидкой 5%» над сгибом + таймер акции |
| Один CTA без акцента | Главная кнопка крупнее вторичных ссылок «Подробнее» / «Сравнить» |
На turnik-home.ru после смены CTA конверсия в корзину выросла на 34%. Принцип простой: контраст, размер, формулировка с выгодой.
2. Корзина — короткий путь, а не квест
Каждый лишний шаг в оформлении — минус заказы. Хорошая корзина показывает состав, цену, доставку и кнопку оплаты без прыжков по сайту.
| До | После |
|---|---|
| Форма заказа уезжала вниз на мобильном — тыкали вслепую | Липкая корзина, крупные поля, кнопка всегда в зоне большого пальца |
| Доставка и способ оплаты — на отдельных экранах без итога | Итог заказа и итоговая сумма видны до отправки формы |
| Ошибка «пустое поле» без подсказки | Валидация на месте: что заполнить и зачем |
На мобильной версии turnik-home.ru после переработки вёрстки конверсия выросла с 0,3% до 2,1%. В Blanche Fleur путь «выбор параметров → корзина → заказ» спроектировали так, чтобы покупка шла без звонка менеджеру.
3. Отзывы и доверие — рядом с ценой
Товар от 5 000 ₽ без подтверждения «это покупают» вызывает сомнение. Отзывы, гарантии и реальные фото должны быть на карточке — не в отдельном разделе «где-то на сайте».
| До | После |
|---|---|
| Отзывы есть на Маркете и Ozon, на сайте — только цена и описание | Блок реальных отзывов на карточке товара |
| Гарантия спрятана в футере | Гарантия и условия возврата рядом с кнопкой покупки |
| Стоковые фото без контекста | Фото покупателей / видеообзоры в карточке |
В аналогичных проектах вывод отзывов на карточку даёт прирост конверсии 25–30%. Если отзывы уже есть на маркетплейсах — агрегируйте их на сайте, а не отправляйте покупателя «искать мнения на стороне».
4. Скорость — часть интерфейса
Медленный сайт — плохой UX, даже если макет красивый. Каждая секунда задержки — минус ~7% конверсии.
| До | После |
|---|---|
| Главная 5,9 с: фото в оригинале, без CDN | WebP, кеш, CDN — загрузка ~1,2 с |
| Отказы из-за ожидания | Отказы −40% после ускорения |
| Тяжёлые слайдеры на главной | Лёгкий hero + lazy-load ниже первого экрана |
Скорость нельзя «нарисовать потом». Её закладывают в вёрстку, хостинг и формат картинок на старте.
5. Мобильный UX — не «уменьшенный десктоп»
50–60% трафика e-commerce — с телефона. Если фильтры, корзина и кнопка покупки неудобны на 375 px — вы теряете половину аудитории.
| До | После |
|---|---|
| Каталог — плоская лента, фильтров нет | Фильтры: тип, нагрузка, цена — товар за 2 клика вместо 7 |
| Мелкие тапы, кнопки рядом | Зоны нажатия ≥ 44 px, отступы между CTA |
| Меню перекрывает контент | Компактная навигация + быстрый доступ к корзине |
На turnik-home.ru фильтры по типу (настенный / напольный / для улицы), нагрузке и цене сократили путь к нужному товару — время на сайте выросло, отказы упали.
Чек-лист: интерфейс, который продаёт
- Главный CTA контрастный и виден без скролла
- Корзина показывает итог, доставку и ошибку полей сразу
- Отзывы и гарантии — на карточке, рядом с ценой
- Страницы грузятся быстрее 2–3 секунд на мобильном
- Фильтры и покупка удобны одной рукой на телефоне
UX/UI для e-commerce — не «красиво», а измеримо: корзина, конверсия, отказы. Проверяйте правки цифрами.
Нужен такой же результат?
Обсудить проект