Defining user interface: Human Computer Interaction

1. Chapter 1
Dr. Latesh Malik
Professor, Department of Computer Science & Engg.
G.H. Raisoni College of Engineering, Nagpur
Dr. Latesh Malik

2. 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
Recent trends in human computer interaction.
Dr. Latesh Malik

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

4. 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 5
The 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 12
importance of human characteristics human
consideration
Lecture 13 Human interaction speeds
Dr. Latesh Malik

5. 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 27
selection 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

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

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

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

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

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

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

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

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

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

15. Introduction of the Graphical User Interface
Dr. Latesh Malik

16. The Blossoming of the World Wide Web
Dr. Latesh Malik

17. The Blossoming of the World Wide Web
Dr. Latesh Malik

18. 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.
Figure 1.1 A 1970s screen.
Dr. Latesh Malik

19. 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.
Figure 1.2 A 1980s screen.
Dr. Latesh Malik

20. 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.
Figure 1.3 A 1990s and beyond screen.Dr. Latesh Malik

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

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

23. Thank you
Dr. Latesh Malik