Кейс кулинарной сети Nyam.ru: пошаговая помощь помогла увеличить конверсию более чем в 3 раза

Несколько слов о проекте Nyam.ru:

• Это кулинарная социальная сеть. Здесь созданы полезные возможности для участников сообщества: публикация собственных рецептов, сохранение понравившейся информации в подшивку, поиск рецептов блюд по заданным ингредиентам, участие в конкурсах и т.п.
• Сайт был создан в начале 2012 г., к концу ноября ежедневное количество посетителей достигло 8-10 тыс. человек, в ноябре 2013 г. количество посетителей удвоилось (16 тыс чел. в день).

Модель вовлечения посетителей на сайте

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

Успейте купить корпоративный пакет COSSA-2025 со скидкой!

Cossa анонсирует главный рекламный формат на весь 2025 год: сразу 8 различных опций.

Пакет идеально подходит для онлайн-сервисов, стартапов, интернет-компаний и digital-агентств.

Успейте приобрести пакет до повышения цены!

• избирательное сохранение понравившегося контента;
  
• генерирование собственного контента (в виде рецептов приготовленных блюд);
  
• общение с другими участниками сети;
• участие в конкурсах, викторинах.

Главной точкой входа для вовлечения новых и вернувшихся пользователей на сайте являются целевые страницы с рецептами, на которые 90% посетителей переходят с бесплатного поиска (organic).

Фрагмент отчета из Google Analytics о бесплатном поисковом трафике, ноябрь 2012 г.

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

Второй тип посадочной страницы на сайте - страница рецепта.

На странице созданы 4 контрольные точки для вовлечения посетителей

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

Проблема: много отказов и слабое понимание работы сервиса

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

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

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

Вариант решения №1. Видео инструкция

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

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

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

Вариант решения №2. Создание пошагового тура с помощью подсказок

Чтобы улучшить ситуацию, специалисты портала решили сделать обучающий тур прямо на сайте.

Юлия Гламаздина, руководитель проекта Ням.ру:

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

Когда мы создали подсказки на нашем сайте, в это же время аналогичным образом пошаговое обучение для пользователей применили разработчики известных сервисов компании Google: Youtube, GMail, позже - Google Plus.

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

Подсказки, по нашему мнению, выигрывают по сравнению с остальными видами обучения благодаря своим уникальным качествам: краткость, логичная последовательность и своевременность предоставления помощи”.

Интерактивность - естественная модель восприятия информации

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

Для пользователя нужно создать ощущение, что интернет-пространство подчиняется законам физического мира, и ввести некую систему ориентиров, по которой пользователь сможет определять своё положение на сайте  (об этом подробнее в статье на Хабре).

Действие 1. Разрабатываем пошаговую помощь для сайта

Составили чек-лист функционала пошаговой помощи на сайте, на основе которого было написано ТЗ.

Требования к навигации и показу подсказок были детализировали следующим образом:

• при открытии страницы посетителю показывается подсказка с призывом выполнить целевое действие, например, “Добавить в мою кухню” понравившийся рецепт;
• не показывать повторно одинаковые подсказки посетителю: при следующем открытии страницы сайта в веб-браузере посетителю должна показываться новая подсказка;
• у посетителя должна быть возможность перелистывать подсказки для ознакомления со всеми возможностями ресурса;
• при пошаговом просмотре подсказок (листании) следующая подсказка должна открываться, а предыдущая - закрываться;
• для новых и вернувшихся посетителей нужно показывать различные группы подсказок;
• оформление подсказок должно быть адаптировано под дизайн сайта.

Действие 2. Размещаем подсказки в области контрольных точек

На разработку подсказок по описанному ТЗ понадобилось 2 месяца. На сайте подсказки установили 26.11.2012 г.

Первая подсказка обращает внимание посетителя на самое простое и полезное действие - сохранить понравившийся рецепт себе “на кухню”.

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

После нажатия на элемент “Добавить в мою кухню” посетителю предлагается зарегистрироваться. При нажатии на подсказке на кнопку “Туда” посетителю предлагается следующая подсказка (о просмотре похожих рецептов).

Действие 3. Измеряем конверсию сайта с помощью Google Analytics

В Google Analytics были созданы события для отслеживания количества регистраций.

