Visual Programming

1. Visual Programming and
.Net
MCA II,
Kantipur City College (Purbanchal University).

2. Procedural vs. Event-Driven
Programming
Procedural programming is executed in procedural order.
In event-driven programming, code is executed upon
activation of events.

3. Example of event driven
programming
The example displays a button in the frame. A message is
displayed on the console when a button is clicked.
RunRun

4. Events
An event can be defined as a type of signal to the
program that something has happened.
The event is generated by external user actions such as
mouse movements, mouse clicks, and keystrokes, or by
the operating system, such as a timer.

5. Event Handlers
Event handlers are the subroutines or methods that handle the
events to which the main program will respond.
Steps in creating event handlers
- write subroutines or methods for event handlers
- bind event handlers to events so that the correct function is
called when the event takes place
- write the main loop. This is a function that checks for the
occurrence of events, and then calls the matching event
handler to process it.

6. Software Design
Software design is defined as that portion of the
development process that is responsible for determining
how the program will achieve the user’s goal.
1. What the software program will do?
2. What it will look like?
3. How it will communicate with the user?
User Interface design is a subset of software design
that encompasses 2nd
and 3rd
points.

7. Goal Directed Design Process
 Cooper advocates five significant changes to the conventional
methods of software development in his goal-directed design
process:
1. Design first; program second.
2. Separate responsibility for design from responsibility for
programming.
3. Hold designers responsible for product quality and user
satisfaction.
4. Define one specific user for your product; then invent a
persona—give that user a name and an environment and
derive his or her goals.
5. Work in teams of two: designer and design
communicator

8. Benefits of goal oriented design
1) Improved product quality
2) Reduced development time—which leads to reduced cost
3) Improved documentation (Reducing the complexity of
the software reduces the time spent explaining software
problems and frees up time to explain how the software
can really help users).

9. Goal oriented design
Cooper insists that design precede programming:
In Cooper’s goal-directed approach to software
development,
all decisions proceed from a formal definition of the user
and his or her goals.
Definition of the user and user goals is the responsibility
of the designer—thus design precedes programming.

10. Evolution of the Software Development
Process

11. Cooper applies this model to three software
giants
who have failed to find a balance:
Novell emphasized technology and gave little
attention to desirability. This made it vulnerable
to competition.
Apple emphasized desirability but has made
many business blunders. Never-the-less, it is
sustained by the loyalty its attention to users
creates.
Microsoft is one of the best run businesses ever,
but it has not been able to create highly
desirable products. This provides an opening for
competitors.

13. Implementation model
The actual method of how a device or a program works
is called implementation model

14. Mental Model (Conceptual model)
The user point of view for thinking about the working
mechanism of a device or a program is called user’s
mental model or conceptual model.
(The way that the user perceives that the system works. )

15. Manifest Model
The disconnection between what is real and what is
offered gives rise to a third model called manifest
model.
It is a way the program represents its functioning to the
user.

16. Manifest Model
The closer the manifest model comes the user’s
mental model, the easier it will be to use and
understand”
Most software UIs are designed by engineers, so
conform to the implementation model
By making the manifest model simpler, we can
make it easier to learn and understand

18. Visual Interface Design
Graphical User Interface can be difficult to use
The qualities that makes a user interface good are user
centric and not technology centric.
Two user centric qualities:
Visualness of software
Programs vocabulary
Software that makes use of visual user interface is called
Visual Interface Design.

19. Visual processing
WORDS WRITTEN IN CAPITAL LETTERS ARE HARDER
TO READ
Books printed using a font with unusual proportion
becomes difficult to read.
VISUALLY SHOW WHAT TEXTUALLY SHOW
WHICH

20. Visual Patterns
Ability of our unconscious mind to group things into
patterns based on visual cues allows to process visual
information quickly
Understanding and applying how human mind processes
visual information is one of the key elements of
visual interface design.

