PURBANCHAL UNIVERSITY

Bachelor of Computer Application (BCA)

USER INTERFACE DESIGN (BCA 275CO)

Chapter-1
The Goal
Goals oriented design:
While developing any kind of software, the developer should focus on the goals
of that organization differ from each other. If the software is not goal oriented
then it is said to be meaningless software. If the developer are developing the
banking software, for some special cases the reverse transaction should be done.
In such cases, if the software doesnt have the option of reverse transaction then
it means the software doesnt satisfy the organization goals. The software we
design should focus on the goals i.e. the maximum requirement of the user.

Users goals:
All the users are not the same sometimes the organization goals can be matched
with each other but the user goal is always different from the each other. User
has its own view of doing the work. All the user in an organization should use
the same software i.e. designed for the organization purpose but if a user is
operating himself then the requirement of that user may be different from
others. Some of the users goals are:

Maximum security
Facilities of research and development
Implementation of DBMS
Familiar with his/her work
Updating facilities
It access to the internet
It can be implemented with newly introduced technologies

Software which are designed for satisfying the user goal is best for the user but
software designed for general purpose uses the common goal regarding the
daily life of the user. Example:-Microsoft word 2013 is designed for general
purpose which have common option and features for all types of user and is
used in every field generally for typing and report making.
1

Features of User Interface Design

The software should meet the user requirements.

It should be familiar with the user and its goal.
It shouldnt cause the user to make the big mistake.
Its interface should attract the user for doing the work.
User access to the software should be easy and efficient.
Software should be able to perform multiple transaction at a time.
It should be familiar with newly introduced technologies.
Graphical features should be implemented.

Software design:
Software design is a portion of development process i.e. responsible for
determining how the program will achieve the user goal. There are different
phases while designing software. All these phases are interrelated with each
other. The phases are listed below:Phase I
Phase II
Phase III
Phase IV
Phase V
Phase VI
Phase VII

Information gathering
Documentation
Interface design
Coding and programming
Testing
Implementation
Maintenance

All the above phases satisfy the SDLC (software development life cycle). The
software designer, the programmer and the program testing person may be
different because if we use third party for testing the program then it will
generate error, the more the error occurs it means the software is effective. In
these phases, there are some questions like: what the software program will do?
What the interface of a software will communicate with the user? Will the
developed software actually meets the user goal?
Models for Interface Design
1. Conceptual model: A conceptual model of an application is the model of
the application that the designer want the user to understand. By using the
application and reading the documentation the users built a model in the
mind of how to use the application. A conceptual model describes in term
of task, mouse action or screen graphics. The idea is that by carefully
crafting a conceptual model, it helps the user to understand and in a
systematic manner. A conceptual model makes the application familiar
with the users as simple as possible with few concept.
2

2. Mental model: This model have been studied as a part of effort to

understand how human knows, make decision and construct behaviour in
the variety of environment. A mental model is an internal scale model
representation of external reality. A mental model contains minimum
information. It is used to make decision in novel circumstances. A mental
model must be runnable and able to provide feedback on the result.
Human must be able to evaluate the result of action and change of state.
This information can be used to contribute to the work on artificial
intelligence and virtual reality.

3. Implementation model: An implementation model is a representation of

how a system actually works. It is often described with system diagram
and pseudo codes and later translated into real code. This model answer
the questions like: how does this work and is infact a description of the
way in which a developer will built the system? The reason why team
without user experience have extremely poor designed software for user
is exactly because the implementation model is reflected in every
interface element. User interface design by developer generally follow the
implementation model, their user interface is mapped to the program
functions. Users dont care how the developer make the system work.
Interface which dont respect this model can be difficult to use.

4. Manifest model: A computer software has a behaviour face, it shows to

the world, one made up by the programmer or designer. This posture is
not necessary and honest representation of what is really going inside the
computer. The ability to represent computer functioning interdependent
of its true action is far more implemented in the software than in other
medium. It allows a clever designer to hide some of the more fact of how
the software is really getting is the job done.
This disconnection between what is real and what is offered gives rises to
a third model in a digital world which is called manifest model. It is the
way the program represent its functioning to the user. In the world of
software, manifest model can be quite different from the actual
processing software of the program. For example: An operating system
can make a network file server looks as through s it was a local disk. The
fact is that the physical disk may be miles away is not made manifest by
the model. This concept of manifest model hasnt widely spread in the

mechanical world. The manifest model allow software creator to solve

the problem by simplifying within the software.
5. Canonical model: This model is design pattern is used to communicate
between different data format. This model is canonical in nature which is
the simplest form possibly based on the standard application integration
solution. The term canonical model is used to interchange with
integration strategies and often move to a message based integration
method.

Graphical User Interface:

Graphical user interface contain an interface which is graphical and made easy
to understand for the user. It is the collection of graphical objects. GUI is better
than CUI. GUI based program makes the user happy and easy to use the
software. The concept of GUI is different than other system because the
interface of the software should be user friendly and graphically attractive.

Character Based System:

Character user interface are powerful than other because character based system
are used by different users according to the needs. For character based system,
every command line is known as heart. Everything is done by command in this
system.

Visual User Interface:

The qualities that makes a user interface attractive and graphically familiar in a
software should be implemented by the designer or programmer. There are two
important users to use a centric qualities. The visualness of the software and the
program vocabulary. In order to realize the advantage of technology, the
interaction with the user become visual. So, visual interface has a feeling of
moving smoothly towards the users goal without confusing. The ability of our
unconscious mind to group thinking into pattern based on visual clue is what
allow us to process visual information. So, quickly and efficiently
understanding and applying this model of the human minds process visual
information is one of the key element of visual interface design.

Visual Programming:
The environment which provides visual interface for user is called visual
programming. The programming environment that support and allow the
programmer to interact with visual elements and pattern are programming
language.

Visual Interface Components:

The tools used to make visual interface are called visual component like text
box, command button, combo box, radio button etc. These components makes
the software easy to use for the users.

Canonical Vocabulary:
When GUI were first invented they were so clearly superior that they may
observe credited their success to the graphics. One of the most important reason
why those first GUI were better was that they were the first user interface to
restrict the range of their vocabulary for communicating with the user. The
input they could accept from the user went from a virtually unrestricted
command like to a tightly restricted set of mouse based action.
In command line interface, the user can enter any combination of character. In
graphical user interface, the user can point to image or word on the screen with
the help of a mouse pointer. Using the button of the mouse, the user can click,
double click, drag and drop. The vocabulary like English language takes at least
10 years to learn thoroughly and its complexity requires constant use to
maintain fluency. A properly formed vocabulary is shaped like a pyramid. The
main reason GUI are much easier to use is that they were the first platform to
enforce the canonical vocabulary. It has very little to do with graphics.

Scrolling,

Idioms applications

Delete,

sorting

create
Double click,

I/P symbols and actions

click

Individual actions
and feedback

Click drag
input

edit fields,
checkbox

Cursor text
output

Fig: canonical vocabulary

The bottom segment contain the atomic element of which everything in the
language is comprised. This is called primitive.
The middle segment are more complex construct creates by combining one or
more primitives. This is called compound.
The upper layer of the pyramid contain Idiom combine compound with
knowledge of problem known as domain knowledge. Domain knowledge is the
information related to the user application area and not especially to the
computerized solution.

Chapter-2
The Form
Interface Paradigms:
Empty screen is quite frightening as anything else. The software design should
focus on what the software looks like. There are three interface paradigms.
Technology Paradigm: Based on understanding how things work.
Metaphor Paradigm: Based on intuiting how things works.
Idiomatic Paradigm: Based on learning how to accomplished things.
Technology Paradigms:
Technology paradigm of user interface design is simple and incredibly wide
spread in the computer industry. The technology paradigm means that the
interface is express in terms of its construction of how it was build. In order to
successfully use it the user must understand how the software works.

Metaphor Paradigm:
The metaphor paradigm realize on intuitive connection in which there is no
need to understand the mechanism of the software. So, it is a step forward from
the technology paradigm. Intuition is actually a mental comparison between
something and things we have already learnt, in particular the idea that
metaphor are firm foundation for user interface design is a very misleading
proportion metaphor in the user interface design means visual metaphor. A
picture of something used to represent that thing. User can understand the
purpose of the thing. Metaphor range from the tiny image on the toolbar button
to the entire screen on some programs.

