На что обращать внимание при предварительных обзорах проекта

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

Вот почему необходимо перед окончательной доработкой целевой страницы после клика провести предварительную проверку дизайна.

Эскизный проект.

Создание целевой страницы после клика требует координации всей команды креативщиков. UX-дизайнеры, копирайтеры, менеджеры проектов и разработчики - все они должны сыграть свою роль в этом процессе. (Узнайте, как решение для совместной работы Instapage может ускорить этот процесс.)

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

1. Почему мы это делаем / Какую проблему мы пытаемся решить?

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

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

Снимок героя может помочь посетителям представить лучшую жизнь с вашим продуктом. Если ваша проблема: «Наша услуга новая, и люди ее не понимают», поясняющее видео может точно продемонстрировать, как она работает.

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

2. Для кого мы это делаем?

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

Для кого вы создаете эту страницу? Какое сообщение найдет у них отклик? Хороший шаг к полному пониманию ваших перспектив - создание образа покупателя.

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

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

3. Как мы узнаем, что добились успеха?

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

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

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

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

Элементы для оценки при предварительном рассмотрении проекта

«Относитесь к каждому компоненту так, как будто он может быть представлен на конкурсе дизайна», - говорит дизайнер Microsoft Клаудио Гульери. «Если вы обратите внимание на каждый компонент, целое будет больше, чем сумма его частей».

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

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

Макет

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

«Это системы, которые были более или менее напрямую перенесены в Интернет, и они работают», - говорит Алекс Бигман. «Слово мудрым: многие дизайнеры пытались избежать использования сетки во имя« творчества »; многие такие сайты остаются непрочитанными ».

Исследования подтверждают это. Одно исследование, проведенное Microsoft и MIT, показало, что когда двум группам испытуемых были представлены разные макеты страниц, одна традиционная, а другая нетрадиционная, их ответы были следующими:

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

• Традиционная группа недооценила время, которое им потребовалось, чтобы прочитать отрывок, и сообщила, что во время чтения уделяется больше внимания.

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

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

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

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

• Размер: чем он больше, тем больше внимания он привлекает.

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

• Цвет: цвета, контрастирующие с остальной частью страницы, привлекают внимание.

• Плотность: добавление нескольких элементов в небольшое пространство увеличит количество внимания, которое эта область привлекает.

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

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

Тип

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

Шрифт целевой страницы после клика соответствует шрифту вашего веб-сайта.

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

Ваш шрифт читается во всех размерах

Эксперт по юзабилити Д. Бнонн Теннант рекомендует 16 пикселей, потому что это близко к тому, что мы видим в книгах (экран слева, страница книги справа):

Используйте текст без засечек в основном тексте, поскольку исследования показали, что в Интернете с меньшим размером шрифта с засечками труднее читать. Хороший способ обеспечить читаемость - убедиться, что ваш шрифт проходит тест «il1»:

Вы сокращаете количество разных шрифтов до минимума

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

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

Ваши строки текста имеют сбалансированную длину

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

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

Ваш межстрочный интервал улучшает читаемость

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

Дизайнер шрифтов Мэтью Баттерик утверждает, что для максимальной читабельности интервал между каждой строкой должен быть в процентах от размера шрифта - точнее, 120–140%.

Текст учитывает модели чтения в Интернете

На страницах с большим количеством текста читатели, как правило, обрабатывают страницу по шаблону, напоминающему букву «F». На страницах с изображениями этот узор больше похож на букву Z.

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

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

Вы не нарушите левое поле

Когда мы читаем, левое поле - это «дом» для наших глаз. Строки текста могут заканчиваться в самых разных местах, но левое поле - это то место, куда мы переводим взгляд после того, как мы закончим.

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

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

Цвет

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

Дополнительная цветовая схема

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

Аналогичная цветовая гамма

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

Монохромные цветовые схемы

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

Отражает ли ваша цветовая схема ваш бренд?

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

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

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