21. Visual patterns cont.…
A visual interface is based on visual patterns.
Patterns are the engines of unconscious recognition.
Visual interface creates readily recognizable patterns.
text has secondary role to distinguish objects with similar
patterns

22. Restricting the vocabulary
Why GUI are POPULAR than Command Based Interface
Command line interface – Unlimited set of commands
GUI – restricted set of mouse based action

23. Canonical Vocabulary
A properly formed vocabulary is shaped like an inverted
pyramid – called canonical vocabulary.

24. Canonical Vocabulary

25. Canonical vocabulary
Language that do not follow canonical vocabulary is hard
to learn.

26. Idioms

27. Three interface paradigms
Technology paradigm
Based on understanding how things work – a difficult
proposition
Metaphor paradigm
Based on how things works – a risky method
Idiomatic paradigm
Based on learning how to accomplish things, a natural,
human process

28. Metaphors
Metaphors rely on analogy with some existing
concept or idea
 “Files”, “Folders”, “Windows”, “Trash”…
 User must recognize the metaphor, and understand
how to translate it
 Can be hit or miss…
 Physical world metaphors can limit their virtual
equivalents
How many of you understand Windows because of
its physical analogies?

29. Metaphor paradigm
Based on intuition
Sometime works sometime does not works
Can fail if there are cultural differences
Metaphor Paradigm don’t scale very well.
(e. g. File icons were a good idea when computers floppies
or 10 MB hard disk)

30. Metaphor paradigm
Never bend an interface to fit a metaphor
It may be easy to discover visual metaphors for physical
objects like printers and documents. It can be difficult or
impossible to find metaphors for processes, relationships,
services and transformations

31. Technology paradigm
Mostly admired by engineers
In order to successfully use the user must understand
how the software works.

32. Idiomatic paradigm
“All idioms must be learned. Good idioms only
need to be learned once”
Idioms focus on being easy to learn and recognize
We learn many UI features as idioms, rather then
metaphors

33. Idiomatic paradigm
Most of the GUI interface are idioms.
Windows, Caption bars, close boxes, screen-splitters,
drop-downs are learned idiomatically rather than intuit
metaphorically.

34. Affordances
“Affordances are properties of the World that are
compatible with and relevant for people’s
interactions.”
“Fundamental properties that determine just how
the thing could possibly be used.”

35. Manual Affordance
Directly manipulable and need no written instructions.
e.g. rotating round things, pulling handle shaped things

36. Modes
“A mode is a state the program can enter where the
effects of a user’s actions change from the norm”
Active (SHIFT) or Passive (CAPS LOCK)
Make it easy to change the mode and to see which
mode you are in

37. Modes cont.…
Older programs shifts into a special state to enter
records, then shift into another state to print them out,
these behavioral states are modes.
Modes based on the implementation model are
confusing modes.
For e.g. “Edit” mode versus “print” mode is convenient
only for the program not the user.

38. Overlapping windows
Used to transfer control between concurrently running
program
Intended to represent overlapping sheet of paper on the
desktop
Are overlapping windows good?

39. Overlapping windows
Concept is good but it’s execution is impractical in the real
world.
The no of pixels on today’s video screen is too small and users
cant afford to waste them.
Also if the no. of application running increases it doesn’t scale
well.
Overlapping within a single application is a well-formed idiom
e.g. tool palettes.
Unix solves this problem by providing multiple desktop.

40. Tiling
Divide applications to take certain space on the screen
(was popular on windows 1.0)

41. Dialog Box
A dialog box is another room. Have a good reason to go there.
This is one of the most violated tips in user interface
design.
E.g. Changing a drop shadow in a drawing program.
Programmer point of view:
Changing drop shadow is a separate function.
User point of view:
• Integral function

42. Dialog box cont.…
Purging a database, needs a separate dialog box
It is not a normal or everyday activity so is appropriate to
take into a separate dialog box.

