Week 3 DEVELOP SYSTEM MENUS & NAVIGATION SCHEMES.

Week 3Week 3

DEVELOP SYSTEM MENUS DEVELOP SYSTEM MENUS & NAVIGATION SCHEMES& NAVIGATION SCHEMES

Step 4Step 4

DEVELOP SYSTEM MENUS DEVELOP SYSTEM MENUS & NAVIGATION SCHEMES& NAVIGATION SCHEMES

Step 4 OverviewStep 4 Overview The Structures of MenusThe Structures of Menus The Functions of MenusThe Functions of Menus The Content of MenusThe Content of Menus Formatting MenusFormatting Menus Writing MenusWriting Menus Navigation Using MenusNavigation Using Menus Web Site Navigation and LinksWeb Site Navigation and Links Types of Graphical MenusTypes of Graphical Menus

Step 4Step 4

MENUS & NAVIGATIONMENUS & NAVIGATION

Structures of MenusStructures of MenusSingle MenusSingle MenusSequential Linear MenusSequential Linear MenusSimultaneous MenusSimultaneous MenusHierarchical MenusHierarchical MenusConnected MenusConnected MenusEvent-Trapping MenusEvent-Trapping Menus

Step 4Step 4

MENUS & NAVIGATIONMENUS & NAVIGATION

Functions of MenusFunctions of Menus Navigation to a New MenuNavigation to a New Menu Execute an Action or ProcedureExecute an Action or Procedure Displaying InformationDisplaying Information Data or Parameter InputData or Parameter Input

Content of MenusContent of Menus ContextContext TitleTitle Choice DescriptionsChoice Descriptions Completion InstructionsCompletion Instructions

Step 4Step 4

FORMATTING OF MENUSFORMATTING OF MENUS

ConsistencyConsistency Provide consistency with the user’s expectationsProvide consistency with the user’s expectations Provide consistency in menu:Provide consistency in menu:

Formatting, including organization, presentation, and choice Formatting, including organization, presentation, and choice orderingordering

Phrasing, including titles, choice descriptions, and Phrasing, including titles, choice descriptions, and instructionsinstructions

Choice selection methodsChoice selection methods

Navigation schemes Navigation schemes

Step 4Step 4


DisplayDisplay If continual or frequent references to menu If continual or frequent references to menu

options are necessary:options are necessary: Permanently display the menu in an area of the Permanently display the menu in an area of the

screen that will not obscure other screen datascreen that will not obscure other screen data

If only occasional references to menu options If only occasional references to menu options are necessary:are necessary: The menu may be presented on demandThe menu may be presented on demand Critical options should be continuously displayedCritical options should be continuously displayed

Step 4Step 4


PresentationPresentation Ensure that a menu and its choices are obvious Ensure that a menu and its choices are obvious

to the user by presenting them with a unique and to the user by presenting them with a unique and consistent:consistent: StructureStructure Location and/or Location and/or Display TechniqueDisplay Technique

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

Step 4Step 4

FORMATTING OF MENUSFORMATTING OF MENUSOrganizationOrganization Provide a general or main menuProvide a general or main menu Display:Display:

All relevant alternativesAll relevant alternatives Only relevant alternativesOnly relevant alternatives

Delete or gray-out inactive choicesDelete or gray-out inactive choices Match the menu structure to the structure of the taskMatch the menu structure to the structure of the task

Organization to reflect the most efficient sequence of steps Organization to reflect the most efficient sequence of steps to accomplish frequent or likely goalsto accomplish frequent or likely goals

Minimize number of menu levels within limits of clarityMinimize number of menu levels within limits of clarity For Web sites, restrict it to two levels (requiring two mouse For Web sites, restrict it to two levels (requiring two mouse

clicks) for fastest performanceclicks) for fastest performance

Step 4Step 4

FORMATTING OF MENUSFORMATTING OF MENUSOrganization (Continued)Organization (Continued) Be conservative in the number of menu choices Be conservative in the number of menu choices

presented on a screen:presented on a screen: Without logical groupings of elements, limit Without logical groupings of elements, limit

choices to 4 to 8choices to 4 to 8 With logical groupings of elements, limit choices With logical groupings of elements, limit choices

to 18 to 24to 18 to 24 Provide decreasing direction menus, if sensibleProvide decreasing direction menus, if sensible Never require menus to be scrolledNever require menus to be scrolled Provide users with an easy way to restructure a Provide users with an easy way to restructure a

menu according to how work is accomplishedmenu according to how work is accomplished

Step 4Step 4

FORMATTING OF MENUSFORMATTING OF MENUSComplexityComplexity Provide both simple and complex menusProvide both simple and complex menus Simple: a minimal set of actions and menusSimple: a minimal set of actions and menus Complex: a complete set of actions and menusComplex: a complete set of actions and menusItem ArrangementItem Arrangement Align alternatives or choices into single columns Align alternatives or choices into single columns

whenever possiblewhenever possible Orient for top-to-bottom readingOrient for top-to-bottom reading Left-justify descriptionsLeft-justify descriptions

If a horizontal orientation of descriptions must be If a horizontal orientation of descriptions must be maintained:maintained:

Organize for left-to-right readingOrganize for left-to-right reading

