Как разработать лендинг, который будет продавать

Как разработать лендинг, который будет продавать

(00:05) С: Здравствуйте, уважаемые зрители SeoPult.TV и обучающего центра CyberMarketing. Сегодня у нас в гостях Денис Нарижный, и он расскажет о том, как разработать лендинг, который будет продавать Напомню, что Денис Нарижный является автором сервиса AskUsers и директором StudioF1. Не забывайте подписываться на наш канал, ставить лайки, приходить в наш обучающий центр оффлайн. И на этом предлагаю начинать, Денис, тебе слово.

(00:27) Д.Н.: Спасибо за представление. Друзья, всем здравствуйте. Меня зовут Денис Нарижный, как представили. Я занимаюсь интернет-маркетингом с 9-го года, с 5-го года в SEO. И я поработал с разными командами по разработке сайтов, с разными клиентами и вижу одну большую проблему на рынке, которую хотел бы обозначить, и в рамках сегодняшнего доклада рассказать, как мы можем эффективнее делать наши лендинги и добиваться каких-то конверсионных показателей, которые сходу недостижимы или кажутся недостижимыми. Тема сегодняшнего доклада: как разработать лендинг, который будет продавать? Что нам для этого понадобится? В первую очередь, нужно понимать, что без максимально плотного общения с заказчиком, с владельцем бизнеса, для которого вы готовите этот Landing Page, страничку, которая будет представлять его продукт и его услуги, невозможно что-то сделать. Поэтому на всех этапах разработки лендинга, а этапов у нас будет много, нам надо будет взаимодействовать с заказчиком. И чем плотнее вы взаимодействуете с заказчиком, брифуете его, общаетесь, встречаете его, обсуждаете какие-то промежуточные итоги, результаты, тем эффективнее и правильнее у вас все получится. Помимо заказчика, конечно, нужна команда. Не просто какой-то дизайнер или программист, который в паре что-то сделают, потом выкатят, а клиент скажет «опа, это не то, что я хотел». Нам понадобится довольно приличная группа специалистов: аналитики, UX-специалисты, тестировщик, интернет-маркетолог, дизайнер, причем дизайнер даже не обязательно с навыками UX, если предыдущие все этапы работы проведены правильно, верстальщик и программист само собой, вот. И тут начинается очень важный момент, что все эти люди должны работать сообща, вместе и поэтапно. Без поэтапной работы у нас ничего не получится, поэтому отсюда вытекают сроки – это два-три месяца плодотворной такой компактной работы всей этой команды. Я написал 7-9 специалистов на слайде, потому что при клиентском проекте, нам, скорее всего, понадобится еще project менеджер и какой-то аккаунт, который будет взаимодействовать с клиентом, согласовывать все наши полезности.

(03:05) Итак, поехали. 21 пункт подготовки и разработки лендинга. Вот так на слайде можно посмотреть, как я представляю себе работу и вижу ее оптимальной. 21 пункт это практически очко, да, то есть собери очко, чтобы бизнес клиента не был в очке. Первое, что мы будем говорить, первый блок, это подготовка торгового предложения. Многие забывают про это и вообще не уделяют этому моменту должного внимания. Там достаточно большой объем работы и участвуют несколько специалистов. Я по практике люблю привлекать туда еще фокус группы для оценки продуктов. Второй блок, он будет прототипированный то, что на рынке это кто-то это делает, но опять же непонятно, как и на чем это прототипирование основывается, то есть на мнении человека, который занимается прототипированием, то есть на какой-то экспертной оценке, не на подготовленных данных о предложении торговом, а на личном субъективном каком-то опыте. Третий блок будет касаться как раз проработки всевозможных дизайнов, макетов, верстки, и все это будет делаться на тестовом домене. Расскажу, какие там есть нюансы, подводные камни, какие приемы можно использовать. Потом пробежимся наверно, галопом по разработке сайтов, потому что это в принципе все делают и при первых трех пунктах хорошо проработанных, с четверым проблем у вас никогда не возникнет. Ну и последнее, что хотел бы сюда добавить, в эту работу, это уже в 21 пункт не входит, это обязательное тестирование того, что вы получили. Тоже там будут все возможные приемы.

(04:48) Поехали, начнем с первого блока – это разработка торгового предложения. Что нам надо сделать, когда мы начинаем работать с клиентом, с продуктом, пытаться сделать какой-то красивый Landing Page, который в итоге у вас будет продавать, а не просто люди будут заходить и закрывать его. Для начала я предлагаю совсем простой вариант – это анализ ниши, который проводится на, с помощью, допустим, одного аналитика. Который просто изучает продукт, смотрит по тематическим идеям. Это продукт обсуждается, какие идеи возникают, читает форумы, блоки, где речь идет о том продукте, который мы хотим продать, о нашем лендинге. Вот для примера я засунул небольшую выдержку из какого-то паблика «Вконтакте», где люди обсуждают рыбалку. И вот у человека возникают какие-то потребности, мы должны их понимать, записывать и в рамках нашего Landing Page давать ответы на эти вопросы. Потому что вы, когда приходите в оффлайн-магазин, вас же не интересует там, сколько лет этот магазин стоит здесь, да, какой квалификации сотрудник, какие награды выиграл этот магазин, а многие начинают именно с этого. Нам надо раскрыть в первую очередь торговое предложение, поэтому изучение продукта – это основа основ и этим надо заниматься. Потратьте хоть чуть-чуть времени, не надо какого-то там супер-пупер досконального анализа. Если у вас один человек посидит и два три дня попытается почитать тематические паблики, где обсуждается, проникнуться идеями людей, которые составляют комьюнити этих пабликов, посмотреть на этих людей, кто они, попытаться их как-то разделить на группы, то есть такую предварительную сегментацию сделать - это будет уже достаточно. На это потратите вы не больше, чем пару дней. Вот пример, что я здесь вставил, человек, покупая какую-то удочку, интересуется вопросом, могу ли я использовать ее как спиннинг, да или нет? Если мы рамках нашего лендинга расскажем, что ты можешь использовать и так, и так, и с фидлером, и с наживкой какой-то, то вопрос будет решен. И мы сразу ответим на такую проблему, на боль клиента, которая существует. И таких болей мы на этих пабликах можем найти достаточно большое количество.

