The Makers of Mobile Hit '80 Days' on the Importance of the User Interface

Two paddles on either side of the screen, a ball, and a score counter at the top. It doesn't get much better in terms of user interface. Give that to anyone and they'll know what's going on in seconds. Obviously, games have become a bit more complicated in the 40-plus years since Pong was released, but the core concepts of UI (user interface) design remain the same. Show the player what's going on, and give them the tools to help them play.

The Independent Games Festival nominees were released recently, and mobile game 80 Days led the way with three nominations for Excellence in Design, Excellence in Narrative, and the Grand Prize. The game has also received four nominations at the 2015 Gaming BAFTAs, including nods in the Innovation and Story categories. I spoke with Jon Ingold and Joe Humfrey from the game's Cambridge, UK-based developers, inkle Studios, about UI design and how to create a really slick-looking game in the modern industry.

"The goal is always beauty, clarity, and function, but it's hard work getting there," says Jon, Content Director on 80 Days. "Every screenshot should look delightful, well-balanced, and composed, like a page from a glossy magazine, or whatever else suits the tone of the game. It should be immediately parseable—including knowing which bits are buttons and controls, which are displays, what's fixed, and what's variable. If there's a hierarchy of information, the player should be able to recognize that immediately. Finally, of course, a player should be able to actually do whatever it is they need to be able to do."

'80 Days' launch trailer.

A traditional way of approaching UI design is to limit the number of "clicks" it takes for the user to get the information they need. But with 80 Days inkle Studios did something different, as Jon tells me. "That's a classic measure, especially in web design, but we tend to think more in moment-to-moment terms about, 'why is the player looking at these buttons right now', and 'what might they want to press right now,' because if you get that right, players will happily find their own way around the game's interface."

Humfrey is the Art Director on 80 Days. "It's become a bit of a cliché among designers like (Apple Senior Vice President of Design) Jony Ive, but striving for simplicity really is very important. The process of reduction is absolutely key; finding elements you can remove or hide and, more intelligently, finding elements that you can combine or coalesce. The most exciting part of producing a good design is when you can find one simple button, text, or widget that can serve multiple purposes without any extra visual complexity."

"Consistency is also essential," he continues, "and will help with both visual coherence—'beauty'—and to reduce cognitive overload for the player, as the less new stuff they have to learn, the better! Finally, during the visual design process, establishing levels of contrast is essential: a stronger differential between shades makes elements stand out, while softer shades makes elements recede. And these elements need to sit comfortably together."

Jon tells me how all this translated into 80 Days. "The UI is a core part of the game experience—in a sense, it is the game. Half the pleasure of chess is lifting the pieces and placing them down; the clusters of objects in the middle and the empty spaces around them, just like half the pleasure of poker is riffling through the cards. The tactile experience of what the player is actually doing when playing the game is, in a sense, the only 'real' thing that's going on. So spinning the globe in 80 Days or flipping through the contents of suitcases has got to feel as nice as possible."

A big selling point of games, particularly on the mobile market, is presentation. You might think this is all down to the artwork and the sound, but in a game like 80 Days, which relies heavily on text, the words themselves have to be nice things to look at. Jon explains how they dealt with this issue:

"A lot of games forget that text is a visual medium, and that people will look at text as an image before they read the words. Bad typography prevents reading; and bad transitions from one screen of text to another can be confusing, or can lose a player's place in the story.

"Simplicity and good design have become the norm on mobile platforms, which is both fantastic for the user, and challenging for developers. Unfortunately, it means that, as a user, when I return to other platforms such as consoles, they generally seem very poor in comparison—I've been swearing a lot at the PS3 online game purchasing experience recently."

It does seem as though many bigger titles, on consoles and PC, still can't get their UI design right. I very much enjoyed Dragon Age: Inquisition, but its mini-map may as well have not been there. How is it I can barely plot a course to the other side of a hill when in Elite: Dangerous I can plot a course halfway across the galaxy with no trouble?

"I think good UI is always a balance between two forces, being clarity, and function," says Jon. The perfect UI for game designers is a mess of buttons, with one button for everything the player might want to do right now. The perfect UI for a game player is a single central button that does the thing they want to do next.

"A good UI manages to sit between those two positions, guiding the player fluidly through the gameplay so that most of the interactions they undertake are productive and successful, without the game becoming an entirely linear experience."

Jon gives me an example. "For instance, we work quite hard to minimize the number of times the player is overwhelmed by choice, and take care to introduce each element of the UI one by one, during the game, at the point when it's meaningful and useful to the player. Ideally, after ten minutes they know what everything does without the need for any tutorial."

"But that's really hard to do," Joe continues. "And we often find that we end up simplifying our actual game design in order to keep the UI simpler, and I'm sure there are designers who would say that was the wrong decision—that the game needs to be interesting and the player can damn well learn the rules. But that approach feels very alien on mobile, where the screens are small and the buttons are big. Similarly, we edit the text heavily to ensure it sits well on the screen, just as you would if writing a graphic novel."

I wonder whether you needed an artistic background to be able to create a good graphical user interface. "Definitely," Jon replies. "Before co-founding inkle with Joe, I created a lot of independent interactive fiction, and spent a long time trying to make a UI that was beautiful, approachable, and clear—and I got nowhere! For me, one of the most exciting things about starting up the company has been the opportunity to take all the exciting things about digital storytelling that I've been playing with for years, and present them in a way that isn't visually completely appalling.

"Ultimately, UI design is a graphic design problem. You can think logically about the layout—you can build wireframes, and reduce clutter, and ensure that buttons are where your users expect them to be, and so forth—and we do all of that as best we can, of course. But in the end, the final visual pass is where the design lives or dies. Good graphic design can make a cluttered interface look simple; bad graphic design can make the simplest layout unusable."

Joe agrees. "Much of this process is about artistic composition. Creating spatial and chromatic relationships between elements is the same whether it's a vase and apples in a still life, or the text, margins, and button placements in a text window. In general, giving text a larger margin will give it prominence and gravitas, as well as a sense of calm from the cleanliness of the space. If you paint a picture of a single apple centrally placed on a white cloth, you're communicating all the same things, despite the mundanity of the subject matter."

There are many lessons to be learned here. You can be as smart as you like, mapping out buttons and measuring out where everything should go—but if it doesn't look good, people won't want to play it. Da Vinci's Vitruvian Man is impressive in terms of its display of human proportions. But people would probably rather look at Dali's The Sacrament of the Last Supper, a painting which is laid out using the same Golden Ratio, but also has some nice artistic flourishes. A bit of logic, and a bit of art, and you've got yourself a lovely graphical interface. Let's hope more developers put as much thought into it as inkle Studios.

The winners at the Independent Games Festival, part of the annual Games Developers Conference in San Francisco, will be announced in early March.

Follow Matt on Twitter.