43. Windows pollution
Using a single or a separate dialog box for each function
can lead to windows pollution.
For e.g. CompuServe Navigator (version 1.0.1)

44. File system tragedy

45. File system
Most difficult to understand for normal users
General user cannot understand difference between main
memory and disk storage.
The way we design our software forces normal user to
understand the difference.
E.g. Save as dialog box in a word document.
The origin of save as dialog box is a result of programmer
implementation model rather than user mental model.

46. Implementation model followed
by file system
Every document, file or program exists at two places
(disk and main memory) while in use
In a word document the program ask to save the data
before closing the window. It is as a result of the
implementation model of file system.

47. Unified File Model
Properly designed software will treat documents as single
instances never as a copy on a disk and copy in memory.
In unified file model save totally disappears from the
interface.
The save command should be done automatically by the
program periodically.

48. Closing the document
It is not a proper time to save or discard the changes
Save as dialog ask two things
Name of the file
Location to save the file
Both requires sufficient knowledge of file system hence
save as dialog box should not be used for naming and
replacing files.

49. Copy document
Save as dialog is a wrong tool for making
copies of document.
E.g. we are working on a document.
We make certain changes
When we use save as dialog box it creates a new file
with the new file currently in use.
It can lead to inconsistency.

50. Unify the file model
Our system does not allows to rename file currently in
use.
It is a sharing violation
If the system cannot rename the file currently in use it
should indicate the user with a visual clue.
E.g. showing a icon next to the file
Start button should make reference to the already
running program.

51. Following mental model
Commands in the program can be structured according
to the goals of the user instead of according to the needs
of the OS.
File menu can be replaced with document for word and
spreadsheet for excel.

52. Following mental model in
document properties
 Application designed following the user’s mental model.
 For creating a copy of the document
 “make snapshot copy”
 Naming and renaming the document.
 “rename/ reposition”
 Specifying the stored format of the document
 “document properties”
Note: format of document should not be associated with save as command.
• Creating a milestone copy of the document.
- “Make milestone”
• Abandoning all changes
- Abandon Changes

53. Storage and retrieval
system

54. Storage and retrieval system
Storage and retrieval system also follows implementation
model rather than user mental model.
Once the information is stored on disk it can be found
based on different indices
In real world 3 indices are used to retrieve a document
e.g. author, title, subject
Computer can handle hundreds of indices but in practice
only few indices are used.

55. Retrieval method
Three fundamental ways to find a document
Positional retrieval
Based on the storage location
Identity retrieval
Based on the name
Associative retrieval
Based on some inherent quality.
E.g. file with red cover, file discussing about interface design.
Positional and identity are also methods followed by storage
system.

56. Development Platforms
• Development cost is much higher compare to hardware
cost
• Develop software that performs optimally on hardware
that doesn’t exist yet.

57. Simultaneous multiplatform
development
Don’t develop software trying to cover all platforms
Build the program to run on only one platform at a time
Simultaneous multiplatform development generates more
uncertainty and delay

58. Myth of interoperability
Do not try to implement DOS version software in
windows platform.
The program should be designed for the target platform.
E.g. software for Mac and windows platform

59. User Computer
Interaction

60. Direct manipulation
Pen are examples of direct manipulation.
Pen are mostly easier for entering data.

61. Indirect Manipulation
Mouse is used to manipulate objects indirectly.
Mouse is one of the good idiom.
The motion of mouse is proportional. i.e. 30 cm screen
can be crossed in about 4 cm movement of mouse.

62. Gross motor control vs. fine
motor control
Gross motor control fine motor control

63. Elephants
Some people find mouse difficult to use so the software
need to fully support both the mouse and the keyboard.

64. Mouse Buttons
Left mouse buttons
Common meaning is activation or selection
It is used for all of the major direct manipulation functions of
triggering controls, making selections, drawing, etc.
Right mouse buttons
The non major functions reside on the right mouse buttons.
Vocabulary of a mouse actions is canonically formed so it
is a significant reason why mouse are such a good
computer peripheral.

