1 of 108

USER INTERFACE DESIGN�21IS733

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

2 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

3 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

4 of 108

Module-3� System Menus and Navigation Schemes

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

5 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Topics to be Covered

​

  • The structures of menus.
  • The functions of menus.
  • The content of menus.
  • Formatting menus.
  • Writing menus.
  • Navigation using menus.
  • Web site navigation and links.
  • Types of graphical menus.

​

6 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

SYSTEM MENUS AND NAVIGATION SCHEMES

  • Menus are a major form of navigation through a system and, if properly designed, assist the user in developing a mental model of the system.
  • Menus are effective because they utilize the more powerful human capability of recognition rather than the weaker capability of recall.
  • Menu information must often be remembered and integrated across a series of screens.
  • Graphical and Web systems are heavily menu-oriented. They vary in form and are applied in diverse ways.

​

7 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

  • Menus vary in form, from very simple to very complex.
  • They may range from small dialog boxes requesting the user to choose between one of two alternatives, to hierarchical tree schemes with many branches and level of depth.

​

Structures of Menus

​

​

​

​

​

​

​

​

​

​

​

8 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Structures of Menus

Types of Menus

  • Single Menus
  • Sequential Linear Menus
  • Simultaneous Menus
  • Hierarchical Menus
  • Connected Menus
  • Event Trapping Menus

​

9 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Single Menus

  • It is simplest form of menu, a single screen or window is presented to seek the user’s input or request an action to be performed.
  • A single menu may be iterative if it requires data to be entered in to it and this data input is subject to a validity check that fails. The menu will then be represented to the user with a message requesting re-entry of valid data.

10 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Sequential Linear Menus

Sequential linear menus are presented on a series of screens possessing only one path. The menu screens are presented in a pre-set order, and, generally, their objective is for specifying parameters or for entering data.

Structures of Menus

​

​

​

​

​

​

​

​

​

​

11 of 108

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Simultaneous Menus

Simultaneous menu presents multiple active menus at the same time and allows users to enter choices in any order. These menus solve the problems caused by linear menu sequences. These menus are, in fact, a form fill-in method with the restriction that items are selected rather typed into fields.

Structures of Menus

​

​

​

​

​

​

​

​

​

​

​

12 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Hierarchical Menus

When many relationships exist between menu alternatives, and some menu options are only appropriate depending upon a previous menu selection, a hierarchical structure is the best solution.

Structures of Menus

​

​

​

​

​

​

​

​

​

​

​

13 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Connected Menus

Connected menus are networks of menus all inter connected in some manner. Movement through a structure of menus is not restricted to a hierarchical tree, but is permitted between most or all menus in the network. From the user’s perspective there is no top-down traversal of the menu system but an almost unhindered wandering between any two menus of interest.

Structures of Menus

​

​

​

​

​

​

​

​

​

​

14 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Event-Trapping Menus

Event Trapping 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, in essence, a set of simultaneous menus imposed on hierarchical menus. In a graphical system, for example, existing together are a simultaneous menu, the menu bar, and a hierarchy—the menu bar and its pull-downs.

​

Structures of Menus

​

​

​

​

​

​

​

​

​

​

15 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Functions of Menus

  • Displaying information
  • Navigation to new Menu
  • Execute an action or procedure
  • Data or parameter Input

​

​

16 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Functions of Menus

Displaying information

  • The main purpose of selecting a menu choice may simply be to display information.
  • The user may be searching the database or web.
  • The user’s focus will be more on information desired rather than on the selection.

​

17 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Functions of Menus

Navigation to a New Menu

  • Each user selection causes another menu in a hierarchical menu tree to be displayed. The purpose of each selection is to steer the user toward an objective or goal.
  • Selection errors may lead the user down wrong paths, and cost time and, perhaps, aggravation, but these errors are non destructive and usually unavoidable.

18 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Functions of Menus

Execute an Action or Procedure

  • A user selection directs the computer to implement an action or perform a procedure. The action may be something like opening or closing a file, copying text, or sending a message. In some cases execution may only occur after a hierarchical menu tree is navigated.
  • In other cases actions may be performed as successive hierarchical menus are encountered and traversed.

​

19 of 108

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

Functions of Menus

Data or Parameter Input

  • Each selection specifies a piece of input data for the system or provides a parameter value.
  • Data or values may be input on a single menu or spread over a hierarchy of menus.

​

​

​

20 of 108

Content of Menus

A menu consists of four elements

  • Context.
  • Title.
  • Choice Descriptions.
  • Completion Instructions.

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

