An interactive menu must have:

• Title to describe purpose, e.g. game name or sub menu category
• Symbol to indicate current selection, could also be a border / reverse highlight
• High contrast text, (and easy to read)
• Concise, keep your labels short and meaningful

A couple of examples:

The almost good

Light yellow text is hard to differentiate from white text

The poor features of this design:

• The current selection (start game) is not clear enough, an indicating symbol is not present
• Light yellow text is hard to differentiate from white text

This menu could be easily improved by adding a reverse highlight or a symbol next to the current selection.

The Verge menu does have some nice features; it’s concise, and the sound and music states are clearly indicated.  Verge by Kyle Pulver.

The awesome

Current selection is clearly highlighted

The right way, an example from Brutal Legend, clear and obvious.

The menu interface was designed by Joe Kowalski – see his design in action.

Why: ESC and ALT + F4 are expected to be available when using any Windows application.

ESC key

• When pressed the player is prompted for confirmation that they want to exit
• While the confirmation prompt is displayed, the player can press ESC to cancel the exit action and go back to the previous mode they were in
• The ENTER key and the SPACE key (when pressed) confirms that the player wants to exit and the game immediately quits

ALT + F4 key combo

• When pressed together the game should exit without prompting the player

Exceptions:

• If your game has only one mode i.e. gameplay (and no menus) then it should be safe to use ESC without prompting the player for confirmation.

Notes:

I’ve only covered the basics here, I’ve omitted how to handle saving game state and how to use the mouse to exit the game.  If you don’t have the basics implemented, chances are you’re doing something wrong.

The function keys are used to choose which of the three teams the player wants to join. The order of the function keys on the keyboard are F5, F6 and F7, but in the menu they’re ordered: F6, F7 and F5!

This is not a show stopping bug or broken feature, but it feels bad for the players who use keyboard shortcuts and it’s unnecessary.

The correct order should be:

• (F5) – Strogg
• (F6) – Spectator
• (F7) – GDF

Fix the little things!  Navigating a lot of interface problems, or even a few, can feel like a real grind. This diminishes the player’s view of your game and brand.

Note: I’ve only addressed the order of the keyboard shortcuts, the visual order of the team icons may also be improved by displaying the two player classes first, followed by the spectator mode. (Possibly GDF should come before Strogg as that’s alphabetical order.)

Tribly: Art of Theft game screen shot

Problem: Icon color changes to indicate one of two modes, this forces the player to think about which color indicates which mode.

Eye icons

Solution 1: Indicate when the player is in danger of being seen, this is the only mode that is important to the player, no other indication is necessary.

Solution - only show the icon when the player needs to be alerted

Solution 2: Coming soon… This small improvement is part of a series of design iterations I’ll be suggesting to improve the player’s experience in Tribly.

Tribly: The Art Of Theft was designed by Ben ‘Yahtzee’ Croshaw, if you haven’t already heard of Ben, he creates the fabulous Zero Punctuation video game reviews.
Ben’s website is fullyramblomatic.com

Menu button highlighted with a soft glow effect

Summary:
When designing menu screens, use visual hints to indicate the current menu.

Recipe screen from Aquaria

Problem: When searching for a menu button it’s easy to choose the same menu button twice, the button currently selected is not clearly indicated.

Aquaria uses a tab like menu system divided into four menu screens, each screen is similar to the others.

Menu screens

Solution: When the gamer clicks on the menu button, display a visual hint on or beside it. The hint remains visible until a different menu button is clicked on.

Menu buttons without visual hint

Menu buttons with visual hint to indicate selected menu

Menu screens with visual hints

Aquaria is a beautiful game with beautiful artwork, however, beautiful artwork will not guarantee that a game feels beautiful to play. A menu system that is unpredictable removes that happy shiny feeling a gamer gets when playing a game.

]]> http://brandfeelsgood.com/2008/use_visual_hints_in_game_menus/feed/ 1