Step 4Step 4

FORMATTING OF MENUSFORMATTING OF MENUSOrderingOrdering Order lists of choices by their natural order, orOrder lists of choices by their natural order, or For lists associated with numbers, use numeric orderFor lists associated with numbers, use numeric order For textual lists with a small number of options (seven or less), order by:For textual lists with a small number of options (seven or less), order by: Sequence of occurrenceSequence of occurrence Frequency of occurrenceFrequency of occurrence ImportanceImportance Semantic similaritySemantic similarity Use alphabetic order for:Use alphabetic order for:

Long lists (eight or more options)Long lists (eight or more options) Short lists with no obvious pattern or frequencyShort lists with no obvious pattern or frequency

Separate potentially destructive actions from frequently chosen itemsSeparate potentially destructive actions from frequently chosen items If option usage changes, do not reorder menusIf option usage changes, do not reorder menus Maintain a consistent ordering of options on all related menusMaintain a consistent ordering of options on all related menus Variable length menus, maintain relative positionsVariable length menus, maintain relative positions Fixed-length menus, maintain absolute positionsFixed-length menus, maintain absolute positions

Step 4Step 4

FORMATTING OF MENUSFORMATTING OF MENUSGroupingsGroupings Create groupings of items that are logical, distinctive, meaningful, and Create groupings of items that are logical, distinctive, meaningful, and

mutually exclusivemutually exclusive Categorize them in such a way as to:Categorize them in such a way as to:

Maximize the similarity of items within a categoryMaximize the similarity of items within a category Minimize the similarity of items across categoriesMinimize the similarity of items across categories

Present no more than 6 or 7 groupings Present no more than 6 or 7 groupings Order categorized groupings in a meaningful wayOrder categorized groupings in a meaningful way If meaningful categories cannot be developed and more than eight options If meaningful categories cannot be developed and more than eight options

must be displayed on a screen, create arbitrary visual groupings that:must be displayed on a screen, create arbitrary visual groupings that: Are of about 4 or 5 but never more than 7 optionsAre of about 4 or 5 but never more than 7 options Are of equal sizeAre of equal size

Separate groupings created through either:Separate groupings created through either: Wider spacing, or Thin ruled lineWider spacing, or Thin ruled line Provide immediate access to critical orProvide immediate access to critical or frequently chosen itemsfrequently chosen items

Step 4Step 4


Line SeparatorsLine Separators Separate vertically arrayed groupings with subtle solid Separate vertically arrayed groupings with subtle solid

lineslines Separate vertically arrayed subgroupings with subtle Separate vertically arrayed subgroupings with subtle

dotted or dashed linesdotted or dashed lines For subgroupings within a category:For subgroupings within a category:

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

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

For independent groupings:For independent groupings: Extend the line to the left and right menu bordersExtend the line to the left and right menu borders

Step 4Step 4

PHRASING THE MENUPHRASING THE MENU

A menu must communicate information about:A menu must communicate information about: The nature and purpose of the menu itselfThe nature and purpose of the menu itself The nature and purpose of each presented choiceThe nature and purpose of each presented choice How the proper choice or choices may be selectedHow the proper choice or choices may be selected

Step 4Step 4

PHRASING THE MENUPHRASING THE MENUMenu TitlesMenu Titles Main menu:Main menu:

Create a short, simple, clear, and distinctive title, describing Create a short, simple, clear, and distinctive title, describing the purpose of the entire series of choicesthe purpose of the entire series of choices

Submenus:Submenus: Submenu titles must be worded exactly the same as the Submenu titles must be worded exactly the same as the

menu choice previously selected to display themmenu choice previously selected to display them General:General:

Locate the title at the top of the listing of choicesLocate the title at the top of the listing of choices Spell out the title fully using either an:Spell out the title fully using either an:

Uppercase fontUppercase font Mixed-case font in the headline styleMixed-case font in the headline style

Superfluous titles may be omittedSuperfluous titles may be omitted

Step 4Step 4

PHRASING THE MENUPHRASING THE MENUMenu Choice DescriptionsMenu Choice Descriptions Create meaningful choice descriptions that are:Create meaningful choice descriptions that are:

FamiliarFamiliar Fully Spelled OutFully Spelled Out ConciseConcise DistinctiveDistinctive

Descriptions may be:Descriptions may be: Single WordsSingle Words Compound WordsCompound Words Multiple Words Multiple Words PhrasesPhrases

Exception: Menu bar items should be a single word (if possible)Exception: Menu bar items should be a single word (if possible) Place the keyword first, usually a verbPlace the keyword first, usually a verb Use the headline style, capitalizing the first letter of each significant Use the headline style, capitalizing the first letter of each significant

word in the choice descriptionword in the choice description Use task-oriented not data-oriented wording Use task-oriented not data-oriented wording

Step 4Step 4

PHRASING THE MENUPHRASING THE MENUMenu Choice Descriptions (Continued)Menu Choice Descriptions (Continued) Use parallel constructionUse parallel construction A menu choice must never have the same wording as its A menu choice must never have the same wording as its

menu titlemenu title Identical choices on different menus should be worded Identical choices on different menus should be worded

identicallyidentically Choices should not be numberedChoices should not be numbered