21 of 108

Content of Menus

Menu Context

  • A menu’s context provides information to keep the user oriented.
  • This kind of information is critical in complex or hierarchical menu systems, where loss of position or disorientation can easily occur.

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

22 of 108

Content of Menus

  • Menu Title

A menu’s title provides the context for the current set of choices. The title must reflect the choice selected on the previously displayed menu.

  • Choice Descriptions

Choice descriptions are the alternatives available to the user. These descriptions can range from a mnemonic, numeric, or alphabetized listing of choices to single words or phrases to full sentences or more.

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

23 of 108

Content of Menus

  • Completion Instructions

Completion instructions tell users how to indicate their choices. They may include the rationale for why the user is being asked to make this choice and the impact the choice will have on subsequent processes.

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

24 of 108

Formatting of Menus

Guidelines for formatting menus.

Consistency

  • 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.

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

25 of 108

Formatting of Menus

Display

  • 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.

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

26 of 108

Formatting of Menus

Presentation

  • 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.

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

27 of 108

Formatting of Menus

Organization

  • Provide a general or main menu.
  • Display:

—All relevant alternatives.

—Only relevant alternatives.

  • 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.

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

28 of 108

Formatting of Menus

Organization

  • 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.

​

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

29 of 108

Formatting of Menus

Organization

  • 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.

​

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

30 of 108

Formatting of Menus

Organization of menu

  • General menu.
  • Relevant alternatives.
  • Matching menu structure to the tasks
  • Minimize number of levels
  • Limit the number of choices.
  • Provide decreasing direction menus.
  • Scrolling.
  • Easy to restructure.

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

31 of 108

Formatting of Menus

Organization

  • The advantages of a menu system with greater breadth and less depth are:
    • shorter time to reach.
    • wrong paths.
    • Easier learning.
  • A broad menu’s disadvantages are:
    • reduce the clarity.
    • Increased likelihood.

​

​

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

32 of 108

Formatting of Menus

Organization

  • The advantages of a menu system with greater breadth and less depth are:
    • shorter time to reach.
    • wrong paths.
    • Easier learning.
  • A broad menu’s disadvantages are:
    • reduce the clarity.
    • Increased likelihood.

​

​

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

33 of 108

Formatting of Menus

Organization

  • The advantages of greater depth are:

Less crowding.

Fewer choices.

Easier hiding.

​

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

34 of 108

Formatting of Menus

Organization

  • Greater depth disadvantages are:

longer time to reach.

More difficulties in learning.

More difficulties in predicting.

Higher error rates.

​

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

35 of 108

Formatting of Menus

Complexity

  • Provide both simple and complex menus.
  • Simple: a minimal set of actions and menus.
  • Complex: a complete set of actions and menus.

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

36 of 108

Formatting of Menus

Item Arrangement

  • Align alternatives or choices into single columns whenever possible.

—Orient for top-to-bottom reading.

—Left-justify descriptions.

  • If a horizontal orientation of descriptions must be maintained:

—Organize for left-to-right reading.

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

37 of 108

Formatting of Menus

Ordering

  • Natural order
  • Use numeric order.
  • For textual lists with a small number of options (seven or less),

order by:

—Sequence of occurrence.

—Frequency of occurrence.

—Importance.

—Semantic similarity.

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

38 of 108

Formatting of Menus

Ordering

  • Use alphabetic order for:

—Long lists

—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.

—For variable-length menus, maintain consistent relative

positions.

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

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

39 of 108

Formatting of Menus

Ordering

A meaningful ordering is necessary to:

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

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

40 of 108

Formatting of Menus

Ordering

Common ordering schemes for menus:

  • Natural ordering
  • Numeric ordering
  • Small number of options
  • Alphabetic order.
  • Separate destructive choices.
  • Do not reorder menus.

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

41 of 108

Formatting of Menus

Groupings

  • Create groupings of items that are logical, distinctive, meaningful, and mutually exclusive.
  • Categorize them in such a way as to:

—Maximize the similarity of items within a category.

—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.

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

42 of 108

Formatting of Menus

Groupings

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

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

—Are of equal size.

  • Separate groupings created through either:

—Wider spacing, or

—A thin ruled line.

  • Provide immediate access to critical or frequently chosen items.

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

43 of 108

Formatting of Menus

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:

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

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

  • For independent groupings:

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

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

44 of 108

Formatting of Menus

Line Separators

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

45 of 108

Phrasing the Menu

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.

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

46 of 108

