Как сделать простой мобильный лендинг? Оптимизируйте формы для мобильных
65% цифрового рынка - мобильные пользователи. 50% хватаются за смартфоны сразу после пробуждения. Необходимость мобильных лендингов не подлежит обсуждению.
В этой статье - 11 советов как улучшить пользовательский опыт владельцев девайсов.
Уменьшите время загрузки
Время - деньги, конверсия и продажи. 74% мобильных пользователей покидают сайт, если он загружается дольше 5 секунд.
В среднем они в сети до полутора часов в день. Их интересуют сайты, которые загружаются быстро. Все остальное - в топку.
Данные о скорости загрузки страниц можно получить в Google Analytics, отчеты «Поведение» - «Время загрузки страниц»:
Конкретика о страницах, которые грузятся долго и нуждаются в оптимизации:
В интернете много инструментов, которые помогут оценить время загрузки и скорость: Google PageSpeed Insights, Mobitest и другие.
Что еще сделать, чтобы ускориться:
- Почистить код;
- Минимизировать использование сторонних скриптов;
- Использовать сжатие GZIP;
- Убрать редиректы;
- Уменьшить изображения и использовать для загрузки сеть доставки контента (сервера, которые ускоряют доставку контента пользователям).
Изучите девайсы пользователей
В GA есть данные, какими девайсами пользуется целевая аудитория. Протестируйте разные варианты лендинга по разрешению и внешнему виду.
Ищите отчеты в разделе «Аудитория» - «Мобильные пользователи»:
Здесь конкретные марки устройств:
И данные по разрешению экрана:
Теперь вы знаете, какое разрешение тестировать в первую очередь, чтобы улучшить пользовательский опыт.
Добавьте на страницу корзину
Посетитель, который оставил что-то в корзине, чаще возвращается для завершения покупки. Прикрутите кнопку «Купить позже» или «Добавить в список желаний».
Так вы убьете двух зайцев: с помощью cookies узнаете о поведении посетителей и получите статистику, какие товары чаще оставляют в корзинах.
Расположите главные кнопки правильно
Как мы держим гаджеты и какие пальцы используем для навигации?
В 49% случаев смартфон лежит в левой руке, а большой палец правой перемещается по экрану.
А так с годами менялось расположение большого пальца на айфонах:
Учитывайте это при планировании кнопки призыва к действию.
Прикрутите клавиатуру к формам
Нужно заполнить форму? Предложите пользователю клавиатуру:
Помогут вставки в код:
Такой шаг ускорит конверсию.
Еще момент. Специалисты советуют максимально сжимать пространство между полями и убирать лишнее. Не заставляйте пользователей листать, чтобы добраться до следующего поля.
Вариант слева короче, потому и предпочтительнее.
Сделайте выгодное предложение
Исторически сложилось так: потребители выбирают товар с телефона, а завершают покупку с компьютера. Чтобы уменьшить трения и повысить продажи с мобильного лендинга, сделайте выгодное предложение.
Неплохо сыграть на страхе упустить выгоду (FOMO) - предложите купон на скидку с ограниченным сроком действия, например, вот так:
«Подпишитесь на мобильные уведомления и получите скидку 20%. Отправьте SMS с текстом Save01 на короткий номер и получите скидку».
Кстати, можно применить мобильный поп-ап. Главное, чтобы предложения (скидка, акция) были стоящими.
«Каждый день скидки до 70%! Подпишитесь и будьте в курсе наших акций».
Продумайте дизайн мобильного лендинга
Мало адаптировать лендинг под мобильники. Пользователи хотят уникальный опыт, а не просто уменьшенную версию десктопного сайта.
На скриншоте - оптимизированный и не оптимизированный под мобайл сайт:
С каким вариантом проще и приятнее работать? Ответ очевиден.
Выделите призыв к действию
Напомним: на странице только один призыв к действию, чтобы внимание пользователей не рассеивалось, и они знали, что делать дальше.
Чтобы «приковать» их внимание к кнопке CTA (призыва к действию), используйте контрастный цвет. Не знаете, какой выбрать - обратитесь к колесу цветов:
Найдите основной цвет лендинга. Напротив контрастный цвет, максимально эффективный.
На что еще обратить внимание?
- Текст на кнопке. Используйте простой и понятный язык. Не «Загрузите», а «Получите бесплатную книгу». Не «Отправить», а «Попробовать бесплатный тариф». Не «Купить сейчас», а «Добавить в корзину со скидкой 25%».
- Расположение кнопки. Не бойтесь опускать ее ниже сгиба, но не помещайте туда, где и так много элементов.
- Размер кнопки. Apple рекомендует 44х44 пикселей, на основании юзабилити и среднего размера пальца. В 57 пикселей прекрасно вписывается указательный палец:
Сделайте большую кнопку, чтобы пользователи не промахивались (а это раздражает).
Закрепите хедер и футер
Особенно, если лендинг длинный и нужно скролить вниз. Исследование журнала Smashing Magazine показало, что «липкие» хедер и футер повышают скорость навигации на 22%. Как это выглядит:
На изображении - навигация при закрепленном хедере. Главное - не перегружайте его элементами и опциями.
Поместите предложение над сгибом
Пользователям некогда скролить в поисках предложения, разместите его на первом экране, над сгибом. В примере ниже - конверсия увеличилась на 201% после того, как оффер перенесли на первый экран:
Поместите текст и изображения в одну колонку
Посмотрите на два экрана:
На левом - простыня с картинками. Много элементов, внимание рассеивается, непонятно, что делать дальше. Так делать не стоит. На правом легко найти нужное.
Экспериментируйте, улучшайте пользовательский опыт. И не забывайте тестировать нововведения.
Высоких вам конверсий!
И снова хорошая новость для владельцев сайтов на WordPress – есть плагины, которые создают мобильную версию вашего сайта на поддомене, например, WP Mobile Edition.
Плюсы данного метода: Можно существенно облегчить дизайн сайта для мобильных устройств, что хорошо скажется на его скорости.
Минусы: нужно создавать поддомен и настраивать его, писать для него отдельный шаблон и скрипт, определяющий, с какого девайса зашел пользователь, а это дольше, чем создание адаптивного дизайна.
Что мы получим?
Дополнительный адрес сайта на поддомене ”m.” с отличным от основного домена дизайном, упрощенным. В сети примеров такой реализации полно, вот, например, известный всем сайт:
Если вы определились с выбором и заказали один из методов реализации, не забудьте при приеме работ проверить, как ваш сайт отображается на мобильных устройствах и в онлайн-тестах Google .
Еще по теме:
Есть вопросы?
Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.
После того, как вы сделали лендинг, стоит подумать о его мобильной версии. В Платформе LP страницы автоматически адаптируются под разные размеры экранов, но лучше проверить, как ваш сайт будет выглядеть на телефоне. Ещё лучше – специально поработать над мобильной страницей: настроить размер и отображение элементов, скрыть лишние секции.
Вот порядок действий, как изменить страницу, чтобы она хорошо выглядела на смартфоне и была эффективной.
Главное правило мобильного лендинга
Думать о клиенте – главное правило мобильного лендинга (как и любого сайта). Представьте, в какой ситуации постетитель увидит ваш одностраничник:
Он откроет сайт на ходу, у него не будет времени долго его рассматривать.
У него будет конкретная цель: подписаться на рассылку, зарегистрироваться на мероприятие, оформить заказ.
У него может быть плохой интернет – сайт не загрузится.
Из этого правила следуют остальные четыре: меньше секций, меньше тяжелых фото, меньше текста и больше кнопка. Сосредоточимся на упрощении.
Как посмотреть, как выглядит ваш сайт на мобильном?
В редакторе в верхней панели есть режимы отображения. Выбирайте значок мобильного и смотрите, как ваш сайт выглядит на телефоне.
Правило №1. Меньше секций
Если лендинг – это разговор с клиентом, то мобильный лендинг – это максимально короткий разговор. Не письмо, а сообщение в мессенджере. Поэтому подумайте, какие секции можно не показывать на мобильных:
Точно ли нужно описание всех преимуществ работы с вами?
Стоит ли оставлять раздел с кейсами и примерами работ?
Нужны ли отзывы довольных клиентов?
Просматривая страницу на мобильном, посетитель скорее ищет что-то конкретное, чем бесцельно серфит в интернете. Он больше сосредоточен на цели. Помогите ему достигнуть этой цели быстрее – сделайте лендинг максимально коротким.
Как скрыть лишние секции в мобильной версии лендинга?
В настройках секции во вкладке со значком мобильного телефона поставьте галочку «Скрывать на телефонах».
Правило №2. Меньше фото
Если после ревизии секций, у вас осталось много картинок и видео, подумайте еще раз – не скрыть ли? Большие изображения и особенно видео влияют на скорость загрузки, а она при просмотре на мобильном может быть невысокой.
Какая скорость загрузки считается нормой?
9-13 секунд – это максимум, который клиент готов ждать. (Исследование seochat.com).
Правило №3. Меньше текста
Экран мобильного маленький, а туда нужно поместить столько же текста, сколько на большой. Придется уменьшить шрифт или сократить текст.
Лучше поступить так:
Сначала уменьшить размер шрифта, посмотреть, читается ли текст с маленького экрана.
Если текст всё ещё занимает ли слишком много места – сократите: примените к нему правила инфостиля или удалите части с дополнительной информацией.
Как настроить шрифт для мобильных?
Заходите в настройки текста, выбирайте вкладку с иконкой мобильного телефона и меняйте шрифт.
Правило №4. Больше кнопка
Вы ведете посетителя от первого экрана к целевому действию, и это действие должно быть одно. Правило «одна страница - одно действие» действует для всех лендингов, а для мобильных ещё строже. Попасть пальцем на кнопку на экране телефона сложнее, чем мышкой на экране компьютера. Учитывайте это и делайте кнопку больше.
Как изменить кнопку для мобильных?
В настройках кнопки зайдите во вкладку с иконкой мобильного телефона и задайте положение «На всю ширину».
Итак, порядок работы над страницей:
1) Открываем отображение страницы на мобильном
(верхняя панель редактора – значок мобильного телефона).
2) Просматриваем страницу в новом адаптированном виде.
3) Оцениваем каждую секцию: можно ли её скрыть без потери смысла? Скрываем лишнее (настройки секции – значок мобильного телефона – галочка «Скрывать на телефонах»).
4) Особенно оцениваем секции с картинками и видео. По возможности скрываем.
5) Смотрим, как адаптировался текст. Если шрифт слишком большой, делаем меньше (настройки текста – значок мобильного телефона – размер шрифта). Если текста всё ещё много – удаляем лишние предложения и абзацы.
6) Проверяем, как отображается форма и кнопка, настраиавем.
7) Если необходимо, задаем особое положение любых элементов на странице, задаем отступы.
8) Публикуем лендинг и открываем его на мобильном телефоне. Проверяем:
- Как долго грузится страница?
- Не поехал ли текст?
- Не поехали ли изображения?
- Правильно ли отображается форма?
Если всё хорошо, ваш лендинг готов к мобильным посетителям. А их, говорят , больше половины! Так что дерзайте)
Дата публикации: 05-07-2016 1524
Последние годы все быстрее и быстрее развивается индустрия мобильного интернета, и на данный момент создание мобильной версии для своего лендинг пейджа уже больше необходимость, нежели роскошь. На такой трафик на сегодняшний день приходится около 10-15% в обычных нишах, и более 30-40% в нишах о красоте, моде, здоровье.
Это неудивительно, всё больше людей для своих покупок использует мобильный телефон, и для сохранения и даже увеличения количества покупателей, следует создать мобильную версию сайта. Учитывая это, многие разработчики начали создавать мобильные версии сайтов и компании, которые не содержат в штате программистов, обращаться в таким специалистам, чтобы настроить мобильную вёрстку.
Поэтому если вы хотите увеличить конверсию вашего лендинга и повысить трафик, советуем вам создать мобильную версию. На нашем конструкторе вы можете настроить это самостоятельно.
Инструкция создания мобильной версии лендинга
1. Если вы знакомы с нашим конструктором лендинг пейдж, и у вас уже создан сайт на нашем конструкторе лендингов, то вам достаточно просто подключить тариф GRAND.
Начиная с тарифа Grand у вас будет подключена мобильная вёрстка, которая будет автоматически подгоняться под любой размер устройства.
А вот на первых тарифах сайт на мобильных устройствах будет отобржаться один в один, как на компьютере. Там установлена адаптивная вёрстка, которая отвечает за то, чтобы при просмотре сайта на любых гаджетах, никакие сдвиги в структуре сайта не происходили. Но в данном случае он не будет адаптироваться под размер смартфона или другого гаджета.
2. У вас будет подключена мобильная версия сайта.
Если вы впервые зашли на конструктор мобильного лендинга, то пойдём по порядку.
Чтобы создать нужно:
- зарегистрироваться на конструкторе Tobiz;
- создать лендинг пейдж на нашем конструкторе сайтов самостоятельно или с помощью готовых . лендингов, выбрав любой понравившйся вам из списка предложенных;
- после того, как вы отредактировали шаблон и подстроили сайт под себя, обязательно подключите домен к лендинг пейдж, чтобы ваш сайт начал высвечиваться в поиске и начал свою работу;
- затем перейдите в тарифы и подключите тариф Grand BIZ или Grand VIP.
■ В итоге вы получите мобильный лендинг совершенно бесплатно и автоматически настроенный.
Для адаптирования сайта для мобильных устройств конструктор сайтов Tobiz специально предусмотрел данную возможность, чтобы помочь вам сэкономить деньги и время. Так как, если вы наймёте программиста для разработки мобильной версии лендинга , вы потратите минимум 15-20 тыс. руб дополнительно, а это ещё нужно будет заплатить за создание самого лендинг пейджа и его техническую поддержку (плюс около 5 тысяч ежемесячно).
На базе нашего конструктора вы можете сделать это совершенно бесплатно. К тому же мы всегда следим за его работой и делаём всё, чтобы сайт оставался конструктором лендингов с нормальной адаптивностью.
■ Если вы будете следовать нашей инструкции, то в итоге вы получите 3 варианта мобильной адаптации лендинг пейдж.
Представьте, что вы находитесь в незнакомом городе и вам нужно быстро найти определенную информацию с помощью мобильного телефона. Вы наконец находите нужный ресурс, но… он совершенно не предназначен для маленького экрана. Требуется целая вечность, чтобы страница загрузилась, крошечные кнопки невозможно найти, приходится копировать и вставлять телефонный номер компании, чтобы позвонить в офис. Или даже хуже: нужно заполнять длинную лид-форму.
Мы все хоть раз в жизни сталкивались с этим. Статистика аналитической компании «IDC» говорит о том, что в этом году пользователей, которые выходят в интернет с помощью мобильных устройств, будет больше, чем тех, кто использует персональные стационарные компьютеры.
Исследование Люка Вроблевски (Luke Wroblewski), директора по продуктам Google и автора книги «Сначала мобильные!» показывает, что в период с 2009 по 2013 потребление контента через привычные каналы, такие как телевидение, радио, печать, значительно снизилось. Единственный показатель, который вырос — использование мобильных устройств.
Сейчас люди делают покупки в интернете, читают новости и просматривают различные сайты со своих телефонов больше, чем когда-либо. Но несмотря на то, что эта тенденция развивается уже несколько лет, многие ресурсы так и не смогли адаптироваться.
Даже в 2015 году у большинства пользователей возникает целый ряд затруднений:
- Лендинги не оптимизированы для экранов мобильных, на страницах сложно ориентироваться;
- Приходится постоянно увеличивать, а затем уменьшать страницы, чтобы найти необходимую информацию;
- Нужно постоянно вводить какие-то данные;
- Страницы медленно загружаются;
- Кнопки слишком маленькие, поэтому зачастую посетитель попадает совсем не на ту страницу.
Из-за того, что процент использования мобильных устройств растет с каждым годом, вопрос улучшения юзабилити мобильной версии становится все более актуальным.
Если вы еще не оптимизировали свой лендинг и не уверены, что все пользователи телефонов будут довольны им, обратите внимание на эти 5 распространенных ошибок и никогда их не совершайте. Иначе ваши потенциальные клиенты останутся разочарованными и сделают выбор в пользу конкурентов.
1. Сайт не оптимизирован для мобильных устройств
Еще в декабре 2012 года медиа-ресурс Mashable провозгласил наступающий 2013 годом адаптивного дизайна. Крупнейшие компании тогда обратили на это внимание и разработали мобильные версии своих ресурсов. Но многие не могут похвастаться корректным отображением страниц до сих пор.
Адаптивный дизайн — способ, который поможет вашему ресурсу хорошо отображаться на разных платформах и устройствах без создания нескольких страниц. К примеру, пользователи, не тратя времени на масштабирование (ведь это действительно раздражает), смогут сразу перейти к навигации. Адаптивный дизайн не только улучшит пользовательский опыт, но и положительно скажется на конверсии.
Ритейлер одежды «O’Neill Clothing» достиг впечатляющих результатов после того, как его маркетологи применили адаптивный дизайн. Они отслеживали три главных показателя: конверсию, количество сделок и выручку на протяжении трех недель до и после применения технологии. Результаты были невероятными.
iOS устройства:
- Конверсия увеличилась на 65.71%
- Количество сделок — на 112.50%
- Выручка — на 101.25%
Устройства Android:
- Конверсия увеличилась на 407.32%
- Количество сделок — на 333.33%
- Выручка — на 591.42%
Можно привести немало примеров, которые иллюстрируют явные преимущества адаптивного дизайна. Специалисты из «Skinny ties», компании, занимающейся созданием галстуков с 1971 года, отметили рост выручки на 42,4% после запуска мобильной версии ресурса. В фирме по производству фотоэкипировки «Think Tank Photo» количество сделок, заключенных с помощью смартфонов и планшетов, выросло на 96% по сравнению с предыдущим годом.
2. Игнорирование целей пользователя
Еще одна распространенная ошибка заключается в предположении, что адаптивный дизайн решит все проблемы. Но все не так просто. Хотя он способен предотвратить многие затруднения, стоит подумать и о намерениях тех пользователей, которые заходят на ресурс с мобильного телефона.
Вице-президент компании «UserTesting» Майк Мэйс (Mike Mace) провел исследование тысяч мобильных версий. Вот его заключение: «Вы должны переделать ваш сайт специально для мобильных устройств, а не просто скорректировать его. Мобильная версия — это не только другой набор технологий, это еще и другое поведение пользователя, другие ожидания».
Например, владельцы смартфонов ждут немедленного удовлетворения своих целей. Они хотят быстро найти информацию во время перерыва между встречами, или пока едут на автобусе. У пользователя планшета зачастую есть время на поиск, например, он сидит дома перед телевизором (который, кстати, работает как отвлекающий фактор).
Стоит учитывать также, что потребности и приоритеты владельцев мобильных зачастую отличаются от целей пользователей домашних компьютеров: первым, скорее всего, понадобится быстро найти карту или номер телефона. Поэтому эксперты рекомендуют не просто «перебрасывать» всю информацию с лендинга на мобильную версию, а подумать над целями пользователей и соответствующим оформлением.
Никто не любит заполнять длинные формы даже на обычных сайтах, а вводить различную информацию через мобильный — это настолько раздражает, что не укладывается ни в какие рамки. Главный совет: избегайте длинных, нудных форм при разработке мобильной версии.
В качестве результата вы получите не только положительный пользовательский опыт, но и увеличение доходов, рост вашего бизнеса. Как мы уже выяснили, длинные формы вызывают раздражение, и если вы будете их использовать, то наверняка снизите таким образом коэффициент конверсии. К примеру, крупное туристическое агентство «Expedia» потеряло $12 000 000 прибыли из-за ненужных полей формы, которые сбивали с толку пользователей и попросту запутывали.
Если пользователи видят длинные формы на своем мобильном устройстве, они будут стараться избежать утомительных интеракций. Автор книги «UX для бережливого стартапа» Лаура Клейн (Laura Klein) отмечает: «Ожидание, что пользователи мобильных устройств будут вводить данные таким же образом, как и обладатели стационарных компьютеров — самая большая ошибка многих компаний».
Несколько советов для создания максимально удобных и понятных форм:
- Выбирайте только простые формы и не просите слишком много информации;
- Удалите лишние поля;
- Включите автозаполнение наиболее распространенных слов и фраз;
- Используйте средства, встроенные в мобильные устройства (цифровая клавиатура, GPS, адресные книги, фотоаппараты и т. д).
Знакомая многим ситуация: вы пытаетесь перейти по ссылке или заполнить форму, используя мобильный телефон, но вместо этого попадаете на совершенно другую страницу. Сочетание маленьких экранов и множества кликабельных элементов создает массу неудобств для пользователей.
Стивен Хубер (Steven Hoober), проектировщик пользовательского взаимодействия для мобильных устройств, дизайнер и автор книги «Проектирование мобильных интерфейсов» советует: «Убедитесь, что каждая зона прикосновения находится по крайней мере в 8 миллиметрах от центра другой, хотя расстояние в 10 миллиметров даже предпочтительнее».
Ссылки, поля форм и другие важные элементы должны быть достаточно большими, чтобы пользователи могли с легкостью нажимать на них. С такой целью компания «Apple» установила минимальный размер объекта — 44х44 пикселя. Теперь этот стандарт используется для всех продуктов компании.
Правил и размеров, которые подошли бы для каждого лендинга, не существует, но, по словам Стивена Хубера, при разработке ресурса нужно учитывать три критерия: кнопки должны быть читабельными, четкими и привлекательными для пользователей.
Пользователи мобильных устройств очень нетерпеливы, и медленная загрузка является серьезной проблемой. 80% владельцев смартфонов ждут, что страницы загрузятся так же быстро, как на экране их компьютеров. Если сайт не реагирует на прикосновения пользователя, то человек, скорее всего:
Вместо заключения
Уровень потребления медиа-контента через мобильные устройства растет с каждым месяцем. Все больше людей получают доступ к мобильному интернету, и важно учитывать это при разработке лендинга или сайта.
Слишком сложные ресурсы разочаровывают пользователей и подталкивают к конкурентам. Сделав лендинг простым и приятным в использовании с мобильных устройств, вы перестанете упускать потенциальных клиентов и повысите показатели лидогенерации.