• Наконец, выберите фон и цвет акцента (цвет вашей кнопки CTA), которые контрастируют друг с другом, чтобы привлечь максимальное внимание.

Узнайте больше о том, правильно ли вы выбрали цвета.

Меню навигации, нижний колонтитул

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

Теперь посмотрите вниз. Набросан ли нижний колонтитул с множеством дополнительных ссылок? Если да, удалите их.

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

Изображений

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

• Изображения продуктов, которые дают вашим посетителям представление о том, как выглядит ваше предложение или как оно работает.

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

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

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

• Значки безопасности, которые сообщают посетителям, что они в безопасности на вашей странице.

• Значки органов власти, которые подчеркивают награды, полученные вашим бизнесом.

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

Дизайн формы

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

Во время предварительного обзора дизайна ознакомьтесь с лучшими практиками Nielsen Norman Group по проектированию форм при оценке собственного:

Он запрашивает только ту информацию, которая вам абсолютно необходима?

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

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

Представлены ли ваши поля в формате одной колонки?

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

Сгруппированы ли похожие поля и метки?

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

Можете ли вы комбинировать или изменять поля формы, чтобы уменьшить трение?

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

Если вы разрабатываете форму сжатой страницы, которая запрашивает имя и фамилию, подумайте об объединении полей или даже удалении фамилии (некоторые страницы даже не запрашивают имя).

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

Дизайн кнопок

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

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

Ваша кнопка похожа на кнопку?

Посмотрите на кнопки на клавиатуре. Это те, к которым ваши потенциальные клиенты привыкли продвигаться в реальном мире. Ваш должен выглядеть примерно так же.

Насколько похоже? Это зависит от вашей аудитории.

Скевоморфные кнопки

Для аудитории, которая не слишком разбирается в Интернете, методы скевоморфного дизайна могут помочь сделать кнопку узнаваемой. Скевоморфизм - это стиль дизайна, который имитирует состав объектов в реальном мире. Вот пример цифрового калькулятора, созданного со скевоморфным дизайном:

Трехмерные эффекты, такие как затенение, делают кнопки удобными для нажатия. Это то, к чему мы привыкли с первых дней Интернета:

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

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

Плоские кнопки

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

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

Вот плоская кнопка на странице сжатия:

Однако исследования показали, что этот метод может сбить с толку и расстроить даже опытных интернет-пользователей, исключая индикаторы кликабельности, такие как 3D-эффекты. Кейт Мейер объясняет:

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

Такое поведение - нажатие наугад, чтобы найти кнопку или ссылку - иногда полезно. Иногда то, что посетители нажимают, на самом деле является интерактивной кнопкой, а иногда - нет. Мейер расширяет:

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

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

Квартира 2.0

Такой баланс известен как «плоский 2.0», «полу-плоский» или «почти плоский» дизайн. Вот полуплоская кнопка:

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

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

Ваша кнопка привлекает внимание?

Чтобы привлечь внимание к кнопке с призывом к действию, залейте ее цветом, который использовался редко (или не использовался вовсе) на целевой странице после клика. Из-за этого тематического исследования когда-то считалось, что красный цвет превосходит зеленый цвет:

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

Если вы создаете схему дизайна, используя теорию цвета, ваша кнопка CTA будет вашим «акцентным» цветом. Это наиболее заметно при контрасте с оттенком на противоположной стороне цветового круга (см. «Цвет» выше).

Ваша кнопка достаточно большая?

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

Исследование Массачусетского технологического института показывает, что средний размер сенсорной панели составляет от 10 до 14 мм, что делает 10х10 мм оптимальным минимальным размером кнопки:

Данные говорят, что чем меньше размер, тем выше вероятность ошибки пользователя:

Сохраните конверсии с предварительным рассмотрением дизайна

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

Всегда связывайте все свои объявления с персонализированными целевыми страницами после клика, чтобы снизить затраты на привлечение клиентов. Начните создавать свои специализированные страницы после щелчка, подписавшись на демонстрацию Instapage Enterprise сегодня.