Лендинг пейдж хабрахабр: Landing page, которая работает / Хабр

Содержание

Landing page, которая работает / Хабр

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

Что такое landing page?

Перед тем, как мы начнем давайте определим понятие landing page:

  • с технической точки зрения landing page – это страница, которая состоит из таких же элементов, как и обычная веб-страница (HTML, CSS, текст, картинки, видео и т.д.)
  • с точки зрения бизнеса – это страница, которая подталкивает пользователя совершить требуемое действие (покупка или подписка)
  • с точки зрения пользователя – это страница, на которую он перешел по ссылке с другого сайта (из поисковика, твиттера, кликнув на баннер)

Три наиболее частых причины создания landing page:

  • заставить пользователя зарегистрироваться или подписаться на рассылку
  • продать конкретный продукт в конкретной ситуации (распродажа или промо-акция)
  • заставить пользователя скачать или установить софт

Принципы разработки эффективной landing page

Давайте обсудим компоненты или факторы, присущие хорошей landing page.

Call to action (призыв к действию)

Call to action просит и даже заставляет пользователя совершить конкретное действие. Пример call to action – «Подпишитесь на нашу рассылку». Часто call to action предлагает пользователю кликнуть на какой-то элемент страницы (ссылку или кнопку) или заполнить форму.

Советы:

  • Выражайтесь четко. Конкретно говорите пользователю, что именно он должен сделать и что будет потом.
  • Не злоупотребляйте call to action-ами. Если на сайте их немного, то можно сфокусироваться на том, чтобы пользователь предпринял желаемое действие как можно скорее.
  • Используйте кнопки. Кнопки – это традиционный контрол и любой пользователь знает, что по нему можно кликнуть. Хороший дизайн кнопки еще раз обращает внимание на call to action.
  • Дополнительная информацию должна быть наготове.
    Именно она должна убедить пользователя предпринять необходимое действие.

Landing page компании Square – отличный пример хорошего call to action, который направлен на регистрацию пользователя. Сайт предлагает завести аккаунт, и, как результат действия, Вы бесплатно получаете продукт компании (считыватель кредитных карт Square).

Заголовок

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

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

Когда делаете заголовок, спросите себя: «Достаточно ли это интересный заголовок и действительно ли заставляет пользователя продолжать читать дальше?»

Советы:

  • Пишите простые и короткие заголовки. Не тратьте время пользователя, объясните ему главную идею того, что он может получить на этом сайте как можно скорее.
  • Дизайн должен привлекать внимание пользователя. Используйте большой шрифт и располагайте заголовок на заметном месте – вверху страницы, там где ему положено быть.
  • Используйте релевантные слова. Используйте слова и фразы, благодаря которым пользователи придут к Вам из поисковиков – используйте тэги h2 и h3 для заголовков.

Хороший пример заголовка у landing page компании Shopify. Он весьма короток и дает представление о том, чем занимается сервис, и привлекает внимание, ведь использован крупный размер шрифта и расположен заголовок на видном месте. Найти Shopify в поисковике можно, набрав «ecommerce store».

Простота

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

Советы:

  • Каждый элемент страницы должен подталкивать пользователя совершить действие. Используйте принципы редукционизма, чтоб убрать лишние элементы и текст.
  • У landing page должен быть один главный call to action. Цель странички должна быть предельно ясна и заключается в том, что пользователю необходимо выполнить одно единственное действие. Наличие других действий призвано способствовать выполнению главного.
  • На landing page должно быть много свободного пространства. Слишком перегруженная страница может отпугнуть пользователя.

Landing page Dropbox крайне простая. Там всего 3 элемента: логотип, видео и одна единственная кнопка. Call to action – скачать приложение. Но ведь видео – это дополнительный call to action, дающий пользователю информацию о том, почему он должен стать пользователем Dropbox.

Траектория взгляда

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

Надлежащая траектория ускоряет восприятие информации и гарантирует, что посетитель сайта в конечном счете понял call to action.

