Direct Manipulation

Interaction Design with
Direct Manipulation
Lecture #4
Overview
Overview
Scope
Applications
03/17/15
BIT 2305-Human Computer

Interaction
Concept of Direct Manipulation

Ben Shneiderman introduced the term
Direct Manipulation in (1983)
Reference:
Direct Manipulation: A Step Beyond
Programming Languages, Ben Shneiderman,
IEEE Computer, Vol. 16, No. B, August 1983, pp
57-69
03/17/15

Interaction
Direct Manipulation?
Direct manipulation (DM) is a style of
human-computer interaction design which
features a natural representation of task
objects and actions promoting the notion of
people performing a task themselves
(directly) not through an intermediaries like
a computer
03/17/15

Interaction
Direct Manipulation by Shneiderman

It is better to quote the words from Shneiderman
(1983)
The system that best exemplify direct manipulation give us
the quality feeling that we are directly engaged with
control of the objects not with the programs, not with the
computer, but with the semantic objects of our goals and
intentions. This kind of requirement does not require an
interface of pictures, diagrams, or icons. It can be done
with words and descriptions. The key properties are that
the objects, whatever their form, have behaviors, can be
referred to by other objects, and that referring to an object
causes it to behave. The goal is to permit the user to act as
if the representation is the thing itself.
03/17/15

Interaction
Direct Manipulation: An Example
Driving a car
Object:
Task:
Actions:
Car
Drive the car
From driver to car
Lets consider the three scenarios

Scenario 1:
Interface with command language
Scenario 2:
With an intermediately style of interaction
Scenario 3:
With direct manipulation
03/17/15

Interaction
Driving a Car: Scenario 1
Driver is a good programmer

Using his palmtop /laptop computer he gives instructions to the car
START
TURN LEFT 37 DEGREES
SLOW 5
TURN RIGHT 10 DEGREES
FAST 10
FAST 20
TURN 0
STOP
03/17/15

Interaction
Driver sits in the backseat of the car giving a

stranger directions
Further, imagine the stranger possessing poor

interpersonal skills and having a limited
vocabulary
03/17/15

Interaction
03/17/15
Driver himself drives the car by manipulating

the steering wheel and pedals

Interaction
Three Scenarios, Three Interaction Styles
Driver is a good programmer

Using his palmtop /laptop computer he gives instructions to the car
Scenario 1
03/17/15
Require superman level mastery of interface

Usually with less competence in performing tasks
Very less joy of driving

Interaction
10
Driver sits in the backseat of the car giving a stranger directions
Scenario 2
03/17/15
Driver dont have a direct view of where he is going
User has to rely on a stranger who, if they are dont

receive explicitly directions using particular phrases
in a fixed order, idles in the middle of the road or
takes him to unfamiliar places from which he does
not know the way out

Interaction
11
Driver himself drives the car by manipulating the steering wheel

and pedals
Scenario 3
03/17/15
The car responds immediately to drivers actions,

and these response are immediately evident
If the driver makes a mistake, such as turning too

sharply, he can quickly recognize that and perform a
corrective measure accordingly

Interaction
12
Interaction Style with Direct Manipulation
The user with direct manipulation user interface has the

following benefits
1.
Mastery of the interface
2.
Competence in performing tasks
3.
Ease in learning the system originally and in assimilating advanced features
4.
Confidence in the capacity to retain mastery over time
5.
Enjoyment in using the system
6.
Eagerness to show off the system to novices
7.
8.
9.
10.
11.
12.
Desire to explore more powerful aspects of the system

Novices can learn basic functionality, usually through a demonstration by a more experienced user
Experts can work rapidly to carry out a wide range of tasks, even defining new functions and features
Knowledgeable intermittent users can retain operational concepts
Error messages are rarely needed
User can immediately see the if their actions are furthering their goals, and if the actions are counterproductive, they can simply change the
direction of their activity
Users experience less anxiety because the system is comprehensible and because actions can be reversed so easily
Users gain confidence and mastery because they are the initiators of action, they feel in control, and the system responses are predictable
13.
14.
03/17/15

Interaction
13
Interaction Style with Direct Manipulation
03/17/15
Principle
Interactive systems where the user physically

interacts with their system
Fundamental
The main feature in direct manipulation is user

control
Instead of typing command and allowing the

operating system to act as a strange intermediately,
direct manipulation allows the user to feel like s/he is
in central control

Interaction
14
Shneidermans Criteria for DM
Visibility of Objects
Continuous representation of the objects of interests
Immediate Effect
Replacement of complex command-language syntax with

