The Connection Between Web Design & Game UI Design
Recently in class we had a couple of guest speakers – Matthew Marco and Ceci Dadisman – discuss web navigation and website design. The way that they broke down the elements and careful thought that go into designing a website to make it welcoming to the general public struck me as being in many ways similar to the design of a user interface in video games. I don’t claim to be an expert in this field, but I do know that, like the design of any website, the UI is an important part of every game that can potentially make or break it.
Perhaps the most obvious comparison would be the way a person navigates a website’s menu versus the average in-game menu. When designing a website menu, one must be mindful of their navigation button placement. It’s important to think about what parts of the site a typical visitor is going to access most often. For instance, on a news site’s top menu you would likely want to place an “Articles” button in a position where someone would notice it right away because it’s a very important feature of the site; the serial position effect decrees that that would likely be a position toward the far left. This same method for positioning links to features applies to games as well.
As an example, let’s take a look at the in-game menu of a game I’ve been playing recently: Lost Odyssey. As a role-playing game where you take control of multiple characters in your party, healing your team after battles is something you must do on a regular basis. As such, the menu has a dedicated “Heal” button close to the top – something that most players will notice right away. Just like any good website menu does, this menu follows the serial position effect. An older or less optimized game menu might make a player dig through multiple submenus, wasting time searching for healing items or spells to heal their characters; this fails to engage a player in the same way that a poorly designed website might turn away a viewer if it requires them to scan a menu searching for an important feature.
Another point of comparison I think of are games’ HUDs (Heads Up Display). I specifically found myself thinking about this as Dadisman discussed the importance of considering how to guide a viewer’s eye when designing a website. A video game HUD typically displays important statistics in a simple way that makes them easy to keep track of in the middle of even the most fast-paced gameplay. A good HUD must be readable at a glance while also being out-of-the-way enough that it doesn’t distract from the game. An example of a good HUD can be found in Street Fighter 5 (pictured above). In a fast and competitive game, this display features everything a player needs to be aware of without being too complex to read in the heat of the moment (the time limit, their health, the level of charge toward using special moves, etc.). This still bears similarity to a website’s top menu, which is meant to provide a quick and efficient way for a viewer to see all the parts of a website as well as navigate it with ease.
Altogether I think that at the very least there are some core ideas that are shared when designing websites and game UI. The ways we navigate for features and information bear some serious similarities between the two, and I believe this is something worth noting when designing for these mediums going forward.
Images Courtesy of:
Supergiant Games
Mistwalker and feelplus
Capcom and Dimps
