Ux понятие и подходы к оценке. Как профессионально провести UX-исследование

Landing page, или целевая страница - это одностраничный сайт, целью которого является конверсия, или превращение посетителей в покупателей. Выделяют три наиболее распространенных способа создания лендингов:

• или шаблон у профессиональных разработчиков.
• Воспользоваться онлайн-сервисами/конструкторами по созданию сайтов.
• Использовать для создания landing page html-редактор (по типу Dreamweaver). Это наиболее сложный и продвинутый способ создания страниц, но он требует хотя бы минимальных знаний в верстке и программировании.

Если насчет первого способа комментарии излишни, то второй и третий стоит рассмотреть более подробно.

Онлайн-сервисы по созданию landing page

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

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

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

Согласно рейтингам, наиболее популярными конструкторами для лендингов сегодня являются Tilda, Flexbe, platformalp. LPgenerator тоже имеет своих поклонников. Вот результаты недавнего опроса среди пользователей (2017):

HTML-редактор на службе создания одностраничных сайтов

Редакторы html дают возможность, что называется «с нуля» написать лендинг пейдж. Но, безусловно, они годятся только для тех пользователей, которые имеют представления о том, что такое код и как пишутся программы и сайты. В интернет-пространстве много как платных (довольно недешевых), так и бесплатных редакторов.

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

Список бесплатных и наиболее популярных html-редакторов

• Notepad++. Работает не только с языком html , но и с css, java, php. Подсветка синтаксиса, сворачивание кода, автодополнение и автоматическое закрытие скобок и тегов, установка дополнительных плагинов, легкость дистрибутива и скорость работы программы и многие другие возможности делают этот редактор незаменимым инструментом разработчика, в том числе одностраничных сайтов.
• Komodo Edit. Широкий диапазон поддерживаемых языков, подсветка синтаксиса, автозавершение скобок, быстрый запуск, грамотная справочная система делают этот редактор одним из лучших
• Aptana. Работает с html, java, css. Автодополнение, предупреждение об ошибках, расширения пользовательского интерфейса - бонусы от бесплатного редактора.
• Alaborn istyle. Русскоязычный интерфейс, многофункциональность и грамотная справочная система - без сомнения показатель качественного редактора.
• Kompozer. Может работать в текстовом, визуальном и комбинированном режимах, поэтому удобен как для новичков, так и для опытных программистов.

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

Вместо заключения

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

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

Что выбрать — безусловно решать вам.

В LPgenerator в течение 7-ми дней вам дается возможность оценить полный функционал платформы, выбрав любой и настроив его под себя в интуитивном и удобном редакторе лендингов. За это время в ы можете поработать с огромным количеством макетов, широким набором виджетов и постоянной помощью технической поддержки. Такой вариант подойдет как для профессионалов, так и для новичков, которые ищут способы, как сделать landing page своими руками. в системе и попробуйте сами!

Высоких вам конверсий!

Программы для создания лендинг пейдж - одностраничников

Landing Page является устойчивым названием, и его часто сокращают до LP. В российской литературе можно встретить такие аналоги названия, как одностраничник, посадочный сайт, целевой сайт и даже заземляющий сайт. Если вы не новичок в сфере бизнеса, то наверняка такие сайты вам уже попадались. Как правило, они характеризуются следующими типовыми конструкциями:

1. Одна, максимум две страницы.
2. Яркий, привлекательный цвет дизайна.
3. Наличие броского названия конкретного товара, услуги, логотипа. Выставляется только один товар или услуга.
4. Наличие окна для осуществления подписки.
5. Эмоциональный текст о товаре, снабженный обилием ключей по запросам поисковиков.
6. Присутствие видеоинструкции по товару.
7. Наличие отзывов и ссылок на социальные сети.

Как правило, на Landing Page располагается минимум информации, зато есть активные элементы, готовые немедленно осуществить подписку по электронной почте, загрузку файла с описанием товара. Часто используются графические элементы, указывающие на кнопки, которые ведут по шагам к услуге. При этом хорошим тоном считается не перегружать страницу текстом и графикой, оставлять большие свободные поля. Таким образом, очень похож на баннер или даже flash-сайт. Цель сайта – захватить внимание клиента, пришедшего по ссылке и заставить провести его как можно больше времени на сайте, чтобы тот проявил интерес и подписался на услугу. Для этого в ход идут разнообразные тексты, составленные опытными копирайтерами, а также традиционная информация о значительных скидках на популярные товары. В процессе обработки пользователя применяются методы социальной инженерии, такие как воздействие музыкой, расчет на жадность, намек на то, что товар является дефицитным, обратный счетчик часов до приостановления услуги. Каждый метод может принести от доли процента дополнительных кликов до 20-30% трафика, который затем конвертируется и анализируется. Впрочем, это уже задача маркетинга и оптимизаторов, которые по этому анализу доводят лендинг до совершенства. Судя по некоторым примерам такого бизнеса, хорошо подготовленный сайт-одностраничник с полезной платной услугой может приносить несколько десятков тысяч рублей в месяц.

