CO NS Gig OS) = ® Contents Structures of menus Functions of menus Contents of menus Formatting of menus Phrasing the menu Selecting menu choices Navigating menus Kinds of graphical menusMenu ® List of choices or alternatives the users have at appropriate points while using the system are commonly called menus. ™ 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.= 1. Structures of Menus ™ A menv’s structure defines the amount of control given to the user in performing a task. ™ 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. The Mmost common structures are the following: a) Single Menus b) Sequential Linear Menus ¢) Simultaneous Menus Hierarchical Menus ) Connected Menus f) Event-Trapping Menusad | a) Single Menus = In this simplest form of menu, a single screen or window is presented to seek the user’s input or request an action to be performed. DS _choicet S choice2 S choices = Eg: In playing a game, choices presented may be “novice,” “intermediate,” or “expert.” ® The user consider the immediate consequences of the item being chosen and need not be concerned with any other additional system menus.b) Sequential Linear Menus ® Sequential linear menus are presented on a series of sous screens possessing only one path © Objective is for specifying parameters or for entering data where length of the path may be short, or long, depending ‘ upon the nature of the information being collected. ; ‘Along sequence may become tedious as menu after menu is presented. + The user may not remember an answer to a previous question. + The user may also want to return to a previous menu to change an answer or look at an answer. + Finally, the user may, conceptually, want to complete the menus in a different order than which they are being presented.c) Simultaneous Menus ALTERWATIVE! | ALTERNATIVES S choi S choi ® Instead of being presented on separate screens, all menu ce cs a tix | options are available simultaneously on single screen, avrerwarive2 | aLreRNaTives Eg: The “Filter” option in any e-commerce website, where = ad ©) éi users can apply filters using many alternatives and choosing cet cet Si choi Si choi the options in each alternative. ce2 ce2 : enti may be completed in the order desired by the user, choices being skipped and ed to later, 1 alternatives are visible for reminding of choices, comparing choices, and changing For large collections of menu altematives screen clutter can easily occur, and screen paging or scrolling ‘may still be necessary to view all the choices. ‘Many menu dependencies and relationships on a screen, if poorly indicated, can lead to confusion fora novice user.d) 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, Like: From options to sub-options, from categories to subcategories, from pages to sections to subsections, and so on. © Eg: Menu bars with their associated pull-downs, and in Web sites with their navigation link, eo GET, we Lom |e] Le] + me | [ome | [ame || ® Hierarchical structures are characterized breadth and depth, where breadth being the number of alternatives found at each level and depth being the number of choice levels one must traverse to reach the destination. dvantage: users are not familiar with the hierarchical menu, or are unable to predict what sub-options present below a particular choice, they may go down wrong paths and find it necessary to go back up the tree to change a choice, or perhaps even return to the top-level menu.= e) Connected Menus | ™ Connected menus are networks of menus all interconnected in some manner. | unhindered wandering between any two menus of interest. ® Eg: One account is connected to another account. © From the user’s perspective there is no top-down traversal of the menu system but an almost ‘A conneéted menu system may be cyclical, with moverttent permitted in either direction between meniis, or acyclical, with movement permitted in LL. onfy one direction. dvantage: It gives the user full control over the sen iavigation flow isadvantage: Its complexity, and its navigation ry be daunting for an inexperienced user.f) Event-Trapping Menus | = Itprovides background control over the system’s state and parameters while the user is | working on a foreground task. ® Event-trapping menus generally serve one of three functions: 1. They may immediately change some parameter in the current environment (eg: bold a piece of text) 2. They may take the user out of the current environment to perform a function without leaving the ‘arrent environment (eg: perform a spell check) They may exit the current environment and allow the user to move to a totally new environment (eg: Exit). ese menus can also change content based upon the system state, or an event, existing at that moment. + A Paste option in a word-processing application, for example, will only function if there is something in a clipboard to paste. + A Grid option on a pull- down, as another example, will toggle between a “Hide Grid” or “Show Grid” state.[> 2. Functions of menus ™ From the user’s perspective, a menu can be used to perform following functions a) Navigation to a New Menu b) Execute an Action or Procedure c) Displaying Information d) Data or Parameter Inputa) Navigation to a New Menu = Each user selection causes another menu in a hierarchical menu to be displayed. © The purpose of each selection is to drive the user towards an objective or goal. ® Selection errors may lead the user down wrong paths, and cost time and, perhaps, aggravation, but these errors are nondestructive and usually undoable. b) 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. © Selection errors may or may not have serious consequences, depending upon the nature of the action, Accidental selection of critical irreversible actions must be prevented in interface design.> c) Displaying Information © The main purpose of selecting a menu choice may simply be to display information. | Like: The user may be searching for specific information in a database or browsing the Web. © Inmany cases, information retrieval may occur only after a hierarchical menu tree is navigated. © Users may spend considerable time and effort understanding and processing uncovered formation in order to evaluate subsequently displayed menu choices. © Wrong tums in the process will again cost time but these errors are nondestructive and usually undoable. d) Data or Parameter Input = Each selection specifies a piece of input data for the system. = Data or values may be input on a single menu or spread over a hierarchy of menus. The user's focus is primarily on the information being provided. © Selection errors can easily be corrected if detected by the system,3. Contents of menus =A menu consists of four elements a) Menu Context b) Menu Title c) Choice Descriptions d) Completion Instructions| a) Menu Context ™ A menu’s context provides information to keep the user oriented. Choose a filter ® This kind of information is critical in complex or hierarchical menu systems, where loss of position or disorientation can easily occur so feedback is necessary that tells users where they are in a process. ® Verbal linkage, spatial linkage, or both may be used to provide pavigation feedback. ® Verbal linkage involves providing, on the current menu screen, a listing of choices made on previous menus that have led to this position = Spatial linkage can be accomplished by graphic methods. Each succeeding menu screen can be displayed overlap- ping the previous menu screenb) 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. c) Choice Descriptions © Choice descriptions are the alternatives available to the user. These descriptions can range from mnemonic, numeric, or alphabetized listing of choices to single words or phrases to full sentences or more. The style chosen will reflect: + the experience of the user (novice or expert) + the nature of the choices (well-learned alternatives or not) + the nature of the selection mechanism (keyboard or mouse) + the nature of the system (business system application or Web page).} d) Completion Instructions ® Completion instructions tell users how to indicate their choices. ™ They may include the reason for why the user is being asked to make this ‘choice and the impact the choice will have on subsequent processes. ‘® Explicit instructions may be needed for first time or casual users of a system. ® The needs of all system users, and the nature of the system, must again be considered in creating this kind of on-screen guidance.4. Formatting of menus Guidelines for formatting menus. 1. Consistency 2. Display 3. Presentation 4. Organization 5, Complexity 6. Item Arrangement 7. Ordering 8. Grouping 9. Line Separators1. Consistency » Menu design consistency is an integral component of system usability. ® Menu formatting, phrasing, choice selection, and navigation must be consistent throughout a graphical system. = 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.2. Display = Whether to display a menu continually, or on demand, is determined by the menu’s frequency of use. = Ifcontinual or frequent references to menu options are necessary, permanently dis- play the menu in an area of the screen that will not obscure other screen data. = Ifonly occasional references to menu options are necessary, the menu may be pre- sented on demand. — Critical options should be continuously displayed, however.3. Presentation ™ Menu and its choices should be immediately recognizable by the users and it can be accomplished through giving the menu a consistent structure which is presentation. ® A good presentation: 7 = 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.4. Organization > = In organizing a menu, the goal is to simply and effectively reveal its structure, while also i reducing the number of actions needed to locate the target item. = A good 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. = Minimize number of menu levels within limits of clarity. — For Web sites, restrict it to two levels (requiring two mouse clicks) for fastest per- formance. = Be conservative in the number of ment choices presented on a sereen: — 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 ac- complished.5. Complexity = A factor involved in a complicated process or situation. © Providing two sets of menus will more effectively satisfy the differing needs of the novice and expert user. = Provide both simple and complex menus. = Simple: a minimal set of actions and menus. = Complex: a complete set of actions and menus. 6. Item Arrangement ® It describes the alignment and orientation of menus. = Align alternatives or choices into single columns whenever possible. — Orient for top-to-bottom reading. — Left-justify descriptions. = Ifa horizontal orientation of descriptions must be maintained: — Organize for left-to-right reading,7. Ordering * Provide informa Comyhon ordering schemes for menus + Facilitate search for an item. = A meaningful ordering is necessary to: n 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. = Onder lists of choees by their natural order, oF ‘= Forlists associated with numbers, use nun ‘= For textual lists with a small number of options (seven or less), order by: ric order. = Sequence of occurrence. — Frequency of occurrence, — Importance. — Semantic similarity Use alphabetic order for: = Long lists (eight or more options). — Short lists with no obvious pattern or frequency, Separate potentially destructive actions from frequently chosen items. option usage changes, do not reorder menus. Maintain a consistent ordering of options on all related menus. = For variable-length menus, maintain consistent relative postions. — For fixed-length menus, maintain consistent absolute positions.8. Grouping ™ Grouping is the action of putting things in a group or groups. ™ It includes: = Create groupings of items that are logical, distinctive, meaningful, and mutually ex- elusive, = 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. = 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 —Athin ruled line, = Provide immediate access to critical or frequently chosen items.9. Line Separators ® Line separators are used to: = 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. ‘Types of Line separators 1) Partial line separators 2) Extended line separators. Save Save As. Bri Printer Setup, Line separator5. Phrasing the menus * Phrasing means the way in which the context is expressed via menus. A menu communicate to the user information about: The nature and purpose of the menu . ™ The nature and purpose of each presented choice. ™ How the proper choice or choices may be selected. + Menu Phrasing includes: 1, Menu Titles 2. Menu Choice Descriptions 3. Menu Instructions 4. Intent Indicators 5. Keyboard Equivalents 6. Keyboard Accelerators1. Menu Titles » A meaningful menu title is defining the context of the menu and increases menu comprehension. ® It includes = 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. = 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.2. Menu Choice Descriptions Meaningful : 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). Ill, Keyword first: Place the keyword first, usually a verb. IV. Capitalization : Use the headline style, capitalizing the first letter of each significant word in the choice description. V. Task-oriented wording : Use task-oriented not data-oriented wording. VI. Parallel construction : Use parallel construction. VIL. Refationship to title : A menu choice must never have the same wording as its menu title. ‘onsistency across menus: Identical choices on different menus should be worded identically. Numbering : Choices should not be numbered. — Exception: If the listing is numeric in nature, graphic, or a list of varying items, it may be numbered ‘Command language : If menu options will be used in conjunction with a command language, the capitalization and syntax of the choices should be consistent with the command language. Word as a command to computer : Word choices as commands to the computer. Choose one: Save and exit Exit without saving : Do you want to save and exit? Yes No3. Menu Instructions ® It provides the guidance on how to complete a menu. ™® Depending on the type of user, it includes : = For novice or inexperienced users, provide menu completion instructions. — Place the instructions in a position just preceding the part, or parts, of the menu to which they apply. + 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. — Present instructions in a mixed-case font in sentence style. = For expert users, make these instructions easy to ignore by: — Presenting them in a consistent location. — Displaying them in a unique type style and/or color.4. Intent Indicators ® It provides an indication of what will happen when a menu item is selected, It enhances predictability and exploration of a graphical system. © Types of 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. — Acascade indicator must designate every cascaded ment. = Toa window indicator: — For choices that result in displaying a window to collect more information, place an ellipsis (...) immediately following the choice. eee eaies + Exceptions—do not use when an action: + ~ Cauises a warning window to be displayed. es icien — May or may not lead to a window. = Direct action items — For choices that directly perform an action, no special indicator should be placed on the menu. \ 24 canada5. Keyboard Equivalents I. Keyboard selection: The ability to select a menu alternative through the keyboard should always be provided and it is accomplished by providing a keyboard equivalent for each menu alternative. Style Keyboard [Normal equivalent ‘Bold Malic ‘Underline ‘Quttine ‘Shadow IL. Mnemonic: The mnemonic should be the first character of the menu item’s description. 1. If duplication exists in first characters, use another character in the duplicated item’s description. IL. Preferably choose the first succeeding consonant. IIL, Designation: Designate the mnemonic character by underlining it. IV. Industry standards: Use industry-standard keyboard access equivalents when they exist.6. Keyboard Accelerators Accelerators are keys, or combinations of keys, that invoke an action regardless of cursor or pointer position. Example: Ste ‘Sye ‘Normal cue Bold (Cub) cust Holic (Cas) cu Underine _(CuteU) fo ‘Ovtine ‘Shadow Keyina Vint snd oantae epee acetate Characteristi 1. For frequently used items, provide a keyboard accelerator to facilitate keyboard selection. 2. The accelerator may be one function key or a combination of keys3. Pressing no more than two keys simultaneously is preferred. 4. Use a plus (+) sign to indicate that two or more keys must be pressed at the same time. 5. Accelerators should have some associative value to the item. 6. Identify the keys by their actual key top engraving. 7. If keyboard terminology differences exist, use: + The most common keyboard terminology. * Terminology contained on the newest PCs 8. Separate the accelerator from the item description by three spaces. 9, Right-align the key descriptions. 10. Do not use accelerators for: * Menu items that have cascaded menus. * Pop-up menus. 11. Use industry-standard keyboard accelerators when they exist.> Some Standard Keyboard Accelerators | cube copy curten New crtso Open curt Print / cs save curt Paste curt cut curtez Undo A Display contextual help window shifter Activate context sensitive help shiftr10 Display pop-up menu spacebar Select (single mouse click) te ance alt Activate a menu bar6. Selecting Menu Choices + Menu items can be selected by pointing at the choice with a mechanical aeeene pointer, by pointing at the choice through the keyboard, or by keying a value designating the choice. “Selecting Menu choices includes: Initial Cursor Positioning Choice Selection Defaults Unavailable Choices Mark Toggles or Settings Toggled Menu Items1. Initial Cursor Positioning = When a menu is first displayed, = Ifone option has a significantly higher probability of selection, position the cursor at that option. = Ifrepeating the previously selected option has the highest probability of occurrence, position the cursor at this option. = Ifno option has a significantly higher probability of selection, position the cursorat the first option.2. Choice Selection vos Sele! the choice by direc pointing tt with a mechanical device suchas © ‘mouse or rack potter o ight fea or Pooting with one's Rage. { = Which options canbe slstd. ‘= When te options direct under the pointer and can beset. — Visual astngush single and malipe choice menu lernatives. — lpotnting with a mechanical devices the selection method use += The selectable target area shoud beat least tice the sz ofthe active are of ‘hepolnting device or displayed polnter In no ease should tbe ess han ral Timeters square ‘+ Adequate separation mst be provided between adjacent target ares ~ linger potting i the selection method wed The foch ares mut be amin of 0 fo 90 milimeters quae, {= Thetouch ree must encompass teenie caption plusane character around it + Keyboard: ~ If moving the cursor toa mena choc: ‘= The upand down arow Kea should move thecurtor up or down vertically ‘lected ens option + Thelet and ght mor keys shoud move the crserlet right betwee hor ‘zontal oriented menu options. eying choice identifier value within an entry Red += Locate the entry fed athe bottom af the ast choice inthe aay of cee. = Uppercase. Towerese, and mined case typed entries should allbeaceptble. 1 Selection/eneetion: Provide separate actions fr selecting and exceuting menu options. ~ Indicate the selected choice through ete += Highlghtng it with a stint display techaigue 1 Moding the shape ofthe corer, — Permit uneecting ole before executon. += Ifamena smile choice, permit all options tobe selected before exeetion, 1 Combining ecaiques: Permit atemntivesleton techniques, to proside elit3. Defaults ® Defaults includes system learning and it enhance system efficiency. ® Indicate a default by displaying it in a bold text. 4. 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.5. Mark Toggles or Settings © Purpose: — Use to designate that an item or feature is active or inactive over a relatively long period of time. When itis active: An indicator is displayed adjacent to the item description. For nonexclusive choices, a check mark is displayed; for mutually exclusive choices, another distinctive symbol, such as a diamond or circle, is displayed. When the item is not active: no mark or symbol will appear.™ Guideline: * Position the indicator directly to the left of the option. + For situations where several nonexclusive choices may be selected, consider including one alternative that deselects all the items and reverts the state to the “normal” condition. Advantages/disadvantages: + Mark toggles provide a visual indication of the state of an item. Best suited to items or features that remain active or inactive over relatively long periods of time. + They are accessed quickly but may not always be visible.6. Toggled Menu Items ™ A toggled menu item is a one menu item command that toggles back and forth between the current state and its alternative state. ® 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. For example: If a background grid is currently being displayed, the menu item reads Hide Grid. When Hide Grid is selected, the grid is removed from the window, and the menu item dynamically changes to reflect the opposite action. It will now read Show Grid.™ Guidelines: + Provide a meaningful, fully spelled-out description of the action. Begin with a verb that unambiguously represents the outcome of the command. Use mixed-case letters, with the first letter of each word capitalized. Advantages/disadvantages: + Toggled menu items shorten menus, decrease visual clutter, provide quicker access, and faster comprehension of the command action, + When they are located on a pull-down menu, however, the actions themselves are not always visible, which can cause uncertainty for novice users.7. Navigating Menus + In Web site design, the most successful sites have been found to be those with easy to use and understanding navigational systems. General system navigation guidelines include the following: = For multilevel menus, provide one simple action to: : — Return to the next higher-level menu. 1-Control Return to the main ment = Provide multiple pathways through a menu hierarchy whenever possible. = Toaid menu navigation and learning, provide an easily accessible: 2, Menu — Menu map or overview of the menu hierarchy. Navigation —A “look ahead” at the next level of choices, alternatives that will be presented ; when a currently viewed choice is selected. fans — Navigation history.| Topics to be covered in Navigating Menus 1. Web Site Navigation 2. Components of a Web Navigation System 3, Web Site Navigation Guidelines 4. Maintaining a Sense of Place> 1. Web Site Navigation ® The design goal of proper Web Site Navigation can be listed as below: 1. Logical fragments, units, or chunks ; Divide content into logical fragments, units, or chunks. or importance : Having identified the information ‘units, in- formation is now organized in according to importance or generality, from general to specific. Structure the relationships: Structure the relationships among content fragments, units, or chunks. * Establish global or site-wide navigation requirements. Hierarchical tree : Create a well-balanced hierarchical tree. s to reach deepest content, + Restrict to two levels requiring no more than two whenever possible.= 2. Components of a Web Navigation System { i All navigation controls must have following characteristics: 1. Sensible: All navigation controls, in the absence of site context, must make sense to the user. 2. Available: All navigational controls must be easy to access. If they are not readily available, the full advantages of hypermedia may not be achieved. vious and distinctive: The obviousness of a link is called its affordance. Its appearance to the Aser must immediately suggest that it is an entity to be clicked or otherwise selected. Consistent: Be consistent in appearance, function, and ordering. ‘Textual: Possess a textual label or description. Provide multiple navigation paths: Offer multiple navigation paths, such as site maps, a table of contents, and indexes to go directly to a point of interest.Different components of navigation system includes : 1. Browser Command Buttons: Hide the split between the browser and the Web site application by including navigational controls within the application. Example : Pressing the browser Back and Forward buttons can create confusion because they can transport a user in and out of'a Web site. So designer can provide command buttons such as “Next” and “Previous” within the application for movement within the application. 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.Types of Web site navigation bar: a, Textual explicit listing navigation bars. c. Command button navigation bar.lavigation link A website can have at least three levels of navigation links: * Global or Site-Wide links: Indicating the site’s total scope or categories of available information. * Local Specific navigation links: It is present within the category or topical area being displayed. * Footnote links: Minor illustrative or parenthetical links.3. Web Site Navigation Guidelines ® Web Site Navigation Guidelines covers topics like, How many links should exist ona page? How should textual links be presented to make them obvious? What kinds of links should be included on a page? @ It includes: . Scrolling . Number of Links . Presenting Links . Other Link Guidelines . Kinds of Links . Link Maintenance1. Scrolling Do not require scrolling of navigation-only pages: Minimize the need for scrolling to view all links on pages containing content. Never require horizontal scrolling. . Number of Links One link: Every page should contain at least one link. Conservative number: Be conservative in the total number of links presented on a screen. + Without logical groupings of elements, limit links to 4 to 8 * With logical groupings of elements, limit links to 18 to 2 Embedded links: Restrict embedded links to those most important, pertinent, and interesting.Link text: = Underline all ink test, including that: ine Li + Embedded in page content. 3. Presenting Links + Contained in explicit mens listings. + Contained in headings. + Used as graphical labels Boieeinae pntst Be easy $0 find. _ igi between conection and selec Tin They must not be confused + Make unselected/unvisited links blue, with other sereen graphics | * Matesdected/istedlinks pute or textual content. = ish links lending to diferent Web destinations through a differentiating at symbol: © Itincludes: + Precede links to content within the same page with a pound sign (2). / ~ For links moving dovmorardin the page, use: ¢The principles of design. ink text ~ For links moving upward in the page use: #* Principles introduction. + Precede links to external or foreign sites with another unique symbol such as Kinds of links an asterisk ("):* Additional information. Fe + Do not precede Haks to ther site pages with any symbol: Graphical links ieee ere ieee Manes in toolbars ~ Also distinguish links leading to different Web destinations by presenting them inconsistent locations. ‘© Grephical links: — Distinguish graphical links from decorative graphics through: + Underlining graphical test labels. ‘= Links in toolbars: — Distinguish links contained in toolbars through: ‘+ Presenting in consistent locations. + Using different colored backgrounds,4, Other Link Guidelines = Witting: — Provide links to satisfy a range of user needs. — Create descriptive links clearly indicating their destination or resulting action, = Grouping: — Group links by the most relevant menu-grouping scheme. — Separate visually the following types of navigation: ‘+ Upward to the immediate parent page. += Upward to the beginning of the section or eategory of information. / += Across to main sections or categories of information. + To basic utilities. = Ordering: — Order links by the most relevant menu choice-ordering scheme, = Heading: — Where appropriate, provide a listing heading describing the organizing eategory, principle, or theme. = Size: — Provide graphical images and command buttons of sufficient and equal size. = Spacing: — Create equal spacing between choices graphical image and textual listing tool- bars. = Inapplicability — Disable and display dimmed links conditionally not applicable,5. Kinds of Links = Within a page: — For long pages, include links to internal page content. = Within a Web site: — On all pages include links to: = The Web site home page. = Global Web site features. + Other main pages, navigation points, or categories. = The likely Web site starting point. = Main pages with links to the page. — On sequential pages, include links to the: = Next page = Previous page. — Also consider including links to: ‘= Places of related interest. = Important pages. ‘+ Background or explanatory information. = Supplemental information. + New or changed content. + Web site Quit or Exit. = External links: — Most appropriate for informational sites. — Provide links to relevant information on other Web sites. + Related content. + Reference information. + Background reading, — Place external links on a separate page. — Provide an indication when a link goes outside the current site.> 6. Link Maintenance | 1. Maintain correct internal links: Carefully check sequential pages if Next and Previous links are used within the site. 2, Frequently check and correct external links: Due to the volatile nature of / the Web, a linked site’s content may change, its location may change, or a site / may cease to exist. So frequent checks and corrections needs to be made.4, Maintaining a Sense of Place ™ A sense of place is “Where one currently is in the Web”. It is often difficult to maintain as navigation links can transport a user from anywhere to anywhere in web. Design Characteristics that Aid in Maintaining a Sense of Place jin a Website: To assist maintaining a sense of place within a Web site + Provide a simple hierarchical tree structure. + Provide ease of movement to important site features. Across multiple Web sites: To assist maintaining a sense of place across multiple Web sites, provide consistency in all Web site design elements, including: + Graphical identity schemes. + Component presentation, + Component organization and locationDesign Elements that Aid in Maintaining a Sense of Place Home base: A site’s home page is a stable, concrete, and safe anchor point to escape to in times of difficulty. Recurring navigation tools: Use recurring navigation tools on all pages. Recurring page elements:_Use recurring elements on all pages. Page numbers: Provide page numbers for sequential pages. Ongoing feedback showing location in Web site: Provide ongoing feedback that shows where users are in a site. On-demand aids illustrating location: Provide on-demand aids that illustrate the user’s location within a site. Like: Site maps, Table of contents, etc. Clearly written links: Provide clearly written link labels.—_ 8. Kinds of Graphical Menus / * The best kind of menu to use in each situation depends on following factors: + The number of items to be presented in the menu, + How often the menu is used. + How often the menu contents may change. Following are the different types of menu: a Menu bar Pull- Down menu Cascading menu Pop-Up menu Tear-Off menu Ieonic menu1. 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. File Edit Options Window Help Figure 4.19 Menu bar composed of text. oS ES oo Eco =a Figure 4.20 Menu bar composed of buttons,© Advantages of memu bars: * Are always visible, reminding the user of their existence. + Are easy to browse through and easy to locate consistently on the screen. * Usually do not obscure the screen working area and with windows and dialog boxes. + Allow for use of keyboard equivalents. ‘© Disadvantages of menu bars: + They consume a full row of sereen 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 limits number of choices that can be displayed.1. Display = All primary windows must have a menu bar. = All menu bars must have an associated pull-down menu containing at least two choices. = Do not allow the user to tum off the display of the menu bar. = Ifall the items in its associated pull-down menu are disabled, then disable the menu bar item. — Display the disabled item in a visually subdued manner. — However, the disabled pull-down menu must always be capable of being pulled- down so that the choices may be seen. 2. Location = Position choices horizontally over the entire row at the top of the screen, just below the screen title. = A large number of choices may necessitate display over two rows. 3.Title = The window title will be the menu bar title.4, Item Descriptions = The menu item descriptions must clearly reflect the kinds of choices available in the associated pull-down menus. Menu item descriptions will be the “titles” for pull-down menus associated with them. Use mixed. case letters to deseribe choices. Use single-word choices whenever possible, Do not display choices that are never available to the user. Organization Follow standard platform ordering schemes where they exist. ~ Place application specific choices where thev fit best. Order choices left-to-right with — Most frequent choices to the left. — Related information grouped together. ‘= Choices found on more than one menu bar should be consistently positioned. ‘= Left justify choices within the line. ‘When choices can be logically grouped, provide visual logical groupings, if possible. Help, when included, should be located at the right side of the bar. Edi Options Window Help Figure 4.216. Layout = Indent the first choice one space from the left margin. = Leave at least three spaces between each of the succeeding choices (except for Help which will be right justified). = Leave one space between the final choice and the right margin. Fitexoo Edt Options Window Help| Figure 4.22 7. Separation = Separate the bar from the remainder of the screen by: / —Aéifferent background, or — Solid lines above and below. 8. Selection Indication © Keyboard cursor: — Use a reverse video, or reverse color, selection eursor to surround the choice. — Cover the entire choice, including one blank space before and after the choice word, Fioureszs — Eee_©t_ [ORGRAT Window = Pointer: ‘Use reverse video, or reverse color, to highlight the selected choice.2. Pull-Down Menu ™ Proper usage: + To initiate frequently used application actions that take place on a wide variety of different windows. * Asmall number of items. + Items best represented textually. * Ttems whose content rarely changes. ‘Tabs [RaUNeRIOR) Spacieg Let Righ Camage Help© Advantages of pull-down menus: 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 and grouping. Their vertical orientation permits more choices to be displayed. They allow for display of both keyboard equivalents and accelerators. ® Disadvantages of pull-down menus: They require searching and selecting from another menu before seeing options. They require looking away from main working area to read and moving the pointer out of working area to select (unless using keyboard equivalents). They items are smaller than full-size buttons, slowing selection time. They may obscure the screen working area.1. Display = Display all possible alternatives ‘= Gray-out or dim items that cannot be chosen due to the current state of an applica tion. 2. Location ‘= Position the pull-down directly below the selected menu bar choice 3. Title = Not necessary on a pull-down menu. The ttle willbe the name ofthe menu bar item chosen, 4. Item Descriptions '= Use mixed-case, headline-style words to describe choices. = If the choices can be displayed graphically, for example, as fill-in patterns, shades, or colors, textual descriptions are not necessary. = Donot — Identify a menu item by the same wording as its menu title. — Change the meaning of menu items through use of the Shift key. — Use scrolling in pull-down. — Place instructions in pull-downs.= i Gage neeation) ‘= Follow standard platform ordering schemes when they exist. — Place application-specific choices where they fit best. ‘= Place frequent or critical items at the top. = Separate destructive choices from other choices, ‘= Align choices into columns, with: — Most frequent choices toward the top. — Related choices grouped together. — Choices found on more than one pull-down consistently positioned. = Left-align choice descriptions. ‘= Multicolumn menus are not desirable. If necessary, organize top-to-bottom, then left-to-right. 6. Separation ‘= Separate the pull-down from the remainder of the screen, but visually relate tto the menu bar by: — Using a background color the same as the menu bar. — Displaying choice descriptions in the same color as the menu bar. — Incorporating a solid-line border completely around the pull-down in the same color as the choice descriptions. = A drop shadow (a heavier shaded line along two borders that meet) may also be in- cluded,=> / 7. Layout = Leave the menu bar choice leading to the pull-down highlighted inthe selected manner (reverse video or reverse color). ‘= Physically the pull-down menu must be wide enough to accommodate the longest ‘menu item description and its cascade or accelerator indicator. ‘= Align the first character of the pull-down descriptions under the second character of the applicable ment bar choice. ‘= Horizontally, separate the pull-down choice descriptions from the pull-down bor- ders by two spaces onthe left side and at least two spaces on the right side. ~The left-side border willalign with the left side of the highlighted menu bar choice. — The right-side border should extend, at minimum, tothe right side of its high Help Figure 4.25 —Pull-downs for choices on the far right side of the menu bar, or long pull-down descriptions, may require alignment to the left of their menu bar choice tom tain visibility and clarity Page Source Destination Margins Namo initSving OWE “Space Compr ‘Aiibutws Eormat Labels8. Selection Cursor "= Usea reverse video, or reverse color, selection cursor the same color as the menu bar ‘to surround the choice. = Create a consistently sized cursor as wide as the pull-down menu. Figure4.31 9. Groupings = Provide groupings of related pull-down choices — Incorporate a solid line between major groupings. — Incorporate a dotted or dashed line between subgroups. — Left justify the lines under the first letter ofthe eolumnized choice descriptions — Right justify the lines under the last character ofthe longest choice description, — Display the solid line inthe same color as the choice descriptions. Figure 42710. Pull-Downs Leading to Another Pull-Down ‘= Ifa pull-down choice leads to another pull-down, provide a caseade indicator as fol- lows: — Place an arrow or right-pointing triangle after the choice description. — Align the triangles to the right side of the pull-down, — Display the triangle in the same color as the choice descriptions. Figure 4.28 — 11. Pull-Downs Leading to a Window = For pull-down choices leading to a window: — Place an ellipsis (three dots) after the choice description. — Do not separate the dots from the description by a spact — Display the ellipsis in the same color as the choice descriptions.3. Cascading Menus © Proper usage: To reduce the number of choices presented together for selection (reduce menu. breadth). 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 and to avoid using for frequent, repetitive commands. ‘Dadget Repo Het ret Report oon Payment Report “ax Report ‘Tex Form Report© Adyantages of cascading menus: + 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. » Disadvantages of cascading menus: + 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.1. Cascade Indicator ‘= Separate the indicator from the choice description by one space, ‘= Display the indicator in the same color as the choice descriptions. ot > ‘Spacing > sie > Figure 4.33 —_ 2. Location = Position the first choice in the cascading menu immediately to the right of the se~ lected choice. = Leave the choice leading to the cascading menu highlighted. Font > Spacing > Sie > Intensity > | Low Normal Figure 4.34 =3. Levels = Donot excced three menu levels (two cascades). — Only one cascading menu is preferred, itle ‘= Notnecessary on the cascading menu. = The title will be the name of the higher-level men item chosen. 5. Other Guidelines '= Followthe organization, content, layout, separation, and selection eursor guidelines for the kind of menu from which the menu cascades,4. Pop-up Menus © Proper usage: + Use to present alternatives or choices within the context of the task. ee ——__—_$_ cut Copy Paste Delete Font... QuickFormat... Spell Check... Reyeal Codes Bullets...® Advantages of pop-up menus : + They appear in the working area and 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 and grouping. + Their vertical orientation allows more choices to be displayed. + They may be able to remain showing (“pinned”) when used frequently. / + They allow for display of both keyboard equivalents and accelerators. © Disadvantages of pop-up menus : + Their existence and the 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. + They may obscure the screen working area. + Their display locations may not be consistent.Display = Provide pop-up menu for common, frequent, contextual actions. — If the pointer is positioned over an object possessing more than one quality (for ‘example, both text and graphics), at minimum present actions common toll ob- ject qualities. 1 Items that cannot be chosen due to the current state of an application should not be displayed. = Continue to display a pop-up until: = A choice is selected. — An action outside the pop-up is initiated, = The usor removes the pop-up. 2. Location = Position the pop-up: — Centered and to the right of the object from which it was requested — Close enough to the pointer so that the pointer can be easily moved onto the — But not so close that the pointer is positioned on an item, possibly leading to ac- cidental selection. ‘= Ifthe pointer is positioned in such a manner that the pop-up would appear off- screen or clipped, position the menu: — As close as possible to the object, but not covering the object. — So that it appears fully on the screen.3.Title = Not necessary on a pop-up menu. If included, clearly describe the menu's purpose. Locate in a centered position at the top. Display in uppercase or mixed-case letters. Separate it from the menu items by line extending from the left menu border to the right border. 4, Size ‘= Restrict the pop-up to no more than § to 10 choices, preferably 8 or less. 5. Other guidelines ‘= Arrange logically organized and grouped choices into columns. ‘= Ifitems are also contained in pull-down menus, organize pop-up menus in the same Left-align choice descriptions. Use mixed-case headline-style words to describe choices. ‘Separate groups with a solid Tine the length of the longest choice description. Ifthe choice leads toa pop-up window, place an ellipsis after the choice description ‘To separate the pop-up from the screen background: — Use a contrasting, but complementary background. = Incorporate a solid line border around the pull-down,3.Title = Not necessary ona pop-up menu. Ifincladed, clearly deseribe the menu's purpose. Locate in a centered postion atthe top. lay in uppercase or mixed-case letters Separateit from the menu items by aline extending from the left menu border to the right border. 4. Size Restrict the pop-up to no more than § to 10 choices, preferably 8 oF less. 5. Other guidelines ‘= Arrange logically organized and grouped choices into columns, ‘= [fitems are also contained in pull-down menus, organize pop-up menus in the same = Left-align choice descriptions. Use mixed-case headline-style words to describe choices. Separate groups with a solid line the length of the longest choice description. Ifthe choice leads to a pop-up window, place an ellipsis after the choice description. ‘To separate the pop-up from the screen background: — Use a contrasting, but complementary background. — Incorporate a solid line border around the pull-down.5. Tear-off Menus © Proper usage: + A tear-off menu is a pull-down menu that can be positioned anywhere on the screen for constant referral. ‘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, but it may obscure the screen working area,6. Iconic Menus ™ Proper usage: * 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.Kinds of menus summary Menu Bar Pull-Down Menu Cascading Menu Pop-Up Menu ‘Tear-Off Menu Iconie Menu To identify and provide access to: + Common and frequently ured application actions. + Actions that take place in a wide variety of different window. For frequently used application actions that take place in a wide variety of different windows: + A.small number of items (5-10). + Items rarely changing in content, ‘To simplify a higher-level menu. To provide easier browsing of a higher For mutually exclusive choices. Restrict to 1-2 cascade: For + Frequent users. + Frequently used contextual commande, + A.small number of items. (5-10). + Items rarely changing in content. + Items that require a small amount of screen space. For items: + Sometimes frequently selected. + Sometimes infrequently selected, + Small in number (5-10). + Rarely changing in content. ‘Te designate applications available. To designate special functions within an application.1. File ‘Some Standard Functions Save Save As Print Preview Print Exit Default Menu Items 2. Edit ‘Some Standard Functions Undo cut Copy Paste Select All Find Replace 3. View ‘Some Standard Functions Toolbars Status Bar Magnify Zoom In Zoom Out Grid Points4, Window 5. Help Some Standard Funetions Some Standard Funetions = New Window = Contents = Arrange All = Search for Help On = Hide = Howto Use Help = Show m= About (Application)