1. Develop System Menus and Navigation Schemes

2. Structures of Menus
Menus vary in form from very simple to very complex.
They may range from small dialog boxes requesting the user to choose between one of two alternatives, to hierarchical tree schemes with many branches and level of depth.
A menu’s structure defines the amount of control given to the user in performing a task

3. Single Menus
A single screen or window is presented to seek the user’s input or request an action to be performed
Novice
Intermediate
Expert

4. Sequential Linear Menus
Sequential linear menus are presented on a series of screens possessing only one path.
Menu 3
Menu 2
Menu 1
Choice 1
Choice 2
Choice 3

5. Simultaneous Menus
Instead of being presented on separate screens, all menu options are available simultaneously.

6. 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
Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
Menu 6
Menu 7
Menu 8

7. Connected Menus
This menu gives you a full control over the navigation flow
Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
Menu 6
Menu 7
Menu 8
Menu 9

8. Event-Trapping Menus
Event Trapping menus provide an ever-present background of control over the system’s state and parameters while the user is working on a foreground task.
Event-trapping menus generally serve one of three functions.
(1) They may immediately change some parameter in the current environment (bold a piece of text),
(2) They may take the user out of the current environment to perform a function without leaving the current environment (perform a spell check)
(3) They may exit the current environment and allow the user to move to a totally new environment (Exit).

9. Functions of Menus Navigation to a New Menu
Execute an Action or Procedure
Displaying Information
Data or Parameter Input

10. Content of Menus Menu Context
Provides information to keep the user oriented
Menu Title
Provides the context for the current set of choices
Choice Descriptions:
Descriptions can range from a mnemonic, numeric or alphabetized listing
Completion Instructions
Tell users how to indicate their choices

11. Formatting of Menus Consistency Display Presentation
Provide consistency in menu
Organization, presentation, and choice ordering
Display
Frequent references
Permanently display the menu in an area of the screen that will not obscure other screen data
Occasional references (presented on demand)
Presentation
Should be obvious with a unique and consistent structure

12. Formatting of Menus(contd..)
Organization
Provide a main menu
Display
All relevant alternatives (gray-out inactive choices)
Minimize number of menu levels
Number of menu choices presented on a screen
4-8 choices without logical grouping of elements
18-24 choices with logical groupings of elements with no more than 10 items within a group
Never require menus to be scrolled

13. Formatting of Menus(contd..)
Complexity
Provide both simple and complex menus
Item Arrangement
Orient for top-to-bottom reading
Left justify descriptions
Organize for left to right reading
Ordering
Numeric order
Sequence/Frequency of occurrence
Importance
Semantic similarity

14. Groupings
Create grouping of items that are logical, unique, meaningful and mutually exclusive
Present no more than six or seven groupings on screen
Separate grouping created through either
Wider spacing, or a thin ruled line
Provide immediate access to critical or frequently chosen items

15. Line Separators
Separate vertically arrayed groupings with subtle solid lines.
Separate vertically arrayed subgroupings with subtle dotted or dashed lines.
For subgroupings within a category:
Left-justify the lines under the first letter of the columnized choice descriptions.
Right-justify the lines under the last character of the longest choice description.
For independent groupings:
Extend the line to the left and right menu borders.

17. Phrasing the Menu
Menu Titles: Should be Short, Simple, Distinctive title
Menu Choice Description:
Can be single, compound or multiple words.
Use task-oriented not data-oriented wording.
Must never use the same wording as its menu title.
Identical choices on different menus should be worded identically.
Keyboard Accelerators
Ctrl+B or (Ctrl+B)
Keyboard Equivalents
Normal, Bold, Italic

18. Intent Indicators
To a cascade indicator: place a triangle or right- pointing solid arrow following the choice
To a window indicator: place ellipsis (...) immediately follow the choice
Window indicator
Cascade indicator

19. Selecting Menu Choices
Initial Cursor Positioning
Choice Selection
Pointers
Keyboards
Selection/Execution
Combining techniques
Defaults
Provide a default whenever possible (as Bold Text)
Unavailable Choices
Should be dimmed or “grayed out”

20. Kinds of Graphical Menus
Menu Bar
Pull-Down Bar
Cascading Menu Bar
Pop-Up Menu
Iconic Menu

