Human Computer Interaction

HCI
• Human-computer interaction (HCI) is a multidisciplinary field of
study focusing on the design of computer technology and, in
particular, the interaction between humans (the users) and computers.
EARLIER NOW
The computer mouse was invented and developed by Douglas Engelbart,
with the assistance of Bill English, during the 1960s and was patented on
November 17, 1970.
Modules
• Module 1: Introduction to human computer interaction
• Module 2: Human factors as HCI theories
• Module 3: HCI Design
• Module 4: User Interface Layer and Methodology
• Module 5: Evaluation Techniques
• Module 6: Contemporary Issues
 MODULE -1
Human Computer Interaction And Its Framework – Principles of HCI –
Types of Interaction Styles – HCI Guidelines
 Rise of HCI
• In 1980s, for the first time,
sophisticated electronic systems
were available to general
consumers for uses such as word
processors, games units and
accounting aids.
• From its origins, HCI would
expand to incorporate multiple
disciplines, such as computer
science, cognitive science and
human-factors engineering.
HCI
• Cognitive science is the interdisciplinary, scientific study of
the mind and its processes with input from linguistics,
psychology, neuroscience, philosophy, computer
science/artificial intelligence
HCI
• Cognitive science is the interdisciplinary, scientific study of
the mind and its processes with input from linguistics,
psychology, neuroscience, philosophy, computer
science/artificial intelligence

• Computer science spans theoretical disciplines (such as

algorithms, theory of computation, and information theory)
to applied disciplines (including the design and
implementation of hardware and software)
HCI
• Cognitive science is the interdisciplinary, scientific study of
the mind and its processes with input from linguistics,
psychology, neuroscience, philosophy, computer
science/artificial intelligence

• Computer science spans theoretical disciplines (such as

algorithms, theory of computation, and information theory)
to applied disciplines (including the design and
implementation of hardware and software)

• Human-factors engineering is a science dealing with the

application of information on physical and psychological
characteristics to the design of devices and systems for
human use.
 Rise of HCI
• The user should resemble human-to-
human interaction.
• Initially, HCI researchers focused on
improving the usability of desktop
computers (i.e., practitioners
concentrated on how easy computers
are to learn and use).
• However, with the rise of technologies
such as the Internet and the
smartphone, computer use would
increasingly move away from the
desktop to embrace the mobile world.
 Where HCI came from
• Until the late 1970s, the only humans who
interacted with computers were
information technology professionals and
dedicated hobbyists.
• This changed disruptively with the
emergence of personal computing in the
later 1970s.
• Personal computing, including both
personal software (productivity
applications, such as text editors and
spreadsheets, and interactive computer
games) and personal computer platforms
(operating systems, programming
languages, and hardware), made everyone
 Why it is important
• Interaction is a concept to be
distinguished from another
similar term, interface.
• Thus, the letter I in HCI refers to
both interaction and interface,
encompassing the abstract
model and the technological
methodology.
• Need for high usability.
UX
• The concept of user experience
(UX) not only encompasses the
functional completeness, high
usability, and aesthetic appeal of
the interactive artifact, but also its
seamless integration into one’s
lifestyle or even creating a new
one around it
HCI evolution

https://www.youtube.com/watch?v=HuxHprgVB_E&list=PPSV
HCI evolution
 MODULE -1
Human Computer Interaction And Its Framework – Principles of HCI –
Types of Interaction Styles – HCI Guidelines
Principles of HCI
• HCI principles are general, fundamental, and commonsensical,
applicable to almost any HCI design situation.

• Why good HCI design are difficult?

• The types of users
• Characteristics of the tasks
• Capabilities and cost of the devices
• Lack of objective or exact quantitative evaluation measures
• Changing technologies
Principles of HCI - “Know Thy User”

• “Know thy user,” coined by Hansen in 1971

• This principle simply states that the interaction and interface should cater to
the needs and capabilities of the target user of the system in design.

• Ideally, comprehensive information (e.g., age, gender, education level, social

status, computing experience, cultural background) about the representative
target user should be collected and analyzed to determine their probable
preferences, tendencies, capabilities (physical and mental), and skill levels.