65. Mouse actions
Pointing
Clicking
Single click selects the data or change the gizmo state.
 Escape route of clicking a button – click a button and
release it outside the button. It has no effect.
 The drawback of escape route is that instead of that we can
drag and release a justified buttcon on the paragraph of
text to make the paragraph justified.

66. Mouse actions contd. …
Double clicking
It means a single click plus action.
Double clicking on a paragraph of text selects a word.
It is also used to toggle the value of a list box
Chord clicking
Pressing two buttons simultaneously
Second mouse button is pressed at sometime before the
first mouse button is released.
E.g. used in terminating a drag

67. Mouse actions contd. …
Triple clicking
Used to select a paragraph in word.
Double dragging
Double click a word to select it and extend the selection
word by word by double dragging.
Useful when deleting a sentence from the paragraph.

68. Mouse actions contd. ...
Button up and down events
When selecting an object the selection should take place on
the button down.
Button down means propose action
Button up means commit to action over gizmos.

69. Cursor
Visual representation on the screen of the mouse’s
position.
Single pixel is designated as the actual locus of pointing
called the hotspot.
Any area or object on the screen that reacts to mouse
action is called pliant.
E.g. every character in the text is pliant
E.g. any object that can be picked up and dragged
E.g. a push button

70. Hinting
There are three basic ways to communicate the pliancy
of an object to the user.
By static visual affordance of the object itself
Its dynamically changing visual affordance.
By changing visual affordances of the cursor as it passes
over the object

71. Static visual hinting
If the pliancy of the object is communicated by the static
visual affordance of the object itself, it is called static
visual hinting.
E.g.
the 3D push button is a static visual hinting because of its
manual affordance for pushing.

72. Active visual hinting
When the cursor passes over the pliant object, the object
changes its appearance to visually hint, it is called active
visual hinting.
E.g.
when cursor is placed on an object and it changes its
appearance with an animated motion.

73. Cursor hinting
If pliancy of the object is communicated by a change in
the cursor as it passes over, it is called cursor hinting.
E.g. column dividers and screen splitters are good
examples of cursor hinting.

74. Wait cursor hinting
In windows by default hour glass is used to show “wait
cursor hinting”.

75. Problem with wait cursor
hinting
In non-preemptive system like Windows 3.1 when one program
go busy all go busy.
In preemptive system like windows 95 although one program
go busy other can run.
For e.g. when the user moves the cursor off a busy program’s
main window, the cursor will revert back to a normal state.
The visual hinting cannot show the busy state of the program
and it is wrong.
Each program should show its busy state by some change to its
own visage.

76. Focus
It indicates which program is active and will receive the
next input from the user.
When we click on a program to make it active, the action
is called new-focus click.
When we click somewhere in the window that already
has the focus, the action is called in-focus click.

77. Selection

78. Selection
In user interface we have to consider the sequence in
which the commands are executed.
Every command has an operation and one or more
operands.
Operation-describes what action will occur
Operands are the target of that operation.

79. Verb-Object/ Object-Verb
Operation and operands are programmers terms.
Interface designers prefer operation as verb and operand
as the object.
Modern interfaces use both verb-object/ object-verb
order.
• In programming language like COBOL verb object order
was popular
• E.g. Perform action (verb) on X and Y (objects)

80. Verb-Object/ Object-Verb
With the introduction of GUI verb-object ordering
created a problem
E.g. we don’t select an operation first then select the objet
to be acted upon.
In object-verb order user selects the objects to be acted
upon then selects the operation.
This process needs a mechanism for identifying, marking
and remembering the chosen operands.
Selection is a mechanism for identifying the
objects (operands)

81. Verb-Object/Object Verb
order
In linguistic context of English language it is irrelevant to
choose the object first.
On the other hand object-verb order is frequently used in
non linguistic action.
e.g. shopping cart

