The magic that makes mobile UI look good and feel great | Pocket Gamer.biz
UI – 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.
Although it may seem like something that can be overlooked on the business side of things, it’s important to remember that a good UI and UX can encourage monetisation. The rationale behind store design, special offers and more are just as much influenced by UI design philosophy as any other part of a game’s menus and interactivity. Which is why Atomhawk Advance’s Leanne Bayley concentrated on the art of game UI design in her talk, “Style, Trends, Immersion and Abstraction – Developing UI Art Direction” at Develop: Brighton 2023.
The talk mainly focuses on aspects of user interface design more specific to gaming in general, and console and PC in particular. However, a number of aspects touch on broader themes of UI design and indeed, on examples from the world of mobile gaming and how they can direct players along the right lines for an overall better user experience.
Abstraction versus Immersion
Bayley first dictates two ends of what she proposes as a sliding scale. While admitting it’s not an exact science she proposes that most UI design falls on either side of a scale ranging from “immersion” to “abstraction”. On the former end of the scale we have a game such as Alien: Isolation, which goes to great lengths to create diegetic interfaces and menus – to the point of recording their menu interfaces onto VHS for authentic graphical glitches. While on the abstraction side of the scale we see something such as Genshin Impact, which uses visual metaphors such as spellbooks in its mobile version and star maps on console to communicate their menu and UI.
But what does UI do, business-wise? Well for one, aside from enhancing the player experience overall, good UI design can also support monetisation. Whether that be unobtrusive storefronts or effective placement of advertisements in order to not detract from gameplay – arguably companies like Bidstack which place advertisements within the game world are, in an abstract way, contributing the same kind of immerse design that defines games like Alien: Isolation.
Notably, after Hi-Rez studios shelved their hotly anticipated mobile spin-off, Rogue Company: Elite, the company still pulled across a number of elements such as maps, characters, skins and store design. Although it may not be the most savoury element of UI design it’s undeniable that less intrusive storefronts can be said to offer an advantage for both players, developers and publishers alike, by putting potential in-app buyers in a better mood with overall smoother user experience.
As Bayley goes through the art of UI she also has some key suggestions for developers and UI designers.
One, know what your competition is doing – and don’t innovate for the sake of change. Two, understand readability and the platform you’re designing for, mobile has a much smaller screen and thus we can see that titles which feature mobile versions often have larger icons and texty for greater readability. Three, know how your UI will enhance your UX, as while a minimalist menu may work well for an immersive action game, it’ll end up becoming frustrating to navigate for an information-heavy RPG.
All these elements go towards creating effective UI design, and as Bayley’s talk noted, there’s 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 Bayley singles out for particular praise as having stood the test of time in terms of its interface design. It shouldn’t be surprising that UI forms such a core part of the UX experience as, outside of the game world itself, it’s the primary way players interact with games on 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) $("#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'));