Idiomatic Paradigm:
The idiomatic paradigm of user interface design solves the problem of both
technology paradigm and metaphor paradigm. It is based on learning. They do
not have metaphosis meaning at all. Most of the graphical component such as
menu bar, title bar, caption, and button are idioms. Idioms are easy to learn.
Good idiom only need to learn once.

Branding:
Synthesizing idioms is the essence of product branding. For example: Flying
window. Many of the familiar elements of GUI which are thought of as
metaphosis are actually idiomatic.

Affordances:
When we see something we know how to use it. Affordances is defined as the
perceived and actual properties of the thing, primarily those fundamental
properties that determine just how the thing could possibly be used. For
example: switch for door bell. When things are manipulated with hands i.e.
manual affordance. Affordance can sometime mislead, so there can be text
which will describe its use.
Document management:
Besides rendering the document as a single entity. There are several goal
directed functions threat the user may need and each one should have its own
corresponding functions.

Creating a copy of the document.

Creating a milestone copy of the document
Naming and renaming the document
Placing and repositioning the document
Specifying the stored format of document
Reversing some changes
Abandoning all changes

Creating a copy of the document:

This should be an explicit function called make snapshot copy. The word
snapshot make it clear that the copy is identical to the original, why also making
it clear that the copy is not tied to the original in anyway i.e. subsequent
changes to the original will have no effect on the copy. The new copy should be
given a name with a standard from like copy of alpha, where alpha is the
name of the original document. If there is already a document with the name,
the new copy should be named second copy of alpha. The copy should be
placed in the same directory as the original.

Creating a milestone copy of the document:

Making a milestone is very similar to using the copy command. The difference
between them is that the milestone copy is managed by the application after it is
made. The user can call up a milestone dialogue box that reach each milestone
copy along with the various statistics about it with a click, the user can select a
milestone copy and by doing so, immediately return to its the active document.

Naming and renaming the document:

The name of the document should be shown right on the application toolbar. If
the user decide to rename the document, he can just click on it and edit it in
place.
Placing and replacing the document:
Most documents that are edited already exists. They are opened rather than
created from scratch. This means that their position in the file system is already
established. If the users wants to explicitly place the documents somewhere in
the file system hierarchy, he can request this function from the menu. A relative
of the save as dialogue appears with the document highlighted. The user can
then move the file to any dialogue location. Essentially, all files are placed
automatically by the program, and this dialogues is used only to reposition
them.

Specifying the stored format of document:

There is an additional function implemented on the save as dialog box. The
combo box, add button of the dialog allows the user to specify the physical
format of the file. This function should not be located here. By trying the
physical format to the act of saving, the user is confronted with additional
unnecessary complexity. Saving should be a very simple act. From the users
point of view, the physical format of the document whether it is rich in text,
ASCII or word format, for example: a characteristics of the document rather
than of the disk file, so specifying the format should not be associated with the
act of saving the file to disk.

Reversing some changes

If the user inadvertently make change to the document that must be reversed,
the tool already exists for correcting these actions-undo. The file system may be
the mechanism for supporting the functions but that doesnt mean it should be
9

rendered to the user in those terms. The concept of going directly to the file
system to undo changes merely underlines the undo functions.

Abandoning all changes:

It is not uncommon for the users to decide that he wants to discard all of the
changes he has made since opening or creating a document. So, these action
should be exclusively supported. Rather than forcing the user to understand the
file system to achieve his goal, a simple abandon function on the main menu
would suffice because this function involves significant data loss, it should be
protected by clear warning sign.
NOTE: The document is a well-established concept in the mechanical
world. It is and object that can be read by those who care to and it often
can be manipulated with writing or drawing instruments. A document can
be transported, owned and stored.

Storage and retrieval system:

In the physical world, storing and retrieving and item are inextricably linked;
putting an item on a shelf (storing it) also gives us the means to find it later
(retrieving it).
Retrieval Method:
A retrieval is a method for finding goods in a repository. It is a logical system
that allows the goods to be located according to some abstract value, like its
name, position or some aspects of its contents. There are 3 fundamental ways to
find a document.

Position Retrieval:
Find the document by remembering where it was kept.
Identity Retrieval:
Find the document by remembering its identifying name.
Associative Retrieval:
Associative retrieval is based on the ability to search for a document based on
some inherent quality.

10

Storage System:
A storage system is a tool for placing goods into a repository for sale keeping. It
is composed of a physical container and the tools necessary to put objects in and
take them back out again.

Development platform:
The computer industries often makes a further miscalculation that makes
keeping old computer around past their prime seen harmless by comparison,
many development teams create software that win accommodate all existing
hardware. Their management usually collides in the ever-by encouraging them
to support the five, six or seven years old computers that are still ticking away
in cooperate office, arguing that would be too expensive to replace all of those
computers. These ignores the fact that the cost of developing software to
support both old and new hardware is generally significantly greater than the
cost of purchasing and supporting the move powerful new hardware. This
means that, if the software is written to accommodate to those old computers it
will save money on the hardware just to spend it on the software, resulting in
software at greater cost.
It should be the responsibility of the management to assure that the computers
on desktop throughout the company are as modern as can be when new software
is ready.
To develop software for modern platform, we must design for hardware that
will be readily available for six to twelve months after the product first ships. It
might take a year to develop the software and another six months for it to
penetrate their organizations and the state of the market computers will be even
more powerful than today.

An Associative Retrieval System:

An associative retrieval system would enable us to find documents by their
contents. For example: we could find all documents that contains the text string
hello world for such a search system to really be effective, it should know
where all documents can be found, so the user does not have to say go look in
such a directory and find all documents that mention hello world. An
associative retrieval system would also help the user create temporary or
permanent groups of documents and use them as the basis for searches. A wellcraft associative retrieval system would also enable the user to browse by
synonyms or related topics or by assigning attributes to individual documents.
11

The user can then dynamically define sets of documents having those
overlapping attributes.

Inter-operability:
Windows developer often face program with legacies as successful DOS
program. Many applications are brought to windows after they have had a long
and profitable run in a DOS character based command line environment.
Common wisdoms holds that the windows program should better the DOS
programs as closely as possible. Thousands of satisfied costumers wants to
move to windows goes the logical and they will be badly disappointed if the
program is different from what they already know and love. Beside many of
our corporate users work in heterogeneous environment and they want the
windows version to work the same way as their DOS system. This concept is
called Inter-operability.

Multiplatform Development:
Anything that increases the complexity of source code should be avoided at
every cost. It will magnify the time it takes both to write and to debug. The
main job of the software development manager is to avoid uncertainly and
delay. Simultaneously multiplatform development generates more uncertainly
and delay. The compromises and confusion will ultimately result in the quality
of our product suffering. In the quiet of the office it seems so harmless, so easy
to add a few If else statement to the source code and which benefits and
supports external hardware platform. There are several commercially available
libraries of code that will let us develop on multiple platform simultaneously. In
order to do so, they demand that we design for a generic GUI, which the library
then runs on each platform. This may be good for development team but the
users will dislike it intensely. They will immediately detect the homogenous of
the interface and will not appreciate it. There are two ways to do simultaneous

Multiplatform development and both of them are not good. We can make the
code more complicated or we can homogenize the interface.
A much simpler, safer and more effective way to solve the problem is by
developing for a single platform first. This will typically be window, the market
leaders by a wide margin. We completely avoid the complexities of
multiplatform development, finish the first version with the greatest possible
speed and ship it to the largest possible market.
12

History of GUI:
Microsoft window derive its appearance from apple Macintosh or from Alto.
PARCs research output contributed many significant things such as mouse,
rectangular window, scroll bar, push button, desktop, metaphor, pull down
menu etc. Xerox tried to commercialize but could not succeed because the
system was too expensive and complex.
Microsoft and apple mac tried to implement. Apple mac, Steve job and the
refugee of PARC developed LISA but it was remarkable and exciting. Steve
Jobs was not detected by the failure of the LDA. Later mac was successful in
developing user friendly interface. Microsoft was also successful. Microsoft
initially implemented GUI in spreadsheet program Multiplan. PARC principal
was metaphoric GUI MAC took overlapping windows from PARC. Tilling was
the diverged concept from Xerox and Apple.
Child Form:
Many programs available today have parent and child (sub-ordinate) window.
Uses of window space:
Add window if there is some purpose (Goal Oriented). Build function control
into the window where they are used. For separate function a separate space
colour palate should be in the drawing area but clip can be taken from separate
windows. To have many windows for each function is called window pollution
make less number of dialogue box if possible.