(07:17) Второе, что в любом случае необходимо делать – это анализ конкурентов. Если у вас, у вашего торгового предложения есть конкуренты, то есть сайты, которые уже что-то предлагают, работают в интернете, продают, то нам надо ознакомится с ними, как минимум, посмотреть их на предмет пунктов, которые я выписал. Какое у них ценовое предложение, что, какие услуги у них предлагаются, есть ли у них акции, скидки, отзывы, формы оплаты, зоны доставок, гарантии и так далее, мы должны понимать, что предлагают конкуренты на рынке, тогда мы сможем сформировать свое торговое предложение, которое будет превосходить наших конкурентов. Тут тоже ничего сложного. Грубо говоря, мы садимся и по этому чек-листу, по какому-то более расширенному пробегаемся по конкурентам, какие у них есть классные решения, где у них что-то нравится, мы себе помечаем обязательно. Тоже работа не сильно какая-то супер-пупер умная, достаточно пару дней, чтобы человек познакомился с конкурентами.

(08:25) На базе вот этих пунктов у нас уже можно сделать какие-то прикидки по сегментации наших пользователей. Но здесь уже нужно привлекать клиента, и спрашивать, насколько мы правильно видим себе сегментацию его пользователя. Потому что он может расставить даже среди тех сегментов, которые мы определили с помощью первых двух пунктов, он может взять себе и указать, что мне приоритетнее третий сегмент, где рыбаки профессионалы, например, да, с этого примера отталкиваемся. Они закупаются чаще, потому что они ездят на рыбалку чаще, они ездят в сезон, есть те, кто только на зимнюю ходит, есть те, кто только на летнюю. И он может поставить дополнительный приоритет на каком-то сегменте. Мы тогда при следующих этапах, там скоринге ихних потребностей, наших целевых пользователей, будем это учитывать и добавлять какие-то коэффициенты, чтобы ихние потребности стояли во главе нашего лендинга. Надеюсь, тут несложно.

(09:27) Что такое скоринг пользовательских потребностей? Мы, как правило, проводим его следующим образом: собираем под все эти сегменты целевых пользователей, которые мы определили, согласовали с клиентом, расписали подробно, оценили средние чеки их, то есть сделали такую глубокую сегментацию. Мы переходим к пользователям, то есть хорошо, что мы считаем, хорошо, что клиент считает. Но так в 90% случаев сайты у нас на рынке и делаются. А что считают пользователи мы не задумываемся, и не пытаемся даже этот вопрос как-то заложить в разработку сайтов. Поэтому предлагаю следующий вариант: собрать небольшую фокус-группу: человек 10-15, под каждый сегмент 3-5 человек, и попросить их выписать основные критерии выбора вашего продукта. То есть когда они будут выбирать ваш продукт, ну например ту же саму удочку, на чем их решение будет основываться, какие критерии выбора у них существуют, у каждого из сегментов. Можно их поделить на группы, можно согнать в кучу. Но в любом случае, эта оценка, она покажет вам распределение тех моментов, которые должны быть на блоке с какими-то баллами. То есть табличка, которая приведена на слайде, здесь всего лишь выписаны по пять пунктов от каждого из респондентов и проставлены баллы ими. Взяв среднее арифметическое или сумму этих баллов, мы спокойно можем отранжировать и на нашем Landing Page выстроить порядок раскрытия этих блоков. Исходя из этой таблицы видно, что цена волнует всех и ценник надо давать в первом экране в любом случае. Дальше исходя из тех приоритетов, которые волновали наших пользователей, мы можем расставлять экраны и располагать информацию на них уже в соответствии с данным распределением.

(11:22) Поехали дальше. Подготовка торгового предложения получается у нас всего лишь 4 пункта, это не так сложно, не так долго. На все это дело может уйти не больше, чем там 10, ну то есть 10 рабочих дней, я имею в виду, 2 календарные недели, и понадобится нам 2 специалиста и какая-то фокус-группа. Казалось бы, ничего сложного, но никто не делает. Проделав эту работу, мы уберем кучу головных болей потом. Нам не придется переделывать все сначала, клиент уже на этом этапе вовлечен практически во все процессы, и у нас с ним выстраиваются отношения, при которых он понимает, что за продукт мы готовим и понимает, нам не придется в конце краснеть за то, что мы нарисовали, а ему не нравится. Мы работаем сообща. Итак, первый блок понятен. Дальше, мы переходим естественно к тому моменту, что у нас есть какие-то данные, нам с ними надо что-то делать. В любом случае их надо как-то расположить на нашей странице и сгруппировать тот пул объектов, который мы с вами насобирали. Что с этим делать? В качестве, наверно, самого простого решения я предлагаю использовать для проектирования каждого из экранов простую диаграмму, диаграмму Гутенберга. Вот она представлена в левой части слайда. Смысл диаграммы довольно-таки прост. Все пользователи по крайне мере, у нас не арабская страна, они начинают взаимодействие с нашим сайтом с левого верхнего экрана, левый верхний угол, да. Эта область имеет довольно высокий потенциал и все туда посмотрят. Поэтому там нам надо раскрыть информацию, о чем наш сайт, чтобы пользователь, попадающий к нам на сайт, на наш Landing Page, они знали, что опа, я попал действительно на сайт с рыбалкой, а не какой-то сайт, который там просто форум или не знаю, сайт вообще каких-то других услуг. Написав там заголовок, в той области, мы решаем эту проблему на 100%, то есть люди понимаю да продажа удочек оптом и в розницу, например.