direct, visual manipulation of the object of interest
Visibility of Actions
03/17/15
have behavior
can be referred to by other objects
referring to an object causes it to behave
Rapid, incremental, reversible operations, whose effect on the

object of interest is immediately visible

Interaction
15
Errors with Direct Manipulation

It is impossible to make syntax errors in direct
manipulation since any movement of the icon is legal
and have some meaning
It is frequently claimed that direct manipulation
interfaces reduce the need for error messages
As a matter of fact,
Errors frequently occurs when using direct manipulation
systems
In many cases error messages are pretty poor
03/17/15
Human Computer Interaction-BIT

2305
16
Example 1: Errors with DM

Deleting a file in Windows Explorer by
dragging its icon to the Trash icon
03/17/15

2305
17

Lexical level error: The file icon is dragged to
the icon representing Backup and not to the
Trash icon as intended
Why this error?
Because syntax of dragging an icon on top of
another icon has been correctly specified
This problem is due to Capture error
03/17/15

2305
18

Alphabetical level error: User is erroneously
specify a point on the screen which is outside
the desired region
03/17/15

2305
19

User has moved the document icon to a position just outside
the Trash icon
Since most of the outline icon overlaps the Trash icon, the novice user
may think that the Trash has been indicated as the destination for the
document, but in actual fact, the cursor's hot spot is outside the
Trash icon and therefore indicates another destination for the
document
The document will not be discarded but will be moved to a new
location between the Backup and Trash icons
Experienced user usually does not mislead with this type of errors
03/17/15

2305
20
More Problems with Direct Manipulation

Problem 1
Spatial or visual representations are not necessarily an improvement
over text
They may be too spread out
Causing off-page connectors
Tedious scrolling on displays
Direct manipulation may consume valuable screen space

Force valuable information off-screen
Requiring scrolling
Multiple actions
Graphic displays versus textual displays

A tabular textual display of 50 documents is more preferable than only 10
graphic document icons with the name abbreviated to fit the icon size
03/17/15

2305
21
Problems with Direct Manipulation

Problem 2
Users must learn the meaning of components of
the visual representation
A graphic icon may be meaningful to the designer, but
may require as much or more learning time than a word
Icons with title that appear when the cursor is over them
offer only a partial solution
03/17/15

2305
22

Problem 3
Visual representation may be misleading
Users may grasp the analogical representation rapidly,
but then may draw incorrect conclusions about
permissible actions
Users may overestimate or underestimate the functions
of the computer-based analogy
Ample testing must be carried out to refine the displayed
objects and actions and to minimize negative side effects
03/17/15

2305
23

Problem 4
For experienced typists, taking hand off the keyboard to
move a mouse or point with a finger may be slower than
typing the relevant command
If the user is familiar with a compact notation that is easy to enter
from keyboard but may be more difficult to select with mouse
The keyboard remains the more effective direct-manipulation
device for certain tasks
Choosing the right objects and actions is not necessarily an

easy task
Simple metaphors, analogies, or models with a minimal set of
concepts are a good starting point
03/17/15

2305
24
Programming by Direct Manipulation

Apart from performing task by DM it has better prospects
A few are listed below
Programming of physical devices
Robot programming
CAD-VLSI Design
Automatic programming
Programming with visualization
Demonstrational programming
Remote direct manipulation
Virtual reality
03/17/15

2305
25
Programming of Physical Devices

Allow user to program a sequence of settings and then
to replay it smoothly when required
Television, digital camera, mobile handset etc.
Robot programming
Moving the robot arm through a sequence of steps that are
later displayed, possibly at higher speed
The same can be used for generalization
CAD-VLSI design
Manipulate at the front-end and convey code to the backend tools
03/17/15

2305
26
Automatic Programming
Allow user to create macros by simply
performing a sequence of commands that is
stored for later use
Macros can invoke each other leading to
complex programming possibilities
Lotus 1-2-3
MS Excel etc.
03/17/15

2305
27
Programming with Visualization

System with visualization in several
application domains
Arithmetic systems
Polynomial evaluation
Matrix algebra
Vector analysis
Laboratory experiments in Physics, Chemistry etc.

Communication aid for motor-impaired or
physically disabled user
03/17/15

2305
28
Direct Manipulation Applications

Graphical User Interface
Embodied User Interface
Virtual Reality
Web Page Design
Mobile Communication
.
many more.
03/17/15

2305
Graphical User Interface (GUI)

Standard elements in GUI based direct
manipulation
Bitmapped screen
Desktop metaphor
WIMP
03/17/15
Windows
Icon
Menus
Pointers

2305