Дизайнерские бюро давно поняли ценность Landing Page, поэтому их сегодня предлагают буквально везде – по ценам от 999 до 5000 рублей, гарантируя немедленную окупаемость. Но, как и обычно, такие сайты тоже нуждаются в продвижении и раскрутке, поэтому цена серьезного сайта может быть на порядок выше. Замечательное свойство, которое имеет одностраничник, заключается в том, что его можно организовать даже на бесплатном хостинге, так как он не требует большего, чем вставка видео или кнопок на основе механизма языка JavaScript. Это провоцирует большинство манимейкеров на поиск бесплатных инструментов, которые бы дали возможность создавать такие лендинг пейдж самостоятельно, на основе многочисленные бесплатных шаблонов.

WYSIWYG Web Builder
http://wysiwygwebbuilder.ru/
Мощный редактор для создания сайтов любой сложности. Особенностью является то, что для получения хорошего результата не нужно вникать в коды разметки HTML5/CSS3: все операции осуществляются аналогично тому, как работают визуальные среды программирования. На страницу можно поместить разнообразные меню, текст, ссылки, графику, спецсимволы, списки и мультимедийные объекты. В программе имеется более 100 готовых шаблонов. Такое разнообразие немного запутывает пользователей, поэтому в Сети легко найти обучающие курсы по этой программы, а на трекерах – полную версию одной из последних программ для тщательного изучения.

Web Page Maker
http://sayt-s-nulya.ru/web_page_maker.html
Не обращайте внимания на то, что мы не привели здесь официальную ссылку. Дело в том, что это платная программа, стоит она 40 у.е., но зато есть места, где ее можно получить бесплатно. Более всего привлекает в ней простой визуальный интерфейс с разлинованным рабочим полем, где удобно привязывать визуальные элементы, тексты и списки. Стоит отметить, что у редактора есть русский интерфейс, упрощающий эксперименты с ним.

Microsoft Word
Многие могут не догадываться, но обычный Word или аналогичный текстовый процессор вроде OpenOffice могут неплохо справляться с созданием как статических, так и динамических HTML страниц. Профессионалы редко используют эту программу, в отличие от старой Microsoft Front Page, так как при сохранении страницы Word создает не самый оптимизированный код. Но для пробы этот вариант может сгодиться, тем более, что Интернет сейчас почти у всех быстрый.

Рассматривать онлайн-редакторы мы не будем. Дело в том, что они часто привязывают пользователя к собственному хостингу размещения сайтов, предлагая на выбор платную или бесплатную услугу. Как правило, бесплатный вариант отличается тем, что в нем доступно 3-5 шаблонов, почти нет возможности сильно приукрасить одностраничник, а срок существования такого сайта может составлять 1-2 месяца при ограниченном трафике посещаемости. Такой сервис вы легко найдете сами. К примеру, LPGenerator.ru, SqueezePageCreator, http://ru.wix.com, http://лендинг-5.рф и другие. Заметим, что бесплатный одностраничник с предоставленным хостингом на таких условиях может быть плох тем, что будет содержать не только вашу рекламу, но и рекламу хостера или сервиса.

Коллекция
http://www.htmleditors.ru/index.html
Если вы устали искать автономные, бесплатные или русифицированные редакторы, отлавливая каждый поштучно, мы советуем заглянуть в эту коллекцию, которую подготовили для нас отличные ребята. Здесь есть практически все, что может понадобиться для создания как элементарных сайтов, так и самых сложных. Напомним, что Landing Page трудно назвать сложным по структуре, так какой смысл использовать для него инструменты вроде DreamWeaver? Здесь представлены списки кодовых, визуальных и комбинированных редакторов, а также инструменты для создания списков, меню, подготовки флэш-сайтов, карт сайтов. Очень важным сегодня является соответствие сайтов для показа на мобильных устройствах, для чего лендинг пейдж подходят как никакие другие. В окне внизу выберите бесплатные варианты программ и скачивайте себе на здоровье. К примеру, один из интересных может считаться бесплатный визуальный редактор Turbo Site. Несмотря на скромные возможности его визуального редактирования, в нем легко добавлять списки, тексты, изображения, формы обратной связи, собственные коды на языке JS.

Так как большинство редакторов имеют описания, мы не стали их дублировать, но приведем список бесплатных редакторов, которые имеют вес и значение среди разработчиков: Nvu, FrontPage, Sharepoint Designer, Amaya, Kompozer, CoffeeCup, Мини-сайт, Komodo Edit, HTMLReader, Arachnophilia, Webbo, HTMLDocEdit и многие другие.

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