File System:
The part of modern computer system that is the most difficult to understand in
file system, the facilities that stores program and data files on disk. The
computer file system is the tool, it uses to manage data and program store on
disk. The implementation model of the file system runs contrary to the mental
model all must all user bring to i.e. In other works, the picture files or
documents as typical documents in the real world and with the behaviour
characteristics with of those real objects. In the simplest term, the user
visualized two silent fact about all documents. First, there is only one document
and second it belongs to the users. The file system implementation model
violates both of these role. There are always at least two copies of document
and both belongs to the program.

13

Chapter-3
Software Behaviour
Sensible Interaction:
One of the essential part of achieving a good user interface is interacting with
the user in a sensible manner. Many program put dialog box up for no better
reason than habit of programming ease. If someone wants to change xyz.doc
to xyz1.doc, he would simply position the mouse between the z and the dot(.),
click to get and edit caret and then enter the number 1 from the keyboard
followed by an enter to close the dialogue box. The tragic part of this is that it is
perfectly legal to take such a sequence of action. However, if he do take those
action, nothing sensible happens. The dialogue box closes and the program
continuous casually on its way, no acknowledgement of the fact that no change
was made to the files name. To change the name of the file. He must enter new
file name in the second text edit box. He would have to enterxyz.doc from the
keyboard and then press enter to accept the change.
Flow of states:
Human can plane on the step too, when they really concentrate on an activities.
The state is generally called flow. Flow is defined as a condition of deep and
early meditative involvement. Flow often induces a gentle sense of euphoria
and make us unaware of the passage of time. Most significantly a person in a
state of flow can be extremely productive, especially when engaged in process
oriented task such as engineering, design, development and writing. All of
these tasks are typically performed on computers while interacting with
software. Therefore, it makes us to create a software interaction that promotes
and enhances flow rather than one that includes potentially flow breaking or
flow disturbing behaviour we want our program interaction to be so smooth that
the user is undisturbed and can remain in the state of flow. If the program takes
the user out of flow, it may takes several minutes to remain that productive
states.
Techniques for inducing and maintaining flow:
To create flow our interaction with software must become transparent. There are
several excellent ways to make our interfaces recede into invisibility. They are:

Follow mental model

Direct dont discuss
Keep tools close at hand
Give modeless feedback
14

Follow mental model:

Different users will have different mental models of a process, but they will
rarely visualize them in terms of the detailed innards of the computer process.
Each user naturally forms a mental image of how the software performs its task.
The mind looks for some patterns of cause and effect to gain insight into the
machine behaviour.

Direct dont discuss:

Many developers imagine the ideal interface to be a two way conversation with
the user. However, most users dont see it that way. Most user would rather
interact with the software in the same way they interact with, say, their car.
They open door and get in when they want to go somewhere. They press the
accelerator when they want the car to move forward and the brake where it is
time to stop.
Software try to engage us in a dialogue to inform us of our short comings and to
demand answers from us. From the users point of view, the roles are reversed,
it should be the user doing the demanding and the software doing the answering.

Keep tools close at hand:

Most programs are too complex for one mode of direct manipulation to cover
all of their features. Consequently, most programs offer a set of different tools
to the user. This tools are different modes of behaviour that the program enters
offering tools is a compromise with complexity but we can still do a lot to make
tool manipulation easy and to prevent it from disturbing from flow. Mainly, we
must ensure that tool information is enough and easy to see and attempt to make
transitions between tools quick and simple.
Tools should be close at hand, preferably on toolbar. This way the user can see
them easily and can use the edges of the display screen to show the user
information about the action in the centre that is being directly manipulated.

15

Give modeless feedback:

When the program has information or feedback for the user, it has several ways
to present it. The most common method is to pop-up a dialogue box on the
screen. The technique is modal. It puts the program into a mode that must e deal
with before it can be returned to its normal state and before the user can
continue with his task. A better way to inform the user is with mode less
feedback.
Feedback is modeless whenever information for the user is built into the normal
interface and doesnt stop the normal flow of system activities and interaction.

Multiple Document interface (MDI):

Several years ago, Microsoft begin developing a new method for organizing the
functions in a window application. They called this the multiple document
interface or MDI. It satisfied a need apparent in certain categories of
applications, namely those that handle multiple instances of a single type of
document simultaneously. Two condition have emerged in the years since MDI
was made a standards. First, the facility was tragically abused by well-meaning
programmers. Second, our computer have got much more powerful-to the point
where multiple instances of programs each with a single document are very
feasible.
Now Microsoft seems to be turning its back on MDI and embracing something
called single document interface (SDI). It seems that MDI didnt fix all the
problem after all.
If you want to copy a cell from one spreadsheet and paste it to another, the
process of opening and closing both spread sheet in form in very clunky. It
would be much better to have two spreadsheet open simultaneously. There are
two ways to accomplish this. We can have one spreadsheet program that can
contain two or more spreadsheet instances inside of it.
We can have multiple instances of the entire spreadsheet program, each one
containing a single instance of spreadsheet. The second option is technically
superior but it demands high performance equipment.

Excise task:
Excise task in computer can be configuring networks, making backup,
connecting to online services and installing sound cards. The problem with
excise task is that the effort we expand in doing them doesnt go directly
16

towards accomplishing our goals. Instead, it goes towards satisfying the needs
of the tool we use to accomplish our goal.
It is overhead. It is the percentage that the house gets. It is friction in the system
without exception, where we can eliminate the need for exercise takes, we make
the user more effective and productive and improve the usability of the
software. As a software designer, we should become sensitive to the presence of
excise and take steps to eradicate, it with the same enthusiasm a doctor would
apply to curing and infection.

Why do we need to eliminate excises task?

Excise is a extra work that satisfy the need of our tools as we use them to
achieve our objectives. The distinction between excise task and revenue
task becomes sometime so hard to see that we become habituated to the
excise as being part of our task. Excise task are those task that we
perform for the benefit of our tools and not for our goals. For example : to
create a software interaction, we need to install a program, then the task
like configuring networks, making backups, connecting to the online
services and installing sound cards all are excise task.
The problem with excise task is that the effort we spend in doing them doesnt
go directly towards accomplishing our goals but rather it goes towards the
satisfying needs of the tools that we use to accomplish our goal.
If we eliminate the need for excise task, we can make the user more effective
and productive and improve the usability of the software. From the designers
point of view, it is necessary to sense the presence of excise and take steps to
eradicate it.
Installing software is the largest excise task for us and eliminating it from our
necessary task will certainly offer clear benefit. Even there are many such
instances of excise, particularly in GUI. Normally, all window management task
can be considered as excise task. Dragging, reshaping, resizing, reordering,
filling and cascading windows all are excise action.
If the goal is achieved by going through the several heavy excise task, then the
user may feel about the interaction as feasible and hence it is necessary to
minimize the overhead and eliminate the excise task to remove the weakness
about the interaction in the users mind.

17

Task coherence:
If the program would predict what the user will do next, it may provide a better
interaction. If the program could know which selection the user will make in a
particular dialogue box, that dialogue box could be skipped. Hence, the advance
knowledge of what actions the user will make could be great idea of interface
design. It means that the six sense could have been built into the program to tell
exactly what the user will do next.
What is needed here is to give the program a memory: memory doesnt mean
RAM here, but a memory like that of human being. If the program simply
remembers what the user did the last time, it can use that remembered behavior
as a guide, how it should behave the next time. The idea to predict what a user
will do by simply remembering what he did last is based on a simple principle
called task coherence.
When the task coherence can be applied to the software, a great advantage can
be achieved. While using the program, there is a high percentage chance that
what the user does will be the same as what he did the last time he used the
program. The behaviour of the users can be predicted by simply remembering
what they did the last time when they used the program. This allows to greatly
reduce the number of questions the program ask the users.
A program should remember the information from run to run. Also the program
should use the previous setting as default and it will have a much better chance
of giving the user what he wanted. Even the options that the user ad set last time
should be remembered. So that they could remain in effect until manually
changed. Once the user has ignored the facilities of the program or turned them
off, they should not be offered again.
User can get benefits in several ways for a program with good memory.
Memory reduces excise the useless effort spend to manage the tool instead of
doing the work. A program with better memory can reduce a number of errors
the user makes. This is true simply because the user as to enter less information
more of it will become by default from the programs memory. For example
while entering data in a invoice, less typing is needed and if any unfamiliar data
entry is made, the field turns yellow indicating the uncertainty about the match.
Task coherence predicts what the user will do in the future with reasonable but
not absolute uncertainty.
Task coherence introduces two principles characteristics patterns in the ways
people makes choices. They are:
Decision-set stream line
Preference threshold
18

