Повышаем насмотренность Оформление первого экрана — Transcript

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

Key Takeaways

Прототип значительно ускоряет и упрощает процесс разработки сайта.
Первый экран — самый важный элемент для удержания пользователя и конверсии.
Каждый элемент сайта должен иметь конкретную бизнес-задачу и работать на продажу.
Пользователь принимает решение о продолжении взаимодействия за считанные секунды.
Доверие и четкий call to action — обязательные элементы успешного первого экрана.

Summary

Объяснение роли прототипа как технического задания и ускорителя разработки сайта.
Первый экран сайта должен захватывать внимание за 6 секунд и конвертировать посетителя в заявку.
На продающих сайтах каждый пиксель и блок имеют конкретную бизнес-задачу.
Ключевые элементы первого экрана: заголовок, call to action, доверие и четкое предложение.
Пользователь быстро задает шесть вопросов о сайте, на которые нужно дать мгновенный ответ.
Примеры удачных и неудачных решений на сайтах с точки зрения насмотренности и конверсии.
Важность новизны контента и избегания общеизвестных цитат для удержания внимания.
Роль качественных фотографий и четких кнопок для взаимодействия с пользователем.
Первый экран служит для захвата внимания, а остальной лендинг — для убеждения и доверия.
Чек-листы и рекомендации по оформлению первого экрана для повышения эффективности сайта.

Chapters

Full Transcript — Download SRT & Markdown

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

Вот. То есть это реально ускоряет невозможным образом в разы, поверьте мне. Скорость разработки повышает,

Speaker A

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

Speaker A

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

Speaker A

деле очень весело и реально творчески такая реализующая вещь, когда ты посмотрел, думаешь: "Блин, охереть, я бы тут сам купил". На сайте у каждого пикселя есть конкретная бизнес-задача, у каждого блока есть конкретная бизнес-задача. Я хочу, чтобы вы пропитались подходом. На продающих

Speaker A

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

Speaker A

задачи у первого экрана сайта? Давайте копать. На самом деле их всего парочка. Завладеть вниманием за первые 6 секунд и сконвертировать в заявку, в звоночек.

Speaker A

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

Speaker A

на попки любимому блогеров смешные видео с котиками, собачками и потом попадает на наш сайт и и что он там должен увидеть, да, какую-нибудь статью научную. Он прямо будет её со вниманием изучать. К сожалению, нет. У нас есть всего несколько секунд, чтобы такой: "О,

Speaker A

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

Speaker A

и крутой заголовок, и цепляющий какой-то call to action, да, чтобы лёгкий, заманчивый тот самый. И доверие вызывается, и сайт великолепно, классно работает, всё всплывает как надо и так далее. Потому что если первый кран не работает, ничто его не спасёт. Не

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

вопросов возникают. Куда я вообще попал? А это новое или старо что-то интересненькое? Или я это уже знаю? Есть ли тут вообще то, чему можно доверять? И что мне делать дальше? Как связаться?

Speaker A

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

Speaker A

[фыркает] Да. Вот, например, сайт франшизы Fordby Bayard. Куда я попал? Да, и здесь прямо есть такой элемент сайта, называется дескриптор или, если грубо перевести, описатель, который говорит, что это, собственно, проведение квестмероприятий под ключ для детей и взрослых, да? А это

Speaker A

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

Speaker A

пассиве. Плюс здесь есть ещё сразу же ограничение. Мы продаём только одну франшизу на город. Следующий вопрос: это что-то новое или это уже знаю? Люди смотрят только вдумайтесь, существуют целые новостные каналы Евро, Россия 24, да, соцсети так популярны, потому что

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

у нас кнопочка такая, ну, прямо, ну, прямона должна блестеть. Она должна выделяться, подсвечиваться так сладко, так сладко, что невозможно на неё не нажать. А, и номер телефона, и там кнопочка, например, перезвоните мне или заказать звонок. Таким образом, наш

Speaker A

усталый мужик за 6 секунд понял, что тут что-то интересненькое есть, и остался вместе с нами изучать дальше. Но если кто-то из вас пришлёмне что-то типа того, типа вот это вот сейчас посмотрите на сайт и подумайте: "А что это вообще?

Speaker A

Куда я попал? Э, это новое или старое? Есть тут для меня что-то интересненькое? Этому можно доверять?

Speaker A

Есть только мальчик, который смотрит на меня, я смотрю на него, и я чувствую себя очень неловко. Хэппи смайл. Ну, он вообще не смайл. Он он смотрит на меня с подозрением. Да, здесь где-то там чёрным по синему написано, что это там какая-то

Speaker A

организация мероприятий для детей. Короче говоря, непонятно. Непон

Speaker A

Бизнес. Куда я попал? Что это? Понятно. Есть ли тут что-нибудь интересненькое? И вот ты смотришь, и ты чувствуешь себя тупым.

Speaker A

Чувствуешь себя тупым. Почему? Потому что ты не можешь даже вкурить, а что это вообще продаётся? И когда пользователь себя чувствует тупым, конверсии не будет. А ещё одна ошибка здесь в копирайтинге, которое мы будем с вами изучать дальше. Продажа востребовано

