Similarities Between Website Design and UI for Games/VR
You may not think that designing websites and designing UI in interactive media are terribly similar - but at the end of the day, design is design and the thought processes behind it are the same.
As I learn more about UI/UX for games and VR, I’m finding quite a lot of similarities between them when it comes to design. They’re quite a bit different in practice, but the same fundamentals apply across the board.
Here a few key things that I’ve found that apply to design work for web, as well as games/VR!
A website within a game! In Cyberpunk 2077, there is a web browser and websites you can visit. I do take issue with the lack of back button, though. (Screenshot by me, Cyberpunk 2077 by CD Projekt RED)
Understanding the User
No matter what you’re designing - an app, website, or game - your responsibility is the user. Humans are humans, no matter what they’re interacting with. Being able to understand humans is the first step to creating a great user experience.
Everything you design should be made with intention - being able to back up design choices with facts about your user. Are you making a VR application targeting first time users? Keep things simple and familiar - taking inspiration from web and app design. Are you making a website for busy executives? Keep copy short and sweet and contact information easily available.
User Testing / Playtesting
No matter what you’re working on, getting it in front of a real human being who would actually use your design is crucial to further understanding of the user (see above), identifying any potential bias in the design, and observing potential areas of friction.
A common experience in both games and websites is not being sure where to go next - is there a clear marker or piece of information pointing me towards my next goal? Is there an obvious action you want me to pursue? Is there something in the design that I keep getting stuck on, despite not being relevant to my task?
Visual Cohesion & Immersion
When designing a website, it’s important to make sure that everything looks like it belongs together. Anything that looks slightly out of place will be distracting - which can be a good thing if you want to draw attention to it, like using a bright color exclusively for high-value CTA buttons.
With games and VR, the UI must fit seamlessly with the world being created. It would look jarring if a high-fantasy game was using an ultra-modern font, for example. Again, visual dissonance can also be used to create intrigue - it just has to be done in a way that makes sense for the narrative and general experience. That ultra-modern font could make sense if the plot was that you were visiting the fantasy world via a futuristic simulation.
A great example of UI as a narrative device - Assassin’s Creed! In the game you’re sent back in time from the future, so it makes sense that the UI is modern. (Source: GameUIDatabase.com)
Information Architecture
When designing a website, the information architecture is the first thing established. What information can be grouped together on a page? What needs to be broken out? What are your users going to be looking for first? Does each section of content make sense for the goals of the website as well as the users?
For games, information architecture can be a lot more complex but the ideas behind them are exactly the same. When designing an options menu, for example - how are all of the options grouped? Are there enough accessibility options to warrant an accessibility tab (hopefully yes!)? Do the accessibility options get their own spot on the main menu for easy access? How granularly do we want players to be able to customize the graphics or audio settings? And is it easy to figure out how to save and load the game?
Readability & Responsiveness
For web, it’s important to keep in mind different monitor and mobile device sizes. Luckily with the use of CSS we are able to customize how things fit on different screens if a font starts to look a little big on mobile, or too small on desktop monitor.
This translates perfectly to game development - your UI has to work on ANY computer screen, any iteration of mobile phone for mobile games, and a near infinite number of television screens for console games on top of the varying distances someone may be sitting away from their screen and the variations in human vision.
For VR you have a bit more control over the space and size of things being displayed, but you do have to contend with the flaws of human vision and the readability of things while in motion - sometimes very erratic motion if the UI is attached to the player’s movements.
I will always find a reason to mention Baldur’s Gate 3 - but it’s a great example of how a game meant for PC/Consoles had to rework their UI for smaller screens, like the Steam Deck. (Source: Rock Paper Shotgun)
Development & Technical Limitations
As much as we’d love to make the most elaborate, design-forward work imaginable for every project - in reality, there is always some kind of limitation in place. It could be budget, time, or technical performance. An incomplete experience or a slow, disjointed load time is always a bad user experience, no matter what the product is.
This is where being able to communicate with others - especially developers - is crucial. For websites, it could be figuring out what images could be compressed to improve load speed or contributing to development QA to tweak designs. In games, it might look like understanding how something is implemented in the back-end to choose the best type of interaction on the front-end - a slider for more fluid options (ex: lightness/darkness of hair color in character creation) or check boxes for something that’s more binary (ex: auto-aim assistance or subtitles).
As you can see, there’s a lot of overlap between designing a website and designing the UI for a game or VR experience. I could go on and on, honestly, but these are the biggest key similarities that I’ve found from doing work on both!
