Simplifying the Graphical User Interface

Much like Utada Hikaru’s hit 2002 song, the art for Endora’s Box is best described as ‘simple and clean’. It only made sense to design a user interface to match.

My goal with the interface was to have it be the least intrusive that I could make it. I wanted all of the focus to be on the art. To do this, the menus work on a context based system and disappear and re-appear as needed.

Here are the different components and how they work:

Dialog box:

This works both for talking to characters, and for a narrative inspection of surrounding objects. When speaking to a character, the font and text color will change depending on character, and a name will be displayed in a small upper box. When receiving narrative inspection, there is no upper box and text is a default font and color. When this interface is visible, the inventory bar, and thus the trashcan are not visible.

Inventory bar:

The inventory bar is one of two interface pieces that is constantly visible. This is so that the player can always quickly see what they are holding, and equally quickly use those items. The art for the bar is as minimal as it gets, done in white scratchy boxes to match the game art. When mousing over an item in the bar, a small description box will appear above the inventory bar to explain what the item is.

Trashcan:

Players can drag items to the trash can to discard them (limited items will re-appear near where they were acquired, unlimited items disappear and will need to be recollected at their source). While technically part of the inventory management system, this interface is hidden until the player begins dragging an item from their inventory. It is placed on the very opposite side of the screen from the inventory bar to prevent action slips where players could accidentally discard an item.

Cursor:

The cursor is the second part of the interface that is constantly visible. In it’s default state it looks much like the cursor for a regular computer, but when it hovers over different objects, it will change to various images that reflect the different actions that you can take with each object. Examples of interactions are a magnifying glass to ‘inspect’ and a speech bubble to ‘talk to’.  (See this post for full coverage of the design behind the ‘Context Cursor’ system).

Affordance and the Context Cursor

The context cursor is a mouse pointer that changes to help imply how an object or character can be interacted with. This gives Endora’s Box an immediately understandable interface that really needs no text explanation. The main concept behind this system is, of course, affordance. Each cursor was carefully designed to afford the context of the player’s click before they’ve decided to click.

The tricky part of this system was deciding how to simplify all possible interactions in the game into just a few recognizable symbols. The key was to combine mechanically different, but conceptually similar actions together under the same cursor symbol. The Magnifying glass cursor for example means, broadly, ‘to inspect’. Within the game this can either bring up the dialog box to provide a narrative inspection of the item, or it could pop up a zoomed in view of the scene which provides more interaction options.

Here are the six cursors and their purposes:

– Default Cursor (indicates when no interactions are available under your cursor position)

– Pointer Hand (touching / collecting items in the game world)

–Speech Bubble (talking to characters)

–Magnifying Glass (pops up a zoomed in view of a scene or gives dialog about the inspection of the object)

–Item (when dragging an item from inventory, your cursor becomes the item)1

–Speech Bubble embedded with item (when dragging an item over a character, show / give this character the held item)

This careful and consistent system allows me to not only simplify the interface, but also hide secret content in plain sight, without having it be immediately obvious, but also without having it be unintuitively hidden. Here for example, I have a row of singing, wall mounted bass. One of them is actually a secret, sentient character named “Basstion” who will give you a side quest if you notice that your mouse turns to a speech bubble when hovering over him. Since he is visually identical to the other fish, he would likely only be accidentally discovered without the context cursor.