82. Concrete and Discrete
data
There are two broad categories of data
Some programs represent data as distinct visual objects
that can be manipulated independently of other objects.
e.g. graphic objects in drawing tools.
They are called discrete data and the selection within
them is called discrete selection.

83. Concrete and discrete
data
Some programs represent their data as a contiguous
pieces of data.
E.g. text in word processor or the cells in a spreadsheet.
These objects are often referred in a group and they are
called concrete data and their selection within them is
called concrete selection.

84. Concrete and discrete
selection
Both concrete and discrete selection supports both single
clicks and click and drag selection.
Nature of discrete selection – discontinuous
Nature of concrete selection – contiguous

85. Insertion and
Replacement
A single point that indicates a place in between two bits
of data is called the insertion point.
In word processor a blinking caret is an example of least
amount of concrete selection available.
Insertion is an example of null selection, if selection is null
it inserts the incoming character.

86. Insertion and Replacement
contd. …
In concrete selection, the incoming data always replaces
the currently selected data.
Insertion is an example of null selection, if selection is null
it inserts the incoming character.
Spreadsheet are different from word processor. Although
the selection is concrete there is no insertion point.

87. Mutual Exclusion
When a new selection is made previous selection is
unmade. This behavior is called mutual exclusion.
Mutual exclusion is used in both discrete and concrete
selection.

88. Additive selection
If we can select many independent objects by clicking on
more than one then we call it additive selection.
E.g. multiple selection list box.
Most discrete selection system implement mutual
exclusion by default and allows additive selection by
using a META KEY (shift)
However, concrete selection system should never allow
additive selection because there should never by more
than a single selection.

89. Group selection
Click and drag is the basis of group selection
Group selection can be modified using meta keys e.g. in
Ms. Word Ctrl + down-arrow selects sentence line by
line.
Dragrect – is simple click and drag operation on an
open area that selects discrete objects within the area of
mouse button down and up event.

90. Visual indication of selection
Make selection visually bold and unambiguous.
E.g. selected state of a button in a dialog box should be
visually indicated.
E.g. in Microsoft word selection of text is indicated by
controlling the color_highlight and color_highlighttext.
In drawing, painting, presentation programs where we
deal with multi color objects, the selected object can be
shown using marching ants.

91. Direct manipulation

92. Direct manipulation
Pushing buttons, scrolling text, drawing tools are all
examples of direct manipulation.
Direct manipulation should not be implemented without
adequate visual feedback.
A rich visual interaction is the key to successful direct
manipulation.
Direct manipulation should be simple, straight forward,
easy to use and easy to remember.

93. Management Category
In management category there are five variations of
direct manipulation
Making selection
Dragging and dropping
Manipulating gizmos (clicking push buttons, radio buttons,
checkboxes)
Resizing, reshaping and repositioning
arrowing

94. Anatomy of a drag
Most direct manipulation idiom demand a click and drag
operation.
The drag state is called capture because no other program
can interact with the user until the drag is completed.
The window that owns the mouse down point is called the
master object.
If master object is concrete data the drag will indicate a
selection however if the master object is discrete data, it
indicates the beginning of direct manipulation operation like
drag and drop.

95. Anatomy of a drag contd. …
Chord click is a popular cancel idiom for a drag operation
however word does not supports it.
Dragging gizmo
Cascading menu makes use of dragging gizmo. The
problem of cascading menu is that it deactivates when
mouse is placed outside of the menu area.
New menus are used these days which resolve the problem
of dragging associated with cascading menu.

96. Repositioning
It is the simple act of clicking on an object and dragging
it to another location.
Dedicate a specific physical area of the object for
repositioning function.
E.g windows draggability is the color of the caption bar, a
subtle visual hint that is purely idiomatic.

