MAU Mekaneselam Campus

CHAPTER FOUR
Interaction in HCI

10/07/2014E.C MAU Mekaneselam Campus Tekalegn B. Computer Science

 What is interaction?
• Communication between the user and system

User  System (Computer)

• In interaction, we have to focus on the following terms:

1. Domain: the area of work under study e.g. graphic design
2. Goal: what you want to achieve e.g. Create a solid red
triangle
3. Task: how you go about doing it? In terms of operations or
actions

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

Interaction Model
Donald Norman’s model
 Seven stages of interaction by Donald:
 User establishes the goal
 Formulates intention
 Specifies actions at interface
 Executes action
 Perceives system state
 Interprets system state
 Evaluates system state with respect to goal

 Norman’s model concentrates on user’s view of the interface only.

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

Execution/evaluation loop

Goal

Execution Evaluation
System

 The plan formulated by the user is executed by the computer.

 When finished, the user evaluates the results and determines
the further actions.

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

Execution/evaluation loop

Goal

Execution Evaluation
System

• User establishes the goal

• Formulates intention
• Specifies actions at interface
• Executes action
• Perceives system state
• Interprets system state
• Evaluates system state with respect to goal

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

Execution/evaluation loop

Goal

Execution Evaluation
System

• User establishes the goal

• Formulates intention
• Specifies actions at interface
• Executes action
• Perceives system state
• Interprets system state
• Evaluates system state with respect to goal

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

Execution/evaluation loop

Goal

Execution Evaluation
System
• User establishes the goal
• Formulates intention
• Specifies actions at interface
• Executes action
• Perceives system state
• Interprets system state
• Evaluates system state with respect to goal

• Gulf of execution: Difference between the user’s formalization of the actions and the actions
allowed by the system.
• Gulf of evaluation: Distance between the physical presentation of the system state and the
expectation of the user.

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Human Error
• Human errors are often classified into slips and mistakes.

• Slip
- User understand system and goal
- Formulated the right action, but fail to execute that action correctly.
- Incorrect action (e.g. mistype or you accidentally press the mouse
button at the wrong time).

• Mistake

- User don’t know the system well. May not even have right goal!

• Fixing things?

Slip – better interface design

Mistake – better understanding of system

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Abowd and Beale model

 Their interaction framework has 4 parts

-User
-Input
-System
-Output

 System and user communicate with input and output at the interface.

 User (task) and system (core) has its own unique language.

 Interaction is translation between languages.

 Problems in interaction occurs during translation of each action.

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Cont …

User intentions
 Translated into actions at the interface
 Translated into alterations of system state
 Reflected in the output display
 Interpreted by the user

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Ergonomics
 Study of the physical characteristics of interaction.

 Address issues on the user side of the interface

 Also known as human factors.

 Ergonomics good at defining standards and guidelines for

constraining the way we design certain aspects of systems.

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Cont ...
Issues addressed by ergonomics
 Arrangement of controls and displays
 Surrounding environment
 Health issues
e.g. physical position, environmental conditions (temperature,
humidity), lighting, noise.
 Use of colour
e.g. use of red for warning, green for okay, etc.

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

Common interaction styles
 Command line interface
 Menus
 Natural language
 Question/answer and query dialogue
 Form-fills
 WIMP
 Point and click
 Three–dimensional interfaces

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Command line interface
• Way of expressing instructions to the computer directly.
 Function keys, single characters, short abbreviations,
whole words, or a combination.

• Suitable for repetitive tasks.

• Better for expert

• Offers direct access to system functionality

• Command names/abbreviations should be meaningful!

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

Cont …

Disadvantages of command-line interfaces:

• Options difficult to remember.
• High error rates.
• Frustrating for non-expert users.
• Difficult error corrections.

. representation.
• Text-only data

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Menus
 Set of options displayed on the screen

 Options visible
 Less recall - easier to use.
 Names should be meaningful.

 Selection by:
 Numbers, letters, arrow keys, mouse
 Combination

 Often options hierarchically grouped.

 Sensible grouping is needed.

 Restricted form of full WIMP system.

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.
26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.
Cont …
 Advantages of menu-based interfaces:
• Low memory requirements.
• Self-explanatory.
• Easy to undo errors.
• Appropriate for beginners.

 Disadvantages of menu-based interfaces:

• Rigid and inflexible navigation.
• Inefficient for large menu navigation.
• Slow for expert user.
26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.
 Natural language
In natural language verbs, phrases, clauses are used for UI controls.

Familiar to user.

 Speech recognition or typed natural language.

 Problems.

Successful in restricted domains.

 User must learn phrases that are (and are not) understood.

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Question/answer

 Question/answer interfaces
• User led through interaction via series of questions.
• Suitable for novice users but restricted functionality.
• Often used in information systems.

 Disadvantages of question and answer interfaces

• Require valid input supplied by user.
• Require familiarity with interface controls.
• Can be tedious to correct mistakes.

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Query languages (e.g. SQL)

• Used to retrieve information from database

• Requires understanding of database structure and
language syntax.
• It requires some expertise.

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Form-fills
 Primarily for data entry or data retrieval.

 Screen like paper form.

 Data placed in relevant place.

 Requires
• Good design
• Obvious correction facilities

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 WIMP
• WIMP: windows, icons, menus, pointers

• Currently the most common environment for interactive computing

• Examples Microsoft Windows, Apple MacOS

Elements of the wimp interface

Windows, Icons, Menus, Pointers, Buttons,

Toolbars, Dialog boxes

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Windows
 Areas of the screen that behave as if they were independent.
 Can contain text or graphics
 Can be moved or resized

 Scrollbars
 Allow the user to move the contents of the window up
and down or from side to side.

 Title bars
 Describe the name of the window

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Icons
• Small picture or image

• Represents some object in the interface

• windows can be closed down

• Icons can be many and various

 Highly stylized
 Realistic representations.

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

Pointers
• Important component
• WIMP style relies on p0ointing and selecting things

• Uses mouse, cursor keys or keyboard shortcuts.

• Wide variety of graphical images

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Menus
• Choice of operations or services offered on the screen.
• Required option selected with pointer.

Fi l e Edi t Opt i o ns Fo nt
Ty p e wr i t e r
Sc re e n
Times

Problem – take a lot of screen space.

Solution – pop-up: menu appears when needed.

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

Dialogue boxes

 Information windows that pop up to inform of an important

event or request information.
e.g: when saving a file, a dialogue box is displayed to
allow the user to specify the filename and location. Once
the file is saved, the box disappears.

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Interactivity
 WIMP systems have the same elements:
Windows, icons., menus, pointers, buttons, etc.
 But different window systems behave differently e.g. MacOS
vs Windows menus

Error and repair

• Can’t always avoid errors …
… but we can put them right.
• Make it easy to detect errors
… then the user can repair them.

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Context of interaction

Interaction affected by social and organizational context.

• The presence of other people in a work environment affects the

performance of the worker in any task.

• In order to perform well, users must be motivated.

• If the computer system makes it difficult for the user to perform a

certain task, he might get frustrated and his productivity could
drop.

• The user may also lose motivation if a system is introduced that

does not match the actual requirements of the job to be done.
26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.
 Paradigms
Why Study Paradigms?
• History of interactive system design provides paradigms for usable designs.

• Paradigm: predominant theoretical frameworks or scientific world views.

Paradigms of interaction
• New computing technologies arrive, creating a new
perception of the human - computer relationship.

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

The initial paradigm

• Batch processing
Complete jobs processed individually.

Impersonal computing

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

Example Paradigm Shifts

• Batch processing
• Time-sharing

Interactive computing

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

 Example Paradigm Shifts

• Batch processing
@#$% !
• Timesharing
• Networking

???

Community computing
26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.
 Example Paradigm Shifts

• Batch processing
C…P… filename Move this file here,
• Timesharing dot star… or was and copy this to there.
• Networking it R…M?

• Graphical displays
% foo.bar
ABORT
dumby!!!

Direct manipulation
26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.
 Example Paradigm Shifts
• Batch processing
• Timesharing
• Networking
• Graphical display
• Microprocessor

Personal computing
26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.
 Example Paradigm Shifts

• Batch processing
• Timesharing
• Networking
• Graphical display
• Microprocessor
• WWW

Global information

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.

Example Paradigm Shifts
• Batch processing • A symbiosis of physical and
• Timesharing electronic worlds in service
of everyday activities.
• Networking
• Graphical display
• Microprocessor
• WWW
• Ubiquitous Computing

26/06/2014 E.C MAU Mekaneselam Campus Tekalegn B.