What Can Video Games Teach You About UX and UI?
From the clunky pizza-like, pill-gobbling Pacman to the realistic marvels of today’s graphics, video games have come a long way. Modern video games are characterized by immersive, dynamic worlds, and it has a lot to with the advance of User Experience and User Interfaces which, alongside graphic, have also become more complex, all for the sake of top-notch gameplay and usability.
Quite similar to video games, web and app development has also progressed. Today, having both a usable and visually attractive website or app is simply a must. When you look at websites from 20 years ago (Space Jam website is a great example, as it has been practically intact for 20 years) it is clear that modern, minimalist websites are a giant leap forward when it comes to UX and UI and it’s practically unthinkable to speak about modern development without mentioning User Interfaces and User Experience. Given this, it’s understandable why so many, function-wise, great apps have failed, simply due to bad UI and/or UX. Neglecting those two can ruin months of effort, no matter how much utility your website or app provide. That’s just the harsh reality.
Although web and game development are two different processes in their own right, it’s just astonishing just how much web development has influenced gaming industry and vice versa, and it’s safe to say that video games of today look and behave more and more like well-structured websites, while websites and apps look and behave like video games. Due to this trend, I believe that web designers can learn a lot from video games.
NOTE: Game UI’s that we’ll be covering in this article aren’t the best UIs out there by any stretch of imagination and most of them are outdated. However, we’ll be using them as an example of something that might have worked at the time of its release and something that might influence digital designers of today.
We’re lazy and game designers do a great job at taking advantage of it.
We humans are lazy, kind of. That doesn’t mean that we are lazy in the strict sense of the word, but during thousands of years of evolution our brains have become hardwired to do the least amount of work possible to get a certain task done meaning that we’re more result than process-driven. While this isn’t always the case, game developers are aware of this fact and more and more games are being centered around removing clutter for the sake of experience.
This interaction design technique, also known as progressive disclosure, is centered around maintaining focus by removing clutter for the sake of experience. Similar to the inverted pyramid model used mostly in journalism, progressive disclosure is a technique that gives the user the minimum viable information required to do a certain action, instead of throwing the information right at user’s face. This decreases cognitive overload, all while offering additional information should the user require them. By removing excess info and providing only the necessary data, this method puts the emphasis on the experience while maintaining a well-structured information architecture.
Extreme cases aside, progressive disclosure is simply a must in modern web/app design. Coupled with our increasingly short attention spans, it has become increasingly important to structure information in a way that it doesn’t get in the way of User Experience and good User Experience, given the fact that people are “lazy”, is the one that offers the maximum amount of utility by using the least amount of information. This leads us to symbolism.
Now, humans, besides obviously being lazy, as we all know, are also very visual creatures. This was always the strong point of video games. Being able to visualize various worlds is what makes games so appealing. But one, often overlooked, strong point of game UX is the preference towards symbolism.The ability to transform meaning into symbols was a huge step towards visual decluttering. Let’s take a look at the health indicator/bar as this is a great example. It is perfectly clear, just from the context alone, that a red heart is a representation of how much health your character has. 5/5 hearts? You’re good to go. 1/5 hearts? You’re about to kick the bucket. Simple as that. Better yet, the color red has become associated with in-game health (just as the color blue has become associated mostly with magic).
Using hearts to portray health is a nice way of using symbols to display meaning. It’s also very easy to understand. If you’re hit with an arrow and you lose a heart, this is a clear indicator that you should avoid getting hit by arrows and that you can’t get hit indefinitely as you lose hearts. While trial and error method of learning might not be the best method to use in web design, what games tell us is that using symbols is often superior to text. After all, this is why symbols are becoming so prevalent in digital design – if you can portray meaning using well-known symbols, there is no need to write lines of text. It declutters the digital environment and appeals to our preferences towards the visual. There is a reason why red stop signs portray importance. Symbols are powerful and recognizable. There is a reason why infographics often go viral – they are both heavily visual and symbolic in nature.
This trend towards minimalism in digital design is well documented and, although it does get obnoxious at times, it works like a glove, especially in mobile app design where there is little display space. This is why Tinder, for example, is so successful. It appeals to our visually driven behavior, while using simple symbolism and elegant mechanics.
It’s tough to say where this will lead us. It’s safe to assume that this trend of symbolism will continue as the digital world is becoming more and more visual. Video games, on the other hands, are slowly moving towards completely minimal interfaces where the UX will probably become even more context-based. For the most video games in the near future, removing or minimizing the HUD (head-up display) is probably the next step. An interesting and kind of ridiculous example of playing with minimalism comes from the once hyped Trespasser which had one of the earlier ideas of HUD-less gameplay. The way you’d check your remaining health was to look down where the hearth tattoo on the chest of main heroine would show you how much health you had remaining. While this concept was very unpractical, albeit fun, it did influence a lot of game designers and set the stage for modern games with minimalist HUD.
Although Trespasser was a failure, it is interesting for its preference towards learning. This is where we take a look at The Binding of Isaac. Released in 2011, this rougelike gem took the world by storm. Simple, easy to pick up, rewarding and characterized by loads of replay value, TBOI remains extremely popular to this day. A lot of that popularity, though, has a lot to do with its incredible UI and UX. A lot of Isaac’s popularity, though, has to do with the fact that it doesn’t provide you with any explanation you might expect from a game and throws you right in the action.
Well, it’s simple – TBOI requires you to learn, but it does that in such an elegant manner that you don’t even notice it and the best kind of learning is the learning that’s seamless. Take a look at the picture above.This is the first room in the game and the only set of instructions you’re given. How does that work, you might ask yourselves. Well, the secret is in its elegant mechanics – its core mechanics are absurdly easy to pick up, but the game itself is hard to master and the whole point of the game is to master it. It is designed in a way that mastering it is a great accomplishment, and since you’re never able to truly master it, due to its randomness, you are always left with the feeling that you’re close, just to find out that you’re nowhere near the goal. Back to the grind.
Although trial and error learning is definitely not the best idea for web (and in most cases app) design, there is a lot to be learned from TBOI. What makes TBOI so delightful is the way it knows what its audience wants and needs. TBOI knows that there are gamers who prefer grinding, memorizing items and hellish difficulty and its gameplay is centered around this idea. By using minimalist approach, heavy symbolism and contextual learning, TBOI hit the nail on the head. It knows what the point of the genre is and it’s designed in a way that these requirements are met, all while being clutter-free as much as possible. It’s designed in a way that it doesn’t exhaust you with information overload, emphasizing the gameplay instead.
TBOI is a wonderful example of a game that is user-centric and it does a great job at providing excellent value for its niche, even though some of its elements might seem counterintuitive at times. It’s not afraid of trying because it knows that its players are not afraid of trying over and over again. That’s what user-centric design is all about, even if that means going against mainstream. We are firm believers that digital designers should know their audience before they even begin thinking about UX and UI. Those two are not universal laws of nature but dynamic systems that have a lot to do with those whom they are intended for. User-centric design is the pinnacle of good UX as it mitigates potential arrogance and adjusts the elements according to the needs and preferences of your target audience.
By all accounts, TBOI should never have happened, yet it did. It was supposed to be a niche game that should never have reached the stellar status, yet it did. The reason why it did succeed is that it recognized the needs of its target audience and was completely designed with utmost dedication to meet those needs. There is a lot that digital designer can learn from this, especially those that deal with certain obscure niches.
The power of the click
Before the groundbreaking RPG experience that was Oblivion, there was Morrowind. With its enormous and rich open world, Morrowind was both a gameplay delight and graphic eye candy. Extremely intuitive and simple to use, with everything being just a click away, Morrowind’s UI, though sometimes lackluster, was simply delightful when it came to simplicity. Need to equip that new armor? Great, just click on it and it’ll be equipped automatically. Need to remove it? Click on it again. Every window is resizeble and, should you need it displayed constantly for whatever reason, you can choose to do so.
When people play games, they do it for the sake of fun and/or immersion. For an immersive cinematic (at least at the time of its release) experience that’s Morrowind, creating a usable and intuitive interface was a necessity, especially given the amount of micromanagement task the game requires you to do. With an item count and world as large as Morrowind’s, lowering the amount of clicks and interactions was a necessity. By using the one click mechanic, it succeeds in handling those repetitive actions through the least amount of clicks possible. It lowered the time it takes to complete the dull tasks, thus improving the gameplay tremendously.
While we’re not a big fan of the three click rule in the strict sense of the rule, conceptually, it does make sense as a user should be able to do a certain task with the least amount of clicks (effort) possible. If it’s possible to reduce the amount of actions that have to be taken, by any means, make sure to do so. Now, the number three is not a magic number by any means and Morrowind would be as equally as impressive with the drag-and-drop or some other mechanics, but it’s the little things like this, the attention to details, that result in impressive UX.
Attention to detail and polishing the usability of a site is especially prevalent in e-commerce where the bounce rate can be affected by even the smallest changes. Your potential customers will simply leave your site if they can’t find what they are looking for in a short amount of time. Due to still existing scepticism towards e-commerce (sigh), visitors are easily discouraged, maybe even frightened of the complex navigation system. While it’s perhaps a bit too far-stretched to compare Morrowind to ebay, digital designers can still learn a lot from this game as it shows how complex interfaces can be made intuitive just by implementing simple mechanics and attention towards accessibility.
Unce upon a time
Video games weren’t always the graphical masterpieces as we know them today. A couple of decades ago, video games relied heavily or completely on text-driven experience. This lack of graphics made designers use whatever tools they had in their hands which, at the time, was nothing more than white text on black surface. You had to be pretty creative with the text and interaction to create experience that could make up for the lack of sound and visuals.
As time went by, game designers became masters of storytelling and, coupled with developing graphics, that meant that games became more and more immersive. But system limitations are still system limitations and they often had to find their way around. A great example of a game doing this right was Fallout 2. Not only is our personal favorite game of all time but also a game that’s known for its absurd attention to detail. Set in a post-apocalyptic world, the world of Fallout 2 is so rich in details that it’s ridiculous.
What sets it apart from other games and what digital designers can learn from is Fallout’s love for contextual details. Every pixel is designed in a way that it helps in creating atmosphere of a post-apocalyptic world. It’s a gruesome task, but it’s enough to take a look at the HUD below to see that it’s, although obviously outdated, extremely rich in detail. It’s not only rich in any detail – it’s rich in detail that correspond to the context of game’s story. Even the HUD itself looks like it was found in a barrel of nuclear waste 100 years after a nuclear war.
Now, what Fallout 2 also does right is the way it uses text information. Due to graphic limitations, a lot of interactions could not be shown properly. For example, if your character got hit in leg and started limping, that could not be shown. It had to be written down. Clever designers obviously though to themselves – hey, if we have to write things down, at least let’s display it in monochrome. Coupled with nicely and contextually designed UI, monochrome green text looks great in a post-apocalyptic setting. The fact that it was funny most of the time helped, as well. Not only did the UI fit the game’s theme, but so did the font.
Fallout 2 is a great example of two things. First, it‘s an example of a game that doesn’t let technical limitations get in the way of its UI and UX. Second, it’s an example of a game that does everything to create a compelling gaming experience, starting with the story, the humor, all the way to wonderful Interface. It’s no wonder that it’s lauded as one of the greatest games of all time when all of its elements worked together to form a story.
In our opinion, this is the single best lesson that a digital designer could take from video games. It’s the holistic approach that creates a great User Experience. It’s not just a nicely structured information architecture or the symbolism. Every element should be well thought out and serve as a building block of a larger system. The clarity and the character it eludes, they all have their place and serve to provide the right and engaging experience. It’s the way that the game uses it’s element to evoke a complex setting and story, no matter how great the technical obstacles might be, that really sets this one apart. While the design patterns have changed over time and Fallout 2 looks outdated by today’s standards, the storytelling its UI provides is universal and great storytelling comes from a lot of small things being done correctly.
Solitaire, Sonic the Hedgehog and gamification
One of premier time-wasters, Microsoft Solitaire was originally intended to help people get used to the new graphical user interface. During the time of its initial release as a part of Windows 3.0, GUIs were still a relatively new thing and a lot of people had trouble getting used to new UI that was completely different from what they were used to. Solitaire was intended to “soothe people intimidated by the operating system” and, since Solitaire was played using the drag-and-drop technique, including it was a cool way of gamifying the experience. It’s rather an ingenious approach, one that simplifies a new concept, turning into a game where you always can restart if you mess something up.
On the other hand, one of the most common video game tropes, the Green Hill Zone (named after the first stage of Sonic the Hedgehog 1), is a nice example of progressive learning. The way “green hill zones” work is that they are levels made easy, charming and welcoming on purpose, providing little to no challenge for the player.
This is relevant as “green hill zones” enable the seamless transition between the tutorial and the real game but it’s done in a way that the tutorial-esque level is presented as a standard level. This way, some complex interfaces and mechanisms can be presented to the audience in a way that they are encouraged to progress, even at baby steps.
We already wrote articles on gamification and gamification psychology so you can check them for additional info, but long story short – gamification is the process of using game thinking and mechanics to engage the audience and solve problems. While you’ll rarely come across something really revolutionary when it comes to UI, if your website/app/program has some dull but mandatory elements, gamifying the experience can be a good way to engage or teach users.
What you want to do is to design those game elements in a way that they emphasize positive behavior. There have been countless of examples of failed gamification as it’s not easy to pull off, but using game mechanics to drive certain behavior can be a powerful tool in achieving desired results and driving desired behavior.
Human urge to collect things, no matter how trivial they might seem, is very powerful. That’s why so many apps, games and even websites reward their users with various badges or some similar collectibles, even for extremely trivial actions. Again, gamification is a good technique to use when a user is faced with boring and repetitive tasks. If you, for whatever reason, require your users to do a lot of repetitive action, handing out rewards provides them with an incentive to do so. A great example of an app that does this right is the popular trivia quiz game QuizUp. By offering a lot (and we mean A LOT) of unique and interesting achievements that showcase just how smart you are, Quiz Up succeeds in maintaining player’s interest. While the game itself isn’t boring, this adds a lot to its charm as you can get various cool looking titles displayed by your name as you gain new achievements.