Chapter-4
User-Computer Interaction

Indirect manipulation:
As we roll the mouse around on the desktop, we see a visuals symbol, the
cursor moves around on the video screen in the same way, move the mouse left
and the cursor moves left, move the mouse up and the cursor moves up and so
on. As we use the mouse we immediately get the sensation that the mouse and
cursor are connected. A sensation that is extremely easy to learn and equality
hard to forget. This is good because perceiving how the mouse work by
inspection is nearly impossible. The motion of the mouse to the cursor is not
usually one to one instead the motion is proportional.

Mouse Event:
Pointing: This simple operation is a corner stone of the graphical user
interface and is the basis of all mouse operations. The user moves mouse
until its corresponding on screen cursor is pointing to a place over desired
object.
Clicking: While the user holds the mouse in a steady position, he clicks
the button down and release it. In general, this action is defined as
triggering a straight change in a gizmo or selecting an object. In a matrix
of text or sells, the click means bring the selection point over here. For a
push button gizmo, a state change that while a mouse button is down and
directly over the gizmo, the button will enter and remain in the push state.
When the mouse button is released, the button is triggered and associated
action occurs.
Clicking and Dragging: The versatile operation has many common uses
including selecting, reshaping, repositioning, drawing, dragging and
dropping.
Double Clicking: If double clicking is composed of single clicking twice
then it seems logical that the first thing a double clicking should do is the
same thing that a single click does. Single clicking selects something,
double clicking selects something and then takes action on it.

19

Chord Clicking: Chord clicking means pressing two buttons

simultaneously, although they dont really have to be either pressed or
released at precisely at a same time. To qualify be as a chord-click, the
second mouse must be pressed at some point before the first mouse
button is released. There are two variants to chord-clicking.
The first is the simplest, whereby the user merely points to something and
press both buttons at the same time. The second variant is using chordclicking to terminate a drag. The drag begins as a simple, one-button
drag; then the user adds the second button.
Triple Clicking: Triple clicking is used to select entire paragraph, the
logic is simple. A single click selects a character, a double click selects a
word; a triple click selects a paragraph.
Double Dragging: Double dragging is used as selection tool. Example:
we can click in text to select entire word. So, expanding the function, we
can extend the selection word double dragging.

Cursor:
The cursor is visible representation on the screen of the mouse position. By
convention, it is normally a small arrow pointing slightly west-north but under
program control it can changes to any shape as long as it says relatively small.
Because the cursor frequently must resolve to a single pixel-pointing to things
that may occupy only a single pixel. There must be some way for the cursor to
indicate precisely which pixel is the one pointed to. This is accomplished by
always designating one single pixel of any cursor as the actual locus of pointing,
called the hotspot. For the standard arrow, the hotspot is logically the tip of the
arrow. Regardless of the shape of cursor assumes, it always has a simple hotspot
pixel.
As we move the mouse across the screen, something that the mouse points to
are inert: clicking the mouse button while the cursors hotspot is over them
provokes no reaction. Any object or area on the screen that reacts to a mouse
action is called plaint. A push-button gizmo is plaint because it can be pushed
by the mouse cursor. Any object that can be picked up and dragged is plaint,
thus any directory or file icon in the File Manager or Explorer is plaint. In fact,
every cell in a spreadsheet and every character in text plaint.

20

Hinting:
There are three basic ways to communicate the pliancy of an object to the user
by the static visual affordance of the object itself, its dynamically changing
visual affordances, or by changing the visual affordances of the cursor as it
passes over the object. If the pliancy of the object is communicated by the static
visual affordance of the object itself is called static visual hinting. Static visual
hinting merely indicates the way the object is drawn on the screen.
Some visual object that are plaint are not obviously so, either because they are
too small or because they are hidden. If the directly manipulable object is out of
the central area of the programs face, the side posts, scrollbars or status bars at
the bottom of the screen. For example: the user simply may not understand that
the object is directly manipulable. This case calls for more aggressive visual
hinting which is called active visual hinting.

Cursor Hinting:
If the pliancy of the object is communicated by a change in the cursor as it
passes over is called cursor hinting. Because the cursor is dynamically
changing, all cursor hinting is active cursor hinting.
Although cursor hinting usually involves changing the cursor to some shape that
indicates what type of direct manipulation action is acceptable, its most
important role is in making it clear to the user that object is pliant. It is difficult
to make data visually hint at its pliancy without disturbing its normal
representation, so cursor hinting is the most effective method. Some gizmos are
small and difficult for users to spot at readily as button and cursor hinting is
vital for the vital for the success of such gizmos. The column dividers and
screen splitters in MS-Excel are good examples.

Focus:
Focus indicate which program will receive the next input from the user. Focus
can be also called activation as there is only one program active at a time. This
is purely from the users point of view, programmers will generally have to do
more homework. The active program is the one with the most prominent
caption bar. In its simplest case, the program with the focus will receive the next
keystroke. Because a normal keystroke has no location component, the focus
cannot change because of it but a mouse press does have a location component
and can cause the focus to change as a side effect of its normal command. A
mouse click that changes the focus is called a new focus click. If we click the
21

mouse somewhere in the window that already has the focus then it is called
infocus click. An infocus click is the normal case and the program will deal
with it as just another mouse click, selecting some date, moving the insertion
point or invoking a command.

Selection
Object Verb:A fundamental issues in user interface is the sequence in which commands are
issued. Most every command has an operation and one more operand. The
operation describes what action will occur and the operations are the target of
that operation. Operation is referred as verb and the operand is referred to as
object. We can specify the verb first followed by the object which is called verb.
Object or we can specify the object first followed by the verb which is called
object verb.

Insertion and Replacement:

Selection indicates which data the next function will operated on. If the next
function is write command, the incoming data writes on the selected data. In the
discrete selection, one or more discrete objects are selected and the incoming
data is handed to the selected discrete objects which process them in their own
way. This causes a replacement action where the incoming data replaces the
selected objects.
In concrete selection, the incoming data always replaces the currently selected
selection can shrink down to a single point that indicates a place in between two
bits of data rather than one or more bits of data. This in between place is called
insertion point.

Discrete Data:
Some program represent data as distinct visual objects that can be manipulated
independently of other objects. This objects are also selected independently of
each other. They are called discrete data and selection within them are called
discrete selection.

22

Mutual Exclusion:
When a selection is mode, any previous selection is unmade. This behaviour is
called mutual exclusion, as the selection of one excludes the selection of other.
Typically, the user clicks on an object and it becomes selected. That object
remain selected until the user selects else. Mutual exclusion is the role in both
discrete and concrete selection.

Additive Selection:
If mutual exclusion is turned off in discrete selection, we have the simple case
where many independent objects can be selected merely by clicking on more
than one in turn, called additive selection. For example: A list box can allow the
user to make as many selection as desired an entry is then be selected by
clicking it a second time. Once the user has selected the desired objects, the
terminating verb acts on them collectively. Most discrete selection system
implement mutual exclusion by default and allow additive selection only by
using a Meta key. Concrete selection system should never allow additive
selection because there should never be more than a single selection in a
concrete system.
Group Selection:
The click and drag operation is also the basis for group selection. In a matrix of
text or cell, it means Extend the selection. From the mouse down point to the
mouse up point. This can be also modified with Meta keys.
In a collection of discrete objects, the click and drag operation generally begins
a drag and drop move. If the mouse button is pressed in the open area between
objects rather than on any specific objects then it has a special meaning. If
creates a drag rect.
A drag rect is a dynamic grey rectangle whose upper left corner is the mouse
down point and whose lower right corner is the mouse up point. When the
mouse button is released, any and all objects in close within the drag rect are
selected as a group.

23

Fig: group selection

Gizmos Manipulation:
Most gizmos like buttons, push button, check boxes and radio button merely
required by the user to move the cursor over them and click the mouse button
once. In term of gizmo variants, these are minority but in terms of the number
of actions a user will take in the average execution of a typical application,
single clicking on the buttons and push buttons is likely to be a majority. Single
button click operation are the simplest of direct manipulation idioms and the
ones that work hard based with gizmos that specifies operation immediately.
Naturally, these functions are the ones that fall into the users working set and
will be invoked most frequently.

Repositioning:
Repositioning is the simplest act of clicking on an object and dragging it to
another location. Gizmos that depend on click and drag motions include icons
and the various repositioning, resizing and reshaping idioms. Repositioning is a
form of direct manipulation that takes place on a higher conceptual level than
that occupied by the object, we are repositioning. That is we are not
manipulating some aspect of the object but simply manipulating the placement
of the object in space. This action consumes the click and drag action, making it
unavailable for other purposes. If the object is repositionable, the meaning of

