Copyright 1999 all rights reserved Menus n Overview n Design guidelines n Types of menus.

Copyright 1999 all rights reserved

MenusMenus

OverviewOverview

Design guidelinesDesign guidelines

Types of menusTypes of menus


OverviewOverview

DefinitionDefinition Basic menus typesBasic menus types Advantages and Advantages and

disadvantagesdisadvantages


OverviewOverview

WhatWhat is a menu? is a menu? WhyWhy do we use menus? do we use menus? WhenWhen should we use should we use

them?them?

?


What is a Menu?What is a Menu?

A list of options from which a A list of options from which a user selects a desired choiceuser selects a desired choice– Generally presented as textGenerally presented as text– May allow selection by keyboard or May allow selection by keyboard or

pointing devicepointing device Allow users to work by Allow users to work by

recognition instead of recall recognition instead of recall memorymemory


Menus in MS WindowsMenus in MS WindowsFile Edit View Insert Format Help

New...Open...Close

SaveSave As... Cut

CopyPaste

Menu bar

Pull-downMenu

Pop-upMenu

Send to > Mail recipient…Routing recipient...

CascadingMenu


Menu-driven ApplicationsMenu-driven Applications

1. Purchasing Reports2. Sales Reports3. Purchasing Data Entry4. Sales Data Entry5. System Administration

Type a selection and press <Enter> __ (1 - 5)

Whizz Co Reporting System


Advantages of MenusAdvantages of Menus

Reduced training needReduced training need– Tells user what can be done and how to do Tells user what can be done and how to do

itit Reduced memory loadReduced memory load Reduced keystrokesReduced keystrokes Easier error handlingEasier error handling

– User choices are constrainedUser choices are constrained Enhancements are visibleEnhancements are visible

– Command line addition is invisibleCommand line addition is invisible


Disadvantages of MenusDisadvantages of Menus Sometimes less efficientSometimes less efficient

– especially with deep menu structuresespecially with deep menu structures– can be tedious for expert userscan be tedious for expert users

Less flexibleLess flexible– allows only certain sequences of allows only certain sequences of

selections selections Impractical for large sets of choicesImpractical for large sets of choices Uses more space than command lineUses more space than command line

– screen space is scarcescreen space is scarce


Design guidelinesDesign guidelines

Menu structureMenu structure Menu choicesMenu choices Menus in actionMenus in action


Menu StructureMenu Structure

Match structure to user tasksMatch structure to user tasks– not system data or internal structurenot system data or internal structure

Provide a main menuProvide a main menu– what is the main menu for MS what is the main menu for MS

Windows?Windows? Allow for customizationAllow for customization

– not all users work the same waynot all users work the same way


Depth Vs. BreadthDepth Vs. Breadth

Deep

Many levels

Broad

Many choices at one level


Depth Vs. BreadthDepth Vs. Breadth Fewer levels is usually betterFewer levels is usually better

– Although depth can provide isolationAlthough depth can provide isolation Breadth within a levelBreadth within a level

– 4-8 choices without grouping4-8 choices without grouping– 9 or more with grouping9 or more with grouping– Larger numbers in special casesLarger numbers in special cases

• expert user; simple choices; logical groupingexpert user; simple choices; logical grouping

Decreasing direction is usually betterDecreasing direction is usually better– Fewer choices at deeper levelsFewer choices at deeper levels


Menu ChoicesMenu Choices

Present text choices verticallyPresent text choices vertically– Left-justify textLeft-justify text

Provide choice descriptors for Provide choice descriptors for complex systemscomplex systems– Look ahead - Look ahead - shows next lower menu shows next lower menu

when cursor passes over choicewhen cursor passes over choice– Micro-help - Micro-help - brief menu description in brief menu description in

pop-up or status barpop-up or status bar


Wording Menu ChoicesWording Menu Choices

Clear, common meaningClear, common meaning– vocabulary of the uservocabulary of the user

Single, Single, distinctdistinct words or short words or short phrasesphrases

Grammatical consistencyGrammatical consistency– key word firstkey word first– parallel constructionparallel construction


Wording Menu ChoicesWording Menu Choices__List all requirements for major__Courses offered by term__Suggested schedule to complete requirement__Help

__List requirements__Search courses offerings__Build schedule__Help

VS.VS.


Ordering Menu ChoicesOrdering Menu Choices Do what makes senseDo what makes sense

– Common conventionCommon convention• Example: months of the yearExample: months of the year

– Frequency of expected useFrequency of expected use– Order of expected useOrder of expected use– Alphabetic / FunctionalAlphabetic / Functional

• Especially for long lists with Especially for long lists with no obvious orderno obvious order

• Order depends on type of Order depends on type of expected useexpected use