21. Menu Bar Advantage Disadvantage Always visible Easy to browse
Do not obscure the screen working area
Allow for use of keyboard equivalents
Disadvantage
Consume a full row of screen space
Require looking away from the main working area to find
Require moving pointer from the main working area to select
Horizontal orientation is less efficient for scanning

22. Pull-Down Menu Proper Usage Advantages Disadvantage
A small number of items
Items best represented textually
Items whose content rarely changes
Advantages
No window space is consumed when they are not used
Allow for display of both keyboard equivalents and accelerators
Vertical orientation permits more choices to be displayed
Disadvantage
Require searching and selecting
Require moving the pointer out of working area to select
May obscure the screen working area

23. Cascading Menus

24. Advantage: Disadvantage
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
Disadvantage
Access to submenu items requires more steps
Access to submenu items require a change in pointer movement

25. Pop-up Menus
Choices may be also presents alternatives or choices within the context of the task
Pop-up menus may be requested when the mouse pointer is positioned over a designated or hot area of screen (a window border) or over a designed icon
Advantage
They do not use window space when not displayed
They appear in the working area
Disadvantage
They existence must be learned and remembered
May obscure the screen working area
Require a special action to see the menu (Mouse click)

26. Iconic Menus
Use to remind user of the functions, commands, application choices
Create icons that
Help enhance recognition and hasten option selection
Meaningful and clearly represent choices

27. Select the Proper Kinds of Windows
A window is an area of the screen, usually rectangular in shape, defined by a border that contains a particular view of some area of the computer or some portion of a person’s dialog with the computer
A window’s characteristics.
A window’s components.
A window’s presentation styles.
The types of windows available.
Organizing window system functions.
A window’s operations.
Web system frames and pop-up windows.

28. Window Characteristics
A window is seen to possess the following characteristics:
A name or title, allowing it to be identified.
A size in height and width.
A state, accessible or active, or not accessible.
Visibility—the portion that can be seen.
A location, relative to the display boundary.
Presentation, that is, its arrangement in relation to other windows. It may be tiled, overlapping, or cascading.
Management capabilities, methods for manipulation of the window on the screen.
Its highlight, that is, the part that is selected.
The function, task, or application to which it is dedicated.

29. Constraints in Window System Design
The acceptable and agreeable window standards are difficult to be developed.
Standardization becomes difficult, when complex and huge range of design alternatives are given to designer,
The design choices are difficult to compare when the user’s data and performance is not considered.
Limited style guides are generated by various companies for designing their products
Some companies provide a legal action against the other companies that reflect their own design ways.
Some companies are very much cautions about standards.
Window management require more learning, using and practicing of the operations.
Large windows consume more space on screen.
Small windows that provide a lot of information requires an excessive and unnecessary scrolling to view the complete data.

30. Components of a Window Frame (Border) Title Bar Title Bar Icon
Window Sizing Buttons
What’s This ? Button
Menu Bar
Status Bar
Scroll Bars
Split Box( Split Bar)
Toolbar
Command Area
Size Grip
Work Area

31. Windows sizing buttons
Title bar
Windows sizing buttons
Menu bar
Command/ Client area
Tool bar
Scroll bars
Frame
Status bar
Size grip

32. Window Presentation Styles
Tiled Windows
Overlapping Windows
Cascading Windows

33. Tiled Windows
They are easier, according to studies, for novice or inexperienced people to learn
Yield better user performance for tasks where the data requires little window manipulation to complete the task
Only a limited number can be displayed in the screen area available
As windows are opened or closed, existing windows change in size . This can be annoying
As the number of displayed windows increases, each window can get very tiny

34. Overlapping Windows
Visually, their look is 3-D, resembling the desktop that is familiar to the user
Windows can maintain larger sizes
Windows can maintain consistent sizes, position
They are operationally much more complex than tiled windows. More control functions require greater user attention and manipulation
Windows themselves can be lost behind other windows and be resumed not to exist

35. Cascading Windows (Special type of overlapping window)
No window is ever completely hidden
Bringing any window to the front is easier
It provides simplicity in visual presentation and cleanness

36. Types of Windows
Primary window
Secondary window

37. Primary window Should represent an independent function or application
Use to present constantly used window components and controls
Use for presenting information that is continually updated (Date and time)
Often called main window or application window
Do not divide independent function into two or more primary windows

