HTML Academy: как коты и юмор делают обучение фронтенду затягивающим

HTML Academy , онлайн-школа по вёрстке и программированию с нуля. Классический пример геймификации в обучении. Одна из старейших образовательных площадок в рунете для тех, кто хочет стать фронтенд-разработчиком.

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

Тренажёры и кот Кекс

Платформа построена на интерактивных тренажёрах по HTML, CSS, SVG и JavaScript. Есть отдельные курсы по технологиям и сквозной тренажёр «Великий Кексби»: верстаешь магазин кота Кекса с нуля. Кот Кекс, персонаж-инструктор, который постал в заданиях и комментирует твой прогресс. Звучит по-детски, но по факту даже взрослые разработчики привязываются к этому коту.

Открытый профиль

У каждого ученика публичный профиль со статистикой, достижениями и сертификатами. Основатель Александр Першин объясняет: «Открытый профиль. Тоже игровая механика. Это зависть и тщеславие, когда показываешь, чего добился. Но главный эффект, "раз они смогли, то и я смогу"».

Три формата заданий

Тренажёры, пишешь код и сразу видишь результат. Испытания: результат должен совпадать с образцом (минимум 90% для зачёта). Мини-игры, серии заданий в игровой обёртке, вроде «перетягивания курочки» через CSS-селекторы.

Усложнение плавное: сначала «задайте width: 450px», потом «задайте ширину и отцентруйте», затем «найдите и исправьте ошибки в HTML-коде».

Ловушка перфекциониста

Для зачёта достаточно 90% совпадения с образцом. Многие гонятся за 100%. И тут вскрывается хитрость: простое прохождение занимает 10-20 минут, а идеальное до 6 часов. Вовлечённость вырастает в 6-20 раз, причём добровольно. Ученики перепроходят курсы и гуглят CSS-свойства ради последних процентов.

Сюжеты внутри заданий

Курс про селекторы оформлен как биатлон со «стрельбой по мишеням». Каскадирование, «битва за курочку». Першин: «Сторителлинг отлично работает с мини-играми. Финальное задание это драматическая развязка курса, где ученик становится супергероем».

Бейджи и достижения

«Алхимик цвета», «Теневой мастер», «Строитель», «Суперснайпер», за курсы. «Покоритель испытаний» 20 испытаний на 100%. Есть и ироничные: «Серьёзные намерения» за оформление платной подписки, «Электропочта», за подтверждение email.

Рейтинг

ТОП-50 лучших учеников среди 20 000+ активных участников.

Результаты проекта

• - 1 265 948 зарегистрированных пользователей
• - 102 333 141 выполненных заданий
• - В среднем 1 500 заданий за три месяца обучения

HTML Academy показывает, что для вовлечения в обучение не нужны сложные игровые механики. Достаточно персонажей, юмора в формулировках заданий и механики перфекционизма (90% vs 100%), чтобы ученики тратили в разы больше времени на задания, добровольно и с удовольствием.