Speaker A
Ну что, ребятки, добро пожаловать в урок, как создавать мобильные версии прототипов Landing Page и зарабатывать на этом.
Урок о создании мобильных прототипов лендингов с советами по UX и монетизации, важности адаптации под мобильные устройства.
Key Takeaways
- Мобильные версии лендингов — must have для современного трафика.
- Монетизация мобильных прототипов выгодна и проста в реализации.
- UX-дизайн должен учитывать особенности мобильного взаимодействия, включая зоны досягаемости пальца.
- Не стоит сразу делать и презентовать обе версии — сначала утверждаем ПК, затем мобильную.
- Простота и фокус на ключевых элементах повышают удобство и конверсию.
Summary
- Большая часть интернет-трафика сегодня приходит с мобильных устройств, что делает мобильные версии сайтов обязательными.
- Монетизация мобильных прототипов позволяет увеличить стоимость услуг на 30% и предлагать дополнительные услуги клиентам.
- Существует два подхода к прототипированию: mobile first и классический с созданием ПК версии сначала.
- На мобильной версии часто скрывают часть блоков, оставляя только самые важные — оффер, формы захвата, отзывы и сертификаты.
- UX-дизайн мобильных версий должен учитывать удобство использования одной рукой и размещение интерактивных элементов в доступных зонах.
- Каждый блок на сайте должен раскрывать одну тему, избегая перегрузки текста и сложных элементов.
- Всплывающие окна на мобильных устройствах нежелательны из-за неудобства и технических рисков.
- Важно делать кнопки призыва к действию большими, заметными и контрастными для повышения конверсии.
- Использование проверенных маркетинговых практик и отказ от слайдеров повышают эффективность лендингов.
- Текст на сайте должен быть простым, понятным и адаптированным под язык целевой аудитории.
Chapters
- 00:00Введение и важность мобильных версий
- 01:15Статистика и примеры трафика с мобильных устройств
- 02:16Монетизация мобильных прототипов
- 03:16Подходы к прототипированию: mobile first и ПК версия
- 05:27Особенности мобильных прототипов и скрытие блоков
- 06:37UX и удобство использования мобильных устройств
- 07:40Правила размещения интерактивных элементов
- 08:44Структура блоков и упрощение контента
- 10:51Избегание всплывающих окон и другие советы
- 14:30Заключение и лучшие практики
Full Transcript — Download SRT & Markdown
Speaker A
Побежим сразу к делу. Немного статистики, да, почему вообще нам нужно обязательно заниматься такой вещью, как прототипы мобильных версий сайтов.
Speaker A
Всё очень просто: везде, кроме промышленности, битубишек, где люди по работе своей вынуждены сидеть за компьютерами в течение рабочего дня, большинство трафика приходит с мобильных устройств, а это значит, что у нас обязательно должна быть мобильная версия.
Speaker A
Вот, например, подключение интернета. У нас здесь достаточно большая доля трафика, 65% приходится именно со смартфонов.
Speaker A
В продаже сока алоэ для такой в разносной товар для больше, чем для пенсионеров, всё равно большая часть трафика приходит, видите, с планшетов и телефонов, да, больше 50%, поэтому must have история.
Speaker A
Более того, сейчас всё больше выходит исследований, что даже по времени, проведённому за устройством, ПК всё больше уступает мобильным устройствам.
Speaker A
То есть люди в целом за компьютерами проводят всё меньше и меньше времени. Это будет такой тренд. Он только увеличивается вот все последние там 10 лет, которыми там, которым я занимаюсь маркетингом.
Speaker A
Поэтому давайте разберёмся. Хорошо, мы про это узнали. Как будто это звучит как наплодительный геморрой.
Speaker A
Но любой геморрой надо обращать во что? В денежку.
Speaker A
Поэтому очень легко можно монетизировать. Плюс 30% к нашей стоимости прототипа прибавляем. И, пожалуйста, очень легко а себе в кармашек положили.
Speaker A
То есть у нас прямо есть два тарифа. Один тариф там за 89.000 руб., второй тариф там за 115.000 1.000 руб. с мобильной версией.
Speaker A
Что ещё можно сделать, если у заказчика уже имеется сайт? Можно просто предложить ему разработать мобильную версию. Очень легко, тоже допродаётся и такая может быть входная услуга, чтобы человек распробовал наши, а, таланты, так сказать.
Speaker A
Для вас также это может быть достаточно такая безопасная история, когда у вашего там потенциального клиента сайт имеется, вы ему предлагаете: "Давай я тебе сделаю мобильную версию и там заплатишь мне по результату".
Speaker A
Например, да, если вы новичок, очень классный заход может быть. Следующая тема: как прототипировать мобильные версии? Есть простое правило, по-хорошему, но здесь есть два подхода, на самом деле.
Speaker A
Первый подход - это mobile first прототипирование. Особенно это для разных там курсов, особенно если там блогер делает запуск, мы делаем для него сайт, у него львиная лавина трафика, 95% будут приходить с мобильных устройств.
Speaker A
Поэтому мы, а, в некоторых случаях делаем прямо специально в первую очередь мобил мобилку мобилку, мобилку, а из неё составляем ПК версию. Вот.
Speaker A
Но в большинстве случаев до сих пор мы сначала создаём, утверждаем ПК версию.
Speaker A
Ну, как правило, у нас просто в агентстве дорогие проекты. И есть здесь второй лайфхак, потому что, э, потому что когда мы презентуем, точнее, когда мы создаём сразу две версии, тогда нам приходится делать в два раза больше правок.
Speaker A
Поэтому никогда не презентуйте сразу две версии: либо мобилка, либо, э, для ПК, либо для персональных компьютеров, иначе вам прилетит шквал реально правок.
Speaker A
Так что мобилку мы делаем только на утверждённом прототипе.
Speaker A
Ну и, соответственно, если прототип у вас, вот как мы любим делать, он огромная, длинная простыня бесконечная, то на мобильной версии, конечно, мы часть блоков скрываем, и поэтому мы заказчика информируем на мобильной версии, там это будет Unreal, их листать просто неудобно.
Speaker A
Остаём только 10-12 самых важных из 15-20 блоков. Что должно обязательно остаться, когда мы урезаем ПК версию?
Speaker A
Первый экран с оффером, все формы захвата, а что, что такое УТП, то есть его раскрытие, раскрытие продукта, подхода, ну там отзывы, сертификаты, то, что нужно для того, чтобы человек убедился, то, что фирма в целом вызывает доверие.
Speaker A
В идеале можно открыть карту ваших персонажей и вот оставить те блоки, которые закрывают их там топ-10 критериев вот как вот или их болей, либо их критериев выбора поставщика.
Speaker A
Следующее, что важно, когда мы с вами делаем мобильную версию, мы смотрим за тем, как пользователь в целом пользуется мобильными устройствами.
Speaker A
Да не только мобильную версию, на самом деле. Что бы мы не делали, мы должны это мыслить всегда уметь надевать на себя шапочку пользователя, абстрагироваться от разработчика.
Speaker A
И вот этот, как мне нравится, UX тест, знаете, user experience тест на миллион долларов. Сам бы я купил на этом сайте или нет? Очень просто.
Speaker A
И вот смотрим на него отстранёнными глазами, глазами того самого уставшего мужика пили телевизором, да, который это всё листает.
Speaker A
Поэтому есть очень простое устройство, что наши все интерактивные элементы должны попадать под кнопку, под палец.
Speaker A
То есть есть места, видите, зелёным, а, где можно размещать кнопки, и есть места оранжевые, где уже их хрен дотянешься, а красные так вообще ни в коем случае.
Speaker A
Поэтому все кликабельные истории должны попадать в эту зелёную зону. Почти 50% пользователей пользуются телефоном только одной рукой, но есть ещё 36% людей, которые вот так вот либо придерживают, либо, чтобы больше экран доставать, да, либо 15%, которые вообще двумя, собственно, руками пользуются.
Speaker A
Так что делайте так, чтобы гарантированно все в зелёной зоне оказывались. Тогда у нас будет очень большая конверсия, кликабельность этих кнопок. Это будет банально удобно.
Speaker A
Теперь я хочу с вами познакомиться одним из главных правил мобильных версий. Вообще, да, и на самом деле не только мобильных версий, очень рекомендую в целом, да, вот у нас какой-то один блок на сайте, он не должен содержать себе фарш, он должен быть посвящённым раскрытию одной темы, одного смысла.
Speaker A
Это как презентацию вы делаете, да? Вы же не будете на одном слайде там рассказывать про всё на свете, про и про наш автопарк, и про наших сотрудников, и про наши сертификаты, клиенты, преимущества, оффер, доставку.
Speaker A
Нет, это разные смыслы. Например, если мы говорим, да, про какой-то информационный блок, там что такое это, что за продукт вообще, да, мы прямо показываем продукт, вот как выглядит коробка.
Speaker A
Вот его какие-то основные продуктовые свойства, он экологически чистый, без консервантов. Сок день вашего обращения. Сразу доставляем его вам.
Speaker A
Если вдруг так получается, что информации мало и в один блок влезает ещё один экран, то делаем просто контрастное разграничение.
Speaker A
Тогда человек выдохнул, смысл закончился, он расслабился, у него информационная пауза наступила, да, он может спокойно воспринимать дальнейшую информацию.
Speaker A
Не усложняйте, пожалуйста, какие-то сложные блоки полотнами текста и так далее, да, вот старайтесь сокращать.
Speaker A
Вот здесь вот реально у нас получилось очень много текста.
Speaker A
Но тем не менее мы старались, мы старались читающую аудиторию, это товар такой биологический, вот старались как-то его хотя бы там жирными выделениями какими-то там, а, булими, а, фаршировать.
Speaker A
Ну, конечно, когда у вас есть классные, приятные картинки, может быть, даже мемчики, делайте, в общем, всё для того, чтобы пользователю было комфортно читать.
Speaker A
Я как копирайтер сам мне иногда стрёмно удалять какие-то моменты главные из текста, но лучше убрать текст и пользователь его прочитает, чем нежели огромное полотно, которому будет даже стрёмно начинать читать.
Speaker A
Вот, например, если мы не целевая аудитория, мы не будем вот читать про усиление до трёх раз эффективностью сока алоэ там. Это нам будет неинтересно.
Speaker A
Обязательно э давайте своим польсам возможность отдыхать. Прямо основную выжимку оставляем, чтобы пользователь наверняка прочитал, да.
Speaker A
Добавляем вот такие вот картиночки, которые усиливают восприятие текста, визуализируем какие-то отдельные элементы продукта и так далее, и так далее. Следующий момент очень важный.
Speaker A
Поп-окна, всплывашки на телефоне неудобно, есть много с ними рисков, поэтому по возможности старайтесь их избегать, да, чтобы можно было просто заполнить форму контактов, например, не в попапе или квиз какой-то не всплывающий, а прямо я прямо на страничке его прохожу, у меня всё прогружается.
Speaker A
Потому что есть момент, связанный с чем? У всех разные устройства, у всех р
Speaker A
Поэтому помните, кнопка всегда должна быть под пальцем. Вот здесь она обязательно должна быть под пальцем.
Speaker A
Также не забывайте ставить на протяжении всего сайта какие-то дополнительные призывы связаться в мессенджере. WhatsApp, Telegram, Вкашечка, а в некоторых случаях Viber, если это какие-то прямо там специфические регионы или специфические ниши, зависит от того, как, а, собственно, пользователь привык
Speaker A
каким мессенджером он привык пользоваться. Это, в общем-то, и всё. Это основные ключевые правила. Давайте сейчас разберём ошибки, топ ошибок, которые можно, собственно, допустить при создании мобильной версии. Во-первых, её вообще можно не проверить. Я сделал ПК версию. Сайт работает, что-то
Speaker A
отгружается, нормас. Прямо берёте телефон. Лучше разные телефоны взять, да, посмотреть, поклацать. А часто бывает ошибка такая, что справа у нас белая полоса или сверху где-нибудь белая полоса. Это ошибки и завёрстки, поэтому обязательно мобильную версию нужно проверить. Второе.
Speaker A
офер, потерять его, сделать его нечитабельным или как-то это сделать так, чтобы картинка начала забирать за себя больше внимания, чем самый главный элемент, который сильнее всего влияет на конверсию, а это офер. Третья ошибка, которая часто, очень часто возникает -
Speaker A
это кнопка, которая уехала на второй экран в силу того, что много элементов на первом. А кнопку-то мы и забыли. Нет, два самых главных элемента, кнопка и заголовок должны быть классными и привлекательными на первом экране.
Speaker A
Четвёртая ошибка - это когда мы в один блок пытаемся вместить сразу кучу каких-то смыслов, как будто отдельных тем. Не надо, разграничивайте их. Можно визуально всегда помните, лучше меньше, но чтобы точно пользователь эту информацию, этот наш месседж прочитал, нежели чем завалить его горой
Speaker A
информации, которую он даже не станет изучать. Ну и пятая ошибка - это использовать слайдеры. Вот когда надо что-то куда-то в бок мотать, листать вместо спойлеров, когда можно вот взять, сделать так, чтобы дополнительная информация раскрывалась.
Speaker A
Вообще в спойлеры прикольно прятать какие-то преимущества, как сказал пользователю нравится с сайтом взаимодействовать жмакать повышается вовлечение в сайт, в изучение, время на сайте растёт. Это позитивные показатели, которые потом э приводят к тому, что конверсия растёт. Итак, за этот урок мы
Speaker A
с вами узнали вот в сухом остатке 15 пунктов. Первое, значит, из большого сайта ПК версии оставьте 10-12 максимум экранов самых важных, которые закрывают ключевые критерии, страхи и потребности из анализа нашей целевой аудитории.
Speaker A
Второе, все кнопки нужные, вообще любые интерактивные элементы мы размещаем под пальцем, чтобы пользователю было очень легко на него жмакнуть. Как правило, это где-то нижняя часть экрана и левая часть экрана. Прямо легко до них дотянуться, иначе кноп кнопки никто не будет
Speaker A
нажимать. Третье правило: стремимся к тому, чтобы один информационный блок помещался в один экран. Четвёртое. Если же не умещается, то нам надо обязательно делать контрастное разграничение между блоками, чтобы пользователь понимал, ага, здесь у нас начался новый смысл, и это упрощает восприятие. Пятое. Э блоки
Speaker A
не усложняем сложными фразами, полотнами текста, какими-то речевыми оборотами. Стараемся максимально упрощать, как люди переписываются, тем же самым языком, на котором они общаются у себя там в мессенджерах. Шестое. Не пытайтесь пихнуть текст из десяти блоков в пять.
Speaker A
Надеюсь, что пользователь прочитает, да? Вот прямо сокращаем по максимуму для того, чтобы э пользователь всё-таки меньше, но лучше услышал. С этой же целью мы используем картинки, фотографии. Вот наш, мы вот прямо уже так привыкли, чтобы воспринимать всё скорее визуально. Здесь лучше всего
Speaker A
работает правила покажи, а не расскажи. Картинки, фотографии всегда будут, а, и подписи к ним всегда будут гораздо интереснее, чем просто голый текст.
Speaker A
Поэтому визуализируйте отдельные элементы продукта, услуги, которые вы продвигаете. Девятое. Старайтесь избегать по-пч, чтобы это было прямо просто открытое окно. То есть вообще не было бы окна никакого. Открытая форма захвата или открытый квиз. Открытый значит то, что он не в какой-то всплывашке появляется
Speaker A
прямо вот никуда не перекидывает тебя. Ты можешь прямо никуда не перелистывая сайт, пожмакать и остаться на этой же страничке. Десятое. Кнопка призыва к действию должна быть реально большой, заметной контрастной яркой.
Speaker A
Контрастной означает, э, то, что 10% максимум такого же цвета в целом используется на экране. То есть это какой-то особенный цвет под эту кнопку какие-то важные элементы. Одиннадцатое.
Speaker A
А вся форма захвата вместе с призывом к действию должна помещаться в один экран, иначе пользователь не будет листать куда-то, ему должно быть удобно заполнить вашу форму заявки.
Speaker A
Двенадцатое. Чем вот можно использовать прямо много пространства для между какими-то пунктами в тексте для того, чтобы пользователю легче было их читать. Если они все скопом сгруппированы, маленький шрифт, это будет неинтересно.
Speaker A
Тринадцатое. Да, слайдеры мы никогда не используем. Э, их спойлерами меняем с вами, друзья мои. Вот, э, четырнадцатое.
Speaker A
Обязательно делаем кнопки внизу, которые прикреплены к экрану. Они повышают конверсию. Ну и в течение всего лендинга раскидываете кнопочки, типа уточните в мессенджере, задайте удобный вопрос для того, чтобы пользователя дополнительно стимулировать начать коммуникацию.
Speaker A
Домашнее задание - сделайте мобильную версию того прототипа, который вы уже сделали на прошлых занятиях, следуя правилам из этих уроков. Для супермолодцов, а можно изучать типографику, тренировать визуальную насмотренность. Вот есть тренажёр Ильяхова, книга Артёма Горбунова, типографика и вёрстка. И в целом
Speaker A
смотрите разное там оформление журналов, какую-то свою собственную библиотеку собирайте, да, собирайте внутреннюю красоту внутренних решений какие-то, скриншотьте для себя для того, чтобы у вас, а, как раз, когда вы начнёте делать сайт, как вы видели, может, на наших разборах, мы просто открываем какую-то
Speaker A
готовую библиотеку, которая у нас в голове есть, смотрим удачные решения и их применяем у себя. Не пытаемся изобретать велосипед, когда уже все приёмы на свете изобретены. Так что действуйте там в орузии, как маркетологи, да, берите лучшие практики, их правильно адаптируйте и высоких вам
Speaker A
результатов.
Topics:прототипированиемобильная версияlanding pageUX дизайнмонетизациямобильный трафикконверсияинтерактивные элементымаркетингадаптивный дизайн