24

click and drag is taken and cannot be devoted to some other actin within the
object itself.
To move an object, it must be first selected. This is the way selection must take
place on the move-down transition; the user can drag without having to first
click and release on an object to select it, then click and drag on it to reposition
it.

Resizing and Reshaping:

When referring to the desktop of windows and other similar GUIs, there isnt
really any functional difference between resizing and reshaping. The user
adjusts a rectangular windows size and aspect ratio at the same time and with
the same control by clicking and dragging on a dedicated gizmo. Thickframes
and shangles are fine for resizing windows, but when the object to be resized is
a graphical element in a painting or drawing program, it is not acceptable to
permanently superimpose controls onto it. A resizing idiom for graphical
objects must be visually bold to differentiate itself from parts to the drawing,
especially the object it controls, and it must be respectful of the users view of
the object and the space it swims in. The resizer must not obscure the resizing
icon. There is popular idiom that accomplishes the goals. It consists of eight
little black squares positioned one at each corner of a rectangular object and one
centered on each side. These little squares are often called handles. It is
sometimes also called grapples.
Grapples are boon to designers because they can also indicate selection. This is
a naturally c symbiotic relationship, as an object must usually be selected to be
resizable. The grapple centered on each side moves only that side, while the
other sides remain motionless. The grapples on the corners simultaneously
move both of the sides they touch.

Direct Manipulation Visual Feedback

We can divide the direct manipulation process into 3 distinct phases:
Free phase: Before the user takes any action. In free phase, our job is to
indicate direct manipulation pliancy.
Captive phase: Once the user has begun the drag. In the captive phase, we
have two tasks. We must positively indicate that the direct manipulation
process has begun, and we must visually identify the potential
participants in the action.
25

Termination phase: After the user releases the mouse button. In the
termination phase, we must plainly indicate to the user that the action has
terminated and show exactly what the result is.
Drag and Drop:
Any mouse action is very efficient because it combines two command
components in a single user action: a geographical location and a specific
function. Drag and drop is doubly efficient because, in a single, smooth action,
it adds a second geographical location. Although drag and drop was accepted
immediately as a cornerstone of the modern GUI, it is remarkable that drag and
drop is found so rarely outside of programs that specialize in drawing and
painting. Thankfully, this seems to be changing, as more programs add this
idiom. There are several variations of drag and drop, and they are only a subset
of the many forms of direct manipulation. The characteristics of drag and drop
are fuzzy and difficult to define exactly. We might define it as clicking on
some object and moving it elsewhere, although that is a pretty good description
of repositioning, too. A more accurate description of drag and drop is clicking
on some object and moving it to imply a transformation.
We can drag and drop something from one place to another inside our program
or we can drag and drop something form inside our program onto some other
program. These variants are called interior drag and drop and exterior drag and
drop respectively. Interior drag and drop can be made simple both from a
conceptual and from coding point of view. Exterior drag and drop demands
significantly more sophisticated support because both program must subscribe
to the same concept and they must be implemented in compatible ways.

Source and Target:

When the user clicks on discrete objects and drag it to another discrete object in
order to perform a function then it is called source and target. The object within
which the dragging originates controls the entire process, so it is the master an
icon, that icon is a window. If we are dragging a paragraph of text, to enclosely
editor to the window when the user ultimately releases the mouse button,
whatever was dragged is dropped on some target object.
Master and target is more function oriented idiom, where manipulating logical
objects represents some behind the scenes processes. The most familiar form of
master and target drag and drop is rearranging icons in the Program Manager or
in the Macintosh Finder.

26

How master and target works?

As soon as the user presses the mouse button over an object, that object
becomes the master object for the duration of the drag and drop. On the
other hand, there is no corresponding target object because the mouse-up
point hasnt yet been determined: it could be on another object or in the
open space between objects. However, as the user moves the mouse
around with the button held down-remember, this is called captive phasethe cursor may pass over a variety of objects inside or outside the master
objects program. If these objects are drag and drop complaint, they are
possible targets and they are called drop candidate. There can only be one
master and one target in a drag but there may be drop candidate.
Depending on the drag and drop protocol, drop candidate may not know
how to accept the particular dropped values, it just has to know how to
accept the offered drop protocol. Other protocol may require that the drop
candidate recognized immediately whether it can do anything useful with
the offered mastered object. The latter method is slower but offers much
better feedback to the user.

Drag and Drop Problem and Solution:

When we are first exposed to the drag and drop idioms, it seems simple but for
frequent users and in some special condition, it can exhibits problems and
difficulties that are not so simple. As usual, the iterative refinement process of
software design has exposed there shortcomings, and in the spirit of inventions,
clever designers have devised equally clever solutions.

27

Chapter-5
The Cast
Toolbars:
Toolbars are the new kid on the idiom block although not an exclusive features
of windows. They were first popularized on this platform, not the Macintosh
like so many other GUI items. The toolbar has great strength and weakness but
they are complementary to those of its partner, the menu. The typical toolbar is
a text caption in a horizontal bar positioning adjacent to and below the menu
bar. Essentially the toolbar is a single horizontal view of immediate, always
visible menu items.
Toolbars are not menus:
Toolbars are often thought of as just as speedy version of the menu. The
similarities are hard to avoid. They often access to the program functions and
they form the horizontal row across the top of the screen. Designers imaging
that toolbars, beyond being a command vector in parallel to menus are an
identical command vector to those on menus. They think that the functions
available on toolbars are supposed to be the same as those available on menus.
The purpose of toolbar is quite different from the purpose of menus and their
composition should not necessarily be the same. The purpose of toolbars and
their controls is to provide past access to functions used frequently by those
who have already mastered the program basics. Toolbars offer nothing to
beginners and are not supposed to. The menu is where the beginner must turn
for help.
Toolbar provide experienced user with fast access to frequently used functions.
The great strength of menus is their completeness. Everything the user needs
can be found somewhere on the program menus.

Momentary Buttons and Latching Buttons:

Once combo boxes were admitted onto the toolbars, the precedent was set. The
dam was broken and all kinds of items appeared and were quite effective. The
original button was a momentary button-one that stays pressed only while the
mouse button is pressed. This is fine for invoking functions but poor for
indicating a setting. In order to indicate the state of selected data, new varieties
of buttons had to evolve from the original. The first variant was a latching
button-one that stays depressed after the mouse button is released.

28

Customizing Toolbars:
Microsoft has clearly seen these dilemma that toolbars represents the frequently
used functions for all users but that those functions for each user. This
confusion is solved by shipping the program with their best guess of what an
average person daily use gizmos will be and letting other customized things.
This solution has been diluted somewhat however by addition of non-daily used
functions. Its default buttons suite contains functions certainly are not
frequently used.
The program gives advanced user the ability to customized and configure the
toolbars to his heart contains. There is a certain danger in providing this level of
customized ability to the toolbars, as it is quite possible for a reckless user to
create a really recognizable and unusable toolbar.

Caption Bar:
If a dialog box doesnt have a caption bars it cannot be moved. All dialogue
boxes should be movable so they dont obscure the contained of the windows
they overlap. Therefore, all dialog boxes should have caption bar. Even the
windows style guide almost agrees on this point, saying In general, an
application should use only movable dialog boxes.

Terminating Dialog Boxes:

Every model dialog box has one or more terminating commands. Most model
dialog boxes has 3: The OK button, CANCEL button and CLOSE button on the
caption bar. The OK button means accept any changes I have made, then close
the dialog and go away. The CANCEL button means, reject any changes I
have made, then close the dialog box and go away.
The model dialog boxes makes a contract with the user that it will offer services
on approval-the OK button and a bold and simple way to get out without hurting
anything-the CANCEL button. This two buttons cannot be omitted without
isolating the contract and doing so deflates any trust the user might have had in
the program. It is extremely expensive in terms of stretching the user tolerance.
Never omit this two buttons or change their legends.

29

Expanding Dialog Boxes:

Expanding dialog box were big around 1990 but have declined in popularity
since then, largely due to the omni presence of tool bars and tabbed dialogs.
Expanding dialog unfold to expose move controls. The dialog shows a button
marked more or expand, and when the user presses it. The dialog box
grows to occupy move screen space. The newly added portion of the dialog box
contains added functionality usually for advanced users. Usually, expanding
dialog boxes allow infrequent or first time user the luxury of not having to
confront the complex facilities that more frequent user dont find upsetting. As
implemented, most expanding dialogs always come up in beginner mode. This
forces the advanced users to always have to promote the dialog. It is easy
enough to know which mode is appropriate. If a user expands the dialog then
closes it, it should come up expanding next time.
There has to be a shrink button as well as an expand button. The most common
way for doing this is to have only one button but to make its legend change
between expand and shrink as it is pressed. Once the dialog has been expanded,
it cannot be shrunk. Normally, changing the legend on a button is weak, because
it gives no clue as to the current state, only by indicating the opposite state. In
the case of expanding dialog, though the visual nature of the expanded dialog
itself is clear enough about the state the dialog is in.

Cascading Dialogs:
Cascading dialogs are a diabolically simple technique whereby gizmos, usually
push button, on one dialog box summon up another dialog box in a hierarchical
nesting. The second dialog usually covers of the first one. Sometimes the
second dialog can summon up yet a third one. It is simply hard to understand
what is going on with cascading dialogs. Part of the problem is that the second
dialog covers the first that is not a big issue after all combo boxes and pop-up
menus do that. The real confusion comes from the presence of a second set of
terminating button.
The strength of tabbed dialog is handling breadth of complexity while cascading
dialogs are better suited for depth. The problem is that excessive depth is a
prime symptom of a two complex interface. Examples of cascading are
common. Most print dialogs allow print setup dialog to be called and most print
setup dialog allow print driver configuration dialog to be called. Each layer of
dialog box is another layer deeper into the process and the user terminates the
uppermost dialog, the system returns control to the next lower dialog and so on.

30

Cascading dialog exists because they seem natural to the programmers and
because they mirror the physical processes underneath them.

Dialog Box Basics:

Most dialog have button, combo boxes and other gizmos on their surface and
although there are some rudimentary conventions, generally the designer places
them as she fit and not according to any conventional plan. The dialogs window
may or may not have a caption bar or thick frame. All dialog boxes have an
owner. Normally, this owner is an application program usually the one that
created it but it can be the window system itself.
Dialog boxes are always placed usually on top of their owning programs
although the window of other programs may obscure them. Every dialog boxes
has at least one terminating command, a control that, when activated, causes the
dialog box to shut down and go away. Generally, most dialog will offer at least
two push buttons as terminating commands, OK and CANCEL, although the
close box in the upper right corner is also a terminating command idioms.
It is technically possible for dialogs to not have terminating commands. Some
dialogs are unilaterally incepted and removed by the program for reporting on
the progress of a time consuming function. For example: So their designers may
have omitted terminating commands. The types of dialog boxes are:
a) Model dialog boxes:- In general, model dialogs are the easiest for
users(designers) to understand. The operation of a model dialog box is
quite clear, saying to the user, stop what you are doing and deal with me
now. When you are done, you can return to what you were doing. It is
classic subroutine. It is thus ideally suited for most functions like
summarizing and printing. The rigidly defined behaviour of the model
dialog means that although it may be abused, it will rarely be
misunderstood.
If a model dialog boxes is function oriented, it usually operates on the
entire program or on the entire active document. If the model dialog box
is process or property oriented, it usually operates on the current selection
because model dialog box only stop their owning application. They are
more precisely named application model.
Once the box comes up, the owning program cannot continue until the
dialog box is closed. It stops the proceedings, which is how it gets its
name. Clicking on any other window belonging to the program will get
31

the user only a rude Beep for his trouble. All of the controls and objects
on the surface of the owning application are deactivated for the duration
of the model dialog box.

b) Modeless dialog boxes:- The other variety of dialog box is called

modeless. They are less common then their model siblings and they are
more misunderstood too. Once the modeless box comes up the owning
program continues without interpretation. It does not stop the proceedings
and the application does not freeze. The various facilities and controls,
menus and toolbars of the main program remain active and functional.
Modeless dialog have terminating commands too, although the
conventions for them are far weaker and more confusing than model
dialogs. A modeless dialog box is much more difficult to use and
understand because the scope of its operation is unclear. It appears when
we summon it, but we can go back to operating the main program while it
stays around. This means that we can change the selection while to
modeless dialog box is still visible.
In some cases, we can also drag objects between the main window and a
model dialog box. This characteristics makes them really effective as tool
or object palettes in drawing type program.
The Modeless Dialog Problem:
Modeless dialog behaviour is consistence and confusing. They are
visually very close to model dialog boxes but are functionally very
different. There are few established behavioural conventions for them,
particularly with respect to terminating command and Microsoft is setting
a disturbing precedence with terminating buttons that change legends
contextually a poor construct.
Most of the confusion arises because we are more familiar with the model
and because of inconsistency that arise in the way we use dialogs. When
we see a dialog box, we assume that it is model and has model behaviour.

32

Different types of Dialog Boxes:

Property Dialog Box: A property dialog box presents the user with the
settings or characteristics of a selected object and enables the user to
make changes to his characteristics. Sometimes the characteristics may
relate to the entire application or document rather than just one object.
The font dialog box in word is a good example. The user selects some
characters, then request the dialog box from the menu. The dialog enables
the user to change font related characteristics of the selected characters.
We can think of property dialog as a control panel with exposed
configuration controls for the selected objects. Property dialog boxes are
usually model. It is easy to think a properties as an artefact of object
oriented programming because in that world that is how we refer to the
characteristics of things. A property dialog box generally controls the
current selection. This follow the object, verb form: the user selects the
object and then via the property dialog selects the new settings for the
selection.
Function Dialog Box: Function dialog box are usually summoned from
the menu. They are most frequently model like dialog boxes and they
control a single function like printing, inserting or spell checking.
Function dialog box not only allow the user to configure the details of the
action behaviour. In many program, for example, when the user request
printing, the user uses the print dialog to specify which pages to print, the
number of copies to print, which printer to output to and other setting
directly relating to the print function. The terminating OK button on the
dialog not only closes the dialog but also indicate the print operation.
This technique, combines two function into one: configuring the function
and invoking it. Just because a function can be configured, however does
not necessarily mean that user will want to configure it before every
invocation. The example by choosing a file, then executes the configured
command by pressing the terminating command button.
Bulletin Dialog Box: The bulletin dialog box is a devilishly simple little
artefact that is arguably the most abused part of the graphic user interface.
The bulletin is best characterized by the ubiquitous error message box.
There are well defined conventions for how this dialog should look and
work, primarily because the message call has been present in windows
API since version 1.0 normally, the issuing programs name is shown in
the caption bar and a very brief text description of the problem is
displayed in the body. A graphic icon that indicates the class of the
problem along with an OK button usually completeness the ensemble.
33

Both property and function dialog boxes are always intentionally

requested by the user which serves the user. Bulletin, on other hand are
always issued unilaterally by the program which serves the program.
Both error and confirmation message are bulletins.
Process Dialog Box: Process dialog box are erected at the program
description rather than at the user request. They indicate to the user that
the program is busy with some internal function and that it has become
stupid. The process dialog box alters the users to the programs inability to
respond normally. It also warns the user not to be overcome with
impatience and to resist banging on the keyboard to get the program
attention. All of todays desktop computers have a single microprocessor
or central processing system (CPU). CPU can do only one thing at a time,
although through concurrency where the CPU does tiny bit of work on
several programs in a kind of Round-Robin. A problem arises when
hardware becomes a part of the equation. The CPU cannot use concurrent
programming techniques if a chunk of hardware ties down the system for
a long time. This means that when the computer must access the disk or
the network, it cannot continue with other processing until the hardware
responds. If the CPU request something big from the disk, something that
seconds, the computer get stupid. Each process dialog box has 4 tasks:
Make clear to the user that a time consuming process is happening.
Make clear to the user that things are completely normal.
Make clear to the user how much more time the process will take.
Provide a way for the user to cancel the operation.

Menu and its types

Optional menus:
The view menu: The view menu should contain all options that influence
the way the user looks at the program data. Additionally, any optional
visual items like templates or palettes should be controlled here.
The insert menu: The inset menu is really an extension of edit menu. If
we only have one or two items, considered putting them in edit menu
instead an omitting the insert menu entirely.
The setting menu: If we have a setting menu in our application, we are
making a commitment to the user that anytime we want to alter a setting
in a program we will find the way to do it here.
34

