Published on | Prototyping: From UX to Front End — Medium Chris Harrison

Table of Contents:

UX is an ever-evolving medium, and it’s everywhere. Everything you own has some sort of UI or UX that dictates the experience you have with that product.

It’s for that reason the UX Designers are, like, super important. Some say they’re modern day heroes.

It’s no secret that UX in Software is a big deal, and Video Games are a big deal in Software. So if you do that math then Video Game UX must be a really, really big deal.

This list should probably be called ‘My favourite UX of 2017’, because user experience can be such a subjective thing. I’ve tried to explain my reasoning, and hopefully you’ll find that most of my choices make sense after you’ve read.

As for the format, I’ve chosen a few winners overall, as well as some key games in each category that I feel succeed, or fail, at bringing a great user experience. I’ve also included a number of ‘Honorable Mentions’ — games that really, had this list been any longer, would have made it on there.

For each game, I’ll be looking at the following criteria:

Ease of use and understanding
As a user, do I understand what I’m looking at, do I know how to use it, and does it behave like I’d expect it to?

Integrates and enriches gameplay
Is the UX/UI necessary to gameplay? Does it give the player agency? Does it do so at the appropriate time, in an appropriate manner?

Aesthetically consistent
Is the implementation in-line with the game’s visual presentation? Does it present itself consistently over multiple elements?

Fun Factor
Is it enjoyable to use? Does it add to the fun of the game?

Now that we’ve determined that UX Designers are the vital lifeblood of the modern world, and that Video Game UX will be what brings humanity to it’s final ascension, let’s look at my very professional list of (what I think are) the best Video Game User Experiences of 2017.

Did I get something wrong? Let me know in the comments!

Top 3:

1. Persona 5

Persona 5, in many ways, follows traditional JRPG conventions. You’ve got characters who take turns making attacks based on a set of special moves. JRPG’s have been handling this system in various ways for years, usually through a set of nested menus. Persona 5 doesn’t change this, the interaction design is almost identical to most games of the genre.

What makes Persona 5 outstanding is the way it’s menues behave. They’re brimming with personality. In combat, every transition an explosive snap-shift, and the animations themselves are deep and layered. I mean, just look at this gif:

Selecting ‘Gun’ triggers to an explosive menu transition

At the end of battle, your characters goes for a jog through a series of results screens, each one animating along a striking red pathway. It’s literally an analogy for progress, and it feels frenetic, urgent, and exciting.

Each menu item has it’s own unique transitional animation

Selecting each item in the main menu list plays an animation of your character making cool poses that loosely relate to that item. It’s just ridiculous.

Despite these animations, Persona 5 isn’t without issues. Much like it’s contemporary RPG’s, it’s littered with long nested menus that can sometimes slow down the action or become frustrating when you can’t find what you’re looking for.

It’s also a game full of bespoke systems, and often the UI design and style can make it difficult to understand these systems. Trying to read an item description when the menu is bouncing and jumping around can be a little bit frustrating at times.

However, the love, care, and attention to detail in the UX design of Persona 5 is really something remarkable. Persona 5 manages to take a number of deeply complex systems and apply a layer of raw style that marriages art direction and UX design together. It’s not for everyone, but it’s an absolute stand out example of innovative design.

I stole some GIF’s from this terrific article by Andre Rodrigues. I’d highly recommend reading through it if you’re interested to learn more about Persona 5’s UX.

Conclusion:
Persona 5 integrates the style and tone of the game into it’s UI, creating a seamless user experience where every part of Persona feels like a cohesive single product, which is rare for Japanese RPG’s in particular.

It’s not the most efficient UI on this list. It struggles with readability at times, and has a tendency to sacrifice functionality in order to stick with it’s aesthetic. However, it’s got so much attitude and style that make it really, really fun to use.

2. Horizon Zero Dawn

2017 really ushered in the return to minimalist UI’s, where clutter and style made way for readability and clarity. Destiny 2, Prey, Breath of the Wild all shook the complex, stylised UI’s of the predecessors in favour of simplified approaches.

