Оглавление “Книги кейсов”

HTML Academy: вовлекающие в обучение тренажёры по фронтенд разработке

Комментарий эксперта

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

Здесь все игровые механики и сюжетные элементы идеально вписаны в практику пользователя. Их основная роль – сделать задания более интересными и юморными за счёт персонажей, “кошачьих” проблем, которые можно решить с помощью html-верстки. Графика здесь, с одной стороны, очень прикольная и вовлекающая, а с другой стороны, повторяющаяся. Многие задания повествуют об одних и тех же персонажах – котах Кексике, Рудольфе, еде и их домашних делах. Мне кажется, именно в этом суть геймификации проекта, а совсем не в личном профиле и не в достижениях, которые уже много где есть и сами по себе не сильно меняют поведение пользователей. Конечно, важно, чтобы твой послужной список был наглядным и отражал все твои реальные успехи, в том числе, участие в определённых хакатонах, некие выдающиеся достижения и обыгрывал полученные задания так, чтобы не было скучно говорить о них своим друзьями. Также здесь есть традиционные сертификаты, которые, кажется, сами соискатели любят больше, чем работодатели, для которых эти сертификаты сохраняются. Рейтинг пользователей пришёл из старых времён и сейчас уже не выглядит так современно и едва ли играет свою роль, когда лучших пользователей в рейтинге всего 50, а зарегистрированных на платформе больше миллиона.

Если у вас обучающий проект и сами задания достаточно формальные/скучные, то HTML Academy – это хороший пример того, как в любые задания добавить элемент истории, персонажей, как “переименовывать” скучные факты в прикольные достижения и при этом не слишком уходить в игру. Обычный пользователь, вполне, мог бы сказать, что здесь и нет никакой геймификации.  

Илья Курылев, эксперт в области геймификации, CEO студии Gamification Now!

Используемые механики

Игровой персонаж
Персонаж, который общается с пользователем эмоционально, заменяя сообщения от "бездушной" системы
Рейтинг пользователей
Единая система сравнения успехов пользователей между собой
Достижения
Отражают достигнутые успехи пользователя
Профиль пользователя
Место, где отображаются все достижения и игровые параметры пользователя
Квест с заданиями
Конкретные шаги для достижения конкретной цели
Визуализация прогресса
Наглядная визуализация развития пользователя в рамках проекта, основанная на его пользе и ценностях
Мини-игра
Интенсивный игровой опыт на несколько минут с развлекательной, образовательной или другой целью
Сюжет
Донесение послания через проживание пользователем истории

HTML Academy — школа профессионального онлайн-обучения по вёрстке и программированию с нуля

Задачи 

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

Используемые механики

Игровой персонаж
Персонаж, который общается с пользователем эмоционально, заменяя сообщения от "бездушной" системы
Рейтинг пользователей
Единая система сравнения успехов пользователей между собой
Достижения
Отражают достигнутые успехи пользователя
Профиль пользователя
Место, где отображаются все достижения и игровые параметры пользователя
Квест с заданиями
Конкретные шаги для достижения конкретной цели
Визуализация прогресса
Наглядная визуализация развития пользователя в рамках проекта, основанная на его пользе и ценностях
Мини-игра
Интенсивный игровой опыт на несколько минут с развлекательной, образовательной или другой целью
Сюжет
Донесение послания через проживание пользователем истории

Решение

HTML Academy — платформа для учеников и учителей с интерактивными тренажёрами по фронтенд разработке (HTML, CSS, SVG и JavaScript), реализованными в виде онлайн-уроков с заданиями, рейтингом и наградами. Все тренажеры сделаны под отдельные технологии, в которых уроки выстроены системно по уровню сложности, а также разработан один сквозной тренажёр «Великий Кексби», в котором ученики с нуля верстают магазин кота Кекса. Кот Кекс – пресонаж-инструктор, который помогает обучаться. 

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

alexander-pershin
Александр Першин, основатель htmlacademy.ru, преподаватель НИУ ИТМО
«"Открытый профиль" мы тоже относим к игровым механикам, так как он эксплуатирует некоторые человеческие качества и влияет на мотивацию. Конечно, это зависть и тщеславие, когда ты показываешь всем чего добился, а кто-то может зайти в твой профиль и захотеть столько же достижений как у тебя. Но наверное, главный эффект можно назвать так: «раз они смогли, то и я смогу». Когда ученик видит огромное количество людей, таких же как он, которые справились со сложным курсом, то он понимает, что тоже справится».

Задания и достижения

Ученики за выполнение заданий получают «ачивки», которые отображаются в собственном открытом профиле ученика. Количество полученных достижений влияет также и на позицию ученика в рейтинге (о рейтинге см. ниже).

Задания – основная игровая механика, все обучение состоит из серии заданий.

Где применяются задания:

интерфейс одного из обучающих блоков
практическое задание

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

испытание

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

Также постепенно усложняются и формулировки задач:

В первом случае ученик просто копирует и вставляет нужные значения, знакомится со свойством. Во втором уже нужно вспоминать названия свойств или какие-либо приёмы. А в третьем — анализировать код, включать логическое мышление.

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

