Вот так заголовки выглядят после придания им эффекта Drop Shadow:

Шаг 6: Круги

Теперь нам с вами предстоит добавить на наш лендинг пейдж 3 круга: 2 круга одинакового размера + один побольше и соединить их линией в 5px. Чтобы сделать круги воспользуемся инструментом Ellipse Tool, а для линии подойдет Line Tool с толщиной линии в 5 px.

Далее используйте рандомный дефолтный свой любимый шрифт и напишите несколько надписей с ключевыми аспектами лэндинга. В самом большом круге добавьте +10pt к размеру шрифта.

Шаг 7: Кнопка призыва к действию (Call to action)

Итак, мы наконец-то добрались до call-to-action кнопки. Сделаем её с помощью инструмента Rounded Rectangle Tool. Выставьте радиус 3px + цвет #96c64f и нарисуйте элемент шириной 7px и высотой 35px, после чего добавьте к элементу Drop Shadow эффект:

Далее добавим Inner Shadow c Distance в 1px и Opacity на уровне 30%. Получим следующее:

И снова Bevel and Emboss для call to action кнопки. Этот эффект отлично справляется с задачей придания объёма элементам, именно поэтому мы его здесь и используем. Но с ним тоже не стоит особо перегибать, чтобы сделать эффект едва заметным, выставьте для опции Highlight Mode оставьте Opacity на уровне 0% а для Shadow Mode — на уровне 7%.

Далее добавляем к элементу эффект Gradient Overlay в режиме смешивания Soft Light с Opacity на уровне 60%:

Теперь нам с вами предстоит добавить немного шума нашей кнопке. Существует множество разных техник, но мы продолжаем использовать паттерны. Как сделать свой собственный кастомный паттерн? 

• Создайте новый документ любого размера
• Создайте новый слой и удалите дефолтный бэкграунд
• Перейдите в меню Select > All
• Выберите Edit > Fill чтобы заполнить всё рабочее пространство
• Далее снимаем выделение Select > Deselect
• Добавляем достаточно заметный шум следующими действиями Filter > Noise > Add Noise
• Снова выделяем всё рабочее пространство: Select > All
• Переходим в меню Edit > Define Pattern

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

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

Далее нам нужно создать небольшой элемент, который будет служить разделителем между иконкой и текстом на кнопке. Для этого создаём вертикальную линию высотой в 10px с помощью инструмента Line Tool. Добавляем к линии эффект Gradient Overlay со следующими параметрами:

