UNIT-1

INTRODUCTION

Importance of user Interface – definition, importance of good design.

Benefits of good design. A brief history of Screen design. The graphical
user interface – popularity of graphics, the concept of direct
manipulation, graphical system, Characteristics, Web user – Interface
popularity, characteristics- Principles of user interface.
HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

INTRODUCTION:
Human–computer interaction (HCI), alternatively man–machine interaction
(MMI) or computer human interaction (CHI) is the study of interaction between
people (users) and computers.

DEFINITION:
Human-computer interaction is a discipline concerned with the design,
evaluation and implementation of interactive computing systems for human use
and with the study of major phenomena surrounding them.

GOALS:
 Primary Goal:
o To improve the interactions between users and computers.
o By making computers more usable and receptive to the user's
needs.
 Long-term Goal:
o To design systems that minimize the barrier between the human's
cognitive model of what they want.
o To accomplish and the computer's understanding of the user's task.

USER INTERFACE:
 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 user's needs are satisfied
in the most effective way.
 The user interface has essentially two components:
1) Input: Input is how a user communicates their needs to the
computer.
Ex, Mouse, Keyboard, Trackball etc.
2) Output: Output is how the computer conveys the results of its
computations and requirements to the user.
Ex, Monitor, Printer etc.

2
HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

THE IMPORTANCE OF USER INTERFACE:

 A well-designed interface and screen are terribly important to our users.
It is their window to view the capabilities of the system.
 It is also the vehicle through which many critical tasks are presented.
These tasks often have a direct impact on an organization's relations with
its customers, and its profitability.
 A screen's layout and appearance affect a person in a variety of ways.
o If they are confusing and inefficient, people will have greater
difficulty in doing their jobs and will make more mistakes.
o Poor design may even chase some people away from a system
permanently.
o It can also lead to aggravation(irritation), frustration, and increased
stress.

A BRIEF HISTORY OF THE HUMAN-COMPUTER INTERFACE:

 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. (While a practiced typist can
find typing faster and more efficient than handwriting, the unskilled may
not find this the case.)

3
HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

 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 IMPORTANCE OF GOOD DESIGN:

 With latest technology and tools, and our motivation to create really
effective and usable interfaces and screens.
But 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?
 Interface and screen design were really a matter of common sense, we
developers would have been producing almost identical screens for
representing the real world.

THE BENEFITS OF GOOD DESIGN:

 Screens user of the modified screens completed transactions in less time
and with fewer errors than those who used to the original screens.
 Reformatting inquiry screens following good design principles reduced
decision making time.

4
HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

 Redesigns eventually improved the success rate and reduce the average
completion time.
 The more successful and more usable site task completion rate is about
65% higher than that of the less successful sites.
 Training cost are lowered because fewer assist calls are necessary.
 Employee satisfaction is increased because irritation and frustration are
reduced.

A BRIEF HISTORY OF SCREEN DESIGN:

 While developers have been designing screens since a cathode ray tube
display was first attached to a computer, more widespread interest in the
application of good design principles to screens did not begin to emerge
until the early 1970s, when IBM introduced its 3270-cathode ray tube
text-based terminal.

Cathode Ray Tube: CRT is a technology used in traditional computer monitors

and televisions. The image on CRT display is created by firing electrons from
the back of the tube of phosphorus located towards the front of the screen.
Once the electron heats the phosphorus, they light up, and they are
projected on a screen. The colors we view on the screen is produced by a blend
of red, blue and green light.

5
HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

 A 1970s screen often resembled the one pictured in below:

It usually consisted of many fields (more than are illustrated here)
with very cryptic and often unintelligible captions.

 It was visually cluttered, and often possessed a command field that

challenged the user to remember what had to be keyed into it.
 Ambiguous messages often required referral to a manual to interpret.
 Effectively using this kind of screen required a great deal of practice and
patience.
 Most early screens were monochromatic, typically presenting green text
on black backgrounds.
 User memory was supported by providing clear and meaningful field
captions and by listing commands on the screen, and enabling them to be
applied, through function keys. Messages also became clearer.
 These screens were not entirely clutter-free, however. Instructions and
reminders to the user had to be inscribed on the screen in the form of
prompts or completion aids such as the codes PR and Sc.
 In the 1980s, 1970s-type screens were still being designed, and many still
reside in systems today.

6
HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

 The advent of graphics yielded another milestone in the evolution of

