Thursday, October 14, 2010

Heads Up Display Design

From early on our game has had a Heads Up Display (HUD) that display the stage title, stage time and gravity strength. The trouble is that it looks rather like a debug menu and detracts from the in game aesthetic. With this in mind I went about redesigning the HUD to something more minimal and unobtrusive, attempting to also match it to the menu design.

Ideally I'd have preferred there to be no static HUD elements, instead having information appear only when applicable.

TIMER
For one, the timer should not appear on the player's first run through a new stage, only appearing after they have completed it and returned, in a way presenting a new challenge for them: improve your time.

TIME OVERLAY
This design may not be immediately apparent, but the actual timer has been overplayed across the game screen with a very low transparency level. As a means of making it more apparent it could cycle through higher and lower transparency values. The design is made to be unobtrusive to play with the ideal that it wouldn't even be noticeable unless the player was looking for it, in which case it is in view at all times. In practice however this ideal is hard to achieve and the design would likely only distract the user and confuse the game screen.

TIMER TOP CENTER
A much more traditional timer display, at the top center of the screen. The secondary time is the target time the player is aiming to beat, turning red once it has elapsed to show to the user that they have failed. As the only HUD element, the game screen is kept to a minimal number of elements, avoiding any unnecessary distractions to the player.

STAGE TITLE
Rather than having the stage title ever present as part of the HUD, I felt a better solution would be to have it appear as the stage begins, before retracting after a short time. This should give the player ample time to read the stage title and avoids having the information present at all times, serving as an unwanted distraction.

PAUSE SCREEN
A pause screen should clearly indicate to the player that the game is in a pause state, and display any available options for advancement therefrom. The following are a number of pause screen designs incorporating numerous elements.


The colouring is obviously aimed to reflect the green circuitry design of the menu screen. The key elements are the stage title, which is present should the player want to recall the stage title (this is important as the stage title will often offer hints as to the stage's method of completion), and the options to RESUME the stage, RESTART LEVEL, and RETURN TO MENU. The explicit PAUSED text can be left out as it's rather obvious and unnecessary and the bipolar title can also be considered unnecessary clutter. The large size text options seen in the final two designs is a bit too much for the desired minimal aesthetic, instead it appears to scream at the player and could be rather discomforting.

REFINED PAUSE DESIGN
The most ideal pause screen design is above. It's minimal and serves to match the stage title display that would be seen at the stage's opening. Imagine the title panning up partially at stage open, before panning down, then the whole of the pause menu panning up upon pausing the game. Also note the darkened overlay that de-emphasizes what is displayed in the background.

No comments:

Post a Comment