Visual Programming and .Net

MCA II, Kantipur City College (Purbanchal University).

Procedural vs. Event-Driven Programming

Procedural programming is executed in procedural order.

In event-driven programming, code is executed upon activation of events.

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

EventsAn 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.

Event HandlersEvent 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.

Software DesignSoftware 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.

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

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).

Goal oriented designCooper 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.

Evolution of the Software Development Process

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.

Implementation modelThe actual method of how a device or a program

works is called implementation model

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. )

Manifest ModelThe 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.

Manifest ModelThe 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

Visual Interface DesignGraphical 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 softwarePrograms vocabulary

Software that makes use of visual user interface is called Visual Interface Design.

Visual processingWORDS 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

Visual PatternsAbility 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.

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

Restricting the vocabularyWhy GUI are POPULAR than Command Based

Interface

Command line interface – Unlimited set of commands

GUI – restricted set of mouse based action

Canonical VocabularyA properly formed vocabulary is shaped like an

inverted pyramid – called canonical vocabulary.

Canonical Vocabulary

Canonical vocabularyLanguage that do not follow canonical

vocabulary is hard to learn.

Idioms

Three interface paradigmsTechnology paradigm

Based on understanding how things work – a difficult proposition

Metaphor paradigmBased on how things works – a risky method

Idiomatic paradigmBased on learning how to accomplish things, a

natural, human process

MetaphorsMetaphors 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?

Metaphor paradigmBased 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)

Metaphor paradigmNever 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

Technology paradigmMostly admired by engineers

In order to successfully use the user must understand how the software works.

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

Idiomatic paradigmMost of the GUI interface are idioms.

Windows, Caption bars, close boxes, screen-splitters, drop-downs are learned idiomatically rather than intuit metaphorically.

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.”

Manual AffordanceDirectly manipulable and need no written

instructions.

e.g. rotating round things, pulling handle shaped things

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

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.

Overlapping windowsUsed to transfer control between concurrently

running program

Intended to represent overlapping sheet of paper on the desktop

Are overlapping windows good?

Overlapping windowsConcept 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.

TilingDivide applications to take certain space on the

screen (was popular on windows 1.0)

Dialog BoxA 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

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.

Windows pollutionUsing a single or a separate dialog box for each

function can lead to windows pollution.

For e.g. CompuServe Navigator (version 1.0.1)

File system tragedy

File systemMost 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.

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.

Unified File ModelProperly 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.

Closing the documentIt is not a proper time to save or discard the

changes

Save as dialog ask two thingsName of the fileLocation 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.

Copy documentSave 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.

Unify the file modelOur 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.

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.

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

Storage and retrieval system

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.

Retrieval methodThree fundamental ways to find a document

Positional retrievalBased on the storage location

Identity retrievalBased on the name

Associative retrievalBased 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.

Development Platforms• Development cost is much higher compare to

hardware cost

• Develop software that performs optimally on hardware that doesn’t exist yet.

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

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

User Computer Interaction

Direct manipulationPen are examples of direct manipulation.

Pen are mostly easier for entering data.

Indirect ManipulationMouse 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.

Gross motor control vs. fine motor control

Gross motor control fine motor control

ElephantsSome people find mouse difficult to use so the

software need to fully support both the mouse and the keyboard.

Mouse ButtonsLeft 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 buttonsThe 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.

Mouse actionsPointing

ClickingSingle 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.

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 clickingPressing two buttons simultaneouslySecond mouse button is pressed at sometime

before the first mouse button is released.E.g. used in terminating a drag

Mouse actions contd. …Triple clicking

Used to select a paragraph in word.

Double draggingDouble click a word to select it and extend the

selection word by word by double dragging. Useful when deleting a sentence from the

paragraph.

Mouse actions contd. ...

Button up and down eventsWhen selecting an object the selection should take

place on the button down.Button down means propose actionButton up means commit to action over gizmos.

CursorVisual 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 pliantE.g. any object that can be picked up and draggedE.g. a push button

HintingThere 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

Static visual hintingIf 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.

Active visual hintingWhen 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.

Cursor hintingIf 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.

Wait cursor hintingIn windows by default hour glass is used to show

“wait cursor hinting”.

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.

FocusIt 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.

Selection

SelectionIn 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.

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)

Verb-Object/ Object-Verb

With the introduction of GUI verb-object ordering created a problemE.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)

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

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.

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.

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

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.

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.

Mutual ExclusionWhen 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.

Additive selectionIf 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.

Group selectionClick 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.

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.

Direct manipulation

Direct manipulationPushing 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.

Management CategoryIn management category there are five

variations of direct manipulationMaking selectionDragging and droppingManipulating gizmos (clicking push buttons, radio

buttons, checkboxes)Resizing, reshaping and repositioningarrowing

Anatomy of a dragMost 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.

Anatomy of a drag contd. …

Chord click is a popular cancel idiom for a drag operation however word does not supports it.

Dragging gizmoCascading 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.

RepositioningIt 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.

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]

Resizing and ReshapingThick 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?

Resizing and ReshapingPolyline is also used while drawing non

rectangular objects and is important to fine tune the shape.

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

ArrowingA 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.

Direct manipulation visual feedback

The key to successful direct manipulation is rich visual feedback

We can divide the direct manipulation process into three distinct phasesFree phaseCaptive phaseTermination phase

Free PhaseBefore the user takes any action.

Free phase indicates direct manipulation pliancy

Free cursor hinting

E.g. Handshaped cursor to indicate that document is draggable.

Captive phaseOnce 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.

Termination phasePlainly indicate that the action has terminated

and show exactly what the result is.

DraggingInterior 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

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.

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.

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).

Indicating drag pliancyDo-not animate the whole drag object.

Indicating drop pliancyWhile 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.

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.

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

Modal toolUser 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.

Charged cursorWhen 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)

BombsightingAs 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.

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.

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.

Mouse vernierThe 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

MENU

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

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

Monocline groupingThe 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.

Popup menuA 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.

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.

Command vectorThe 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.

Immediate vectorsBoth direct-manipulation and toolbar command

vectors have the property of being immediate vectors.

Neither menus nor dialog boxes have this immediate property.

Pedagogic VectorMenus 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.

Standard MenusMost 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.

Standard menusOther 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

Correct form of menusThe 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.

Menu item variantsDisabling 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.

Menu item variantsFlip – 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

Menu item variantsGraphics 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

Menu item variantsBang 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.

Menu item variantsAccelerators

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.

Menu item variantsMnemonics

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.

System menuPresent 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.

Dialog boxes

Dialog BoxesEngages 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.

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)

Dialog box basicsThe 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

Types of dialog boxesModal 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.

Modeless dialog boxesThe 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.

Thank You!