Game UX/UI — Designing for Experience

Embracing intentional friction and building powerful interfaces.

Unlike other industries, video games create problems intentionally and limit the tools you have to solve them. Our job as UX Designers becomes not just about reducing unintentional friction but also embracing intentional friction.

Imagine you’re in a dimly lit room. There’s a screen in front of you displaying what a drone sees, lots of flickering lights and an information ticker chattering away. On a control panel below the screen and under a cone of light, a small glass case surrounded by cautionary yellow and black bars protects a big red button with the label “Self-Destruct”.

You flick open the glass case, exposing the button. Suddenly, all the lights on the control panel blink frenziedly, the lights illuminating the room go from a cold blue to a warm red and the screen in front of you switches to a message reading “WARNING“ as the exposed button glows bright.

You push the button. Immediately, everything goes quiet. All the lights on the control panel turn off. The screen fizzles to static. The dimly lit room fades quickly into darkness. Heartbeat. A slit of light appears as large steel window shutters begin to part. You hear a distant rumbling. As the shutters widen to reveal an overwhelming bright light, your eyes adjust to see trees swaying, embers floating through the air, a deep orange sky and a massive cloud of smoke on the horizon. Then the shock wave reaches you and the strength of the explosion rocks your ear drums and the world around you.

Then, slowly, everything calms down. What’s your next decision?


I just described the UX of an interface that blows up a remote-controlled drone. What would be said if it was strictly evaluated using the traditional rules of UX Design? There’s unnecessary visual noise distracting from the parts of the interface that matter. The button press is complicated by the unnecessary gesture of flicking open the box. The button itself is inconsistent with the rest of the UI. The transitions are slow and inefficient. Would anyone actually prefer the experience that results from applying this feedback? It seems like traditional UX Design complains about how few interfaces ever achieve pleasure or meaningfulness, but uses rules that keep us from achieving it.

Challenging the Traditional Design Rules

The UX Pyramid describes all interfaces as being built from the bottom up, starting with the task-based traits of making it functional, reliable and usable before moving into the experience-based traits of making it convenient, pleasurable and then meaningful. Typically, there‘s a note on the graphic complaining that few interfaces ever cross the boundary up into experiences.

The pyramid shape describes the weight given to each of these stages, heavily prioritizing the task over the experience. This breakdown works for applications and tools, but games are different. Games prioritize experience over task. After all, can you even discuss the task of any game without talking about the experience? For instance, the task of Frogger might be described as “something to kill time and relax”, “teach children the dangers of crossing roads” or “experience life from the perspective of a frog crossing a road”.

Obviously, not all interfaces in video games are or can be as experience-heavy as the self-destruct button example. There are plenty of interfaces in video games where the task deserves at least as much weight as the experience. That said, the less task-heavy an interface is, the more opportunity there is for us to pump up the experience… but, in doing so, we’re going to have to break some of the traditional UX Design rules.

The Task-Experience Spectrum

As we can see in my chart above, the more task-heavy something is, the less likely it is that it can ever cross over into being convenient, pleasurable or meaningful. No interfaces exist in the top right of the Task-Experience Spectrum. It’s wrong to suggest something like Photoshop or Excel is inadequate by not achieving pleasure or meaningfulness in the UX Pyramid, just as it’s wrong to suggest that our self-destruct button is badly designed because it’s noisy, complicated and slow.

That said, just because no single interface can exist in the top right of the spectrum, that doesn’t mean we can’t get the best of both worlds by linking two interfaces together. Consider a character selection interface with a handful of character presets to choose from and a button to edit or add a new preset. This interface is task-shallow, giving us the opportunity to build up the experience by giving each preset some fancy framing and working in some fun transitions between selections. Then, by pressing the button to add or edit a preset we can take you to a task-heavy interface without all the bells and whistles of the last interface that would have become frustrating friction and noise.

Designing for Experience

First off, the amount of experience we can cram into an interface will depend on how task-shallow it is. These interfaces have few inputs and require little to no skill or guidance. Just like we strive for simplicity of experience in a task-heavy interface, striving for simplicity of function in an experience-heavy interface becomes the counter balance we work with. We might consider this the “convenient” stage of the pyramid.

Sell the Fantasy

In a task-heavy interface, we need to build components that can be mixed, matched, squashed, stretched and configured. The function always follows the form. Conversely, in experience-heavy interfaces, it’s possible the entire thing is made of one-off components that will never be reused. It’s even possible that the form will follow the function if it’s more important that we start with something people want to interact and play with, figuring out how to add function into it afterwards.

We also want to get creative with the framing of the elements, the composition of the interface and add artistic garnish. Add fictional gravity and importance to the decisions presented. Just be sure to maintain a clear focal point and a clear call to action. By doing all that, we increase immersion and can potentially even make you to forget you’re just using an interface.

Make it Visceral

In a task-heavy interface, consistent and conventional elements are paramount to keeping the complexity under control. In an experience-heavy interface, we don’t necessarily need to be constrained by typical UI patterns. Maybe instead of a button, it’s a switch you have to pull. Or, perhaps before you push the button, you flick up a protective barrier.

The trick here is designing a simple and intuitive gesture. We shouldn’t get too clever though, we’re already pushing it by using a gesture at all. I find it’s best to pick one easy-to-execute gesture or creative interaction and leave it at that.

Embellish

In a task-heavy interface, we want to eliminate all friction so each interaction is efficient and snappy, allowing you to move at your own pace. Conversely, in an experience-heavy interface, we actually want to add friction by embellishing interactions to be exciting and fun.

We might embellish a button press by adding follow-through VFX. We might build anticipation by making you push the same button multiple times or different buttons in multiple places. We might embellish a transition by spending a little more time showing each element falling into place.

Key is creating a greater output to input energy ratio. I like to think of it as offering you a super power. With minimal effort, a mere flick of your wrist, you can generate something greater, something magical.

The trick here is breaking expectations. We want to surprise the player and put on a show!

Achieving Meaning

So far we’ve focused on making experiences pleasurable, but the key to achieving a meaningful UX is making the experience personal.

Understand, however, that there’s generally an inverse relationship between the size of our audience and how personal we can get. The more personal we get, the more meaning our audience will absorb and the more our audience will fall in love with it. At the same time, as we get more personal, we risk becoming exclusive, leading others to feel ostracized. Or, as I like to put it, you can’t make something people love without also making something people hate.

The trick to making something personal is always in the details. People fall in love with the details. It’s in the details that people convey some of the most significant signals to each other. It’s the details that signal authenticity. It’s the details that people identify with. Details most people might shrug off as insignificant, others will latch onto and attach incredible meaning to. For a great example of this, take a look at this article about Red Dead Redemption 2. (Warning: spoilers)

Future Prospects

I think there’s still a lot of opportunity for us to start exploring and embracing intentional friction. We’re already really good at minimalism and usability. I want to start seeing more emphasis on experiences and interfaces that make you feel powerful.