Horizon is an exception to this rule; it’s UI is extremely stylised, using tribal fonts and scribbled lines, alongside hand-drawn iconography.

It’s also extremely cluttered compared to it’s contemporaries. For example, Breath of the Wild has roughly six UI elements on screen during combat. Horizon: Zero Dawn has upwards of nine elements at best, with more filling the screen as combat gets more hectic.

Despite this, Horizon’s UI completely won me over for one simple reason: every element is designed to immerse you in the dual themes of the game.

Radial weapon and ammunition menus slow time

During most of the gameplay, the non-diagetic UIis filled with tribal fonts, scribbled drawings, and stylistic flourishes. The UI is a reflection of Aloy herself, a tribeswoman venturing into a world unknown.

Likewise, when Aloy activates her Focus (A futuristic bluetooth headset-style gadget that allows her to inspect the environment), the UI shifts to the futuristic theme that the games machines and old-world environments follow. It’s a diagetic assistant that gives Aloy a second-sight, enhancing her view of the world around her.

Much like the discovery of this ancient technology informs the player, it also informs Aloy. As the game progresses, the UI matches this discovery.

The ‘Focus’ gives a futuristic diagetic UI, without breaking the tribal theme of the game

There’s also some smaller touches that help this — the ‘Dinosaurs’ of the game have lights that change colour to show their moods, behaviours, and allegiances. The radial menus that are used to change weapons or ammunition slow the game world just enough to give you time to make a choice, but not quite enough to remove the tension. Quickly switching to your fire arrows whilst a 12-foot robosaur leaps at you is a hell of a moment.

Often games are forced to sacrifice thematic choices in favour of clean UI, especially AAA releases. Skyrim, or Tomb Raider, are great examples of this. Horizon is not, and proves you can use your UI not just to inform the player, but to immerse them into your universe.

NB: Matt Guzy points out in the comments something I failed to mention: Horizon has an amazing option called ‘Adaptive UI’ which dynamically hides the player HUD when it’s not necessary. If you’ve used the immersive UI mod for Skyrim, it’s similar to that. It’s a lovely feature that really lets the player focus on the gorgeous environments of the game.

Conclusion:
Horizon constantly deals with Aloy’s attempts at balancing her life as a tribal outcast and her life as a curious explorer. Horizon smartly seperates it’s diagetic and non-diagetic elements to reflect this balancing act.

It’s also stylish without sacrificing visual clarity, and keeps a strong, consistent aesthetic. The HUD UI is a little heavy-handed at times, and the menus are somewhat unimaginative, but overall this is a strong entry.

3. Destiny 2

For all of it’s failings, the first Destiny game established a very clean, unique aesthetic. The Destiny franchise is instantly recognisable through it’s uses of strong, sans-serif fonts and clean duo-tone icons. Destiny’s simple, minimalist aesthetic continues in Destiny 2.

In a way, reviewing Destiny 2’s UX might as well be a review for it’s predecessor, as there’s certainly no wholesale changes to the interface.

Every UI element animates in and out of the screen, drawing attention to itself