• Consider a situation where a developer is working to change an interface,

supposedly to achieve higher usability.(Male vs Female )
 Principles of HCI - “Know Thy User”
• If relevant research not available then collect data from psychology,
ergonomics, and anthropomorphic data

Ergonomics: the study of people's efficiency in their working environment.

Anthropomorphic: the attribution of human characteristics
 Principles of HCI - “Know Thy User”
• Usually, universal usability is achieved by justifying the investment
• required to build separate interfaces for distinct user groups.
• For example, in advanced countries, many government web pages are now
legally required to provide interfaces in different languages and for color-blind
and visually challenged users (Figure 1.5).
Principles of HCI - - “Know Thy User”

• Many interactive systems provide both menu-driven commands for

novices and keyboard-based hot keys for experts
Principles of HCI – Understand the Task
• The term task refers to the job to be accomplished by the user
through the use of the interactive system.
• Understanding the task at hand is closely related to the interaction
modeling and user analysis.
• Identifying the sequence and structure of subtasks at an abstraction
level appropriate for the typical user within the larger application
context.(WIFI example)
Principles of HCI
Principles of HCI- Reduce Memory Load
• Designing interaction with as little memory load as possible is a principle
that also has a theoretical basis.
• The capacity of the human’s short-term memory (STM) is about 5–9
chunks of information (or items meaningful with respect to the task),
famously known as the “magic number”
• Light memory burden also leads to less erroneous behavior.
Principles of HCI - Reduce Memory Load
 Principles of HCI - Strive for Consistency
• the user is likely to get
confused and exhibit
erroneous responses if the
same subtask is involved, at
different times, for different
interaction steps or interface
methods.
• consistency and familiarity
lead to higher acceptability
and preference
 Principles of HCI - Prevent Errors/Reversal
of Action
• the interaction and interface should be designed to avoid confusion and
mental overload.
• present or solicit only the relevant information/action as required at a
given time.
• Inactive menu items are good examples of such a technique.
Principles of HCI - Prevent Errors/Reversal
of Action
Principles of HCI - Prevent Errors/Reversal
of Action
 MODULE -1
Human Computer Interaction And Its Framework – Principles of HCI –
Types of Interaction Styles – HCI Guidelines
 HCI Interaction styles
• The concept of Interaction Styles refers to all the ways the user can
communicate or otherwise interact with the computer system.
• you can talk about menu selection (defined below) in mobile phones.
 HCI Interaction styles - Command language (or command entry)

• Command language is the earliest form

of interaction style and is still being
used, though mainly on Linux/Unix
operating systems.
• Expert users
• the user has logged on to a (mail) server
and can use the server's functions by
typing in commands.
• Cognitive burden
• The learnability of command languages Figure 1: Command prompt. The command "ls- al" has just
been executed
is generally very poor. ('ls' stands for 'list' and the parameters '-al' specify that the
list command should display a detailed list of files).
HCI Interaction styles - Command language (or command entry)

Advantages:
• Flexible.
• Appeals to expert users.
• Supports creation of user-defined "scripts" or macros.
• Is suitable for interacting with networked computers even with low
bandwidth.
HCI Interaction styles - Command language (or command entry)

Disadvantages:
• Retention of commands is generally very poor.
• Learnability of commands is very poor.
• Error rates are high.
• Error messages and assistance are hard to provide because of the
diversity of possibilities plus the complexity of mapping from tasks to
interface concepts and syntax.
• Not suitable for non-expert users.
 HCI Interaction styles – Form fillin
• The form fillin interaction style (also called "fill in the blanks") was
aimed at a different set of users than command language, namely non-
experts users.
• When form fillin interfaces first appeared, the whole interface was
form-based, unlike much of today's software that mix forms with other
interaction styles.
• The TAB-key was (and still is) used to switch between the fields and
ENTER to submit the form.
• There was originally no need for a pointing device such as a mouse and
the separation of data in fields allowed for validation of the input.
• Clerical work
HCI Interaction styles – Form fillin
HCI Interaction styles – Form fillin

Advantages
• Simplifies data entry.
• Shortens learning in that the fields are predefined and
need only be 'recognised'.
• Guides the user via the predefined rules.
HCI Interaction styles – Form fillin