39. Secondary Windows A dependent secondary A independent secondary
It can only be displayed from a command on the interface of its primary window
A independent secondary
Can be opened independently of a primary window (property sheet)
Modal Secondary windows
They do not allow their interaction with the other dependent windows. They remain to be displayed on screen unless the current dialog and actions are completed.
Modeless secondary windows
They allow navigation with the other dialog boxes and perform tasks when a modeless box is displayed.

41. Cascading and Unfolding
To provide advanced options at a lower level in a complex dialog.

42. Unfolding
To provide advanced options at the same level in a complex dialog
Provide a command button with an expanding dialog symbol >>
Expand to right or downward

44. Types of secondary windows
Dialog boxes
Use for presenting brief messages
Use for requesting specific, temporary actions
Use for performing actions that
Take a short time to complete
Are not frequently changed
Usually be those that do not occur frequently
Command button to include OK
Cancel
Others as necessary

46. Property Sheets Property sheets
Use for presenting the complete set of properties for an object
Categorize and group within property pages, as necessary
Command buttons to include Ok
Cancel
Apply
Reset
Others as necessary
For single property sheets, place the command on the sheet
For tabbed property pages, place the commands outside the tabbed pages

48. Property Inspectors Property Inspectors
Use for displaying only the most common or frequently accessed object properties
Properties of an object are displayed by using a dynamic viewer or browser that reflects the properties of the current selection
Property value in the selected object should be changed as soon as the user makes the change in the related property control

49. Message boxes
Message box is displays a message about the current situation.
The most commonly used command button are,
OK Button
Cancel Button
Help Button
Stop Button
Yes and No Buttons

50. Progress message box
Yes No message box
Information
Warning
Message box choices
Critical

51. Palette Windows
Palette windows include a set of images, colors or patterns displayed in a window.
They are considered as modeless secondary windows that differentiate visually with the other windows.
Pop-up Windows

52. Select the Proper Device-Based Controls
Device-based controls, often called input devices, are the mechanisms through which people communicate their desires to the system.

53. Identify the characteristics and capabilities of device-based control
Trackball
Joystick
Graphic tablet
Light pen
Touch screen
Voice
Mouse
Keyboard

54. Characteristics of Device-Based Controls
Points an item on the screen.
Selects an item on the screen.
Drags an item across the screen.
Draws something freely on the screen.
Tracks the movement of an item.
Locates an item.
To enter or manipulate data or information.

55. Trackball Description: Advantages: Disadvantages:
A spherical object (ball) that rotates freely in all directions in its socket.
Direction and speed is tracked and translated into cursor movement.
Advantages:
Direct relationship between hand and pointer movement in terms of direction and speed.
Does not obscure vision of screen.
Does not require additional desk space (if mounted on keyboard).
Disadvantages:
Movement is indirect, in a plane different from the screen.
No direct relationship exists between hand and pointer movement in terms of distance.
Requires a degree of eye-hand coordination.
Requires hand to be removed from keyboard keys.
Requires different hand movements.
May be difficult to control.
May be fatiguing to use over extended time.

57. Joystick A stick or bat-shaped device anchored at the bottom.
Variable in size, smaller ones being operated by fingers, larger ones requiring the whole hand.
Variable in cursor direction movement method, force joysticks respond to pressure, movable ones respond to movement.
Variable in degree of movement allowed, from horizontal-vertical only to continuous.

59. Graphic Tablet
Pressure-,heat-,light-, or light-blockage-sensitive horizontal surfaces that lie on the desktop or keyboard
May be operated with fingers, light pen, or objects like pencil

60. Touch Screen Light Pen Voice
A special surface on the screen sensitive to finger or stylus touch.
Light Pen
A light pen is an input device that permits the user to point objects on screen accurately.
Voice
Voice is a technology used to recognize an automatic speech that has been developed by computer.

62. Mouse
A mouse is a rectangular shaped device that allows the user to perform various system-dependent tasks.
Keyboard
A keyboard is an efficient device used for entering text strings.
It consists of integrated “window keys”, secured “metal caps”.

64. Choose the Proper Screen Based Controls
Screen Based controls, often simply called controls and sometimes called widgets. By definitions, they are graphic objects that represent the properties or operations of other objects

65. Operable Controls
Operable controls are those that permit the entry, selection, changing, or editing of a particular value, or cause a command to be performed.
Buttons
Text entry/read-only, selection, combination entry/selection
Specialized controls

