Interaction Design
Direct Manipulation
Prof. Dr. Matthias Rauterberg
Faculty Industrial Design
Technical University Eindhoven
[email protected]
24-AUG-2005
Key references/literature:
D.J. Mayhew (1992) Principles and guidelines in software user interface
design. Prentice Hall.
chapter 9: dialog styles - direct manipulation.
ISO/FDIS 9241 (1997) Ergonomic requirements for office work with
visual display terminals (VDTs).
Part 16: direct-manipulation dialogues.
(c) M. Rauterberg, TU/e
2/61
Dimensions of interaction styles
•
•
•
•
•
•
Initiation
– Degree to which initiation of the dialogue rests with the computer or the
human user.
Dialogue flexibility
– number of ways in which a user can perform given functions.
Degree of automation
– Amount of work accomplished by the system in response to a single user
command.
Complexity of action space
– Number of different options available to the user at any given point in the
dialogue.
Complexity of perception space
– Degree to which the interactions absorbs the memory and reasoning power
of the user.
Interaction style and user type
(c) M. Rauterberg, TU/e
[taken from Smith, 1997]
3/61
SketchPad, Ivan Sutherland, MIT, 1963
[Feel free to have a look at: The complete history of HCI]
(c) M. Rauterberg, TU/e
4/61
First Mouse
D. Engelbart & W. English, 1964
NLS, Douglas Engelbart, Stanford
Research Institute, 1968
(c) M. Rauterberg, TU/e
5/61
Star, Xerox, 1981
(c) M. Rauterberg, TU/e
6/61
Lisa Desktop, Apple, 1982
(c) M. Rauterberg, TU/e
7/61
A Web
Community,
eBay, 1990s
(c) M. Rauterberg, TU/e
8/61
The function space
function space
FS
perceptual functions
PF
PFs of the
dialog
manager
PDF

hidden functions
HF
PFs of the
application
manager
PAF
HFs of the
application
manager
HAF