• До установки подсказок: кол-во регистраций на сайте всего - 428 чел., в конце ноября 2012.
• После установки подсказок: кол-во регистраций на сайте 1668 чел., в начале февраля 2013.

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

Аналитика за период с 1 ноября 2012 г.  по 30 ноября 2013 г.

На графике отображены метки по дате установки подсказок. При очевидном росте числа регистраций резкого увеличения трафика на сайт не было (кроме сезонного увеличения в предновогодние праздники).

В ноябре 2013 г. количество регистраций было рекордно высоким - 2122, т.е практически пятикратный рост по сравнению с количеством регистраций в прошлом году.

В Google Analytics создали специальную настройку, с помощью которой смогли оценить действие посетителей с подсказками. Анализ проводился за период с 8 по 30 ноября.

Создали событие “Hints” для отслеживания действий посетителей с подсказками.
Сегментировали отслеживание этого события по действиям на: “Выключить подсказки”, “Далее”, “Закрыть”, “Больше не показывать”.

Были получены следующие данные:

• с 8 по 30 ноября 2013 - 355 034 уникальных посетителей на сайте;
• 1941 регистраций за этот период (событиеsign up);
• 27 319 событий с подсказками;
• 4329 действий по нажатию кнопки“Далее”.

Глубина просмотра - в среднем 10 страниц за 1 посещение

И одно приятное наблюдение при просмотре аналитики - посетители, которые воспользовались помощью подсказок (нажимали на кнопку “Далее”) - в среднем просмотрели 10 страниц за одно посещение

Достигнутый эффект после реализации решения

• увеличилась конверсия на сайте практически в 5 раз;
• в работу портала вовлечено от 5% новых посетителей
• количество отказов сократилось в среднем на 5-7%.
  

Стоимость реализации решения для компании

• стоимость данного решения составила около 400 у.е., учитывая количество потраченных часов на подготовку ТЗ, разработку и тестирование функционала;
• в разрез с выполнением текущих работ по технической поддержке сайта у программиста компании ушло 2 месяца на решение задачи по разработке пошаговой помощи в виде подсказок.

Внедрение пошаговой помощи на новые сайты

После того, как команда проекта убедилась, что пошаговая помощь на сайте - это эффективный инструмент для увеличения конверсии, подсказки установили еще на 6 информационных проектах компании (в том числе на юридическом портале legalans.com).

Для этого решили вынести панель управления подсказками из системы сайта во внешний сервис. Цели для создания сервиса были сформулированы следующим образом:

• логика сервиса должна быть отделена от логики сайта (базы данных, таблицы стилей и т.д.);
• подсказки должны автоматически создаваться, сохраняться и редактироваться с помощью специализированной панели управления на том сайте, на котором они создаются;
• при внесении изменений в текст текущих подсказок и создании новых не должны вноситься изменения в код сайта, привлечение программиста к этой задаче должно быть минимизировано;
• функционал должен позволять добавление подсказок “на лету” к любому элементу на сайте;
• при просмотре (пролистывании) подсказок должна происходить фокусировка экрана.

Учитывая вышеприведенные требования, в течении 6 месяцев 2 программиста трудились над созданием сервиса для автоматического размещения пошаговой помощи на сайте. В итоге в конце августа 2012 г. он был запущен в действие.

Новый подход к размещению пошаговой помощи на сайте - подсказки добавляем поверх страниц сайта, не внося изменений в HTML-код сайта

После добавления кода (2 строки) в шаблон сайта, в левой части экрана на сайте появится панель управления. Нажимаем на кнопку “Создать подсказку” и выбираем место на сайте, куда должна быть помещена подсказка.

На выбор предоставляются различные стили подсказок, выбор гарнитуры и размера шрифта.

Функционал позволил быстро добавить пошаговую помощь еще на 6 сайтах компании (некоторые из них указаны на  сайте).

Разработка сервиса позволила сократить стоимость внедрения подсказок и снизила расходы на дальнейшую техническую поддержку и развитие пошаговой помощи при добавлении на новые сайты компании:

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

Сервис называется “Hintarea”, от англ. “hint” - подсказка, “area” - область.

С конца августа уже более 50 сайтов различной тематики зарегистрировались и около 100 человек ознакомились с возможностями сервиса благодаря демо (в виде плагина для Google Chrome).

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