(13:35) Понеслась. Второй блок, вторая зона она имеет меньший потенциал, но пользователь так или иначе туда глазами смотрит, то есть он пробегается там глазами, и мы там можем расположить какой-то зрительный образ либо раскрыть наше торговое предложение чуть поподробнее. То есть я тут не имею в виду даже какую-то шапку, навигацию, да, мы там можем воткнуть и контакты, чтобы пользователям было привычно. Исходя из пользовательского опыта, они могли найти ваш телефон в верхнем правом углу. Ну, можно расположить какие-то особые особенности вашего торгового предложения: что у нас там доставка по все Москве, что еще там может быть, цена указана с НДС, какие-то такие вещи, которые пользователя в первую очередь волнуют. Когда он пришел, например, в офлайн магазин, он увидит, ну могу я сейчас купить, когда мне привезут, а сколько доставка стоит. Какие-то такие вещи по коммерческим факторам именно сюда будут попадать.

(14:47) Зона три, она имеет самый минимальный, наверно, с точки зрения потенциала какой-то вес, по причине того, что пользователи предпочитают смотреть сайты по диагонали, то есть экономить свое время. Вот тот паттерн, который был F, он больше присущ каким-то хардкорным старым сайтам, когда пользователи смотрели, и мы на тепловых картах видели вот эту буковку F у всех, если круто спроектирован был сайт. Сейчас это все отходит и пользователи, существует там технология чтения книжек по диагонали, пользователи стараются смотреть как можно быстрее и понимать, есть ли тут информация, которая нужна, и двигаться дальше. Поэтому в зону 4, естественно надо ставить какой-то call to action, целевое действие, которое вы хотите от наших пользователей. Даже если в этот момент он еще не готов заказывать у вас, у него появляется понимание, что да, действительно удочки оптом, удочки в розницу, я действительно могу заказать, купить прям сейчас. То есть мы должны дать понимание, чтобы пользователь успокоился и дальше знакомился с нашим торговым предложением, получал ответы на те вопросы, которые его уже волнуют в других экранах. Но при этом, он мысленно уже понимает, что да, действительно, я здесь могу решить свою задачу, купить. То есть я попал, экран 1 – туда, куда надо, заголовок. Экран 4 – могу купить. Что вы расположите во втором и третьем – это не столь важно, в сравнении с первым и четвертым. Вот пример Тинькова, я воткнул сюда, как экрана, разработанного как раз по данной диаграмме. И вы видите, что в третьем экране просто зрительный образ, он с точки зрения контраста отвлекает на себя чуть-чуть внимание, но нам, мы туда, посмотрев один раз, понимаем, что там просто карточка и не тратим много времени на то, чтобы что-то там изучать. Целевое действие стоит как раз в 4 квадрате. По такому принципу нам стоит проектировать все экраны нашего сайта, то есть мы выписали с вами какой-то пул важных моментов для наших пользователей и начали проектировать вот в каждый экран, в каждом экране раскрывая, исходя из нашего скоринга какие-то вещи.

(16:51) Где это все делать? Первоначально версия прототипа всегда в моем понимании, всегда должна быть сделана на коленке, то есть, потому что ее нужно будет переделывать по практике там 3-5 раз, согласовывать с клиентом, обсуждать какие-то моменты, тестировать. Поэтому оптимальное, наверно, решение для проработки подобных вещей – это программы типа Mockups. Но Mockups мы используем последнее время, до этого были какие-то у дизайнеров продукты, он просто очень прост. И, например, наш техдир, он научил всю команду пользоваться, то есть сейчас там 3-4 команды, с которыми мы работаем, которые в офисе, которые не в офисе у нас, которые выделены под свои проекты, клиентские проекты. Каждый из сотрудников умеет работать в Mockups, то есть такой очень простой и универсальный продукт, который, наверно, является решением подготовки прототипа. Если вы откроете эту программку, то наверно, за 15 минут разберетесь, как там что делается.

(18:04) Что дальше? Мы нарисовали какой-то черно-белый сайт, он кликается, каждая кнопочка у нас подписана, каждый элемент у нас с точки зрения контрастов, расположений, имеет какие-то приписки, аргументацию. То есть такой черно-белый сайт, страничка уже полностью функционирующая. На ней работают какие-то якоря, ссылки из навигации. То есть мы сделали тут навигацию сверху обязательно по всем блокам, чтобы пользователям не только по сценарию нашего было идти, а перескакивать какие-то пункты, решения которых, ну вопросы, которые его не волнуют, да, в нашем лендинге. Все это хорошо бы взять и вот в таком черно-белом формате отдать тестировщику, чтобы человек, который не участвует в проекте, не погружался в него глубоко, залез и свежим взглядом просто посмотрел. Там есть у кого-то, называется это принцип блондинки, тестирование какое-то такое, но просто человек со стороны. Любой из команды, кто не участвует, из другой команды садится и буквально час-полтора щелкает, куда только может, на лендинге места, куда щелкать не так много, пытается понять, о чем сайт, насколько торговое предложение раскрыто и уже на этом этапе находится и правится какая-то часть, довольно приличная часть недоработок, появляются какие-то новые идеи. И наш черно-белый лендинг становится таким проработанным довольно предложением. Обязательно смотрит клиент на то, что получается. Обязательно вся команда прислушивается к мнению тестировщика.