Speaker A

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

Speaker A

какая-то ерунда, да, кнопка какая-то непонятная. Короче говоря, очень много вопросов остаётся. Хотя вот типа 200.000 руб. хотя бы по науке какая-то конкретика типа присутствует, но по факту по факту видно, что в сайт вложили не меньше 100.000 руб. На выходе ерунда

Speaker A

полнейшая именно из-за того, что это тупо сложно. Ещё один пример тоже с сайта, где-то тысяч за 150.

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

Гарантия лучшей цены. Подобрать каска уже там сколько 7.000 компаний подобрали себе полис с помощью нашего проекта. А прока. Ну вот он простенький, да. Ну вот он такой минималистичненький. Можно там сделать что-то. Я бы ещё логотипы крупных компаний добавил сюда, там

Speaker A

какой-нибудь Росгострах, ещё там 30 вот этих компаний я бы добавил и был бы прямо ништяк. Но на самом деле этот сайт приносил 28% конверсии по каска, потому что за счёт своей простоты, за счёт всего того, что он закрывает, э, насчёт

Speaker A

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

Speaker A

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

Speaker A

Второе: лёгкий заманчивый призов к действию. Третьим: сайт вызывает доверие или конвертер, любой другой. И четвёртое, работоспособная вёрстка. Сайт корректно отображается со всех устройств, быстро загружается, там хорошие кнопочки, а работоспособные заявки отправляются там в сиремку. в на почту Леды приходят. Только тогда мы

Speaker A

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

Speaker A

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

Speaker A

Давайте по ним пройдёмся. Первое - это логотип и дескриптор. Вот эти два элемента отвечают на вопрос, куда я попал. Как правило, мы их располагаем в верхней части слева экрана. Люди так привыкли читать слева. Вот смотрят, кто это, кто это, что это вообще, что там за

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

3.000 или там, не знаю, 15.000 руб. или со скидкой до 15.000 руб. в апреле, а за счёт того, что у нас низкий спрос и мы можем сделать такую скидку в апреле.

Speaker A

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

Speaker A

Что здесь у нас ещё есть? Работаем официально по договору с гарантией. Более половины установок устраняем в течение 10-15 минут. И мне очень нравится такая ненавязчивая стрелочка.

Speaker A

Стрелочки очень круто работают. Они управляют нашим вниманием. А я очень рекомендую все стрелочки к кнопкам использовать. Конверсия всегда растёт.

Speaker A

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

Speaker A

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

Speaker A

Внизу есть выгоды, можно связаться, номер телефона, кнопочка перезвоните мне. Работаем круглосуточно. Где работаем, тоже очень важно, да, для, собственно, чтобы понять, вообще это в моём регионе или нет. Москва Московская область. Вот. И вот кнопочка узнать стоимость. Я бы написал рассчитать

Speaker A

стоимость за и получить скидку 3.700 руб. в апреле. что-нибудь в этом ключе или получить чек-лист, как правильно ухаживать за ноутбуком после ремонта, которые там сэкономил уже более 15000 баксов владельцем техники Apple.

Speaker A

Вот. Также можно в заголовок добавить, если человек прямо искал ремонт компьютеров и ноутбука в конкретную модель компьютера и ноутбука. Прикиньте, там было бы написано: "У вас сломался какой-нибудь MacBook Pro 2016 года на 1 и там был прямо написано ремонт макбуков

Speaker A

Pro на 1 за 1 день с выгодой до 35.000 руб. Выезд мастера в течение 30 минут диагностики бесплатно". Рассчитать стоимость ремонта и получить чек-лист, как правильно ухаживать за техникой Apple, чтобы она никогда не ломалась.

Speaker A

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

Speaker A

Очень простой пример с кольцевыми лампами, который принёс больше денег, чем по-моему в одном агентстве заказывали за несколько сотен тысяч рублей. Собранный на Тильде сайт. Смотрите, кольцевые лампы от 5.900 руб. с новейшими светодиодами и гарантией 5 лет по цене

Speaker A

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

Speaker A

Доставка 1-4 дня. Вот работаем. И очень крутой призыв к действию. Получите промокод на скидку 1.500 руб. на любую сумму до и там плюс 15 дней, например, или там плюс 3 дня и получить промокод по SMS. Очень простой call to action.

Speaker A

Реально вот реально просто получил 1.500 на руб. на телефон. Why not? Why not? Работало очень хорошо. И сразу пример селфи кольцо плюс LED зеркало в подарок.

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

мы постоянно с вами это пересматриваем.

Topics:прототиппервый экранконверсиядизайн сайтаcall to actionюзабилитинасмотренностьвеб-дизайнмаркетингпродажи

Frequently Asked Questions

Зачем нужен прототип при разработке сайта?

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

Какие задачи должен выполнять первый экран сайта?

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

Какие элементы обязательно должны быть на первом экране?

На первом экране должны быть четкий и привлекательный заголовок, заманчивый call to action, элементы, вызывающие доверие, и понятное предложение.

Get More with the Söz AI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries, speaker detection, and unlimited transcriptions.

App Store Google Play

Or transcribe another YouTube video here →