Как бы Пегги Олсон делала дизайн для Interactive

В эпоху «Безумцев» маркетологи точно знали, как будет потребляться их работа. Целевая аудитория увидит рекламу по телевизору, услышит ее по радио, увидит в журнале или на рекламном щите и, возможно, она придет в почтовый ящик. Если вы планировали печатную рекламу или почтовое отправление, вы знали точный размер недвижимости, для которой проектировали, и оптимизировали свое объявление, чтобы оно соответствовало этому пространству. Потребитель увидит этот контент именно таким, каким вы его себе представляли, когда создавали его.

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

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

Три ключевых передовых метода интерактивного дизайна

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

1. Как макет влияет на вовлеченность: узнайте, как размещать элементы на странице для максимального вовлечения.
2. Как контент влияет на вовлеченность: узнайте, что заставит меня взаимодействовать с вашим контентом
3. Насколько важно время: у вас есть две секунды, чтобы привлечь мое внимание

Звучит просто, правда? Если бы все было так просто, я бы это не писал! Я не могу сказать вам, сколько фрагментов контента, с которыми я сталкиваюсь ежедневно, расстраивают меня до такой степени, что я просто нажимаю кнопку «Назад». Я говорю о крупных корпорациях с глубокими кошельками, но без особого смысла в дизайне.

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

Как глаз сканирует страницу

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

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

Итак, что это значит? Это означает, что ваш CTA должен быть где-то в этой заглавной букве F, или вам нужно надеть усы на ребенка. Примите сознательное дизайнерское решение, чтобы поместить главный CTA в то место, где он привлечет внимание зрителя в первые две секунды.

Настоящие дизайнерские катастрофы

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

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

Наиболее распространенная упущенная возможность, которую я вижу, — это часть контента, которой либо нет возможности поделиться, либо кнопки «Поделиться», которые спрятаны в нижней части страницы ниже сгиба. Сгиб — это воображаемая линия внизу экрана. (Этот термин появился в те времена, когда газеты складывали пополам; «выше сгиба» было лучшее размещение, с лучшей читаемостью.) На экране ноутбука среднего размера сгиб может составлять 480 пикселей от верхней части экрана, но на iPhone это может быть на 100 пикселей сверху. Помните об этом, когда будете размещать содержимое своей страницы.

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

Я предлагаю разместить кнопки «Поделиться» вверху и внизу контента или кнопки «Поделиться», которые плавают рядом с контентом при прокрутке.

Я работал с очень известной компанией, которая обнаружила, что когда они добавили кнопки «Поделиться» вверху статьи, а также внизу, доля пользователей увеличилась более чем на 400%.

Пример 2: О, мои глаза!

Вы когда-нибудь натыкались на фрагмент контента, который был настолько занят, что вы не знали, где искать? Может быть, там было видео, которым нужно поделиться, форма для заполнения, несколько копий, несколько ссылок тут и там. Если бы я попал на страницу ниже, я бы не знал, с чего начать, поэтому, вероятно, вообще не стал бы вмешиваться. Этот пример не дает мне никакого представления о том, что наиболее важно на этой странице. У тебя есть две секунды или меньше, чтобы привлечь мое внимание и увлечь меня, и ты только что потерял меня.

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

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

Если бы я давал советы Actomatic, я бы начал с вопроса, чего они надеются достичь с помощью этой страницы. Какова цель здесь? Я предполагаю, что основные цели здесь — заставить людей подписаться на блог, посмотреть и поделиться коротким видео. Если это так, то нам нужно внести некоторые изменения.

1. Убедитесь, что основной призыв к действию находится выше сгиба. Кнопки «Поделиться» и «Подписаться» находятся внизу страницы.
2. Дайте понять, что вы хотите, чтобы посетители подписывались на блог и делились видео.
3. Добавьте немного информации о компании

Хорошо, давайте посмотрим сейчас:

Новая и улучшенная версия имеет немного другой макет, меньше шрифтов, краткую аннотацию о компании и видео, а также более низкий барьер для подписки на блог. Я также добавил ссылки внизу и кнопку «Контакты». Обратите внимание, как я оптимизировал макет, чтобы максимально увеличить количество информации, которую читатель увидит в первые две секунды, следуя естественному сканированию страницы. Теория шаблона F говорит, что это порядок, в котором зритель будет воспринимать элементы на странице:

1. Логотип компании
2. Заголовки
3. Кнопки поделиться и подписаться
4. Раздел Исследовать внизу

Дайте мне повод взаимодействовать

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

Если вы не знаете ответа на этот вопрос, значит, вы не сделали домашнее задание.

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

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

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

Будь проще

Недавно я выступал на конференции, где представил пример успешной кампании социального маркетинга. Я носил футболку с надписью спереди: #KeepItSimple. Я стараюсь практиковать то, что проповедую.

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

• Выбирайте начертания шрифтов, такие как Trebuchet, которые легко читать онлайн.
• Не смешивайте слишком много шрифтов и размеров на странице. Один размер для заголовков, один размер для основного текста.
• Если возможно, придерживайтесь одного четкого призыва к действию.
• Держите важные вещи выше сгиба.
• Сделайте барьер для входа как можно ниже (не просите чей-то первенец, если все, что вам действительно нужно, это его адрес электронной почты).

Ваше домашнее задание

Подождите, вы же не говорили, что в конце этой статьи будет домашнее задание! Если бы я сказал вам, что будет домашнее задание, вы бы дочитали до этого места? Ага. Я бы хотел, чтобы вы критически взглянули на одну из своих целевых страниц и спросили себя, есть ли что-то, что можно улучшить.

• Просмотрите одну из своих целевых страниц на ноутбуке и на мобильном устройстве. Вам нужно прокручивать, чтобы перейти к CTA? Хорошо ли он отображается на мобильном устройстве?
• Попросите друга, который ничего не знает о вашей компании, просмотреть одну из ваших целевых страниц и оставить откровенный отзыв во время ее просмотра. Попросите их рассказать вам, что они замечают в первую очередь, чем занимается ваша компания и какой главный призыв к действию находится на странице.
• Посмотрите, все ли важные элементы находятся в шаблоне F.
• Протестируйте свои страницы в максимально возможном количестве браузеров на максимально возможном количестве платформ. Safari не отображает такие элементы, как Chrome. Firefox не отображает такие элементы, как Internet Explorer (IE). И разные версии IE могут совершенно по-разному отображать контент.

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

Это стоит усилий.