Disadvantages
• Consumes screen space.
• Usually sets the scene for rigid formalisation of the
business processes.
HCI Interaction styles – Menu Selection
• A menu is a set of options displayed on the screen where the
selection and execution of one (or more) of the options results in a
state change of the interface
• Using a system based on menu-selection, the user selects a
command from a predefined selection of commands arranged in
menus and observes the effect.
• If the labels on the menus/commands are understandable (and
grouped well) users can accomplish their tasks with negligible
learning or memorisation as finding a command/menu item is a
recognition as opposed to recall memory task (see recall versus
recognition).
HCI Interaction styles – Menu Selection
• To save screen space menu items are often clustered in pull-down or
pop-up menus.

Contemporary menu selection : (Notepad by Microsoft Cooperation)

HCI Interaction styles – Menu Selection

Menu selection in the form of a webpage

HCI Interaction styles – Menu Selection

Advantages
• Ideal for novice or intermittent users.
• Can appeal to expert users if display and selection mechanisms are
rapid and if appropriate "shortcuts" are implemented.
• Affords exploration (users can "look around" in the menus for the
appropriate command, unlike having to remember the name of a
command and its spelling when using command language.)
• Structures decision making.
• Allows easy support of error handling as the user's input does not have
to be parsed (as with command language).
HCI Interaction styles – Menu Selection

Disadvantages
• Too many menus may lead to information overload or complexity of
discouraging proportions.
• May be slow for frequent users.
• May not be suited for small graphic displays.
HCI Interaction styles – Direct
Manipulation

• Direct manipulation is a central theme in interface design and is

treated in a separate encyclopedia entry.
• Objects of interest are represented as distinguishable objects in the UI
and are manipulated in a direct fashion.
CHARACTERISTICS
• Visibility of the object of interest.
• Rapid, reversible, incremental actions.
• Replacement of complex command language syntax by direct
manipulation of the object of interest.
 HCI Interaction styles – Direct
Manipulation

earliest commercially available

Direct Manipulation: the Windows File Explorer, direct manipulation interfaces was MacPaint
where files are dragged and dropped.
HCI Interaction styles – Direct
Manipulation
Advantages
• Visually presents task concepts.
• Easy to learn.
• Errors can be avoided more easily.
• Encourages exploration.
• High subjective satisfaction.
• Recognition memory (as opposed to cued or free recall memory).
HCI Interaction styles – Direct
Manipulation
Disadvantages
• May be more difficult to programme.
• Not suitable for small graphic displays.
• Spatial and visual representation is not always preferable.
• Metaphors can be misleading since the “the essence of metaphor is
understanding and experiencing one kind of thing in terms of another”
(Lakoff and Johnson 1983: p. 5), which, by definition, makes a
metaphor different from what it represents or points to.
• Compact notations may better suit expert users.
 MODULE -1