Exception: If the listing is numeric in nature, graphic, or a Exception: If the listing is numeric in nature, graphic, or a list of varying items, it may be numberedlist of varying items, it may be numbered

If menu options will be used in conjunction with a If menu options will be used in conjunction with a command language, the capitalization and syntax of the command language, the capitalization and syntax of the choices should be consistent with the languagechoices should be consistent with the language

Word choices as commands to the computerWord choices as commands to the computer

Step 4Step 4

PHRASING THE MENUPHRASING THE MENUMenu InstructionsMenu Instructions For novice or inexperienced users, provide menu For novice or inexperienced users, provide menu

completion instructionscompletion instructions Place the instructions in a position just preceding the part, or Place the instructions in a position just preceding the part, or

parts, of the menu to which they applyparts, of the menu to which they apply Left-justify the instruction and indent the related menu choice Left-justify the instruction and indent the related menu choice

descriptions to the rightdescriptions to the right Leave a space line, if possible, between the instructions and the Leave a space line, if possible, between the instructions and the

choice descriptionschoice descriptions Present instructions in a mixed-case font in the sentence stylePresent instructions in a mixed-case font in the sentence style For expert users, make these instructions easy to ignore by:For expert users, make these instructions easy to ignore by:

Presenting them in a consistent locationPresenting them in a consistent location Displaying them in a unique type style and/or colorDisplaying them in a unique type style and/or color

Step 4Step 4

PHRASING THE MENUPHRASING THE MENUIntent IndicatorsIntent Indicators Cascade Indicator:Cascade Indicator:

To indicate that selection of an item will lead to a submenu, To indicate that selection of an item will lead to a submenu, place a triangle or right-pointing solid arrow following the choiceplace a triangle or right-pointing solid arrow following the choice

A cascade indicator must designate every cascaded menuA cascade indicator must designate every cascaded menu To a Window Indicator:To a Window Indicator:

For choices that result in displaying a window to collect more For choices that result in displaying a window to collect more information, place an ellipsis (...) immediately following the information, place an ellipsis (...) immediately following the choicechoice

Exceptions—do not use when an action:Exceptions—do not use when an action: Displays a warning windowDisplays a warning window May or may not lead to a windowMay or may not lead to a window

Direct Action Items:Direct Action Items: For choices that directly perform an action, no special indicator For choices that directly perform an action, no special indicator

should be placed on the menushould be placed on the menu

Step 4Step 4


Keyboard EquivalentsKeyboard Equivalents To facilitate keyboard selection of a menu choice, each To facilitate keyboard selection of a menu choice, each

menu item should be assigned a keyboard equivalent menu item should be assigned a keyboard equivalent mnemonicmnemonic

The mnemonic should be the first character of the menu The mnemonic should be the first character of the menu item’s descriptionitem’s description

If duplication exists in first characters, use another If duplication exists in first characters, use another character in the duplicated item’s descriptioncharacter in the duplicated item’s description

Preferably choose the first succeeding consonantPreferably choose the first succeeding consonant Designate the mnemonic character by underlining itDesignate the mnemonic character by underlining it Use industry-standard keyboard access equivalents when they Use industry-standard keyboard access equivalents when they

existexist

Step 4Step 4


Keyboard AcceleratorsKeyboard Accelerators For frequently used items, provide a keyboard accelerator to For frequently used items, provide a keyboard accelerator to

facilitate keyboard selectionfacilitate keyboard selection The accelerator may be one function key or a combination of keysThe accelerator may be one function key or a combination of keys

Function key shortcuts are easier to learn than modifier plus letter Function key shortcuts are easier to learn than modifier plus letter shortcutsshortcuts

Pressing no more than two keys simultaneously is preferredPressing no more than two keys simultaneously is preferred Do not exceed three simultaneous keystrokesDo not exceed three simultaneous keystrokes

Use a plus (+) sign to indicate that two or more keys must be Use a plus (+) sign to indicate that two or more keys must be pressed at the same timepressed at the same time

Accelerators should have some associative value to the itemAccelerators should have some associative value to the item Identify the keys by their actual key top engravingIdentify the keys by their actual key top engraving

Step 4Step 4


Keyboard Accelerators (Continued)Keyboard Accelerators (Continued) If keyboard terminology differences exist, use:If keyboard terminology differences exist, use:

The most common keyboard terminologyThe most common keyboard terminology Terminology contained on the newest PCsTerminology contained on the newest PCs

Separate the accelerator from the item description by Separate the accelerator from the item description by three spacesthree spaces

Right-align the key descriptionsRight-align the key descriptions Do not use accelerators for:Do not use accelerators for:

Menu items that have cascaded menusMenu items that have cascaded menus Pop-up menusPop-up menus

Use industry-standard keyboard accelerators when they Use industry-standard keyboard accelerators when they existexist

Step 4Step 4

SELECTING MENU CHOICESSELECTING MENU CHOICES

Initial Cursor PositioningInitial Cursor Positioning If one option has a significantly higher probability If one option has a significantly higher probability

of selection, position the cursor at that optionof selection, position the cursor at that option If repeating the previously selected option has If repeating the previously selected option has