Советы:

  • Расположите элементы landing page в логической визуальной последовательности.
    Определите порядок, в котором нужно просматривать элементы и придерживайтесь его. Узнать больше о визуальной последовательности можно тут: «Working with Visual Weight in Your Designs», «Creating Focal Points in Your Web Design» «Using Power Structure and Gestalt for Visual Hierarchy».
  • Используйте графические элементы. Стрелки, иконки и яркие картинки могут помочь направить взгляд пользователя на нужную область страницы.
  • Используйте контрастные цвета для определенных компонентов веб-страницы. Яркие элементы выделяются, привлекая к себе внимание.

Пример хорошего использования ярких элементов – сайт LetDoThis!, который приглашает посетителей пожертвовать деньги для благотворительного фонда. Первое, что Вы видите, зайдя на страницу – call to action – многочисленные стрелки указывающие на ключевую кнопку «Пожертвовать». Обратите внимание на то, что кнопка и стрелки имеют высокую контрастность цветов по сравнению с темно-сером фоном.

Релевантность

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

Советы:

  • Создавайте отдельные landing page для каждой маркетинговой кампании. Если Вы делаете рекламную компанию с Facebook, то это должно быть отражено на landing page.
  • Landing page должна меняться в зависимости от источника – добавляйте контент, промо-коды и call to action-ы.

Не подвергайте пользователя риску

Очевидно, что никто не любит рисковать.

Отнеситесь ответственно к вопросам безопасности, конфиденциальности и мошенничества.

Советы:

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

Сайт Squarespace – хороший пример того, как снижается риск подписки или пользования сервисом. Обращается внимание на то, что пользователям не требуется вводить номер кредитной карты, что процесс регистрации занимает всего 30 секунд и нет никаких постоянных обязательств.

Т.е. решены проблемы затрат, времени и безопасности.

Дефицит

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

Советы:

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

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

Элементы доверия

Есть много способов, чтобы убедить пользователей в том, что пользование сайтом надежно и безопасно.

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

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

Советы:

  • Размещайте социальные данные из авторитетных и известных веб-сервисов.
    Хорошим примером является количество лайков в Facebook.
  • Используйте элементы доверия связанные с call to action и размещайте их рядом.
  • Будьте честными. Не стоит публиковать поддельные статусы или отзывы с других сайтов.

На сайте FreshBooks Вы можете видеть три различных элемента доверия: (1) число людей, использующих сервис, (2) цитаты из авторитетных и известных источников, таких как Нью-Йорк Таймс и (3) сертификат безопасности.

Заключение

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

Повышаем конверсию Landing Page / Хабр

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


Визуализация типичной агрессии со стороны большинства «лендинг пейджей»

Что произошло?

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

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

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

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

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

Так в чем же дело?

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

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

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

«Привет. Переспи со мной! Мое предложение ограниченно. Всего 2 девушки в сутки. Посмотри как я красиво одет. Я очень техничен. Не трать мое время. Переспи со мной!»

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

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

Предчувствуя возгласы «Но ведь работает же!», хочу напомнить что конверсия – это не только циферки в аналитике. Легко указать в портфолио после очередного сданного лендинга «Тут мы достигли конверсии в 40%». А сколько из них стали реальными клиентами? А сколько вернутся? А сколько бизнес потерял денег, раздавая на право и налево скидки и подарки? Об этом обычно молчат.

Волшебная таблетка

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

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

Таким образом на лендинге туристического агентства при нажатии на кнопку «Узнать актуальные цены» пользователь видит не форму для ввода номера телефона, а «виртуального консультанта», который задает ему несколько уточняющих вопросов: Когда вы хотите вылететь? На сколько ночей? Кто поедет?

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

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

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

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

В том или ином виде, такое решение применимо к большинству ниш и применяется нами в таких направлениях как «туристические услуги», «пластиковые окна», «пластиковые трубы» и ряде других.

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

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

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

Дисклеймер

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

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

Дизайн Преобразование лендингов / Хабр

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

Используйте описательный, а не рекламный заголовок 

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

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

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

Разместите ключевые преимущества на первой странице

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

Buzzbike — еще один отличный пример преимуществ на первый план.

Больше изображений, меньше текста

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

