Экраны
Видео вместо студийного фото на белом фоне
Маркетплейс требует белый фон и предмет по центру. Здесь можно показать маску там, где ей место — в воде, на человеке. Пять секунд без звука, с кнопкой паузы.
Ролик подставляется скриптом уже после загрузки страницы: иначе он отбирает канал у шрифтов и постера, и первый экран приходит позже. Исходник 12,4 МБ пережат до 2,9 — при PSNR 43,9 дБ разницу глазом не поймать.
Весь выбор на одном экране
Шесть цветов, галерея, две версии, цена и кнопка — без модалок, выезжающих панелей и переходов. Клик по цвету перерисовывает кадры на месте.
Номер кадра при смене цвета сохраняется — можно сравнить один и тот же ракурс в белом и в чёрном. Цена стоит прямо в плашке версии, поэтому доплата читается как «+600 ₽ за брендирование», а не как другой товар. Из четырёх вариантов раскладки клиент выбрал этот — из него выросла вся страница.
Что придёт в коробке — картинкой, а не строкой
Строка «комплектация: маска, трубка, чехол» ничего не показывает. Здесь фотография с тремя цифрами и список справа: наведение на пункт подсвечивает его цифру на кадре и наоборот.
Фотография показывает, список объясняет, цифра связывает одно с другим — поэтому подписи под фото не нужны.
Техпаспорт вместо таблицы атрибутов
Стекло, клапаны, юбка, угол обзора, ремешки — не списком характеристик, а объяснением, зачем каждая деталь нужна.
Это прямой ответ на вопрос «почему 3 490, а не 900 с рынка». На маркетплейсе такие вещи тонут в таблице атрибутов, которую никто не читает.
«Чтобы не текла и не потела»
Раздел вырос прямо из минусов в отзывах на маркетплейсе. Люди хвалят прилегание и обзор, а ругают за протечки и запотевание — и почти всегда это не брак, а неправильная посадка.
На карточке продавцу невыгодно говорить о проблеме: разговор о ней снижает конверсию. На своём сайте выгодно — это снимает возвраты и превращает покупателя в человека, который умеет пользоваться маской.
Плитки, потому что человек здесь сканирует
В этом блоке никто не читает абзацы — глазами ищут «Boxberry есть?» и «а без предоплаты можно?». Плитка отвечает за секунду, абзац нет. Сравнивали с вариантом в две колонки текстом, выбрали плитки.
Иконки свои, а не логотипы служб: чужие логотипы требуют разрешения, стареют вместе с ребрендингами и тащат на страницу три чужие фирменные палитры.
Три службы, цена и срок — из вашего города
Оформление в три шага: доставка, получатель, оплата. Сначала способ — пункт выдачи или курьер, потом служба, потом конкретный пункт. Дальше без выбранного пункта не пускает.
Цена и срок берутся из города, выбранного ещё в служебной строке наверху, и совпадают везде: в шапке, под кнопкой «В корзину» и здесь. На маркетплейсе стоимость доставки часто вылезает сюрпризом на последнем шаге — здесь она известна с первого экрана.
Виджет СДЭК, который не тянется с чужого CDN
Официальный виджет лежит у нас в проекте, а не подгружается со стороннего адреса, и грузится только в момент открытия карты — 600 КБ на первом экране никому не нужны.
Интеграция написана и ждёт доступов: нужны ключ Яндекс.Карт и логин с паролем СДЭК. Пароль в браузере держать нельзя, поэтому между сайтом и службой стоит серверный посредник. Пока ключей нет — на месте карты аккуратный список пунктов, и весь сценарий заказа проверяется целиком.
Та же страница, ничего не выброшено
Люди с маркетплейса приходят с телефона — урезанная мобильная версия здесь означала бы урезанные продажи. Вёрстка живёт от 360 пикселей, зоны нажатия не меньше 48, галерея листается свайпом.
Видео первого экрана на мобильном превращается в горизонтальную полосу под текстом: один и тот же файл обслуживает оба формата, поэтому телефон не тянет лишних мегабайт.