(19:38) Там бывает, возникают какие-то супер-баталии, споры, перестановка каких-то блоков местами и так далее. Но все это такой рабочий процесс и в принципе, на все это время, времени уходит не так много. То есть, человек, UX специалист, который делает подобные прототипы, буквально в два-три дня Landing Page вам точно нарисует. Остальное время уйдет на как раз выбор, наверно, да, очень важный момент, выбор мест для call to action, то есть если у нас лендинг получается длинный, то в любом случае, мы сказали, что у нас в первом экране должен быть call to action должен быть, чтобы наши пользователи, которые, call to action я называю кнопку, которая будет отправлять заявку вам, совершать целевое действие, то, ради чего вы в принципе формируете этот Landing Page и хотите продать. У нас дальше есть какие-то другие экраны, и пихать в каждый экран, мы можем просто запутать, ну надавить на наших пользователей, и это будет неприятно. То есть он решает какие-то свои вопросы текущие, он уже имеет понимание, что этот сайт продает, я могу купить, я это видел в первом экране, в самой видной зоне мне это предоставили, я видел кнопку. Дальше навязывать и в каждом экране сувать, дублировать эту кнопку, наверно, смысла нет. Если лендинг не сильно длинный, экранов до 4-5, то вполне достаточно продублировать тот же самый call to action в виде кнопки в последнем экране, когда пользователь прочитал весь лендинг, посмотрел все волнующие его вопросы, получил на них ответы, ознакомился с вашим торговым предложением, у него возникает как раз потребность заказать. Если она возникнет раньше, он может воспользоваться той же якорной навигацией и перейти там в первый и последний экран, вы можете это заложить это в навигацию, которая вместе с движением мышки вашего пользователя двигается одновременно, либо там та же самая кнопочка «вернуться наверх», тоже вариант. Если экранов больше, чем 4-5, то есть смысл, наверно, где-то в середине дублировать этот call to action. Бывают разные варианты, надо тестировать, надо отталкиваться от самого предложения, насколько мы можем этот call to action с разных сторон преподнести, с разным форматом. То есть мы можем разочек сказать, вот бесплатная консультация, второй раз назвать ту же самую кнопку отправки телефона как-то по-другому, там не консультация, например, как раз напрямую заказ, но все это вполне варианты рабочие и бывает, что на некоторых сайтах одно и то же целевое действие оформляется там в 3-4-5 разных видов.

(22:25) Итак, поехали. Второй блок мы с вами проговорили, то есть у нас появился черно-белый сайт, который раскрывает наше торговое предложение, он уже нравится и заказчику, и вся команда над ним поработала, мы представляем, что он должен быть рабочим вариантом, поскольку тестировщик на нем не испытывает проблем, все работает. Переходим к другим важным вещам – это дизайн, верстка. С чего начинается работа над дизайном? Вот тут многие отдают все на откуп дизайнеру, то есть говорят, он профессионал. Хорошо, если вы еще забрифовали клиента, дали ему какой-то бриф для заполнения, он указал там сайты, которые мне нравятся, которые не нравятся, может быть даже какие-то пункты про шрифты у вас были, еще что-то в этом брифе, но этого, как правило, недостаточно. Есть очень интересная методология подготовки мудборда вместе с клиентом, то есть мы накидываем каких-то картинок, клиент накидывает со своей стороны картинок, мы вместе садимся с клиентом, либо в оффлайн, либо в онлайн. Все это выкладываем на одну, на один экран, так назовем, и пытаемся понять, насколько наши взгляды, отталкиваясь от того анализа, который был проведен перед этим, совпадают со взглядами клиентов, владельцев бизнеса. Какие-то вещи, тут такая дискуссия жаркая возникает, как правило. Но после этого, клиент полностью, как правило, на 100% доверяет вам свой дизайн, и вы понимаете, что клиент действительно хочет, что нужно. Какие задачи он пытается решить с помощью этого лендинга, то есть на предыдущих этапах мы только делали подготовку к тому, чтобы проработать профиль заказчика, профиль владельца сайта, профиль его задач, даже вот так правильнее назовем. То есть список задач, который должен решаться на этом лендинге, с их приоритетами, потому что нее все задачи для заказчика равнозначны бывают. Проработав вот такой мудборд вместе с заказчиком, мы можем отдавать все это на откуп дизайнера, который в курсе вот этого процесса. Он должен будет отталкиваясь от всех этих работ подобрать какие –то цвета, сразу говорю, что лучше заложить больше цветов, то есть, есть стандартные методы там схожих цветов, по подбору по палитре. Есть методы триат, квадратов, то есть если вы делаете 2-3 цвета, как правило, вам их, этого мало, и 4 бывает мало, и 5 бывает мало, лучше на этом этапе подготовить палитру из цветов 8, например. Проработать логотипы какие-то, согласовать их с клиентом, то, что обычно делается и нарисовать пару баннеров, для того, чтобы проработка фирменного стиля была полной, полноразмерной. Для чего это на лендинге, спросите вы? Для того чтобы, основываясь на этом, мы будем представлять наш продукт и какие-то элементы тех же самых баннеров мы будем, можем использовать на самом лендинге, плюс давать в виде какой-то рекламы, для того, чтобы привлекать какой-то трафик на этот лендинг.

(25:43) Как только мы получаем понимание по дизайну, какие-то первые прикидки, нам обязательно нужно прорисовать все элементы нашего сайта, которые у нас в черно-белом исполнении уже имеются в нашем супер-пупер прототипе. То есть мы каждую кнопочку во всех состояниях рисуем, каждый чек-блок, каждую чек-табличку, картиночки какие-то, все это подбираем, исходя из тех цветов. Которые мы уже с вами в палитру взяли, исходя из фирменного стиля, логотипа и нашего брендбука. Все это делается вот в таком виде, и дальше отдается дизайнеру на проработку, то есть дизайнер уже может с этим работать. У него есть понимание, какой должен быть дизайн, у него есть подготовленные все элементы, у него есть какие-то элементы из брендбука, который мы готовили для баннеров. Ему остается на черно-белый прототип все это дело натянуть с какими-то общими правилами UX. Много правил как бы за час я вам рассказать не успею, но вот какие-то основные вещи, как это правильно сделать, спроектировать, проверить потом себя, насколько это круто все получилось, попробую. Вот один из таких простых принципов – это принцип зебры, то есть вам надо постараться добиться, чтобы элементы, которые располагаются выше, ниже друг друга относительно, они были разными по контрасту, то есть одни являлись фигурами, а другие являлись элементами рамочными, как же правильно их назвать. Вылетело слово, не суть. Смотрите на примере. В первом блоке шапочка идет «Яндекса», я специально взял «Яндекс», они тоже любят применять этот принцип зебры, по крайней мере, они точно его знают и отталкиваются при проектировании своих каких-то продуктов. В первом экране идет светлая зона, да, и все элементы, которые там расположены, они являются такими неяркими объектам, и к ним внимание привлекается меньше. Второй, вторая группа объектов она более яркая и она состоит из фигур, тут прямоугольники квадратные заметны. После этого мы не можем поставить туда, взять, например, еще кнопочки полноцветные, полноразмерные. Поэтому в данном примере ставятся ссылки, которые могли бы быть теоретически кнопками, они делаются в виде линков, даже не подчеркнутых. Если надо выделить какую-то группу объектов, видите там, в правом нижнем углу над рекламным блоком там еще есть группа ссылок. Она выделяется чуть-чуть по-другому, она берется в рамочки, то есть принцип зебры здесь на 100% соблюдается. И ниже идут какие-то более контрастные, уже с логотипами, то есть каналы, которые там идут, Первый, Россия, еще какой-то, они уже имеют яркие логотипы, они уже привлекают внимание на себя по-другому. Отделено горизонтальной чертой, которая делит зоны на отдельные части.

