Компания
42,23
рейтинг
16 апреля 2014 в 22:14

Разработка → 10 игровых механик в HTML Academy

В тот момент, когда начиналась разработка HTML Academy, мы достаточно серьёзно играли в WOW, да и, вообще, были поклонниками игр Blizzard со стажем. Поэтому с игровыми механиками были знакомы достаточно хорошо, хотя сами этого не подозревали. Многие интересные механизмы появились в академии, как нам казалось, сами по себе. Но позже выяснилось, что на самом деле они называются «игровыми механиками», а мы их неосознанно взяли из игровой практики.



Оказалось, что игровые механики это не только банальные и грубые «очки и бейджики», но и более тонкие приёмы, нацеленные на работу с мотивацией пользователя. В нашем случае главной целью было сделать так, чтобы ученики проходили курсы до конца, учились внимательнее и усерднее. Просто «нескучных» курсов для этого мало, ведь для достижения нашей цели нужно, чтобы обучение затягивало и доставляло удовольствие. Постепенно мы опробовали и приняли на вооружение ряд игровых механик, о которых и хотим рассказать.

Наши игровые механики


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

А сейчас подробно и с примерами разберём каждую из механик.

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


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

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



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

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

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


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

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

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



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



Постепенно усложнять можно и формулировки задач, сравните эти три:
  • «Задайте свойству width значение 450px»
  • «Задайте ширину элемента 450px и отцентруйте его»
  • «Найдите и исправьте ошибки в HTML-коде»

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

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

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



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

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

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


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

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



А в этом испытании, посвящённом свойству float CSS полностью готов, но отсутствует часть HTML-кода. Ученику нужно записать HTML-тэги с определёнными классами в правильном порядке, чтобы получить такую простую мозаику. Порядок блоков и CSS-свойства подобраны таким образом, чтобы ученик в процессе разгадывания головоломки столкнулся со всеми странностями флоатных элементов.



Головоломки обладают отличным балансом сложности и интересности.

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


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



Вспомните свою любимую стрелялку: сразу после выстрела вы видите попадание (внешний результат), а также увеличение количества фрагов (реакция системы) и понимаете, что всё сделали правильно. А теперь представьте, что после каждого выстрела нужно нажать кнопку «Проверить» и ждать несколько секунд, чтобы узнать, попали ли. Удовольствие от игры убито.

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

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


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



Это приводит к интересным последствиям.

Во-первых, повышается вовлечённость в процесс обучения. Для простого прохождения испытания обычно достаточно 10-20 минут, а для идеального — до 6 часов.

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

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

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

6. Мини-игры


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



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

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


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

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

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



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


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



9. Рейтинги


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

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



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


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

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

Другие механики


Есть некоторые механики, которые мы не применяем, но очень хотели бы попробовать.

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

Вторая механика — это так называемые периодические задания, которые призваны помочь заниматься с регулярной периодичностью и не бросать обучение. Эта механика часто применяется в играх, где есть задания, которые можно выполнять раз в день или раз в неделю (называются «дейлики» или «виклики») и получить какую-то награду. И каждый день или неделю эти задания обновляются. Такой подход мотивирует игроков заходить в игру с определённой периодичностью.

В обучении этот приём нужно применять аккуратно, чтобы не затормозить тех, кто учится быстрее.

Комбинирование механик


Многие механики очень хорошо сочетаются друг с другом. У нас получилось создать целую комбинацию:
  1. головоломки;
  2. перфекционизм;
  3. достижения;
  4. рейтинг;
  5. открытые профили.

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

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


Влияют ли как-то игровые механики на эффективность обучения? Есть какие-то точные цифры? Стоит ли их внедрять?

Хорошие вопросы, но чёткие ответы есть не на все.

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

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

Но есть качественные оценки, которые приходят в виде отзывов от наших учеников, например, вот такие:



Когда мы видим подобные отзывы, то понимаем, что двигаемся в правильном направлении, обучение действительно затягивает и доставляет удовольствие, а игровые механики внедрять и использовать стоит.
Автор: @AlexPershin
HTML Academy
рейтинг 42,23