Human Computer Interaction And Its Framework – Principles of HCI –
Types of Interaction Styles – HCI Guidelines
HCI Guidelines
• Two categories
• Domain specific
• General HCI design
HCI Guidelines
Examples of HCI Guidelines – Visual
Display Layout
• One of the main focuses in many design guidelines is on the display
(page) layout.
• Problem- organizing and allotting relevant information (content and
UI)
• Display Layout - organized according to the information content (e.g.,
importance, sequence, functionality), is sized manageably (e.g.,
divided into proper sections), is attention grabbing, and sis visually
pleasing (e.g., aligned and with restricted use of colors)
Examples of HCI Guidelines – Visual
Display Layout
Examples of HCI Guidelines – Information
Structuring and Navigation (General HCI Design)
• A single display is often not sufficient to encompass all of the required
information content or to control the UI for a given application.
• Structuring the information and making it easy to move.
• Related to understanding of the task
• Identify sequence of subtask and actions.
• The task structure, action sequence, and associated content
organization will dictate the interaction flow and its fluidity.
Examples of HCI Guidelines – Information
Structuring and Navigation (General HCI Design)
Examples of HCI Guidelines – Information
Structuring and Navigation (General HCI Design)
• Navigation refers to the method used to find information within a Web
site.
• A navigation page is used primarily to help users locate and link to
destination pages.
• A Web site’s navigation scheme and features should allow users to find
and access information effectively and efficiently.
• When possible, this means designers should keep navigation-only
pages short.
• Designers should include site maps, and provide effective feedback on
the user’s location within the site.
Examples of HCI Guidelines – Information
Structuring and Navigation (General HCI Design)
Examples of HCI Guidelines – Information
Structuring and Navigation (General HCI Design)
Examples of HCI Guidelines – Taking User
Input (General HCI Design)
• Modern interfaces employ graphical user interface (GUI) elements
(e.g., window, text box, button, menu, forms, dialog box, icon), support
techniques e.g., autocompletion, deactivating irrelevant options, voice
recognition), and devices (e.g., mouse, touch screen) to obtain user
input in different ways.
Examples of HCI Guidelines – Taking User
Input (General HCI Design)
• Consistency of data-entry transactions
• Minimal input actions by user
• Minimal memory load on users
• Compatibility of data entry with data display
• Clear and effective labeling of buttons and data-entry fields
• Match and place the sequence of data-entry and selection fields in a
natural scanning and hand-movement direction
• Do not place semantically opposing entry/selection options close
together – (‘save’ and ‘undo’)
• Design of form and dialog boxes
 Examples of HCI Guidelines – Users with
Disability (User Type)
• W3C has led the Web Accessibility
Initiative and published the Web
Content Accessibility Guidelines
(WCAG) 2.0
• It explains how to make web
content more accessible to people
with disabilities. Web content
generally refers to the information
in a web page or web application,
including text, images, forms,
sounds, etc.
 Examples of HCI Guidelines – Users with
Disability (User Type)
• Perceivable
A. Provide text alternatives for nontext content.
B. Provide captions and other alternatives for multimedia.
C. Create content that can be presented in different ways, including by
assistive technologies, without losing meaning.
D. Make it easier for users to see and hear content.

• Operable
A. Make all functionality available from a keyboard.
B. Give users enough time to read and use content.
C. Help users navigate and find content.
 Examples of HCI Guidelines – Users with
Disability (User Type)
• Understandable
A. Make text readable and understandable.
B. Make content appear and operate in predictable ways.
C. Help users avoid and correct mistakes.

• 4. Robust
A. Maximize compatibility with current and future user tools
Examples of HCI Guidelines – Mobile
Device (Platform Type)
• Fast status information (especially with regard to network
connection and services)
• Minimize typing and leverage on varied input hardware
(e.g., buttons, touch, voice, handwriting recognition, virtual
• keyboard, etc.)
• Fierce task focus (for less confusion in a highly dense information
space)
Examples of HCI Guidelines – Mobile
Device (Platform Type)
• Large hit targets (for easy and correct selection and manipulation)
• Efficient use of screen space (with condensed information
Examples of HCI Guidelines – Mobile
Device (Platform Type)
Examples of HCI Guidelines – Icons for
Apple® iOS and Fonts for Windows® XP
(Vendor)
• APPLE
• Try to balance eye appeal and clarity of meaning in your icon
• Investigate how your choice of image and color might be interpreted by
people from different cultures.
• Create different sizes of your app icon for different devices.(iPhone and iPod)
Examples of HCI Guidelines – Icons for
Apple® iOS and Fonts for Windows® XP
(Vendor)
• WINDOWS XP
• Franklin Gothic is used only for text over 14-point size. It is used for headers
and should never be used for body text.
• Tahoma is used as the system’s default font. Tahoma should be used at 8-, 9-,
or 11-point sizes
• Verdana (bold, 8 point) is used only for title bars of tear-off/ floating palettes.
• Trebuchet MS (bold, 10 point) is used only for the title bars of Windows
Examples of HCI Guidelines – “Earcon”
design for aural interface
• Earcon - sound or auditory cue
• Aural Interaface - user interfaces that primarily use sound as a means
of communication between the system and the user
Examples of HCI Guidelines – E-Commerce
(Application)
• Catergories
• General
• Input/output forms
• UI elements
• Checkout process