(28:45) Как это все проверить. Вот вы нарисовали что-то, получили, вроде круто, ну как бы дизайнер даже может быть постарался. Вам надо взять и понять, в принципе, куда будут смотреть ваши пользователи, то есть мы еще не запускали в продакшн наш сайт, мы еще не наливали на него трафика, не делали никакую рекламную кампанию ему. Но нам уже на этом этапе надо понимать, куда пользователи будут смотреть, видеть те моменты, которые мы хотим до них донести и смотреть на те зоны, куда мы их с вами хотим, как разработчики этого сайта. Есть очень простой принцип, называется размыливание. Берете ваш шаблон в фотошопе, размыливаете по Гауссу на 10 пикселей и смотрите, какие зоны у вас самые яркие. Вот для примера я взял, размылил Aviasales. Здесь те зоны, с которыми пользователю необходимо работать. Они сразу выделяются за счет контраста цвета, да, то есть на голубой подложке белые пятна они сразу заметны. 1-я зона она переключает табы между выбором каким-то. 2-я зона она более активная, в ней пользователь что-то вводит, поэтому она по размеру, за счет контраста размера она больше, чем первая. То есть первая – я пробежался глазами, посмотрел на второй, где я должен сконцентрироваться и работать с ней. И третья, самое важное, целевое действие, оно выделено другим цветом, по контрасту опять же выделяется. Вот по такому принципу вы можете проверять все, что у вас нарисовано, то есть, получив какой-то дизайн, можно просто его размылить и посмотреть, куда же будут смотреть пользователи, все это несложно.

(30:19) Дальше возникает потребность все это красиво заверстать. Тут я долго рассказывать не буду. Люди, которые работают с версткой, они понимают, что есть там всевозможные сетки, варианты автоматизации. Единственное, на чем хочу сделать акцент: при проработке всего вот этого, не надо забывать про мобайл, то есть любой нормальный современный лендинг, он должен быть адаптивен и корректно открываться на всех устройствах. Поэтому если делаются сетки, надо сразу рисовать этот дизайн на предыдущем шаге с учетом всех объектов в мобайл версии. Итак, попробую подытожить весь этот блок. Когда мы с вами проработали торговое предложение, хороший прототип, перешли к дизайну, нарисовали мудборд, пообщались с клиентом, поняли, что мы идем в одном направлении, сделали брендинг, фирменный стиль, все-все нравится, подготовили UI-кит, может отдавать все это дизайнеру, который по сетке рисует веб, мобайл, используя диаграмму Гутенберга, принципы зебры, все это тестируется простым размыливанием и натягивается на верстку. В принципе, я указал 15 дней на вот это весь процесс. И участвуют в нем 4 сотрудника. Не всегда так гладко все идет и 15 дней, это наверно, ближе к идеальной картине, то есть три недели такой вот плотной работы этих людей.

(31:50) Следующая часть – это разработка, то, наверно, к чему вопросов у всех обычно не возникает. То есть мы отдали, как вообще сайты делаются? Пришел клиент какой-то, ТЗ составили, может бриф заполнил, отдал ТЗ и все. Программисты с дизайнерами там все колдуют, на выходе какой-то продукт отдают. И даже если этот продукт устраивает клиента, владельца сайта, владельца бизнеса, ему все нравится, то не факт, что дальше он как-то выстрелит. Поэтому часть с разработкой я подробно рассказывать не буду, смысла в этом никакого нету. Вы отдайте всю эту часть, проработанную любому программисту более менее приличного уровня, и он справится с задачей, натянет эту верстку, она у него не будет ехать, как вот здесь я показал. Но самое главное, да, разработчики, в чем разница, почему не столько внимания я уделяю, потому что в принципе, разработчик на нашем рынке в отличии от дизайнеров, в отличии от маркетологов, они привыкли тестировать свои решения, то есть любой разработчик, запилив какую-то форму обратной связи он сразу будет ее тестировать, отправляется она, да или нет, потому что в противном случае заказчик даст по балде. Это он точно проверит, что ему не приходит сообщение, кнопки не работают, что-то не работает с точки зрения функционала. Точно также по верстке. Если она едет, то в большинстве случаев верстальщики привыкли все это дело за собой перепроверять. Все, что касается работ по дизайну, все обычно отдается на откуп каким-то специалистам и полностью делегируется и доверяется им, как гуру в этом вопросе.