The format menu: The format menu is one of the weakest of the optional
menus, as it doesnt almost exclusively with properties of visual objects
and not functions. In a more object oriented world, properties of visual
objects are controlled by more visual direct manipulation idioms and not
by the functions.
Tool menu: The tool menu sometimes called option or functions, is where
big, powerful transforms go. Functions like spell checking is considered
to be as a tool. The tool menu is where the hard-hat item go. Hard-hat
items are the functions that should be used by real power users. This
includes various advance settings.

Menu items variations

Disabling menu items:
A defined windows standard is to disable or grey out menu items when
they are not relevant to the selected data items. Menus have robust
facilities that make it easy to grey them out when their corresponding
function is not valid and we should take every advantage of this. The user
will be well served to know that the enabling and disabling of menu items
reflects their appropriate use. This function helps the menu to become an
even more robust teaching tool.
Cascading menus:
There is a variant of menus where a secondary menu can be made to
popup alongside to a top level popup. This technique, called cascading
menu, worth added to windows in version 3.1 so it has had only moderate
penetration in interface design where popup menu provide nice menu
client grouping. Cascading menu moves into the nasty territory of nesting
and hierarchies. Hierarchies are so natural to the mathematical included
but they are quite unnatural to rest of us. The temptation to make menus
hierarchical is nearly on avoidable for rest programmers who have
mathematical bent.
Flip-Flop menu items:
If the menu choice being offered is a binary one i.e. one that will be in
either of two states. We might take advantage of a trick for saving menu
spaces. For example: If we have two items, one called hide tools we
can create a single menu item that alters between two values always
showing the one current not chosen. This technique can be called as flip-

35

flop. This method saves spaces because otherwise it would require two
menus items with mutually exclusive check mark.
Graphics on menus:
Visuals symbols next to items help the user to differentiate between them
without having to read so the items are understood faster because of this
adding small graphics to menu items or really speed users up. They also
provide a helpful visual connection to other gizmos that do the same task.
In particular, a menu item should be shown the same image as its
corresponding tool bar button.

The system menu:

The system menu is that standard little menu available in the upper left
hand corner of the all independent windows. Program that use MDI gives
us system menus because the document qualifies as a window and can be
moved, minimized, maximized and so on just like its parent window. The
irony of this secret belie is just that it is a relic (packages of time). It
serves no useful purpose- originality it was to be the home system level
windows management commands but all of the initial ones have migrated
to immediate gizmos on the other end of caption bar of no new ones have
been called. The sole remaining purpose for the system menu is the
programming support for equivalent keyboard commands for moving,
resizing, maximizing and minimizing windows. It would be no lost to the
interface if the system menu were eliminated.
Further, the very existence of the system menu contributes to the general
level of ambient confusion: it is just another level on the mechanism with
no evident purpose except to generate worry in the users mind. When
MDI programs gives us two of the confusion generator, the uninitiated
cab be doubly misled. Windows itself put this menu on the top level and
MDI windows so the application designer doesnt really have much more
choice about it.

36

Standard Menus:
Menus are just about the heaviest idiom in the GUI universe which is
reversed and surrounded by superstition and love. We accept without
question that traditional menu design is correct because so many existing
program attest to its experience.
Most every GUI these days has attest a file and edit menu in its two
left most position and a help menu all the way over to the right. The
windows style guide states that these file, edit and help menus are
standard. The file menu is named after an accident of the way our
operating system work. The edit menu is based on the very weak clip
board and the help menu is frequently the least helpful source of insight
information for the confused users. The conventions of this three menus
trapped us into weak user interface for some vital parts of our programs.
After the window style guide declares the file, edit and help menus
standard, it then proceeds to ignore several other defect menu standards
like window, view, insert, format tools and options. Just because
they are not common to all program does not mean that they are not
standard. The simple fact that the user has seen one of this menus before
tells him something about the meaning of this instance contents. This
contributes to the trust worthiness of the application, which in turn
encourages the users to explore and learn and learning is the main
purpose of the menu system.
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
where it disappears leaving the original screen behind which is
untouched. The popup window is the mechanism used to implement both
pull down menus and dialog boxes. In a GUI, the menus are visible
across the top row of the screen. The user points and clicks on a menu
and its directly subordinate list of option immediately appears in a small
window just below it. This is called popup menu.
The user makes a single choice from the popup menu by clicking ones or
by dragging and releasing. There is nothing remarkable about that, except
that the menu generally go no deeper than this. Popup menu either takes
immediate effect or calls up a dialog box. The hierarchy of menus has
been flattened down until it is only one level deep. In other words, it has
finally become monocline grouping. The dialog box, another use of the
37

popup window, was the tool that simplified the menu. The dialog box
enable the software designers to encapsulate all of the soft choices of any
one menu option in a single and interactive container.
Hierarchical Menus:
In the late 70s, some very clever programmer came up with the idea of
offering the user a list of choices. He could read the list and select an item
from it. The hierarchical menu began at this time. The hierarchical menu
enables the users to forget many of the commands and options details
required by the command line interface instead of keeping the details in
his head, he could read them off the screen.
Although the paradigm was called menu based at the time, it was called
hierarchical menu based to differentiate it from the menu in wide spread
used today. The old pre-GUI menus were deeply hierarchical after
making a selection from one men, we could be presented with another,
then another and so on. Such menu based interface would be judged
terrible by todays standard. Their chief failing was the necessary depth
of the hierarchy. This was coupled with a striking lack of flexibility and
clarity in dealing with their users. For example:
Enter transaction
Close books for months
Print income statement
Print balance sheet
Exists

Monocline Grouping:
Hierarchies are one of the programmer most durable tools. Much of the data
inside program, along with much of the code that manipulates it, is in
hierarchical form and many programmers offer hierarchies to the user in the
interface. The early menus of personal software were hierarchical, but
hierarchies are generally very difficult for users to understand and use.
Humans are familiar with hierarchies in their relationships, but they are not
natural concept for them when it comes to sharing and retrieving information.
Most storage system outside of computers are very simple, composed either of a
single sequence of a stored objects or a series of sequences, each one level of
deep. This method of organizing things into a single layer of group is extremely
common and can be found everywhere in home and office because it never

38

exceeds a single level of nesting. This storage technique is called monocline

grouping.

Acceleration:
Acceleration provides an additional, optional way to invoke a function from the
keyboard. Accelerators are the keystrokes which are usually are a function key
(F9) or activated with a control, ALT or SHIFT prefix that are shown a right
side of some popup menus. They are a defined windows standards but their
implementation is up to the individual designers and they are often forgotten.
There are 3 tips for successfully creating of good accelerators:
Follows standard
Provide for their daily use
Show how to access them
Where standard accelerator exists to use them. In particular, this refer to the
standard editing set as shown on the edit menu. Users quickly learn how much
easier is to type CTRL+C and CTRL+V then it is to remove their mouse hand
from the home row to pull down the edit menu, select copy, then pull it down
again and select paste. Identifying the set of commands that will compromise
those needed for daily use is the tricky part. We must select the function likely
to be used frequently and assure that those menu items are given accelerations.

Mnemonic:
Mnemonics are another windows standards for adding key stroke commands in
parallel to the direct manipulation of menus and dialogs. The Microsoft style
guide covers both mnemonics and acceleration in details. Mnemonics are the
underlines letters in a menu item. Entering this letter shifted with the ALT metakey executes the menu item. The main purpose of mnemonics is to provide a
keyboard equivalent of each menu command. For this reason, mnemonics
should be complete, particularly for text oriented programs. Assure that the
mnemonics are consistence and thoroughly throughout. Mnemonics are not
optional. For those designers among us who dont use mnemonics, it is easy to
put bad mnemonics; to have non-unique characters within a menu or to use
really inappropriate and difficult to remember letters. Make sure that someone
on the development or design team action uses and refines the mnemonics.

39

Chapter-6
The gizmos
Gizmos are directly manipulate, self-contained, visual screen idioms. Gizmos
controls widgets or gadgets, they are a primary building blocks for creating
graphical user interface. They are closely identified with GUI programming,
being as fundamental to GUI construction as window, menus and dialog boxes.
The use of gizmos was coined by Mike Geary, a window programmer.
Microsoft called gizmos as controls. Gizmos are concentration of interface
design as much as they are modules of codes. They offer the great advantage of
shortening the development cycle while simultaneously presenting familiar
affordances to the users. They also offer the great disadvantage of locking
designers into old ways of thinking instead of living them free to create methods
of interactions that are more appropriate for the situation. They also give
designers a false sense look of security. Using gizmos doesnt automatically
make interface good. We need critically at this creation, understanding that they
are as much a result of accident as they are of conscious design.
Selection Gizmos:
Since the imperative gizmos is a verb, it needs a noun upon which to operate.
Selection and entry gizmos are two types used to select noun. A selection
gizmos allow the user to choose an operand from a group of valid choices. No
action is associated with selection gizmos. Selection gizmo can either present or
single choice (to which the user can only say yes or no) or it can present a group
of choices (from which the user can select one or more choices depending on
how the gizmo is configure). The list box and the checkbox are good examples
of selection gizmo.

