We're taking you on a journey through game interfaces of the past and present: from Spacewar! and Pong to Shadows of Tomb Raider and Detroit: Become Human, see how games' UI evolves and changes and what the future might hold for us.
User interface is a feature that is often overlooked. It remains unseen for the better part of gamers, and yet plays a huge role in the way we perceive the gameplay and interact with the medium.
What is the User Interface (UI) exactly? It’s a combination of controllers such as keyboard and mouse and interface (inventory, map screen, etc.). We will dive into the past of UI, see how it developed over the years and influenced the success of well-known big titles. We’ll also try to find out if there are any regularities between the UI with a significant style and design and the success of the game. Let history unfold.
Part I. The Birth of the Game Industry
In the beginning, there was nothing. Then, Karl Brown invented his weird cathode-ray tube. Businessmen of that time saw the potential of this modest start-up, and the world got an oscilloscope. After a few updates, it began to be used in TV production. Time passed, and inventions became more and more interesting.
In 1962, engineers from MIT (Massachusetts Institute of Technology) decided to make a game for oscilloscopes called Spacewar!. That was a milestone event.
1962: Real-time Screen Control in Spacewar!
Spacewar! was the first game with real-time screen control. The interface consisted of a start screen and health bar, which appeared for two seconds in the beginning. That was quite enough.
After a while, some guys inspired by Spacewar! created the first commercial arcade machine Computer Space (1971). Same space, different design. This HUD (Head-Up Display) was placed right on the body of the arcade machine, the 13” screen displayed only counters.
From this moment on, each decade brought us lots of innovations and inventions in the world of video games.
1970 - 1990: A New Feature - High Score
TV-sets became less exotic and more affordable. Even at that early age of the industry, developers’ imagination was unstoppable, and the world met Pong. The game was featured on the first game console Magnavox Odyssey.
While Magnavox was trying to sell their highly expensive console, another company called Atari made Pong for arcade machines and its home device, which soon arouse a controversy over the copyrights. As for the interface, there was nothing new, just the old HUD with a chopped font.
Years were rolling on, arcade machines became more and more popular. Then came Space Invaders - two colors and a bunch of aggressively circling aliens. The game had competitive mechanics and introduced a new UI element: High Score. The game became a hit and spawned clones like Galaga and Galaxian. There were attempts to emphasize the upper part of the HUD and use icons to indicate remaining lives and hard-earned wins.
1980 - 1990: Games Became Colorful
This was the era of Pac-Man and Mario. Games were finally working in color. There were a lot of innovations in those years but none of them seriously influenced UI. The playing area wasn't static anymore; in Mario, players were running through a long horizontal location. It’s easy to notice that the HUD in Mario became more organized. All of the interfaces of those years seemed to lean toward one pattern.
In 1986, Nintendo released The Legend of Zelda for Famicom. Zelda had a plot, inventory, various weapons. The game quickly became a hit. The color palette of all the items (there are plenty of them in the game) works very well with the inventory color. Even though it's occupying a lot of screen space, this HUD was very innovative for its decade.
In 1989, Nintendo released Gameboy. The same year, Sega presented its own game system Sega Mega Drive (Sega Genesis).
1990 - 2000: New UI Elements Came with New Genres
Finally, Sonic the Hedgehog, Mortal Kombat, and the first PlayStation arrived.
Brand new genres appeared and brought new interesting UI elements. Fightings introduced progress bars, adventures started using plates under the groups of the elements. Interfaces stopped being a bunch of letters and numbers; instead, they were all working for immersion, supporting the style of the game.
In the middle of the 90s, CD-ROM technology stormed the market. Developers got additional space and started making games bigger and prettier. With more flexible graphics, the developers rushed off to experiment with UI. RPG enjoyed playing with textures, buttons, and other frills. Strategy games introduced more complex detailed interfaces.
3D started slowly conquering the industry and enabling developers to use the first-person view. Quake (1996) took the world by storm With all three dimensions finally available for developers to play with, a new type of UI design was required. The growing popularity of games made it useful to divide the interfaces into two groups: diegetic (those which exist in a game world) and non-diegetic (an overlay on top of the game).
During that time the Internet was slowly rising and the first cell-phones started circling around. At the end of the1970s, Nokia released phones with the famous Snake. Mobile games went through the same stages as video games: monochrome screens, arcade gameplay, etc. For a long time, the interfaces of mobile games had been just a bunch of letters and numbers.
Part 2. Further Games' UI Development
2000 - 2010s: Customization of UI Windows and Simplicity
In 2000, the first version of The Sims was released. Its interface was significantly different from the games made in the previous decade. It had more in common with operating systems than with games. In terms of functionality, it was a more complex product.
2002, The Elder Scrolls III: Morrowind introduced a unique feature: users could rearrange the UI windows and customize their size, just like they do in operating systems. The novelty worked well and didn't confuse players which is always important for innovations in UI.
Assassin's Creed (2007) moved in a different direction in terms of interface. Its minimalistic and futuristic UI contrasted with the ancient-world locations, so the interface in this game not only fulfilled its basic functions but also greatly contributed to the immersion of the player. This stylistic discovery along with the popularity of the game helped the new type of UI dominate the future design decisions of game developers.
Games were becoming more complex while interfaces - simpler. After all, all of these buttons and progress bars were just a reflection of the game mechanics. Minimalism isn’t everything but the “No HUD” mode is worth mentioning.
Dead Space (2008) took this idea a step further. This is a perfect example of a diegetic UI. The developers managed to place the health bar right on the back of the character, making it a believable element of the game world. The map, in its turn, is a holographic projection of the surrounding space. This approach helped players to concentrate on the gameplay without being distracted by the UI.
During the decade, we saw the arrival of four groups of the UI:
- Diegetic;
- Non-Diegetic;
- Meta (close to Non-Diegetic, mostly 2D, exists in the fictional world of the game);
- Spatial (close to Non-Diegetic and Meta, mostly 3D).
In 2008, Android Market and AppStore were launched. The gaming market was officially divided into three segments: PCs, consoles, and mobiles. Three different approaches to the design of UI had to be utilized. Released in 2009, Angry Birds proved that the mobile market is quite profitable, so developers had to come up with some ingenious UI solutions for it.
2010 - 2020: Mobile Games and a New Approach to the Design
Within the last decade, video games have been getting more popular and complex. There's a lot to cover here, so we'll just concentrate on some of the most interesting solutions.
The developers of Clash Royale (2016) created a fast UI with swipeable tabs. All mechanics and UI elements were designed to let the player interact with the screen with one hand. Clash Royale perfectly demonstrates the importance of UX (User Experience) in UI design.
Released in 2017, Persona 5 demonstrated a new graphic approach to UI. The interface features a mix of the punk subculture from the 70s (see the Sex Pistols logo) and comic books and looks unusual and fascinating. Lots of bright spots were required by the genre and the style of the game, and they are reflected in its UI. Since the game is turn-based, it doesn’t require immediate responses from the players and gives them time to explore this perfect chaos. There were a few debatable solutions but the bravery of the designers paid off. Persona 5 declares that breaking the rules could be useful. The golden rule of UI “The good design is something users don't notice” was smashed into pieces.
Their UI was even cosplayed.
In 2018, Detroit: Become Human on PlayStation 4 was released, and its main menu deserves attention. On the one hand, the UI is clean and laconic; on the other - within it, you encounter and "talk" with a game character before even starting to play. Such a UI element makes the otherwise plain experience of interacting with interface pleasant and immersive.
Shadows of the Tomb Raider (2018) supports the point that a good interface shows you the necessary information only.
Conclusion
During the last twenty years, game development has been improving rapidly, especially with new technologies coming along the way. The console market has grown even more with constant updates and new releases from three big names: Microsoft, Sony, Nintendo.
The meaning of the game interfaces was shaped and put into words: they have to give players essential information and should not distract them from the gameplay. This led to more simplicity in UI. The more organic and immersive into the game the interface is, the smoother the gameplay, and this feature is definitely appreciated by players. Take a look at such well-known games like Detroit: Become Human or Dead Space.
Nowadays, games are also designed for multiple devices at the same time, and this gives players an opportunity to play whether they want. In the last decade, mobile games became a separate segment in the industry and are taking a leading position in the gamers’ preferences. Such a shift required a bit of creativity from UI designers and finding ways to create various UI designs to follow technical requirements of screens and to keep its functionality on the same level. Adjustability and recognition of the interface from multiple devices is one of the key goals now, especially in shooters and fast-paced games. Good examples of how UI can be adjusted to different devices are Blizzard's Hearthstone, Ubisoft's War of Odyssey: Gods and Heroes, and Hotel Transylvania: Monsters by Outright Games.
As for now, interfaces require a balance between being unseen and giving the information correctly and timely. Achieving this can be a tricky thing to do and analyzing and measuring the effectiveness of your game’s UI is crucial in the production cycle.