the highest probability of occurrence, position the highest probability of occurrence, position the cursor at this optionthe cursor at this option

If no option has a significantly higher probability If no option has a significantly higher probability of selection, position the cursor at the first optionof selection, position the cursor at the first option

Step 4Step 4

SELECTING MENU CHOICESSELECTING MENU CHOICESChoice SelectionChoice Selection Pointers:Pointers:

Select the choice by directly pointing at it with a mechanical device or Select the choice by directly pointing at it with a mechanical device or with one’s fingerwith one’s finger

Visually indicate:Visually indicate: Which options can be selectedWhich options can be selected When the option is under the pointer and selectableWhen the option is under the pointer and selectable

Visually distinguish single- and multiple-choicesVisually distinguish single- and multiple-choices If pointing with a mechanical device is used:If pointing with a mechanical device is used:

The selectable target area should be at least twice the size of the active The selectable target area should be at least twice the size of the active area of the pointing device,but not less than 6 mm squarearea of the pointing device,but not less than 6 mm square

Adequate separation must be provided between adjacent target areasAdequate separation must be provided between adjacent target areas If finger pointing is the selection method used:If finger pointing is the selection method used:

Touch area must be 20 to 30 mm squareTouch area must be 20 to 30 mm square The touch area must encompass the entire caption plus one character The touch area must encompass the entire caption plus one character

around itaround it

Step 4Step 4

SELECTING MENU CHOICESSELECTING MENU CHOICESChoice Selection (Continued)Choice Selection (Continued) Keyboard:Keyboard: If moving the cursor to a menu choice:If moving the cursor to a menu choice:

The up and down arrow keys should move the cursor up or The up and down arrow keys should move the cursor up or down vertically oriented menu optionsdown vertically oriented menu options

The left and right cursor keys should move the cursor left The left and right cursor keys should move the cursor left or right between horizontally oriented menu optionsor right between horizontally oriented menu options

If keying a choice identifier value within an entry field:If keying a choice identifier value within an entry field: Locate the entry field at the bottom of the last choice in the Locate the entry field at the bottom of the last choice in the

array of choicesarray of choices Uppercase, lowercase, and mixed -case typed entries Uppercase, lowercase, and mixed -case typed entries

should all be acceptableshould all be acceptable

Step 4Step 4


Choice Selection (Continued)Choice Selection (Continued) Selection/Execution:Selection/Execution:

Provide separate actions for selecting and executing menu Provide separate actions for selecting and executing menu optionsoptions

Indicate the selected choice through either:Indicate the selected choice through either: Highlighting it with a distinctive display techniqueHighlighting it with a distinctive display technique Modifying the shape of the cursorModifying the shape of the cursor

Permit unselecting choice before executionPermit unselecting choice before execution If a menu is multiple choice, permit all options to be selected If a menu is multiple choice, permit all options to be selected

before executionbefore execution Combining Techniques:Combining Techniques:

Permit alternative selection techniques, to provide flexibilityPermit alternative selection techniques, to provide flexibility

Step 4Step 4


DefaultsDefaults Provide a default whenever possibleProvide a default whenever possible Display as bold textDisplay as bold text

Unavailable ChoicesUnavailable Choices Unavailable choices should be dimmed or Unavailable choices should be dimmed or

“grayed out”“grayed out” Do not add or remove items from a menu unless Do not add or remove items from a menu unless

the user takes explicit action to so through the the user takes explicit action to so through the applicationapplication

Step 4Step 4

SELECTING MENU CHOICESSELECTING MENU CHOICESMark Toggles or SettingsMark Toggles or Settings Purpose:Purpose:

Use to designate that an item or feature is active or Use to designate that an item or feature is active or inactive over a relatively long period of timeinactive over a relatively long period of time

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

Guidelines:Guidelines: Position the indicator directly to the left of the optionPosition the indicator directly to the left of the option

For situations where several nonexclusive For situations where several nonexclusive choices may be selected:choices may be selected: Consider including one alternative that deselects all Consider including one alternative that deselects all

the items and reverts the state to the “normal” the items and reverts the state to the “normal” conditioncondition

Step 4Step 4


Toggled Menu ItemsToggled Menu Items Purpose:Purpose:

Use to designate two opposite commands that are accessed Use to designate two opposite commands that are accessed frequentlyfrequently

Use when the menu item displayed will clearly indicate that the Use when the menu item displayed will clearly indicate that the opposite condition currently existsopposite condition currently exists

Guidelines:Guidelines: Provide a meaningful, fully spelled-out description of the actionProvide a meaningful, fully spelled-out description of the action Begin with a verb that unambiguously represents the outcome of Begin with a verb that unambiguously represents the outcome of

the commandthe command Use mixed-case letters, with the first letter of each word Use mixed-case letters, with the first letter of each word

capitalizedcapitalized

Step 4Step 4

NAVIGATING MENUSNAVIGATING MENUSWeb Site Navigation ProblemsWeb Site Navigation Problems Technical Issues Technical Issues

Open-ended with many pathsOpen-ended with many paths Multiple different systems encounteredMultiple different systems encountered Rapid system evolvement and expansionRapid system evolvement and expansion