Комментарии (20)

  • +4
    Александр, вы делаете отличное дело. Только не останавливайтесь.
    • +4
      Спасибо, Яша. Да мы только начинаем =)
      • 0
        Был бы счастлив увидеть в Ваших курсах JS, как альтернативу: try.jquery.com/ и www.codeschool.com/paths/javascript
        В планах есть? :)
        • 0
          Есть, но пока в более отдалённых. И в более прикладном варианте.
        • 0
          По JS можно попробовать codewars.com
          Подход в целом тоже где-то похожий)
        • 0
          Есть отличный проект webtheory.net/course/js/20/, правда, там исключительно видео, но все равно круто
  • 0
    Спасибо за статью, вы действительно многое сделали в игрофикации обучения. Мы в своих курсах на CleverBear используем только 1, 2, 4 и 7 пункты. Однако если взять тот же CodeSchool, то у них также нет такого количества механик. Что не мешает им эффективно и интересно обучать. Как считаете, какая из механик в вашем случае дает максимальный эффект для вовлечения в обучение?
    • 0
      Про CodeSchool можно спорить. Я там 1-2 часа провёл знакомясь с заданиями, курсы показались достаточно слабыми в плане проработки, наглядности, объёма материала и так далее. Возможно, надо заплатить им 25$ и пройти последние, посмотреть, сильно ли там всё изменилось.
      По поводу вовлечения — мы механики разместили как раз в порядке убывания значимости. Самые важные наверху. Они влияют не только на пользователя, но и на само содержание курсов и процесс их создания. А те же достижения из нижней части не влияют.
  • 0
    Курс отличный, сам прохожу его в целях самообразования, правда я «злостный двоечник» по причине дефицита времени, но все равно закончу курс потихоньку. Александр большой респект вам и вашему проекту, есть предложение по продвижению его в моих проектах, отпишу в личку в ВК. Привет Кексу!
  • 0
    Спасибо за статью!
    По поводу цифр. Можно ведь мерить что-то чуть более косвенное.
    Например, измерить количество попыток что-то поменять, когда прогрессбар уже показывает больше 90%.
    Мне вот интересно какая доля всех людей вовлекается в перфекционизм, например. Вдруг это всего полпроцента? Но самые заметные полпроцента.
    • +1
      Это по статистике достижений можно посмотреть: htmlacademy.ru/achievments/
      Там есть несколько ачивок с идеальными испытаниями, но самая серьёзная эта: «Покоритель испытаний, пройти 20 испытаний с результатом 100%»
      Этих заработано 502. А «5 идеальных испытаний» уже 4844. Т.е. получается больше чем полпроцента.
      Измерять много чего можно, только мы изначально концентрировались не на исследованиях, а на создании курсов, поэтому и механизмов сбора подробной статистики не заложили. Мне пока хватает экспериментов над своими студентами в ИТМО =) Даже статью писали об этом.
  • 0
    Алекс, а есть ли у вас планы по франшизе курсов для различных учебных заведений?..
    К примеру, я веду в частном учебном центре детский курс по введению в джаваскрипт на примере игр, и мне было бы интересно сделать в вашей системе виртуальный класс для своих учеников и использовать ваши инструменты для обучения, за какое-то вознаграждение с моей стороны.
    • 0
      Планы по сотрудничеству, конечно, есть. Например, мы уже сотрудничаем с ИТМО, они запустили курс на своей платформе, с которым наш интегрирован. Т.е. студенты проходят курсы у нас, а оценки передаются на платформу ИТМО. Позже ИТМО выдаёт сертификат. courses.ifmo.ru/

      А вообще над франшизой не думали пока серьёзно (даже непонятно что это такое в обучении). Дело в том, что сейчас львиная доля курсов бесплатна и есть открытые профили. Т.е. базовый цикл (который достаточно серьёзный и объёмный сам по себе) может легко использоваться любым преподавателем или учебным заведением. Я сам так у студентов лабораторные веду. Они регистрируются и проходят курсы, а я проверяю их прогресс. Была задумка упростить эти процессы для преподавателей, чтобы можно было в профиле собрать своих студентов в один список.

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

      Мы готовы к любому сотрудничеству, пишите, обсудим подробнее.
      • 0
        Учебным центрам была бы интересна возможность создавать в вашей системе свои классы и контролировать в них успеваемость. Т.е. не бегать по разным аккаунтам учеников а иметь какое-то централизованное управление.
        И да, это можно вынести в какой-то платный/условно-платный АПИ чтобы можно было на базе вашего ресурса создавать классы.
  • 0
    я залип, спасибо за работу!
  • 0
    1. Странно, что не упомянули обратную сторону рейтингов — демотивация. Т.е. на некоторых людей они действуют ровно наоборот: «Они в топе, чего мне пытаться, всё равно не догоню.» Если честно, сам иногда ловлю себя на такой мысли.

    2. Мелочь, но всё же (: в некоторых играх ежедневные задания называют «ежи». По мне так милее и роднее (да ещё и короче), чем дейлики.

    3. Спасибо за статью! Почерпнул для себя много полезного. Всё-таки реальные примеры пользы игрофикации, мотивируют на организацию чего-то подобного в своей деятельности.
    • 0
      Мы упоминали, что у нашего рейтинга есть проблемы. Предлагали некоторые черновые варианты решения. Я согласен с тем, что рейтинги штука тонкая и работать будут не всегда.

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

      Тем, кто из вова «дейлики» милее =)
      • 0
        Скорее не из вова, а из англоязычных игр вообще. По сути же, обычная транслитерация игрового сленга.
        Хотя вот не помню, были ли на момент TBC ещё где-то именно daily quests. Repeatable были, но награды были не очень. А дэйлики получили ассоциацию, как фармовые квесты.
  • 0
    Мне этот ваш пиксель хантинг в некоторых курсах изрядко нервы потрепал, когда парочка неправильных на пару пикселей маргинов и пэдингов не дают получить даже 90%, при этом ты понимаешь, что все сделано верно, просто точности не хватает. Лично мне этим заниматься было совсем не интересно. Еще в этом плане разражали три попытки, а точнее даже не то, что попытки просто три, а то, что чтобы проверить изменения какого-нибудь пэдинга на пару пикселей, нужно тратить попытку.

    А так, курс ваш очень нравится, узнал немножко новой информации.
    • 0
      Вот поэтому столько внимания в статье и посвящено борьбе с избыточной сложностью. Всё-таки проекту уже два года и первые испытания писались без этого опыта. Сейчас стараемся делать такие испытания, чтобы в них приходилось больше разбираться с вопросами из темы курса, а не с пикселями. С этим и головоломки помогают, и правило 5px и так далее.

      Надеюсь, в недавно вышедших курсах (сетки, каскадирование, градиенты) эти изменения в испытаниях заметны.

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

Самое читаемое Разработка