Используем тот же шрифт, который мы использовали для заголовков и пишем призыв к действию, например надпись Download it Now. Придаём тексту тёмно зеленый цвет (#4d7500) и присваиваем эффект Drop Shadow с белым (#ffffff) цветом тени и Opacity на уровне 30%.

Далее добавляем любую понравившуюся вам иконку или рисуем свою. В нашем случае это будет иконка облака.

Шаг 8: Ленточка рядом с кнопкой

Используйте ту же технику, с помощью которой мы рисовали ленточку для логотипа и дополнительно уменьшите Opacity чтобы сквозь ленточку была видна фоновая картинка. Это важно также чтобы не отвлекать посетителя от главного call-to-action. После того как ленточка будет готова, напишите на ней что-нибудь, например «100% free».

Шаг 9: Секция основного контента

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

Используйте Rectangle Tool чтобы создать элемент шириной 220px и высотой 214px. Ниже полученного прямоугольника нарисуйте еще один маленький прямоугольник 5px высотой и светло-зеленым (#91c04c) цветом. Используйте подготовленные сэты иконок и расположите выбранную иконку в центре верхней трети прямоугольника. Далее используйте Horizontal Type Tool и Source Sans Pro выбранный вами шрифт серого цвета (#262626) для заголовка и более светлый оттенок серого цвета для остального текста (#9c9c9c). Дублируйте полученный элемент три раза чтобы в итоге у вас получилось 4 подобных элемента, замените иконки и заголовки на копиях. У вас должно получиться вот так:

Используйте Nevis или любой понравившийся вам шрифт в Bold размером 18pt и напишите какое-нибудь предложение. Цвет текста тот же самый, который мы использовали для Заголовков на предыдущем этапе, а зеленый цвет — это цвет зеленых прямоугольников, которые мы тоже делали на предыдущем этапе. Сделайте ударение на словосочетании «Contact Us» — оно будет ссылкой, поэтому сделайте его подчеркнутым.

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

Шаг 10: Футер, подвал … или как там его?

Используем Rectangle Tool чтобы создать элемент 1200px в ширину и 280px в высоту. Покрасьте его в серый цвет (#d0d0d0) — это и будет наш бекграунд для футера.

Используем Horizontal Type Tool и тот же шрифт что и раньше чтобы написать очередной Заголовок как на следующей картинке. Мы разделим наш футер на 3 секции и каждая из них будет иметь собственный заголовок. Как вы можете видеть на картинке, заголовок первого блока гласит «More About Us«. Добавим к нему Drop Shadow эффект с параметром Opacity на уровне 50% и Distance в 1px.

Используйте тот же шрифт чтобы написать текст-рыбу и придайте ему более светлый оттенок (#7a7a7a).

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

Следующая секция будет называть «Newsletter«. Создайте поле для ввода имейла с помощью Rounded Rectangle Tool с радиусом в 3px. Придайте бекграунде очень светлый серый цвет (#f5f5f5). Give it a subtle Drop Shadow effect. Give the shape a really subtle 1px Stroke layer effect. Use the Horizontal Type Tool (T) to input some text in the shape. Добавьте пару эффектов по вкусу: например Drop Shadow и 1px Stroke. Напишите текст-рыбу для поля ввода.

Последняя секция носит название «Contact Us«. Она простая как двери и вряд ли отнимет у вас многов времени. Все шаги похожи на предыдущие, за исключением разве что более тёмных цветов для поля e-mail, location и phone number. Поэтому не будем особо на ней останавливаться.

Шаг 11: Finita la comedia

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

Источник: designinstruct.com/

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов

Насколько длинным должен быть эффективный лендинг?

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

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

«Если длинные целевые страницы все еще не считаются пережитком прошлого, то должны рассматриваться именно так. Совершенно очевидно, что люди обладают краткой продолжительностью концентрации внимания, поэтому их нужно конвертировать за счет максимально быстрой продажи продукта», — пишет фриланс-автор Кристи Хайнс (Kristi Hines).

Выступая в поддержку длинных лендингов, Брайан Мэйси (Bryan Massey) из Conversion Science сказал: «…продающее письмо должно поддерживать несколько разных режимов восприятия, включая сканирование, частичное внимание и вовлеченное чтение… методичного читателя нужно проводить через страницу в более традиционной манере.»

Защитники длинного копирайтинга в качестве главного козыря обычно приводят слова Дэвида Огилви (David Ogilvy), основателя Ogilvy & Mather:

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

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

Что говорят ученые?

Принимая во внимание тот факт, что споры о длинном и коротком копирайтинге начались в далеком 1923 году, когда Клод Хопкинс опубликовал книгу «Научная реклама» (Scientific advertising), вы могли бы подумать, что ученые считают эту область весьма интересной для изучения. Но увы, нет. Быть может, они просто не заинтересованы в рассмотрении данного вопроса, или же слишком заняты решением более важных задач, скажем, выявлением гравитационных волн или поисками бозона Хиггса.

Разумеется, это не значит, что данной темой никто не занимается. Одна команда исследователей обнаружила, что длинные тексты на баннерах обладают более высоким показателем CTR (click through rate). Но дело в том, что даже самое развернутое сообщение на баннере едва ли потянет даже на короткий продающий текст.

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

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

Интернет-маркетологи тестируют эти вещи на протяжении многих лет

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

Вот что показали несколько тестов.

Пример 1. Crazy Egg достигают желаемого при помощи длинного копирайтинга

В попытке увеличить уровень конверсии сайта Crazy Egg основатели платформы Нил Патель и Хитен Шах (Hiten Shah) обратились за помощью к Conversion Rate Experts. CRE рассмотрели существующую страницу и определили несколько областей для улучшения. Они обнаружили, что посетители не всегда понимали, чем занимается этот ресурс или как работают тепловые карты (heat maps). Потенциальные клиенты также не могли сказать, стоят ли данные, которые они должны получить, затраченных денег. Помимо этого, у них возникали вопросы по поводу различных функций и того, чем Crazy Egg отличается от бесплатных инструментов.

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

Результат? Новая длинная страница превзошла контрольную версию на 30%.

Пример 2. Crazy Egg получают еще лучшие результаты с коротким текстом

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

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

В итоге, было подготовлено четыре варианта новой страницы — все короче, чем контрольный лендинг — и проведен тест:

Результат? Версия D (самая правая страница на скриншоте), показала конверсию на 13% лучше, чем длинный контрольный лендинг. И хотя победитель оказался не таким коротким, как оригинал в примере №1 — он намного короче, чем новая контрольная страница.

Пример 3. Highrise оказались в выигрыше из-за длинного копирайтинга

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

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

Как только лендинг был готов, был проведен сплит-тест с участием 42 000 посетителей:

Результат? Более длинная страница обеспечила на 37,5% больше бесплатных подписок, чем контрольная. Это подтверждает эффективность длинного копирайтинга.

Пример 4. Highrise получили еще больше, сократив копирайтинг

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

Результат? Короткая страница повысила количество платных подписок на 102,5%. Затем команда провела еще один тест, добавив к новому дизайну львиную долю контента с длинной страницы. В итоге число регистраций снизилось на 22,72%. В данном случае короткий копирайтинг оказался более эффективным.

Пример 5. 911 Restoration урезали текстовую часть лендинга и повысили конверсию

Компания 911 Restoration привлекает трафик на сайт преимущественно за счет SEO и PPC. Этот трафик ответственен за 90% их потенциальных клиентов. Целевая страница была относительно длинной, так как она содержала важные ключевые слова, которыми клиенты пользуются при поиске.

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

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

Результат? Более краткая вариация генерировала 35 звонков на 133 клика ($4 982 рекламного бюджета), в то время как длинная — 34 звонка на 177 кликов ($7 177). Таким образом, конверсия повысилась на 37%, а затраты на конвертацию снизились на 33% — большая победа для короткого копирайтинга.

Пример 6. Moz делают свою страницу большей и повышают конверсию

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

Сотрудничая с Conversion Rate Experts, Moz опросили покупателей на всех стадиях воронки продаж (sales funnel), включая free-trial подписчиков. Используя итеративный процесс юзабилити-теста, модификации страницы и повторного теста, Moz создали новый лендинг, который включал информацию об услуге и объяснял пользователям, что конкретно они получат при покупке инструментов. Новая страница была в 7 раз длиннее, чем контрольная.

Затем они провели сплит-тест с более чем 5 000 посетителей сайта, чтобы сравнить эффективность обоих лендингов:

Результат? Длинный лендинг повысил продажи Moz Pro на 51,83% и тем самым привлек более $1 000 000 прибыли. Это отличный результат для длинного контента.

Пример 7. Qi Networks повышает конверсию на 70,1% за счет короткого копирайтинга

Qi Networks — это бразильский реселлер Google Apps, чья оригинальная страница содержала массу информации об их услугах. Побеседовав с покупателями, компания осознала, что большинство клиентов попадают на сайт в «драматический» момент, когда их почта не работает (так как они пользовались дешевым неэффективным решением), и хотят исправить эту проблему как можно быстрее.

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

Результат? Более лаконичная страница повысила конверсию на 70,1%. Поклонники короткого копирайтинга обожают использовать этот пример как аргумент в пользу эффективности кратких текстов.

Пример 8. Длинный контент Quality Training сработал не хуже

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

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

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

Результат? Длинная страница повысила конверсию на 662% в сравнении с оригинальной и повлекла за собой рекордные продажи.

Закономерность или ее отсутствие?

Так когда же следует использовать длинные и короткие тексты? Боб Кемпер (Bob Kemper), научный руководитель в MECLABS, проанализировал сотни неопубликованных A/B тестов длинного и короткого копирайтинга, чтобы понять, какие факторы влияют на этот выбор. Он обнаружил три аспекта:

1. Природа мотивации посетителя

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

2. Изначальный уровень беспокойства о продукте или компании

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

3. Стоимость или обязательства, связанные с конверсией

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

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

Длинный копирайтинг против короткого. Ось Y: внизу — эмоциональные желания, вверху — рациональные, аналитические потребности. Ось X: слева — низкая стоимость/незначительные обязательства, справа — высокая стоимость/серьезные обязательства

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

Сравните матрицу Кемпера со шкалой состояния осведомленности, которой Джоанна Вибе (Joanna Wiebe) поделилась на сайте Copy Hackers, и вы получите еще более полную картину в плане того, когда в стоит использовать длинный или короткий контент:

Ось Y — как много вы должны рассказать? Ось X — низкая осведомленность > высокая осведомленность

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

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

На что обратить внимание?

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

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

1. Где и почему покупатели покидают вашу страницу?
2. Каков их уровень осведомленности?
3. Интересует ли их что-то, чего нет на вашей странице?
4. Что из сказанного вами их совершенно не волнует?
5. Какие элементы страницы ни на что не влияют?
6. Какие возможности и преимущества должны упоминаться в первую очередь?
7. Как вы можете выразить свою мысль эффективнее?
8. Можете ли вы изъясняться более сжато?
9. Какие слова использует ваша целевая аудитория, чтобы описать ваш продукт и стоит ли вам задействовать их?

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

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

Вместо заключения

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

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

Создали лендинг пейдж и задумываетесь об оптимизации конверсии? Ознакомьтесь с нашей технологией по увеличению бизнес-показателей >>>

Высоких вам конверсий!

По материалам: blog.crazyegg.com 

18-05-2016

Профессиональный Landing Page размеры | ЗЕКСЛЕР

Экран: визуальная единица лендинга

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

Одноэкранные лендинги

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

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

Бесспорное преимущество одноэкранных landing page – это отсутствие необходимости заставлять пользователя скролить страницу. Вся информация располагается в пределах первого визуального контакта и сразу же оценивается потребителем.

Безразмерные посадочные страницы

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

• Мотиватор первый – адресная направленность. Хотя это пункт и не выглядит стопроцентным тематическим представителем, но он по праву стоит на лидирующем месте – обращение не по адресу делает всю дальнейшую работу бессмысленной.
• Мотиватор второй – конкурентный. Здесь объединяются несколько понятий: качество, стоимость, доступность. Представление каждого элемента перечисленного ряда способно стать «спусковым крючком» интереса к торговому предложению.
• Мотиватор третий – личностный. Если во втором пункте мы обращались к разуму покупателя, то здесь в дело вступает сторона потребительского эгоизма и желания если не выделиться, то быть не хуже других. Для некоторых целевых групп – очень действенный прием.
• Мотиватор четвертый – рациональный. Обращен в сторону гарантий, сервиса и надежности. Интересен для общих потребительских товаров, где продавец не может соревноваться в регистре уникальности предложения, но способен выделиться дополнительными услугами.
• Мотиватор пятый – репутационный. Интересен, в первую очередь, сфере услуг. Профессиональные достижения, квалификация сотрудников, участие в рейтингах и конкурсах, использование передовых технологий – мир современного бизнеса нечасто генерирует новые тематические поля, но успешность и лидерские позиции в своей отрасли всегда благосклонно воспринимаются потребителями.

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

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

как размер картинок влияет на пользовательский опыт?

Известное высказывание «одна картинка стоит тысячи слов» хорошо подходит для описания эффективности изображений (как маркетинговых инструментов) на лендингах.

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

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

Ярким примером веб-дизайна, централизованного на изображении, является сайт Southwest Airlines (авиакомпания) — фоном и фокусным центром страницы является фотография семьи, отдыхающей на лыжном курорте.

Содержание

Оптимальный размер фона для сайта на примере Southwest Airlines
В каких случаях дизайн, сфокусированный на изображении, эффективен?
Оптимальное решение — сбалансированный дизайн
Как узнать размер картинки на сайте?
Как убедиться, что вы используете визуальный контент правильного?

Оптимальный размер фона для сайта на примере Southwest Airlines

Яркий пример веб-дизайна, центром которого является изображение, — это сайт Southwest Airlines (авиакомпания): фон и фокусный центр страницы — это фотография семьи, отдыхающей на лыжном курорте.

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

В своей книге «Эмоциональный дизайн» (Emotional Design) Дон Норман (Don Norman) говорит о том, что картинки, просмотр которых доставляет эстетическое удовольствие, вызывают у людей сильный висцеральный отклик. К изображениям, вызывающим такую реакцию, можно отнести красочные пейзажи, товары с приятным для глаза дизайном и фотографии людей привлекательной внешности.

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

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

• ссылки навигационного меню маленькие и не выделены фоновым цветом;
• поисковое поле заменено иконкой лупы;
• CTA-элемент «Заказать (билет) сейчас» (Book now) также слишком мал и сливается с остальными составляющими интерфейса;
• окно для поиска билетов смещено ниже линии сгиба для сохранения целостности отображения картинки, в результате чего посетитель может его не заметить, пока не прокрутит страницу.

Сравнение новой и старой версии ресурса Southwest Airlines поможет понять основные плюсы и минусы централизации оформления на визуальном контенте.

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

Изучим мобильную версию Southwest Airlines и обратим внимание на размер фоновой картинки сайта.

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

В итоге можно смело заявить, что именно мобильная версия ресурса Southwest Airlines — хороший пример качественного дизайна, центром которого является оптимального размера изображение для сайта.

В каких случаях дизайн, сфокусированный на изображении, эффективен?

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

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

Рассмотрим несколько примеров оптимального размера картинки сайта и правильной фокусировки на графическом контенте.

Фокусный центр домашней страницы Apple — это изображение последних моделей iPhone, которое служит рекламой нового продукта и помогает потенциальным покупателям увидеть разницу размеров iPhone 6 и iPhone 6 Plus невооруженным глазом.

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

Размеры фонового изображения для сайта Bing (поисковая система Microsoft) велики, и эта страница — хороший пример правильного использования больших изображений.

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

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

Оптимальное решение — сбалансированный дизайн

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

На сайте State Farm (страховая компания), например, используется большая фотография владельцев транспортного средства.

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

Как узнать размер картинки на сайте?

Чтобы узнать размер картинки на сайте, кликните по ней правой кнопкой мыши. В зависимости от браузера, которым вы пользуетесь, в появившемся меню будет пункт «Свойства изображения», «Информация об изображении» или просто «Свойства». Кликните по нему, и откроется окно с размерами изображения.

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

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

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

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

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

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

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

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

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

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

Не забывайте все гипотезы проверять сплит-тестированием.

Высоких вам конверсий!

По материалам: nngroup.com 

28-10-2014

5 рекомендаций по выбору оптимального объема текста для лендинга

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

Многие маркетологи думают примерно так: «Хорошо, чтобы текст был длинным, но не слишком».

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

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

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

Рекомендация 1: «Когда я смогу увидеть пожарный гидрант?»

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

Вспомним эксперимент с пожарным гидрантом, который Нассим Николас Талеб (Nassim Nicholas Taleb) описывает в своей книге «The Black Swan»:

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

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

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

Два фото ниже передадут вам главную идею этого эксперимента:

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

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

Хорошей иллюстрацией вышесказанному послужит лендинг «Help Scout»:

Чем больше вы пишете, тем лучше будете знать, когда необходима краткость, а когда — объем.

Рекомендация 2: Всегда обращайте внимание на контент выше линии сгиба

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

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

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

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

Рекомендация 3: Пусть дизайн работает на вас

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

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

Объем текста — это больше, чем просто количество знаков. Тут также важно, насколько объемной станет страница после добавления всех остальных элементов дизайна: изображений (которые не менее важны), кнопок, лид-форм, иконок, стрелок и т. п.

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

Рекомендация 4: Мы мало что знаем наверняка, поэтому — тестируйте

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

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

С помощью тестов вы поймете, как поднять коэффициент конверсии еще выше.

Рекомендация 5: Узнайте свою аудиторию

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

• Ваш оффер продает тот же продукт?
• Лендинг будет посещать та же аудитория?
• Как посетители были привлечены на исходную страницу? Они пришли с вебинара? После email-рассылок? С рекламы в Facebook? Как их подготовили для этого?

Не стоит рассчитывать на хороший результат, веря в то, что «если у “X” работает так-то и так-то, то это обязательно будет работать и у меня». Люди любят простые истории, поэтому выдумывают их, основываясь на толике информации, а затем строят на этом целую маркетинговую кампанию.

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

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

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

Высоких вам конверсий!

По материалам copygrad.com

02-11-2014

Минимализм при создании landing page / Habr

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

Несколько примеров минимализма целевых страниц

Давайте рассмотрим минимализм landing page некоторых успешных веб-приложений:





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

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

Минимализм landing page: одна основная идея

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

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

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

Landing Page пример: Dropbox

Веб -сайт Dropbox является примером того, как минималистский дизайн ярко демонстрирует эту концепцию. Landing page от Dropbox имеет только один призыв к действию, исходя из предназначения веб-страницы. Основная цель дизайна — получить посетителей сайта, чтобы они нажали на кнопку «Зарегистрироваться». Так, кнопка «Зарегистрироваться» является наиболее ярким элементом на странице. Все остальное не имеет такого значения.

Конечно, есть и вторичные альтернативные действия посетителей целевых страниц Dropbox. Это кнопки «Загрузите программное обеспечение», «войдите в систему» (если вы уже пользователь Dropbox) или «узнать больше о Dropbox». Однако эти альтернативные кнопки созданы таким образом, чтобы никак не препятствовать основной цели — нажатие на кнопку «РЕГИСТРАЦИЯ».

Все несущественные элементы удалены или приглушены:

-Название сайта ( Dropbox ) даже не отображается на странице;

-Чтобы объяснить, как работает Dropbox, используется простая иллюстрация, что вдвойне обращает внимание пользователей на кнопку «Зарегистрироваться»;

-Слоган («Ваш материал, в любом месте») короткий и несложный.

Так, landing page от Dropbox уверенно и смело показала, какие действия требуются от посетителей сайта, причем это сделано очень грамотно и четко.

Landing Page пример: Mailbox

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

Первичное действие — нажать большую, отчетливо выделяющуюся кнопку с надписью «Получить приложение», которое дает пользователю Mailbox в Apple App Store.

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

Landing Page пример: Karma

Karma является еще одним прекрасным примером красивого минимализма целевой страницы.

Желаемое действие для этой landing page — нажать на кнопку «Купить». Первичное действие отображается дважды: одно в середине сайта, а другое — в его верхней части. Кнопки призыва к действию обе зеленые, одинаково помечены и визуально схожи, что создает между ними связь.

Вторичное альтернативное действие пользователя — нажатие на кнопку «Узнать больше». Как можно увидеть, прозрачность кнопки «Узнать больше» снижает ее визуальный вес и не «крадет» внимание от основной кнопки «Купить».

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

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

Основные компоненты минималистских landing page

Минималистская landing page состоит из трех основных компонентов:

1.Первичное действие

2.Объяснение того, что такое продукт / услуга

3.Альтернативный вариант

Советы по созданию минималистских landing page

Сосредоточьтесь на создании правильной визуальной иерархии

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

Некоторые из основных характеристик, влияющие на положение элемента дизайна в визуальном иерархии landing page:

-Размер: большие элементы находятся выше по визуальной иерархии

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

-Цвет, контраст: сильный контраст между конкретным элементом и его фоном, а также между другими элементами в непосредственной близости от него приведет к более высокой позиции по визуальной иерархии

-Визуальная сложность: внешне более сложный элемент по сравнению с соседними элементами дает больший визуальный вес

-Пробелы: большие пробелы вокруг элемента дают ему высокий визуальный вес

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

Пример: Numbrs

Минималистский веб-дизайн Numbrs является хорошим примером для разговора о визуальной иерархии.

Описание приложения (1) и первичной кнопки призыва к действию (2) являются двумя наиболее яркими элементами веб-страницы.

Регулятор громкости (3) также находится довольно высоко в визуальной иерархии, и при желании можно выключить звук, когда Вы находитесь на этой landing page.

Название сайта (4) и альтернативные действия (5) располагаются ниже по визуальной иерархии.

Пример: Wander

Другая версия грамотной визуальной иерархии можно увидеть в минималистской landing page от Wander. Здесь только четыре элемента веб-дизайна:

Верхняя надпись в визуальной иерархии является информацией о том, что сайт открыт только зарегистрированным людям (1). Ниже текста есть призыв к действию — кнопка «войти в систему»(2).

Значительно ниже в визуальной иерархии идут вторичные альтернативные действия посетителей landing page сайта Wander. Кому-то может захотеться бродить по Facebook (3). Кнопка Facebook также отображает количество лайков, что выполняет еще одну задачу — доказательство интереса к приложению среди посетителей соцсетей.

Другие посетители по альтернативному действию сайта могут зайти в другие социальные сети Wander или читать блог Tumblr (4).

Убедитесь, что первичное действие является заметным элементом на сайте

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

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

Пример: enthuse.me

Хороший вариант landing page, где первичное действие в виде выпуклой кнопки, можно увидеть на сайте enthuse.me:

Здесь хорошая визуальная иерархия, где сразу видно, что первичное действие — нажать на кнопку «Начать!».

Пример: IFTTT

Обратите внимание, какое совершенно очевидное первичное действие у целевой страницы сайта IFTTT:

Используйте цвета и оформление грамотно

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

Пример: Basecamp

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

Так, зеленый цвет используется для первичного призыва к действию. Синий — для вторичного призыва к действию (кнопка входа в систему для существующих пользователей и ссылка на веб-страницу с описанием причин, почему люди используют Basecamp).

Большие шрифты и изменения цветов элементов дизайна служат для обращения внимания на то, что действительно важно в landing page.

Пример: Path

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

Разные размеры шрифта, цвет и само дробление текста на сегменты и разделы вызывает интерес к целевой странице.

Придерживайтесь сжатого содержания текста

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

Минималистские landing page должны иметь короткое и легкое для понимания текстовое сообщение. Чем меньше нужно читать, тем быстрее посетители сайта выполнят желаемое действие.

Пример: Contently

Сайт Contently может описать свою веб-службу всего в 3 словах: «Расскажите отличные истории». Это настолько глубоко, учитывая то, что веб-сервис сосредоточен вокруг этого содержания! Небольшое количество текста на landing page снижает вероятность изменения решения посетителя сайта по выполнению действия.

Пример: Shipment

Еще один хороший вариант короткого текста можно увидеть на Shipment. В этих простых словах – «Примем участие и рассмотрим Ваш проект»- посетитель сайта становится мгновенно в курсе того, что сайт Shipment может сделать для него / нее.

Опишите товар / услугу быстро

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

Пример видеообъяснения: Couple

Приложение Couple использует видео для объяснения, как работает их продукт. Они воспользовались тем, что видео продукции может значительно увеличить конверсию.

Так, видео постепенно раскрывается при нажатии на кнопку со значком «Play Now»:

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

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

Пример интерактивного объяснения: Apple Mac Pro

Минималистская целевая страница Apple Mac Pro демонстрирует другой популярный способ описания продукта: интерактивное объяснение продукта.

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

Пример c фото: Wallmob

Фото высокого фонового разрешения на Wallmob является образцом того, как можно использовать важное изображение.

Фоновое фото иллюстрирует, чем является Wallmob: это точка продажи программ для Вашего мобильного устройства.

Простота — залог успеха

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