Usage IssuesUsage Issues Heavy mental overheadHeavy mental overhead Feelings of spatial disorientationFeelings of spatial disorientationNavigation GoalsNavigation Goals Must be obvious:Must be obvious:

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

Step 4Step 4

NAVIGATING MENUSNAVIGATING MENUSControlControl For multilevel menus, provide one simple action to:For multilevel menus, provide one simple action to:

Return to the next higher-level menuReturn to the next higher-level menu Return to the main menuReturn to the main menu

Provide multiple pathways through a menu hierarchy Provide multiple pathways through a menu hierarchy whenever possiblewhenever possible

Menu Navigation AidsMenu Navigation Aids To aid menu navigation and learning, provide an easily To aid menu navigation and learning, provide an easily

accessible:accessible: Menu map or overview of the menu hierarchyMenu map or overview of the menu hierarchy A “look ahead” at the next level of choices, alternatives that will A “look ahead” at the next level of choices, alternatives that will

be presented when a currently viewed choice is selectedbe presented when a currently viewed choice is selected Navigation historyNavigation history

Step 4Step 4

WEB NAVIGATIONWEB NAVIGATION

Web Site OrganizationWeb Site Organization Divide content into logical fragments, units, or Divide content into logical fragments, units, or

chunkschunks Establish a hierarchy of generality or importanceEstablish a hierarchy of generality or importance Structure the relationships among content Structure the relationships among content

fragments, units, or chunksfragments, units, or chunks Establish global or site-wide navigation Establish global or site-wide navigation

requirementsrequirements Create a well-balanced hierarchical treeCreate a well-balanced hierarchical tree

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

Step 4Step 4

COMPONENTS OF A WEB COMPONENTS OF A WEB NAVIGATION SYSTEMNAVIGATION SYSTEM

AllAll navigation controls must:navigation controls must: Make sense in the absence of site contextMake sense in the absence of site context Be continually availableBe continually available Be obvious and distinctiveBe obvious and distinctive Be consistent in appearance, function, and Be consistent in appearance, function, and

orderingordering Possess a textual label or descriptionPossess a textual label or description Offer multiple navigation pathsOffer multiple navigation paths

Step 4Step 4

WEB NAVIGATION COMPONENTWEB NAVIGATION COMPONENTBrowser Command ButtonsBrowser Command Buttons Hide the split between the browser and the Web site application by Hide the split between the browser and the Web site application by

including navigational controls within the applicationincluding navigational controls within the applicationWeb Site Navigation BarsWeb Site Navigation Bars Provide a global navigation bar at the top of each pageProvide a global navigation bar at the top of each page Provide a local category or topical links navigation bar on the left Provide a local category or topical links navigation bar on the left

side of a pageside of a page Place minor illustrative, parenthetical, or footnote links at the end of Place minor illustrative, parenthetical, or footnote links at the end of

the pagethe page For long pages, provide a navigation bar repeating important global For long pages, provide a navigation bar repeating important global

or local links at the page bottomor local links at the page bottom Include:Include: Textual Phrase Links:Textual Phrase Links:

In explicit menusIn explicit menus Embedded within page textEmbedded within page text

Graphical Images or IconsGraphical Images or Icons Command ButtonsCommand Buttons

Step 4Step 4

OTHER NAVIGATION ELEMENTSOTHER NAVIGATION ELEMENTS

OverviewsOverviews Provide:Provide:

Executive Summary Executive Summary Providing a preview of the site and contains links to all major Providing a preview of the site and contains links to all major

conceptsconcepts Site Map Site Map

Illustrating the site’s hierarchical structure and the relationships of Illustrating the site’s hierarchical structure and the relationships of componentscomponents

Global and Local MapsGlobal and Local Maps Alphabetized Site IndexAlphabetized Site Index Table of ContentsTable of Contents

Allow accessibility from any point in the Web siteAllow accessibility from any point in the Web site

Step 4Step 4

OTHER NAVIGATION ELEMENTSOTHER NAVIGATION ELEMENTS

Historical TrailsHistorical Trails Provide:Provide:

Breadcrumb TrailsBreadcrumb TrailsLocate at the top of the page below the navigation linksLocate at the top of the page below the navigation links

History ListsHistory Lists History TreesHistory Trees FootprintsFootprints BookmarksBookmarks

Search FacilitySearch Facility Provide a search facilityProvide a search facility

Step 4Step 4

WEB NAVIGATION GUIDELINESWEB NAVIGATION GUIDELINESScrollingScrolling Do not require scrolling of navigation-only pagesDo not require scrolling of navigation-only pages Minimize the need for scrolling to view all links on pages containing Minimize the need for scrolling to view all links on pages containing

contentcontent Never require horizontal scrollingNever require horizontal scrollingNumber of LinksNumber of Links Every page should contain at least one linkEvery page should contain at least one link Be conservative in the total number of links presented on a screen:Be conservative in the total number of links presented on a screen:

Without logical groupings of elements, limit links to 4 to 8Without logical groupings of elements, limit links to 4 to 8 With logical groupings of elements, limit links to With logical groupings of elements, limit links to

18 to 2418 to 24 Restrict embedded links to those most important, pertinent, and Restrict embedded links to those most important, pertinent, and

