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).