1. Chapter-2
HCI Prof. Manisha Maddel(SIOM)
Prof.Manisha Maddel(SIOM) 1
2. Topics in syllabus:
Usability paradigms
object action interface
principles and rules
guidelines for data entry and display
HCI Prof.Manisha Maddel(SIOM) 2
3. Usability
Usability is a quality attribute that assesses how easy user
interfaces are to use.
Usability is defined by five quality components:
Learnability: How easy is it for users to accomplish basic tasks
the first time they encounter the design?
Efficiency: Once users have learned the design, how quickly can
they perform tasks?
Memorability: When users return to the design after a period of
not using it, how easily can they reestablish proficiency?
Errors: How many errors do users make, how severe are these
errors, and how easily can they recover from the errors?
Satisfaction: How pleasant is it to use the design?
HCI Prof.Manisha Maddel(SIOM) 3
4. why study paradigms
Concerns
how can an interactive system be developed to ensure its
usability?
how can the usability of an interactive system be
demonstrated or measured?
History of interactive system design provides paradigms
for usable designs
HCI Prof.Manisha Maddel(SIOM) 4
5. What are Paradigms
Predominant theoretical frameworks or scientific world
views
e.g., Aristotelian, Newtonian, Einsteinian paradigms in physics
Understanding HCI history is largely about understanding
a series of paradigm shifts
HCI Prof.Manisha Maddel(SIOM) 5
6. Paradigm Shifts
Time-sharing - single computer supporting multiple users.
Video Display Units-computers for visualizing and manipulating
data.
Programming toolkits-the right programming toolkit provides
building blocks to producing complex interactive systems
Personal computing- computing in small, powerful machines
dedicated to the individual.
Window systems and the WIMP interface -windows, icons, menus
and pointers now familiar interaction mechanisms. Humans can
pursue more than one task at a time. Windows used for dialogue
partitioning, to “change the topic.
Metaphor - relating computing to other real-world activity is
effective teaching technique.
HCI Prof.Manisha Maddel(SIOM) 6
7. Paradigm Shifts
Direct manipulation - Shneiderman describes appeal of
graphically-based interaction
visibility of objects
incremental action and rapid feedback
reversibility encourages exploration
syntactic correctness of all actions
replace language with action
What You See Is What You Get (WYSIWYG)
Language versus Action-
DM – interface replaces underlying system
language paradigm
interface as mediator
interface acts as intelligent agent
programming by example is both action and language
HCI Prof.Manisha Maddel(SIOM) 7
8. Paradigm Shifts(Cont.)
Hypertext-
key to success in managing explosion of information
mid 1960s – Nelson describes hypertext as non-linear
browsing structure
hypermedia and multimedia
Multimodality-
a mode is a human communication channel
emphasis on simultaneous use of multiple channels for input
and output
HCI Prof.Manisha Maddel(SIOM) 8
9. Paradigm Shifts(Cont.)
Computer Supported Cooperative Work (CSCW) –
CSCW removes bias of single user / single computer system
Can no longer neglect the social aspects
Electronic mail is most prominent success
The World Wide Web –
Simple, universal protocols (e.g. HTTP) and mark-up languages (e.g.
HTML) made publishing and accessing easy
Critical mass of users lead to a complete transformation of our
information economy.
HCI Prof.Manisha Maddel(SIOM) 9
10. Paradigm Shifts(Cont.)
Agent-based Interfaces -
Original interfaces
Commands given to computer
Language-based
Direct Manipulation/WIMP
Commands performed on “world” representation
Action based
Agents - return to language by instilling proactivity and
“intelligence” in command processor
Avatars, natural language processing
Ubiquitous Computing -
HCI Prof.Manisha Maddel(SIOM) 10
11. Paradigm Shifts(Cont.)
Sensor-based and Context-aware Interaction -
Humans are good at recognizing the “context” of a
situation and reacting appropriately
Automatically sensing physical phenomena (e.g., light,
temp, location, identity) becoming easier
How can we go from sensed physical measures to
interactions that behave as if made “aware” of the
surroundings?
HCI Prof.Manisha Maddel(SIOM) 11
12. Interaction Model
Syntactic-semantic model was used to describe programming
and was applied to database-manipulation facilities as well as direct
manipulation .
Distinction was made between meaningfully-acquired
semantic concepts and rote-memorized syntactic details
Semantic concepts of user's tasks were well-organized and
stable in memory .
Syntactic details of command languages were arbitrary and
required frequent rehearsal
With introduction of GUIs, emphasis shifted to simple direct
manipulations applied to visual representations of objects and
actions. Syntactic aspects not eliminated, but minimized.
HCI Prof.Manisha Maddel(SIOM) 12
13. Interaction Model(cont.)
There exists two basic interaction models for any given
system:
Object-Action Interface Model -The user first
selects an object and then selects the action to be
performed on the selected object .
Action Object Interface Model - The user first
selects an action to be performed and then selects
the objects on which this action will be performed.
HCI Prof.Manisha Maddel(SIOM) 13
14. Object-Action Interface Model
Object-Action Interface Model
Task hierarchies of objects and actions
Interface hierarchies of objects and actions
Disappearance of syntax.
HCI Prof.Manisha Maddel(SIOM) 14
15. Object-Action Interface Model
The emphasis is on visual display of user task objects and
actions .
The OAI model is an explanatory model that focuses on
task objects and actions and on interface objects and
actions
Object action design starts with understanding of the task.
That task includes the universe of real world objects with
which user’s works to accomplish their intentions and the
actions that they apply to those objects.
After the agreement on the task objects and actions and
their decomposition, the designer can create the
metaphoric representations of the interface objects and
actions.
HCI Prof.Manisha Maddel(SIOM) 15
16. Object-action design
1. understand the task.
real-world objects
actions applied to those object
2. create metaphoric representations of interface
objects and actions
3. designer makes interface actions visible to users
HCI Prof.Manisha Maddel(SIOM) 16
17. Object-Action Interface Model (cont)
Object-Action model maps to real life environment
The figure above shows the designer mapping from the
real world universe of objects and intentions to the
interface world universe of metaphors and plans.
HCI Prof.Manisha Maddel(SIOM) 17
18. Task hierarchies of objects and actions
Tasks include hierarchies of objects and actions at different high and low
levels.
Decomposition of real-world complex systems natural
human body
buildings
cities
Computer system designers must generate a hierarchy of objects and
actions to model users' tasks.
The following steps are recommended (Shneiderman) in order to build
correct tasks hierarchies by designers for a system:
1. Know about the users and their tasks (Interviewing users, reading workbooks and
taking training sessions)
2. Generate hierarchies of tasks and objects to model the users' tasks
3. Design interface objects and actions that metaphorically map to the real world
universe
HCI Prof.Manisha Maddel(SIOM) 18
19. Interface hierarchies of objects and actions:
Similar to the task domain, the interface domain contains
hierarchies of objects and tasks at different levels.
Interface Objects: Users interacting with a computer get
to understand some high level concepts relevant to that
system. As an example, they learn that computer stores
information, that these information are stored in files
contained within a hierarchy of directories, and that each
file has its own attributes like name, size, date, etc ...
HCI Prof.Manisha Maddel(SIOM) 19
20. Interface hierarchies of objects and
actions(cont.)
Interface Actions: These are also hierarchies of lower
levels actions.
Example - A high level plan is to create a text file might
involve mid-level actions such as creating a file, inserting
text and saving that file. The mid-level action of saving a
file the file can be decomposed into lower level actions
such as storing the file with a backup copy and may be
applying the access control rights. Further lower level
actions might involve choosing the name of the file, the
location folder to be saved in, dealing with errors such as
space shortage, and so on
HCI Prof.Manisha Maddel(SIOM) 20
21. Interface hierarchies of objects and
actions(cont.)
For the user:
There are several ways users learn interface objects and actions
such as demonstrations, sessions, or trial and error sessions. When
these objects and actions have logical structure that can be related to
other familiar task objects and actions, this knowledge becomes stable
in the user's memory.
For the designer:
The OAI model helps a designer to understand the complex
processes that a user has to perform in order to successfully use an
interface to perform a certain task. Designers model the interface
actions and objects based on familiar example and then fine tune these
models to fit the task and the user.
HCI Prof.Manisha Maddel(SIOM) 21
22. Limitations and challenges:
1. It's hard to apply a series of actions, that is already
performed on an object, to another set of objects (what
command line users call "batching") .
2. It's also hard in the object-action model to perform
pipelining
3. One last challenge appears when users start to become
proficient using a certain system, and their performance
curve start to raise.
HCI Prof.Manisha Maddel(SIOM) 22
23. The disappearance of syntax
In early days Users must maintain a profusion of device-dependent details in
their human memory.
Which action erases a character
Which action inserts a new line after the third line of a text file
Which abbreviations are permissible
Which of the numbered function keys produces the previous screen.
Learning, use, and retention of this knowledge is hampered by two problems
1. Details vary across systems in an unpredictable manner .
2. acquiring syntactic knowledge is often a struggle.
Syntactic knowledge is usually conveyed by example and repeated usage .
Minimizing these burdens is the goal of most interface designers
Modern direct-manipulation systems
Familiar objects and actions representing their task objects and actions.
Modern user interface building tools
Standard widgets
HCI Prof.Manisha Maddel(SIOM) 23
24. Interface hierarchies of objects and actions
E.g. A computer system:
Interface Objects
directory
name
length
date of creation
owner
access control
files of information
lines
fields
characters
fonts
pointers
binary numbers
Interface Actions
load a text data file
insert into the data file
save the data file
save the file
save a backup of the file
apply access-control rights
overwrite previous version
HCI assign a name
Prof.Manisha Maddel(SIOM) 24
25. Theories ,principles and Guidelines
Guidance for designers of interactive
systems can be given in the form of
1. Theories &Models
2. Middle level principles
3. Specific and practical guidelines
HCI Prof.Manisha Maddel(SIOM) 25
26. Theories ,principles and Guidelines
The theories and models offer framework or
language to discuss issue that are application
independent.
Middle level principles are useful in creating
and comparing design alternatives .
The practical guidelines provide helpful
reminders of rules uncovered by designers.
Prof.Manisha Maddel(SIOM) 26
27. High level Theories
1. Explanatory theories
Predictive theories
Perceptual or Cognitive subtasks
theories
Motor-task performance times
theories
Prof.Manisha Maddel(SIOM) 27
28. Explanatory Theories
Explanatory theories seek to explain the behavior of our world, they
tend to provide a more conceptual model of the world.
Explanatory theories are help full in
Observing behavior
Describing activity
Conceiving of designs
Comparing high-level concepts of two designs
Training
Taxonomy is a part of Explanatory theory.
Order on a complex set of phenomena
Facilitate useful comparisons
Organize a topic for newcomers
Guide designers
Indicate opportunities for novel products.
Prof.Manisha Maddel(SIOM) 28
29. Other Theories
Predictive theories:
Enable designer s to compar e
proposed designs for execution time
or er ror r ates.
Per ceptual or Cognitive subtasks
theories
Pr edicting r eading times for fr ee text,
lists, or for matted displays
Motor-task perfor mance times
theories:
Pr edicting key str oking or pointing
times
Prof.Manisha Maddel(SIOM) 29
30. Conceptual, semantic, syntactic, and lexical model
Foley and van Dam four-level approach
Conceptual level: User's mental model of the interactive system
Semantic level: Describes the meanings conveyed by the user's
command input and by the computer's output display
Syntactic level: Defines how the units (words) that convey
semantics are assembled into a complete sentence that instructs the
computer to perform a certain task
Lexical level: Deals with device dependencies and with the precise
mechanisms by which a user specifies the syntax
Approach is convenient for designers
Top-down nature is easy to explain
Matches the software architecture
Allows for useful modularity during design
HCI Prof.Manisha Maddel(SIOM) 30
31. GOMS and the keystroke-level model By Card Moran
Goals, Operators, Methods, and Selection rules (GOMS) model
Example –
4. Formulate Goal- edit document
Formulate sub goal – insert word
a The operators are – perceptual or cognitive acts.
c Use methods and procedures-(move cursor to desired location
by a sequence of arrow keys).
f Selection rules- choosing among several methods available for
accomplishing the goal( delete by repeated backspace versus
delete by placing markers at the beginning and end of region and
pressing delete button).
Keystroke-level model: Predict performance times for error-free
expert performance of tasks by summing up the time for key
stroking ,pointing ,homing, drawing, thinking and waiting for
the system to respond. This model concentrate on expert users
and error free performance and places less emphasis on
learning ,problem solving ,error handling ,subjective satisfaction
and retention.
HCI Prof.Manisha Maddel(SIOM) 31
32. GOMS and the keystroke-level model (cont.)
Example
Several alternative methods to delete fields, e.g.
Method 1
To accomplish the goal of deleting the field:
e Decide: If necessary, then accomplish the
goal of selecting the field
g Accomplish the goal of using a specific
field delete method
h Report goal accomplished
Prof.Manisha Maddel(SIOM) 32
33. GOMS and the keystroke-level model
(cont.)
Method 2
To accomplish the goal of deleting the field:
3. Decide: If necessary, then use the Browse tool to go to
the card with the field
4. Choose the field tool in the Tools menu
5. Note that the fields on the card background are
displayed
6. Click on the field to be selected
7. Report goal accomplished
Prof.Manisha Maddel(SIOM) 33
34. GOMS and the keystroke-level
model (cont.)
Selection rule set for goal of using a specific field-
delete method:
If you want to past the field somewhere else,
then choose "Cut Field" from the Edit menu.
If you want to delete the field permanently,
then choose "Clear Field" from the Edit
menu.
Report goal accomplished.
Prof.Manisha Maddel(SIOM) 34
35. Stages of action models
Norman's seven stages of action
t Forming the goal "make a nice meal".
l Forming the intention
"Make a chicken casserole using a can of prepared
sauce."
c Specifying the action
"Defrost frozen chicken, open can, ..."
c Executing the action
actually opening the can.
Perceiving the system state
the experience of smell, taste and look of the
prepared meal.
f Interpreting the system state
Putting those perceptions together to present the
sensory experience of a chicken casserole
c Evaluating the outcome
did the chicken casserole match up to the
requirement of 'a nice meal'?
HCI Prof.Manisha Maddel(SIOM) 35
37. Norman’s 7-stage cycle of HCI(cont.)
Gulf of execution: Mismatch between the users'
intentions and the allowable actions
Gulf of evaluation: Mismatch between the system's
representation and the users' expectations
The designer must bridge the gulf of execution
Design the system to ease the process of getting from the
intention to the execution
The designer must bridge the gulf of evaluation
Design the system so that the response after the user has
performed an action can be easily interpreted and then
evaluated
Prof.Manisha Maddel(SIOM) 37
38. Norman's contributions
Four principles of good design
State and the action alternatives should be
visible
Should be a good conceptual model with a
consistent system image
Interface should include good mappings
that reveal the relationships between stages
User should receive continuous feedback
Prof.Manisha Maddel(SIOM) 38
39. Four critical points where user failures can occur
(Norman’s 7-stage cycle of HCI(cont.) )
Users can form an inadequate goal
Might not find the correct interface object
because of an incomprehensible label or icon
May not know how to specify or execute a desired
action
May receive inappropriate or misleading
feedback
Prof.Manisha Maddel(SIOM) 39
40. Consistency through grammars
An important goal for designers is a consistent
user interface.
Inconsistent action verbs
Take longer to learn
Cause more errors
Slow down users
Harder for users to remember
HCI Prof.Manisha Maddel(SIOM) 40
41. Consistency through grammars
(cont.)
Payne and Green addressed the multiple
levels of consistency (lexical , syntactic and
semantic) through a notational structure
called task-action grammars(TAGS)
Task-action grammars (TAGs) try to
characterize a complete set of tasks.
HCI Prof.Manisha Maddel(SIOM) 41
42. Consistency through grammars (cont.)
Example: TAG definition of cursor control
Dictionary of tasks:
move-cursor-one-character-forward[ Direction=forward, Unit=char]
move-cursor-one-character-backward [Direction=backward, Unit=char]
move-cursor-one-word-forward [Direction=forward ,Unit=word]
move-cursor-one-word-backward[ Direction=backward ,Unit=word]
High-level rule schemas describing command syntax:
task [Direction, Unit ]-> symbol [Direction] + letter [Unit]
symbol [Direction=forward] -> "CTRL"
symbol [Direction=backward] -> "ESC"
letter [Unit=word] -> "W"
letter [Unit=char] -> "C"
Generates a consistent grammar:
move cursor one character forward CTRL-C
move cursor one character backward ESC-C
move cursor one word forward CTRL-W
move cursor one word backward ESC-W
Prof.Manisha Maddel(SIOM) 42
43. Widget-level theories
Potential benefits:
Possible automatic generation of performance
prediction
A measure of layout appropriateness available as
development guide
Estimates generated automatically over many designers
and projects
perceptual complexity
cognitive complexity
Higher-level patterns of usage appear
HCI Prof.Manisha Maddel(SIOM) 43
44. Principles of Good Design
Principle 1: Recognize the Diversity
Principle 2: Use Golden Rules of HCI Design
Principle 3: Prevent Errors
Principle 4: Follow the Guidelines for Data Display
Principle 5: Follow the Guidelines for Data Entry
Principle 6: Balance the Automated and Human
Control
Prof.Manisha Maddel(SIOM) 44
47. Principle 1: Recognize the Diversity
Usage profiles
Novice or first-time users •Task profiles
Knowledgeable intermittent users •Decomposition into multiple middle-
Expert frequent users level task actions, which are refined into
atomic actions
User characteristics •task frequencies of use
Age •matrix of users and tasks helpful
Gender
Physical abilities
Interaction styles
Education
•Direct manipulation
Cultural or ethnic background
•Menu selection
Training •Form fillin
Motivation •Command language
Goals •Natural language
Personality
HCI Prof.Manisha Maddel(SIOM) 47
48. Principle 2: Use the Eight Golden Rules
of Interface Design
1. Strive for consistency. Offer informative feedback
Terminology
Prompts e Design dialogs to yield closure
Menus 1. Sequences of actions should be
Help screens organized into groups
Color 2. Beginning, middle, and an end
Layout
e Offer error prevention and simple
error handling
Capitalization
Fonts
e Permit easy reversal of actions
Most frequently violated
2. Enable frequent users to use shortcuts r Support internal locus of control
1. Abbreviations
2. Special keys Reduce short-term memory load.
3. Hidden commands
4. Macro facilities
HCI Prof.Manisha Maddel(SIOM) 48
49. Principle - 3 Prevent Errors
To reduce errors by ensuring complete and correct
actions:
Correct matching pairs
Complete sequences
Correct commands.
HCI Prof.Manisha Maddel(SIOM) 49
50. Guidelines for Data Display
Organizing the display
1. Consistency of data display
2. Efficient information assimilation by the user
3. Minimal memory load on user
4. Compatibility of data display with data entry
5. Flexibility for user control of data display
HCI Prof.Manisha Maddel(SIOM) 50
51. Guidelines for Data Display(Cont.)
Getting the user's attention
Intensity
Marking
Size
Choice of fonts
Inverse video
Blinking
Color
Color blinking
Audio
HCI Prof.Manisha Maddel(SIOM) 51
52. Guidelines for Data Entry
Five high-level objectives for data entry:
Consistency of data-entry transactions
Minimal input actions by user
Minimal memory load on user
Compatibility of data entry with data display
flexibility for user control of data entry
HCI Prof.Manisha Maddel(SIOM) 52