set of all possible
function representations
RF
(c) M. Rauterberg, TU/e
HFs of the
dialog
manager
HDF
[taken from Rauterberg, M. (1996). An empirical validation of four different measures to quantify user
interface characteristics based on a general descriptive concept for interaction points. Proceedings of
IEEE Symposium and Workshop on Engineering of Computer-Based Systems (IEEE Order Number:
PR07355, pp. 435-441). IEEE Computer Society Press]
9/61
Two dimensions for interaction
[visual] feedback (FB)
low
low
batch
high
menu interface
MI
desktop style
interactive directness (ID)
high
command
language
CI
direct
manip ulation
DI
[taken from Rauterberg, M. (1996). A concept to quantify different measures of user interface attributes: a meta-analysis of empirical studies. Proceedings of
IEEE International Conference on Systems, Man and Cybernetics--SMC'96 (vol. 4, IEEE Catalog Number: 96CH35929, pp. 2799-2804) IEEE Press]
(c) M. Rauterberg, TU/e
10/61
How to measure usability?
flexibility of the dialog manager
(functional) feedback
fFB = 1/D
D
SUM
(#PFd / #HFd)
* 100%
DFD = 1/D
flexibility of the application manager
interactive directness
ID =  1/P

(#DFIPd)
d=1
d=1

D
SUM
P
 -1
SUM lng(PATHp)

p=1

* 100%
DFA = 1/D
D
S U M ( # A F I Pd )
d=1
[taken from Rauterberg, M. (1996). Quantitative Test Metrics to Measure the Quality of User Interfaces. In: Proceedings of Fourth
European Conference on Software Testing Analysis and Review--EuroSTAR'96 (pp. TQ2P2/1 - TQ2P2/13). Amsterdam]
(c) M. Rauterberg, TU/e
11/61
How to design Desktop Interfaces (DI)?
What is the Desktop Interface Style:
•
•
•
•
•
Menu bar and menu structure with pull-down menus
discrete and partially continuous actions
WIMP = Windows, Icons, Mouse, Pointing
‘desktop’ is NOT ‘direct manipulation’
the ‘desktop’ metaphor does NOT fit to all application
domains
(c) M. Rauterberg, TU/e
12/61
Desktop:
example (1)
[source: Mayhew, 1992]
(c) M. Rauterberg, TU/e
13/61
Desktop:
example (2)
[source: Mayhew, 1992]
(c) M. Rauterberg, TU/e
14/61
Desktop Interface (1): advantages
• Easy to learn and remember
• Direct, intuitive, "wysiwyg": allows user to focus on task semantics
rather than on system semantics and syntax
• Flexible, easily reversible actions
• Provides context and instant, visual feedback
• Exploits human use of visual/spatial cues and motor behaviour
• Low typing requirements and visual feedback means less opportunity
for user input error (and less error messages)
(c) M. Rauterberg, TU/e
15/61
Desktop Interface (2): disadvantages
• Can be inefficient for high frequency experts, especially touch typist,
and when there are more actions and objects than can be fit on one
screen
• may be difficult to design recognizable icons for many objects and
actions (‘what is it’ versus ‘where is it’)
• icons take more screen ‘real estate’ than words
(c) M. Rauterberg, TU/e
16/61
Desktop Interface (3)
Most appropriate for:
• Knowledge and experience
– low typing skills
– low system experience
– low task experience
– low application experience
– high frequency of use of other systems
– low computer literacy
• job and task characteristics
[source: Mayhew, 1992]
(c) M. Rauterberg, TU/e
–
–
–
–
–
–
low frequency of use
little or no training
discretionary use
high turn over rate
low task importance
low task structure
17/61
Desktop Interface (4)
Guideline:
accompany icons
with names
[source: Mayhew, 1992]
(c) M. Rauterberg, TU/e
18/61
Desktop Interface (5)
Guideline:
choose
appropriate
windowing
strategy
[source: Mayhew, 1992]
(c) M. Rauterberg, TU/e
19/61
Desktop Interface (6)
[source: Mayhew, 1992]
(c) M. Rauterberg, TU/e
• Windowing uses:
– quick context switching with place-saving
– work in one, monitor another
– cut and paste
– compare
– show more detail, preserve context
– give command, see results
– get HELP, preserve context
– display same object in different forms
• Windowing types:
– system-controlled
– user-controlled, tiled
– user-controlled, overlapping
20/61
Desktop Interface (7)
Windowing:
experimental study
[S.E. Davies, K.F. Bury and M.J. Darnell
(1985) An experimental comparison of a
widowed vs. a non-windowed operating
system environment. Proceedings of the
Human Factors Society 29th Annual
Meeting, pp. 250-254]
(c) M. Rauterberg, TU/e
21/61
Desktop Interface (8)
Windowing:
experimental study
[K. Gaylin (1986) How are window
used? Some notes on creating an
empirically based windowing benchmark
task. Proceedings CH’86, ACM, pp. 96100]]
(c) M. Rauterberg, TU/e
22/61
Desktop Interface (9)
Windowing:
experimental study
[S.A. Bly and J.K. Rosenberg (1986) A
comparison of tiled versus overlapping
windows. Proceedings CHI’86, ACM, pp.
101-106]
(c) M. Rauterberg, TU/e
23/61
Desktop Interface (10)
• Windowing design guidelines:
– design easy to use and learn
window operations
(complexity of windowing
interfaces should NOT cancel
out advantages).
– minimise the number of
window operations necessary
to achieve a desired effect.
– make navigation between
windows particularly easy and
efficient to do.
– make setting up windows
particularly easy to remember.
(c) M. Rauterberg, TU/e
– provide salient visual cues to
identify ‘active’ window.
– provide a consistent ‘user
model’ of windows (window is
an object OR workspace OR
dialog box).
– allow overlapping when
displays are unpredictable,
screens are small, and users are
fairly frequent and experienced.
– in overlapping windowing,
provide powerful commands
for arranging windows on the
screen in user-tailorable
configurations.
24/61
Historical Trends for Icon Design
• Four different levels
of abstraction can be
found over the last 80
years.
• Actual icons get
more abstract
compared to the past.
(c) M. Rauterberg, TU/e
25/61
The Meaning of Icons
• The numbers in the
table mean the
percentage of all
collected answers;
each intended answer
is underlined.
•
(c) M. Rauterberg, TU/e
[see Caron, J.P., Jamieson, D.G. &
Dewar, R.E.: Evaluating pictograms
using semantic differential and
classification technique. Ergonomics
23(2), 1980, p. 142]
26/61
The Icon Set for Marshalling Signals
•
[ redrawn from Henry Dreyfuss,
Symbol Sourcebook (New York,
1972), p. 152]
• See the wonderful analysis
of this icon set and the
recommended redesign in
the marvelous book of
Edward R. Tufte
(Envisioning Information,
1990, Graphics Press) on
page 63.
(c) M. Rauterberg, TU/e
27/61
Redesign of Icons (1)
• Design Principle:
– avoid excessive
detail in icon design.
•
(c) M. Rauterberg, TU/e
[see Deborah J. Mayhew, Principles and
Guidelines in Software User Interface Design
(1992) pp.316-331]
28/61
Redesign of Icons (2)
• Design Principles:
– design the icons to
communicate object
relations and
attributes whenever
possible;
– accompany icons with
names.
•
(c) M. Rauterberg, TU/e
[see Deborah J. Mayhew, Principles and
Guidelines in Software User Interface
Design (1992) pp.316-331]
29/61
(c) M. Rauterberg, TU/e
[taken from Dominic Paul T. Piamonte (2000): Using Multiple Performance Parameters in Testing Small Graphical Symbols.
Doctoral thesis, Institutionen för Arbetsvetenskap Avdelningen för Industriell ergonomi.• ISSN: 1402-1544]
30/61
Recognition rates in percent
(first rows, bold-faced: above 67%) and
certainty ratings (second rows) for the
23 Referents by subjects from
Philippines and Sweden (N=100).
Note:
Phil. = Philippines,
Swed. = Sweden.
[taken from
Dominic Paul T. Piamonte (2000):
Using Multiple Performance Parameters in
Testing Small Graphical Symbols.
Doctoral thesis, Institutionen för
Arbetsvetenskap Avdelningen för Industriell
ergonomi.
• ISSN: 1402-1544 • ISRN: LTU-DT--00/02--SE]
(c) M. Rauterberg, TU/e
31/61
Graphical symbols used in the main
studies as based on Böcker (1993)
for the
European Telecommunications
Standards Institute (ETSI, 1993).
Best videophone symbols when
combining hit rates, false alarms
(confusions) and missing values (no
answers), per country.
Numbers indicate Symbol Set.
(c) M. Rauterberg, TU/e
32/61
Benefit
visual representation
high
concrete
representation
textual
representation
low
low
high
User’s knowledge and experiences in application domain
(c) M. Rauterberg, TU/e
33/61
Information types
static
physical
dynamic
static
States
descriptive
relationships
spatial
person sleeping
features of a computer
similarity between twins
dimensions of a room
discrete action
continuous action
events
procedural
causal
switch light on
ski turn
start of a race
repair photocopier
how an engine works
states
descriptive
relationships
values
evidence is uncertain
person’s belief
classes of religious belief
prime numbers
discrete action
continuous action
procedural
causal
choosing to agree/disagree
monitoring success
diagnosing a fault
explanation of gravity
conceptual
dynamic
(c) M. Rauterberg, TU/e
34/61
Media selection and combination
In fo rm a tio n ty p e
P referred m ed ia selectio n
E x a m p le
P h ysical
R ealistic still o r m o v ing im ag e
P h oto o f a p erson
C on cep tu al
T ex t o r sp eech , d esig n ed im ag e
E x plain sales p olicy
D escriptiv e
T ex t, sp eech , realistic im ag e
C h em ical prop erties
S p atial
R ealistic/d esign ed im ag e
D iag ram o f a b u ildin g
V alu e
T ex t/tables/nu m eric list(s)
P ressu re read ing
R elation ship
D esig ned im ag es, g raphs, ch arts
H istog ram o f rain fall/m o n th
P ro cedu ral
Im ag e series, tex t
E v acuatio n instru ctio ns
D iscrete action
S till im ag e
M ak e co ffee
C on tinuo us action
M ov in g im ag e
M on o euv res w hile sk iing
E v ents
S o und , sp eech
F ire alarm
S tates
S till im ag es, tex t
P h oto o f w eath er co n ditions
C ausal
S till & m o v ing im ag e, tex t, sp eech
V id eo of rainsto rm cau sing flash floo d
(c) M. Rauterberg, TU/e
35/61
Examples for media design
•
con crete
rep resen tation al
ab stract
picture, e.g.
speed –> speedom eter,
e.g.
visu al
sym bol, e.g.
danger –> alarm flasher,
e.g.
blue light of a police car
•
sign ified
•
verb al
speech, e.g.
"S top the m achine!"
speech, e.g.
"A ttention, please!"
•
sp atial
onom atopoeia and m im ic,
e.g. event generated
sound pattern
tone, e.g.
beep-beep-beep…
au d itory
[taken from Rauterberg, M. (1998). About the importance of auditory alarms during the operation of a plant simulator.
Interacting with Computers, vol. 10(1), pp. 31-44]
(c) M. Rauterberg, TU/e
36/61
Feedback of system status information
(c) M. Rauterberg, TU/e
37/61
User’s visual Attention Focus
Ref: Erke, H (1975) Psychologische Grundlagen der visuellen Kommunikation. Universitaet Braunschweig.
The relative ratios of the user's visual focus looking expectantly on one of
the four quadrants of a dark and unstructured computer screen.
I
II
40%
20%
25%
15%
III
IV
MSc Thesis (1993) from Christian Cachin
Ref: Rauterberg, M. & Cachin, C. (1993).
Locating the primary attention focus of the user.
Lecture Notes in Computer Science, vol. 733, pp. 129-140.
(c) M. Rauterberg, TU/e
38/61
Signal Detection Experiment
N = 19; 11 women and 8 men took part in the experiment (mean age: 33 ± 14
years). 12 subjects were students of computer science at the ETH.
Dual task approach: (1) count circles, (2) detect signal X (given a distractor [])
Standard computer display: 14 inch, black&white
(c) M. Rauterberg, TU/e
39/61
Results: primary task
‘Circle Deviation’ CD as a measure for task accuracy:
CD = |#CIRCLEScounted – #CIRCLESpresented| * 100% / #CIRCLESpresented
I
II
CD=6.1%
CD=6.9%
III
(c) M. Rauterberg, TU/e
CD=6.8%
Main Results:
Quadrant IV
outperforms all others
CD = 4.4%
IV
40/61
Results: secondary task
Signal Detection Table:
‘Error Ratio’ ER:
ER = (b + c) / (a + d) * 100%
(c) M. Rauterberg, TU/e
41/61
Eye Recording Experiment
How to determine automatically the actual position of the
user’s visual attention focus on a computer screen?
Subjects:
N=6: 2 women and 4 men
5 subjects were students of computer science at the
ETH. 1 subject studied psychology at Uni Zurich.
PC
video
camera
NAC Eye Mark
Recorder IV
mouse
projection screen
overhead display
(c) M. Rauterberg, TU/e
subject
video
recoder
Tasks:
(1) Computer game;
(2) Text formatting;
(3) Hypertext navigation.
Main Results:
(1) without mouse operations:
Mouse position in fixation region for 25% - 70%
(2) with mouse operations:
Mouse position in fixation region for 49% - 97%
[fixation region: circle around fixation point with r=3 inch]
42/61
Validated Design Recommendations
(1) Place the message left above the actual user’s focus of attention;
(2) Place this message maximal 3 inch away of actual mouse position.
Message
box
3 inch
Primary attention focus
(c) M. Rauterberg, TU/e
43/61
Desktop Interface: design guidelines
• provide alternative interface for high frequency, expert
user
• choose a consistent icon design scheme:
– depict ‘before and after’
– depict tool
– depict action
• accompany icons with name/labels
• provide visual feedback for position, selection and
movement, and physical feedback for modes!
(c) M. Rauterberg, TU/e
44/61
Summary
(1)
[source: Mayhew, 1992]
(c) M. Rauterberg, TU/e
45/61
Summary
(2)
[source: Mayhew, 1992]
(c) M. Rauterberg, TU/e
46/61
Summary
(3)
[source: Mayhew, 1992]
(c) M. Rauterberg, TU/e
47/61
Summary
(4)
[source: Mayhew, 1992]
(c) M. Rauterberg, TU/e
48/61
How to design Direct Manipulation (DM)?
•
•
•
•
Icons and pop-up menus
Natural mappings
mostly analogue and continuous actions
context awareness of the system about
user’s situation
(c) M. Rauterberg, TU/e
49/61
Direct manipulation interface
(c) M. Rauterberg, TU/e
50/61
Direct manipulation interaction
actual dialog
context (DC)
HAFIP: functional interaction point of
the application manager
i/o interface
representation space of
the dialog and application
objects (PDO + PAO)
a.func tion-1
a.func tion-2
a.func tion-3
PAFIP: the representation of a HAFIP
a.func tion-4
a.func tion-5
PDFIP: the representation of a HDFIP
HDFIP:
functional
interaction
point of the
dialog manager
a.func tion-6
application
manager
d.f1
d.f2
d.f3
d.f4
dialog manager
(c) M. Rauterberg, TU/e
51/61
Assignment-1 (team-1)
• Design a Desktop Interface for an elevator:
•
•
•
•
1) analyze all basic functions of an elevator;
2) design a DI (incl. abbreviations) for this machine;
3) discuss the pros and cons of your design;
4) prepare a presentation of about 10 min.
(c) M. Rauterberg, TU/e
52/61
Assignment-2 (team-2)
• Design a Desktop Interface for a remote
control of a TV:
•
•
•
•
1) analyze all functions of a TV remote control;
2) design a DI (incl. abbreviations) for this machine;
3) discuss the pros and cons of your design;
4) prepare a presentation of about 10 min.
(c) M. Rauterberg, TU/e
53/61
Assignment-3 (team-3)
• Design a Desktop Interface for a desk phone:
•
•
•
•
1) analyze all functions of a desk phone;
2) design a DI (incl. abbreviations) for this machine;
3) discuss the pros and cons of your design;
4) prepare a presentation of about 10 min.
(c) M. Rauterberg, TU/e
54/61
Assignment-4 (team-4)
• Design a Desktop Interface for a coffee machine:
•
•
•
•
1) analyze all basic functions of a coffee machine;
2) design a DI (incl. abbreviations) for this product;
3) discuss the pros and cons of your design;
4) prepare a presentation of about 10 min.
(c) M. Rauterberg, TU/e
55/61
A bout H C I in gen eral:
L . B arfield: T he user interface - concepts & d esign. A ddison W esley, 1993.
P . B ooth: A n introduction to H um an-C om puter Interaction. L aw rence E rlbaum , 1990.
A . D ix , J. F inlay, G . A bow d, R . B eale: H um an-C om puter Interaction. P rentice, 1993.
L . M acaula y: H um an-C om puter Interaction fo r S oftw are D esigners. T hom son, 1995.
D . N orm an, S . D rap er: U ser centered s ystem d esign. L aw rence E rlbaum , 1986.
J. P reece, Y . R ogers, H . S harp, D . B en yon, S . H olland, T . C are y: H um an-C om puter
Interaction. A ddison W esley, 1994.
B . S hneiderm an: D esignin g the user interface. A ddison W esle y, 1997, 3rd edition.
A bout design prin ciples:
C . B row n: H um an-C om puter Interface design guidelines. A blex , 1989.
W . G alitz: H andbook of screen form at design. Q E D , 1989.
C . G ram , G . C ockton (eds.): D esign priniples for interactive softw are. C apm an & H all,
1996.
D . H ix , R . H artson: D eveloping user interfaces. W ile y, 1993.
IS O 9241 (P art 10: D ialogue principles, P art 12: P resentation of inform ation, P art 14:
M enu dialogu es, P art 15: C om m and dialogu es, P art 16: D irect m anipulation dialo gues,
P art 17: F orm fill-in dialogu es)
D . M a yhew : P riniples and guidelines in softw are user interface d esign. P rentice, 1992.
A bout usability evaluation m ethods:
J. D um as, J. R edish: A practical guide to usability testing. A blex , 1993.
D . F reedm an, G . W einberg: W alkthrou ghs, Insp ections, and technical review s. D orset,
1990.
IS O 9241 (P art 11: G uidance on usability, P art 13: U ser guidance)
A . M onk, P . W right, J. H aber, L. D avenpo rt: Im p roving you r H um an -C om puter
Interface: a p ractical technique. P rentice H all, 1993.
J. N ielsen, R . M ack (ed.): U sability inspection m ethods. W iley, 1994.
A bout D esign:
D . N orm an: T he ps ycholog y o f everyda y thin gs. B asic B ooks, 1988.
(c) M. Rauterberg, TU/e
56/61
References for Guidelines
Articles and Books
Grudin, Jonathan. "The Case Against User Interface Consistency." Communications of the ACM, October 1989.
Microsoft Windows User Experience, Official Guidelines for User Interface Developers and Designers.
Redmond, WA: Microsoft Press, 1999. (USBN: 0735605661)
Organizations
ACM Special Interest Group on Computer-Human Interaction (SIGCHI): The largest organization of UI
practitioners.
German HCI Group: A specialist group of the German Computer Society.
Human Factors and Ergonomics Society.
Usability Professionals Association: See their consultant directory for contract resources.
Other Online Resources
Microsoft User Experience and UI Design Resources [http://msdn.microsoft.com/ui/]
Useit.com [http://www.useit.com/]
Usability Toolbox
(c) M. Rauterberg, TU/e
57/61
ISO TC 159 SC4 Ergonomics of Human System Interaction
WG1 is responsible for ISO 7249 and ISO 9355 which deal with fundamentals of displays and controls rather than HCI.
WGs 2 to 5 are responsible for ISO 9241 (see later slide).
WG 5 is developing a standard dealing with the ergonomics requirements of multi-media interfaces ISO NP 14915 - see later slide.
WG 6 is concerned with how ISO 9241 can be used and with ISO 13407 Human-Centred Design of Interactive Systems.
WG8 is concerned with ISO 11064, (see Table h621-2) on the ergonomics design of control centres, which include process plant
control centres, security control centres and other, frequently safety critical control centre applications.
Part 1
Principles for the design of control centres
Part 2
Principles of control suite arrangement
Part 3
Control room layout
Part 4
Workstation layout and dimensions
Part 5
Displays and controls
Part 6
Environmental requirements for control rooms
Part 7
Principles for the evaluation of control centres
Part 8
Ergonomics requirements for specific applications
(c) M. Rauterberg, TU/e
58/61
ISO/IEC JTC1 SC18 WG9 User System Interfaces and Symbols
Joint Technical Committee (JTC1) deals with standards in the field of information technology.
Sub committee 18 (SC18) is responsible for standards for Document Processing and Related Communication.
Working Group 9 is developing standards in keyboard layout, symbols and user interfaces which have relevance beyond the strict
domain of document processing.
It has sub-groups working on Keyboard Layout, User Interfaces and Symbols.
ISO/IEC 9995 is a multi-part standard dealing with keyboard layout which replaces a number of existing standards (see Table h621-3).
It includes a keyboard layout for multiple Latin alphabet languages and a layout for letters used on a numeric keyboard. It should be
noted that WG9 deals with the layout of keyboards, not with the key operation or other ergonomic features which are the responsibility
of WG3 of TC 159 SC4.
Part 1
General principles governing keyboard layouts
Part 2
Alphanumeric Section
Part 3
Complementary layout of the alpha-numeric zone of the alpha-numeric section
Part 4
Numeric Section
Part 5
Editing Section
Part 6
Function Section
Part 7
Symbols used to represent functions
Part 8
Numeric zone of the numeric section, allocation of letters
(c) M. Rauterberg, TU/e
59/61
HCI Standards
ISO methods 9241 (ISO 9000 series standards address quality)
Ergonomic requirements of VDT - both hardware and software in 17 parts:
Introduction
Guidance on task requirements
Visual Display requirements
keyboard requirements
workstation layout and postural requirements
environmental requirements
display requirements with reflections
requirements for displayed colours
requirements for non-keyboard input devices
Dialogue Principles
Usability Specification
Presentation of Information
User Guidance and Help
Menu Dialogues
Command Dialogues
Direct Manipulation Dialogues
Form-filling Dialogues
Task Design - ISO 9241-2
The application of ergonomic principles ... is essentially the integration of task design with the design of software where well designed tasks
provide for the application of an appropriate variety of skills;
ensure that the task performed are identifiable as whole units of work rather than fragments
provide sufficient feedback on task performance in terms meaningful to the user
(c) M. Rauterberg, TU/e
60/61
ISO 14915 Multimedia User Interface Design Ergonomic Requirements for human-centered multimedia interfaces
Status
Part 1
Design Principles and Framework
DIS
Part 2
Multimedia Control and Navigation
CD
Part 3
Media Selection and Media
DIS
Part 4
Domain Specific Interfaces
WI
(c) M. Rauterberg, TU/e
61/61
Descargar

USI lecture-4