(33:34) Как только мы все это заверстали, засунули на наш сайт, разработчики все сделали, приходит еще один важный момент, когда мы можем наш Landing Page сделать для наших пользователей удобным, понятнее и более продающим. Что имею в виду? То есть сделать там все модуля, можно сделать еще и анимацию. Анимация на каких-то объектах не имеет смысла без понимания, что эти объекты действительно нашим пользователям нужны. То есть когда мы с вами говорили про черно-белый прототип, который рисовался, я говорил, что каждый элемент подписывается. Вот они подписываются на предмет того, насколько это важный вообще объект для пользователей, какой он должен с точки зрения контраста занимать место в данной картине. И вот на эти самые важные целевые действия, на раскрытие этой тематики, мы можем с вами использовать анимацию, как контраст движения. Один из самых сильных контрастов, который в принципе существует в вебе. Вот здесь в качестве примера я привел опять «Тинькофф», просто попался он, второй слайд от него. Здесь продукт заключается в том, что получив карту, они играют на пользовательских потребностях, таких как штрафов, оплата каких-то коммунальных услуг, телефонов, еще чего-то. Все это делается легко и на автомате. И для того, чтобы каждый из пользователей увидел что-то свое знакомое, эти элементы не статичные, они появляются там хаотично в течение нескольких секунд плавненько выезжают, красиво. И пользователь обращает туда внимание. Они с точки зрения контраста, самые яркие на это экране получаются, а с другой стороны, они еще появились с интерактивом. Поэтому пользователь обратит внимание на них всех по очереди, они, у него разбегутся глаза, потому что их много. Они появляются там поэтапно как-то. Если залезть на сайт «Тинькоффа», поймете, о чем я. И тем самым, мы пробегаемся глазами и понимаем, какие задачи мы можем решать с помощью этой карты. Вот похожие штуки можно делать на лендингах, закладывать на этапе все-таки чуть-чуть раньше, чем здесь я начал говорить. То есть кнопочки мы можем в любой момент сделать активными, если понимаем, что внимания на них недостаточно. При скроллинге экрана у вас есть целевое действие, появляется, вы можете взять и сделать ее активной, чтобы она мигнула, появилась эта кнопочка в момент скрола. Либо если пользователь завис на страничке, долго что-то изучает ваше торговое предложение, что-то читает, знакомится, смотрит инфографики ваши, вы может ему там, через 20-30 секунд взять и моргнуть, незаметно, несильно раздражая нашего пользователя. Проявить какую-то активность в этом элементе.

(36:35) Что опять? Опять надо тестировать, то есть, как бы круто мы все не сделали, наш тестировщик после того, как все это из черно-белого варианта перешло в цветной, может растеряться, потому что элементы стали контрастными, они немножко там разъехались по сетке, чуть-чуть группы объектов как-то отделяться стали. Что-то начало работать на полную катушку, что до этого не работало, анимация появилась. И нам надо понять, не утратил ли наш Landing Page смысловой нагрузки и понимания с точки зрения обычного пользователя. Поэтому опять надо сажать человека, который не участвовал в разработке и показывать ему, чтобы он попробовал просто ознакомиться с вашим торговым предложением и на выходе сказать вам, что все понятно, все удобно, где были какие-то сложности. Здесь, как правило, такие сложности бывают по минимуму, потому что мы в прототипировании уже с вами прописали, что все элементы на своих местах, все элементы разбиты по яркости, и расставили приоритеты, что они должны быть ярче, тусклее, располагаться в этом экране, в другом экране. Поэтому тут бывают какие-то моменты, которые отдаляют наш час Х, когда мы готовы сказать, что Landing Page готов, но не так часто, как на предыдущих тестированиях.

(38:02) И вот он наступает, этот день Х, мы уже говорим, что все, наш сайт готов, мы протестировали, можем переходить, можем переносить его на боевой домен. Обязательно, да, не сказал, что вот такой момент важный: все это проводилось на тестовом домене, который был закрыт от индекса, разработчики поймут, о чем я. И тут мы выкатили это все, что делать дальше? То есть мы прошли с вами огромных 18 пунктов, поговорили про то, как готовить торговое предложение, подготовили его вместе с клиентом, с командой, отталкиваясь от анализа ниши, конкурентов. Посмотрели, как делается прототипирование, с помощью программы все это черно-белый какой-то вариант воссоздали, протестировали его, поняли, насколько он удобен нашим пользователям, натянули, нарисовали дизайн, подготовили мудборд, согласовали с клиентом, прошли огромное количество пунктов, наконец-то запрограммировали. И блок разработки, как видите, он в принципе, не так много специалистов требует. Он требует лишь программиста и UX специалиста, который бы контролировал. Вообще вся команда, которая участвует в процессах, она должна, если вот участвует в этом процессе, то, по крайней мере, быть всегда рядом, и к ним обращаются за какими-то моментами. Могут вернуться к предыдущему шагу, спросить как там что, почему так. Все должны понимать, все должны быть единой командой при разработке подобных продуктов. Натягивание из практики занимает на любую там CMS-ку не сильно много времени, там 5 рабочих дней, за неделю наш программист справится, даже если он не работает в Google.

(39:52) Тестирование на боевом домене. В любом случае, как только мы выкатили все сразу идут в бой и начинают тестировать. Клиент, все помощники клиента, его менеджеры, дома он показывает жене, какой у него продукт красивый получился. Вся команда, которая участвовала в разработке, тоже после выкатки приступает к дополнительному тестированию функционала. Все смотрят после переноса, а не перестало ли у нас что-то работать, то есть насколько корректно мы там перенесли, сервера там, обновили DNS и так далее. Все произошло, заявки отправляются, мы все счастливы, если что-то по ходу вдруг всплыло, быстро, оперативно поправили, и вот у нас сайт висит. Дальше на него начинают наливать какой-то трафик. И только тогда вот мы начинаем понимать, насколько мы сделали с вами классный продукт, как пошел трафик. И все наши предположения, что пользователи должны смотреть сюда, потому переводить взгляд сюда, потом видеть целевое действие, которое здесь в примере даже кнопочка не видна, потому что ее закликали. Вот она появилась та же самая буковка F по паттерну пользовательскому, как он читает это все. То есть мы разработали с вами крутой интерфейс и пользователи двигаются как нам надо. Мы посмотрели на это все, если нет, надо будет делать какие-то выводы. Но без вот этой оценки на реальных пользователях, все предыдущие работы, они хороши, они нужны, они приносят очень много пользы и сразу добавляют вам плюс 10 очков в сравнении с конкурентами, как только вы встаете бодаться с ними в «Директе» или в AdWords. Но без понимания того, что у вас все получилось, работа не должна заканчиваться, команда не должна уходить. Вообще, в принципе, правильные проекты они не заканчиваются никогда, то есть мы должны постоянно следить за этими данным, следить за рынком, анализировать нишу, какие-то новые фишки добавлять туда. Исходя из тех данных, которые мы получаем входе исследований дальше. Проанализировав тепловые карты, у нас будет какое-то понимание, но и этого не всегда достаточно. То есть карты картами, но на картах не все так красиво, как на предыдущей картинке.

