Chapter 2

52
Prof.Manisha Maddel(SIOM) 1 Chapter-2 HCI Prof. Manisha Maddel(SIOM) 1

description

 

Transcript of Chapter 2

Page 1: Chapter 2

Prof.Manisha Maddel(SIOM) 1

Chapter-2

HCI Prof. Manisha Maddel(SIOM) 1

Page 2: Chapter 2

Prof.Manisha Maddel(SIOM) 2

Topics in syllabus:Usability paradigmsobject action interface principles and rulesguidelines for data entry and display

HCI Prof.Manisha Maddel(SIOM) 2

Page 3: Chapter 2

Prof.Manisha Maddel(SIOM) 3

UsabilityUsability 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

Page 4: Chapter 2

Prof.Manisha Maddel(SIOM) 4

why study paradigms

Concernshow 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

Page 5: Chapter 2

Prof.Manisha Maddel(SIOM) 5

What are ParadigmsPredominant theoretical frameworks or scientific

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

Page 6: Chapter 2

Prof.Manisha Maddel(SIOM) 6

Paradigm Shifts

HCI Prof.Manisha Maddel(SIOM) 6

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.

Page 7: Chapter 2

Prof.Manisha Maddel(SIOM) 7

Paradigm ShiftsDirect 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

Page 8: Chapter 2

Prof.Manisha Maddel(SIOM) 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

Page 9: Chapter 2

Prof.Manisha Maddel(SIOM) 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

Page 10: Chapter 2

Prof.Manisha Maddel(SIOM) 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

Page 11: Chapter 2

Prof.Manisha Maddel(SIOM) 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

Page 12: Chapter 2

Prof.Manisha Maddel(SIOM) 12

Interaction ModelSyntactic-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

Page 13: Chapter 2

Prof.Manisha Maddel(SIOM) 13

Interaction Model(cont.)There exists two basic interaction models for

any given system: 1. Object-Action Interface Model -The user

first selects an object and then selects the action to be performed on the selected object .

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

Page 14: Chapter 2

Prof.Manisha Maddel(SIOM) 14

Object-Action Interface ModelObject-Action Interface ModelTask hierarchies of objects and actions Interface hierarchies of objects and actionsDisappearance of syntax.

HCI Prof.Manisha Maddel(SIOM) 14

Page 15: Chapter 2

Prof.Manisha Maddel(SIOM) 15

Object-Action Interface ModelThe 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

Page 16: Chapter 2

Prof.Manisha Maddel(SIOM) 16

Object-action design1. 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

Page 17: Chapter 2

Prof.Manisha Maddel(SIOM) 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

Page 18: Chapter 2

Prof.Manisha Maddel(SIOM) 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' tasks3. Design interface objects and actions that metaphorically map to the real

world universe

 

HCI Prof.Manisha Maddel(SIOM) 18

Page 19: Chapter 2

Prof.Manisha Maddel(SIOM) 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

Page 20: Chapter 2

Prof.Manisha Maddel(SIOM) 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

Page 21: Chapter 2

Prof.Manisha Maddel(SIOM) 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

Page 22: Chapter 2

Prof.Manisha Maddel(SIOM) 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

Page 23: Chapter 2

Prof.Manisha Maddel(SIOM) 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

Page 24: Chapter 2

Prof.Manisha Maddel(SIOM) 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 assign a name

HCI Prof.Manisha Maddel(SIOM) 24

Page 25: Chapter 2

Prof.Manisha Maddel(SIOM) 25

Theories ,principles and Guidelines

Guidance for designers of interactive systems can be given in the form of 1. Theories &Models2. Middle level principles3. Specific and practical

guidelines

HCI Prof.Manisha Maddel(SIOM) 25

Page 26: Chapter 2

Prof.Manisha Maddel(SIOM) 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.

Page 27: Chapter 2

Prof.Manisha Maddel(SIOM) 27

High level Theories1.Explanatory theories2.Predictive theories3.Perceptual or Cognitive

subtasks theories4.Motor-task performance times

theories

Page 28: Chapter 2

Prof.Manisha Maddel(SIOM) 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.

Page 29: Chapter 2

Prof.Manisha Maddel(SIOM) 29

Other TheoriesPredictive theories:

Enable designers to compare proposed designs for execution time or error rates.

Perceptual or Cognitive subtasks theoriesPredicting reading times for free text,

lists, or formatted displays

Motor-task performance times theories:Predicting key stroking or pointing times

Page 30: Chapter 2

Prof.Manisha Maddel(SIOM) 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 designersTop-down nature is easy to explain Matches the software architecture Allows for useful modularity during design

HCI Prof.Manisha Maddel(SIOM) 30

Page 31: Chapter 2

Prof.Manisha Maddel(SIOM) 31

GOMS and the keystroke-level model By Card Moran

Goals, Operators, Methods, and Selection rules (GOMS) model

Example –1. Formulate Goal- edit document

Formulate sub goal – insert word2. The operators are – perceptual or cognitive acts.3. Use methods and procedures-(move cursor to desired

location by a sequence of arrow keys).4. 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

Page 32: Chapter 2

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: 1. Decide: If necessary, then accomplish

the goal of selecting the field 2. Accomplish the goal of using a specific

field delete method 3. Report goal accomplished

32Prof.Manisha Maddel(SIOM)

Page 33: Chapter 2

GOMS and the keystroke-level model (cont.)

Method 2 To accomplish the goal of deleting the field: 1.Decide: If necessary, then use the Browse tool to

go to the card with the field 2.Choose the field tool in the Tools menu 3.Note that the fields on the card background are

displayed 4.Click on the field to be selected 5.Report goal accomplished

33Prof.Manisha Maddel(SIOM)

Page 34: Chapter 2

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.

34Prof.Manisha Maddel(SIOM)

Page 35: Chapter 2

Prof.Manisha Maddel(SIOM) 35

Stages of action models Norman's seven stages of action

1. Forming the goal "make a nice meal".2. Forming the intention

"Make a chicken casserole using a can of prepared sauce."

3. Specifying the action "Defrost frozen chicken, open can, ..."

4. Executing the action actually opening the can.

5. Perceiving the system state the experience of smell, taste and look of the prepared meal.

6. Interpreting the system state Putting those perceptions together to present the sensory experience of a chicken casserole

7. Evaluating the outcome did the chicken casserole match up to the requirement of 'a nice meal'?

HCI Prof.Manisha Maddel(SIOM) 35

Page 36: Chapter 2

36Prof.Manisha Maddel(SIOM)

Norman’s 7-stage cycle of HCI

Page 37: Chapter 2

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 executionDesign the system to ease the process of getting

from the intention to the execution

The designer must bridge the gulf of evaluationDesign the system so that the response after the

user has performed an action can be easily interpreted and then evaluated

37Prof.Manisha Maddel(SIOM)

Page 38: Chapter 2

Norman's contributionsFour 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

38Prof.Manisha Maddel(SIOM)

Page 39: Chapter 2

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

39Prof.Manisha Maddel(SIOM)

Page 40: Chapter 2

Prof.Manisha Maddel(SIOM) 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

Page 41: Chapter 2

Prof.Manisha Maddel(SIOM) 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

Page 42: Chapter 2

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

42Prof.Manisha Maddel(SIOM)

Page 43: Chapter 2

Prof.Manisha Maddel(SIOM) 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

Page 44: Chapter 2

Principles of Good DesignPrinciple 1: Recognize the DiversityPrinciple 2: Use Golden Rules of HCI DesignPrinciple 3: Prevent ErrorsPrinciple 4: Follow the Guidelines for Data

DisplayPrinciple 5: Follow the Guidelines for Data

EntryPrinciple 6: Balance the Automated and

Human Control

44Prof.Manisha Maddel(SIOM)

Page 45: Chapter 2

45Prof.Manisha Maddel(SIOM)

Page 46: Chapter 2

46Prof.Manisha Maddel(SIOM)

Page 47: Chapter 2

Prof.Manisha Maddel(SIOM) 47

Principle 1: Recognize the DiversityUsage profiles

Novice or first-time users Knowledgeable intermittent

users Expert frequent users

User characteristics Age Gender Physical abilities Education Cultural or ethnic

background Training Motivation Goals Personality

HCI Prof.Manisha Maddel(SIOM) 47

•Task profiles•Decomposition into multiple middle- level task actions, which are refined into atomic actions •task frequencies of use •matrix of users and tasks helpful

Interaction styles•Direct manipulation •Menu selection •Form fillin •Command language •Natural language

Page 48: Chapter 2

Prof.Manisha Maddel(SIOM) 48

Principle 2: Use the Eight Golden Rules of Interface Design

1. Strive for consistency. Terminology Prompts Menus Help screens Color Layout Capitalization Fonts Most frequently violated

2. Enable frequent users to use shortcuts 1. Abbreviations 2. Special keys 3. Hidden commands 4. Macro facilities

3. Offer informative feedback  

4. Design dialogs to yield closure 1. Sequences of actions should

be organized into groups 2. Beginning, middle, and an

end 5. Offer error prevention and

simple error handling  

6. Permit easy reversal of actions  

7. Support internal locus of control  

8. Reduce short-term memory load.

HCI Prof.Manisha Maddel(SIOM) 48

Page 49: Chapter 2

Prof.Manisha Maddel(SIOM) 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

Page 50: Chapter 2

Prof.Manisha Maddel(SIOM) 50

Guidelines for Data DisplayOrganizing 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

Page 51: Chapter 2

Prof.Manisha Maddel(SIOM) 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

Page 52: Chapter 2

Prof.Manisha Maddel(SIOM) 52

Guidelines for Data EntryFive 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