Home | | User Interface Design | Formatting of Menus

Chapter: User Interface Design

Formatting of Menus

What follows is a series of guidelines for formatting menus.

Formatting of Menus


What follows is a series of guidelines for formatting menus.




Provide consistency with the user’s expectations.


Provide consistency in menu:

-   Formatting, including organization, presentation, and choice ordering.

-   Phrasing, including titles, choice descriptions, and instructions.

-   Choice selection methods.

-   Navigation schemes.




If continual or frequent references to menu options are necessary, permanently display the menu in an area of the screen that will not obscure other screen data.


If only occasional references to menu options are necessary, the menu may be presented on demand.


-   Critical options should be continuously displayed, however.




Ensure that a menu and its choices are obvious to the user by presenting them with a unique and consistent structure, location, and/or display technique.


Ensure that other system components do not possess the same visual qualities as menu choices.




Provide a general or main menu.


-   All relevant alternatives.

-   Only relevant alternatives.

o   Delete or gray-out inactive choices.


Match the menu structure to the structure of the task.

-   Organization should reflect the most efficient sequence of steps to accomplish a person’s most frequent or most likely goals.

Minimize number of menu levels within limits of clarity.

-   For Web sites, restrict it to two levels (requiring two mouse clicks) for fastest performance.


Be conservative in the number of menu choices presented on a screen:

-   Without logical groupings of elements, limit choices to 4 to 8.

-   With logical groupings of elements, limit choices to 18 to 24.


Provide decreasing direction menus, if sensible.

Never require menus to be scrolled.


Provide users with an easy way to restructure a menu according to how work is accomplished.


In general, the more choices contained on a menu (greater breadth), the less will be its depth; the fewer choices on a menu (less breadth), the greater will be its depth.


The advantages of a menu system with greater breadth and less depth are:


o   Fewer steps and shorter time to reach one’s objective. o

o   Fewer opportunities to wander down wrong paths.

o   Easier learning by allowing the user to see relationships of menu items.


A broad menu’s disadvantages are:


o   A more crowded menu that may reduce the clarity of the wording of choices.


o   Increased likelihood of confusing similar choices because they are seen together.


The advantages of greater depth are:

o   Less crowding on the menu.

o   Fewer choices to be scanned.

o   Easier hiding of inappropriate choices.


o   Less likelihood of confusing similar choices since there is less likelihood that they will be seen together.

Greater depth disadvantages are:

o   More steps and longer time to reach one’s objective.


o   More difficulties in learning since relationships between elements cannot always be seen.


o   More difficulties in predicting what lies below, resulting in increased likelihood of going down wrong paths or getting lost.

o   Higher error rates.




Provide both simple and complex menus.

Simple: a minimal set of actions and menus.

Complex: a complete set of actions and menus.


Item Arrangement


Align alternatives or choices into single columns whenever possible.

o   Orient for top-to-bottom reading.

o   Left-justify descriptions.

If a horizontal orientation of descriptions must be maintained:

o   Organize for left-to-right reading.



Order lists of choices by their natural order, or

For lists associated with numbers, use numeric order.

For textual lists with a small number of options (seven or less), order by:

o   Sequence of occurrence.

o   Frequency of occurrence.

o   Importance.

o   Semantic similarity.

Use alphabetic order for:

o   Long lists (eight or more options).

o   Short lists with no obvious pattern or frequency.

Separate potentially destructive actions from frequently chosen items.

If option usage changes, do not reorder menus.

Maintain a consistent ordering of options on all related menus.

o   For variable-length menus, maintain consistent relative positions.

o   For fixed-length menus, maintain consistent absolute positions.

A meaningful ordering is necessary to:

Facilitate search for an item.


Provide information about the structure and relationships among items. o Provide compatibility with the user’s mental model of the item structure. o Enhance the user’s ability to anticipate a choice’s location.




Create groupings of items that are logical, distinctive, meaningful, and mutually exclusive.


Categorize them in such a way as to:

o   Maximize the similarity of items within a category.

o   Minimize the similarity of items across categories.

Present no more than six or seven groupings on a screen.


Order categorized groupings in a meaningful way.


If meaningful categories cannot be developed and more than eight options must be displayed on a screen, create arbitrary visual groupings that:

o   Consist of about four or five but never more than seven options.

o   Are of equal size.

Separate groupings created through either:

o   Wider spacing, or

o   A thin ruled line.

Provide immediate access to critical or frequently chosen items.


Line Separators


Separate vertically arrayed groupings with subtle solid lines.

Separate vertically arrayed subgroupings with subtle dotted or dashed lines.

For subgroupings within a category:


o   Left-justify the lines under the first letter of the columnized choice descriptions.

o   Right-justify the lines under the last character of the longest choice description.


For independent groupings:

o   Extend the line to the left and right menu borders.

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail
User Interface Design : Formatting of Menus |

Privacy Policy, Terms and Conditions, DMCA Policy and Compliant

Copyright © 2018-2023 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.