(42:10) Хорошо бы теперь, понимая нашу целевую аудиторию уже более детально, потому что мы уже нагнали трафика, мы поняли, как они себя ведут. Посмотрели, куда они нажимают, замерили какие-то конверсии, понимаем, что конверсии у нас там хорошо и их можно улучшать. Поэтому последним этапом разработки сайта я считаю все-таки какое-то тестирование на реальных пользователях. То есть мы должны собрать людей и этим людям воссоздать сценарий с помощью вопросов, и посмотреть, как они себя будут вести. Попросить их что-то у нас заказать, выписать критерии этих продуктов, то есть то, что мы с вами делали на этапе еще подготовки и скоринга. Можно сейчас наших пользователей этим вопросом озадачить, сказать ребята, выберите, выпишите 5 критериев покупки вот этого товара. Они их выписывают, а дальше, отталкиваясь от критериев, пытаются решить свою задачу как реальные пользователи на нашем лендинге. Что-то они находят, что-то не находят. У нас могут появляться новые гипотезы, новые идеи о том, как мы сможем наш, ваш сайт еще улучшить. Подобные штуки мы на своих, по крайней мере, проектах проводим не реже, чем раз в квартал. Где-то может быть, чуть-чуть бывает реже, там 3-4 тестирования в год – это нормально. Рынок развивается, сайты растут, конкуренты тоже не стоят на месте и все двигаются куда-то вперед. Поэтому это важный этап разработки любого сайта. После такого тестирования, как правило, всплывают какие-то дополнительные вещи, мы можем опять увеличить нашу конверсию.

(43:51) Подведя итог, что делать после того, как мы сайт выкатили, всего лишь три пункта, я по времени их не обозначаю, потому что это процесс может быть такой длинный и не всегда конечный. Это нам надо тестировать функционал разовый, наверно все-таки вещь такая, как мы выкатили в тот же день. Нам надо регулярно следить, снимать статистику, следить за аналитикой, смотреть тепловые карты, смотреть карты кликов и проводить тестирование на реальных пользователях, для того чтобы понимать какие вещи им неудобны, непонятны и что мы еще можем сделать, или что еще за последнее время у конкурентов появилось более крутого, чем у нас. Основной месседж, да, всего вот этого сегодняшнего мероприятия, то есть пункты для многих кого-то покажутся знакомыми, какие-то приемы я рассказывал очень простые, не все, какие мы используем, но вот из того пула, 21 пункта, который делается, я больше, чем уверен, что 90% команд на рынке они не делают как минимум все эти пункты. Поэтому, если вы хотите получить изначально продукт, который будет превосходить конкурентов, который будет удобен вашим пользователям, а не то, что получается на картинке, я не настаиваю на этих 21 пунктах, но крайне рекомендую посмотреть на те моменты, которые вы еще не делаете при разработке. Либо вы как заказчик не видите этих пунктов в списке работ подрядчика. Надо над этим думать, надо тестировать, каждый этап можно перепроверять, нужно согласовывать и смотреть на него с разных точек зрения: с точки зрения бизнеса, с точки зрения наших посетителей, для кого мы этот продукт делаем и кому мы хотим этот продукт продать. У меня наверно все, не знаю, сколько я в тайминг уложился. Прогнал не прогнал, по времени имеется в виду. В качестве дополнения к сегодняшнему вебинару хотел бы обратить ваше внимание, что многие из этих приемов, которые я сегодня описал, рассказал, вот так вот пробежался по некоторым, они более подробно и детально расписаны у нас на блоге, это ссылочка номер 2. Какие-то презентации, раскрывающие тему более подробно, вы можете найти слайдшаре, также в каких-то других видеозаписях на SeoPult.TV. У меня все.

(46:30) C: Да, Денис, ну по времени ты, конечно, разгулялся немного, но немножечко на вопросы у нас еще осталось. Давай начнем с первого от Лилии: какова оптимальная длина страницы и как распределится релевантность областей на ней?

Д.Н.: Оптимальная длина страницы зависит от оптимальной проработки торгового предложения. Если торговое предложение предлагает, ну то есть если продукт посложнее, он не настолько понятен пользователям, у нас, у наших пользователей небогатый опыт взаимодействия с этим продуктом, ну вот более менее понятная вещь, с которой все взаимодействуют. А какая-то услуга там по аренде крана, например, она мало кому знакома, и какой-то сегмент пользователей, которые регулярно пользуются, они попадают в целевую аудиторию, для них может быть что-то можно раскрыть совсем немного и тоже короткий Landing Page получится. А если мы учитываем, что у нас в сегменты туда попадают пользователи, которые имеют небогатый опыт, то там это торговое предложение надо раскрывать подробно, описывать все нюансы, как эта техника сдается. Поэтому вот тот скоринг, который мы делали в первом блоке на этапе после анализа ниши и анализа конкурентов, спрашивая просто простых пользователей, как бы они выбирали этот товар, и считая пересечение суммы баллов, мы от него отталкиваемся в понимании того, какое количество экранов у нас должно получится. Если у нас получилось много экранов, ну если мы понимаем, продукт сложный, то Landing Page получится длинный. Если экранов не так, ну потребности у пользователей не так много вопросов, на которые нам надо отвечать, то может быть небольшим, там 3-4 экрана бывает. Я считаю, это небольшой лендинг.

(48:16) С: И следующий вопрос также от Лилии: а бывает такое, что лендинги, какими хорошими бы они ни были, все равно не работают по сравнению с полноценным информативным сайтом, например, при выборе онлайн-школы курсов?

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

