vp all slides
TRANSCRIPT
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!