screen design, as illustrated in Figure above
 While some basic "design principles did not change, groupings and
alignment,
for example, Borders were made available to visually enhance groupings
and buttons and menus for implementing commands replaced function
keys.

 Multiple properties of elements were also provided, including many

different font sizes and styles, line thicknesses, and colors.
 The entry field was supplemented by a multitude of other kinds of
controls, including list boxes, drop-down combination boxes, spin boxes,
and so forth.
 These new controls were much more effective in supporting a person's
memory, now simply allowing for selection from a list instead of requiring
a remembered key entry.

THE GRAPHICAL USER INTERFACE:

 A user interface is a collection of techniques and mechanism to interact
with something.

7
HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

 In a graphical user interface, the primary interaction mechanism is a

pointing device of some kind. This device is the electronic equivalent to
the human head.
 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.
 These systems also introduced the graphical user interface as we know it
a new concept was born, revolutionizing the human-computer interface.

THE POPULARITY OF GRAPHICS:

 A graphical screen bore scant resemblance to its earlier text-based
colleagues.
 Older text-based screen possessed a one dimensional.
 Graphic screens assumed a three-dimensional look.
 Controls appeared to rise above the screen and move when activated.
 Information could appear, and disappear, as needed.
 Text could be replaced by graphical images called icons.
 These icons could represent objects or actions selection fields such as
radio buttons, check boxes, list boxes, and palettes coexisted with the
reliable old text entry field.
 More sophisticated text entry fields with attached or dropdown menus of
objects and actions were selected through use of pointing mechanisms. •
Increased computer power.
 User's actions to be reacted to quickly, dynamically, and meaningfully.
 WIMP interface: windows, icons, menus, and pointers.
 Graphic presentation is much more effective than other presentation
methods.
 Properly used, it reduces the requirement for perceptual and mental
information recoding and reorganization, and also reduces the memory
loads.
 It permits faster information transfer between computers and people by
permitting more visual comparisons of amounts, trends, or relationships;
more compact representation of information.
 Graphics also can add appeal or charm to the interface and permit greater
customization to create a unique corporate or organization style.

8
HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

ADVANTAGES:
 Symbols recognized faster than text.
 Faster learning.
 Faster use and problem solving.
 Easier remembering.
 More natural.
 Exploits visual/spatial cues.
 Fosters more concrete thinking.
 Provides context.
 Fewer errors.
 Increased feeling of control
 Immediate feedback.
 Predictable system responses.
 Easily reversible actions.
 Less anxiety concerning use.
 More attractive.
 May consume less space.
 Replaces national languages.
 Easily augmented with text displays.
 Smooth transition from command language system.

DISADVANTAGES:
 Greater design complexity.
 Learning still necessary.
 Replaces national languages.
 Easily augmented with text displays.
 Smooth transition from command language system.
 Lack of experimentally-derived design guidelines.
 Use a pointing device may also have to be learned.
 Working domain is the present.
 Human comprehension limitations.
 Window manipulation requirements.
 Production limitations.
 Few tested icons exist.
 Inefficient for touch typists.

9
HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

 Inefficient for expert users.

 Not always the preferred style of interaction.
 Not always fastest style of interaction.
 Increased chances of clutter and confusion.
 May consume more screen space.
 Hardware limitations

THE CONCEPT OF DIRECT MANIPULATION:

 The system is portrayed as an extension of the real world:
o It is assumed that a person is already familiar with the objects and
actions in his or her environment of interest.
o The system simply replicates them and portrays them on a different
medium, the screen.
o A person has the power to access and modify these objects, among
which are windows.
o A person is allowed to work in a familiar environment and in a
familiar way, focusing on the data, not the application and tools.
o The physical organization of the system, which most often is
unfamiliar, is hidden from view and is not a distraction.
 Continuous visibility of objects and actions:
o Like one's desktop, objects are continuously visible.
o Reminders of actions to be performed are also obvious, labelled
buttons replacing complex syntax and command names.
o Cursor action and motion occurs in physically obvious and natural
ways.
 Actions are rapid and incremental with visible display of results:
o The results of actions are immediately displayed visually on the
screen in their new and current form.
o Auditory feedback may also be provided.
o The impact of a previous action is quickly seen, and the evolution
of tasks is continuous and effortless.
 Incremental actions are easily reversible:
o Finally, actions, if discovered to be incorrect or not desired, can be
easily undone.

10
 HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