Лендинг пейджи называют разными фразами, но все они несут одну смысловую нагрузку. Это страница входа, посадочная страница, страница захвата, продающая страница.

Лендинг пейдж в рунете сократили, как ЛП.

По адекватной цене от 5 000 руб. до 10 000 руб. на cms Wordpress. На основе платной премиум темы вы получите в собственность лендинг страницу, за которую не придется платить ежемесячно. Вордпресс является гибкой платформой и позволяет разрабатывать продающие одностраничники с красивым дизайном, а не только многостраничные интернет-магазины.

Другой вариант - это одна страница для вашего бизнес предложения без админки и возможности добавлять новые страницы. Стоимость с подбором ключей и корректировки (оптимизации) вашего предложения или с вашим готовым текстом от 5 000 до 15 000 руб.

Сегодня у нас с вами практический урок с техническими моментами. Итак…

Лендинг пейдж – это обычная веб-страничка в интернете, созданная по известным технологиям HTML, CSS, Java, с добавлением изображения и текста. Текст называется продающим и пишется по законам копирайтинга. Landing page можно сделать вручную или на любом движке с помощью плагинов.

Как создать лендинг пейдж своими руками. Пошаговые уроки и практика.

1 шаг. Определимся, какие знания и навыки нам понадобятся.

1. Мы будем делать продающую страницу на HTML, CSS.
2. Нам нужно написать короткий смысловой текст, побуждающий пользователя сделать нужное нам действие.
3. Картинка, служащая либо фоном веб-странички, либо отдельным элементом.
4. Код формы. Если вы ведете рассылку в e-mail сервисе, то подписную форму сгенерируете там же. Если это форма регистрации на сайте, то код возьмете с сайта.

2 шаг. Как сделать макет лендинг пейдж.

1. Определимся со структурой папок.

В корне страница index.html;

Для картинок папка «images» или «image»;

Для файлов стилей папка «css».

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

Лучшая программа для создания лендинг пейдж.

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

Основа для веб-документа:

Верстка может быть табличная, но лучше с дивами -

Вы можете пойти по двум направлениям:

Первое – нарисовать дизайн лендинг пейдж в фотошопе , затем разрезать на нужные элементы и сверстать свой авторский дизайн в программе.

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

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

Идеальная основа для макета лендинг пейдж – это три блока: заголовок, текст и форма или кнопка заказа, подписки.

По составлению продающего текста и заголовка нужно написать отдельный урок. У продающего копирайтинга много интересных маркетинговых ходов и фишек. Сейчас остановимся на основных моментах.

Заголовок должен быть точным. Из него уже должно быть понятно, о чем речь и что предлагается.

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

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

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

Все, ничего лишнего.

Дополнительные шашечки. Нужны ли они? Как провести анализ.

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

К примеру, добавление счетчика «сколько осталось до окончания акции или скидки» повышает конверсию. А значки сертификатов, нет. Но это все индивидуально и зависит от ниши, цели создания посадочной веб-странички.

Для того, чтобы узнать какой вариант вашей страницы будет конверсионным, пользуйтесь А/Б тестированием . Сервисы для этого: Google Website Optimizer, сервис рассылок, которым вы пользуетесь. Очень удобный интерфейс и возможность провести тестирование разных вариантов одной продающей страницы.

Сегодня мы определились со структурой, дизайном и текстом для лендинг страниц.

Во втором уроке мы продолжим практическое создание целевой страницы. Хорошим подспорьем при этом будут эти бесплатные HTML, CSS, Dreamweaver и другие.

Здравствуйте, друзья! Надеюсь, прошлая статья вам пригодилась и теперь вы не будете страдать от гриппа. А сегодня я хочу рассказать про отличную программу для создания landing Page, то есть продающих одностраничников или страниц подписки (и даже целых сайтов, если захочется). Про одну я уже писал – , и сам ею пользовался много раз, и другие тоже активно скачивают ее вместе с видеокурсом здесь, на блоге. Так что интерес к этой теме есть. Кстати, очень хорошая программа, очень рекомендую, имеет большие возможности, и простая в использовании.

Но сегодня я хочу рассказать о другой программе для той же цели. Называется она Adobe Muse. Те, кто уже умеют ею пользоваться, могут и не читать этот пост, но, думаю, найдется и много тех, кто про эту программу пока не знает. Я и сам наткнулся на нее случайно, на одном из форумов. Заинтересовали ее возможности, которых нет в Web Builder, особенно – эффект параллакса. Да и в остальном она определенно заслуживает внимания.

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

Итак, что это за зверь такой?

Что такое Adobe Muse?