97. Repositioning contd. …
To drag text we use two series of action.
First click and drag to select text then click and drag again
to move it.
Resizing and reshaping
• In Mac resizing window is done using small resizing
control in the lower right corner
• In windows 3.x it was done using thick window frame but
the area it consumes was expensive.
• In windows 95 and onwards a new reshaping gizmo is
used, triangle in shape called shangle [shaper + triangle]

98. Resizing and Reshaping
Thick frames and shangles are fine for resizing however it is
not possible to permanently superimpose controls into
graphical elements of a drawing program.
Grapples (handles) are eight small squares used in drawing
programs to visually hint that the object can be resized.
They also indicate selection for moving
Grapples are not good solution for windows. Why?

99. Resizing and Reshaping
Polyline is also used while drawing non rectangular
objects and is important to fine tune the shape.

100. Resizing and Reshaping meta
Key variants
Constrained drag
Is a drag used to constrain the drag to another orthogonal
direction. Using one of the meta key like shift.
Constraint drag stays on a 90 degree or 45 degree axis
If the meta key is found pressed at the
instant when the mouse button is
released the effect is considered
valid

101. Arrowing
A direct manipulation idiom in which user clicks and
drags from one object to another to draw an arrow
The line is animated while drawing to visually indicate
the path. It is called rubber banding effect.
The target object engage in some active visual hinting.

102. Direct manipulation visual
feedback
The key to successful direct manipulation is rich visual
feedback
We can divide the direct manipulation process into three
distinct phases
Free phase
Captive phase
Termination phase

103. Free Phase
Before the user takes any action.
Free phase indicates direct manipulation pliancy
Free cursor hinting
E.g. Handshaped cursor to indicate that document is
draggable.

104. Captive phase
Once the user has begun the action e.g. drag
Captive phase potentially indicate that the direct
manipulation process has begun
Visually identify potential participants in the action.
Captive cursor hinting
• Holding down a control key during the drag can make
copy of the object instead of dragging the object itself.
Here the cursor changes from arrow to arrow + to indicate
the operation is a copy rather than a move.

105. Termination phase
Plainly indicate that the action has terminated and show
exactly what the result is.

106. Dragging
Interior drag and drop
Drag and drop something from one place to another
inside a program.
Exterior drag and drop
Drag and drop something from inside your program to
some other program

107. Dragging cont. …
When a user clicks on a discrete object to drag then it is
called a master.
When the user clicks on the master and drags to another
discrete object to perform a function then it is called
target.
There are master and target, two objects involved while
dragging.

108. Dragging data to
functions
Dragging files to recycle bin or zip program.
Here possible targets of a drop is called a drop candidates.
While dragging the master, the object may pass quickly over
dozens of drop candidates before the user actually positions
over the desired target.
If the protocol requires extensive communication between the
master and the drop candidate, the interaction can be sluggish.

109. Dragging data to
functions
The drop candidate must visually indicate its drop-ability
i.e. it can accept the drop.
The weakest way to offer the visual indication of drop-
ability is by changing the cursor. WHY?
(because the drag cursor must visually indicate the master
object).

110. Indicating drag pliancy
Do-not animate the whole drag object.

111. Indicating drop pliancy
While dragging it can travel over various drop
candidates.
These drop candidates must visually indicate that they
are being aware of being considered as potential drop
targets.

112. Visual indication of
completion
After the drag the master should disappear from its
source and reappear in the target.
If the target is a function then it must visually hint. It can
be done using animation or visually hinting.

113. Tool manipulation – Drag and
drop
• A shape is dragged on a canvas in a drawing program.
• It has two basic variants
• Modal tool
• Changed cursor

114. Modal tool
User select a tool and the program is now completely in
the mode of that tool.
Spray tool – Once the program enters into that mode it
remains to stay in that mode until we change it.

115. Charged cursor
When a tool is selected the cursor is changed or loaded
with a single instance of the selected object.
Once checked the cursor changes back to the normal
state. E.g. photoshop, visual basic
(Delphi does not shows the charged cursor)

