System Menu And Navigation
- 2. Contents Structures of menus Functions and content of menus Formatting of menus Writing menus Graphical menus
- 3. Structures of menus Menus can be simple and complex. A menu’s structure defines the amount of control given to the user in performing a task. The most common structures of menus are: single menus, sequential linear menus, simultaneous menus, hierarchical menus, connected menus, and event-trapping menus.
- 4. Simple menus It is the simplest form of menu, a single screen or window is presented to request an action to be performed. E.g., in using the Internet, people may be asked if they wish to “Stay connected” or “Disconnect”. A single menu may be iterative if it requires data to be entered into it. Choice 1 Choice 2 Choice 3
- 5. Sequential linear menus Presented on a series of screens possessing only one path. Generally, their objective is to specify parameters or to enter data. The length may be short or long. Shortcomings: long sequence may become tedious, the user may not remember an answer to a previous question, or may want to complete the menus in a different sequence Menu 3 Menu 2 Choice 1 Choice 2 Choice 3 Menu 1
- 6. Simultaneous menus All menu options are available at the same time. The menu may be completed in the order desired by the user. Problems: clutter can easily occur, screen paging or scrolling may still be necessary to view all choices, should clearly indicate menu choices relationships and dependencies, and can also be confusing for novice users. Choice 1 Choice 2 Choice 3 Alternative 1 Choice 1 Choice 2 Choice 3 Alternative 2 Choice 1 Choice 2 Choice 3 Alternative 3 Choice 1 Choice 2 Choice 3 Alternative 4
- 7. Hierarchical menus Hierarchical menu is a solution when many relationships exist between menu alternatives. These menus are characterized by: depth (the number of choice levels); breadth (the number of alternatives found at each level). Common examples are: menu bars with their associated pull-downs, and on web sites with their navigation links. Disadvantage: the defined branching order may not fit the users conception of the task flow. Menu 1 Menu 2 Menu 3 Menu 4 Menu 5
- 8. Connected menus Connected menus are networks of menus all interconnected in some manner. Movement through a structure of menus is not restricted to a hierarchical tree. From the user’s perspective there is no top-down tracing of the menu system. A connected menu system may be cyclical. Advantage: it gives the user full control over the navigation flow. Disadvantages: complexity, and navigation may be scaring for a novice user. Menu 1 Menu 2 Menu 3 Menu 4
- 9. Event-trapping menus These menus provide an ever-present background of control over the system’s state and parameters while the user is working on a foreground task. They are a set of simultaneous menus imposed on hierarchical menus. Example: the menu bar and its pull-downs. Functions of this type of menu: To change immediately some parameter in the current environment (e.g., to make text bold). To take the user out of the current environment to perform some function without leaving the current environment (e.g., perform a spell check). To exit the current environment and allow user to move to a totally new environment (e.g., Exit).
- 10. Functions of menus From the user’s perspective, a menu can be used to perform several functions: Navigation to a new menu. Execute an action or procedure. Displaying information. Data or parameter input.
- 11. Content of Menus A menu consists of four elements: Menu context. Menu title. Choice descriptions. Completion instructions.
- 12. Consistency Provide consistency with 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 schemas.
- 13. Organization Provide a general or main menu. Display: all and only relevant alternatives; delete or grey-out inactive choices. Match the menu structure to the structure of the task. Minimize number of menu levels within limits of clarity. Number of choices presented on a screen: with logical groupings the limit is 18-24. without logical groupings the limit is 4-8. Never require menus to be scrolled.
- 14. Item arrangements Align alternatives or choices into single columns. Orient for top-to-bottom reading. Left-justify descriptions. If a horizontal orientation of descriptions must be maintained: Organize for left-to-right reading.
- 15. Ordering Order lists of choices by their natural order, or for lists associated with numbers, use numerical order. For textual lists with a small number of options (7 or less), order by: sequence of occurrence, frequency of occurrence, importance, semantic similarity. Use alphabetical order for: long lists (8 or more options), short lists with no obvious pattern or frequency. Separate potentially destructive actions from frequently chosen items.
- 16. Groupings Create groupings for items that are logical, distinctive, meaningful, and mutually exclusive. Categorize them in such a way as to maximize or minimize the similarity if items. Present no more than six or seven groupings on a screen. Separate groupings created through either: wider spacing, or a thin ruled line. Provide immediate access to critical or frequently chosen items.
- 17. Line separators Separate vertically arrayed groupings with subtle solid lines. N ew O pen… S ave Save A s… P rint P r inter Setup… E x it
- 18. Writing menus A menu must communicate to the user information about: The nature and purpose of the menu itself. The nature and purpose of each presented choice. How the proper choice or choices may be selected. The menu content must be informative, but not intrusive. And it must balance the needs of all its expected users.
- 19. Menu titles Main menu: create a short, simple, clear, and distinctive title, describing the purpose of the entire series of choices. Submenus: titles must be worded exactly the same as the menu choice previously selected to display them. General: Locate the title at the top of the listing choices. Spell out the title fully using either as uppercase font or mixed-case font in the headline style.
- 20. Menu choice descriptions Create meaningful choice descriptions that are familiar, fully spelled out, concise, and distinctive. Descriptions may be single words, compound words, or multiple words or phrases (exception: menu bar items should be a single word). Place the keyword first, usually a verb. Use the headline style, capitalizing the first letter of each significant word in the choice description. A menu choice must never have the same wording as its menu title. Identical choices on different menus should be worded identically.
- 21. Keyboard equivalents To facilitate keyboard selection of a menu choice, each menu item should be assigned equivalent mnemonic. The mnemonic should be the first character of the menu item’s description. Designate the mnemonic character by underlying it. Use industry-standard keyboard access equivalents when they exist. N ew O pen… S ave Save A s… P rint P r inter Setup… E x it
- 22. Keyboard accelerators For frequently used items, provide a keyboard accelerator. The accelerator may be one function key or a combination of keys. Pressing no more than two keys at the same time is preferred. Use a plus (+) sign to indicate that two or more keys must be pressed at the same time. Use industry-standard keyboard accelerators when they exist. N ormal B old Ctrl+B I talic Ctrl+I U nderline Ctrl+U
- 23. Standard keyboard accelerators Ctrl+C - Copy Ctrl+N - New Ctrl+O - Open Ctrl+P - Print Ctrl+S - Save Ctrl+V - Paste Ctrl+X - Cut Ctrl+Z - Undo F1 - Display contextual help window Shift+F10 - Display pop-up menu Spacebar - Select (single mouse click) Esc - Cancel
- 24. Graphical menus Providing the proper kinds of graphical menus to perform system tasks is also critical to system success. The best kind of menu to use in each situation depends on several factors: number of items to be presented in the menu; how often the menu is used; how often the menu contents may change.
- 25. Menu bar To identify and provide access to common and frequently used application actions. A menu bar choice by itself should not initiate an action. File Edit Options Windows Help Menu bar composed of text Menu bar composed of buttons File Edit Options Windows Help
- 26. Advantages of menu bar Are always visible, reminding the user of their existence. Are easy to browse through. Are easy to locate consistently on the screen. Usually do not obscure the screen working area. Usually are not obscured by windows and dialog boxes. Allow for use of keyboard equivalents.
- 27. Disadvantages of menu bar Consumes a full row of screen space. Requires looking away from the main working area to find. Requires moving pointer from the main working area to select. Menu options are smaller than full-size buttons, slowing selection time. Horizontal orientation is less efficient for scanning. Horizontal orientation limits number of choices that can be displayed.
- 28. Pull-down menu To initiate frequently used application actions that take place on a wide variety of different windows. A small number of items. Items best represented textually. Items whose content rarely changes. Tabs Justification Spacing Help N one L eft R ight C enter
- 29. Advantages of pull-down menu The menu bar reminds of the existence of pull-down menus. May be located relatively consistently on the screen. No window space is consumed when it is not used. It is easy to browse through. Vertical orientation is most efficient for scanning and grouping. Vertical orientation permits more choices to be displayed. Allows for display of both keyboard equivalents and accelerators.
- 30. Disadvantages of pull-down menu Requires searching and selecting from another menu before seeing options. Requires looking away from main working area to read. Requires moving the pointer out of working area to select (unless using keyboard equivalents). The items are smaller than full-size buttons, slowing selection time. May obscure the screen working area.
- 31. Cascading menu To reduce the number of choices presented together for selection. When a menu specifies many alternatives and the alternatives can be grouped in meaningful related sets on a lower-level menu. When a choice leads to a short, fixed list of single-choice properties. When there are several fixed sets of related options. To simplify a menu. Avoid using for frequent, repetitive commands.
- 32. Advantages of cascading menu The top-level menus are simplified because some choices are hidden. More first-letter mnemonics are available because menus possess fewer alternatives. High-level command browsing is easier because subtopics are hidden.
- 33. Disadvantages of cascading menu Access to submenu items requires more steps. Access to submenu items requires a change in pointer movement direction. Exhaustive browsing is more difficult; some alternatives remain hidden as pull-downs become visible.
- 34. Pop-up menu Used to present alternatives or choices within the context of the task. May be requested when the mouse pointer is positioned over a designated or hot area on the screen or over a designated icon. In look, they usually resemble pull-down menus. The kinds of choices displayed in pop-up menus are context sensitive, depending on where the pointer is positioned when the request is made. These menus are most useful for presenting alternatives within the context of the user’s immediate task.
- 35. Advantages of pop-up menu Appears in the working area. Does not use window space when not displayed. No pointer movement is needed if selected by button. Vertical orientation is most efficient for scanning and grouping. Vertical orientation allows more choices to be displayed. Allows for display of both keyboard equivalent and accelerators.
- 36. Disadvantages of pop-up menu Its existence must be learned and remembered. Means for selecting it must be learned and remembering. It requires a special action to see the menu (mouse click). Items are smaller than full-size buttons, slowing selection time. May obscure the screen working area. Its display location may not be consistent.
- 37. Iconic menu Is used to remind users of the functions, commands, attributes, or application choices available. Create icons that: Help enhance recognition and hasten option selection. Are concrete and meaningful. Clearly represent choices.
- 38. Advantages and disadvantages of iconic menu Pictures help facilitate memory of applications, and their larger size increases the speed of selection. Pictures consume considerably more screen space than text. They are difficult to organize for scanning efficiency. To create meaningful icons requires special skill and an extended amount of time.