Learn Faster to Play Better: How to Shorten the Learning Cycle

As humans, we have a highly developed verbal and grammatical system. Still, language may not always be the perfect solution for some communication needs. For example, take the following list of words:

• boca
• mouth
• bouche
• kuchi
• oris
• mund

Figure 4. A boca.

All six words mean the same thing ("mouth" in Spanish, English, French, Japanese, Latin and German, respectively). Still, the symbolic representation used by the different languages is very different. No one would say that all six words express the exact same meaning. Most modern languages separate representation from meaning, and this may be unsuitable for interface design: the interface must be adapted to whichever language a player uses. On the other hand, take the image in Figure 4.

OK, so it's a picture of a mouth. Here, representation (the picture) and meaning (the concept of mouth) are closely tied. Most ancient languages where built around this idea. For example, see the Egyptian hieroglyph for mouth," and the Japanese khanji symbol for the same concept, in Figures 5 and 6.

Both resemble the shape of a mouth. Early languages were pictorial because the human brain works much better with images than it does with words. Decoding written text required much more effort than just seeing and identifying shapes in a pictogram, and that's the reason why cavemen began by drawing animal shapes onto the walls, instead of writing their names.

Figures 5 & 6. Both Egyptian hieroglyphs and Japanese khanji symbols are pictographic representations.

Maybe we should apply this same methodology to interface design. We could try to express as much information as we can in a graphical way, so that it becomes:

• user language independent
• easier to interpret by the brain

This trend towards pictographic interfaces is not new, and many games have made great use of this paradigm. If you decide to use this strategy, you should keep in mind the following:

• Try to choose images and symbols that are universal, culture-independent.
• Simple drawings are easier to decode than complex ones.
• Use color only when needed.
• Use easily recognizable shapes.

To sum up: use graphical metaphors. Thus, the quest for pictographic interfaces finally meets the analogy learning trend. As a result, you get a symbolic representation (a drawing) of something the user already knows how to use (because it is a metaphor). Tests show that this provides much beter usability and user perfomance.

There is yet another practical reason to use pictograms. Today's titles sell millions, and are sold worldwide. As a consequence, they need to be translated. All on-screen messages, manuals, etc. have to be converted for every languages the game will be sold in. Pictographic interfaces, when designed cleverly, require little or no translation at all, because the symbols they use are universal. So, as a side effect, this strategy can reduce the needs of localization.

Screen Layout Techniques

Sometimes games contain relatively large sets of actions that a user may take at any time. For example, the Baldur's Gate screen in Figure 7 has (counting menus and buttons only) more than 25 clickable targets on-screen simultaneously. If we do not apply some clever layout technique, the result may only be a screen cluttered with unrelated info.

Figure 7. The main game screen in Baldur's Gate has over 25 clickable on-screen targets -- and that's not even counting the main game window.

To maximize user performance in these situations, we must follow some basic laws.

The first one is called Fitt's Law, and states that:

"The time required to acquire a target is a function of distance to the target and its size."

This law has some interesting extensions and corollaries. For example, targets located along the edges of the screen are easier to reach than those located in the middle. Even more, the four corners are the least-effort area of the screen, in terms of ease of access. So games should keep the most important buttons and controllers in these areas.

Figure 8. Infogames' Silver featured a floating menu, activated by a right mouse click.

Another interesting conclusion arises from the fact that user speed decreases with distance to the clickable area, which is quite obvious. Still, most games put menus and buttons in predetermined areas of the screen, such that the user must go there to click them. Efficiency would improve if we could ensure that the buttons were always close to the current mouse position.The only way to achieve this effect is by using floating menus, so that the menu opens right around the cursor position with a click. Although Windows has been using this paradigm for some years now, I can only remember one game using this concept: Silver, a newer RPG by Infogames. As you can see in Figure 8, whenever the user clicks the right mouse button, a floating menu opens and you just select the right button. It takes some time to get used to it but, as time goes by, the system proves very agile and efficient.

A second law is to organize the screen in a coherent way. Menus, buttons and commands should be laid out in thematic groups, to improve access speed. For example, in Baldur's Gate you have game commands on the left-hand side of the screen, immediate actions (move, attack, etc.) on the bottom, and characters to the right. Grouping related items in such a way reduces the time required to click on the different areas, especially for novice users.

The third (and last) layout strategy is to keep relevant information (but nothing else) visible. All the actions a user may take at a certain point of the game should be directly visible, without a need to dwell into nested menu systems. Many users ignore all commands that are not directly available to them. On the other hand, all information irrelevant to a the current game context should disappear, or at least become unusable. This way we can prevent user errors. In a RPG, for example, selecting a character should show on-screen all the actions he can perform, and de-activate all the remaining actions.

The spatial layout techniques I have just outlined, when used together, greatly improve interaction, by make games more intuitive. This is a very important feature, especially in the first minutes of gameplay, which decide whether the player will stick to the game or get bored and stop playing.