10 game mechanics in HTML Academy
At that moment, when the development of HTML Academy began , we were seriously playing WOW, and, in general, we were fans of Blizzard games with experience. Therefore, they were familiar with the game mechanics quite well, although they themselves did not suspect it. Many interesting mechanisms appeared in the academy, as it seemed to us, by themselves. But later it turned out that in fact they are called “game mechanics”, and we unknowingly took them from playing practice.
It turned out that game mechanics are not only banal and coarse “glasses and badges”, but also more subtle techniques aimed at working with the user's motivation. In our case, the main goal was to make students take courses to the end, learn more carefully and more diligently. It’s just that there are not enough “boring” courses, because in order to achieve our goal it is necessary that the training be delayed and enjoyable. Gradually, we tried and adopted a number of game mechanics, which we want to talk about.
Here are the mechanics that we use when creating courses, at the top of the list are more important and important:
And now we will analyze each of the mechanic in detail and with examples.
')
The essence of the technique is that large and complex tasks or pieces of theory are divided into small and simple ones and are combined into a series of tasks.
The example below shows a series of tasks from the course about backgrounds, in which we will step by step acquaint the student with the “background” properties.
We use this mechanics very often:
If we return to the analogy with the games, then there this mechanic is used quite often. Remember the so-called quest chains, each of which is fairly simple and sometimes broken down into even simpler subtasks. In this case, the chains themselves can be very long.
The essence of mechanics is that the student must always feel progress and progress. Recall any game in the RPG genre, in which you first level up the levels, and having reached the maximum, you start pumping with equipment to cope with more and more difficult opponents. The feeling of progress is a pleasure, makes you continue to play or study further.
In training courses, the feeling of progress can appear only when the student performs more and more complex tasks.
The example shows how difficult are the tests inside the course about tables. The first table is very simple, then merge cells appear, and finally backgrounds are added, text alignment in the cells, and column width control.
And so the tests are complicated from the initial courses of the basic cycle to the final ones. From a few headings and paragraphs, to a block with lots of small details.
Gradually complicate the formulation of tasks, compare these three:
In the first case, the student simply copies and inserts the desired values, becomes familiar with the property. In the second, you need to remember the names of the properties or any tricks. And in the third - to analyze the code, to include logical thinking.
Applying this mechanics, you should adhere to the following rules:
We also had unsuccessful examples of tests where we went too far with complexity. Here is an example of the original complex task and its simplified version of the menu course.
In the first version there were a lot of difficult indents and non-contrast elements. The simplified version is more contrasting and it uses the rule of “five pixels”, when all sizes, indents and font parameters are multiples of five - it allows you to get rid of unnecessary guessing of sizes and excessive complexity.
Of course, there are other ways to simplify assignments and help stuck students: tips, the ability to get the right answers, support, comment system.
The essence of the puzzle is simple - it is quite difficult at first glance, but a fundamentally solvable task. The most important thing is that the student understands that he is able to solve the puzzle. And the harder it is, the nicer it is to figure it out, especially if you still learn something while deciphering.
In this trial, HTML and CSS are ready, but there are no selectors. The apprentice just needs to pick the right selectors to get a picture of the targets. Of course, it is very difficult for an unprepared person to create such an example from scratch, but in the format of a puzzle, this is quite possible for him.
And in this test , dedicated to the
Puzzles have an excellent balance of complexity and interestingness.
Simple and very important mechanics. Essence - the student sees the result of the work of his code and the reaction of the system to it almost instantly, and immediately understands whether he is right or not. Without the need to press the "Check" button.
Remember your favorite shooter: right after the shot you see a hit (external result), as well as an increase in the number of frags (system response) and understand that you did everything right. Now imagine that after each shot, you need to press the "Check" button and wait a few seconds to find out if you have fallen. The pleasure of the game is killed.
Even better, this mechanic works when the task is split into several simpler subtasks. In this case, the feedback loop is reduced as much as possible and the cost of the error is significantly reduced. After all, the volume of tasks becomes less, and to check the next solution, you need to write less code. When performing a task, a student works in small iterations, almost the same as many designers and programmers, who check the result after every few lines of code, work. Yes, and training with this approach becomes like a game.
Very interesting mechanics, which shot absolutely unexpectedly for us. Sometimes it is called the "progress bar." The essence is this: in order to pass the test, it is necessary that the level of similarity of the result and the sample exceed 90%, we no longer require. But many people really want to earn 100%.
This leads to interesting consequences.
First, the involvement in the learning process increases. For simple passing of the test, usually 10–20 minutes is enough, and for the ideal - up to 6 hours.
Secondly, students do not just hang out on one test, but pereprohody courses, google descriptions of properties and understand in detail their work, pass the following, more complex courses to return and overcome the test by 100%.
Of course, this is commendable, but there are also negative effects, which consist in the fact that a person can spend an excessive amount of time to finish off a measly 2-3 percent, when the way to solve a problem is already clear.
Perfectionism is very well matched with puzzles, and splitting a puzzle by 100% is perhaps the most fun.
An interesting mechanic that we tried for the first time just recently. It consists in the fact that a series of tasks in the course or the course itself are created in the format of the game. Our example is quite simple: we created a series of tasks for “pulling a hen” by changing the priority of selectors in the course of cascading.
But an even more interesting example recently circled the entire community of developers and designers. This is a CSS Diner game dedicated to learning selectors. Your task is to select either plates or fruits on them with the help of suitable selectors.
Storytelling is a versatile mechanic. For example, when tasks in a course or even several courses are united by a common idea or scenario. For example, the course on selectors is united by the theme of biathlon and the idea of ​​“shooting target selectors”. Storytelling can manifest itself in a single design of tasks, and in plot moves within the course, and so on.
The task of storytelling is simple - to add an emotional component, to awaken interest, a desire to learn “how did it all end up?” And reach the end of the course.
Storytelling is great with mini-games. For example, in the course of cascading, the final task echoes the series of tasks about the “battle for the hen” and we get a dramatic denouement of the course with the student as a savior and superhero.
This is a fairly well-known mechanic: the user is given virtual rewards and badges for performing certain actions or for obtaining any results. We also use achievements. But we believe that the effect of the application of achievements is not so high. It is rather a pleasant addition to the arsenal of important game mechanics.
It is also a fairly well-known mechanic when ratings and ratings of the best students, players, and so on are created and published. This mechanic can be quite effective because it awakens the competitive spirit. The problem of our rating is that it is very difficult to get there, since there are more than 20 thousand active participants in it. Therefore, its effectiveness is not so high.
But you can enter different ratings, where to get much easier, so that amateurs can compete to participate in such ratings throughout the training. For example, the ranking of newcomers or ratings in other categories.
We also refer to this technique as game mechanics, since it exploits certain human qualities and affects motivation. Of course, this is envy and vanity, when you show everyone what you have achieved, and someone can go into your profile and want as many achievements as you do.
But perhaps the main effect can be called: "if they could, then I can." When a student sees a huge number of people, like him, who have coped with a difficult course, he understands that he will cope too.
There are some mechanics that we do not use, but would really like to try.
The first such mechanic is game currency, which can be spent on any valuable items, for example, to pay a subscription. There are examples when the introduction of such mechanics increased the percentage of completing courses several times. The principle is similar to achievements and points, just rewards are more valuable.
The second mechanics is the so-called periodic tasks, which are designed to help you engage with regular intervals and not to drop training. This mechanic is often used in games where there are tasks that can be performed once a day or once a week (called “days” or “wikliks”) and get some kind of reward. And every day or week, these tasks are updated. This approach motivates players to enter the game at regular intervals.
In training, this technique must be applied carefully so as not to slow down those who learn faster.
Many mechanics go very well together. We managed to create a whole combination:
First, the student solves the puzzle, and he tries to solve it perfectly, 100%. For ideal solutions, he gets the achievement: "1 perfect test", "20 perfect tests" and so on. The number of achievements affects the position of the student in the ranking. And once in the ranking, he can share his profile with friends, showing that he is in the top, as well as his scattering of achievements and learning progress. And this is just one of the combinations.
Do game mechanics somehow affect the effectiveness of training? Are there any exact numbers? Should I implement them?
Good questions, but clear answers are not all.
Mechanics accurately influence the effectiveness of training; it suffices to recall the example of perfectionism, which dramatically increases the level of involvement: from 20 minutes to 6 hours to pass the test.
With exact numbers even more difficult. We cannot launch a version without game mechanics, attract many students there, measure various indicators and compare them with those of a version with game mechanics.
But there are qualitative assessments that come in the form of feedback from our students, for example, these are:
When we see such reviews, we understand that we are moving in the right direction, learning is really addictive and fun, and game mechanics should be introduced and used.
It turned out that game mechanics are not only banal and coarse “glasses and badges”, but also more subtle techniques aimed at working with the user's motivation. In our case, the main goal was to make students take courses to the end, learn more carefully and more diligently. It’s just that there are not enough “boring” courses, because in order to achieve our goal it is necessary that the training be delayed and enjoyable. Gradually, we tried and adopted a number of game mechanics, which we want to talk about.
Our game mechanics
Here are the mechanics that we use when creating courses, at the top of the list are more important and important:
- gradual presentation of information;
- the principle of gradual complication;
- puzzles;
- instant feedback;
- "Perfectionism";
- mini-games;
- "Storytelling";
- achievements and points;
- ratings;
- open profiles.
And now we will analyze each of the mechanic in detail and with examples.
')
1. Gradual submission of information
The essence of the technique is that large and complex tasks or pieces of theory are divided into small and simple ones and are combined into a series of tasks.
The example below shows a series of tasks from the course about backgrounds, in which we will step by step acquaint the student with the “background” properties.
We use this mechanics very often:
- for acquaintance with complex compound properties;
- in the step-by-step construction of any interface elements;
- even familiarity with the learning interface of the system is made as a series of tasks, and not as a usual instruction.
If we return to the analogy with the games, then there this mechanic is used quite often. Remember the so-called quest chains, each of which is fairly simple and sometimes broken down into even simpler subtasks. In this case, the chains themselves can be very long.
2. The principle of gradual complication
The essence of mechanics is that the student must always feel progress and progress. Recall any game in the RPG genre, in which you first level up the levels, and having reached the maximum, you start pumping with equipment to cope with more and more difficult opponents. The feeling of progress is a pleasure, makes you continue to play or study further.
In training courses, the feeling of progress can appear only when the student performs more and more complex tasks.
The example shows how difficult are the tests inside the course about tables. The first table is very simple, then merge cells appear, and finally backgrounds are added, text alignment in the cells, and column width control.
And so the tests are complicated from the initial courses of the basic cycle to the final ones. From a few headings and paragraphs, to a block with lots of small details.
Gradually complicate the formulation of tasks, compare these three:
- "Set the
widthproperty to450px" - "Set the width of the element
450pxand center it" - "Find and correct errors in the HTML code"
In the first case, the student simply copies and inserts the desired values, becomes familiar with the property. In the second, you need to remember the names of the properties or any tricks. And in the third - to analyze the code, to include logical thinking.
Applying this mechanics, you should adhere to the following rules:
- The complexity should grow constantly and very smoothly.
- You can not allow overly complex tasks, as they can completely kill the desire to learn. Such tasks as an insurmountable wall.
- You need to constantly balance the complexity of the tasks, watching the statistics and reviews.
- But too simple tasks are not worth doing all the time - they are boring.
We also had unsuccessful examples of tests where we went too far with complexity. Here is an example of the original complex task and its simplified version of the menu course.
In the first version there were a lot of difficult indents and non-contrast elements. The simplified version is more contrasting and it uses the rule of “five pixels”, when all sizes, indents and font parameters are multiples of five - it allows you to get rid of unnecessary guessing of sizes and excessive complexity.
Of course, there are other ways to simplify assignments and help stuck students: tips, the ability to get the right answers, support, comment system.
3. Puzzles
The essence of the puzzle is simple - it is quite difficult at first glance, but a fundamentally solvable task. The most important thing is that the student understands that he is able to solve the puzzle. And the harder it is, the nicer it is to figure it out, especially if you still learn something while deciphering.
In this trial, HTML and CSS are ready, but there are no selectors. The apprentice just needs to pick the right selectors to get a picture of the targets. Of course, it is very difficult for an unprepared person to create such an example from scratch, but in the format of a puzzle, this is quite possible for him.
And in this test , dedicated to the
float property, CSS is completely ready, but a part of the HTML code is missing. The student needs to write HTML tags with specific classes in the correct order to get such a simple jigsaw puzzle. The order of the blocks and CSS properties are chosen in such a way that the student in the process of solving the puzzle encounters all the oddities of float elements.Puzzles have an excellent balance of complexity and interestingness.
4. Instant feedback
Simple and very important mechanics. Essence - the student sees the result of the work of his code and the reaction of the system to it almost instantly, and immediately understands whether he is right or not. Without the need to press the "Check" button.
Remember your favorite shooter: right after the shot you see a hit (external result), as well as an increase in the number of frags (system response) and understand that you did everything right. Now imagine that after each shot, you need to press the "Check" button and wait a few seconds to find out if you have fallen. The pleasure of the game is killed.
Even better, this mechanic works when the task is split into several simpler subtasks. In this case, the feedback loop is reduced as much as possible and the cost of the error is significantly reduced. After all, the volume of tasks becomes less, and to check the next solution, you need to write less code. When performing a task, a student works in small iterations, almost the same as many designers and programmers, who check the result after every few lines of code, work. Yes, and training with this approach becomes like a game.
5. "Perfectionism"
Very interesting mechanics, which shot absolutely unexpectedly for us. Sometimes it is called the "progress bar." The essence is this: in order to pass the test, it is necessary that the level of similarity of the result and the sample exceed 90%, we no longer require. But many people really want to earn 100%.
This leads to interesting consequences.
First, the involvement in the learning process increases. For simple passing of the test, usually 10–20 minutes is enough, and for the ideal - up to 6 hours.
Secondly, students do not just hang out on one test, but pereprohody courses, google descriptions of properties and understand in detail their work, pass the following, more complex courses to return and overcome the test by 100%.
Of course, this is commendable, but there are also negative effects, which consist in the fact that a person can spend an excessive amount of time to finish off a measly 2-3 percent, when the way to solve a problem is already clear.
Perfectionism is very well matched with puzzles, and splitting a puzzle by 100% is perhaps the most fun.
6. Mini-games
An interesting mechanic that we tried for the first time just recently. It consists in the fact that a series of tasks in the course or the course itself are created in the format of the game. Our example is quite simple: we created a series of tasks for “pulling a hen” by changing the priority of selectors in the course of cascading.
But an even more interesting example recently circled the entire community of developers and designers. This is a CSS Diner game dedicated to learning selectors. Your task is to select either plates or fruits on them with the help of suitable selectors.
7. "Storytelling"
Storytelling is a versatile mechanic. For example, when tasks in a course or even several courses are united by a common idea or scenario. For example, the course on selectors is united by the theme of biathlon and the idea of ​​“shooting target selectors”. Storytelling can manifest itself in a single design of tasks, and in plot moves within the course, and so on.
The task of storytelling is simple - to add an emotional component, to awaken interest, a desire to learn “how did it all end up?” And reach the end of the course.
Storytelling is great with mini-games. For example, in the course of cascading, the final task echoes the series of tasks about the “battle for the hen” and we get a dramatic denouement of the course with the student as a savior and superhero.
8. Achievements and points
This is a fairly well-known mechanic: the user is given virtual rewards and badges for performing certain actions or for obtaining any results. We also use achievements. But we believe that the effect of the application of achievements is not so high. It is rather a pleasant addition to the arsenal of important game mechanics.
9. Ratings
It is also a fairly well-known mechanic when ratings and ratings of the best students, players, and so on are created and published. This mechanic can be quite effective because it awakens the competitive spirit. The problem of our rating is that it is very difficult to get there, since there are more than 20 thousand active participants in it. Therefore, its effectiveness is not so high.
But you can enter different ratings, where to get much easier, so that amateurs can compete to participate in such ratings throughout the training. For example, the ranking of newcomers or ratings in other categories.
10. Open Profiles
We also refer to this technique as game mechanics, since it exploits certain human qualities and affects motivation. Of course, this is envy and vanity, when you show everyone what you have achieved, and someone can go into your profile and want as many achievements as you do.
But perhaps the main effect can be called: "if they could, then I can." When a student sees a huge number of people, like him, who have coped with a difficult course, he understands that he will cope too.
Other mechanics
There are some mechanics that we do not use, but would really like to try.
The first such mechanic is game currency, which can be spent on any valuable items, for example, to pay a subscription. There are examples when the introduction of such mechanics increased the percentage of completing courses several times. The principle is similar to achievements and points, just rewards are more valuable.
The second mechanics is the so-called periodic tasks, which are designed to help you engage with regular intervals and not to drop training. This mechanic is often used in games where there are tasks that can be performed once a day or once a week (called “days” or “wikliks”) and get some kind of reward. And every day or week, these tasks are updated. This approach motivates players to enter the game at regular intervals.
In training, this technique must be applied carefully so as not to slow down those who learn faster.
Combination mechanic
Many mechanics go very well together. We managed to create a whole combination:
- puzzles;
- perfectionism;
- progress;
- rating;
- open profiles.
First, the student solves the puzzle, and he tries to solve it perfectly, 100%. For ideal solutions, he gets the achievement: "1 perfect test", "20 perfect tests" and so on. The number of achievements affects the position of the student in the ranking. And once in the ranking, he can share his profile with friends, showing that he is in the top, as well as his scattering of achievements and learning progress. And this is just one of the combinations.
Effect of use
Do game mechanics somehow affect the effectiveness of training? Are there any exact numbers? Should I implement them?
Good questions, but clear answers are not all.
Mechanics accurately influence the effectiveness of training; it suffices to recall the example of perfectionism, which dramatically increases the level of involvement: from 20 minutes to 6 hours to pass the test.
With exact numbers even more difficult. We cannot launch a version without game mechanics, attract many students there, measure various indicators and compare them with those of a version with game mechanics.
But there are qualitative assessments that come in the form of feedback from our students, for example, these are:
When we see such reviews, we understand that we are moving in the right direction, learning is really addictive and fun, and game mechanics should be introduced and used.
Source: https://habr.com/ru/post/219637/
All Articles