В качестве примера возьмем Deliveroo или Flink службы быстрой доставки еды и продуктов. Несмотря на то, что они оба отлично справляются со своими пластинками, я считаю, что их образы могли бы быть лучше. Оба показывают общие изображения еды в своем герое, которые могли бы быть на LP любого продуктового магазина. Поскольку я не знаком с сервисом, мне приходится читать описание, чтобы понять его суть. Это офлайн-магазин или служба доставки, мгновенная доставка или доставка на следующий день, есть ли у нее приложение или только веб-версия? Почему бы вместо этого не показать курьера с фирменным рюкзаком? Именно так я узнаю о приложениях для доставки, когда путешествую — замечаю курьеров на улицах и замечаю логотипы на их рюкзаках. Всего одно изображение скажет нам, что это служба мгновенной доставки, без лишних слов. И мы можем использовать освободившееся место, указав конкретные преимущества и детали.

Говорите о своем покупателе, а не о продукте

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

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

Не

Конструктор веб-сайта, изменяющий игру

DO

Создание анимированных видео на веб-сайте без кодирования в два дня

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

Придерживайтесь формулы «1 блок = 1 идея»

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

Используйте эмоциональный язык

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

Нельзя

Мы создаем высококачественные товары для собак с аллергией.

Do

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

Revolut также дает нам хороший пример: «Больше никаких нежелательных подписок» — более энергичная формулировка, которая явно решает проблему, чем, например, «Легко управлять своими подписками».

Держитесь подальше от внутренней терминологии

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

Не надо

Наш Scooter Professor предоставит вам наилучший сервис.

Do

Профессиональный механик приедет к вам домой и починит самокат в течение 2 дней.

Предоставьте реалистичное социальное доказательство

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

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

Dash представляет собой отличный пример, разместив интерактивный виджет Trustpilot прямо над страницей, а также расширенный виджет с отзывами ниже на странице.

Используйте один четкий призыв к действию

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

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

Не

Присоединяйтесь к

DO

Присоединение и получение скидки

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

Повторите это

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

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

Будьте ориентированы на нишу

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

Инвестируйте в тестирование перед запуском

Проведите тестирование вашей целевой страницы перед запуском. Ваша аудитория должна иметь возможность выполнить желаемое действие без каких-либо затруднений, иначе вы можете их потерять. Например, время загрузки страницы напрямую влияет на показатель отказов. Загрузка в 1-3 секунды уже увеличивает вероятность рикошета до 32% (за Google исследование)!

Краткий контрольный список для проверки вашего LP перед публикацией:

  • Все изображения отображаются правильно и оптимизированы для Интернета (всегда используйте сжатие)

  • Весь текст отображается правильно

  • мобильные устройства

  • CTA и все ссылки кликабельны и ведут на нужную страницу

  • Время загрузки менее 3 секунд

Регулярно проводите конверсионное тестирование.

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

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

Заключительные мысли

Не существует систематизированного набора правил для создания идеального LP. Я извлек эти советы, просмотрев сотни целевых страниц и проанализировав их эффективность. Я ничего не забыл? Делитесь своими лучшими практиками в комментариях!

 

Веб-дизайн — Дизайн спасет мир / Хабр

Дизайн спасет мир

Статьи Авторы Компании

Показать сначала

Предел рейтинга

