April 16, 2014 at 22:1410 game mechanics at HTML Academy
At that moment, when the development of HTML Academy began , we seriously played WOW, and, in general, were fans of Blizzard games with experience. Therefore, they were familiar with game mechanics quite well, although they themselves did not suspect this. Many interesting mechanisms appeared at the academy, as it seemed to us, by themselves. But later it turned out that in fact they are called "game mechanics", and we unconsciously took them from game practice.
It turned out that game mechanics are not only trivial and crude “glasses and badges”, but also more subtle tricks aimed at working with user motivation. In our case, the main goal was to make students take courses to the end, study more carefully and more diligently. There are simply not enough “boring” courses for this, because in order to achieve our goal, it is necessary that training delays and gives pleasure. Gradually, we tested 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 significant:
Now, in detail and with examples, we will analyze each of the mechanics.
The essence of the technique is that large and complex tasks or pieces of theory are split into small and simple ones and combined into a series of tasks.
The example below shows a series of assignments from the background course, in which we step by step introduce the student to the "background" properties.
We use this mechanics very often:
If we return to the analogy with games, then there this mechanics is used quite often. Remember the so-called quest chains, each of which is quite simple and sometimes breaks down into even simpler subtasks. Moreover, the chains themselves can be very long.
The essence of mechanics is that the student must always feel progress and forward movement. Remember any RPG game in which you first pump levels, and when you reach the maximum level, you start pumping equipment in order to cope with increasingly complex opponents. A sense of progress gives pleasure, makes you continue to play or learn further.
In training courses, a sense of progress can appear only when the student performs more and more complex tasks.
An example shows how complicated the tests inside the course about the table. The first table is very simple, then cell associations appear, and finally, backgrounds, text alignment in cells, and column width control are added.
And so the tests are complicated from the initial courses of the basic cycle to the final. From a few headings and paragraphs, to a block with a lot of small details.
You can also complicate the wording of tasks, compare these three:
In the first case, the student simply copies and pastes the desired values, gets acquainted with the property. In the second, you already need to recall the names of the properties or some tricks. And in the third - to analyze the code, include logical thinking.
Applying this mechanics, the following rules should be followed:
We 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 from the menu course.
In the first version, there were a lot of difficult to select indents and non-contrast elements. The simplified version is more contrasting and it uses the "five pixels" rule, when all font 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 tasks 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 complicated at first glance, but fundamentally solvable task. Most importantly, the student understands that he is able to solve the puzzle. And the harder it is, the more pleasant it is to figure it out, especially if you learn something else while solving it.
In this test, the HTML and CSS are ready, but there are no selectors. The student just needs to select the appropriate selectors to get an image of the targets. Of course, it is very difficult for an unprepared person to make such an example from scratch, but in the puzzle format this is quite up to him.
And in this property test
Puzzles have an excellent balance of complexity and interest.
Simple and very important mechanics. The bottom line is that 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 reaction) and you understand that everything was done correctly. Now imagine that after each shot you need to click the “Check” button and wait a few seconds to find out if they hit. The pleasure of the game is killed.
Such mechanics work even better when the task is divided into several simpler subtasks. In this case, the feedback loop is reduced as much as possible and the cost of error is significantly reduced. After all, the volume of tasks becomes smaller, and to check the next version of the solution, you need to write less code. The student, when completing the assignment, works in small iterations, almost in the same way as many layout designers and programmers who check the result after every few lines of code. And training with this approach becomes like a game.
Very interesting mechanics that shot absolutely unexpectedly for us. Sometimes it is called "progress bar". The bottom line is: to pass the test, it is necessary that the level of similarity of the result and the sample exceeds 90%, we do not require more. But very many want to get 100%.
This leads to interesting consequences.
Firstly, the involvement in the learning process is increasing. For a simple test, 10-20 minutes are usually enough, and for an ideal test, up to 6 hours.
Secondly, students do not just hang on one test, but pass courses, google descriptions of properties and understand their work in detail, take the following more difficult courses to return and overcome the test 100%.
Of course, this is commendable, but there are negative effects that consist in the fact that a person can spend an excessive amount of time to finish off a miserable 2-3 percent, when the way to solve the problem is already clear.
Perfectionism is very well combined with puzzles, and splitting a puzzle by 100% gives perhaps the most pleasure.
Interesting mechanics 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 is created in the format of the game. Our example is quite simple: we created a series of tasks for “pulling the chicken” by changing the priority of the selectors in the course about cascading.
But an even more interesting example has recently flown around the entire community of developers and designers. This is a CSS Diner game dedicated to the study of selectors. Your task is to select the plates or the fruits lying on them using suitable selectors.
Storytelling is a multifaceted mechanics. For example, when assignments in a course or even several courses are united by a common idea or scenario. For example, the course on selectors is combined with the theme of biathlon and the idea of “shooting with selectors at targets.” Storytelling can be manifested both in the unified design of tasks, and in the plot moves within the course, and so on.
The task of storytelling is simple - to add an emotional component, arouse interest, a desire to find out “how did it all end in the end?” And get to the end of the course.
Storytelling goes well with minigames. For example, in the cascading course, the final task echoes a series of tasks about the “battle for the chicken” and we get a dramatic denouement of the course with the student in the role of savior and superhero.
This is a fairly well-known mechanics: the user is given virtual icon awards for performing certain actions or for receiving any results. We also use achievements. But we believe that the effect of applying achievements is not so high. Rather, it is a pleasant addition to the arsenal of important game mechanics.
Also well-known mechanics, when the ratings of the best students, players and so on are created and published. This mechanics can be quite effective, because it awakens the spirit of competition. The problem with 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, which is much easier to get, so that fans of competition could participate in such ratings throughout the training. For example, newbie ratings or ratings in other categories.
We also attribute this technique to game mechanics, since it exploits some 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 have.
But perhaps the main effect can be called this: "since they could, then I can." When a student sees a huge number of people, such as him, who have mastered a difficult course, he realizes that he will also cope.
There are some mechanics that we don’t use, but would love to try.
The first such mechanics is the game currency, which can be spent on any valuable things, for example, to pay a subscription. There are examples when the introduction of such mechanics increased the percentage of completion 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 practice regularly and not to give up training. This mechanic is often used in games where there are tasks that can be performed once a day or once a week (called "dealers" or "wikis") and get some kind of reward. And every day or week, these tasks are updated. This approach motivates players to enter the game with a certain frequency.
In training, this technique must be applied carefully so as not to slow down those who learn faster.
Many mechanics work 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 decisions he receives achievements: “1 ideal test”, “20 ideal tests” and so on. The number of achievements affects the student’s position in the ranking. Once in the rating, he can share his profile with friends, showing that he is in the top, as well as his placer of achievements and learning progress. And this is just one of the combinations.
Do game mechanics somehow affect learning efficiency? Are there any exact numbers? Should they be implemented?
Good questions, but clear answers aren’t for everyone.
Mechanics precisely influence the effectiveness of training, it’s enough to recall the example of perfectionism, which dramatically increases the level of engagement: from 20 minutes to 6 hours for the test.
Accurate numbers are even more difficult. We cannot launch a version without game mechanics, attract many students there, measure various indicators and compare them with the indicators of the version with game mechanics.
But there are quality 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, training is really addictive and enjoyable, and game mechanics are worth introducing and using.
It turned out that game mechanics are not only trivial and crude “glasses and badges”, but also more subtle tricks aimed at working with user motivation. In our case, the main goal was to make students take courses to the end, study more carefully and more diligently. There are simply not enough “boring” courses for this, because in order to achieve our goal, it is necessary that training delays and gives pleasure. Gradually, we tested 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 significant:
- gradual flow of information;
- the principle of gradual complication;
- puzzles;
- instant feedback;
- "Perfectionism";
- mini-games;
- Storytelling;
- achievements and points;
- Ratings
- open profiles.
Now, in detail and with examples, we will analyze each of the mechanics.
1. Gradual presentation of information
The essence of the technique is that large and complex tasks or pieces of theory are split into small and simple ones and combined into a series of tasks.
The example below shows a series of assignments from the background course, in which we step by step introduce the student to the "background" properties.
We use this mechanics very often:
- for acquaintance with complex composite properties;
- during step-by-step construction of any interface elements;
- even acquaintance with the training interface of the system is performed as a series of tasks, and not as a familiar instruction.
If we return to the analogy with games, then there this mechanics is used quite often. Remember the so-called quest chains, each of which is quite simple and sometimes breaks down into even simpler subtasks. Moreover, 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 forward movement. Remember any RPG game in which you first pump levels, and when you reach the maximum level, you start pumping equipment in order to cope with increasingly complex opponents. A sense of progress gives pleasure, makes you continue to play or learn further.
In training courses, a sense of progress can appear only when the student performs more and more complex tasks.
An example shows how complicated the tests inside the course about the table. The first table is very simple, then cell associations appear, and finally, backgrounds, text alignment in cells, and column width control are added.
And so the tests are complicated from the initial courses of the basic cycle to the final. From a few headings and paragraphs, to a block with a lot of small details.
You can also complicate the wording of tasks, compare these three:
- "Set the property
widthvalue450px" - “Set the width of the element
450pxand center it” - “Find and fix errors in the HTML code”
In the first case, the student simply copies and pastes the desired values, gets acquainted with the property. In the second, you already need to recall the names of the properties or some tricks. And in the third - to analyze the code, include logical thinking.
Applying this mechanics, the following rules should be followed:
- Complexity must grow constantly and very smoothly.
- Excessively difficult tasks should not be allowed, as they can completely kill the desire to learn. Jobs such as an insurmountable wall.
- It is necessary to constantly balance the complexity of tasks, keeping track of statistics and reviews.
- But too simple tasks are not always worth doing - they are boring.
We 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 from the menu course.
In the first version, there were a lot of difficult to select indents and non-contrast elements. The simplified version is more contrasting and it uses the "five pixels" rule, when all font 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 tasks 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 complicated at first glance, but fundamentally solvable task. Most importantly, the student understands that he is able to solve the puzzle. And the harder it is, the more pleasant it is to figure it out, especially if you learn something else while solving it.
In this test, the HTML and CSS are ready, but there are no selectors. The student just needs to select the appropriate selectors to get an image of the targets. Of course, it is very difficult for an unprepared person to make such an example from scratch, but in the puzzle format this is quite up to him.
And in this property test
floatCSS is completely ready, but part of the HTML is missing. The student needs to write HTML tags with specific classes in the correct order to get such a simple mosaic. The block order and CSS properties are selected so that the student in the process of solving the puzzle encounters all the oddities of the float elements. Puzzles have an excellent balance of complexity and interest.
4. Instant feedback
Simple and very important mechanics. The bottom line is that 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 reaction) and you understand that everything was done correctly. Now imagine that after each shot you need to click the “Check” button and wait a few seconds to find out if they hit. The pleasure of the game is killed.
Such mechanics work even better when the task is divided into several simpler subtasks. In this case, the feedback loop is reduced as much as possible and the cost of error is significantly reduced. After all, the volume of tasks becomes smaller, and to check the next version of the solution, you need to write less code. The student, when completing the assignment, works in small iterations, almost in the same way as many layout designers and programmers who check the result after every few lines of code. And training with this approach becomes like a game.
5. "Perfectionism"
Very interesting mechanics that shot absolutely unexpectedly for us. Sometimes it is called "progress bar". The bottom line is: to pass the test, it is necessary that the level of similarity of the result and the sample exceeds 90%, we do not require more. But very many want to get 100%.
This leads to interesting consequences.
Firstly, the involvement in the learning process is increasing. For a simple test, 10-20 minutes are usually enough, and for an ideal test, up to 6 hours.
Secondly, students do not just hang on one test, but pass courses, google descriptions of properties and understand their work in detail, take the following more difficult courses to return and overcome the test 100%.
Of course, this is commendable, but there are negative effects that consist in the fact that a person can spend an excessive amount of time to finish off a miserable 2-3 percent, when the way to solve the problem is already clear.
Perfectionism is very well combined with puzzles, and splitting a puzzle by 100% gives perhaps the most pleasure.
6. Mini-games
Interesting mechanics 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 is created in the format of the game. Our example is quite simple: we created a series of tasks for “pulling the chicken” by changing the priority of the selectors in the course about cascading.
But an even more interesting example has recently flown around the entire community of developers and designers. This is a CSS Diner game dedicated to the study of selectors. Your task is to select the plates or the fruits lying on them using suitable selectors.
7. “Storytelling”
Storytelling is a multifaceted mechanics. For example, when assignments in a course or even several courses are united by a common idea or scenario. For example, the course on selectors is combined with the theme of biathlon and the idea of “shooting with selectors at targets.” Storytelling can be manifested both in the unified design of tasks, and in the plot moves within the course, and so on.
The task of storytelling is simple - to add an emotional component, arouse interest, a desire to find out “how did it all end in the end?” And get to the end of the course.
Storytelling goes well with minigames. For example, in the cascading course, the final task echoes a series of tasks about the “battle for the chicken” and we get a dramatic denouement of the course with the student in the role of savior and superhero.
8. Achievements and points
This is a fairly well-known mechanics: the user is given virtual icon awards for performing certain actions or for receiving any results. We also use achievements. But we believe that the effect of applying achievements is not so high. Rather, it is a pleasant addition to the arsenal of important game mechanics.
9. Ratings
Also well-known mechanics, when the ratings of the best students, players and so on are created and published. This mechanics can be quite effective, because it awakens the spirit of competition. The problem with 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, which is much easier to get, so that fans of competition could participate in such ratings throughout the training. For example, newbie ratings or ratings in other categories.
10. Open profiles
We also attribute this technique to game mechanics, since it exploits some 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 have.
But perhaps the main effect can be called this: "since they could, then I can." When a student sees a huge number of people, such as him, who have mastered a difficult course, he realizes that he will also cope.
Other mechanics
There are some mechanics that we don’t use, but would love to try.
The first such mechanics is the game currency, which can be spent on any valuable things, for example, to pay a subscription. There are examples when the introduction of such mechanics increased the percentage of completion 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 practice regularly and not to give up training. This mechanic is often used in games where there are tasks that can be performed once a day or once a week (called "dealers" or "wikis") and get some kind of reward. And every day or week, these tasks are updated. This approach motivates players to enter the game with a certain frequency.
In training, this technique must be applied carefully so as not to slow down those who learn faster.
Combination mechanic
Many mechanics work very well together. We managed to create a whole combination:
- puzzles;
- perfectionism;
- achievements;
- rating;
- open profiles.
First, the student solves the puzzle, and he tries to solve it perfectly, 100%. For ideal decisions he receives achievements: “1 ideal test”, “20 ideal tests” and so on. The number of achievements affects the student’s position in the ranking. Once in the rating, he can share his profile with friends, showing that he is in the top, as well as his placer of achievements and learning progress. And this is just one of the combinations.
Effect of use
Do game mechanics somehow affect learning efficiency? Are there any exact numbers? Should they be implemented?
Good questions, but clear answers aren’t for everyone.
Mechanics precisely influence the effectiveness of training, it’s enough to recall the example of perfectionism, which dramatically increases the level of engagement: from 20 minutes to 6 hours for the test.
Accurate numbers are even more difficult. We cannot launch a version without game mechanics, attract many students there, measure various indicators and compare them with the indicators of the version with game mechanics.
But there are quality 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, training is really addictive and enjoyable, and game mechanics are worth introducing and using.