Геймификация — это использование игровых механик в неигровых ситуациях и продуктах. Элементы игры все плотнее входят в нашу повседневную жизнь. Например, мы можем делать покупки в каком-то одном супермаркете только потому, что нам надо собрать коллекцию героев из «Звездных войн» или все время платим картой mastercard чтобы заработать баллы. Геймификация позволяет улучшить поведенческие факторы вашего сайта и вовлечь пользователя. Собственно поэтому мы и решили немного добавить фана и в наш продукт — клавиатурный тренажер Ratatype.

Немного истории

В 2013 году был создан англоязычный клавиатурный тренажер Ratatype, ориентированный на Америку.

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

Каждый курс на Ratatype состоит из нескольких уроков (в разных языках разное количество уроков, минимальное в английском — 15). А каждый урок содержит несколько упражнений от 5 до 23.

Как мы пришли к геймификации

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

А так прошел упражнение, увидел свою скорость и количество ошибок, но почему-то не получил все звезды. Значит, можно улучшить результат и перепроходишь упражнение еще раз.
С идеей определились, теперь надо было продумать механику и решить, какое количество звезд использовать.

Детали разработки

Сначала, конечно же, посмотрели, как у других, в том числе конкурентов. Поняли, что в основном дают 3 или 5 звезд. Посмотрели самые популярные игры (например, Cut the rope и Angry birds), там было по 3 звезды.

Решили делать 3 — это проще.

"

Механика

За что, собственно, давать звезды?

1. У нас, например, чтобы пройти упражнение, надо набирать текст быстрее 50 зн./мин и совершить не более двух ошибок. Значит, первую звезду можно давать просто за прохождение упражнения.
2. Мы считаем, что минимальность ошибок важный фактор в скорости печати. Печатаешь без ошибок — значит, не отвлекаешься на их исправление, значит, печатаешь быстрее. Вторая звезда — за 0 ошибок и минимальную скорость.
3. А третью решили давать за скорость при совершении не более двух ошибок. Порог скорости установили везде разный.
   
   
   • Посмотрели, с какой скоростью пользователи проходят упражнения.
   • Свели все в одну таблицу Excel.
   • Разбили скорость на диапазоны от 50 зн./мин и до максимума с шагом в 10.
   • Решили, что третью звезду смогут получить примерно 30% от всех пользователей, а у остальных будет стимул перепройти упражнение.
   • Определили порог на каждое упражнение согласно предыдущему пункту.

Дизайн

Казалось бы, что тут думать? Звезды и все тут, нарисовал, покрасил в нужный цвет — готово. А неееет, ценность нашей компании «Хорошо или никак» не дает такое делать. Просто звезды — слишком банально и в них нет души. Поэтому мы решили создать команду помощников для нашего героя: звездочку (куда ж без нее), мишень и молнию.

"

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


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

"

Программирование

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

1. Скорость и количество ошибок задается в админке, в настройках упражнения.
2. Награда пользователя по прохождению строки записывается в базу в виде числа 1-4.
3. Расчет наград за целый урок (по совокупности пройденных упражнений) ведется на выводе, на тех страницах, где это нужно показать.
4. При определении награда за урок дается, если все строки урока содержат эту же награду. Например, получить мишень можно, только если все упражнения урока были пройдены без ошибок.
5. Анимация происходит за счет изменения свойств css наград и управляется на JS. Состоит из 3 одинаковых по своей логике циклов для отображения 3 наград и запускается спустя 0,3 сек после обработки на ajax результатов прохождения упражнения и вывода их в модальное окно.

Результат

Если вы ожидали увидеть здесь супер-графики роста посещаемости, то вынуждена вас огорчить. Мы добавили небольшой элемент игры в одно из мест на сайте, и в большей степени это повлияло не на посещаемость, а на поведенческие тех пользователей, которые уже ходили к нам. Поэтому аналитику смотрели в основном по вернувшимся пользователям. В данном случае сравнивали 2 недели до закачки обновлений и после (дата Ч — 27 апреля).

Итак, что изменилось?

• Выросло количество просмотров страниц на 3%.
• Выросло среднее время нахождения на сайте на 4%.
• Выросло количество страниц на один сеанс на 3%.
• Уменьшился показатель отказов на 5%.

"

А вот сравнение 2 месяца до и после обновления.

"

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

Почему стоит геймифицировать ваш продукт

1. Вы становитесь ближе к пользователю.
   Классно делать продукт с каким-то героем. Вы можете взять животное и придумать оригинальное имя, которое будет ассоциироваться с вашим брендом. Можно придумать какого-то чудика или монстра.
2. Повышается узнаваемость бренда.
   Помните скрепку-помощника в ворде, ну классная же была. Можно оживлять любой предмет — главное не боятся и не ограничивать фантазию.
3. Увеличивается вовлеченность пользователя.
   Все просто: герои, награды, бейджи, баллы, фишки, очки и т. д. манят пользователя приходить к вам снова и снова. Проводить больше времени на сайте или зарабатывать очки с помощью 5 покупок в онлайн-магазине, или пробежать 5 километров, чтобы получить такой долгожданный бейдж. В этом поле очень много пространства для экспериментов.
4. Немного веселья во время работы еще никому не мешало.
   Позвонил 30 клиентам — получи монетку в админке, первым выставил счет — забери конфету, задеплоил фичу — +1 в карму. Небольшие мелочи привносят в работу сотрудников фан и азарт. А если еще все это сдобрить остроумными и ободряющими фразами, эффект будет еще круче!

На этом все, пойду пробегу свои 10 км, а то круги не закрыты.

P. S. Следующая статья будет про email-рассылки, в которых мы активно задействовали наших героев. Кстати, Ratatype существует еще на украинском, русском, французском и испанском языке. Так что можете пойти потренироваться.