alexander-pershin
Александр Першин, основатель htmlacademy.ru, преподаватель НИУ ИТМО
"У нас были и неудачные примеры испытаний, где мы перегибали со сложностью. Вот пример исходного сложного задания и его упрощённой версии из курса про меню: в первой версии было много трудно подбираемых отступов и неконтрастных элементов. Упрощённый вариант более контрастный и в нём используется правило «пяти пикселей», когда все размеры, отступы и параметры шрифта кратны пяти — оно позволяет избавиться от ненужных угадываний размеров и избыточной сложности".

Достижения 

Все достижения — это, своего рода, задания по освоению платформы:

И другие 

Почти все из достижений связаны с прохождением того или иного курса. Но также есть и несколько достижений другого типа. Например, достижения "Серьезные намерения", "Соратник", "На секретной службе ее величества", "Электропочта", "Из России с любовью", "Покаритель испытаний" и еще несколько других. Они предлагают игроку оформить платную подписку, стать партнером HTML Academy, выполнить бонусные задания, подтвердить свой электронный адрес или пройти 20 испытаний с результатом 100.

Мгновенная обратная связь

Ученик видит результат работы своего кода и реакцию системы на него практически мгновенно, и сразу понимает прав он или нет. Без необходимости нажимать кнопку «Проверить».

Перфекционизм

"Очень интересная механика, которая выстрелила абсолютно неожиданно для нас. Иногда её называют «прогрессбар». Суть: чтобы пройти испытание, нужно, чтобы уровень схожести результата и образца превысил 90%, больше мы не требуем. Но очень многие хотят непременно набрать 100%.

Это приводит к интересным последствиям. Во-первых, повышается вовлечённость в процесс обучения. Для простого прохождения испытания обычно достаточно 10-20 минут, а для идеального — до 6 часов. Во-вторых, ученики не просто зависают на одном испытании, а перепроходят курсы, гуглят описания свойств и детально разбираются в их работе, проходят следующие, более сложные курсы, чтобы вернуться и одолеть испытание на 100%. Конечно, это похвально, но есть и негативные эффекты, которые заключаются в том, что человек может тратить чрезмерное количество времени, чтобы добить жалкие 2-3 процента, когда способ решения задачи уже ясен. Очень хорошо перфекционизм сочетается с головоломками, а раскалывание головоломки на 100% доставляет, пожалуй, больше всего удовольствия".

Мини-игры

Серия заданий в курсе или сам курс создаются в формате игры. Например, серия заданий на «перетягивание курочки» с помощью изменения приоритета селекторов в курсе про каскадность.

Сторителлинг

Задания в курсе или несколько курсов объединены общей идеей или сценарием. Например, курс про селекторы объединён темой биатлона и идеей «стрельбы селекторами по мишеням». Cторителлинг проявляется и в едином оформлении заданий, и в сюжетных ходах внутри курса. Задача сторителлинга — добавить эмоциональную составляющую, пробудить интерес, желание узнать «чем в итоге всё закончилось-то?» и дойти до конца курса.

alexander-pershin
Александр Першин, основатель htmlacademy.ru, преподаватель НИУ ИТМО
"Сторителлинг отлично сочетается с мини-играми. Например, в курсе про каскадирование финальное задание перекликается с серией заданий про «битву за курочку» и мы получаем драматическую развязку курса с учеником в роли спасителя и супергероя".

Рейтинги

На платформе есть общий рейтинг, ТОП-50 лучших. В него достаточно сложно попасть, так как на платформе более 20 тысяч активных участников. 

Игровой персонаж
Персонаж, который общается с пользователем эмоционально, заменяя сообщения от "бездушной" системы
Рейтинг пользователей
Единая система сравнения успехов пользователей между собой
Достижения
Отражают достигнутые успехи пользователя
Профиль пользователя
Место, где отображаются все достижения и игровые параметры пользователя
Квест с заданиями
Конкретные шаги для достижения конкретной цели
Визуализация прогресса
Наглядная визуализация развития пользователя в рамках проекта, основанная на его пользе и ценностях
Мини-игра
Интенсивный игровой опыт на несколько минут с развлекательной, образовательной или другой целью
Сюжет
Донесение послания через проживание пользователем истории

Результат 

Используемые механики

Игровой персонаж
Персонаж, который общается с пользователем эмоционально, заменяя сообщения от "бездушной" системы
Рейтинг пользователей
Единая система сравнения успехов пользователей между собой
Достижения
Отражают достигнутые успехи пользователя
Профиль пользователя
Место, где отображаются все достижения и игровые параметры пользователя
Квест с заданиями
Конкретные шаги для достижения конкретной цели
Визуализация прогресса
Наглядная визуализация развития пользователя в рамках проекта, основанная на его пользе и ценностях
Мини-игра
Интенсивный игровой опыт на несколько минут с развлекательной, образовательной или другой целью
Сюжет
Донесение послания через проживание пользователем истории

В продолжение темы: