Designing UI for Castle on the Coast

Castle on the Coast was initially developed for use at a pediatric hospital called Valley Children’s. Now its a full fledged game for all ages being distributed normally.

The initial focus on children led to some interesting design problems.

Problems

  • Player may not read yet (children).
  • Player may be experiencing a game for the first time (children).
  • Player may be disabled (at a hospital).
  • Menu must work with mouse input AND directional input.

Solutions

  • Use icons as much as possible.
  • Keep things visual!
  • Make buttons large and juicy.
  • input remapping for unusual layouts (such as playing with facial expressions or with a single hand).
  • Invincibility option if part of the game is too difficult.
  • When characters speak, use voice acting in addition to written text.
  • Game uses only face buttons for simplicity.

Title Screen
In the story, George the giraffe sails to the castle the game takes place in. Instead of showing this upon starting the game, the main menu shows it!

Logo background flows with the wind.

File Select
Files use text, shape, AND color in iconography to be extra clear.

Files are an abstract concept. I imagined a child would think of them as their playable character, therefore the file’s currently selected costume is displayed.

The crate character is staring at his highlighted friend!

File Select – File Focus
Stats help players know for sure this is their file. Stats also give players a goal if they aim to 100% the game.

Flower petals deliberately show no maximum value to avoid stressing out players. They are numerous, everywhere, and sometimes well hidden.

HUD
transparency is lowered on all hud elements to make them less intrusive during play, but visible enough to check up on.

HUD – Compass
Compass points to nearby items for QoL for players hunting every last collectible down.

Prioritizes important collectible first.

Will change into a checkmark once all collectibles in area are gathered.

HUD – Dialogue
you can speak with characters without stopping gameplay for a seamless experience.

Dialogue banner is colored for special characters.

Pause Menu
Notice every button has an icon. This helps reading challenged players guess their way through menus!

Everything is kept chunky n’ simple when possible.

Confirmation Screen
Coded to be used anywhere in game. Would be silly to make a new one all the time!

In-World Map
The world is non-linear and won’t hold your hand for navigation for a sense of exploration. Therefore, clues are used instead.

These maps posted around the castle help players understand the overall layout and find unfamiliar areas.

Settings – Graphics
FPS meter helps players gauge real-time how their settings help.

Game takes up more screen space to help players see the visual difference of settings.

Settings – Input
Input remapping is extremely important for disabled players with unusual setups.

Settings – Player 2 (Swirlz) Controls
All input images use an object coded to change with platform, currently used input device, and keybindings.

Unlike most, this menu falls off screen upon exiting!

Steam Achievements
Designed to be readable at 64×64.

I had to time myself due the sheer number of unique illustrations.

Red indicates a more difficult to obtain achievement.

Seeing It in Action

Here you can see the UI in action, animations and all!

Website Powered by WordPress.com.