Check Box:
The check box was one of the easiest visual gizmo idea invented and it remains
favourite for presenting a single binary choice. The check box has a strong
visual affordance for clicking:-it appears as a plaint area either because of its
little square or in Windows 95 because of its 3D recessing. Once the user clicks
on it and sees the check mark appears he has learnt all he needs to know to
make it work at will: click to check, click again to uncheck. The check box is
simple, visual and elegant text based gizmos. The checkable box acts as a
visually recognizable icon next to its discriminating text. Traditionally check
40

boxes are square user recognized visual objects by their set and the square
check box is an important standard.

Radio Button:
The behaviour of radio button is mutually exclusive, which means that when
one option is selected, the previously selected option automatically deselects
only one button can be selected at a time.

List Box:
Selection gizmos that presents list of text strings are often called pick list
because they offer list of items from which the user can pick a selection. The
pick list is a powerful tool for simplifying interaction because it eliminates the
possibly of making an incorrect selection. Essentially, a pick list is a gizmo for
selecting from a finite set of text strings. The first pick list was the list box
gizmos.

Combo Box:
Windows 3.0 introduced a new gizmos called the combo box. It is as its name
suggests-a combination of list box and an edit fields. It provides an
unambiguous methods of data entry into a list box. The other attributes of
combo box that makes it winner is its popup variant that is extremely
conservative of video a real estate.
With the combo box gizmo, there is clear separation between the text entry part
and the list selection part. The user confusion is minimized. The edit field can
be used to enter new items and it also shows the current selection in the list.
Because the edit field of the combo box shows current selection, the combo box
is by nature a single selection gizmo. Single selection implies mux, which is one
of the reasons why the combo box is fast replacing group of radio buttons got
mux linked options.
The utility of the combo box collapse if the situation calls for multiple selection;
the idiom just cant be handle it and we must return to the plain list box. The list
box consumes significant space on the screen-enough so that it should probably
never ne consider practical for permanent deployment.

41

Tree View Gizmo:

Windows 95 brings new gizmo called tree view gizmo. It is a list view that can
present hierarchical data. It shows a sideways tree with icons for each entry.
The entries can be expanded or compressed the way many outline processor
work. It is problematic for the users because of the trouble many people hare
with hierarchical data structure. If the tree view contents are restricted to on
more than two levels, however each can show a mono client grouping of data.

Entry Gizmos:
Entry gizmo enable the user to enter new information into the program than
nearly selecting information from an existing list. The most basic entry gizmo a
text edit field. Like selection gizmo, entry gizmo represent noun to the program.
Because one half of a combo box is an edit field, some combo box verifies
qualify as entry gizmos too. Any gizmo that lets the user enter a numeric value
is an entry gizmo.

Bounded and Unbounded Field:

Any gizmo that restricts the available set of values that the user can enter is
called the bounded entry gizmo. Regardless of the user action, no number
outside those specified by the program can be entered with a bounded gizmo.
The essential fact about bounded gizmo is that it is impossible to enter an
invalid value with one. A bounded gizmo only lets us to enter valid values. To
be bounded gizmo, it needs to clearly communicate preferably, visually, the
expectable data boundary to the users. An edit field reject the user input after he
has entered, it is not a bounded control. Edit field are never bounded entry field.
An edit field can accept data the user keys into it, this is called unbounded entry
gizmo. With an unbounded gizmos, it is easy to enter an invalid values. The
program may subsequently reject it but the user can still enter it. The primary
unbounded entry gizmo is the text edit gizmo. The simple box allows the user to
key in any text values. Edit fields are usually very simple boxes where a word
or two of data can be entered by the user but they can also be moderately
sophisticated text editor in their own right. The user can edit text within them
using the standard tools of concrete selection with either the mouse or the
keyboard. Text edit gizmos are generally used either as data entry field in
database application, as option entry field in dialog boxes or as the entry field in
a combo box. In all of these roles they are frequently called upon to do the work
of a bounded entry gizmo. If the desired values are finite, the text edit gizmo
42

should not be used. If the list of acceptable value is composed of text strings,
then a pick list should be used so the user is not forced to type.

Validation:
From the gizmo point of view, there is really no such thing as invalid data. Data
can only be adjudged invalid in the context of the program. Physically, an
unbounded entry gizmo cannot recognize invalid data-only the program can
make the actual determination of validity. An unbounded gizmo that is used to
gather bounded is in a moral bind.
If the data is bounded but not too bounded the program must let the user to enter
data only to reject it afterwards. There is one way to solve this problem: the
program should go ahead and accept whatever the users enters. In other words,
eliminate semi-bounded data. Although the validation gizmo is a wide spread
idiom, it is a very poor one. Tactically, although it is often necessary, so we will
ignore the bigger issues and look at practical way to make it better. The key to
successful designing of validation gizmo is to give the user generous feedback.
The main tool for validation gizmo is to provide rich status feedback to the user.
When a gizmo actively rejects keystroke doing the entry process then it is called
hot validation gizmo. If the gizmo waits until the user finishes entering data
before it edits the value then it is called cold validation gizmo.

Edit Field:
The text edit gizmo, with its familiar system font and visually articulated white
box, strongly afford data entry as well as data output. Software developer
frequently use the text edit gizmo for output only. If we have text data to output,
use a text gizmo and not a text edit gizmo. If we want to show the amount of
free space on disk, for example: dont use a text edit field because the user is
likely to think that we can get more free space by entering a bigger number.

Display Gizmos:
They are the adjectives of the gizmo grammar, modifying how our screen look.
This gizmo are used to display and manage the visual presentation of
information on the screen rather than the information itself. Typical example
include scroll bar and screen splitter. Gizmo that control the way things are
displayed visually on the screen fall into this category, as do those that merely
display static information for output only. Probably the simplest display gizmo
43

is the text gizmo. This variant of the static control class merely display written
message at some location on the screen.

Scroll Bar:
They are very frustrating gizmo, brought with problems, hard to manipulate and
wasteful of pixel. The scroll bar is both over used and under examine. The
singular advantage of scroll bar aside from its availability is its proportional
rendering of values. The scroll bar thumb, is the central, dragable box that
indicates the current position. If a scroll bar represents a percentage, for
example, the user can see that a scroll bar whose thumb is about equidistant
between the end represents a quantity of 50%. The fact that the scroll bar
conveys no information about its terminals detracts considerably from its
usefulness as a sliding value selector.
The scroll bar also demands a high degree of precision with the mouse.
Scrolling down or up in a document is generally much easier than scrolling
down and up in document. We must position the mouse cursor with great care,
taking attention away from the data we are scrolling.

Directly Manageable gizmo:

Gizmos are valuable tools for interacting with users because they encapsulate
lots of complex behaviour in a ready to use packages. The ready availability of
gizmos causes us to depend on them for designing user interface. We use them
because they are available.
The most striking area for invention is in bounded entry gizmos. So many
programs offer us dialog boxes with edit fields or spinners to gather data that
would more easily be entered through direct manipulation. Using click and drag
idioms in place of entry gizmos not only makes input clearer and easier but it
can also automatically change a previously unbounded gizmo to a bounded one.

Visual Gizmo:
Most of the traditional gizmos are merely encapsulation of text. Check boxes,
radio buttons, menus, text edit, list boxes and combo boxes are mostly text with
a thin veneer of graphics edit. They dont exploit the full potential of the GUI
medium.
Most programs, when they have option to offer to the user, describe those
options with text and offer that text to the user in a text based selection gizmo
44

like a combo box. If the option can be rendered visually. We should discard the
combo box and let the user point and click on a picture of what he wants instead
of just a text description.

Adding Visual Richness to Gizmos:

Adding visual richness to tradition gizmos, like adding icons to buttons, is an
area whose potential has barely scratched. Most gizmos can be enhanced with
the addition of graphics, animation and sound.
We design a progress meter that was functionally identical to run-of-the-mill
implementation but was a lot more engaging because of its visual richness. The
program downloaded a newspaper from an online service and the progress
meter reflected the status of that operations.

*******THE

END*******

45