HTML Academy – один из самых старых проектов с геймификацией, которые я встречал. Он до сих пор актуален. За все время существования создатели не стали очень наращивать набор механик, но отточили их до совершенства.
Здесь все игровые механики и сюжетные элементы идеально вписаны в практику пользователя. Их основная роль – сделать задания более интересными и юморными за счёт персонажей, “кошачьих” проблем, которые можно решить с помощью html-верстки. Графика здесь, с одной стороны, очень прикольная и вовлекающая, а с другой стороны, повторяющаяся. Многие задания повествуют об одних и тех же персонажах – котах Кексике, Рудольфе, еде и их домашних делах. Мне кажется, именно в этом суть геймификации проекта, а совсем не в личном профиле и не в достижениях, которые уже много где есть и сами по себе не сильно меняют поведение пользователей. Конечно, важно, чтобы твой послужной список был наглядным и отражал все твои реальные успехи, в том числе, участие в определённых хакатонах, некие выдающиеся достижения и обыгрывал полученные задания так, чтобы не было скучно говорить о них своим друзьями. Также здесь есть традиционные сертификаты, которые, кажется, сами соискатели любят больше, чем работодатели, для которых эти сертификаты сохраняются. Рейтинг пользователей пришёл из старых времён и сейчас уже не выглядит так современно и едва ли играет свою роль, когда лучших пользователей в рейтинге всего 50, а зарегистрированных на платформе больше миллиона.
Если у вас обучающий проект и сами задания достаточно формальные/скучные, то HTML Academy – это хороший пример того, как в любые задания добавить элемент истории, персонажей, как “переименовывать” скучные факты в прикольные достижения и при этом не слишком уходить в игру. Обычный пользователь, вполне, мог бы сказать, что здесь и нет никакой геймификации.
Илья Курылев, эксперт в области геймификации, CEO студии Gamification Now!
HTML Academy — школа профессионального онлайн-обучения по вёрстке и программированию с нуля
HTML Academy — платформа для учеников и учителей с интерактивными тренажёрами по фронтенд разработке (HTML, CSS, SVG и JavaScript), реализованными в виде онлайн-уроков с заданиями, рейтингом и наградами. Все тренажеры сделаны под отдельные технологии, в которых уроки выстроены системно по уровню сложности, а также разработан один сквозной тренажёр «Великий Кексби», в котором ученики с нуля верстают магазин кота Кекса. Кот Кекс – пресонаж-инструктор, который помогает обучаться.
Все ученики имеют открытый профиль (любой желающий может посмотреть его) с статистикой пройденных тренажёров (сколько курсов прошел игрок, сколько заданий в нем сделал), достижениями (виртуальные награды за пройденные тренажеры и освоение платформы) и полученными сертификатами.
«"Открытый профиль" мы тоже относим к игровым механикам, так как он эксплуатирует некоторые человеческие качества и влияет на мотивацию. Конечно, это зависть и тщеславие, когда ты показываешь всем чего добился, а кто-то может зайти в твой профиль и захотеть столько же достижений как у тебя. Но наверное, главный эффект можно назвать так: «раз они смогли, то и я смогу». Когда ученик видит огромное количество людей, таких же как он, которые справились со сложным курсом, то он понимает, что тоже справится».
Ученики за выполнение заданий получают «ачивки», которые отображаются в собственном открытом профиле ученика. Количество полученных достижений влияет также и на позицию ученика в рейтинге (о рейтинге см. ниже).
Задания – основная игровая механика, все обучение состоит из серии заданий.
Суть испытаний, по мнению авторов платформы, — это достаточно сложное на первый взгляд, но принципиально решаемое задание. Самое главное, что и ученик понимает, что способен решить головоломку. И чем она сложнее, тем приятнее её раскусить, особенно если во время разгадывания ещё чему-то учишься. Они обладают отличным балансом сложности и интересности.
Все задания построены по принципу усложнения. Например, практическое задание с таблицами, представленное на картинке ниже: первая таблица очень простая, затем появляются объединения ячеек, а напоследок добавляются фоны, выравнивание текста в ячейках, управление шириной колонок.
Также постепенно усложняются и формулировки задач:
В первом случае ученик просто копирует и вставляет нужные значения, знакомится со свойством. Во втором уже нужно вспоминать названия свойств или какие-либо приёмы. А в третьем — анализировать код, включать логическое мышление.
А также усложняются испытания от начальных курсов базового цикла к завершающим. От нескольких заголовков и абзацев, до блока с большим количеством мелких деталей.
"У нас были и неудачные примеры испытаний, где мы перегибали со сложностью. Вот пример исходного сложного задания и его упрощённой версии из курса про меню: в первой версии было много трудно подбираемых отступов и неконтрастных элементов. Упрощённый вариант более контрастный и в нём используется правило «пяти пикселей», когда все размеры, отступы и параметры шрифта кратны пяти — оно позволяет избавиться от ненужных угадываний размеров и избыточной сложности".
Все достижения — это, своего рода, задания по освоению платформы:
И другие
Почти все из достижений связаны с прохождением того или иного курса. Но также есть и несколько достижений другого типа. Например, достижения "Серьезные намерения", "Соратник", "На секретной службе ее величества", "Электропочта", "Из России с любовью", "Покаритель испытаний" и еще несколько других. Они предлагают игроку оформить платную подписку, стать партнером HTML Academy, выполнить бонусные задания, подтвердить свой электронный адрес или пройти 20 испытаний с результатом 100.
Ученик видит результат работы своего кода и реакцию системы на него практически мгновенно, и сразу понимает прав он или нет. Без необходимости нажимать кнопку «Проверить».
"Очень интересная механика, которая выстрелила абсолютно неожиданно для нас. Иногда её называют «прогрессбар». Суть: чтобы пройти испытание, нужно, чтобы уровень схожести результата и образца превысил 90%, больше мы не требуем. Но очень многие хотят непременно набрать 100%.
Это приводит к интересным последствиям. Во-первых, повышается вовлечённость в процесс обучения. Для простого прохождения испытания обычно достаточно 10-20 минут, а для идеального — до 6 часов. Во-вторых, ученики не просто зависают на одном испытании, а перепроходят курсы, гуглят описания свойств и детально разбираются в их работе, проходят следующие, более сложные курсы, чтобы вернуться и одолеть испытание на 100%. Конечно, это похвально, но есть и негативные эффекты, которые заключаются в том, что человек может тратить чрезмерное количество времени, чтобы добить жалкие 2-3 процента, когда способ решения задачи уже ясен. Очень хорошо перфекционизм сочетается с головоломками, а раскалывание головоломки на 100% доставляет, пожалуй, больше всего удовольствия".
Серия заданий в курсе или сам курс создаются в формате игры. Например, серия заданий на «перетягивание курочки» с помощью изменения приоритета селекторов в курсе про каскадность.
Задания в курсе или несколько курсов объединены общей идеей или сценарием. Например, курс про селекторы объединён темой биатлона и идеей «стрельбы селекторами по мишеням». Cторителлинг проявляется и в едином оформлении заданий, и в сюжетных ходах внутри курса. Задача сторителлинга — добавить эмоциональную составляющую, пробудить интерес, желание узнать «чем в итоге всё закончилось-то?» и дойти до конца курса.
"Сторителлинг отлично сочетается с мини-играми. Например, в курсе про каскадирование финальное задание перекликается с серией заданий про «битву за курочку» и мы получаем драматическую развязку курса с учеником в роли спасителя и супергероя".
На платформе есть общий рейтинг, ТОП-50 лучших. В него достаточно сложно попасть, так как на платформе более 20 тысяч активных участников.