Standard elements in GUI based direct manipulation
Bitmapped screen
Desktop metaphor
WIMP
Windows
Multiple windows
Tiled vs. overlapping
Reduce and restore
Move
Resize
Scroll contents
03/17/15

2305

Bitmapped screen
Desktop metaphor
WIMP
Icon
Selection and activation
Move into and out of fashion
Static icon
Animated icon
Multimedia icon
Reference: Bringing Icons to Life by Baecker, Small, and Mander in SIGCHI

Conference on HCI, 1991
03/17/15

2305

Standard elements in GUI based direct
manipulation
Bitmapped screen
Desktop metaphor
WIMP
Menus
Pull-down (from bar or top)
Pop-up/contextual (from item)
03/17/15

2305

Bitmapped screen
Desktop metaphor
WIMP
Pointers
Property sheets/dialogue boxes
Check box
Selection / radio buttons
Fill-in blanks
Pallets
Tool bars
etc.
03/17/15

2305

Bitmapped screen
Desktop metaphor
WIMP
WYSIWYG
Multiple selection scopes
Characters, words, lines, spaces etc.
Move, copy, delete, insert etc.
Styles (font, size, face)
Visible on screen
Automatic layout/pagination etc.
etc
03/17/15

2305
In Other Applications
Direct manipulation is not necessarily with GUI
Other elements in direct manipulation based user interface are:
Sensors
Touch screen
Haptic sense, pressure, temperature, force etc.
Spatial inputs
3D interaction
Camera based, magnetic trackers etc.
Multi-modal inputs
Eye clicking
Facial movement
Gesture
Multimedia (video, audio, hand-written text) etc.
03/17/15

2305
Embodied User Interface (EUI)

This is an example of designing user interface beyond
GUI
In GUI, the virtual world inside the computer is
portrayed graphically on the display
In EUI, the computation is embodied in physical
devices that exist as elements in the physical worlds
EUI is applicable, particularly in portable
computational appliances like PDA, palm series of
handheld devices etc.
03/17/15

2305
EUI Design
Design natural manipulation
Hardware robustly sense and interpret manipulations
Treat the body of the device as part of the user

interface
Squeeze, shake, flick, tilt etc, may be the lexical elements in
the interface
An example: xBook
It is more than an eBook
It is just like a book but not made of papers rather is digital
It looks similar to the paper book (size, weight, usefulness) but contains more
usability
03/17/15

2305
xBook Design
Features in xBook
The xBook is portable and graspable
They must be held, touched and carried to be used
This is designed to best support a limited set of specific tasks

related to book reader
The work material are contained inside the devices
The devices embody the tasks they are designed for
The xBook casing are physically designed to make these tasks
easy and natural to do.
03/17/15

2305
xBook Design
Support from the xBook
Natural manipulation
Tightly integrating the physical body of the device with
the virtual content inside and the graphical display of
the content
By treating the body of the xBook as part of the user
interface
User scrolls through a menu by tilting the display
Zooms text by pushing/releasing/stirring
03/17/15

2305
xBook Design: Requirement

ASIC
To realize the digital devices to compute, store and
controlled by the user
Page-sized screen with XGA resolution

High-quality display so that two pages color display is
okay
Pen input
To mimic the pen, with which user would be able to
mark, underlined, annotated etc. within the book
Voice-output
Stored content can be voiced (to relief from reading the
paper line by line)
03/17/15

2305
Tasks: Design, Implementation and Evaluation
We have to identify tasks
03/17/15
Turning pages
Annotating a document
Searching
Navigating
Index
etc.

2305

We have to identify interface design
Turning pages
Allow user to navigate through multi-paged documents by
simply turning pages
Allow the user to change the display pages on the devices
in a manner to paper book
Physical manipulation in the user interface should be
compatible with the physical effect of that manipulation in
the analog task
User turns the next page with a left-to-right flick on the
upper right corner of a page and turn to the previous page
with a left-to-right flick on the upper-left corner
03/17/15

2305
Implementation
Turning pages
Hardware to support these flick manipulations
detects finger pressure in the upper-left and
upper-right corners, say
Put pressure sensors on the frame of the devices
Icon on the display area with touch sensitive
03/17/15

2305
Evaluation
The design should be thoroughly evaluated
with varieties of user in several context and
change can be made accordingly
03/17/15

2305
THE END
03/17/15

2305

Direct Manipulation

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Direct Manipulation

Uploaded by

Copyright:

Available Formats

Interaction Design with

BIT 2305-Human Computer

Concept of Direct Manipulation

BIT 2305-Human Computer

BIT 2305-Human Computer