Заставляем форму подписки работать

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

Коллеги из eSputnik перевели и адаптировали для нас статью 10 Highly Effective Trends in Newsletter Signup Form Design. Итак, поехали!

01. Акцент на бесплатной услуге

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

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

Этот проект регистрации от By Regina в обмен на подписку предлагает электронную книгу. Предложение заманчиво в том числе и благодаря тому, что расположено на одном уровне с формой регистрации. Мы понимаем, что до ценной книги нам остался лишь маленький шажок в виде несложной регистрации.

Дизайн J.Crew Factory захватывает внимание  не только жирным шрифтом и яркой рисованной от руки лампочкой, но и скидкой, для которой все остальное служит лишь оформлением.

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

Предложение вдвойне сильней, если оформлено стильно.

02. Стремитесь к минимализму

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

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

Эта страница подписки очень простая, стильной ее делает незатейливый, без украшательств шрифт и  дизайн в целом. Его цель — сделать процесс подписки простым и быстрым.

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

03. Создайте свою страницу так, чтобы форма подписки выделялась на ней

Когда вы разрабатываете дизайн веб-страницы, уделите время и внимание тому, чтобы выделить заметное место для формы подписки.

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

В качестве руководства по размещению формы подписки можно использовать следующую диаграмму:

Как вы видите, подходящими для размещения формы подписки местами считаются верх страницы, ее правое поле  и сайдбар.

Давайте рассмотрим пример, в котором успешно использованы два из трех этих советов.

Как вы можете видеть, Penguin Books Australia размещает одну простую ссылку на подписку в верхней части страницы прямо под основным логотипом. Если кликнуть по ней, вы попадете на полную форму в футере.

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

04. Усильте дизайн рисунками и фото

Хорошая альтернатива исключительно текстовому оформлению — добавить рисунок или фото таким образом, чтобы в дизайне формы подписки чувствовалась некая изюминка.

Рассмотрим три разных подхода к этой задаче.

В форме подписки Buscemi графика используется очень просто. Разноцветное лого фокусирует взгляд, разбивая на 2 части минималистичный дизайн, после чего взгляд автоматически переходит на текстовую строку. Таким образом, простой рисунок, например — ваше лого, может добавить красок в форму и привлечь внимание к ней.

Если вы продаете товары, используйте их фото. Так у пользователя сформировалось представление о материалах, которые ждут его в рассылке. В примере от магазина дизайнерской одежды и обуви М.Геми использование сложного яркого изображения в сочетании с обещанием «нового класса роскоши» подчеркивает уникальность предложения и его элитарность.

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

05. Придумайте броский призыв к действию

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

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

На сайте Marie Forleo можно увидеть прекрасные примеры двух сильных призывов к действию — начиная с ярко оформленных призывов “Get anything you want” и “Create a life you love”, и заканчивая цепляющим выбором цветов и шрифта.

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

Elembee использует четыре уровня призыва к действию: в заголовке, на основной части, над самой формой регистрации, и в конце — кнопка «Start now». Каждый из этих призывов — это простое, энергичное заявление, которое расположено в нужном месте. Все они отлично рифмуются с общим дизайном и вызывают желание нажать их.

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

06. Используйте всплывающие формы

Всплывающие окна согласно статистике Econsultancy увеличивают подписку на 400%. Если вы используете всплывающее окно для подписки на рассылку, вы должны принять во внимание его наложение на основную страницу.

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

Существует 2 основных подхода к эффекту наложения.

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

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

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

07. Анонсируйте содержание рассылки текстовыми и образными средствами

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

На этом примере от Elle & Co. текст в основной части формы разбит на абзацы, чтобы привлечь больше внимания к выделенной жирным шрифтом информации о частоте рассылки и ее темах.

Кроме того, Elle & Co. используют отзывы от уже состоявшихся подписчиков. Каждый отзыв дополнен фотографией человека и ссылкой на его страницу, что добавляет отзыву правдоподобности.

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

08. Соедините блестящий текст и безупречный дизайн

Экспериментировать нужно не только с дизайном, но и с текстом. Вы не обязаны ограничиваться призывом «Зарегистрироваться сейчас» в качестве заголовка и надписью «Отправить» на кнопке, будьте креативными!

Постарайтесь, чтобы стилистика вашего текста соответствовала как вашей аудитории, так и общему тону вашего сайта. Он может быть шутливым или официальным, провокационным или деловым.

В этих примерах с сайта xoSarah стиль текста разговорный, энергичный и напористый, и дизайн формы отлично подчеркивает это яркими цветами и жирным шрифтом.

В дизайне от Devan Danielle использован чуть более утонченный подход. Вместо термина “Newsletters” здесь употребляется слово “Letters” и используется гораздо более простой, минималистичный  дизайн. Эта страница регистрации “звучит” элегантно, лаконично и профессионально, и при этом привлекательно.

Убедитесь, что стиль текста и стиль дизайна дополняют друг друга. Хотите звучать более утонченно? Постарайтесь использовать более светлые, приглушенные цвета и более строгие шрифты. Пишите весело и остроумно? Тогда подойдут яркие цвета и жирный шрифт!
09. Оставляйте подписчикам выбор (но не слишком много)

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

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

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

10. Сделайте форму подписки контрастирующей со страницей

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

Это всплывающее окно с сайта Kate Spade сразу привлекает и удерживает внимание, выбиваясь из структурной логики страницы. В целом сайт Кейт Спейд организован линейно, с четкими горизонтальными и вертикальными линиями. Поэтому круглая форма и ярко-желтый цвет всплывающего окна отлично контрастирует со страницей.

В дизайне Bonobos используется жирный шрифт и яркий цвет, что на странице тоже смотрится контрастно.  В сочетании с оригинальным заголовком и заманчивым предложением 20% скидки, окно завладевает вниманием и направляет его на форму регистрации.

***

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

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

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

По материалам статьи Mary Stribley
10 Highly Effective Trends in Newsletter Signup Form Design

Перевод и адаптация выполнены eSputnik. В системе eSputnik вы можете заказать форму подписки бесплатно. Коллеги обещают, что форма подписки в стиле вашего сайта будет готова в течение трех рабочих дней. Но если вы хотите поэкспериментировать сами — вдохновитесь лучшими примерами из статьи :-)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Дополните выражение: