Chapter 1

Dr. Latesh Malik

Professor, Department of Computer Science & Engg.
G.H. Raisoni College of Engineering, Nagpur

Dr. Latesh Malik

 Syllabus
CSEL525 : Human Computer Interaction
Course Objectives :
1. This course introduces students the concept of Human-Computer Interaction.
2. This Course also aims to think constructively and analytically about how to design and evaluate interactive
technologies.
UNIT I:
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.
UNIT II:
Design process – Human interaction with computers, importance of human characteristics human consideration,
Human interaction speeds, understanding business junctions.
UNIT III:
Screen Designing:- Design goals – Screen planning and purpose, organizing screen elements, ordering of screen data
and content – screen navigation and flow –Visually pleasing composition – amount of information – focus and
emphasis – presentation information simply and meaningfully – information retrieval on web – statistical graphics
– Technological consideration in interface design.
UNIT IV:
Windows – New and Navigation schemes selection of window, selection of devices based and screen based controls.
Components – text and messages, Icons and increases – Multimedia, colors, uses problems, choosing colors.
UNIT V:
Software tools – Specification methods, interface – Building Tools. Interaction Devices – Keyboard and function keys –
pointing devices – speech recognition digitization and generation – image and video displays – drivers, Interface
Design and Programming, Web Usability
Dr. Latesh Malik
Recent trends in human computer interaction.
 Course Outcome
Text Books:
The essential guide to user interface design, Wilbert O Galitz, Wiley
DreamTech.
Reference :
2. Designing the user interface. 3rd Edition Ben Shneidermann ,
Pearson Education Asia
3. Human – Computer Interaction. Alan Dix, Janet Fincay, Gre
Goryd, Abowd, Russell Bealg, Pearson Education
4. Interaction Design Prece, Rogers, Sharps. Wiley Dreamtech,
5. User Interface Design, Soren Lauesen , Pearson Education.
Course Outcomes :
Upon successful completion of the course, students will be able to
Implement fundamental concepts in HCI;
Carry out a range of different types of user study and usability study;
Explain how interface design is ultimately dependent on human
perception and cognition.
Identify different methods and approaches in HCI.

Dr. Latesh Malik

Lecture No. Date Unit No. Topics
Lecture 1 Importance of user Interface – definition
Lecture 2 importance of good design
Lecture 3 Benefits of good design
Lecture 4 A brief history of Screen design
I
The graphical user interface – popularity of
Lecture 5
graphics

Lecture 6 the concept of direct manipulation

Lecture 7 graphical system
Lecture 8 Characteristics
Lecture 9 Web user – Interface popularity
Lecture 10 characteristics- Principles of user interface
Design process – Human interaction with
Lecture 11
computers
II importance of human characteristics human
Lecture 12
consideration
Lecture 13 Human interaction speeds

Dr. Latesh Malik

 Screen Designing:- Design goals – Screen planning
Lecture 15
and purpose
Lecture 16 organizing screen elements
Lecture 17 ordering of screen data and content
Lecture 18 screen navigation and flow
Lecture 19 III Visually pleasing composition
Lecture 20 amount of information
Lecture 21 focus and emphasis
Lecture 22 presentation information simply and meaningfully
Lecture 23 information retrieval on web
Lecture 24 statistical graphics
Lecture 25 Technological consideration in interface design
Windows – New and Navigation schemes selection
Lecture 26
of window
selection of devices based and screen based
Lecture 27
controls.
Lecture 28 IV Components – text and messages
Lecture 29 Icons and increases – Multimedia
Lecture 30 colors
Lecture 31 uses problems
Lecture 32 choosing colors.

Dr. Latesh Malik

 Software tools – Specification
Lecture 33
methods
Lecture 34 interface – Building Tools
Interaction Devices – Keyboard
Lecture 35
and function keys
V
Lecture 36 pointing devices
speech recognition digitization and
Lecture 37
generation
Lecture 38 image and video displays
Lecture 39 drivers
Lecture 40 Interface Design and Programming
Lecture 41 Web Usability
Recent trends in human computer
Lecture 42
interaction

