 Text Book:

 The essential guide to user interface design, Wilbert O

Galitz, Wiley DreamaTech.

 Reference Books:
 Ben Sheiderman, “Design the User Interface”, Pearson
Education, 1998.

 Alan Cooper, ”The Essential of User Interface Design”,

Wiley- Dream Tech Ltd.,2002
 To study the concept of menus, windows, interfaces.
 To study about business functions.
 To study the characteristics and components of

windows and the various controls for the windows.

 To study about various problems in window design

with text, graphics.

 To study the testing methods.
 The Students should be able to:

 Design the User Interface, design, menu creation,

windows creation and connection between menus
and windows.

 SYLLABUS
 What is User Interface?
 What is Human Computer Interaction (HCI)
alternatively Man–Machine Interaction (MMI) or
Computer–Human Interaction (CHI).
 It is the study of interaction between people (
USERS) and COMPUTERS.
 The user interface is the part of a computer and its
software that people can see, hear, touch, talk to, or
otherwise understand or direct.
 User interface design is a subset of a field of study
called human-computer interaction (HCI).
 Human-computer interaction is the study, planning,
and design of how people and computers work together
so that a person’s needs are satisfied in the most
effective way.
 UID designers must consider a variety of factors:
◦ what people want and expect.
◦ physical limitations and abilities people possess.
◦ how information processing systems work.
◦ what people find enjoyable and attractive.
◦ Technical characteristics and limitations of the computer
hardware and software must also be considered.
 The user interface is the most important part of
any computer system. Why?

 Software is a logical entity. It cannot be seen,

touched, heard or felt.
 The only way by which we can realize software is

through UI.
 It is the system to most users.
 The user interface has essentially two components:
 input and output.
 Input is how a person communicates his or her needs or desires
to the computer.
◦ Some common input components are the keyboard, mouse, trackball,
one’s finger, and one’s voice.
 Output is how the computer conveys the results of its
computations and requirements to the user.
◦ Today, the most common computer output mechanism is the display
screen, followed by mechanisms that take advantage of a person’s
auditory capabilities: voice and sound.
 Proper interface design will provide a mix of well-
designed input and output mechanisms that satisfy the
user's needs, capabilities, and limitations in the most
effective way possible.

 The best interface is one that it not noticed, one that

permits the user to focus on the information and task at
hand, not the mechanisms used to present the
information and perform the task.
 With today's technology and tools, and our
motivation to create really effective and usable
interfaces and screens, why do we continue to
produce systems that are inefficient and confusing
or, at worst, just plain unusable? Is it because:
 We don't care?
 We don't possess common sense?
 We don't have the time?
 We still don't know what really makes good design?
 A design is said to be good if it consists of a
combination of well designed input and output
procedures which fulfils the user's requirements in a
successful manner.
 A good design is one which possesses the following
features.
◦ It allows its users to focus on the data and activity.
◦ It provides data to its users for performing their activities
without using any specific procedures.
 The interaction design means designing interactive
products to support people in their everyday and
working lives.
 A good-designed interface is very useful to its users for
analyzing the performance of a system.
 It is a component that displays several complex
activities given to the system.
 A window's layout and looks does leave an impact on
the users.
 If the design is very complex, confusing and not sufficient enough then

the persons will face problems at their work and commit more mistakes.

 Improper designing may develop frustration in people towards the

system and they may stop using it.

 Several health problems may also arise like the people become

aggressive, stressful when they do not get what they expect from the

system, quickly and accurately.

 The most important benefit is that a good design increases the manufacturing rate of
the product and its demand in the market by the users.
 A researcher tried to enhance screen clarity and readability by reducing the
elements on the screen. Hence, the distinct objects which had been put on the same
display line to conserve area, were placed on different lines accounted for twenty
percent increase in the screen users. This is due to the reduction of elements on the
screen and better clarity. Productivity increased by 20%
 Some researchers manipulated the sequence of screens and which enabled the users to
compute the transactions in twenty-five percent less time and with twenty-five percent
less errors in contrast to those who used original screens.
A SYSTEM REQUIRING 4.8 MILLION SCREENS PER YEAR, IF WE MAKE SCREENS WITH
WEAK CLARITY THIS CAUSES THE USERS TO SPEND ONE EXTRA SECOND PER SCREEN.
THIS MAY TEND TO DECREASE THE SCREEN USAGE. HENCE WE SHOULD IMPROVE THE
CLARITY OF THE SCREEN WHILE DESIGNING.
 Good designing principles caused the users to take quick decisions.
 The correct layout of data on screens increases performance and