JanuaryFebruaryMarchApril

StandardFormattingAnimationCommon TasksControl ToolboxDrawingPicturesReviewingVisual BasicWeb

Toolbars >


Ordering Menu ChoicesOrdering Menu Choices

Separate destructive Separate destructive choices from other choices choices from other choices – especially from common especially from common

choiceschoices Use consistent ordering on Use consistent ordering on

related menusrelated menus Use separators to identify Use separators to identify

groups groups

New...Open...Close

SaveSave As...

Send to >


Additional IndicatorsAdditional Indicators

Do Do notnot use cascade or dialog indicators use cascade or dialog indicators if selection if selection sometimessometimes produces direct action produces direct action

New...Open...Close

SaveSave As...

Send to >

Direct Action

Cascade

DialogNew...Open...Close

SaveSave As...

Send to >

Direct Action

Cascade

DialogNew...Open...Close

SaveSave As...

Send to >


Menus in ActionMenus in Action

Choice selectionChoice selection Keyboard supportKeyboard support TogglesToggles


Choice SelectionChoice Selection Provide defaults if sensibleProvide defaults if sensible

– Last or most frequent choiceLast or most frequent choice Highlight current choice Highlight current choice Indicate unavailable choicesIndicate unavailable choices

– ““Grayed out”Grayed out”– Removed from menuRemoved from menu

• general rule: do general rule: do notnot remove choicesremove choices

Make choices large enough to selectMake choices large enough to select

Unavailable

New...Open...Close

Send to >

SaveSave As...

PrintCurrentChoice


TogglesToggles

Toggled marks on choicesToggled marks on choices– Multiple choices that can Multiple choices that can

be active or inactivebe active or inactive Toggled choicesToggled choices

– Mutually exclusive choicesMutually exclusive choices– Wording change adds to Wording change adds to

clarityclarity

Standard Formatting Animation Drawing Pictures

Toolbars >

Hide Grid Show Grid


Keyboard SupportKeyboard Support

Goal: always provide keyboard Goal: always provide keyboard supportsupport– Expert usersExpert users

– Motor skill problemsMotor skill problems

– Cramped or grimy placesCramped or grimy places• Factory floorFactory floor

• PortablesPortables


Keyboard SupportKeyboard Support

Keyboard equivalentsKeyboard equivalents– ““Access keys”Access keys”

Keyboard acceleratorsKeyboard accelerators– ““Shortcut” or “hot” keysShortcut” or “hot” keys

NormalBold Ctrl+BItalic Ctrl+IUnderline Ctrl+U


Other ConsiderationsOther Considerations

Supporting expert usersSupporting expert users Alternate menu structuresAlternate menu structures Alternate menus stylesAlternate menus styles Using existing menusUsing existing menus


Supporting Expert UsersSupporting Expert Users

Provide keyboard supportProvide keyboard support Support direct screen accessSupport direct screen access

– Type-ahead for successive menu Type-ahead for successive menu choiceschoices

– Menu screen names for direct accessMenu screen names for direct access– Keystroke macrosKeystroke macros

Provide alternate menu systemsProvide alternate menu systems– ““standard” and “advanced”standard” and “advanced”

Provide menu customization optionsProvide menu customization options


Alternate Menu StructuresAlternate Menu Structures

Hierarchical Linear Networked


Alternate Menu StylesAlternate Menu Styles Other menu styles existOther menu styles exist

– and menus will probably evolveand menus will probably evolve Example: pie menusExample: pie menus

– Shallow hierarchyShallow hierarchy– Small set of choicesSmall set of choices– MarksMarks

• Stylus / pensStylus / pens• Hand-held computersHand-held computers• DrawingDrawing

Red Blue

Green

Pale

Light

Med

Dark


Use Existing MenusUse Existing Menus

Reduces development timeReduces development time Reduces user learningReduces user learning Consider:Consider:

– menu style and structuremenu style and structure– menu choice namesmenu choice names

Warning!Warning!– Do Do notnot force a fit force a fit

• Do not bend the meaning of menu optionsDo not bend the meaning of menu options

Don’t reinventDon’t reinventthe wheelthe wheel


SummarySummary

Menus are a widely used interface Menus are a widely used interface stylestyle– lots of good reasons whylots of good reasons why

Menus are not a perfect choiceMenus are not a perfect choice– know what the tradeoffs areknow what the tradeoffs are

Good menus require a lot Good menus require a lot of careful thoughtof careful thought– and a good bit of testingand a good bit of testing

Copyright 1999 all rights reserved Menus n Overview n Design guidelines n Types of menus.

Documents

Transcript of Copyright 1999 all rights reserved Menus n Overview n Design guidelines n Types of menus.