Геймификация в образовании: 10 игровых механик HTML Academy, которые вы успешно можете использовать

Геймификация — тренд последних лет и является инструментом для увеличения вовлеченности пользователей с помощью использования игровых механик в неигровом контексте. В последнее время мы много писали об использовании геймификации и, в частности, в сфере образования. HTML Academy — один из российских проектов, который эффективно использует игровые механики…
Эта информация пылится в архиве — вдруг устарела.

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

Геймификация — тренд последних лет и является инструментом для увеличения вовлеченности пользователей с помощью использования игровых механик в неигровом контексте. В последнее время мы много писали об использовании геймификации и, в частности, в сфере образования. HTML Academy — один из российских проектов, который эффективно использует игровые механики для мотивации своих пользователей.

Проект HTML Academy — это сервис интерактивного обучения HTML и CSS, цель которого — сделать обучение максимально интересным и затягивающим. С самого начала пользователей учат работать с живым кодом и самостоятельно писать код, решая задачи, приближенные к реальным. Также ученику периодически приходится проходить испытания, принцип которых — «сверстай, как показано в образце».

Разработчики проекта являются большими поклонниками игр Blizzard, поэтому с игровыми механиками были знакомы достаточно хорошо, хотя сами этого не подозревали. Постепенно пробовались различные варианты, и на данный момент HTML Academy использует следующие игровые механики:

  1. постепенная подача информации;
  2. принцип постепенного усложнения;
  3. головоломки;
  4. мгновенная обратная связь;
  5. «перфекционизм»;
  6. мини-игры;
  7. «сторителлинг»;
  8. достижения и очки;
  9. рейтинги;
  10. открытые профили.

 1. Постепенная подача информации

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

 2. Принцип постепенного усложнения

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

Геймификация. Состояние потока. Фото Flickr. CC BY 2.0
Состояние потока: необходимо найти правильное соотношение необходимых навыков и сложности задания .

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

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

Применяя эту механику, необходимо придерживаться следующих правил:

  • сложность должна расти постоянно и очень плавно;
  • нельзя допускать очень сложных заданий, так как они могут напрочь убить желание учиться;
  • нужно постоянно балансировать сложность заданий, следя за статистикой и отзывами;
  • слишком простые задания постоянно делать не стоит — они скучны.

3. Головоломки

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

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

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

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

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

5. «Перфекционизм»

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

  • повышается вовлеченность в процесс обучения: для простого прохождения испытания обычно достаточно 10-20 минут, а для идеального — до 6 часов;
  • ученики не просто зависают на одном испытании, а перепроходят курсы, детально разбираются в их работе, проходят следующие, более сложные курсы, чтобы вернуться и одолеть испытание на 100%.

Здесь есть и отрицательная сторона: человек может тратить большое количество времени, когда способ решения задачи уже ясен.

Перфекционизм хорошо сочетается с головоломками, так как решение головоломки на 100% доставляет наибольшее удовольствие.

6. Мини-игры

Эта механика заключается в том, что серия заданий в курсе или сам курс создаются в формате игры.

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

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

7. «Сторителлинг»

Данная игровая механика работает, когда несколько заданий или курсов объединены общей идеей или сценарием. Например, курс про селекторы объединен темой биатлона и идеей «стрельбы селекторами по мишеням».

Задача сторителлинга — добавить эмоции и пробудить интерес, желание узнать, «чем все в итоге закончилось?», и дойти до конца курса.

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

8. Достижения и очки

За выполнение определенных действий или за получение каких-либо результатов пользователю даются виртуальные награды-значки.

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

9. Рейтинги

Цель механики —  пробуждать дух соревновательности, публикуя рейтинги лучших учеников.

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

10. Открытые профили

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

 Эффект использования геймификации

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

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