Dr. Latesh Malik

 Agenda

• The Importance of the User Interface

• Defining the User Interface
• Importance of good design
• Benefits of good design
• Introduction of the Graphical User Interface
• The Blossoming of the World Wide Web
• A Brief History of Screen Design
• The Purpose of This course

Dr. Latesh Malik

 The Importance of the User Interface

• Greatly improved technology in the late twentieth century

eliminated a host of barriers to good interface design and
unleashed a variety of new display and interaction techniques
wrapped into a package called the graphical user interface, or, as it
is commonly called, GUI or “gooey”.

• It is said that the amount of programming code devoted to the user

interface now exceeds 50 percent. Looking backwards, great strides
in interface has been design .

• Looking around today, however, too many instances of poor design

still abound.
Dr. Latesh Malik
 Defining the User Interface
• It 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.
• HCI 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. echnical characteristics and
limitations of the computer hardware and software must also be
considered.

Dr. Latesh Malik

 Defining the User Interface
• 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.
• Example Some common input components
– 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.
• Example Some common output components
– 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.

Dr. Latesh Malik

 The Importance of Good Design
1. We don’t care?
2. We don’t possess common sense?
3. We don’t have the time?
4. We still don’t know what really makes good design?
• A well-designed interface and screen is terribly important to the users.
• Poor design may even chase some people away from a system
permanently.
• It can also lead to aggravation, frustration, and increased stress
• Example bad designs
– Closed door with complete wood
– suggestion : glass door

Dr. Latesh Malik

 The Benefits of Good Design
• Poor clarity forced screen users to spend one extra second per
screen.
– Twenty extra seconds in screen usage time adds an additional
14 person years.
• The benefits of a well good designed screen are:
– screen users of the modified screens completed transactions in
25 percent less time and with 25 percent fewer errors than
those who used the original screens.
– reduced decision-making time.
– screen users were about 20 percent more productive with the
less crowded version
– one graphical window redesigned to be more effective would
save a company about $20,000 during its first year of use.
Dr. Latesh Malik
 The Benefits of Good Design
• Improvement in search success rate.
• Training costs are lowered .
• Employee satisfaction is increased because aggravation and
frustration are reduced.

Dr. Latesh Malik

 Introduction of the Graphical User Interface

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

Dr. Latesh Malik

Introduction of the Graphical User Interface

Dr. Latesh Malik

The Blossoming of the World Wide Web

Dr. Latesh Malik

The Blossoming of the World Wide Web

Dr. Latesh Malik

 A Brief History of Screen Design
• In early 1970s, Screen design at this time period had little to guide
it, being driven by hardware and telephone line transmission issues.
• A 1970s screen often resembled the one pictured in Figure 1.1.
• 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.

Dr. Latesh Malik

Figure 1.1 A 1970s screen.
 A Brief History of Screen Design
• At the turn of the decade guidelines for text-based screen design
were finally made widely available (Galitz, 1980, 1981) and many
screens began to take on a much less cluttered look through
concepts such as grouping and alignment of elements, as illustrated
in Figure 1.2.

Dr. Latesh Malik

Figure 1.2 A 1980s screen.
 A Brief History of Screen Design
• The advent of graphics yielded another milestone in the evolution
of screen design, as illustrated in Figure 1.3. 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.
• 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.

Dr. Latesh Malik

Figure 1.3 A 1990s and beyond screen.
 The Purpose of This Course
• Understand the many considerations that must be applied to the
interface and screen design process.

• Understand the rationale and rules for an effective interface design

methodology.

• Identify the components of graphical and Web interfaces and screens,

including windows, menus, and controls.

• Design and organize graphical screens and Web pages to encourage

the fastest and most accurate comprehension and execution of screen
features.

• Choose screen colours and design screen icons.

• Perform the User Interface design

Dr. Lateshprocess.
Malik
 References
The essential guide to user interface design,
Wilbert O Galitz, Wiley DreamTech.

Dr. Latesh Malik

Thank you

Dr. Latesh Malik