7 practical lessons on UX
This article will be an analysis of several lessons on UX /UI that we received, attentively watching the exhibition for a couple of hundred people who were engaged in the playtesting of the early assembly of our game Steamhounds .
To understand the context, I will say that Steamhounds - This is a turn-based game, a mixture of JRPG and tactical combat on the grid. Players can fight against AI, but we tried as much as possible to motivate them to play against each other, sitting next to different monitors.
In general, before the experiment, the basic scheme and presentation of information in our game was not absolutely terrible. Experienced players and familiar with the genre of users usually without any problems dealt with the game without our intervention. But at such live events there are people who have never seen before such games, and these players are very helpful to us, showing those hidden oddities and assumptions that we have made in the design of the game.
So, without superfluous forewords we pass to our observations:
Problem 1: people do not read the text
I think most developers know this problem. A surprisingly large proportion of players skip any text that you show them. We found that the vast majority (> 80%) of the players simply crooned the screen of instructions that we added to the beginning of the demo, which described the fundamentals of the game process:
Menu with instructions. Only 20% of players bother to read it (and 100% of them win the fight)
We also sin it - honestly, who reads the instructions when buying a new gadget? We expect that it will be user friendly, and you can more or less learn to use it through intuition and experimentation.
We were waiting for this, then the more serious problem was that
even during the game many players skipped and screen prompts
. This most influenced the experience of users, when they did not notice instructions telling what to do next:
We know that screen text is usually the last thing that players tend to address when they get stuck. So let's make it so that it's impossible to miss:
Use motion to draw attention to the
tooltip. when it appears, and then
continue to animate it until the player follows the instructions
Previously, the text was difficult to notice. Forcing the player to pay attention to him, we almost got rid of situations when players asked: "What should I do next?".
Perhaps we could improve the system by animating the text and arranging it so that it draws attention to the tiles to which you need to click to select a position.
Problem 2: Interactive objects should be visible
Let's drop the obvious: the buttons should look like buttons, and the player should understand what choices are available to him at any time.
In Steamhounds the player in his turn must choose an action from the menu (any ability, for example, "attack at a distance" or "protective rack"). When this happens, the menu appears:
This works great - it reproduces a distinctive sound prompt and attracts attention the animation of rotation when the menu is expanded to the larger part of the screen. No one had any problems understanding that you need to click on one of these buttons. The problem is that after choosing the action, the menu disappears, and the player must choose a place on the battlefield to which his ability should be aimed.
We noticed that
At this stage, some players get stuck by searching the screen with the mouse in search of elements with which it is possible to interact
The player looks for what you can click on the screen, and his irritation grows with every second
Although we highlight the tiles that can be clicked on, they stand out rather weakly. Worse situation and the fact that the players before choosing the action often throw a short glance at the enemy, not noticing that there are tile allocation. Here's how we solved this problem:
Flickering tiles attract the attention of the player
If the player does not move the cursor to the appropriate tile for a while, we turn on the flicker.
This simple change had the desired effect - at the next session of the play-ting we seldom had to tell the player that he needed to click on the tile to continue. We again applied the well-known principle -
To attract attention, you can use the motion /animation
. When the flicker attracts their attention, they inevitably point the mouse at one of the tiles, and the subsequent selection makes its purpose obvious.
Problem 3: calls for action should be instant /contextual
Indie developers often talk about the idea of "call to action" when marketing games - it is necessary that users "subscribe to the newsletter", "add the game to wishlist!" Or "write reviews on Steam!". But also in the game there are times when a player must make a choice or perform a certain action. So why not apply some of these principles to make the next push or the player's decision as clear as possible?
Before the start of the battle on Steamhounds, players need to specify the starting positions and racks ("formation") for their squad. The process of setting the formation does not immediately become apparent to all players.
Here's how the screen looked before:
A boring and verbose instruction on the assignment of the formation of the detachment
Although it tells the player everything you need to know to set up a formation, a couple of problems arise -
(a) players do not read the text
(b) instructions are presented as a single block of text, which is not at all like a clear call to action
. That's bad.
Since we have already implemented beautiful, eye-catching text, why not apply it to break this boring block of instructions?
Now we direct the player step by step - first he needs to "click on the character to set his rack", then "choose the rack", "choose the position", etc.
Use contextual hints to inform players that they need to make
. Thus, they stage-by-stage the entire process and are not deterred by long sheets of instructions.
The problem: a short and technical terminology should be used to the extent of
We studied game design and mastered a very specific language used to describe the rules of the game. We know descriptions with keywords that can be found on the Magic: the Gathering cards or in the rules book of the board game -
"One creature attacks"
"Discard three cards"
"Damages all neighboring characters"
. If you are used to such a language, then these instructions for you are absolutely clear and unambiguous. But I'm sure that you played games with more casual players who sometimes interpret the rules in a way that your designer brain thinks is completely unintended.
In Steamhounds, most of the text with long rules descriptions are in the tooltips that appear when one of the character's abilities is selected. Initially, we wanted to make these descriptions as brief and strict as possible - after all, we do not need to have these huge tooltips containing huge multi-line volumes of text. Therefore, we tried to reduce them to one, maximum two, short sentences:
It's a nice short but problematic description of Focus's ability: "It gives Focus"
Everything seems right, is not it? But we noticed that
this ability is used by players too rarely
We thought that the main reason for the unpopularity of Focus's ability is the following:
players who have not read carefully the previously shown rules, simply do not have the context necessary to understand the importance or advantages of the ability of
. Many players miss the familiarity with the rules, and by inducing the cursor on this button, they first encounter the mention of the mechanics "Focus". Therefore, we made the following change:
A slightly more detailed description: "Gives focus. Unlock your most powerful abilities. "
Yes, the description became slightly more verbose. But we noticed that the proportion of people using this ability has increased. The new text simultaneously and "sells" the player's ability, and provides an additional context so that they can understand its importance from the quickest tip, even if they have not read the rules.
From this problem we have extracted the general principle:
describe things in a cool or attractive way, and strive to make sure that the main effects of the mechanics are obvious to all players, and not just for those who have already learned information from somewhere else
Problem 5: people are biased against certain words
We made curious observations about how the language used by us makes some players interpret the rules in an unexpected way. We considered that this is the result of deep-rooted associations with these words, which they have.
The old description of Vigor Potion: "Choose a goal. Her next attack will do double damage. "
What is the problem here?
has an aggressive connotation
The word "goal" is often used in the text of the rules as a neutral term for everything that the ability is aimed at. Experienced players can already get used to this, and understand that the ability described above is obviously an enhancement that you need to use on your own characters. But the association between the word "goal" and the attack was so strong that some players believed that this ability should be used on the enemy, so that the next attack
caused additional damage.
It seemed that we would have to move away from using such a technical language. Here's how we solved the problem:
Improved description: "Strengthens the ally. His next attack will do double damage. "
For the designer, this approach is quite painful - this description seems unnecessarily verbose. However, we noticed that the new text essentially eliminated the misunderstanding of the effect of this ability, and the players stopped trying to direct it to their enemies. Developers should take into account the shades of meaning and the target audience, and find a balance in what suits her. Too long rules texts - this is definitely a problem, but easy redundancy allows to emphasize the style and character of the game.
A useful lesson:
Watch the playtesters to see if the choice of terminology leads to the unexpected consequences of
. Even among English-speaking users, this can strongly depend on culture.
Problem 6: people have associations with certain colors
This problem is similar to the previous topic about the connotation of words. Colors are also associated with certain feelings or concepts. We've already used this in the game, creating a backlight for the tiles to show the effects of abilities. Red - aggression, green - support /protection, etc.
A frightening red illumination of tiles
In most cases, it worked perfectly. But there was one association that we could not foresee, and she confused a couple of players.
They associated the red color not with
, and with
. So when they pointed the target to attack it, they were confused - they thought that the game tells them they can not aim at this character (in fact, the game simply does not show the tile if it is not the right target).
We tried to avoid the "intersections" of conflicting associations. Our solution:
Almost the same (but not quite) red-orange backlight tiles
We just moved the red backlight closer to a slightly orange hue. It remained to see whether this really solved the problems(which in fact affected only a couple of players). But the funny thing is that no one else has mistaken this way.
Therefore I will repeat,
double-check that your interpretation does not negatively affect the associations existing in the minds of players
Problem 7: extra clicks are evil
We already knew this, so we developed and configured the UI to eliminate unnecessary clicks. The problem arose after an add-on made at the last minute in the assembly of a game specially designed for demonstration at events.
At the end of the battle, fanfares play and a large message, "Victory" or "Defeat" appears on the screen:
Then the player can click anywhere on the screen to exit the battle and return to the main menu. We changed the demo build in such a way that after the exit from the battle the player displayed the subscription dialog for the mailing list.
It seemed like an excellent idea, but she had one fatal flaw. The moment when the message "victory" or "defeat" appears on the screen is exactly the moment when players exchange handshakes (or begin to quarrel) and get up from their seats. The battle is over, and there's no point in sitting at the computer. Therefore
they left without even seeing the
mailing list. .
The game should automatically display the subscription screen for the newsletter in a couple of seconds.
To be honest, we had to foresee this in advance, but the function was added at the last minute. However, a simple change-eliminating an optional click-increased the number of subscriptions to our
newsletter. three times
in comparison with the previous result.
To hell with these optional clicks!
Use motion /animation to draw attention to text prompts
Make the interactive elements of the UI obvious
Think tips like calls to action. Make them instant and contextual
Do not go over with the technical language and aim to convey the context to help players understand the decisions they make
Check for unexpected mental associations with colors, words, etc.
Smooth the movement of the UI, getting rid of the optional clicks
I hope that the principles described in the article will prove useful in your own game. But most of all we hope that we can convince you of the value of the standard approach:
watch new players, find the moments when they get stuck or tangled, and then deduce the basic principles and apply them to the whole game.
Data and observations collected on PlayExpo London. I love spreadsheets.
We added to the demo build code for collecting metrics about the results of battles, the frequency of each character's choice and ability, various information about the UI's usage time. This definitely helped us and allowed us to approach scientifically the dimensions of the impact of the changes that we made. But probably the main part of the lessons was received by the old kind way "to observe the player from the side and to conduct handwritten notes".
None of us was an expert in UX (and informally this article was called "7 mistakes in UX, which we could avoid"). Like most development teams that do not have a separate UI /UX specialist, we tried to follow common sense and stick to the simplest recommendations. But when you are so immersed in your own project, it is difficult to objectively evaluate all its roughnesses. The fresh look of the new play is incredibly valuable - use them as often as possible!
It may be interesting
visit this site
visit this site
visit this site
Pleasant data, significant and magnificent plan, as offer great stuff with smart thoughts and ideas, bunches of incredible data and motivation, the two of which I need, on account of offer such an accommodating data here.