Уровень сложности

  • 15
  • 5 ВасилийАртющенко

    Уровень сложности Easy

    Время чтения 11 мин.

    Просмотров

    830

    Веб-дизайн *Интернет-маркетинг *Медийная реклама *Поисковая оптимизация *Брендинг

    Обзор

    В этом году мы провели опрос 78 менеджеров по закупкам из компаний, входящих в список Forbes Global 2000, базирующихся в Ванкувере, Британская Колумбия. В прошлом году ограничения Covid были сняты, сотрудники агентства частично вернулись в свои офисы. Этот год стал настоящим испытанием для руководителей агентств, им приходилось находить компромиссы с сотрудниками, которые не хотели возвращаться в офис, и при этом управлять проектами на таком же эффективном уровне. Clutch больше не является платформой, которой можно доверять из-за платных размещений (спонсоров и рекомендуемых), которые в некоторых случаях могут занимать до 50 первых позиций. Поэтому мы попросили менеджеров по закупкам в Ванкувере оценить свои агентства цифрового маркетинга от 0 до 10 на основе следующих критериев:

    Подробнее

    Рейтинг 0

    Комментарии 0

    Джулиафьол

    Время чтения 6 мин

    Просмотров

    1.2K

    Веб-дизайн *Интерфейсы *Интернет-маркетинг *Дизайн

    Учебное пособие

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

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

    Предоставление доказательств вместо мнения

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

    Получить больше советов

    Всего голосов 5: ↑4 и ↓1 +3

    Комментарии 6

    Джулиафьол

    Время чтения 6 мин.

    Просмотров

    3K

    Веб-дизайн *Дизайн

    Учебное пособие

    Кажется, что все о LP уже было сказано, однако я все еще продолжаю видеть одни и те же ошибки, повторяемые снова и снова как стартапами, так и признанными компании. Вот несколько советов, подкрепленных моим 10-летним опытом работы директором по UX/UI в агентствах и продуктовых компаниях. Я гарантирую, что только они дадут хороший прирост вашего коэффициента конверсии.

    Используйте описательный, а не рекламный заголовок 

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

    Получить больше советов

    Всего голосов 6: ↑6 и ↓0 +6

    Комментарии 11

    варунбхагат1

    Время чтения 5 мин.

    Просмотров

    7,2K

    Веб-дизайн *Разработка веб-сайтов *Тестирование веб-сервисов *Веб-аналитика *Монетизация веб-сервисов *

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

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

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

    Подробнее →

    Рейтинг 0

    Комментарии 0

    Патриция Нил

    Время чтения 4 мин.

    просмотров

    5,7K

    Веб-дизайн *JavaScript *Программирование *ReactJS *

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

    Какой бы ни была цель, люди просто гуглят и получают желаемый результат. Это все из-за увеличения эволюции веб-разработки и разработки мобильных приложений. Хотя все мы знаем, что для того, чтобы быть веб-разработчиком, вам необходимо иметь базовые навыки работы с HTML, CSS и JavaScript, но со временем React.js появился в стеке технологий в области веб-разработки и устарел.

    Отчет JS отражает, что 64,8% веб-разработчиков предпочитают использовать фреймворк React.JS и хотел бы использовать его снова и снова в будущем. Он даже превзошел другие категории фреймворков, такие как Vue.js с 28,8% голосов и Angular с 23,9% голосов. Именно по этой причине спрос на компании-разработчики React.JS находится на рекордно высоком уровне.

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

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

    Подробнее →

    Всего голосов 1: ↑1 и ↓0 +1

    Комментарии 3

    Касандра555

    Время чтения 27 мин.

    Просмотров

    3,3K

    Веб-дизайн *Интерфейсы *Удобство использования *Доступность *Управление продуктами *

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


    Подробнее →

    Рейтинг 0

    Комментарии 0

    премджитбпк

    Время чтения 4 мин

    просмотров

    1,1 тыс.

    Веб-дизайн *Дизайн

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

    Подробнее

    Всего голосов 3: ↑3 и ↓0 +3

    Комментарии 0

    Райан0852

    Время чтения 8 мин

    Просмотров

    1.7K

    Веб-дизайн *ИТ-карьера Офисы ИТ-компаний Программное обеспечение ИТ-компаний

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

    Подробнее →

    Всего голосов 1: ↑0 и ↓1 -1

    Комментарии 0

    Райан0852

    Время чтения 5 мин.

    Просмотров

    4,8K

    Веб-дизайн *Разработка веб-сайтов *Разработка мобильных приложений *Разработка для Android *Программное обеспечение

    JavaScript, CSS и HTML — некоторые из основных технологий, которые помогают создавать надежные приложения. Итак, если вы хотите создавать интеллектуальные веб-приложения для своего бизнеса, я советую вам сразу же перейти к моей идее о кроссплатформенных средах разработки с открытым исходным кодом.

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

    Подробнее →

    Всего голосов 1: ↑1 и ↓0 +1

    1

    m__fil

    Время чтения 3 мин

    Просмотров

    3,8K

    Веб-дизайн *Разработка веб-сайтов *CSS *

    Учебник

    Введение

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

    Подробнее →

    Всего голосов 3: ↑0 и ↓3 -3

    Комментарии 2

    lol_wat

    Время чтения 3 мин

    просмотров

    1.1K

    Веб-дизайн *Интернет-маркетинг *

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

    Подробнее →

    Рейтинг 0

    Комментарии 1

    m__fil

    Время чтения 3 мин

    просмотров

    1,4K

    Веб-дизайн *CSS *

    Песочница

    Введение

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

    В этой статье мы создадим Клавишу 3D-клавиатуры с потрясающей анимацией после нажатия на нее. И да, мы не будем использовать какой-либо язык программирования. Наш ключ будет зависеть от силы CSS! Давайте начнем!

    Реализация

    Подробнее →

    Всего голосов 7: ↑3 и ↓4 -1

    Комментарии 4

    Райан0852

    Время чтения 7 мин

    просмотров

    1,7K

    Веб-дизайн *Разработка веб-сайтов *Разработка мобильных приложений *Разработка для электронной коммерции *Программное обеспечение

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

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

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

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

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

    Подробнее →

    Всего голосов 3: ↑3 и ↓0 +3

    Комментарии 0

    математик

    Время чтения 7 мин

    Просмотров

    1.8K

    Веб-дизайн *Графический дизайн *Дизайн Физика

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

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

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

    Этот сайт позволяет подобрать наиболее гармоничное сочетание цветов для вашего сайта, одежды, интерьера и т.д. 1709.04752. Результаты доступны на наш сайт — wavepalette.com.

    Подробнее →

    Всего голосов 4: ↑3 и ↓1 +2

    Комментарии 2

    Кристенкартер7519

    Время чтения 5 мин

    Просмотров

    2.3K

    Веб-дизайн *Разработка веб-сайтов *Программирование *Разработка стартапов

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

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

    Я проверил диверсифицированное портфолио, опыт их технических команд, отзывы клиентов, отзывы с таких сайтов, как Goodfirms и Clutch, прежде чем составить этот список. Кроме того, я взял ссылки с некоторых популярных платформ, а именно. hackernoon, dev.to, yourstory, quora, medium и habr.

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

    1) Sysbee

    Регион: Пула, Хорватия
    Бюджетный массив: $1000+
    Численность сотрудников:200 -250
    Клиентура: Infobip, Atheneum, IKEA

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

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

    Подробнее →

    Всего голосов 5: ↑4 и ↓1 +3

    Комментарии 0

    варунбхагат1

    Время чтения 8 мин.

    Просмотров

    34K

    Веб-дизайн *Разработка веб-сайтов *Python *Программирование *Node.JS *

    правильный выбор для моего следующего проекта по разработке веб-приложений?

    – Какой язык программирования обошелся мне дешевле?

    — Какой язык программирования подходит для какой отрасли?

    – Какой язык программирования подходит для малого бизнеса или крупных предприятий?

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

    В этом посте я отвечу на все эти вопросы И НЕ ТОЛЬКО ЭТО! Итак, продолжайте читать этот пост в блоге:

    Подробнее →

    Всего голосов 3: ↑0 и ↓3 -3

    Комментарии 0

    варунбхагат1

    Время чтения 6 мин

    просмотров

    18K

    Веб-дизайн *Разработка веб-сайтов *PHP *.NET *Программное обеспечение

    Песочница

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

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

    В этом сообщении в блоге я провел непредвзятое сравнение двух самых популярных технологий, то есть PHP и ASP.NET в современном мире.

    С одной стороны, у нас есть PHP, наиболее часто используемая в мире и популярная технология в Интернете с миллиардами преданных PHP-разработчиков по всему миру. С другой стороны, у нас есть ASP.NET, платформа Microsoft . Иногда становится довольно сложно принять четкое решение о том, какую технологию (Php или Asp.net) мы должны предпочесть для нашего проекта разработки приложения или веб-сайта?

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

    Подробнее →

    Всего голосов 12: ↑6 и ↓6 0

    Комментарии 4

    Патриция Нил

    Время чтения 5 мин

    Просмотров

    3,8K

    Веб-дизайн *JavaScript *Программирование *Angular *

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

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

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

    Подробнее →

    Всего голосов 3: ↑3 и ↓0 +3

    Комментарии 2

    Райан0852

    Время чтения 5 мин

    Просмотров

    5.4K

    Веб-дизайн *Разработка сайтов *Разработка мобильных приложений *Разработка стартапов

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

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

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

    Подробнее →

    Рейтинг 0

    Комментарии 1

    Ронак_Патель

    Время чтения 3 мин

    просмотров

    1.3K

    Веб-дизайн *

    Что такое аутсорсинг?

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

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

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