Это, как я уже говорил, программа для создания Landing Page. При этом вся работа происходит в визуальном редакторе, то есть вам не надо знать HTML или CSS, или еще каких-то вещей. то есь, если вам надо поставить на страницу какой-то элемент, например – картинку, кнопку или текст, то вы просто выбираете это в меню и мышкой ставите на нужное место. Все очень просто. И при этом получается очень замечательны результат.

Если кратко, то возможности и достоинства Adobe Muse я бы выделил такие:

• Для создания сайта или страницы не надо знать никаких языков программирования – вся работа идет только с дизайном. Код генерируется сам, без вашего вмешательства, хотя особо дотошные могут и свое добавлять.
• Отличный лендинг можно создать с нуля буквально за час-два.
• Можно создавать адаптивные страницы, которые одинаково хорошо будут выглядеть и на компьютере, и на планшете, и на смартфоне.
• Большой набор возможностей – таймеры, виджеты, шрифты (можно загружать прямо из программы любой шрифт), слайдеры и прочее. Все настраивается как угодно.
• Удобная работа – структура проекта, окно редактирования, предпросмотр – все рядом, все в одной программе.
• Современные технологии – Adobe Muse работает с HTML5 и CSS3. Кто не знает – это позволяет создавать очень классные современные страницы с разными спецэффектами – анимацией фона, элементов, с разными спецэффектами. В том числе можно использовать модный эффект параллакса. Вы можете даже разрешить посетителям изменять содержимое страницы прямо из своего браузера!
• Освоить программу нетрудно, есть и много обучающих материалов, в том числе и на официальном канале программы в YouTube.

Можно программы с официального сайта – она рабочая, только ограничена на 30 дней. Для ознакомления и изучения этого вполне достаточно. Придется зарегистрироваться на сайте Adobe – это делается там же, все быстро, а потом можно скачивать. Вы регистрируетесь в Creative Cloud и получаете идентификатор и 20 Гб облачного места для хранения своих проектов. Сможете предоставлять доступ к ним другим людям и работать, например, командой над одним проектом.

Вот так выглядит программа при запуске:

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

Вот так выглядит страница в редакторе (открыта страница из примера, из видеокурса):

Как пользоваться программой Adobe Muse, расписывать не буду – это необъятная тема, для этого есть много видеоуроков. Кроме того, желающие могут скачать один из видеокурсов в конце этого поста.

Почему программа для создания Landing Page лучше онлайн-сервисов?

Есть много как программ для создания Landing Page. так и онлайн-сервисов. Но я всегда предпочитаю программы, установленные на компьютере. Почему? Вот несколько недостатков, с которыми вы столкнетесь, если будете создавать свой лендинг на онлайн-сервисе:

• Даже если на сервисе есть много разных шаблонов, все-равно это рамки, за которые не прыгнешь. Шаблонный подход ограничивает возможности.
• Для работы нужен Интернет.
• Созданную страницу вы не сможете забрать и разместить на другом хостинге. Закроется сервис – пропадет и ваша страница. Это самый большой недостаток, по-моему – зависимость от сервиса.
• Чтобы получить все возможности сервиса, вам придется постоянно платить, и немало. А на некоторых вообще нет бесплатного конструктора, только небольшой ознакомительный период.

Думаю, этого достаточно. То ли дело программа на компьютере – установил и твори, как хочешь. Хоть есть Интернет, хоть нет – включил компьютер и занимайся. А результат потом можно просто сохранить на компьютере и опубликовать на любом хостинге. И даже если хостинг исчезнет – сайт ваш всегда у вас есть, выложите на другом хостинге, и все. А возможностей у программ всяко больше, они гибче и имеют больше инструментов. В той же Adobe Muse можно сделать такое, на что не способен ни один онлайн-конструктор лендингов.

А теперь, для тех, кто заинтересовался этой программой для создания Landing Page – я нашел отличный видеокурс по ней, в котором на примере создания страницы объясняются основные рабочие моменты. Уроки короткие – а их 32, но в них нет ничего лишнего, смотрятся легко и дают максимум информации даже за 2-3 минуты. Так что забирайте. Изучайте, учитесь делать Landing Page – это сейчас прибыльное занятие, кстати.

Кроме того, я вложил в архив саму программу Adobe Muse версии 7.4. Это версия 2014 года, хотя и не самая последняя. Но в поисках я столкнулся с проблемами – последнюю версии очень сложно “вылечить”. Да и с установкой бывают проблемы (у меня ставилась, куда попало, даже не предлагала выбрать папку, а я испробовал несколько версий). Вложенная же имеет все возможности и при этом устанавливается и “лечится” очень просто – инструкция вложена. Да и примеры из курса прекрасно в ней открываются, а на другие версии в этом плане есть нарекания. Так что получайте полноценную программу и сразу видеокурс к ней. Если хотите другую версию – найти нетрудно.