interestinginteresting Place less relevant links in a listingPlace less relevant links in a listing

Step 4Step 4

WEB NAVIGATION GUIDELINESWEB NAVIGATION GUIDELINESPresenting LinksPresenting Links Link Text:Link Text:

Underline all link text, including that:Underline all link text, including that: Embedded in page contentEmbedded in page content Contained in explicit menu listingsContained in explicit menu listings Contained in headingsContained in headings Used as graphical labelsUsed as graphical labels

Distinguish between unselected/unvisited links and Distinguish between unselected/unvisited links and selected/visited linksselected/visited links

Make unselected/unvisited links blueMake unselected/unvisited links blue Make selected/visited links purpleMake selected/visited links purple

Kinds of Links:Kinds of Links: Distinguish links leading to different Web destinations through a Distinguish links leading to different Web destinations through a

differentiating symbol:differentiating symbol: Precede links to content within the same page with a pound sign (#)Precede links to content within the same page with a pound sign (#)

For links moving down in a page use #For links moving down in a page use # For links moving up in the page use #^For links moving up in the page use #^

Step 4Step 4

WEB NAVIGATION GUIDELINESWEB NAVIGATION GUIDELINES

Kinds of Links (Continued):Kinds of Links (Continued): Precede links to external or foreign sites with another Precede links to external or foreign sites with another

unique symbol such as asterisk (*)unique symbol such as asterisk (*) Do not precede links to other site pages with any symbolDo not precede links to other site pages with any symbol Also distinguish links leading to different Web Also distinguish links leading to different Web

destinations by presenting them in consistent locationsdestinations by presenting them in consistent locations Graphical Links:Graphical Links:

Distinguish graphical links from decorative graphics through:Distinguish graphical links from decorative graphics through: Underlining graphical text labelsUnderlining graphical text labels

Links in Toolbars:Links in Toolbars: Distinguish links contained in toolbars through:Distinguish links contained in toolbars through:

Presenting in consistent locationsPresenting in consistent locations Using different colored backgroundsUsing different colored backgrounds

Step 4Step 4


Other Link GuidelinesOther Link Guidelines Writing:Writing:

Provide links to satisfy a range of user needsProvide links to satisfy a range of user needs Create descriptive links clearly indicating their destination or Create descriptive links clearly indicating their destination or

resulting actionresulting action Grouping:Grouping:

Group links by the most relevant menu-grouping schemeGroup links by the most relevant menu-grouping scheme Separate visually the following types of navigation:Separate visually the following types of navigation:

Upward to the immediate parent pageUpward to the immediate parent page Upward to the beginning of the section or category of informationUpward to the beginning of the section or category of information Across to main sections or categories of informationAcross to main sections or categories of information To basic utilitiesTo basic utilities

Step 4Step 4


Other Link Guidelines (Continued)Other Link Guidelines (Continued) Ordering:Ordering:

Order links by the most relevant menu choice-ordering schemeOrder links by the most relevant menu choice-ordering scheme Heading:Heading:

Where appropriate, provide a listing heading describing the Where appropriate, provide a listing heading describing the organizing category, principle, or themeorganizing category, principle, or theme

Size:Size: Provide graphical images and command buttons of sufficient and Provide graphical images and command buttons of sufficient and

equal sizeequal size Spacing:Spacing:

Create equal spacing between choices graphical image and Create equal spacing between choices graphical image and textual listing toolbarstextual listing toolbars

Inapplicability:Inapplicability: Disable and display dimmed links conditionally not applicableDisable and display dimmed links conditionally not applicable

Step 4Step 4


Kinds of LinksKinds of Links Links Within a Page:Links Within a Page:

For long pages, include links to internal page content For long pages, include links to internal page content (bookmarks)(bookmarks)

Links Within a Web Site:Links Within a Web Site: On all pages include links to:On all pages include links to: The Web site home pageThe Web site home page

Global Web site featuresGlobal Web site features Other main pages, navigation points, or categoriesOther main pages, navigation points, or categories The likely Web site starting pointThe likely Web site starting point Main pages with links to the pageMain pages with links to the page

On sequential pages, include links to the:On sequential pages, include links to the: Next pageNext page Previous pagePrevious page

Step 4Step 4


Links Within a Web Site (Continued):Links Within a Web Site (Continued): Also consider including links to:Also consider including links to:

Places of related interestPlaces of related interest Important pagesImportant pages

Background or explanatory informationBackground or explanatory information Supplemental informationSupplemental information

New or changed contentNew or changed content Web site Quit or ExitWeb site Quit or Exit

External Links:External Links: Most appropriate for informational sitesMost appropriate for informational sites Provide links to relevant information on other sitesProvide links to relevant information on other sites

Related contentRelated content Reference informationReference information

- Background reading- Background reading Place external links on a separate pagePlace external links on a separate page Provide an indication when a link goes outside the current site Provide an indication when a link goes outside the current site

Step 4Step 4


Link MaintenanceLink Maintenance

Maintain correct internal linksMaintain correct internal links Frequently check and correct external linksFrequently check and correct external links

Step 4Step 4

MAINTAINING A SENSE OF PLACEMAINTAINING A SENSE OF PLACE

Design Characteristics That Aid in Maintaining Design Characteristics That Aid in Maintaining a Sense of Placea Sense of Place

To assist maintaining a sense of place within a To assist maintaining a sense of place within a Web site:Web site: Provide a simple hierarchical tree structureProvide a simple hierarchical tree structure Provide ease of movement to important site featuresProvide ease of movement to important site features

To assist maintaining a sense of place across multiple Web To assist maintaining a sense of place across multiple Web sites:sites:

Provide consistency in all Web site design elements, including:Provide consistency in all Web site design elements, including:

Graphical identity schemesGraphical identity schemes Component presentationComponent presentation Component organization and locationComponent organization and location

Step 4Step 4

MAINTAINING A SENSE OF PLACEMAINTAINING A SENSE OF PLACE

Design Elements That Aid in Maintaining a Sense of PlaceDesign Elements That Aid in Maintaining a Sense of Place Provide a home baseProvide a home base Use recurring navigation tools on all pagesUse recurring navigation tools on all pages Use recurring elements on all pagesUse recurring elements on all pages Provide page numbers for sequential pagesProvide page numbers for sequential pages Provide ongoing feedback that shows where users are in a siteProvide ongoing feedback that shows where users are in a site Provide on-demand aids that illustrate the user’s location within a Provide on-demand aids that illustrate the user’s location within a

sitesite Site mapsSite maps Table of contentsTable of contents

Provide clearly written link labelsProvide clearly written link labels

Step 4Step 4

KINDS OF GRAPHICAL MENUSKINDS OF GRAPHICAL MENUS

Considerations in Choosing a MenuConsiderations in Choosing a Menu The number of items to be presented in the menuThe number of items to be presented in the menu How often the menu is usedHow often the menu is used How often the menu contents may changeHow often the menu contents may change

Overview of Menu KindsOverview of Menu Kinds Menu BarMenu Bar Pull-Down MenuPull-Down Menu Cascading MenusCascading Menus Pop-Up MenusPop-Up Menus Tear-Off MenusTear-Off Menus Iconic MenusIconic Menus Pie MenusPie Menus

Step 4Step 4

MENU BARSMENU BARSProper UsageProper Usage To identify and provide access to:To identify and provide access to:

Common and frequently used application actions Common and frequently used application actions Actions that take place in a wide variety of different windowsActions that take place in a wide variety of different windows

A menu bar choice by itself should not initiate an actionA menu bar choice by itself should not initiate an actionDesign Guideline OverviewDesign Guideline Overview Advantages & DisadvantagesAdvantages & Disadvantages DisplayDisplay LocationLocation TitleTitle Item DescriptionsItem Descriptions OrganizationOrganization LayoutLayout SeparationSeparation Other ComponentsOther Components Selection IndicationSelection Indication

Step 4Step 4

PULL-DOWN MENUSPULL-DOWN MENUS

Proper UsageProper Usage To initiate frequently used application actions that take place on a wide variety of To initiate frequently used application actions that take place on a wide variety of

different windowsdifferent windows For a small number of itemsFor a small number of items For items best represented textuallyFor items best represented textually For items whose content rarely changesFor items whose content rarely changes

Design Guideline OverviewDesign Guideline Overview- Advantages & Disadvantages- Advantages & Disadvantages

- Display- Display - Mark Toggles or Settings- Mark Toggles or Settings

- Location- Location - To Another Pull-Down- To Another Pull-Down

- Size- Size - To a Window - To a Window

- Title- Title - Keyboard Equivalents- Keyboard Equivalents

- Item Descriptions- Item Descriptions - Keyboard Accelerators- Keyboard Accelerators

- Organization- Organization - Separation- Separation

- Layout- Layout - Selection Cursor- Selection Cursor

- Groupings- Groupings

Step 4Step 4

CASCADING MENUSCASCADING MENUSProper UsageProper Usage To reduce the number of choices presented together for selection (reduce To reduce the number of choices presented together for selection (reduce

menu breadth)menu breadth) When a menu specifies many alternatives and the alternatives can be When a menu specifies many alternatives and the alternatives can be

grouped in meaningful related sets on a lower-level menugrouped in meaningful related sets on a lower-level menu When a choice leads to a short, fixed list of single-choice propertiesWhen a choice leads to a short, fixed list of single-choice properties When there are several fixed sets of related optionsWhen there are several fixed sets of related options To simplify a menuTo simplify a menu Restrict to 1-2 cascadesRestrict to 1-2 cascades Avoid using for frequent, repetitive commandsAvoid using for frequent, repetitive commandsDesign Guideline OverviewDesign Guideline Overview Advantages & DisadvantagesAdvantages & Disadvantages Cascade IndicatorCascade Indicator LocationLocation LevelsLevels TitleTitle Other GuidelinesOther Guidelines

Step 4Step 4

POP-UP MENUSPOP-UP MENUSProper UsageProper Usage To present alternatives or choices within the context of the task for:To present alternatives or choices within the context of the task for:

Frequent usersFrequent users Frequently used contextual commandsFrequently used contextual commands A small number of items (5-10)A small number of items (5-10) Items rarely changing in contentItems rarely changing in content Items requiring small amount of screen spaceItems requiring small amount of screen space

Design Guideline OverviewDesign Guideline Overview Advantages & DisadvantagesAdvantages & Disadvantages DisplayDisplay LocationLocation SizeSize TitleTitle Other GuidelinesOther Guidelines

Step 4Step 4

TEAR-OFF MENUSTEAR-OFF MENUS

Proper UsageProper Usage A Pull-Down menu that can be positioned anywhere on A Pull-Down menu that can be positioned anywhere on

the screen for continuing referral the screen for continuing referral (Floating or docking)(Floating or docking) For Items:For Items:

Sometimes frequently selectedSometimes frequently selected Sometimes infrequently selectedSometimes infrequently selected Small in number (5-10)Small in number (5-10) Rarely changing in contentRarely changing in content

Design Guideline OverviewDesign Guideline Overview Follow all relevant guidelines for pull-down menusFollow all relevant guidelines for pull-down menus

Step 4Step 4

ICONIC MENUSICONIC MENUS

Proper UsageProper Usage To remind users of the functions, commands, To remind users of the functions, commands,

attributes, or application choices availableattributes, or application choices available

Design Guideline OverviewDesign Guideline Overview Create icons that:Create icons that:

Help enhance recognition and hasten option selectionHelp enhance recognition and hasten option selection Are concrete and meaningfulAre concrete and meaningful Clearly represent choicesClearly represent choices

Step 4Step 4

PIEPIE MENUSMENUS

Proper UsageProper UsageConsider using for:Consider using for:

Mouse-driven selections, with one- or two-Mouse-driven selections, with one- or two-level hierarchieslevel hierarchies

Step 4Step 4

DEFAULT MENU ITEMSDEFAULT MENU ITEMS

FileFile Provides all the commands needed to open, create, and save filesProvides all the commands needed to open, create, and save files

EditEdit Provides commands that affect the state of selected objectsProvides commands that affect the state of selected objects

ViewView Provides commands that affect the perspective, details, and Provides commands that affect the perspective, details, and

appearance of the applicationappearance of the application Affect the view, not the data itselfAffect the view, not the data itself

WindowWindow Provides commands to manipulate entire windowsProvides commands to manipulate entire windows

HelpHelp Provides Help commandsProvides Help commands

Step 4Step 4

FUNCTIONS NOT FUNCTIONS NOT REPRESENTED BY DEFAULTSREPRESENTED BY DEFAULTS

LabelsLabels General:General:

Provide a label for each commandProvide a label for each command Use labels that indicate:Use labels that indicate:

The purpose of the command, orThe purpose of the command, or The result of what happens when the command is selectedThe result of what happens when the command is selected

Use familiar, short, clear, concise wordsUse familiar, short, clear, concise words Use distinctive wordingUse distinctive wording Use mixed case, with the first letter capitalizedUse mixed case, with the first letter capitalized Begin commands with verbs or adjectives, not nounsBegin commands with verbs or adjectives, not nouns Preferably, use only one wordPreferably, use only one word

If multiple words are required for clarity, capitalize first letter of each If multiple words are required for clarity, capitalize first letter of each significant wordsignificant word

Do not use sentences as labelsDo not use sentences as labels

Step 4Step 4


Labels - General (Continued):Labels - General (Continued): Provide an ellipsis (...) to indicate that another window will result Provide an ellipsis (...) to indicate that another window will result

from selection of a commandfrom selection of a command Do not use the ellipsis when the following window is a confirmation or Do not use the ellipsis when the following window is a confirmation or

warningwarning Dynamic labels:Dynamic labels:

As contexts change, dynamically change the label wording to make As contexts change, dynamically change the label wording to make meaning clearer in new contextmeaning clearer in new context

For example, after a cut operation, Undo may be changed to Undo CutFor example, after a cut operation, Undo may be changed to Undo Cut

Disabled CommandsDisabled Commands When a command is not available, indicate its disabled status by When a command is not available, indicate its disabled status by

displaying it grayed out or subdueddisplaying it grayed out or subdued If selection of a disabled command is attempted, provide a message If selection of a disabled command is attempted, provide a message

in the information area that the “Help” function will explain why it is in the information area that the “Help” function will explain why it is disableddisabled

Step 4Step 4


Navigation and SelectionNavigation and Selection General:General:

Permit multiple methods for selecting commandsPermit multiple methods for selecting commands Keyboard equivalents:Keyboard equivalents:

Assign a meaningful mnemonic for each commandAssign a meaningful mnemonic for each command Use the first letter of the command, or if duplications exist,Use the first letter of the command, or if duplications exist, The first letter of another word in, orThe first letter of another word in, or Another significant consonantAnother significant consonant

For standard commands, use mnemonics provided by For standard commands, use mnemonics provided by the tool setthe tool set

Keyboard accelerators:Keyboard accelerators: Assign keyboard accelerators for frequently used commandsAssign keyboard accelerators for frequently used commands For standard commands, use keyboard accelerators provided by For standard commands, use keyboard accelerators provided by

the tool set the tool set

Week 3 DEVELOP SYSTEM MENUS & NAVIGATION SCHEMES.

Documents

Transcript of Week 3 DEVELOP SYSTEM MENUS & NAVIGATION SCHEMES.