​

Phrasing the Menu

Menu Titles

Guidelines

  • Main menu:

Create a short, simple, clear, and distinctive title, describing the

purpose of the entire series of choices.

  • Submenus:

Submenu titles must be worded exactly the same as the menu

choice previously selected to display them.

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

47 of 108

Phrasing the Menu

Menu Titles

Guidelines

  • General:

—Locate the title at the top of the listing of choices.

—Spell out the title fully using either an:

Uppercase font.

Mixed-case font in the headline style.

—Superfluous titles may be omitted.

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

48 of 108

Phrasing the Menu

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 (if possible).

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

49 of 108

Phrasing the Menu

Menu Choice Descriptions

  • Place the keyword first, usually a verb.
  • Use the headline style, capitalizing the first letter of each significant word in the choice description.
  • Use task-oriented not data-oriented wording.
  • Use parallel construction.

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

50 of 108

PHRASING THE MENU

Menu Choice Descriptions

  • Meaningful.
  • Size.
  • Keyword first.
  • Capitalization.
  • Task-oriented wording.
  • Parallel construction.
  • Relationship to title.

​

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

51 of 108

PHRASING THE MENU

Menu Instructions

    • For novice or inexperienced users, provide menu completion instructions.

• Left-justify the instruction and indent the related menu choice

descriptions a minimum of three spaces to the right.

    • Leave a space line, if possible, between the instructions and the related menu choice descriptions.

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

52 of 108

PHRASING THE MENU

Intent Indicators

  • Cascade indicator:

—To indicate that selection of an item will lead to a submenu, place a triangle or right-pointing solid

arrow following the choice.

To a window indicator:

—For choices that result in displaying a window to collect more information, place an ellipsis (. . .)

immediately following the choice.

• Exceptions—do not use when an action:

–Causes a warning window to be displayed.

Direct action items:

—For choices that directly perform an action, no special indicator should be placed on the menu.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

53 of 108

PHRASING THE MENU

Intent Indicators

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

54 of 108

PHRASING THE MENU

Keyboard Equivalents

    • To facilitate keyboard selection of a menu choice, each menu item should be assigned a keyboard equivalent mnemonic.
    • The mnemonic should be the first character of the menu item’s description.

—If duplication exists in first characters, use another character in the

duplicated item’s description.

    • Designate the mnemonic character by underlining it.
    • Use industry-standard keyboard access equivalents when they exist.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

55 of 108

PHRASING THE MENU

Keyboard Equivalents

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

56 of 108

PHRASING THE MENU

Keyboard Equivalents

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

57 of 108

PHRASING THE MENU

Keyboard Accelerators

  • For frequently used items, provide a keyboard accelerator to facilitate keyboard selection.
  • The accelerator may be one function key or a combination of keys.
  • Pressing no more than two keys simultaneously is preferred.

—Do not exceed three simultaneous keystrokes.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

58 of 108

PHRASING THE MENU

Keyboard Accelerators

  • Use a plus (+) sign to indicate that two or more keys must be pressed at the same time.
  • Accelerators should have some associative value to the item.
  • If keyboard terminology differences exist, use:

—The most common keyboard terminology.

—Terminology contained on the newest PCs.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

59 of 108

PHRASING THE MENU

Keyboard Accelerators

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

60 of 108

SELECTING MENU CHOICES

Initial Cursor Positioning

  • If one option has a significantly higher probability of selection, position the cursor at that option.
  • If repeating the previously selected option has the highest probability of occurrence, position the cursor at this option.
  • If no option has a significantly higher probability of selection, position the cursor at the first option.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

61 of 108

SELECTING MENU CHOICES

Choice Selection

  • Pointers:

—Select the choice by directly pointing at it with a mechanical device such as a mouse or

trackball pointer, or light pen, or pointing with one’s finger.

—Visually indicate:

Which options can be selected.

When the option is directly under the pointer and can be selected.

—Visually distinguish single-and multiple-choice menu alternatives.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

62 of 108

SELECTING MENU CHOICES

Choice Selection

  • Pointers:

—If pointing with a mechanical device is the selection method used:

The selectable target area should be at least twice the size of the active area of the pointing device.

In no case should it be less than 6 millimeters square.

Adequate separation must be provided between adjacent target areas.

—If finger pointing is the selection method used:

The touch area must be a minimum of 20 to 30 millimeters square.

The touch area must encompass the entire caption plus one character around it.

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

63 of 108

SELECTING MENU CHOICES

Choice Selection

  • Keyboard

