Приветствую. Начну с небольшого вводного слова… Сегодня разве что слепо-глухо-немая блондинка с ампутированными конечностями не пишет спецотчеты. Зачастую ценность такого рода контента минимальна, поскольку создается он ради получения денег, email-адреса, либо лайков из социальных сетей. Дабы данный текст не попал в одну папку с мусорными спецотчетами, давайте сразу же расставим все точки над “Yo!”:
1) Здешний автор специально сделал очень небольшой объем текста. Вместо того, чтобы растекаться в сложносочиненных словоблудставах, я очень коротко и ясно изложил законы, следуя которым вы сможете увеличить количество подписок и продаж на своих сайтах.
2) Представленный контент является сугубо практическим. Каждый пункт данного спецотчета — это результат наблюдений, исследований, а также платных кейс-стади, которые были куплены и оценены. Посему, тут нет субъективного мнения автора, который может быть прав, а может и ошибаться. Только набор правил, которым следую я сам, и которыми не стоит пренебрегать вам.
3) Термин юзабилити здесь применяется в соответствии с его истинным значением. Если в каком-то другом источнике по теме юзабилити содержится информация, которая прямо противоречит правилам, изложенным ниже — вам придется самостоятельно принять решение, какой информации доверять. Теперь давайте разберемся, что на самом деле означает «юзабилити».
Изначально, это было словосочетание: «use ability». Вот перевод каждого слова по-отдельности: Use (англ.) — использовать, пользоваться. Ability (англ.) — способность, возможность.
Получается, что юзабилити — это способность пользоваться вашим сайтом с максимальной легкостью и удобством. Если же мы говорим о юзабилити для инфобизнеса, то здесь основное внимание стоит сосредоточить на понятности и удобстве подписных и продающих страниц.
Итак, принципы данного отчета ориентированы на то, чтобы сделать ваши продающие и подписные страницы максимально простыми и удобными. Главным же критерием юзабилити мы будем считать показатель конверсии. Вы можете прочитать данный мини-репорт подряд, а можете пролистать, ориентируясь на заголовки разделов. Каждый раздел — это принцип юзабилити, который нужно внедрить в инфобизнес. Чем больше вы внедрите, тем, соответственно, выше будет конверсия.
Принцип №1: Используйте универсальные плееры
Одним из мировых трендов является выход в Интернет с различных гаджетов. Сегодня планшеты и смартфоны используются как полноценные компьютеры. По статистике около 55% посещений сайтов в рунете происходит с мобильных устройств.
Естественно, этот факт сказывается и на конверсии инфобизнес-сайтов. Только представьте, около половины посещений вашей «лэндинг пэйдж» происходит с телефонов и планшетов! При этом, далеко не все гаджеты имеют полноценную поддержку технологий Flash и JavaScript.
Например, официальная позиция Apple по отношению к Adobe Flash такова, что эта платформа небезопасна, а потому не поддерживается встроенным браузером. Во многих операционных системах на базе Linux также существуют проблемы с поддержкой Adobe Flash Player.
Приводит это к тому, что часть посетителей сайта уходят, не сумев запустить вашу видеопрезентацию. Хорошая новость, что браузеры без Flash почти всегда поддерживают HTML5-видео. Таким образом, если не работает одна технология, то можно использовать альтернативную. Как же сделать так, чтобы на сайте в зависимости от устройства и браузера посетителя автоматически отображался работающий плеер?
Тут существует 2 пути:
Путь #1. Установить на сайт хитрый скрипт, который обеспечит работу плеера на всех устройствах. Например, можно использовать плеер Uppod. Инструкция о том, как сделать автоматическое переключение между Flash и HTML5 версиями тут: http://uppod.ru/talk_4169
Путь #2. Использовать на продающих и подписных страницах видео, размещенные на Youtube или Vimeo. Второй путь является предпочтительным, поскольку видеохостинги имеют целый ряд удобств:
Во-первых, видеохостинги обеспечивают максимальную совместимость со всеми браузерами, операционными системами и устройствами.
Во-вторых, «тяжелые» видеофайлы хранятся не на вашем хостинге, что значительно экономит трафик и деньги.
В третьих, вы получаете вирусный эффект — видео смогут увидеть не только посетители сайта, но и огромное сообщество пользователей Youtube и Vimeo. По какому бы пути вы не пошли, всегда помните о том, что сайт может выглядеть и работать по разному, в зависимости от платформы и браузера посетителя.
Принцип №2: Используйте преимущества языка HTML5
Не знаю почему, но большинство сайтов до сих пор не используют преимущества HTML5. Тем не менее, этот язык очень сильно упрощает жизнь посетителям, заходящим на сайт с мобильных устройств. Так, например, язык HTML5 позволяет добавить на сайт много новых элементов веб-форм:
Для пользователей, чьи устройства не содержат большой и удобной клавиатуры, это значительно облегчает заполнение полей. Я сейчас не буду рассматривать всю тему HTML5-форм, если захотите, можете прочитать отличную статью: http://htmlbook.ru/html5/forms
Поскольку нас интересует тема юзабилити для инфобизнес-сайтов, то давайте подумаем, как улучшить формы на подписных страницах. Одним из нововведений HTML5 является специальный тип полей для ввода email-адреса. На обычном компьютере с клавиатурой вы не заметите никаких отличий, однако на Apple IPhone и IPad отобразится оптимизированная клавиатура для ввода электронной почты.
На изображении выше показана виртуальная клавиатура «яблочных» устройств при заполнении полей для адреса электронной почты. Для того, чтобы «проапгрейдить» форму подписки, нужно:
1. Указать для документа правильный DOCTYPE. DOCTYPE – это первая строка html-кода вашей подписной страницы. Можно проверить правильность DOCTYPE, открыв html-файл в любом редакторе кода (например, программой Dreamweaver).
Для того, чтобы использовать в коде элементы HTML5, первая строка должна выглядеть, как на скриншоте (см. выше).
2. Отредактировать в html-коде подписной формы тег <input>, отвечающий за отображение поля для ввода email-адреса.
Итак, наша задача повысить юзабильность подписной страницы для планшетных компьютеров. Я покажу на примере подписной формы сервиса Smartresponder, но точно также можно отредактировать форму любого автореспондера. Нам необходимо отредактировать поле для ввода email-адреса. Самый простой способ найти нужный участок кода — это открыть страницу в визуальном редакторе Dreamweaver.
Теперь нужно заменить type=»text» на type=»email».
3. Отредактировать тег <form>, чтобы отключить автоматическую проверку правильности email-адреса.
И последний штрих — нужно отключить автоматическую проверку правильности заполнения полей формы. Дело в том, что некоторые браузеры самостоятельно проверяют корректность email-адреса. Поскольку сервис Smartresponder генерирует подписную форму уже с проверкой полей, нужно выключить эту функцию браузера. Для этого тегу <form> добавим дополнительный атрибут novalidate:
Принцип №3: Используйте автоматическую подстановку имени и email-адреса.
В инфобизнесе очень часто приходится создавать подписные страницы, на которые основной трафик идет из рассылки. Человек ранее сообщил свои имя и email, однако вы его отправляете на страницу, где нужно снова указывать эти данные. Хорошим решением является передача имени и email-адреса, как части ссылки на страницу. То есть, отправляя письмо в рассылку, вы создаете «специальную» ссылку.
Переходя по такой ссылке, посетитель страницы увидит предзаполненную подписную форму. Реализуется это очень просто.
Итак, для начала давайте разберемся, как сформировать ссылку для письма рассылки. [first_name] – это переменная, которая заменяется на имя подписчика. [email] – это переменная, которая заменяется на email подписчика. Теперь нужно сформировать ссылку на страницу подписки, содержащую данные подписчика.
Предположим, «лэндинг пэйдж» находится по адресу: http://vashsait.ru/landing_page/ Тогда эта же ссылка с данными подписчика будет такой: http://vashsait.ru/landing_page/?email=[email]&name=[first_name] Следующим этапом необходимо «проапгрейдить» html-код подписной страницы. Для этого скачайте файл с небольшим php-скриптом: http://dl.salesmation.ru/ibusability/code.zip
Содержание скачанного скрипта необходимо вставить в самое начало html-страницы, как показано ниже:
Далее нужно подставить полученные от посетителя данные в форму:
И заключительный этап: страницу нужно сохранить с расширением php. То есть, если раньше файл страницы назывался index.html, то теперь он должен называться index.php После внесения изменений файл index.php необходимо загрузить на сервер, поскольку на локальном компьютере он работать не будет.
Принцип №4: Полностью откажитесь от попапов.
На первый взгляд данный принцип может показаться бредовым, однако давайте взглянем трезво: Во-первых, попапы на продающих страницах снижают конверсию. На продающей странице в принципе ничто не должно отвлекать посетителя от процесса покупки. Если 5 лет назад вполне эффективно работали «продажи в лоб», то сегодня обязательным является предварительный разогрев.
Таким образом, если новых клиентов вы сначала ведете на лэндинг, то к моменту попадания на продающую страницу клиент уже является подписчиком. Во-вторых, попапы давным-давно себя скомпрометировали. Не секрет, что попапы давным-давно набили оскомину. Очень многие сайты злоупотребляли и продолжают злоупотреблять этой технологией для агрессивной рекламы, из-за чего конверсия попапов значительно ниже, чем других маркетинговых инструментов. В третьих, сегодня гораздо эффективнее тизерная реклама.
Если вы не в курсе… Тизер (тизерная реклама) — это банер-дразнилка, который интригует или задает вопрос, но не дает на него ответ, таким образом «цепляя» внимание посетителя. Чтобы «освободить» внимание, человеку нужно нажать на банер-тизер. Наиболее эффективно тизеры работают в блоге. Вы можете размещать их как в боковой панели (сайдбаре), так и внутри блогпостов.
Кроме этого, вот вам довод с точки зрения юзабилити… На небольших экранах нетбуков и планшетных компьютеров плагин «Popup Domination» заслоняет все пространство, делая невозможным чтение текста под попапом и не позволяя закрыть сам попап. Многие другие популярные попапы ведут себя точно также.
Принцип №5: Упростите подписку для постоянных клиентов.
Выше я показал, как заранее заполнить форму подписки, если известны имя и email. Однако, можно еще сильнее упростить жизнь тем, кто уже является подписчиком… Как известно, для email-маркетологов камнем преткновения является вопрос о том, нужен ли процесс подтверждения при подписке. Сторонники принципа «double opt-in» призывают использовать подтверждение подписки, как обязательный этап.
При таком подходе исключается возможность случайной подписки или незаконных действий злоумышленников. Сторонники «single opt-in» говорят о том, что в процессе подтверждения сильно снижается конверсия, поэтому они выступают за моментальную подписку. Будучи войном серединного пути, я предлагаю наиболее юзабильное решение: использовать подтверждение при первой подписке (принцип double opt-in), но при этом подписывать моментально тех, кто ранее уже был подписан хотя бы на одну рассылку (принцип single opt-in). Сегодня существуют разнообразные сервисы рассылок: Smartresponder, Unisender, JustClick и т. д.
Некоторые из них поддерживают оба алгоритма, другие требуют обязательного подтверждения подписки. Я покажу, как реализовать описанный выше алгоритм для сервиса Smartresponder. Если же вы используете другой сервис, то, возможно, придется заказать аналогичный скрипт фрилансеру, либо использовать штатные возможности вашего автореспондера.
Итак, нужно выполнить 4 простых шагов:
Шаг #1. Скачать zip-архив: http://dl.salesmation.ru/ibusability/singleoptin.zip Внутри архива вы найдете PHP-скрипт «SR Single Optin». Самый главный файл с настройками: subscribe_config.php
Шаг #2. Открыть файл subsribe_config.php с помощью блокнота.
Первым делом нужно настроить доступ к сервису рассылок с помощью алгоритма API.
Далее нажмите на вкладку «API».
На странице настроек API расставьте «галочки» как показано выше. После этого обязательно сохраните изменения. Теперь скопируйте API ID и секретный пароль и пропишите их в файле subsribe_config.php
Теперь разберемся с остальными настройками: $is_allow_resubscribe = FALSE; Этот параметр определяет, можно ли повторно подписаться на рассылку, которую юзер получает или получал ранее. Важно то, что при повторной подписке на серию писем, подписчик начнет получать заново все письма начиная с первого.
Чтобы разрешить повторную подписку, замените FALSE на TRUE: $is_allow_resubscribe = TRUE; Следующие 5 настроек устанавливают страницы, на которые будет перенаправлен юзер в различных ситуациях. $confirm_redirect = ‘confirm.html’; Если подписчика еще нет в вашем списке, то его перебросит на страницу с сообщением о том, что подписку нужно подтвердить.
Естественно, вы самостоятельно создаете файл confirm.html и кладете его в одну папку со скриптом. Еще раз повторюсь, на эту страницу попадут только те, кто раньше не был подписан ни на одну рассылку.
$subscribe_redirect = ‘subscribe_ok.html’; На страницу subscribe_ok.html юзер попадет после успешной подписки. Скрипт автоматически перебрасывает на эту страницу тех, кого удалось подписать без подтверждения подписки. $resubscribe_redirect = ‘resubscribe_ok.html’;
На эту страницу юзер попадет в том случае, если он уже был подписан ранее на данную рассылку и вы разрешили повторную подписку. Если же вы не разрешили повторную подписку, то скрипт перебросит на страницу, указанную в следующей настройке: $noresubscribe_redirect = ‘noresubscribe.html’; Обратите внимание, что вам никто не мешает в нескольких настройках указать одинаковую страницу.
То есть, например, вы можете настроить скрипт, чтобы он перебрасывал на одну и ту же страницу при первичной и при повторной подписке. $error_redirect = ‘subscribe_error.html’; Последняя страница нужна на тот случай, если «что-то пойдет не так»… В редких случаях могут глючить сервера сервиса рассылок, из-за чего не получится автоматически подписать на рассылку. В этом случае произойдет переход на данную страницу.
Шаг #3. Отредактировать форму подписки.
Для того, чтобы использовать скрипт «SR Single Optin», вам придется немного отредактировать подписную форму, чтобы она отправляла данные не напрямую сервису рассылок, а передавала их файлу subscribe.php, который выполнит весь процесс подписки.
На изображении участок кода, где указан URL для передачи данных. Вам необходимо заменить http://smartresponder.ru/subscribe.html на subscribe.php
Шаг #4. Загрузить обновленные файлы на сайт.
Теперь вам нужно, в первую очередь, загрузить на сайт обновленную форму подписки. В ту же папку, где находится подписная на сайте нужно положить файлы subscribe.php и subscribe_config.php Также, если вы создали дополнительные страницы для переадресации подписчиков, то их тоже не забудьте положить в папку с остальными файлами.
Готово! Если все правильно, то скрипт будет работать как часы!