How Can Video Games Inspire You to Create a Good UI?

If someone lands on your website and is presented with a bad UI (user interface), there’s an extremely low chance that you’ll get them to engage or convert. Likewise, if you have a bad UX (user experience) within a video game, you’ll probably stop playing it and move on to something else.

Video games are an art form, but that doesn’t mean that they don’t have anything in common with digital marketing. You need to take inspiration from anywhere you can. Good marketing and advertising can be an art form too, and both marketing and game design can be boiled down to the idea of making it as simple as possible for people to reach some sort of objective.

In a game, that might mean completing a quest or reaching the end of a level. On a website, that might mean making a purchase or signing up to a mailing list. They’re different outcomes, but the underlying process is the same.

Let’s dive on in and take a deeper look at how video games can inspire UI designers.

A good UI is an essential part of any game

Don’t believe us? The reason is pretty simple. The UI is what we use to interact with the games that we play, whether we’re mowing people down in Grand Theft Auto or building our dream house on The Sims. 

Annoyingly, for UI developers at least, it seems much more common for gamers to complain about a bad UI than to praise a good one. Perhaps Jared Spool put it best when he said, “Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.”

Every part of a good video game should be perfect for the players. Attractive scenery and layouts, a good user interface and the ability to quickly and easily understand how to use it are a few of the foundations of a good video game. But if there’s one thing that we’ve learned as keen gamers who work for a UX design agency, it’s that these factors can also be used to influence the way you create your website.

When you’re designing a game’s UI, you need to display all of the relevant information in a way that communicates to your players what they need to know without overwhelming them. There’s a fine balance to be found between disrupting gameplay with too much information and missing out something important that could negatively affect gameplay and player enjoyment.

Essentially, gaming UI is all about providing an understandable interface to facilitate and streamline the gameplay without confusing or bothering players. Sound familiar? As the owner of a business website, you need to do the same thing for your customers.

Sure, shopping, browsing the web and searching for information isn’t exactly gaming, but there’s a huge amount of overlap between the two. For our purposes, the most important commonality is that if you get the UI wrong, people leave. With a game, the player has already purchased it, so while you might get some bad reviews, at least you’ll take in revenue. With your website, though, you risk driving people away before they have a chance to buy anything.

Note: We talk more about the importance of great UX while sharing a few tips for game developers in our article on how to optimize your steam page for sales.

How can video games inspire you to create good web experiences?

Layout

Layout is arguably the single biggest factor for both video game UIs and for ecommerce stores and other websites. If your layout sucks, nobody’s going to stick around to browse your products or to consume your content, and who can blame them? 

Like websites, apps and ecommerce stores, video games often require players to conduct a range of activities through different menus. For some games, this is as simple as a title screen with “new game” and “load game”. For others, it’s a different kettle of fish entirely.

In big open world and high-fantasy games, for example, there are menus for reforming your party, menus for browsing and using inventory items and equipping armor, and even skill trees that allow you to level up and evolve. 

For example, Final Fantasy VII used Materia and Final Fantasy X used a sphere grid. Both of those were big innovations and in many ways, this layout alone was a selling point for each of the games. Skyrim did something similar with their skill tree, with the added distinction that players could “master” a skill and re-set their level to start again in exchange for other benefits. 

If game designers want these types of systems to work, they need to be laid out clearly and designed beautifully so that it’s as easy as possible for the user to access and understand them. You should do the same thing on your website with your menus, and this applies especially to ecommerce stores. If you don’t get the menu right, people won’t be able to find anything. And if they can’t find anything, they’re not going to buy.

One final tip for both video game UI designers and website UI designers is that you can design your menus to reflect what the content is about. If your video game includes archery, make your hamburger menu look like a stack of arrows. If you run an ecommerce clothing store, make your menu look like a handbag.

Calls-to-Action

Calls-to-action are essentially little reminders of what you want people to do. For marketers, calls-to-action are typically used to encourage people to make a purchase or to sign up to a mailing list. They often consist of short phrases like “buy now” or “learn more”.

In video games, calls-to-action are a little different, often delivered in character (i.e. “I wish someone would kill the manticore that’s been stealing my sheep”), in the form of mission objectives or in the form of popups to help you notice items. Either way, they serve the same purpose.

Calls-to-action are important, which is why you should go out of your way to highlight them whether you’re designing the UI for a video game or an ecommerce store. The goal is to guide the user towards a destination while encouraging interaction.

Remember that calls-to-action can be visual, too. Video games do this well with quest markers and floating names or symbols (like !) above areas and items that you can interact with. Marketers more typically use visuals in the forms of buttons or by offsetting calls-to-action within a page’s design.

As a marketer, you don’t want your audience to miss your call-to-action in just the same way that players don’t want to miss a health pack that might be lying on the ground. That’s why making your calls-to-action attractive, noticeable and clickable is so essential.

Customization

There are two sides to customization, and we’ll cover them both here. The first is the way that games often allow players to customize their user interfaces with the stats they want to see, their item lists, their management tools, etc. 

You can duplicate this on your website by allowing people to customize the look and feel of it. A basic example is something like the option to switch from light to dark mode or the ability to automatically filter out certain types of content. If you’re a food retailer for example, you could allow people to specify any allergies and to automatically filter out any products that they can’t eat.

The second type of customization to talk about is the ability to customize the look and feel of your characters, whether we’re talking about creating avatars or whether we’re looking at The Sims or even Skyrim again. A new generation of game developers is even finding ways to monetize their games through customization, such as by making them available for free but using in-app purchases to allow people to use customization features.

But what’s particularly interesting for us is the way in which games often adapt their gameplay based upon the decisions that players make. This is pretty similar to how sites like Netflix vary their recommendations based upon your previous viewing experience, using machine learning to further refine the experience.

As marketers, we can do the same thing, personalizing our website with cookies and using visitors’ browsing data to provide content suggestions. You should aim to be proactive, allowing them to make choices about the types of information they want to see and the data that they want you to store on them. If they don’t want to see a certain product or product category, let them hide it!

Taking inspiration from good gaming UIs is a great way to learn new tricks and skills that you can then apply to everything from product design to graphic and web design. Authors do the same thing all the time when they borrow a technique they saw in (for example) a fantasy novel and re-use it for a memoir or a romance novel.

The lessons from good game design also remind us of the importance of user experience, even if the users take it for granted. It’s just more obvious when something goes wrong than when everything goes right.

Struggling to get UI and UX just right? Hire a UX design agency! Here at Game Marketing Genie, we’ve worked hard to assemble a team of experienced UX professionals, graphic designers and content creators to help you to make the most of your website and to bring your company into the 21st century and into the future. Reach out to us to learn more!