116. Bombsighting
As the user drags object arrow around the screen, each drop
candidate visually changes, which indicates its ability to accept
the drag.
In some programs like Word objects can be dropped in the
spaces between other objects called bombardier.
The visual hinting is drawn on the background of the program
or in its concrete data called bombsight.
E.g. rearranging slides in slide sorter view.
Whenever something can be dragged and dropped on the space
between other objects, the program must show a bombsight.

117. Drag and drop problems and
solutions
If some block of text is dragged and it is to be placed
somewhere below the document which is not visible,
then such an action is called auto scrolling.
Any scrollable drag and drop target must auto scroll.
Designers should manage the speed of autoscroll.

118. Drag and drop twitchiness
The frequent act of selecting an object should not be
interpreted as an initiation of drag and drop.
Hence to remove this problem there should be drag
threshold.
All mouse movement message that arrives after the
mouse button goes down and capture begins are ignored
when the movement exceeds some small threshold
amount.
Designers should debounce small drags.

119. Mouse vernier
The drawing manipulation program should provide
mouse vernier function where the user can quickly shift
into a mode that allows much finer resolution for mouse
based manipulation of objects.
E.g. Arrow keys can be used to move one pixels at a time

120. MENU

121. First Hierarchical menus
Choices were given indicated by an ordinal e.g. 1 – 6.
Once the selection was made another set of menus were
shown drilling down into a tall tree of commands.
E.g.
1. Enter commands
2. Enter pay units
3. Exit

122. Visible Hierarchical Menu
Popular in character based interface
E.g. Lotus 1-2-3
The menu were enabled using a forward slash ( / ) and
command. E.g. /s

123. Monocline grouping
The storage technique which uses a single level of
nesting is called monocline grouping. E.g. a bookshelf
one level deep file cabinet
• However, monocline grouping is an inadequate system
for managing the large quantities of data we commonly
find on computers.
• The solution to this is monocline grouping with powerful
search and access tools that hierarchy can offer.

124. Popup menu
A popup window is a rectangle on the screen that
appears, overlapping and obscuring the main part of the
screen, until it has completed its work.
It disappears after it complete its work.
The popup window is the mechanism used to implement
both pull down menus and dialog boxes.
The user makes a single choice by clicking once or by
dragging and releasing.

125. Popup menu contd. …
The selection the user makes at the popup menu level
either takes immediate effect or calls up a dialog box.
The concept of monocline grouping is implemented in
popup menu.
(The dialog box enabled the software designer to
encapsulate all of the sub-choices of any one menu
option in a single, interactive container)
• The need to go to additional levels of menus was made
superfluous.

126. Command vector
The two idioms that fundamentally changed the role of
the menu in the user interface are direct manipulation
and objects.
Each distinct technique used for issuing instruction to the
program is called a command vector.
Menus, direct manipulation, toolbars are examples of
command vector.

127. Immediate vectors
Both direct-manipulation and toolbar command vectors
have the property of being immediate vectors.
Neither menus nor dialog boxes have this immediate
property.

128. Pedagogic Vector
Menus and dialog boxes contains the detailed
information of what a particular function performs.
Hence, it is important for first time users or beginners.
Menu and dialog boxes are important for teaching
purpose, hence they are called pedagogic vector.

129. Standard Menus
Most GUI have at least “File” and “Edit” menu in the left
most position and “Help” menu at the right.
Windows style guide states that these File, Edit and Help
menus are standard.
File menus is as a result of the implementation model, they
way our OS works.
Edit menu is based on the clipboard.
The three menu, file, edit and help are examples of weak
menu interfaces.

130. Standard menus
Other menu like “Window”, “view”,
“Insert” ,”Format”, “tools” and “options” are not
common in all programs but are also standard menus.
Menus like view, insert, format, tools, options are
grouped on the basis of tools and functions rather than
goals.
The menus should be more goal oriented