reduces the expenses of the company during its usage.
 Good designing minimizes the training costs due to less training
time.
 A good design leads to great user satisfaction as stress, frustration
and anger are reduced.
 The rate of customers increases due to the satisfactory service
provided to them by a good design interface.
 The economical advantage of good design is that it saves a great
amount of money by fixing the errors during the design process
itself rather than fixing them after the product's release.
 The need for people to communicate with each other has existed
since we first walked upon this planet.
 The lowest and most common level of communication modes we
share are movements and gestures.
◦ Movements and gestures are language independent, that is, they permit
people who do not speak the same language to deal with one another.

 The next higher level, in terms of universality and complexity, is

spoken language.
◦ Most people can speak one language, some two or more. A spoken language
is a very efficient mode of communication if both parties to the
communication understand it.
 At the third and highest level of complexity is
written language. While most people speak, not
all can write.
◦ But for those who can, writing is still nowhere near as efficient a
means of communication as speaking.

 In modem times, we have the typewriter, another

step upward in communication complexity.
◦ Significantly fewer people type than write. Spoken language, however,
is still more efficient than typing, regardless' of typing skill level.
 Through its first few decades, a computer's ability to deal with human
communication was inversely related to what was easy for people to do.

 The computer demanded rigid, typed input through a keyboard; people responded
slowly using this device and with varying degrees of skill.

 The human-computer dialog reflected the computer's preferences, consisting of one

style or a combination of styles using keyboards, commonly referred to as
Command Language, Question and Answer, Menu selection, Function Key
Selection, and Form Fill-In.
 Throughout the computer's history, designers have been
developing, with varying degrees of success, other human-
computer interaction methods that utilize more general,
widespread, and easier-to-learn capabilities: voice and
handwriting.
 Systems that recognize human speech and handwriting now
exist, although they still lack the universality and richness of
typed input.
 The Xerox systems, Altus and STAR, introduced the mouse and pointing
and selecting as the primary human-computer communication method.
 The user simply pointed at the screen, using the mouse as an
intermediary.
 Ivan Sutherland at the Massachusetts Institute of Technology (MIT) is
given credit for first introducing graphics with his Sketchpad program in
1963. Lines, circles, and points could be drawn on a screen using a light
pen.
 Xerox worked on developing handheld pointing devices in the 1960s
and patented a mouse with wheels in 1970.
 In 1974, Xerox patented today’s ball mouse, after a researcher was
suddenly inspired to turn a track ball upside down.
 Initially, the cathode ray tube was used in screen designing.

 In the 1970s, IBM launched its 3270 cathode ray tube text-

based terminal.

 The 3270 was used in large number of ways in offices and

companies for good screen designing.

 During the 1970s less number of guidelines were available

for designing.

 Designing was implemented using hardware and telephone

line transmission issues.

 The 1970s screen contained several domains with unclear and

unintelligible headings.

 The screen was not properly ordered and had a command area that

required an information to the filled and memorized by the user.

 A reference to a manual was needed for understanding the unclear

messages displayed on the screen.

 The screens displayed green text on black background, thus

restricted to monochrome.  

 Therefore the screen of the 1970s needed huge amount of toleration

and exercise by the users in order to extract the best from the

screen.
 In the 1980s a wide variety of design guidelines were launched
in the market for designing screens.
 The appearances of screens were made very clear by arranging
and ordering the elements.
 An assistance to the user was provided by giving clear and
useful headings for the areas on the screen. Also the
commands were listed nicely and were applied by function keys.
 Messages could be easily interpreted but the screen elements
were not completely ordered.
 The screens contained instructions and reminders as prompts
for the users. Certain codes like PR, ST, FU, MD were presented
on the screen to help the users in selection.
 In the 1990s the introduction of graphics contributed a lot
in screen designing.
 A long with arranging and ordering the elements, borders
were also included to usually enhance groupings.
 The commands were now handled by buttons and menus
rather than function keys.
 Elements had numerous features such as a variety of font
sizes, styles, line thickness and colors.
 List-boxes, drop-down combination boxes, spin-boxes
were used for making entries.
 The users did not need to memorize anything as everything
was listed in the controls provided on the screen.
 The codes were removed from the screen and new listing
control was inscribed.