Как оформить сайт к Новому году: баннеры, предложения и удобство покупки

Новогоднее оформление сайта должно показывать действующее предложение, срок заказа и способ получить покупку к празднику. Подготовьте баннеры для разных этапов декабря и проверьте, что декор сохраняет читаемость условий и доступ к кнопке заказа на телефоне.

Что посетитель должен заметить в первую очередь

Перед тем как обсуждать цвета, ответьте на четыре вопроса:

• Что именно вы продвигаете: скидку на всё, подборку подарков, набор, быструю доставку к празднику?

• Для кого это: для тех, кто покупает подарок, или для тех, кто готовит праздник в офисе?

• Когда предложение заканчивается и до какого дня можно заказать, чтобы успеть получить заказ или услугу до праздников?

• Какое действие вы ждёте: покупку в каталоге, заявку, звонок?

Если в одной фразе ответить не получается, дизайнер украсит страницу, а посетитель не поймёт, зачем ему нужен именно этот экран. Предложение, которое нельзя пересказать за десять секунд, нужно упрощать до оформления, а не после.

Подготовьте смену баннеров до начала декабря

У новогоднего оформления несколько состояний. Покупатель сначала выбирает подарок, потом проверяет доставку, а в последние дни ищет доступный способ забрать заказ. Заранее подготовьте варианты текста и дату замены.

Оформление можно связать с реальной услугой. В новогоднем проекте ТРЦ «Июнь» команды Sichkar Group праздничная кампания включала упаковку покупок и мероприятия на каникулах. На своём сайте показывайте такую услугу только если она у вас есть: где упакуют заказ, в какие часы и сколько это стоит.

Снимите баннеры на телефон до запуска и после каждой замены. Прочитайте срок без увеличения, откройте подборку и попробуйте оформить заказ. Декор не должен закрывать условия или мешать выбрать город. За обновление баннера, каталога и рекламы назначьте одного ответственного, чтобы на разных экранах не остались разные версии акции.

Главный экран и баннер

Главный экран — первое, что видит человек, перешедший по рекламе или из поиска. Здесь должны уместиться название предложения, условие (скидка, подарок, срок), одна понятная кнопка и изображение товара или результата услуги.

Частая ошибка: праздничная картинка на весь экран, поверх неё тонкий светлый шрифт, а условия акции спрятаны в мелком тексте внизу. Контраст между текстом и фоном проверяйте на самом экране, а не по макету в графическом редакторе. Условия должны читаться без увеличения.

Учебный пример. Магазин чая запускает подарочные наборы. Набор стоит 2 000 ₽, на акции скидка 15%, то есть цена 1 700 ₽. Слабый главный экран: надпись «Новогоднее настроение» и фото ёлки. Сильный: «Подарочные наборы чая со скидкой 15%», рядом старая цена 2 000 ₽ и новая 1 700 ₽, ниже строка «Акция до 20 декабря» и кнопка «Выбрать набор». Ёлка остаётся, но она фон, а не содержание.

Если на странице много блоков и посетитель теряется, пересмотрите её порядок. Подсказки о том, какие вопросы клиента должна закрывать страница, есть в материале про структуру лендинга.

Каталог и карточка товара

Баннер привлёк внимание, дальше человек идёт в каталог. Здесь новогоднее предложение должно продолжаться, иначе возникает ощущение, что акция была только на картинке.

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

В карточке товара проверьте, что условия предложения повторены и не противоречат друг другу. Если на баннере написано «скидка 15% до 20 декабря», а в карточке цена прежняя, человек решит, что его обманули, и уйдёт. Любое изменение цены, названия набора или наличия делайте так же, как в обычной работе с каталогом: сначала товар и его описание, потом оформление вокруг. Справка конструктора по добавлению товаров в каталог описывает саму работу с товарами, организуйте её так, чтобы акционные позиции были собраны в одном месте и их можно было быстро найти и потом вернуть к обычному виду.

Снег, анимация и таймер

Эти элементы решаются тремя вопросами: читается ли страница, быстро ли она открывается, правдивы ли сроки.

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

Таймер обратного отсчёта. Он работает, только если показывает реальную дату окончания акции. Таймер, который у каждого посетителя начинается заново, создаёт ложную срочность и разрушает доверие, когда человек замечает, что «последний час» повторяется. Поставьте в таймере конкретную дату и время окончания акции, а после неё уберите таймер или замените блок. Если срок продлён, обновите и таймер, и текст предложения.

Сроки получения. Укажите последнюю дату заказа и оплаты, город, способ доставки и день, к которому покупатель получит товар. Согласуйте эти условия с теми, кто отвечает за изготовление и доставку. Для услуги назовите срок её выполнения. Общее «успеем к Новому году» не объясняет, какой именно этап вы обещаете завершить.

Мобильная версия

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

Для телефона часто нужен свой, более короткий вариант баннера: одна строка предложения, дата и кнопка. Подробнее о том, что проверить до запуска рекламы, — в материале про мобильную версию лендинга перед запуском рекламы.

ТЗ дизайнеру: что в каком порядке

Дизайнеру нужен не набор пожеланий, а порядок важности. Передайте его так:

1. Предложение. Название, условие, дата окончания, действие. Всё это обязательно читается на главном экране без прокрутки.

2. Баннер и главный экран. Текст предложения, цена или размер выгоды, кнопка. Фон и графика подчинены тексту.

3. Каталог и карточки. Метки акции, подборка, одинаковые условия во всех местах.

4. Мобильный вариант. Отдельная проверка и, при необходимости, отдельный короткий макет.

5. Праздничные детали. Цвета, графика, анимация. Допустимы, если не ухудшают пункты 1–4.

6. Возврат. Заранее оговорите, что после акции оформление будет сниматься, и какие элементы с этим связаны.

Приложите тексты предложения, фотографии товаров и дату окончания. Если дизайнер придумывает формулировки сам, возможны расхождения с условиями, которые вы реально соблюдаете.

Приёмка перед запуском и возврат после акции

Перед публикацией откройте страницу как покупатель, с телефона и с компьютера:

• за несколько секунд понятно, что за предложение, до какого числа и что нажать.

• условия на баннере, в каталоге и в карточке совпадают.

• таймер показывает реальную дату окончания.

• снег и анимация не закрывают текст и кнопки, страница открывается без заметной задержки.

• кнопка ведёт туда, куда нужно, а заявка или заказ доходят до вас.

После окончания акции вернуть обычную версию лучше по плану, который составлен до запуска:

• назначьте ответственного и дату, когда оформление снимается.

• перед заменой сохраните прежние тексты и скриншоты главного экрана и баннеров, чтобы вернуть их без восстановления по памяти.

• уберите таймер и метки акции, верните обычные цены в каталоге и карточках.

• отключите или смените рекламные объявления, которые рассказывают про акцию, и проверьте, что они не ведут на страницу с уже недействующим предложением.

• решите заранее, остаётся ли часть праздничного оформления после праздников, и когда её уберут.

Если страницу нужно перестроить под акцию, подготовить мобильный макет и собрать предложение в понятную структуру, с этим помогает разработка и доработка лендингов в Adget. Задачу лучше поставить заранее, пока до новогодних продаж остаётся время на проверку.

Источники

• Тильда: мобильная версия сайта
• Тильда: добавление товаров в каталог
• Sichkar Group: новогодняя кампания ТРЦ «Июнь»