—If moving the cursor to a menu choice:

The up and down arrow keys should move the cursor up or down vertically.

The left and right cursor keys should move the cursor left or right between horizontally .

—If keying a choice identifier value within an entry field:

Locate the entry field at the bottom of the last choice in the array of choices.

Uppercase, lowercase, and mixed -case typed entries should all be acceptable.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

64 of 108

SELECTING MENU CHOICES

Choice Selection

  • Selection/execution:

—Provide separate actions for selecting and executing menu options.

—Indicate the selected choice through either:

Highlighting it with a distinctive display technique.

Modifying the shape of the cursor.

—Permit unselecting choice before execution.

  • Combining techniques:

—Permit alternative selection techniques, to provide flexibility.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

65 of 108

SELECTING MENU CHOICES

Unavailable Choices

  • Unavailable choices should be dimmed or “grayed out.”
  • Do not add or remove items from a menu unless the user takes explicit action to add or remove them through the application.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

66 of 108

SELECTING MENU CHOICES

Mark Toggles or Settings

  • Purpose:

—Use to designate that an item

—Use to provide a reminder that an item or feature is active or inactive.

  • Guidelines:

—Position the indicator directly to the left of the option.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

67 of 108

SELECTING MENU CHOICES

Mark Toggles or Settings

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

68 of 108

SELECTING MENU CHOICES

Toggled Menu Items

  • Purpose:

—Use to designate two opposite commands that are accessed frequently.

—Use when the menu item displayed will clearly indicate that the opposite

condition currently exists.

  • Guidelines:

—Provide a meaningful, fully spelled-out description of the action.

—Begin with a verb.

—Use mixed-case letters, with the first letter of each word capitalized.

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

69 of 108

SELECTING MENU CHOICES

Toggled Menu Items

​

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING, CANARA ENGINEERING COLLEGE - MANGALURU

CANARA ENGINEERING COLLEGE BANTWAL - MANGALURU

70 of 108

Navigating Menus

  • Navigation, and an efficient navigational structure, is the most important element in system usability

​

  • Web Site Navigation Problems
  • Technical issues.
  • Usage problems

71 of 108

Navigation Goals

  • A well-designed navigation system facilitates quick and easy navigation between components whose structure and relationship are easily comprehendible.
  • For the user, answers to the following questions must be obvious at all times during

72 of 108

  • Where am I now?
  • Where did I come from?
  • Where can I go from here?
  • How can I get there quickly?

73 of 108

Control

■ For multilevel menus, provide one simple action to:

— Return to the next higher-level menu.

— Return to the main menu.

■ Provide multiple pathways through a menu hierarchy whenever possible.

74 of 108

Menu Navigation Aids

■ To aid menu navigation and learning, provide an easily accessible:

— Menu map or overview of the menu hierarchy.

— A “look ahead” at the next level of choices, alternatives that will be presented when a currently viewed choice is selected.

— Navigation history.

75 of 108

Web Site Navigation

Web Site Organization

  • Divide content into logical fragments, units, or chunks.

■ Establish a hierarchy of generality or importance.

■ Structure the relationships among content fragments, units, or chunks.

— Establish global or site-wide navigation requirements.

■ Create a well-balanced hierarchical tree.

— Restrict to two levels requiring no more than two clicks to reach deepest content, whenever possible

  • Logical fragments, units, or chunks.
  • A large body of information exists that can be organized into fragments.
  • The fragments relate to one another.
  • The user needs only a small fraction of the fragments at any one time.

​

76 of 108

Components of a Web Navigation System

All navigation controls must:

  • — Make sense in the absence of site context.
  • — Be continually available.
  • — Be obvious and distinctive.
  • — Be consistent in appearance, function, and ordering.
  • — Possess a textual label or description.
  • — Offer multiple navigation paths

77 of 108

Browser Command Buttons

Hide the split between the browser and the Web site application by including navigational controls within the app

78 of 108

Web Site Navigation Bars

■ Provide a global navigation bar at the top of each page.

■ Provide a local category or topical links navigation bar on the left side of a page.

■ Place minor illustrative, parenthetical, or footnote links at the end of the page.

■ For long pages, provide a navigation bar repeating important global or local links at the page bottom.

79 of 108

80 of 108

81 of 108

Textual Phrases

■ Provide a mix of textual phrase links:

— In explicit menus.

— Embedded within page text.

82 of 108

Graphical Images or Icons

Command Buttons

83 of 108

Other Web Site Navigation Elements

Overviews