There’s some subtle changes and updates throughout the UX, however. Many elements that were static, or simply missing, have now been given some simple in/out animations. This really helps draw your attention to certain elements when appropriate (The quest tracker update animation is an highlight of this.

The combination of beautiful artwork and UI elements works wonders

One of the highlights of the first Destiny’s UI was the ‘Director’, a map view of the solar system that players used to navigate to various locales. It’s a great looking screen that makes a return in Destiny 2, and the same style has now been adapted to a number of sub menus.

Destiny 2 also has some really smart interactions. Other than some frustrations with the two-layer map system, almost everything is accessible from one or two button presses. The virtual cursor system on console fits the UI well, and doesn’t feel clumsy or slow. There are, however, some issues when it comes to inventory management, particularly when you’re carrying a large number of shaders, or trying to manage your vault.

It might seem a little unfair for Destiny 2 to be on this list, but the fact that it’s a near-replica of it’s predecessor didn’t hurt my appreciation for it whatsoever. It’s got a great aesthetic, is easy and pleasant to use, and fixes a number of issues found with the first game. It’s also a great example of a simple UI that is effective on both PC and consoles.

MacKay Clark has shared a large amount of the work he did on Destiny 2, so I’d recommend you check that out if you’d like to see more.

Conclusion:
Building on the strong choices of it’s predecessor, Destiny 2 has a perfectly minimalist aesthetic that’s married to some stunning artwork. The HUD elements are smart enough to only show up when needed, and as a player I never felt like I didn’t have the information I needed.

Some interactions are a little slower than I’d like, and inventory management would benefit from stronger sorting features, but overall it’s an easy, stylish, fun user experience.

Honorable Mentions

Gwent (Written by Michael Harrison)

In terms of UX, Gwent picks up where the Witcher 3 left off, CD Project Red have always been experts at blending modern UI styles with the aesthetic and charm of their Role-Playing Universe and Gwent is no exception.

The art of Gwent is overwhelming beautiful, and the game makes sure to show this off at every opportunity. Almost every button, notification, portrait, load screen and menu background display a gorgeous, high resolution piece of art, not to mention the seemingly endless sets of cards and their rarer animated counterparts. The effect this has on the player is to fully immerse and engage them in the universe before they even queue for a match. But that’s not all Gwent does well, they’ve put a lot of thought and effort into the usability of the menus and user interface, often iterating and scrapping entire menus to be replaced with an improved version.

I struggle with the complexities of building a deck in card games, but Gwent had me spending hours fiddling and tinkering to find the ideal combination of cards without it ever feeling like a chore. Combining all these aspects with the fantastic audio, smooth animations and simple controls creates a game that I’ll take any excuse to spend some time in.

Pyre

Much like Tooth and Tail, Pyre’s visual aesthetic and user experience are intrinsically connected. I loved the visual style of Pyre, and the aesthetic of the menus and dialogues served to keep me immersed at all times. I think there’s a small opportunity in how Pyre telegraphs abilities during ‘Rights’, but otherwise it’s an excellent experience.

Robo Recall

Even from a VR perspective, Robo Recall doesn’t necessarily do anything new. What it does do though is bring a very polished, fresh UI to a relatively oversaturated genre. Similar games, such as Space Pirate Trainer or Raw Date, tend to lean into a sci-fi aesthetic. Robo Recall goes very minimalist, but invokes old-school arcades with some flashy fonts and elements. I also love how Robo Recall uses the TV to show top score information to spectators, which can add a communal element to watching someone play the game.

Hellblade: Senua’s Sacrifice

Hellblade has almost no HUD or visual UI elements to speak of, and that’s actually why I wanted to give it a shoutout. Hellblade replaces the majority of traditional UI tropes with audio queues instead, which leans heavily into the games narrative and creates an amazing sense of immersion. It’s a great example of why you don’t have to always stick with tried and true solutions.

Zelda: Breath of the Wild

Probably the surprise omission to this list, Breath of the Wild did so much right with it’s UI. The game is filled with complex systems, but managing things like Stamina, Health, and abilities are all very easily accessible. The game does a great job of hinting at what’s interactible and what’s not, but also excells at simply staying out of the way sometimes and letting the player discover how to do something.

Where it falls apart for me, however, is the inventory management. Breath of the Wild is constantly asking the player to pick the right tool for the job, but doesn’t really let you do this effectively. I can’t equip a full item set with one click, instead I have to equip all four items individually. I can’t choose a fallback weapon for when the one I’m holding breaks, instead I have to stop what I’m doing and switch manually.

It’s a few small let downs for what is overall a phenomenal game.

For Honor

I was really suprised by For Honor. Early gameplay videos presented the game as a somewhat typical third person action game. It’s only after playing it that you realise it has far more in common with arcade fighters like Street Fighter.

For Honor’s UI does a great job of giving you just enough information to feel like you can win a fight, without giving you so much that it breaks you out of the moment. It’s a series of small, subtle queues throughout each moment of combat that makes you feel as though you are fighting, not just controlling a fighter.

Next article: Part 2 — First Person & Third Person

The Video Game User Experience Awards was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Video Game User Experience Awards

Cool stuff, every week

More Articles