(49:17) С: И у нас также сразу два вопроса, но уже от Татьяны: А почему тестовый домен надо закрывать от индекса и где найти UX специалиста?

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

С: Ну и где найти UX специалиста?

Д.Н.: Где найти UX специалиста? UX специалиста можно найти в штат, то есть речь идет для своей команды найти в штат? Я не понимаю просто вопрос, можно и так, и так понять. С одной стороны, UX специалист должен быть в команде, куда вы обращаетесь за разработкой сайта, если вы представляете заказчика. Если его там нету, то наверно, у вас не получится настолько круто проработать это все, потому что первый блок, он делается аналитиком и UX специалистом, во втором блоке опять. То есть если перемотать всю вот эту цепочку, то практически в каждом этапе он участвует. И если в команду, которую вы доверили разработку вашего лендинга, Landing Page, нету UX специалиста, или хотя дизайнер не является UX дизайнером, то наверно, это не тот вариант, когда вы сходу сделаете крутой продающий сайт. Да, вы можете его потом переделать несколько раз и получить хороший результат без UX специалиста. Но опять же это все будет через боль, трату денег и трату лишнего времени. Поэтому искать UX специалиста себе в штат, если вы агентство, наверно, есть смысл. Если вы выбираете подрядчика, то выбирайте подрядчика уже в команду которого он входит, так.

(51:36) С: На какой CMS порекомендуешь делать лендинг? Или, может быть проще на голом HTML?

Д.Н.: Можно прям на голом HTML, в этом проблемы не вижу, то есть если лендинг, ну он еще грузиться будет быстро на HTML. На CMSках просто проще потому будет дальше с ним работать, автоматизировать какие-то штуки. Бывает, что на лендингах в анимацию засовываются вещи, которые нужно регулярно править, бывают какие-то карты, на базе «Яндекс.Карт», например, где у нас там какие-то машинки ездеют и мы должны туда регулярно влезать, регулярно эти машинки дополнять, править. Есть варианты, когда у нас там акция проходит сейчас, потом там акция не проходит, то есть нам приходится работать с этим Landing Page и испытывать различные маркетинговые приемы, и для этого CMSка, наверно, будет предпочтительнее HTML. То, что мы последнее время используем, это DLE, Modex, Bitrix, от «Вордпресса» отошли, но в простом понимании можно его на «Вордпресе» сделать. Но там, если вы действительно крутой лендинг сделаете, конкуренты могут разозлиться и легко вас вальнуть на это «Вордпрессике».

(52:50) С: Подскажи, какая средняя цена на разработку продающего сайта?

Д.Н.: Ну, по рынку у всех очень разные. Есть ребята, которые обещают за 5 тысяч сделать продающий, называют его продающим. Но, как я сегодня рассказал, я надеюсь, что все слушатели понимают, что это нереально, чтобы 7 человек, не считая там аккаунта, который плотно взаимодействует с клиентом, они работали 2-3 месяца вот в таком вот цейнтноте, постоянно общаясь, передавая друг другу информацию, 2-3 месяца, специалисты довольно приличного уровня нужны, вся эта команда, наверно, должна получать достойные деньги, поэтому, ценник, вот который у нас получается при такой проработке, можно что-что упрощать, какие-то пункты сокращать, может быть по времени, если продукт более простой, там какие-то этапы опускать, но в такой вот идеальной картине ценник на эту команду получается, что себестоимость только рассчитаться с ними, как правило это в районе 150-200 тысяч, то есть клиентская цена она будет еще плюс маржа какая-то заложена. Если обращаться к нам в агентство, мы вообще в принципе в последнее время стараемся отойти от этого и сделать упор на те команды, которые у нас есть, все кинуты на наши продукты. Но иногда, чтобы просто ребята не затухали, иногда подкидываем интересные какие-то вещи для проработки, разработки и берем иногда все-таки, редко, как бы ни хотелось, друзьям-знакомым какие-то делаем. У нас получалось, что Landing Page меньше 200 тысяч никогда не получаем, ну не было такого, то есть на сайте есть ценник 179 тысяч, это от, то есть такая рекламная цена. Вот она будет, скорее всего, 200 и выше. При том, что с большой долей вероятности мы либо не возьмемся за эту работу, либо предложим сделать ее чуть попозже. Но в рамках проекта AskUsers мы набираем команду разработчиков, то есть мы пообщались практически со всеми студиями по России, через e-mail запросили огромное количество портфолио, брифов, работ, презентаций компаний. Все это дело ручками собрали, у нас получился такой очень приличный пул компаний по Рунету, ну, Рунету плюс, я имею в виду Россию плюс СНГ, то есть СНГ там тоже есть, просто в меньшей степени. Большой пул компаний, там порядка 360, мы им будем в скором времени предлагать стать нашими партнерами и будем бесплатно рекомендовать их всем нашим клиентам, клиентам сервиса, то есть уже пользовались нашим сервисом, то в результатах тестирования, после появления отчета у вас могли заметить, что появилась кнопочка «выбрать разработчика». Там пока всего лишь 10 разработчиков представлено. Мы собираем этот пул и будем отдавать ваши заказы, ваши потребности после проведения подобных вещей, рекомендовать именно этих людей, которых мы отобрали. Команды хорошие есть, ценники везде разные, поэтому ищите и найдете.

(56:04) С: Ну и, к сожалению, у нас время подошло к концу. Хотя мы успели задать не все вопросы. Денис, тебе спасибо за интересный тему. Подписывайтесь на канал, что не пропустить наши будущие вебинары, заходите на сайт SeoPult.TV, чтобы посмотреть уже записанные мастер-классы, приходите в оффлайн, где Денис также читает 4-х часовой семинар по юзабилити сайтов, ну и на это я с вами прощаюсь. Денис, тебе последнее слово.

Д.Н.: Всем спасибо за внимание, рад был быть кому-то полезен. Тестируйте, и будет у вас счастье. Всего доброго.