User Interfaces: The Basics

I might be in the minority, but I find the topic of User Interfaces extremely fascinating. We can talk about other design elements of a game but they all take a backseat in terms of importance to the User Interface.

After all, the best game concepts in the world are worthless without a way to USE them. At its core, the User Interface represents all things you do to interact with the game and game world. It represents more than just on-screen displays and other GUI elements. It’s how you use your mouse, the keyboard, and everything else you DO to make things happen in a game.

This is a complicated topic to write about because it’s pretty broad. I have a deeper issue I want to discuss that I'm saving for a follow-up post, but before I started I wanted to jot down some thoughts that percolate in my little head when thinking about how developers create a UI.

The Glass Pane
I think of the User Interface as a Glass Pane that separates me from the Game World. Imagine for a moment that the Game World is real and that you could place your hand through the monitor and physically touch your character. Except you can’t. Because there is a Glass Pane separating you and when you reach out, you touch the Glass.

On that Glass Pane, someone has placed a small map in the upper right corner. The map doesn’t sit on the Game World, it sits on the Glass that separates you from the Game World. Also sitting on that Glass are your Hotbars, player status, and anything else you need to interact with that’s not part of the Game World.

Game designers and addon authors call that Glass Pane the UI Layer. This is an important distinction because things in the UI Layer (or Glass Pane) are not part of the Game World. They are separate and while they help us interact with the Game World, they aren’t actually part of that world.

There are a few exceptions, the most notable of which is your mouse cursor. The mouse cursor rests on the very top of the UI Layer, but has the unique ability to reach through the Glass to touch interactive objects in the Game World. In this way, you can touch and interact with such things in the Game World.

The other exceptions come when a UI element is anchored to a game object. For example, EVE Online anchors a red square to your enemy targets.

Input Devices
We traditionally think of the UI as those things that I describe as being tied to the Glass Pane. That’s really only half the story. We can glare, stare, or eye our Hotbar menacingly but that isn’t going to activate it for us. For that, we need a hardware event. A mouseclick, a key click, or a magic wave of our Wii Remote.

It sounds like such a simple thing, but everything we DO starts with these actions. An otherwise great UI can turn into a horrible experience if the way we are forced to use these devices is uncomfortable.

For example, if I constantly need to stretch my left hand to hold down “A” while simultaneously pressing “P” it’s going to be feel awkward to play.

Usability of Input Devices is really defined by the flexibility of a games bindings (key or mouse). The more options you have to remap these into a more comfortable arrangement, the less awkward the game is going to feel.

Dirty Windows and Innovative Ideas
From a usability standpoint, Warcraft has a great Glass Pane. Arguably, the best Glass Pane in any MMO. They’ve had years to perfect it and have heavily borrowed from improvements made through Custom UIs by addon developers. When average Joe Warcraft goes out to try a new game, a crappy Glass Pane really stands out in comparison.

But in a game like Darkfall, it’s really the use of the Input Device (mouse) for First Person Combat that is dramatic. The Glass Pane sucks, but the UI as it relates to the Input Devices is fun. In that respect, Darkfall is a great example of how to use a UI very differently.