131. Correct form of menus
The correct form of menus depends upon the individual
need of the program.
Menus can be ordered according to their scope e.g.
global menus on the left and specific menu items on the
right.

132. Menu item variants
Disabling menu items
Gray out the menu item which are not relevant to the selected
data.
Enabling and disabling of menu items reflects their appropriate
use.
Cascading menus
Used in windows 3.1 to show secondary menu.
Popup menus (monocline grouping) are nice alternative to
cascading menu where items are in hierarchy.
Cascading are weak idiom and should not be the first choice
while designing an interface. E.g. windows 95 start bar.

133. Menu item variants
Flip – flop menu items
Flip-flop is a type of menu item that alternates between the
two values, always showing the one currently not chosen.
It saves space.
In some cases it maybe confusing to neophyte users since it
does not shows the other state.
E.g. Display Tools/ Hide Tools.
An alternate to display tools can be display tools now

134. Menu item variants
Graphics on menu
Visual symbols next to menu items helps to differentiate easily
without reading.
It can be understood faster.
It easily shows connection to other gizmos that do the same
task.
A menu should show same image as its corresponding toolbar
buttcon.
E.g. cascading makes use of graphics on menus

135. Menu item variants
Bang menu item
Top-level menu item – on the horizontal menu bar – that
behaves like an immediate menu item which gets
executed instantly.
E.g. complie! button in C can be a bang menu item.
Don’t use bang menu items.
Buttcons on a toolbar behave like a bang menu items.

136. Menu item variants
Accelerators
Provides an additional optional way to invoke a function from
the keyboard.
Accelerators are function keys which are activated with a CTRL,
ALT or SHIFT keys.
Accelerators are an easy way to activate a command.
Follow standards while using accelerators. E.g. Ctrl + P (print),
Ctrl + S (save)
Show how to access them in menus
Frequently used menu items (functions) must have accelerators.

137. Menu item variants
Mnemonics
Underlined letter in the menu item.
Theses are keystrokes commands used in parallel to the direct
manipulation of menus and dialogs.
Mnemonics are executed with the use of ALT meta key.
The purpose of mnemonics is to provide keyboard equivalent
of each menu command.
Mnemonics are not optional. Experienced users enjoy using
mnemonics.

138. System menu
Present in the upper left corner. Also referred to as
control menu.
It can be invoked using Alt + Spacebar.
System menu are not useful since the commands present
in system menu like minimize, maximize, restore, close
are shifted at the end of the caption bar in the form of
icons.

139. Dialog boxes

140. Dialog Boxes
Engages the user in a conversation by offering some
information and requesting some input.
It has the option of accepting or rejecting the changes.
When the application presents a dialog box, it is
temporarily moving the action out of the mainstream.
“Put primary interaction on the primary window”.
Dialog boxes should be used only for secondary action.

141. Dialog box contd. …
Dialog box breaks the normal flow.
Dialog boxes are well-suited for presenting infrequently
used functions.
Dialog boxes also play a part in the pedagogic vector like
menu does. (teach users)

142. Dialog box basics
The dialog box may or may not have a caption bar
Dialog boxes are always placed visually on top of their owning
program.
Every dialog box has at least one terminating command.
Generally most dialog boxes will offer two push buttons as
terminating commands Ok and Cancel.
Some dialog box are unilaterally erected and removed by the
program e.g. dialog box showing progress of a file being
copied

143. Types of dialog boxes
Modal dialog boxes
Once this dialog box comes up the owning program
cannot continue until the dialog box is closed. E.g. print
dialog box.
Since modal dialog box only stop their owning program
they are also called application modal.
A dialog box called system modal can also be called
which halts all the running programs.
Never create a system modal dialog box.

144. Modeless dialog boxes
The owning program continues without interruption in
modeless dialog box.
E.g. find, replace dialog box in MS Word.
We can change the selection while the modeless dialog
box is still open.
Modeless dialog boxes are close in resemblance with
modal dialog box but functionally different.

145. Thank You!