UI Development: Dialogue Boxes

The most important factor for dialogue UI is making it accessible and easy to communicate information to the player. The main difficulty is creating a UI that accomplishes this while still invoking the feeling and tone of the game. Early demos of the user interface were simplistic, allowing the art team to decide how to proportion and place all of the assets.

image.png

As an evolution of the simplistic design, the first dialogue box UI element was created to be simple. However it didn’t invoke the feeling of the Critical Density setting, which was the feeling of apocalyptic clutter. Small iterations were made before settling on the finalized design of the UI element.

Initial Dialogue Box UI element.

Initial Dialogue Box UI element.

Experimentation with the Dialogue Box UI that didn’t make the final cut.

Experimentation with the Dialogue Box UI that didn’t make the final cut.

Finalized Dialogue Box UI Element

Finalized Dialogue Box UI Element

While the design of the Dialogue Box itself was strong, it had a critical problem. Earlier demos utilized green for the text and buttons, which meant the element was not fulfilling the accessibility requirement.

A demonstration of how the UI caused problems for players with Deuteranopia.

A demonstration of how the UI caused problems for players with Deuteranopia.

The first idea to rectify this was to change the color of the text box as the group had become attached to using the color green.

image.png

This was quickly cut and the old text box was restored. The team made the decision to cut all UI elements that used the color green to ensure the game was accessible to players with color blindness. This change was spread across the rest of the game’s UI elements, replacing all instances of green for colors with better contrast.

image.png

Instance of the Health Bar UI element being changed to remove the usage of green.

Instance of the Health Bar UI element being changed to remove the usage of green.

image.png

Instance of the Map Navigation UI being changed to remove the usage of green.

Instance of the Map Navigation UI being changed to remove the usage of green.

image.png

Instance of the Main Menu UI being changed to remove the usage of green.

Instance of the Main Menu UI being changed to remove the usage of green.

image.png

Instance of the Inventory UI element being changed to remove the usage of green.

Instance of the Inventory UI element being changed to remove the usage of green.