The influence of video games in Web Design/UI/UX

Anyone who owns a console or PC will have experienced a feeling of familiarity, that “I’ve seen this somewhere before” thought when, browsing a site or shopping online, they will have come across some element that, upon investigation, turns out later to be a tribute to or ‘inspiration from a video game.

The video game industry has been a key part in the development and evolution of Web Design as we know it today: starting with Tennis for two (1958), Pong (1972) and Space Invaders (1978).
With the introduction of color, video game growth surged even more: PAC-MAN (1980), Donkey Kong (1981), and the timeless Super Mario Bros (1983).
The 1990s will be remembered as the Golden Age of Videogames: the release of PlayStation and especially the first 3D games such as Crash Bandicoot, Max Payne or GTA, which totally revolutionized the entire industry.
Starting from the most classic games like Pokémon for Game Boy to the most recent ones like Elden Ring for PS5, the formula is always the same; but so what makes the difference between a quality game and a poor one? What do websites and video games have in common?

All of the greatest classics share a fundamental factor that made them giants in the industry: UX and UI. They had to be simple, intuitive, accessible, and understandable by an audience of virtually all ages.
Getting to the level and quality that we take for granted today, however, was not so straightforward: to develop a video game in addition to the whole graphics part, there are a thousand other unknowns and no less important sections such as sound, playability, story, level design, and the game experience in toto.
Unlike the web, early video games on their release date had no possibility of revisions, patches or more simply an internet connection: they MUST work.

A good site in turn must try to look forward so as not to fall behind on technologies and design in order to offer the most and make the user fulfilled. As with video games, websites should also be a well-rounded experience, so we will group the commonalities to follow.

The User is the Hero

The main intent of every video game, as with websites, is to put the user at the center and make him or her feel special, if not even the hero of the story. From the most classic to the most modern, all video games give the impression that the player has control in his or her “journey” to the end, when in fact, regardless of the choices made in between, the ending (in a great many cases) will remain the same.
Exactly as should happen on a website, right?
Give the user complete control of their experience, so that then it is the user themselves who WANTS to get to the end of the experience.
A good example is the Airbnb website, which with its simple and intuitive screen entices the user to try, search and click making the experience enjoyable and interesting.

Related content and storytelling

In the context of video games, the term “Ludonarrative Dissonance” is used to refer to that uncomfortable situation where the player is forced to perform actions he or she does not want to, or in the case where he or she wants to do something but the game prevents him or her from doing it; as also those who design websites will have encountered occasions where certain pages have a high Bounce-rate or certain dynamics do not allow for satisfactory fluidity.
A good solution to these snags is storytelling: a good story, or a good logical/narrative thread, such as a sound design with con(s) really helps the experience to take a course and make sense, making it more immersive: this does not mean giving a fantasy twist and a story to a site, but with style, graphical elements and animations the whole browsing experience improves dramatically.

One cannot fail to mention titles such as Red Dead Redemption 2, Halo, or The Last Of Us: works that not only won prestigious awards but also completely twisted the way a story/experience is told and followed: going so far as to inspire and convince even directors and television producers to transpose scripts to the small and big screen, such as The Last of Us (HBO).
Masterpieces that to this day continue to inspire Creators and Designers of all worlds and ages through iconic and timeless styles.

Symbols, icons and the superfluous

Often overlooked or taken for granted, the weight of icons and symbolism in UIs is by no means to be forgotten.
Just think of the health bar in Tekken, the little hearts in Super Mario, not to mention mini-maps as in Gran Turismo or the more comprehensive ones for ammo, compass and more in shooter and non-shooter titles such as Call Of Duty, Battlefield and GTA.
However, the importance of these symbols, which with time seem to have almost reached a “global standard,” is crucial: to prevent or minimize user distractions without, however, making the user detached and distracted from the experience.

In the world of video games it can be said that now, depending on the genre, the same elements are generally found but with different colors and positions, this infographic is generally called the HUD.
In the web, they are instead translated into icons, such as the bolt symbol for settings, the three lines for drop-down menus, and so on, trying to provide the user with immediate and recognizable information and references.

HELP!

In virtually all games today, we find guides or tutorials that help to familiarize you with the controls, the system, and the game world. Similarly on websites such as e-commerce, small animations or pop-up elements during the purchase process could help, for example, to reduce abandoned shopping carts.

Clues such as sounds, to this day a key component of video games, can also be used to guide the user, or in some cases direct the user: in a great many titles, sounds are used to help the user find their way, clues or things generally hidden from view.

In God of War, for example, ravens make an unmistakable sound so that they are more detectable given their features and colors that blend in with the landscape. Similarly, if a box is not checked or a field is not filled in on a site, there are instances when we will be alerted by sounds or notices with garish colors.
A good way is to keep the classic colors such as GREEN when correct and RED when incorrect, and as mentioned before, in addition to colors also animations or pop-up windows help a lot to keep a user focused and prevent him from abandoning our site due to some misunderstanding or oversight.

Conclusion

It can be said that the world of video games has influenced and shaped not only the web but also many other industries. Suffice it to say that the first video games were not as well thought out, developed and researched as they are today but they produced the same effect: keeping young and old glued to the screen.

The mission of a website is no less; in fact, it is probably even more ambitious because bringing a user into the experience all the way means capturing interest and attention with far fewer means than those available in a video game.
It can be said that to this day the possibilities even for the web are endless but some limits are unfortunately found or will always be found, this does not detract from the fact that with the means at hand and the possibility of having inspirations as art, culture and many other worlds have been until now, even video games for 60 years have been making no small contribution to worlds such as the web, programming and much more.

“Reality is broken. Game designers can fix it.” – Jane McGonigal

“I am conscious of that when I make these games: I try to make a game that has beautiful open spaces, gaps, room for players to enjoy it in ways that were not authored. I never want it to be where you have to follow the rules completely, where you have to do things exactly as the designers intended.” – Hidetaka Miyazaki

More articles

Finding the right web agency for your business is critical; it can revolutionize the way you can reach your customers and beyond!

AI opens up new opportunities, but it also presents challenges and obstacles to overcome. Let's find out in this article dedicated to ChatGPT and beyond!

Don't be fooled by appearances. Opting for a free website creation can pose numerous risks to your business. Let's find out what they are.