GRAPHICAL SYSTEM:
Graphical system design is an approach to designing an entire system, using
more intuitive graphical software and off the shelf hardware device to refine the
design, create initial prototypes and even use for the few runs of deployments.

ADVANTAGES OF GRAPHICAL SYSTEM:

1. Symbols recognized faster than text:
Research has found that symbols can be recognized faster and more
accurately than text and that the graphical attributes of icons, such as
shape and colors are very useful for quickly classifying objects, elements
or text by some common property.

2. Faster learning:
Research has also found that a graphical, pictorial representation aids
learning, and symbols can also be easily learned.

3. Faster use and problem solving:

Visual or spatial representation of information has been found to be
easier to retain and manipulate and leads to faster and more successful
problem solving. Symbols have also been found to be effective in
conveying simple instructions.

4. Easier remembering:
Because of greater simplicity, it is easier for casual users to retain
operational concepts.

5. Provide context:
Displayed objects are visible, providing a picture of the current context.

6. Fewer errors
More concrete thinking affords fewer opportunities for errors.
Reversibility of actions reduces error rates because it is always possible to
undo the last step. Error messages are less frequently needed.

11
HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

7. Increased feeling of control:

The user initiates actions and feels in control. This increases user
confidence.

8. Immediate feedback:
The results of actions furthering user goals can be seen immediately.
Learning is quickened. If the response is not in the desired direction, the
direction can be changed quickly.

DISADVANTAGES OF GRAPHICAL SYSTEM:

1) Inconsistencies in technique and terminology
2) Working domain is the present
3) Not always familiar
4) Window manipulation requirements
5) Production limitations

CHARACTERISTICS OF THE GRAPHICAL USER INTERFACE:

 A graphical system possesses a set of defining concepts.
 It includes:
a) Sophisticated Visual Presentation:
Visual presentation is the visual aspect of the interface. It is what people
see on the screen.
o The sophistication of a graphical system permits displaying lines,
including drawings and icons.
o It also permits the displaying of a variety of character fonts,
including different sizes and styles.
o The display of 16 million or more colors is possible on some screens.
Graphics also permit animation and the presentation of
photograph and motion video.

b) Pick-and-Click Interaction:
Elements of a graphical screen upon which some action is to be performed
must first identified.

12
HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

o The motor activity required of a person to identify this element for

a proposed action is commonly referred to as pick, the signal to
perform an action as cue.
o The primary mechanism for performing this pick-and-click is most
often the mouse and its buttons.
o The user moves the mouse pointer to the relevant element (pick)
and the action is signalled (click).
o Pointing allows rapid selection and feedback. The hand and mind
seem to work smoothly and efficiently together.
o The secondary mechanism for performing these selection actions is
the keyboard most systems permit pick-and-click to be performed
using the keyboard as well.

c) Restricted Set of Interface Options:

The array of alternatives available to the user is what is presented on the
screen or may be retrieved through what is presented on the screen,
nothing less, nothing more. This concept fostered the acronym WYSIWYG.

d) Visualization:
Visualization is a cognitive process that allows people to understand.
Information that is difficult to perceive, because it is either too
voluminous or too abstract.
Presenting specialized graphic portrayals facilitates visualization.
o The best visualization method for an activity depends on what
People are trying to learn from the data.
o The goal is not necessarily to reproduce a really graphical image,
but to produce one that conveys the most relevant information.
o Effective visualizations can facilitate mental insights, increase
productivity, and for faster and more accurate use of data.

e) Object Orientation:
A graphical system consists of objects and actions. Objects are what
people see on screen. They are manipulated as a single unit.
o Objects can be composed of sub objects. For example,an object
may be a document. The document's sub objects may be a
paragraph, sentence, word, and letter.

13
HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

o A collection is the simplest relationship-the objects sharing a

common aspect.
o A collection might be the result of a query or a multiple selection of
objects. Operations can be applied to a collection of objects.
o A constraint is a stronger object relationship. Changing an object in
a set affects some other object in the set.
o A document being organized into pages is an example of a
constraint. A composite exists when the relationship between
objects becomes so significant that the aggregation itself can be
identified as an object.
o Examples include a range of cells organized into a spreadsheet, or
a collection of words organized into a paragraph.
o A container is an object in which other objects exist. Examples
include text in a document or documents in a folder.

f) Use of Recognition Memory:

Continuous visibility of objects and actions encourages use of a person's
more powerful recognition memory. The "out of sight, out of mind"
problem is eliminated.

g) Concurrent Performance of Functions:

Graphic systems may do two or more things at one time. Multiple
programs may run simultaneously. When a system is not busy on a
primary task, it may process background tasks (cooperative multitasking).
When applications are running as truly separate tasks, the system may
divide the processing power into time slices and allocate portions to each
application.
Data may also be transferred between programs. It may be temporarily
stored on a "clipboard" for later transfer or be automatically swapped
between programs.

THE WEB USER INTERFACE:

 Web interface design is essentially the design of navigation and the
presentation of information. It is about content, not data.

14
 HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

 Proper interface design is largely a matter of properly balancing the

structure and relationships of menus, content, and other linked
documents or graphics.
 The design goal is to build a hierarchy of menus and pages that feels
natural, is well structured, is easy to use, and is truthful.
 The Web is a navigation environment where people move between pages
of information, not an application environment.
 It is also a graphically rich environment.

THE POPULARITY OF THE WEB:

 It allows millions of people scattered across the globe to communicate,
access information, publish, and be heard.
 It allows people to control much of the display and the rendering of Web
pages.
 Aspects such as typography and colors can be changed, graphics turned
off, and decisions made whether or not to transmit certain data over non
secure channels or whether to accept or refuse cookies.
 Web usage has reflected this popularity. The number of Internet hosts has
risen dramatically:
 In 1984, hosts online exceeded 1,000; in 1987, 10,000; in 1989, 100,000,
in 1990, 300,000; in 1992 hosts exceeded one million.
 Commercialization of the Internet saw even greater expansion of the
growth rate.
 In 1993, Internet traffic was expanding at a 341,634 percent annual
growth rate. In 1996, there were nearly 10 million hosts online and 40
million connected people.

CHARACTERISTICS OF WEB USER INTERFACE:

A web interface possesses a number of characteristics, some of which are similar
to a GUI interface and some are different
1) GUI Vs Webpage Design:
GUI and webpage design do have similarities:

15
HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

a) Both are software designs, they are used by people, they are
interactive, they are heavily visual experiences presented through
screens and they are composed of many similar components.
b) The below points highlight the other most significant differences:
i) Devices:
 In GUI design, the characteristics of interface devise such as
monitors and modems are well defined, and design variations
tend to be restricted.
 Monitor display capabilities, such as installed fonts and screen
size, are established and easily considered in the design process.
 In web design, no assumptions about the user’s interface
devices can be made.
 User devices may range from handheld mechanisms to high-end
workstations.

ii) User focus:

 GUI systems are about well- defined applications and data,
about transactions and processes.
 Through attention must usually be addressed to tasks in need of
completion.
 The web is about information and navigation, an environment
where people move back and forth in an unstructured way
among many pages of information.
 Web use is most often characterized browsing and visual
scanning of information to find what information is needed.

iii) Data/Information:
 GUI data is typical created and used by known and trusted.
 Sources, people in the user’s organization or reputable and
reliable companies and organizations.
 The properties of the system’s data are generally known, and
the information is typically organized in an understandable and
meaningful trend.

16
HUMAN COMPUTER INTERFACE UNIT-1 DANISH AHMAD KHAN

2) Printed pages Vs Webpages:

a) Research and experience with printed pages through these centuries
have created a fundamental and accepted set of guidelines for
editorial style, element presentation and text organization.
b) Many of the basic guidelines are being applied to Webpage design.
c) Web page design is different in many aspects from the design of books,
documents, newspapers, and other similar materials.
d) The major differences between print and web page design are
described as follows:
i) Page Size
ii) Page layout
iii) Page Resolution

PRINCIPLES OF USER INTERFACE:

 An interface must really be just an extension of a person. This means that
the system and its software must reflect a person's capabilities and
respond to his or her specific needs.
 It should be useful, accomplishing some business objectives faster and
more efficiently than the previously used method or tool did.
 It must also be easy to learn, for people want to do, not learn to do.
 Finally, the system must be easy and fun to use, evoking a sense of
pleasure and accomplishment not tedium and frustration.
 The interface itself should serve as both a connector and a separator
 a connector in that it ties the user to the power of the computer, and a
separator in that it minimizes the possibility of the participants damaging
one another.
 While the damage the user inflicts on the computer tends to be physical
(a frustrated pounding of the keyboard), the damage caused by the
computer is more psychological.

17