Overview of Human-Computer Interaction Course
undefined
HUMAN COMPUTER INTERACTION
PROFESSIONAL ELECTIVE – VI
COURSE CODE – CS814PE
Dr. K Praveen Kumar Rao
COURSE OBJECTIVE
To gain an overview of Human-Computer Interaction
(HCI), with an understanding of user interface design in
general, and alternatives to traditional "keyboard and
mouse" computing
To become familiar with the vocabulary associated with
sensory and cognitive systems (technical systems
capable of independently solving and developing
strategies for human tasks) as relevant to task
performance by humans
COURSE OBJECTIVE
Be able to apply models from cognitive psychology to
predicting user performance in various human–
computer interaction tasks and recognize the limits of
human performance as they apply to computer operation
Appreciate the importance of a design and evaluation
methodology that begins with and maintains a focus on
the user
COURSE OBJECTIVE
Be familiar with a variety of both conventional and
non–traditional user interface paradigms, the latter
including virtual and augmented reality, mobile and
wearable computing, and ubiquitous computing
Understand the social implications of technology and
their ethical responsibilities as engineers in the design of
technological systems
COURSE OBJECTIVE
Finally, working in small groups on a product design
from start to finish will provide you with invaluable
team-work experience.
COURSE OUTCOMES
Ability to apply HCI and principles to interaction
design.
Ability to design certain tools for blind or physically
handicapped people.
SYLLABUS – UNIT I – From Text Book 1
The User Interface – An Introduction and Overview
Importance of User Interface
Defining the User Interface
Importance of Good Design
Benefits of Good Design
A Brief History of the Human – Computer Interaction
A Brief History of Screen Design
Characteristics of Graphical and Web User Interfaces
The Graphical User Interface
The Popularity of Graphics
The Concept of Direct Manipulation
Graphical System : Advantages and Disadvantages
Characteristics of the Graphical User Interface
The Web User Interface
The Popularity of the Web
Characteristics of a Web Interface
The Merging of Graphical Business Systems and the Web
Characteristics of an Intranet versus the Internet
Principles of User Interface Design
Principles for the Xerox STAR
General Principles
SYLLABUS – UNIT II – From Text Book 1
The User Interface Design Process
Obstacles and Pitfalls in the Development Process
Designing for People: The Five Commandments
Usability
Usability Assessment in the Design Process
Common Usability Problems
Some Practical Measures of Usability
Some Objective Measures of Usability
The Design Team
Know Your User or Client
Understanding How People Interact with Computers
Important Human Characteristics in Design
Human Considerations in Design
Human Interaction Speeds
Understand the Business Function
Business Definition and Requirements Analysis
Determining Basic Business Functions
Design Standards or Style Guides
SYSTEM Training and Documentation Needs
SYLLABUS – UNIT II contd..
Understanding the Principles of Good Screen Design
Human Considerations in Screen Design
How to Distract the Screen User
What Screen Users Want
What Screen Users Do
Interface Design Goals
The Test for a Good Design
Screen Meaning and Purpose
Organizing Screen Elements Clearly and Meaningfully
Consistency
Ordering of Screen Data and Content
Upper-Left Starting Point
Screen Navigation and Flow
Visually Pleasing Composition
Amount of Information
Distinctiveness
Focus and Emphasis
Presenting Information Simply and Meaningfully
Organization and Structure Guidelines
Reading, Browsing and Searching on the Web
Statistical Graphics
Technological Considerations in Interface Design
SYLLABUS – UNIT III – From Text Book 1
Develop System Menus and Navigation Schemes
Structures of Menus
Functions of Menus
Content of Menus
Formatting of Menus
Phrasing the Menu
Selecting Menu Choices
Navigation Menus
Kinds of Graphical Menus
Select the Proper Kinds of Windows
Window Characteristics
Components of a Window
Window Presentation Styles
Types of Windows
Window Management
Organizing Window Functions
Window Operations
Web Systems
SYLLABUS – UNIT III contd..
Select the Proper Device–Based Controls
Characteristics of Device–Based Controls
Selecting the Proper Device–Based Controls
Choose the Proper Screen–Based Controls
Operable Controls
Text Entry/Read –Only Controls
Selection Controls
Combination Entry/Selection Controls
Other Operable Controls
Custom Controls
Presentation Controls
Selecting the Proper Controls
Write Clear Text and Messages
Words, Sentences, Messages and Text
Text for Web Pages
SYLLABUS – UNIT III contd..
Create Meaningful Graphics, Icons and Images
Icons
Multimedia
Choose the Proper Colors
Color – What is it?
Color Uses
Possible Problems with Color
Color – What the Research Shows
Color and Human Vision
Choosing Colors
Choosing Colors for Textual Graphic Screens
Choosing Colors for Statistical Graphics Screens
Choosing Colors for Web Pages
Use of Color to Avoid
SYLLABUS – UNIT IV – From Text Book 2
HCI in the Software Process
The Software Life Cycle
Usability Engineering
Iterative Design and Prototyping
Design Focus: Prototyping in Practice
Design Rationale
Design Rules
Principles of Support Usability
Standards
Guidelines
Golden Rules and Heuristics
HCI Patterns
SYLLABUS – UNIT IV contd..
Evaluation Techniques
What is Evaluation?
Goals of Evaluation
Evaluation Through Expert Analysis
Evaluation Through User Participation
Choosing an Evaluation Method
Universal Design
Universal Design Principles
Multi–Modal Interaction
Design Focus: Designing Websites for Screen Readers
Design Focus: Choosing the Right Kind of Speech
Design Focus: Apple Newton
SYLLABUS – UNIT V – From Text Book 2
Cognitive Models
Goal and Task Hierarchies
Design Focus: GMOS Saves Memory
Linguistic Models
The Challenge of Display–Based Systems
Physical and Device Models
Cognitive Architectures
Ubiquitous Computing and Augmented Realities
Ubiquitous Computing Applications Research
Design Focus: Ambient Wood – Augmenting the Physical
Design Focus: Shared Experience
Virtual and Augmented Reality
Design Focus: Applications of Augmented Reality
Information and Data Visualization
Design Focus: Getting the Size Right
Part 1 – The User Interface – An Introduction
and Overview : Defining the User Interface
User interface design is a subset of the field of study called
Human – Computer Interaction (HCI).
HCI 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
What physical limitations and abilities people possess
How their perceptual and information processing systems work
What people find enjoyable and attractive
Technical characteristics and limitations of the computer
hardware and software must also be considered.
Defining the User Interface
The user interface is the part of a computer and its
software that people can see, hear, touch, talk to or
otherwise understand or direct.
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. Some common input
components are the keyboard, mouse, trackball, one’s
finger (for touch-sensitive screens), and one’s voice (for
spoken instructions).
Defining the User Interface
Output is how the computer conveys the results of its
computations and requirements to the user.
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.
The use of the human senses of smell and touch output in
interface design still remain unexplored.
Proper interface design will provide a mix of well-designed
input and output mechanisms that satisfy the user’s needs,
capabilities and limitations in the most effective way
possible.
Defining the User Interface
The best interface is one that is not noticed, one that
permits the user to focus on the information and task at
hand not the mechanism used to present the information
and perform the task.
The Importance of Good Design
The main reason for producing systems that are inefficient
and confusing, even with the presence of today’s technology
and tools. Some of the reasons are
We don’t care?
We don’t possess common sense?
We don’t have time?
We still don’t know what really makes good design?
The root causes for the above are mainly due to number 4
with a good deal of number 3.
The developers say
We Do Care
, but they never seem to
have time to find out what makes good design nor to
properly apply it.
The Importance of Good Design
A well–designed interface and screen is very important
to the users. It is their window to view the capabilities
of the system.
It is the system, being one of the few visible
components of the product the developers create.
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.
The Importance of Good Design
A screen’s layout and appearance affect a person in a
variety of ways.
If they are confusing or inefficient, people will have
greater difficulty in doing their jobs and will make more
mistakes.
Poor design may even chase some people away from the
system permanently.
It may lead to aggravation, frustration and increased
stress.
The Benefits of Good Design
The benefits of a well–designed screen include
Improve Screen Clarity
Improve Readability by making screens less crowded
Separate items which can be combined on the same display
line to conserve space, were placed on separate lines
instead.
Proper formatting of information on screens have a
significant positive effect on performance.
With redesigning the information on the screen, there is an
increase in the extraction of desired information by the
users.
The Benefits of Good Design
Training costs are lowered because training time is
reduced.
Support line costs are lowered because fewer assist calls
are necessary.
Employee satisfaction is increased because aggravation
and frustration are reduced.
The organization’s customers benefit because of the
improved service they receive.
Identifying and resolving problems during the design
and development process also have economic benefits.
A Brief History of the Human – Computer
Interaction
The need for people to communicate with each other
has been in existence for long time.
The lowest and the most common level of
communication modes we share are movements and
gestures.
They are the language–independent, that is, they permit
people who do not speak the same language to deal with
one another.
A Brief History of the Human – Computer
Interaction
The next higher level, in terms of universality and
complexity, is spoken language.
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. However, writing is still nowhere near as efficient
as means of communication as speaking.
In modern times, typewriter is an another step upward in
communication complexity. However, spoken language is
still more efficient than typing, regardless of typing skill
level.
A Brief History of the Human – Computer
Interaction
The 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 the 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.
Brief History of Screen Design
The developers have been designing screens since CRT
(Cathode Ray Tube) display was attached to a computer.
Until 1970s, there was less interest in the application of
good design principles.
When IBM introduces 3270 CRT text-based terminal,
good screen guidelines began to emerge.
This usually consisted of many fields with very
confusing and with unintelligible captions.
It was cluttered and possessed a command field that
challenged the user to remember what had to be keyed
into it.
Brief History of Screen Design
It was often required a referral to a manual to interpret.
Using this kind of screen required a great deal of
practice and patience.
The screens were monochromatic, typically presenting
green text on black backgrounds.
Brief History of Screen Design
Brief History of Screen Design
After a decade, guidelines for text-based screen design
were finally made available.
This helped in designing screens with much less
cluttered look through the concepts of grouping and
alignment of elements.
User memory was supported by providing clear and
meaningful captions and by listing commands on the
screen and enabling them to be applied through function
keys.
Messages became clearer. The screens were not entirely
clutter-free.
Brief History of Screen Design
Brief History of Screen Design
With the advent of graphics, another milestone in the
evolution of screen design began.
Some basic design principles did not change, groupings
and alignment, borders were made available to visually
enhance groupings, buttons and menus for
implementing commands replaced function keys.
Multiple properties of elements were also provided,
including many font sizes and styles, line thickness an
colors.
Brief History of Screen Design
The entry field was supplemented by a multitude of
other kinds of controls including list boxes, drop-down
combination boxes, spin boxes and many more.
These new controls were much more effective in
supporting memory, simply allowing for selection from
a list instead of requiring a remembered key entry.
The old design was replaced by one of the new listing
controls.
Screens were simplified with the much more powerful
computers.
Brief History of Screen Design
Characteristics of Graphical and Web
User Interface
The Graphical User Interface – Definition
A
user interface
is a collection of techniques and
mechanisms to interact with something.
In a
graphical interface
, the primary interaction
mechanism is a pointing device. What the user interacts
with, is a collection of elements referred to as
objects
.
They can be seen, heard, touched or otherwise
perceived.
Objects are visible the user and are used to perform
tasks.
Characteristics of Graphical and Web
User Interface
They are interacted with as entities independent of all
other objects.
People perform actions called
actions
on objects. The
operations include accessing and modifying objects by
pointing, selecting and manipulating.
All objects have standard resulting behaviors.
The Popularity of Graphics
The graphics revolutionized design and user interface.
The old text-based screen possessed one-dimensional,
text-oriented, form-like quality. The graphics screen
assumed a three-dimensional look.
This revolution brought changes like information
floated on windows, small rectangular boxes seem to
rise above the background plane.
The controls appeared to rise above the screen and
move when activated. Lines appeared to be etched into
the screen.
The Popularity of Graphics
Information could appear and disappear as needed,
sometimes text could be replaced by graphical images
called
icons
. These icons could represent objects or
actions.
Screen navigation and commands are executed through
menu bars and pull-downs. Menus ‘pop-up’ on the
screen.
The screen body included selection fields such as radio
buttons, check boxes, list boxes coexisted with the
reliable old text entry field.
The Popularity of Graphics
Text entry fields with attached or drop-down menus
were made available. Screen objects and actions were
selected through the use of pointing mechanisms like
mouse or joystick instead of keyboard.
Increased computer power and improvement in the
display enable the user’s actions to be reacted quickly,
dynamically and meaningfully.
This type of interface is referred to as
WIMP
interface:
Windows, Icons, Menus and Pointers.
The Popularity of Graphics
Graphical presentation of information utilizes person’s
information-processing capabilities.
When properly used, it reduces the requirement for
perpetual and mental information, recording and
reorganization and also reduces the memory loads.
It permits faster information transfer between computers and
people by permitting more visual comparison, more
compact representation of information and simplification of
the perception of structure.
It can also add appeal and charm to the interface and permit
greater customization to create a unique corporate or
organization style.
The Concept of Direct Manipulation
The term used to describe this style of interaction for
graphical systems was first used by Shneiderman (1982)
These systems were called ‘direct manipulation’ and
they possess the following characteristics
The system is portrayed as an extension of the real world
The system simply replicates the objects and actions and portrays
them on the screen. A person has the power to access and modify
these objects.
Continuous visibility of objects and actions
Objects are continuously visible. Nelson described this concept as
‘virtual reality’.
Hatfield called it
WYSIWYG – What You See Is What You
Get
.
The Concept of Direct Manipulation
Actions are rapid and incremental with visible display of
results
The results of actions are immediately displayed visually on the
screen in their new and current form.
The impact of a previous action is quickly seen and the evolution
of tasks is continuous and effortless.
Incremental actions are easily reversible
Actions, if discovered to be incorrect or not desired, can be easily
undone.
Earlier Direct Manipulation Systems
The concept of direct manipulation actually preceded
the first graphical system. The earliest full-screen text
editors possessed similar characteristics.
Screens of text could be created (extension of real
world) and then reviewed in their entirety (continuous
visibility).
Editing and restructuring could be easily accomplished
(through rapid incremental actions) and the results
immediately seen.
Actions could be reversed when necessary.
Indirect Manipulation
Direct manipulation of all screen objects and actions
may not be feasible because of the following
The operation may be difficult to conceptualize in the
graphical system
The graphics capability of the system may be limited
The amount of space available for placing manipulation
controls in the window border may be limited
It may be difficult for people to learn and remember all the
necessary operations and actions
When this occurs,
indirect manipulation
is provided.
Indirect Manipulation
Indirect manipulation substitutes words and text, such as
pull-down or pop-up menus, for symbols and substitutes
typing for pointing.
Most window systems are a combination of direct and
indirect manipulation.
A menu may be accessed by pointing at the menu icon
and then selecting it (direct manipulation). The menu
itself is a textual list of operations (indirect
manipulation).
When an operation is selected from the list, by pointing
or typing, the system executes it as a command.
Graphical Systems : 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
Graphical Systems : Advantages
Increased feeling of control
Immediate feedback
Predicate system responses
Easily reversible actions
Less anxiety concerning use
More attractive
May consume less space
Replaces national languages
Easily augmented with text displays
Graphical Systems : Advantages
Less typing requirements
Smooth transition from command language system
Graphical Systems : Disadvantages
Greater design complexity
Learning still necessary
Lack of experimentally-derived design guidelines
Inconsistencies in technique and terminology
Working domain is the present
Not always familiar
Human comprehension limitations
Window manipulation requirements
Production limitations
Graphical Systems : Disadvantages
Few tested icons exist
Inefficient for touch typists
Inefficient for expert users
Not always the preferred style of interaction
Not always fastest style of interaction
Increased chances of clutter and confusion
The futz and fiddle factor
May consume more screen space
Hardware limitations
Some Studies and a Conclusion
Studies were done to determine the superiority among
the graphical systems with other interaction styles.
Some usability studies concluded that graphical systems
were superior. In some cases, interaction techniques
were superior while in some there were no differences.
It was found that user performance did not depend on
the type of system. There were large differences in
learnability and usability among all.
How well the system was designed was the best
indicator of success, not the interaction style.
Some Studies and a Conclusion
The design of an interface, and not its interaction style, is
the best determinant of ease of use
User preferences must be considered in choosing an
interaction style
In most of the cases, words are more meaningful to users
than icons
The content of a graphic screen is critical to its usefulness.
The wrong or cluttered presentation may actually lead to
greater confusion, not less
The success of a graphical system depends on the skills of
its designers in following established principles of usability
Characteristics of the Graphical User
Interface
A graphical system possesses a set of defining concepts.
Some of them are
Sophisticated Visual Presentation
Pick-and-Click Interface
A Restricted Set of Interface Options
Visualization
Object Orientation
Extensive Use of a Person’s Recognition Memory
Concurrent Performance of Functions
Sophisticated Visual Presentation
Visual presentation is the visual aspect of the interface.
It is what the people see in the screen. The
sophistication of a graphical system permits
Displaying lines, displaying drawings and icons
Displaying of a variety of character fonts, including
different sizes and styles
Displaying millions or more colors on some screen
Animation
Photographs
Motion video
Sophisticated Visual Presentation
The meaningful interface elements visually presented to
the user in a graphical system include
Windows (Primary, Secondary or Dialog boxes)
Menus (Menu bar, pull-down, pop-up, cascading)
Icons to represent objects such as programs or files,
Assorted Screen-based controls (text boxes, combination
boxes, settings, scroll bars, buttons)
Mouse pointer, Cursor
The objective is to reflect visually on the screen the real
world of the user as realistically, meaningfully, simply
and clearly as possible.
Pick-and-Click Interaction
Elements of graphical screen upon which some action is to be
performed must first be identified.
Pick
is the term used to describe the activity required by a
person to identify the element for a proposed action.
The signal to perform an action is called
click
.
The primary mechanism for performing this pick-and-click is
most often the mouse and its buttons.
The user moves the mouse pointer to the relevant element and
the action is signaled. Pointing allows rapid selection and
feedback.
The eye, hand and mind seem to work smoothly and efficiently
together.
The secondary mechanism for performing selection actions is the
keyboard. Most systems permit pick-and-click with keyboard.
Restricted Set of Interface Options
The alternatives available to the user is what is
presented on the screen or what may be retrieved
through what is presented on the screen, nothing less,
nothing more.
This concept is referred as WYSIWYG (What You See
Is What You Get).
Visualization
It is a process that allows people to understand
information that it is difficult to perceive, because it is
either too voluminous or too abstract.
It involves changing an entity’s representation to reveal
the structure and/or function of the underlying system or
process.
Presenting specialized graphic portrayals facilitates
visualization.
The best visualization method for an activity depends
on what people are trying to learn from the data.
Visualization
The goal in not necessarily to reproduce a realistic
graphical image, but to produce one that conveys the
most relevant information.
Effective visualizations can facilitate mental insights,
increase productivity and foster faster and more
accurate use of data.
Object Orientation
A graphical system consists of
objects
and
actions
.
Objects are what people see on the screen. They are
manipulated as a single unit.
A well-designed system keeps users focused on objects,
not on how to carry out actions.
Objects can be composed of
subobjects
.
For example, an object can be a document. The
documents subobjects may be paragraphs, sentences,
words and letters.
Object Orientation
IBM’s System Application Architecture Common User
Access Advanced Interface Design Reference breaks
objects into three classes
Data objects
Container objects
Device objects
Data Objects
Data objects present information.
This information, either text or graphics, normally appears in
the body of the screen.
It is essentially the screen-based controls for information
collection or presentation organized on the screen.
Container Objects
Container objects are objects to hold other objects.
They are used to group two or more related objects for easy
access and retrieval.
There are three kinds of container objects
Workplace
is the desktop, the storage area for all objects.
Folders
are general-purpose containers for long-term storage of
objects.
Workareas
are temporary storage folders used for storing multiple
objects currently being worked on.
Device Objects
They represent physical objects in the real world such as
printers or trash buckets.
These objects may contain others for acting upon. A file
for example, may be placed in a printer for printing of
its contents.
Objects can exist within the context of other objects,
and one object may affect the way another object
appears or behaves.
Device Objects
These relationships are called
collections
,
constraints
,
composites
and
containers
.
A
collection
is the simplest relationship – the objects
sharing a common aspect. It might be the result of a
query or a multiple selection of objects. Operations can
be applied to a collection of objects.
A
constraint
is a stronger object relationship. Changing
an object in a set affects some other object in the set. A
document being organized into pages is an example of a
constraint
.
Device Objects
A
composite
exists when the relationship between
objects becomes so significant that the aggregation itself
can be identified as an object. Example, a collection of
words organized into a paragraph.
A
container
is an object in which other objects exist.
Example, text in a document or a document in a folder.
These relationships help to define an object’s
type
.
Another characteristic is
persistence
. It is the
maintenance of a state once it is established. An object’s
state should always be automatically preserved when
the user changes it.
Properties or Attributes of Objects
Objects also have properties or attributes.
Properties are the unique characteristics of an object.
They help to describe an object and can be changed by
users.
Examples are text styles, font sizes or window
background colors.
Actions
In addition to objects are
actions
. People take actions
on objects. They manipulate objects in specific ways or
modify the properties of objects.
Commands
are actions that manipulate objects. They
may be performed in a variety of ways including direct
manipulation or through a command button.
They are executed immediately when selected. Once
executed, they cease to be relevant. Examples of
commands are opening a document, printing a
document, closing a window and quitting an
application.
Actions
Property/Attribute specification actions establish or modify
the attributes or properties of objects. When selected, they
remain in effect until deselected.
Examples include selecting cascaded windows to be
displayed, a particular font size or a particular color.
The following is a typical property/attribute specification
sequence:
The user selects an object
The user then selects an action to apply to that object
The selected words are made bold and will remain bold until
selected and changed again
A series of actions may be performed on a selected object.
Performing a series of actions on an object also permits and
encourages system learning through exploration.
Applications Versus Object or Data
Orientation
An application-oriented approach takes an action:object
approach
Action> 1. An application is opened (word processing)
Object> 2. A file or other object is selected (a memo)
An object-oriented object:action approach does this
Object> 1. An object is chosen (a memo)
Action> 2. An application is selected (word processing)
Applications Versus Object or Data
Orientation
The object:action approach permits people to more
easily focus on their task and minimizes the visibility of
the operating system and separate applications.
It is difficult to learn the new approach for users of old
interaction. New users should have experience in using
new approach.
Thus, a consistent orientation must be maintained, either
an object:action or an action:object approach.
Use of Recognition Memory
Continuous visibility of object’s and actions encourages
use of a person’s more powerful recognition memory.
The ‘out of sight, out of mind problem is eliminated.
Concurrent Performance of Functions
Graphical systems may do two or more things at one
time. Multiple programs may run simultaneously.
When the system is not busy on a primary task, it may
process background tasks
(cooperative multitasking)
.
When applications are running separate tasks, the
system may divide the processing power into time slices
and allocate portions to each application
(preemptive
multitasking)
.
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.
Proper interface design is a matter of balancing the structure
and relationships of menus, content and other linked
documents or graphics.
The design is to build a hierarchy of menus and pages that
feel 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 Web User Interface
Reasons for difficulty in Web interface design
It underlying design language, HTML, was never intended
for creating screens to be used by the general population.
Its scope of users was expected to be technical.
HTML was limited in objects and interaction styles and did
not provide a means for presenting information in the most
effective way for the people.
Browser navigation retreated to the pre-GUI era. It was
characterized by a ‘command’ field whose contents had to
be learned.
GUIs eliminated the absolute necessity for a command field,
providing menus related to the task.
The Web User Interface
Browser navigation is mostly confined to a “Back” and
“Forward” concept, but back-to-where or forward-to-where
is unknown.
Ill-timed use of the back button can destroy many minutes
of the work.
Numerous links were produced to the destinations unknown
Form completion and submission was essentially a form of
batch processing.
Forms were completed, transmitted and then edited instead
of the editing being interactive, occurring as the entry
process was accomplished.
The Popularity of the Web
It allows millions of people across the globe to
communicate, access information, publish and be heard.
It allows people to control the display and rendering of
Web pages.
Slow download times, confusing navigation, confusing
page organization, disturbing animation and other
undesirable features are some of the disadvantages of
the Web pages.
Characteristics of a Web Interface
GUI versus Web Page Design
Both designs have similarities.
Both are software designs
They are used by people
They are interactive
They are heavily visual experiences presented through screens
They are composed of many similar components.
Significant Differences of GUI and Web
Page Design
Devices
User Focus
Data / Information
User Tasks
User’s Conception Space
Presentation Elements
Navigation
Context
Interaction
Response Time
Visual Style
System Capability
Task Efficiency
Consistency
User Assistance
Integration
Security
Reliability
Significant Differences of GUI and Web
Page Design
Significant Differences of GUI and Web
Page Design
Significant Differences of GUI and Web
Page Design
Characteristics of a Web Interface
Printed Pages Versus Web Pages
The major differences between Print and Web Page design
are
Page Size
Page Rendering
Page Layout
Page Resolution
User Focus
Page Navigation
Sense of Place
Interactivity
Page Independence
Characteristics of Intranet Versus Internet
An intranet has many of the same characteristics as the
Internet. They differ in some ways
Users
Tasks
Type of information
Amount of information
Hardware and software
Design philosophy
Principles of User Interface Design
An interface 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, accomplish objectives faster and
more efficient.
It must also be easy to learn, for people who want to do,
not learn to do.
The system must be easy and fun to use evoking a sense
of pleasure and accomplishment not tedium and
frustration.
Principles of User Interface Design
The interface should serve as both a
connector
and a
separator
.
A
connector
is that it ties the user to the power of the
computer and a
separator
is that it minimizes the
possibility of the participants damaging one another.
While the damage the user inflicts on the computer
tends to be physical, the damage caused by the
computer is more psychological.
General Principles
The design goal in creating a user interface are
fundamental to the design and implementation of all
effective interfaces.
These principles are general characteristics of the
interface and they apply to all aspects.
Aesthetically Pleasing
Provide visual appeal by following these presentation
and graphic design principles.
Provide meaningful contrast between screen elements
Create groupings
Align screen elements and groups
Provide three-dimensional representation
Use color and graphics effectively and simply
Clarity
The interface should be visually, conceptually and
linguistically clear including,
Visual elements
Functions
Metaphors – is a mapping process from a familiar object to
an unfamiliar object and provides the framework to
familiarize an unknown concept through a mapping process.
Words and text
Compatibility
Provide compatibility with the following
The user
The task and job
The product
Adopt the user’s perspective
Comprehensibility
A system should be easily learned and understood. A
user should know the following
What to look at
What to do
When to do it
Where to do it
Why to do it
How to do it
The flow of actions, responses, visual presentations and
information should be in a sensible order that is easy to
recollect and place on context.
Configurability
Permit easy personalization, configuration, and
reconfiguration of settings
Enhances a sense of control
Encourages an active role in understanding
Consistency
A system should look, act and operate the same
throughout. Similar components should
Have a similar look
Have similar uses
Operate similarly
The same action should always yield the same result
The function of elements should not change
The position of standard elements should not change
Inconsistency
In addition to increased learning requirements,
inconsistency in design has a number of other
prerequisites and by-products, including
More specialization by system users
Greater demand for higher skills
More preparation time and less production time
More frequent changes in procedures
More error-tolerant systems (because errors are more likely)
Inconsistency
More kinds of documentation
More time to find information in documents
More unlearning and learning when systems are changed
More demands on supervisors and managers
More things to do wrong
Control
The user must control the interaction
Actions should result from explicit user requests
Actions should be performed quickly
Actions should be capable of interruption or termination
The user should never be interrupted for errors
The context maintained must be from the perspective of the user
The means to achieve goals should be flexible and compatible
with the user’s skills, experiences, habits and preferences
Avoid modes since they constrain the actions available to the
user
Permit the user to customize aspects of the interface, while
always providing a proper set of defaults
Directness
Provide direct ways to accomplish tasks
Available alternatives should be visible
The effect of actions on objects should be visible
Efficiency
Minimize eye and hand movements, and other control
actions
Transitions between various system controls should follow
easily and freely
Navigation paths should be as short as possible
Eye movement through a screen should be obvious and
sequential
Anticipate the user’s wants and needs whenever possible
Familiarity
Employ familiar concepts and use a language that is
familiar to the user
Keep the interface natural, mimicking the user’s
behavior pattern
Use real-world metaphors
Flexibility
A system must be sensitive to the differing needs of its
user’s, enabling a level and type of performance based
upon
Each user’s knowledge and skills
Each user’s experience
Each user’s personal preference
Each user’s habits
The conditions at that moment
Forgiveness
Tolerate and forgive common and unavoidable human
errors
Prevent errors from occurring whenever possible
Protect against possible catastrophic errors
When an error does occur, provide constructive
messages
Predictability
The user should be able to anticipate the natural
progression of each task
Provide distinct and recognizable screen elements
Provide cues to the result of an action to be performed
All expectations should be fulfilled uniformly and
completely
Recovery
A system should permit
Commands or actions to be abolished or reversed
Immediate return to a certain point if difficulties arise
Ensure that users never lose their work as a result of
An error on their part
Hardware, software or communication problems
Responsiveness
The system must rapidly respond to the user’s requests
Provide immediate requirement for all user actions
Visual
Textual
Auditory
Simplicity
Provide as simple an interface as possible
Five ways to provide simplicity
Use progressive disclosure, hiring things until they are
needed
Present common and necessary functions first
Prominently feature important functions
Hide more sophisticated and less frequently used functions
Provide defaults
Minimize screen alignment points
Make common actions simple at the expense of uncommon
actions being made harder
Provide uniformity and consistency
Transparency
Permit the user to focus on the task or job, without
concern for the mechanics of the interface
Workings and reminders of workings inside the computer
should be invisible to the user
Trade-offs
Final design will be based on a series of trade-offs
balancing often-conflicting design principles
People’s requirements always take precedence over
technical requirements
Gain insight into Human-Computer Interaction (HCI) by understanding user interface design, alternative computing methods, cognitive psychology models, ethical responsibilities, and team-work experience. Explore conventional and non-traditional interface paradigms, design tools for accessibility, and principles of interaction design. Dive into the history and principles of user interfaces, the concept of direct manipulation, and merging graphical systems with the web.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
HUMAN COMPUTER INTERACTION PROFESSIONAL ELECTIVE VI COURSE CODE CS814PE Dr. K Praveen Kumar Rao
COURSE OBJECTIVE To gain an overview of Human-Computer Interaction (HCI), with an understanding of user interface design in general, and alternatives to traditional "keyboard and mouse" computing To become familiar with the vocabulary associated with sensory and cognitive systems (technical systems capable of independently solving and developing strategies for human tasks) as relevant to task performance by humans
COURSE OBJECTIVE Be able to apply models from cognitive psychology to predicting user performance computer interaction tasks and recognize the limits of human performance as they apply to computer operation in various human Appreciate the importance of a design and evaluation methodology that begins with and maintains a focus on the user
COURSE OBJECTIVE Be familiar with a variety of both conventional and non traditional user interface paradigms, the latter including virtual and augmented reality, mobile and wearable computing, and ubiquitous computing Understand the social implications of technology and their ethical responsibilities as engineers in the design of technological systems
COURSE OBJECTIVE Finally, working in small groups on a product design from start to finish will provide you with invaluable team-work experience.
COURSE OUTCOMES Ability to apply HCI and principles to interaction design. Ability to design certain tools for blind or physically handicapped people.
SYLLABUS UNIT I From Text Book 1 The User Interface An Introduction and Overview Importance of User Interface Defining the User Interface Importance of Good Design Benefits of Good Design ABrief History of the Human Computer Interaction A Brief History of Screen Design Characteristics of Graphical and Web User Interfaces The Graphical User Interface The Popularity of Graphics The Concept of Direct Manipulation Graphical System : Advantages and Disadvantages Characteristics of the Graphical User Interface The Web User Interface The Popularity of the Web Characteristics of a Web Interface The Merging of Graphical Business Systems and the Web Characteristics of an Intranet versus the Internet Principles of User Interface Design Principles for the Xerox STAR General Principles
SYLLABUS UNIT II From Text Book 1 The User Interface Design Process Obstacles and Pitfalls in the Development Process Designing for People: The Five Commandments Usability Usability Assessment in the Design Process Common Usability Problems Some Practical Measures of Usability Some Objective Measures of Usability The Design Team Know Your User or Client Understanding How People Interact with Computers Important Human Characteristics in Design Human Considerations in Design Human Interaction Speeds Understand the Business Function Business Definition and RequirementsAnalysis Determining Basic Business Functions Design Standards or Style Guides SYSTEM Training and Documentation Needs
SYLLABUS UNIT II contd.. Understanding the Principles of Good Screen Design Human Considerations in Screen Design How to Distract the Screen User What Screen Users Want What Screen Users Do Interface Design Goals The Test for a Good Design Screen Meaning and Purpose Organizing Screen Elements Clearly and Meaningfully Consistency Ordering of Screen Data and Content Upper-Left Starting Point Screen Navigation and Flow Visually Pleasing Composition Amount of Information Distinctiveness Focus and Emphasis Presenting Information Simply and Meaningfully Organization and Structure Guidelines Reading, Browsing and Searching on the Web Statistical Graphics Technological Considerations in Interface Design
SYLLABUS UNIT III From Text Book 1 Develop System Menus and Navigation Schemes Structures of Menus Functions of Menus Content of Menus Formatting of Menus Phrasing the Menu Selecting Menu Choices Navigation Menus Kinds of Graphical Menus Select the Proper Kinds of Windows Window Characteristics Components of a Window Window Presentation Styles Types of Windows Window Management Organizing Window Functions Window Operations Web Systems
SYLLABUS UNIT III contd.. Select the Proper Device Based Controls Characteristics of Device Based Controls Selecting the Proper Device Based Controls Choose the Proper Screen Based Controls Operable Controls Text Entry/Read Only Controls Selection Controls Combination Entry/Selection Controls Other Operable Controls Custom Controls Presentation Controls Selecting the Proper Controls Write Clear Text and Messages Words, Sentences, Messages and Text Text for Web Pages
SYLLABUS UNIT III contd.. Create Meaningful Graphics, Icons and Images Icons Multimedia Choose the Proper Colors Color What is it? Color Uses Possible Problems with Color Color What the Research Shows Color and Human Vision Choosing Colors Choosing Colors for Textual Graphic Screens Choosing Colors for Statistical Graphics Screens Choosing Colors for Web Pages Use of Color to Avoid
SYLLABUS UNIT IV From Text Book 2 HCI in the Software Process The Software Life Cycle Usability Engineering Iterative Design and Prototyping Design Focus: Prototyping in Practice Design Rationale Design Rules Principles of Support Usability Standards Guidelines Golden Rules and Heuristics HCI Patterns
SYLLABUS UNIT IV contd.. Evaluation Techniques What is Evaluation? Goals of Evaluation Evaluation Through ExpertAnalysis Evaluation Through User Participation Choosing an Evaluation Method Universal Design Universal Design Principles Multi Modal Interaction Design Focus: Designing Websites for Screen Readers Design Focus: Choosing the Right Kind of Speech Design Focus: Apple Newton
SYLLABUS UNIT V From Text Book 2 Cognitive Models Goal and Task Hierarchies Design Focus: GMOS Saves Memory Linguistic Models The Challenge of Display Based Systems Physical and Device Models Cognitive Architectures Ubiquitous Computing and Augmented Realities Ubiquitous Computing Applications Research Design Focus: Ambient Wood Augmenting the Physical Design Focus: Shared Experience Virtual and Augmented Reality Design Focus: Applications of Augmented Reality Information and Data Visualization Design Focus: Getting the Size Right
Part 1 The User Interface An Introduction and Overview : Defining the User Interface User interface design is a subset of the field of study called Human Computer Interaction (HCI). HCI 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 What physical limitations and abilities people possess How their perceptual and information processing systems work What people find enjoyable and attractive Technical characteristics and limitations of the computer hardware and software must also be considered.
Defining the User Interface The user interface is the part of a computer and its software that people can see, hear, touch, talk to or otherwise understand or direct. 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. components are the keyboard, mouse, trackball, one s finger (for touch-sensitive screens), and one s voice (for spoken instructions). Some common input
Defining the User Interface Output is how the computer conveys the results of its computations and requirements to the user. 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. The use of the human senses of smell and touch output in interface design still remain unexplored. Proper interface design will provide a mix of well-designed input and output mechanisms that satisfy the user s needs, capabilities and limitations in the most effective way possible.
Defining the User Interface The best interface is one that is not noticed, one that permits the user to focus on the information and task at hand not the mechanism used to present the information and perform the task.
The Importance of Good Design The main reason for producing systems that are inefficient and confusing, even with the presence of today s technology and tools. Some of the reasons are We don t care? We don t possess common sense? We don t have time? We still don t know what really makes good design? The root causes for the above are mainly due to number 4 with a good deal of number 3. The developers say We Do Care, but they never seem to have time to find out what makes good design nor to properly apply it.
The Importance of Good Design A well designed interface and screen is very important to the users. It is their window to view the capabilities of the system. It is the system, being one of the few visible components of the product the developers create. 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.
The Importance of Good Design A screen s layout and appearance affect a person in a variety of ways. If they are confusing or inefficient, people will have greater difficulty in doing their jobs and will make more mistakes. Poor design may even chase some people away from the system permanently. It may lead to aggravation, frustration and increased stress.
The Benefits of Good Design The benefits of a well designed screen include Improve Screen Clarity Improve Readability by making screens less crowded Separate items which can be combined on the same display line to conserve space, were placed on separate lines instead. Proper formatting of information on screens have a significant positive effect on performance. With redesigning the information on the screen, there is an increase in the extraction of desired information by the users.
The Benefits of Good Design Training costs are lowered because training time is reduced. Support line costs are lowered because fewer assist calls are necessary. Employee satisfaction is increased because aggravation and frustration are reduced. The organization s customers benefit because of the improved service they receive. Identifying and resolving problems during the design and development process also have economic benefits.
A Brief History of the Human Computer Interaction The need for people to communicate with each other has been in existence for long time. lowest and the communication modes we share are movements and gestures. The most common level of They are the language independent, that is, they permit people who do not speak the same language to deal with one another.
A Brief History of the Human Computer Interaction The next higher level, in terms of universality and complexity, is spoken language. A spoken language is communication if both parties to the communication understand it. At the third and highest level of complexity is written language. However, writing is still nowhere near as efficient as means of communication as speaking. In modern times, typewriter is an another step upward in communication complexity. However, spoken language is still more efficient than typing, regardless of typing skill level. a very efficient mode of
A Brief History of the Human Computer Interaction The 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 the 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. ability to deal with human computer s
Brief History of Screen Design The developers have been designing screens since CRT (Cathode Ray Tube) display was attached to a computer. Until 1970s, there was less interest in the application of good design principles. When IBM introduces 3270 CRT text-based terminal, good screen guidelines began to emerge. This usually consisted of many fields with very confusing and with unintelligible captions. It was cluttered and possessed a command field that challenged the user to remember what had to be keyed into it.
Brief History of Screen Design It was often required a referral to a manual to interpret. Using this kind of screen required a great deal of practice and patience. The screens were monochromatic, typically presenting green text on black backgrounds.
Brief History of Screen Design After a decade, guidelines for text-based screen design were finally made available. This helped in designing screens with much less cluttered look through the concepts of grouping and alignment of elements. User memory was supported by providing clear and meaningful captions and by listing commands on the screen and enabling them to be applied through function keys. Messages became clearer. The screens were not entirely clutter-free.
Brief History of Screen Design With the advent of graphics, another milestone in the evolution of screen design began. Some basic design principles did not change, groupings and alignment, borders were made available to visually enhance groupings, buttons implementing commands replaced function keys. and menus for Multiple properties of elements were also provided, including many font sizes and styles, line thickness an colors.
Brief History of Screen Design The entry field was supplemented by a multitude of other kinds of controls including list boxes, drop-down combination boxes, spin boxes and many more. These new controls were much more effective in supporting memory, simply allowing for selection from a list instead of requiring a remembered key entry. The old design was replaced by one of the new listing controls. Screens were simplified with the much more powerful computers.
Characteristics of Graphical and Web User Interface The Graphical User Interface Definition A user interface is a collection of mechanisms to interact with something. In a graphical interface, the primary interaction mechanism is a pointing device. What the user interacts with, is a collection of elements referred to as objects. techniques and They can be seen, heard, touched or otherwise perceived. Objects are visible the user and are used to perform tasks.
Characteristics of Graphical and Web User Interface They are interacted with as entities independent of all other objects. People perform actions called actions on objects. The operations include accessing and modifying objects by pointing, selecting and manipulating. All objects have standard resulting behaviors.
The Popularity of Graphics The graphics revolutionized design and user interface. The old text-based screen possessed one-dimensional, text-oriented, form-like quality. The graphics screen assumed a three-dimensional look. This revolution brought changes like information floated on windows, small rectangular boxes seem to rise above the background plane. The controls appeared to rise above the screen and move when activated. Lines appeared to be etched into the screen.
The Popularity of Graphics Information could appear and disappear as needed, sometimes text could be replaced by graphical images called icons. These icons could represent objects or actions. Screen navigation and commands are executed through menu bars and pull-downs. Menus pop-up on the screen. The screen body included selection fields such as radio buttons, check boxes, list boxes coexisted with the reliable old text entry field.
The Popularity of Graphics Text entry fields with attached or drop-down menus were made available. Screen objects and actions were selected through the use of pointing mechanisms like mouse or joystick instead of keyboard. Increased computer power and improvement in the display enable the user s actions to be reacted quickly, dynamically and meaningfully. This type of interface is referred to as WIMP interface: Windows, Icons, Menus and Pointers.
The Popularity of Graphics Graphical presentation of information utilizes person s information-processing capabilities. When properly used, it reduces the requirement for perpetual and mental information, reorganization and also reduces the memory loads. It permits faster information transfer between computers and people by permitting more visual comparison, more compact representation of information and simplification of the perception of structure. It can also add appeal and charm to the interface and permit greater customization to create a unique corporate or organization style. recording and
The Concept of Direct Manipulation The term used to describe this style of interaction for graphical systems was first used by Shneiderman (1982) These systems were called direct manipulation and they possess the following characteristics The system is portrayed as an extension of the real world The system simply replicates the objects and actions and portrays them on the screen. A person has the power to access and modify these objects. Continuous visibility of objects and actions Objects are continuously visible. Nelson described this concept as virtual reality . Hatfield called it WYSIWYG What You See Is What You Get.
The Concept of Direct Manipulation Actions are rapid and incremental with visible display of results The results of actions are immediately displayed visually on the screen in their new and current form. The impact of a previous action is quickly seen and the evolution of tasks is continuous and effortless. Incremental actions are easily reversible Actions, if discovered to be incorrect or not desired, can be easily undone.
Earlier Direct Manipulation Systems The concept of direct manipulation actually preceded the first graphical system. The earliest full-screen text editors possessed similar characteristics. Screens of text could be created (extension of real world) and then reviewed in their entirety (continuous visibility). Editing and restructuring could be easily accomplished (through rapid incremental actions) and the results immediately seen. Actions could be reversed when necessary.
Indirect Manipulation Direct manipulation of all screen objects and actions may not be feasible because of the following The operation may be difficult to conceptualize in the graphical system The graphics capability of the system may be limited The amount of space available for placing manipulation controls in the window border may be limited It may be difficult for people to learn and remember all the necessary operations and actions When this occurs, indirect manipulation is provided.
Indirect Manipulation Indirect manipulation substitutes words and text, such as pull-down or pop-up menus, for symbols and substitutes typing for pointing. Most window systems are a combination of direct and indirect manipulation. A menu may be accessed by pointing at the menu icon and then selecting it (direct manipulation). The menu itself is a textual list manipulation). When an operation is selected from the list, by pointing or typing, the system executes it as a command. of operations (indirect
Graphical Systems : 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
Graphical Systems : Advantages Increased feeling of control Immediate feedback Predicate system responses Easily reversible actions Less anxiety concerning use More attractive May consume less space Replaces national languages Easily augmented with text displays
Graphical Systems : Advantages Less typing requirements Smooth transition from command language system
Graphical Systems : Disadvantages Greater design complexity Learning still necessary Lack of experimentally-derived design guidelines Inconsistencies in technique and terminology Working domain is the present Not always familiar Human comprehension limitations Window manipulation requirements Production limitations
