Self-Teaching UI Series
Welcome back to Player Experience, the blog about Game Design and UX. Last entry, we talked about how proximity can help implicitly teach your players how to use your UI. Now I want to talk about another self-teaching tool many people are familiar with - Iconography! For those not in the know, iconography are simple pictographs that convey functionality.
Iconography is powerful tool, but oftentimes that’s because iconography plays off tropes. In this example, tropes mean functionalities that are so common they’re ingrained in us.
Let’s start with a classic home button:
Simple as it is, this button is clearly discernible as a house. If there is any kind of home base, main menu, root menu, or other “safe place you return to often,” the home button makes for a great representation of that space. While the button cannot stand completely on its own(almost no UI element can), if you introduce and allow your player to familiarize themselves with this space, the home button will be easily associated with something that takes you “home.”
We can see how a house can come to represent a “safe space you return to often” for a player. It’s a real-world parallel - it’s representative. But there’s a number of icons that we, as designers, can and should use, but rely on tropes rather than real-world parallels. For example, here’s an icon we’re all familiar with - the classic Pause button!
The pause button is something that doesn’t really need to be taught. All you need is a button with two vertical lines and almost any player will know what it does. But what does this button mean?
Nothing, right? But then, if that makes no sense to us, why does the pause button? What about two vertical lines represents the stopping of time?
The reason we recognize pause buttons(and for that matter, play, back, and skip buttons) is because of music. A long time ago, people slapped these symbols on music products, and kept doing it. We probably had no idea what they mean originally, but soon, using them to control the progressing or stopping of music became so ingrained that we can now associate these symbols-
-with Pause, Play, Forward, and Back. It’s not because these symbols are perfect, accurate, self-explanatory representations of these amorphous concepts, but because we have learned, over time, what these symbols mean, the same way a red octagon means “STOP.” But there’s a reason that, on top of the red octagon, a stop sign says in big, bold letters STOP.
As powerful as iconography is, many mistake it as the greatest weapon in creating self-teaching UI, when in reality, it’s one of the most limited.
Using strong tropes like a home button, pause button, or menu button for those unique purposes are great ways to reduce copy. However, when you start creating your own icons to represent either vast concepts or very specific ones, it’s unsafe to assume your player will understand exactly what you’re trying to convey.
Am I saying you can’t create you’re own iconography? No, of course not...you can and should! However, like most of these concepts, you can’t depend on it alone to teach your player. One of the best ways to teach your player your iconography is to make it a trope yourself, through repetition... but we’ll save that for future installments of Player Experience! What other icons do you know merely because they’re tropes? Comment below!
Comments