Chapter 1

Dr. Latesh MalikProfessor, Department of Computer Science & Engg.

G.H. Raisoni College of Engineering, Nagpur

Dr. Latesh Malik

SyllabusCSEL525 : 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

Recent trends in human computer interaction.Dr. Latesh Malik

Course OutcomeText 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 Asia3. Human – Computer Interaction. Alan Dix, Janet Fincay, GreGoryd, Abowd, Russell Bealg, Pearson Education4. 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

I

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

Lecture 5The graphical user interface – popularity of

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

Lecture 11

II

Design process – Human interaction with

computers

Lecture 12importance of human characteristics human

consideration

Lecture 13 Human interaction speeds

Dr. Latesh Malik

Lecture 15

III

Screen Designing:- Design goals – Screen planning

and purpose

Lecture 16 organizing screen elements

Lecture 17 ordering of screen data and content

Lecture 18 screen navigation and flow

Lecture 19 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

Lecture 26

IV

Windows – New and Navigation schemes selection

of window

Lecture 27selection of devices based and screen based

controls.

Lecture 28 Components – text and messages

Lecture 29 Icons and increases – Multimedia

Lecture 30 colors

Lecture 31 uses problems

Lecture 32 choosing colors.

Dr. Latesh Malik

Lecture 33

V

Software tools – Specification

methods

Lecture 34 interface – Building Tools

Lecture 35Interaction Devices – Keyboard

and function keys

Lecture 36 pointing devices

Lecture 37speech recognition digitization and

generation

Lecture 38 image and video displays

Lecture 39 drivers

Lecture 40 Interface Design and Programming

Lecture 41 Web Usability

Lecture 42Recent trends in human computer

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

• Input is how a person communicates his or her needs or desires tothe 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 computationsand requirements to the user.

• Example Some common output components

– Today, the most common computer output mechanism is thedisplay screen, followed by mechanisms that take advantage ofa 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 perscreen.

– Twenty extra seconds in screen usage time adds an additional14 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 andfrustration 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 guideit, 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 practiceand patience.

• Most early screens were monochromatic, typically presenting greentext on black backgrounds.

Figure 1.1 A 1970s screen.Dr. Latesh Malik

A Brief History of Screen Design

• At the turn of the decade guidelines for text-based screen designwere finally made widely available (Galitz, 1980, 1981) and manyscreens began to take on a much less cluttered look throughconcepts such as grouping and alignment of elements, as illustratedin Figure 1.2.

Figure 1.2 A 1980s screen.Dr. Latesh Malik

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, forexample, borders were made available to visually enhancegroupings, and buttons and menus for implementing commandsreplaced function keys.

• The entry field was supplemented by a multitude of other kinds ofcontrols, including list boxes, drop-down combination boxes, spinboxes, and so forth.

Figure 1.3 A 1990s and beyond screen.Dr. Latesh Malik

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 process.Dr. Latesh Malik

References

The essential guide to user interface design, Wilbert O Galitz, Wiley DreamTech.

Dr. Latesh Malik

Thank you

Dr. Latesh Malik