Historical Trails

— History Lists.

— History Trees.

— Footprints.

— Bookmarks.

84 of 108

Web Site Navigation Guidelines

Scrolling

Number of Links

Presenting Links

85 of 108

Kinds of Graphical Menus

The following must be considered:

The number of items to be presented in the menu.

How often the menu is used.

How often the menu contents may change.

86 of 108

Menu Bar

Proper usage:

— To identify and provide access to common and frequently used application actions that take place in a wide variety of different windows.

— A menu bar choice by itself should not initiate an action.

​

87 of 108

The advantages of menu bars are that they:

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.

88 of 108

The disadvantages of menu bars are that:

They consume a full row of screen space.

They require looking away from the main working area to find.

They require moving pointer from the main working area to select.

The menu options are smaller than full-size buttons, slowing selection time.

Their horizontal orientation is less efficient for scanning.

Their horizontal orientation limits number of choices that can be displayed.

89 of 108

Display:

Location:

Title

Item Descriptions:

Organization:

Layout

Separation

​

​

90 of 108

Pull-Down Menu

■ Proper usage:

— 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

91 of 108

92 of 108

93 of 108

The advantages of pull-down menus are:

The menu bar cues a reminder of their existence.

They may be located relatively consistently on the screen.

No window space is consumed when they are not used.

They are easy to browse through.

Their vertical orientation is most efficient for scanning.

Their vertical orientation is most efficient for grouping

94 of 108

The disadvantages of pull-down menus are:

They require searching and selecting from another menu before seeing options.

They require looking away from main working area to read.

95 of 108

Display

Location

Size

Title

Item Descriptions

Organization

Layout

Groupings

Mark Toggles or Settings

96 of 108

Cascading Menus

97 of 108

98 of 108

Proper usage:

— To reduce the number of choices presented together for selection

(reduce menu breadth).

— 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.

99 of 108

Cascade Indicator

  • Place an arrow or right-pointing triangle to the right of each menu choice description leading to a cascade menu.
  • ■ Separate the indicator from the choice description by one space.
  • ■ Display the indicator in the same color as the choice descriptions.

100 of 108

Pop-up Menus

  • Use to present alternatives or choices within the context of the task.
  • Choices may also be presented to the user on the screen through pop-up menus, vertically
  • arrayed listings that only appear when specifically requested. Pop-up menus
  • may be requested when the mouse pointer is positioned over a designated or hot area
  • of the screen (a window border or text, for example) or over a designated icon.

101 of 108

In look, they usually resemble pull-down menus, as shown in Figure 4.35.

  • .

102 of 108

The advantages of pop-up menus are:

  • They appear in the working area.
  • They do not use window space when not displayed.
  • No pointer movement is needed if selected by button.
  • Their vertical orientation is most efficient scanning.
  • Their vertical orientation most efficient for grouping.

​

  • The disadvantages of pop-up menus are:
  • Their existence must be learned and remembered.
  • Means for selecting them must be learned and remembered.
  • They require a special action to see the menu (mouse click).
  • Items are smaller than full-size buttons, slowing selection time.

103 of 108

.

  • Display
  • Location
  • Size
  • Title
  • Other Guidelines

104 of 108

Tear-off Menus

  • Follow all relevant guidelines for pull-down menus.
  • A tear-off menu is a pull-down menu that can be positioned anywhere on the screen
  • for constant referral. As such, it possesses all the characteristics of a pull-down. It may
  • also be called a pushpin, detachable, or roll-up menu.

​

  • Advantages/disadvantages. No space is consumed on the screen when the menu is
  • not needed. When needed, it can remain continuously displayed. It does require
  • extra steps to retrieve, and it may obscure the screen working area.

105 of 108

Iconic Menus

  • Use 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.

​

  • Advantages/disadvantages. Pictures help facilitate memory of applications, and
  • their larger size increases speed of selection. Pictures do, however, consume considerably
  • more screen space than text, and they are difficult to organize for scanning
  • efficiency

106 of 108

107 of 108

Pie Menus

  • Consider using for:
  • — Mouse-driven selections, with one- or two-level hierarchies, short lists, and
  • choices conducive to the format.

​

  • A pie menu is a circular representation of menu items, as illustrated in Figure 4.37,
  • that can be used as an alternative to a pull-down or pop-up menu. Research has found
  • that this style of menu yields higher performance than the typical vertical array, especially
  • when the menu tasks are unrelated

108 of 108

Default Menu Items

  • File
  • View
  • Window
  • Help