User Interface – User Interface – and UX, or User Experience, are both key aspects of game design that can make or break the enjoyment and consumption of a title for players.
While this may seem like something to ignore from the business side of things, it’s important to remember that good UI and UX can drive monetization. The rationale behind the store design, special offers and more are influenced by the user interface design philosophy as much as any other part of the game’s menus and interactivity. That’s why Atomhawk Advance’s Leanne Bailey focused on the art of game UI design in her talk, “Style, Trends, Immersion and Abstraction – Developing a UI Art Direction” at Develop: Brighton 2023.
The lecture mainly focuses on aspects of designing a more specific user interface for games in general, and for consoles and the personal computer in particular. However, several aspects touch on broader issues of user interface design and indeed, in examples from the world of mobile games and how they can steer players along the right lines for a better user experience in general.
Stripping vs immersion
Bailey first prescribes two ends of what she proposes as a sliding scale. While she admits it’s not an exact science, she suggests that most user interface design falls on either side of a scale that ranges from “immersion” to “abstraction.” At the former end of the scale we have a game like Alien: Isolation, which goes to great lengths to create digital interfaces and menus – to the point of recording their menu interfaces to VHS for authentic graphical glitches. While on the abstraction side of the scale we see something like Genshin Impact, which uses visual metaphors like spell books in its mobile version and star maps in the console to convey their menu and interface.
But what does the user interface do from a business perspective? Well, besides improving the player experience in general, a good user interface design can also support monetization. Whether it’s non-intrusive storefronts or effective placement of advertisements so as not to detract from the game – it can be argued that companies like Bidstack that place advertisements in the game world contribute, in an abstract way, the same kind of deep design that defines games like Alien: Isolation.
It should be noted that after Hi-Rez Studios scrapped their highly anticipated mobile spin-off, Rogue Company: Elite, the company still grabbed a number of elements such as maps, characters, skins and shop design. Although it may not be the most palatable element of UI design, it cannot be denied that less intrusive storefronts offer an advantage to both players, developers and advertisers alike by putting potential in-app buyers in a better mood with a smoother user experience. .
As Bailey walks through the art of the interface, she also has some key suggestions for developers and UI designers.
One, know what your competitors are doing – and don’t innovate for the sake of change. Two, understand readability and the platform you are designing for, mobile has a much smaller screen so we can see that titles that feature mobile versions often have larger icons and textures for greater readability. Three, know how your UI will improve your UX, because while a minimalist menu might work well for an immersive action game, it will eventually become frustrating to navigate in an information-heavy RPG.
All of these elements go into creating an effective user interface design, and as Bailey points out, there are a wide variety of games to look at as examples; Alien: Isolation, Genshin Impact, Pentiment – or even Voez, a much older mobile title from 2017 that Bailey is particularly lauded as having stood the test of time in terms of its interface design. It should come as no surprise that the user interface is such a central part of the UX experience, as outside of the game world itself, it is the primary way players interact with games across all platforms.
window.fbAsyncInit = function() {
// init the FB JS SDK FB.init({ appId : 250161755076617, // App ID //channelUrl : '//'+window.location.hostname+'/channel.php', // Path to your Channel File status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML });
FB._PG = { url: "/useractions/loginfb/", response: "allowed",
// Common handler to fetch FB details and reload the page process: function(me){ $.post( FB._PG.url, { username: me.username, uname: me.name, uid: me.id, uimg: 'https://graph.facebook.com/' + me.id + '/picture?type=large' }) .done(function(xml){ if ( $("status", xml).text() == FB._PG.response ) window.location.reload(); else alert('Error: Something bad just happened. Our tech department has been notified. Please try again later.');
}) .fail(function(xml){
alert("Error: something wasn't right there, please try again.");
}); },
// Used by event subscriptions to handle the response handleResponse: function(response){ if (response.authResponse) { FB.api('/me', function(me){ if (me.name) FB._PG.process(me); }); } },
post: function(text, image){ image = image || $("#fb-image").attr("src"); FB.ui({ method: 'feed', display: 'popup', link: 'https://www.pocketgamer.biz/news/81990/the-magic-that-makes-mobile-ui-look-good-and-feel-great/', description: text, picture: image }); } };
FB.Event.subscribe('auth.statusChange', FB._PG.handleResponse);
FB.Event.subscribe('edge.create', function(response) { $.post('/ajax/social-links/', { site: 'facebook' }); }); };
(function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "http://connect.facebook.net/en_US/all.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
.