66. Buttons Description Command Buttons Toolbars
A square or rectangular-shaped control with a label inside that indicates action to be accomplished
The label may consist of text, graphics, or both
Command Buttons
Toolbars

67. Command Buttons (Usage and Label)
Use to provide fast access to frequently used or critical commands (for windows with a menu bar)
Use to provide access to all necessary commands (for windows without a menu bar)
Use single-word labels whenever possible (Use two –three words for clarity, if necessary)
Use mixed-case letters with the first letter of each significant label word capitalized

68. Command Buttons (Label and Size)
Do not number labels
Center the label within the button borders
Provide consistency in button labeling across all screens
Restrict the number of buttons on a window to six or fewer
Provide as large as button as feasible and maintain consistent button heights and widths

69. Command Buttons (Location and Layout)
Buttons exiting a dialog, and usually closing the window, should be positioned horizontally and centered across the lower part of the window
For a button invokes a dialog or expands the dialog, position it centered and aligned vertically along the right side of the window
Do not provide alignment with other screen controls. Maintain alignment and spacing only within the buttons themselves
Position the buttons within windows before locate the other window controls

70. Command Buttons (Location and Layout)OK
Cancel
Configure …
Network …
Add Printer >>
Exiting buttons
Invoking feature/
Expanding dialog buttons

71. Command Buttons (Location and Layout)
If a button has a contingent relationship to another control, position it adjacent to the related control
Buttons found on more than one window should be consistently positioned
Select All 
Bread
Cereal
Dairy Foods
Desserts
Drinks
Groceries :
selected

72. Command Buttons (Keyboard Equivalents, Accelerators)
The mnemonic should be the first character of the button’s label
If duplication exists in first characters, use another character in the label
Designate the mnemonic character by underlining it
Assign a keyboard accelerator to each button to facilitate keyboard selection

73. Toolbars(Usage, Structure and size)
Provide easy and fast access to most frequently used commands or options across multiple screens
Provide buttons of equal size
Create a meaningful and unique icon
Center the image within the button
Create a meaningful label
Provide the smaller size as the default size with a user option to change it

74. Text Entry/Read-Only Controls
A Text Entry/Read-Only control contains text that is exclusively entered or modified through the keyboard.
Text Boxes
Single-Line and Multiple-Line Text Boxes
Captions

75. Selection Controls Radio Buttons Check Boxes Palettes List Boxes
List View Controls
Drop-down/Pop-up List Boxes

76. Radio Buttons A two part control consisting of the following
Small circles, diamonds, or rectangles
Choice descriptions
When a choice is selected
The option is highlighted
Any existing choice is automatically unhighlighted and deselected
Purpose
To set one item from a small set of option (2 to 8)

77. Check Boxes
Each option acts as a switch and can be either “on” or “off”
When an option is selected, a mark (X) appears within the square box, or the box is highlighted in some other manner
Otherwise the square is unselected or empty (off)
Each box can be
Switched on or off independently
Used alone or grouped in sets
!!Other properties are similar to the radio button’s properties!!

78. Palettes
A control consisting of a series of graphical alternatives. The choices themselves are descriptive, being composed of colors, patterns, or images
To set one of a series of mutually exclusive options presented graphically or pictorially
Usually consume less screen space than textual equivalents
Do not use
Where the alternatives cannot be meaningfully and clearly represented pictorially
Where words are clearer than images
Where the choices are going to change

79. List Boxes
A permanently displayed box-shaped control containing a list of attributes or objects from which
A single selection is made (mutually exclusive), or
Multiple selections are made (non-mutually exclusive)
Unlimited number of choices
If the list content change, items will be hard to find
Good for data that are
Best represented textually
Not frequently selected
Large in number
Fixed in list length

80. Single-Selection & Multi-Selection List Boxes

81. Drop-Down/Pop-up List Boxes
Unlimited number of choices
When displayed, all choices may not always be visible, requiring scrolling
Use drop-down/pop-up when
Screen space or layout consideration make radio buttons or single-selection list boxes impractical
Do not use a drop-down list if it important that all options be seen together

82. Spin Boxes
Combo Boxes

83. Slider A scale exhibiting degrees of a quality on a continuum
To make a setting when a continuous qualitative adjustment is acceptable
Spatial representation of relative setting
Not as precise as an alphanumeric indication
Proper usage:
When an object has a limited range of possible settings
When the range of values is continuous
When graduations are relatively fine