65% цифрового рынка - мобильные пользователи. 50% хватаются за смартфоны сразу после пробуждения. Необходимость мобильных лендингов не подлежит обсуждению.
В этой статье - 11 советов как улучшить пользовательский опыт владельцев девайсов.
Время - деньги, конверсия и продажи. 74% мобильных пользователей покидают сайт, если он загружается дольше 5 секунд.
В среднем они в сети до полутора часов в день. Их интересуют сайты, которые загружаются быстро. Все остальное - в топку.
Данные о скорости загрузки страниц можно получить в Google Analytics, отчеты «Поведение» - «Время загрузки страниц»:
Конкретика о страницах, которые грузятся долго и нуждаются в оптимизации:
В интернете много инструментов, которые помогут оценить время загрузки и скорость: Google PageSpeed Insights, Mobitest и другие.
Что еще сделать, чтобы ускориться:
В GA есть данные, какими девайсами пользуется целевая аудитория. Протестируйте разные варианты лендинга по разрешению и внешнему виду.
Ищите отчеты в разделе «Аудитория» - «Мобильные пользователи»:
Здесь конкретные марки устройств:
И данные по разрешению экрана:
Теперь вы знаете, какое разрешение тестировать в первую очередь, чтобы улучшить пользовательский опыт.
Посетитель, который оставил что-то в корзине, чаще возвращается для завершения покупки. Прикрутите кнопку «Купить позже» или «Добавить в список желаний».
Так вы убьете двух зайцев: с помощью cookies узнаете о поведении посетителей и получите статистику, какие товары чаще оставляют в корзинах.
Как мы держим гаджеты и какие пальцы используем для навигации?
В 49% случаев смартфон лежит в левой руке, а большой палец правой перемещается по экрану.
А так с годами менялось расположение большого пальца на айфонах:
Учитывайте это при планировании кнопки призыва к действию.
Нужно заполнить форму? Предложите пользователю клавиатуру:
Помогут вставки в код:
Такой шаг ускорит конверсию.
Еще момент. Специалисты советуют максимально сжимать пространство между полями и убирать лишнее. Не заставляйте пользователей листать, чтобы добраться до следующего поля.
Вариант слева короче, потому и предпочтительнее.
Исторически сложилось так: потребители выбирают товар с телефона, а завершают покупку с компьютера. Чтобы уменьшить трения и повысить продажи с мобильного лендинга, сделайте выгодное предложение.
Неплохо сыграть на страхе упустить выгоду (FOMO) - предложите купон на скидку с ограниченным сроком действия, например, вот так:
«Подпишитесь на мобильные уведомления и получите скидку 20%. Отправьте SMS с текстом Save01 на короткий номер и получите скидку».
Кстати, можно применить мобильный поп-ап. Главное, чтобы предложения (скидка, акция) были стоящими.
«Каждый день скидки до 70%! Подпишитесь и будьте в курсе наших акций».
Мало адаптировать лендинг под мобильники. Пользователи хотят уникальный опыт, а не просто уменьшенную версию десктопного сайта.
На скриншоте - оптимизированный и не оптимизированный под мобайл сайт:
С каким вариантом проще и приятнее работать? Ответ очевиден.
Напомним: на странице только один призыв к действию, чтобы внимание пользователей не рассеивалось, и они знали, что делать дальше.
Чтобы «приковать» их внимание к кнопке CTA (призыва к действию), используйте контрастный цвет. Не знаете, какой выбрать - обратитесь к колесу цветов:
Найдите основной цвет лендинга. Напротив контрастный цвет, максимально эффективный.
На что еще обратить внимание?
Сделайте большую кнопку, чтобы пользователи не промахивались (а это раздражает).
Особенно, если лендинг длинный и нужно скролить вниз. Исследование журнала Smashing Magazine показало, что «липкие» хедер и футер повышают скорость навигации на 22%. Как это выглядит:
На изображении - навигация при закрепленном хедере. Главное - не перегружайте его элементами и опциями.
Пользователям некогда скролить в поисках предложения, разместите его на первом экране, над сгибом. В примере ниже - конверсия увеличилась на 201% после того, как оффер перенесли на первый экран:
Посмотрите на два экрана:
На левом - простыня с картинками. Много элементов, внимание рассеивается, непонятно, что делать дальше. Так делать не стоит. На правом легко найти нужное.
Экспериментируйте, улучшайте пользовательский опыт. И не забывайте тестировать нововведения.
Высоких вам конверсий!
Мобильный трафик так быстро изменил мир, что многих новые правила игры застали врасплох. Последние исследования рынка демонстрируют устойчивую стагнацию десктопного сегмента на фоне мощного роста мобайла, который продолжается уже не первый год. В таких условиях бизнес, не готовый к работе с ценнейшим трафиком со смартфонов и планшетов, перестанет быть эффективным - сейчас или через полгода, неважно.
Особенно это актуально для компаний сегмента e-commerce, которые делают ставку на продажи через лендинги. Номером один в списке дел для руководителя такого бизнеса, очевидно, должна стать адаптация лендинга под мобильные устройства. А чтобы она была максимально эффективной, стоит оценить фронт работ.
Итак - что и как адаптируем?
Все эти сложные на первый взгляд вещи легко укладываются в простые решения. На российском рынке представлен выбор вариантов адаптации landing page под мобильные устройства на любой вкус и кошелёк: можно нанять целую веб-студию или воспользоваться онлайн-сервисами Например, в MoAction представлено более 100 готовых решений, которые имеют наивысшую оценку по мобильности от Google и являются профессиональными.
Выбор за вами!
Здравствуйте, уважаемые читатели блога сайт. Сегодня мы поговорим о такой важной вещи как посадочная страница , которую очень часто на буржуйский манер называют лендинг пейдж (от английского landing page — целевая страница). Что же это такое и почему это так важно?
Давайте текущую статью как раз и посвятим ответу на этот вопрос, а также во всех подробностях рассмотрим те моменты, которые очень важны при создании лендингов, и рассмотрим все это на конкретных примерах landing page и тех приемах, что используются лучшими юзабелистами для повышения эффективности посадочных страниц.
Очень часто даже при правильной работе по привлечению нужных людей (целевой аудитории) на свой сайт ( , и т.п.) вы, как владелец бизнеса, не почувствуете от этого отдачи. Вроде бы и трафик идет, и аудитория является целевой, а продаж или подписок (смотря какое конверсионное действие вы выбрали в качестве основной задачи в ) практически нет. Ничего не работает. В чем может быть дело?
Скорее всего, вы забыли продумать и подготовить приземляющие (посадочные, целевые) страницы, которые часто называют лендингами . Что это такое?
А это очень важный момент, который может существенно повысить конверсию (количество покупок или регистраций), ибо landing page призваны максимально эффективно подводить пользователя к выполнению целевого действия . Если вы со всех рекламных объявлений будете направлять посетителей, например, на главную страницу сайта, то можете катастрофически снизить конверсию и вылететь в трубу.
Сам термин «лейдинг пейдж» образован от английской фразы «landing page», в переводе означающей как раз целевую, посадочную (приземляющую) страницу. Лендинги создаются не абы как, а с учетом психологии посетителей. Они должны цеплять и не отпускать их до самого момент покупки (или регистрации), ибо повторно привлечь посетителя будет уже архисложно.
Это как крючок на рыболовной снасти — он должен надежно подцепить и уверенно удерживать попавшуюся на него рыбу вплоть до того момента, как вы ее подсадком не зафиксируете. Если крючок (лейдинг) будет неподходящим или его не будет вовсе, то все ваши усилия от прикормки, установки наживки и прочих шаманских действий пойдут прахом. Конечной цели вы не достигните.
Сами по себе лендинги представляют из себя либо отдельные страницы уже существующего сайта, либо специально созданные под это дело сайты одностраничники. По сути, попав в которую пользователю уже довольно трудно выбраться и он неизбежно должен в нее сползать, пока не станет вашим клиентом. Но это в идеале, а вот как этот идеал реализовать применяя различные рекламные хитрости, мы и посмотрим в продолжении этой публикации.
В зависимости от преследуемых вами целей можно разделить посадочные страницы (лендинги) на несколько типов:
Нужно понимать, что посадочные страницы, на которые будут привлекаться вами пользователи из социальных сетей (или из контекстной рекламы), должны обладать рядом характеристик и удовлетворять некоторым требованиям. Так как же создать идеальную лендинг пейдж ?
Ну а стрелки, как правило, призваны еще больше акцентировать внимание на кнопке, чтобы линия поведения пользователя на лендинге была как можно более прогнозируемой.
Иногда очень неплохо работают анимированные кнопки (но в любом случае нужно будет проводить тестирование эффективности тех или иных элементов лендинг пейджа):
Рядом с таймером неплохо будет расположить форму подписки, заказа или контактный телефон. Это будет работать не всегда, поэтому надо проводить тесты (думаю написать ряд статей про проведение А/Б-тестирования — если не хотите пропустить, то подписывайтесь на рассылку), и возможно, что такой простой и очевидный способ позволит вам увеличить конверсию данной лендинг пейдж и с лихвой окупить деньги, потраченные на продвижение в социальных сетях или контекстной рекламе.
Естественно, что хорошо было бы при этом упомянуть достоинства, достижения, конкурентные преимущества, но не перехваливайте себя, дабы не перейти ту грань, за которой уже снижается доверие к опубликованной информации.
Кроме тех вещей, что помогают landing page более эффективно работать, стоит перечислить и часто допускаемые ошибки при создании посадочных страниц , которые могут нивелировать все перечисленные выше «финты ушами», и вы не получите желаемого результата от рекламы или продвижения в социальных сетах (либо контексте).
Дизайн посадочной страницы на самом деле очень важен. Если он не закончен, сделан непрофессионально или имеет отталкивающий для большинства пользователей вид, то даже соблюдение всех описанных выше правил создания хорошего лейдинга не убережет вас . Если вы сами не обладаете должными умениями и вкусом, или у вас нет в штате фирмы дизайнера, то можно воспользоваться многочисленными конструкторами или же готовыми шаблонами лендинга, которые останется лишь немного переделать под свои нужды.
Опять же, определить лучший вариант вам поможет тестирование и анализ статистики, например, (зачастую не все так очевидно, как может показаться). Таким образом, вы сможете отследить выполнение целевого действия и понять, какие элементы лендинга способствуют увеличению конверсии, а какие оказывают отвлекающее действие и должны быть изменены.
У вас есть еще немного времени? Хотите его провести с пользой? Тогда берите попкорн, садитесь поудобнее и смотрите двухчасовой мастер-класс «Пошаговый алгоритм создания Landing Page» :
Еще недавно свой сайт рекомендовалось иметь любой фирме. Сейчас же не просто рекомендуется, а обязательно иметь сайт, адаптированный под мобильные устройства. Объем трафика с них превышает оный со стационарных компьютеров, поэтому такое подстраивание под сегодняшние технические реалии не кажется прихотью или небольшим преимуществом в конкурентной борьбе. Теперь это необходимость, ибо иначе эта самая борьба может быть благополучно проиграна. В этой статье мы расскажем, каким образом можно приспособить лендинг для мобильных устройств, чтобы посетителям было проще и удобнее.
Это ключевой параметр, так как если сайт открывается дольше пяти секунд, то вероятность того, что пользователь не захочет дожидаться, возрастает многократно. Для сайта существуют различные сервисы. Кроме того, подсказать может и Google Analytics. Нужные данные можно посмотреть в сводках, где предварительно настраиваются виджеты «Время загрузки страницы» :
Что можно сделать, что увеличить скорость:
Подробнее об увеличении скорости открытия страниц можно прочитать .
И в , и в есть отчеты об устройствах, с которых к вам заходят на сайт, а также о том, какие там установлены расширения. Проанализировав самые популярные варианты, вы можете поэкспериментировать с размерами сайта и посмотреть, как на это откликнется целевая аудитория.
Оформляя сайт, подумайте, насколько человеку будет удобно взаимодействовать с активными элементами. Это не компьютер, где все управляется мышкой, тут нужно кликать пальцами, и если кнопки расположены неудобно, то по ним просто не будут нажимать.
Лучше всего движения пальца по экрану отражает следующая тепловая карта. Она показывает область, на которую нажимает большой палец правой руки, и как она менялось по мере увеличения размера экрана (в данном случае, экрана айфона).
Чтобы форму было проще заполнить, нужно прикрутить к ней клавиатуру.
Чтобы облегчить заполнение соответствующих полей, используйте код:
Это сделает пользование вашим сайтом гораздо более удобным.
Если вы просто уменьшите ваш сайт, который пользователи видят на экранах компьютера, до размера экрана смартфона — это будет не лучшим решением. Дизайн мобильного лендинга может быть даже не похожим на своего «старшего брата», главное здесь — удобство, поэтому простым переносом дело не решается, над мобильным дизайном надо поработать.
То же касается и расположения главных элементов, например оффер на экране мобильного девайса должен располагаться сразу на первом экране, это даже важнее, чем в случае с десктопной версией.
Если лендинг очень длинный, то листать его не удобно. Опять таки, с компьютером проще, там все скроллится мышкой, на телефоне же могут возникать трудности, поэтому полезным ходом будет закрепление навигационной панели вверху экрана.
Думаем, вы сами обращали на это внимание: мобильная версия сайта выстраивает все элементы в один столбец: и картинки, и текст, и форма. Это сделано не случайно. Если бы все элементы сайта были расположены вразнобой, как на версии для компьютера, это бы многократно усилило вероятность заблудиться на сайте.
Как видите, эти способы хоть и универсальны, однако предполагают некоторое тестирование. Так что адаптируя лендинг под экраны мобильных гаджетов, не бойтесь экспериментировать и искать лучшие варианты.
Разработка посадочных страниц (так называемых лендинг пейдж или лендингов) прочно вошла в ассортимент услуг большинства веб-студий и это неудивительно: лендинг пейдж пользуются спросом, так как считается, что именно они быстрее всего приносят клиентам реальные деньги.
Между тем, лендинг лендингу рознь. Один лендинг пейдж, работая в паре с рекламными баннерами, успешно проинформирует клиента о товаре и услуге и подтолкнет его к совершению покупки (или любого другого необходимого действия), а другой — так и останется обыкновенной страницей сайта, только немного красивее и “навороченнее” других.
Что же делает посадочную страницу успешной?
Отвечая на этот вопрос, можно упомянуть дизайн, использованный контент, структуру элементов, грамотное размешение призывов к действию, социальных кнопок и т.п. Однако, если обобщить и ответить на вышеозначенный вопрос одним словом, то можно с уверенностью сказать, что успех лендинг пейдж зависит от юзабилити.
Хорошее юзабилити позволяет клиенту чувствовать себя на посадочной странице как дома: структура элементов удобна; контент и призывы к действию плавно подводят клиента к покупке; лендинг не перегружает клиента лишней информацией; лендинг не заставляет клиента бешено скроллить по странице, чтобы найти желанную (или на этот момент уже нет?) кнопку покупки.
Хорошее юзабилити, как вы наверняка догадываетесь, не универсально. Одного рецепта для всех ниш нет и быть, конечно же, не может. Между тем, многие дизайнеры и разработчики, когда работают над лендинг пейдж, упускают из виду самое простое: хорошее юзабилити для десктопного лендинга не будет таковым для мобильных устройств. Вроде бы, это очевидно, но нет…
Итак, что же можно сделать, чтобы сделать удобный лендинг для мобильных устройств? Какие существуют особенности мобильных лендингов? О чем нужно помнить, разрабатывая мобильный лендинг пейдж? Ответим на эти вопросы ниже.
Вероятно эта истина уже успела набить оскомину, но все же повторим ее еще один раз: мобильные пользователи сильно отличаются от десктопных. Цели у них, как можно догадаться, тоже сильно отличаются.
Итак, начиная работать над лендингом, ответьте себе на следующие вопросы:
Вроде бы, ответы на эти вопросы очевидны, но не стоит их недооценивать. Дело в том, что мобильные пользователи делают покупки не так активно, как десктопные. Конверсия распределяется примерно следующим образом:
О чем это говорит? О банальном факте, который известен любому психологу: чтобы принять решение, человеку нужна информация поданная в удобном формате. Причем, чем выше “цена” решения, тем больше грамотно предоставленной информации нужно человеку. Грубо говоря, человек без проблем закажет пиццу со смартфона, а вот покупать автомобиль, сидя со смартфоном в парке, он не станет.
Успешность мобильного лендинга не всегда измеряется конверсией. Клиенты, попавшие на лендинг пейдж с мобильного устройства, не всегда настроены что-то купить. Скорее, клиент заходит на такой лендинг, чтобы ознакомиться с информацией и установить эмоциональную связь с продуктом, а уже потом, придя домой и сев за ПК, он совершает покупку.
Подытожив, можно сказать, что цель клиента — найти информацию, цель владельца сайта — получить деньги, а цель дизайнера и разработчика — сделать лендинг, который мог бы привлечь максимальное количество наводок (лидов).
Итак, попадая на мобильный лендинг пейдж, клиент ищет информацию, чтобы принять решение — купить товар или нет? Следовательно, вы должны сделать все возможное, чтобы облегчить этот процесс.
Банально, но самый просто способ для клиента определиться, покупаю или нет, — позвонить. Следовательно, настройте сервис быстрых звонков. Пусть заветная иконка с телефоном сопровождает потенциального клиента по всему лендингу. Обратите внимание, что это должна быть именно иконка с телефоном и каким-нибудь призывом к действию типа “Позвони сейчас!”. Ряд исследований показал, что иконка эффективнее обыкновенного телефонного номера на 10-20%.
Важно! Настраивайте звонки только в том случае, если вы уверены, что кто-то на них будет отвечать. Если потенциальный клиент позвонит, а в ответ услышит только гудки, можете смело забыть об этом клиенте.
Идеальный мобильный лендинг пейдж не только не перегружает пользователя информацией, но и не заставляет его совершать “лишние” действия. К таким ненужным действиям можно смело отнести заполнение разнообразных форм, которые мы все так любим на ПК.
Заставлять клиента долго и нудно вносить данные о себе для подписки или покупки, значит его потерять. До конца доходят только самые стойкие. Следовательно:
Грубо говоря, сведите количество обязательных действий на лендинге к минимуму. Работать с небольшим экраном неудобно, а заполнять десятки разных полей — просто издевательство!
Совет 4. Призыв к действию должен быть всегда на виду
Какой бы ни была цель лендинг пейдж, сделайте все возможное, чтобы призыв действия всегда был на виду у клиентов.
“Купи сейчас!”, “Подпишись на рассылку!”, “Получи скидку!”, “Скачай буклет!” и другие призывы к действию должны быть не где-то внизу страницы или не где-то в заголовке лендинга, а либо должны повторяться в разных смысловых частях лендинг пейдж, либо “следовать” за клиентом при скроллинге.
Оптимальным решением представляется следующее: разместите призыв к действию под логотипом компании в скролл-меню. Так, призыв к действию будет всегда на виду, и пользователь сможет совершить нужное действие из любой точки лендинга. Кроме того, такое решение позволит избежать проблем с разрешением: призыв к действию будет всегда под логотипом и будет уменьшаться-увеличиваться вместе с ним.
Контент — обязательная составляющая любой лендинг пейдж, но его не должно быть много. Контент должен быть ясным, понятным и склоняющим клиента к нужному действию.
Особенность мобильной посадочной страницы в том, что требования к контенту сильно повышаются. Внимание мобильного пользователя сильно рассеяно — он не будет по 20 минут вычитывать полотна, что, зачем и почему. Следовательно, текст должен присутствовать, но только по существу.
Не тяните резину, а сразу сообщите клиенту, что он может получить на данной лендинг пейдж. Не используйте “красивые” фразы и длинные обороты — краткость, простота и ясность важнее стилистики. Запомните это.
Мобильные пользователи не только менее расположены к внимательному чтению лендинг пейдж, но и часто элементарно не могут себе это позволить из-за низкой скорости загрузки страницы.
Недавнее исследование, проведенное в США, показало, что тяжелые и неоптимизированные к низким скоростям Интернета посадочные страницы теряют 40-50% потенциальных клиентов. Что ж, в мире, где у любого бизнеса десятки конкурентов, ждать никто не хочет и, поверьте, не будет.
Чтобы сделать страницу более легкой, убедитесь, что:
В самом начале статье мы писали, что мобильные пользователи сильно отличаются от десктопных. Это правда, но они все-таки не разные люди. Каким бы устройством не пользовался бы потенциальный клиент, у него всегда есть какая-то проблема, которую вы можете решить. В принципе, любому клиенту нужны не Ваши товары и услуги, а решение его проблем.
Что из этого следует и причем тут мобильные лендинг пейдж? Посадочная страница будет успешной, если вам удастся разделить с потенциальным клиентом его желания и заботы, предложив ему грамотное и эффективное решение проблемы. Товары, услуги и лендинг пейдж под них есть у всех, а вот решение — только у вас!
Поняв это, вы должны понять, какое решение самое эффективное. Тут на сцену выходит А/В тестирование. Используйте контрольные группы, чтобы выяснить:
Подводя итог, можно сказать, что лендинг пейдж не может быть успешен без хорошего юзабилити. Что такое хорошее мобильное юзабилити, мы описали выше, но все-таки повторим еще раз. Итак, хороший мобильный лендинг пейдж:
Отметим также, что мобильный лендинг пейдж должен обязательно пройти А/В тестирование. Так, вы повысите шанс того, что лендинг пейдж будет работать.
Надеемся, что мы решили вашу проблему сегодня. Спасибо за чтение!