Principles of User Interface
Design
ISMT Multimedia Spring 2000
Dr Vojislav B Misic
Outline of Lecture 09
 (presentation based largely on B.
Schneiderman, Designing the User Interface,
3rd ed., Addison-Wesley, 1998
 introduction: why, what, how
 some theories
 guidelines and principles (rather general)
 more details and examples
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 2
Introduction: Why
 Most of today's systems are poorly designed
from a human-interaction standpoint
 User Interfaces Are Products of
Interdisciplinary Work - Who is Involved?
 What are the Business Ramifications?
 Individual User Level
 International Influences
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 3
Life-critical systems
 Air traffic control, nuclear reactors, power
utilities, police & fire dispatch systems
 High costs, reliability and effectiveness are
expected
 Length training periods are acceptable
provide error-free performance
 Subject satisfaction is less an issue due to
well motivated user
 Retention via frequent use and practice
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 4
Industrial and commercial
uses
 Banking, insurance,order entry, inventory
management, reservation, billing, and pointof-sales systems
 Lower cost may sacrifice reliability
 Training is expensive, learning must be easy
 Speed and error rates are relative to cost,
however speed is the supreme concern
 Subject satisfaction is fairly important to
limit operator burnout
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 5
Office, home, and
entertainment applications
 Word processing, electronic mail, computer
conferencing, and video game systems
 Choosing functionality is difficult because
the population has a wide range of both
novice and expert users
 Competition cause the need for low cost
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 6
Exploratory, creative, and
cooperative systems
 Database, artist toolkits, statistical
packages, and scientific modeling systems
 Benchmarks are hard to describe due to the
wide array of tasks
 With these applications, the computer
should "vanish" so that the user can be
absorbed in their task domain
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 7
Steps For User-interface
Engineering
 Task analysis to ensure proper functionality
 Reliability, Availability, Security, and Data
Integrity
 Standardization, Integration, Consistency,
and Portability
 Schedules and Budgets (being late means
that you are likely to be ineffective or even
noncompetitive)
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 8
lifecycle
Task Analysis – Ensure Proper
Functionality
 Define what tasks and subtasks must be
carried out
 Pay special attention to those tasks which
are only performed occasionally (common
tasks are easy to define)
 Functionality must complete, or else users
will reject or underutilize the product
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 10
Reliability, Availability,
Security, and Data Integrity
 Commands must function as specified
 Data displayed must reflect the actual state
in the database
 Appease the user's sense of mistrust
 System must be error free
 Ensure the user's privacy by protecting
against unwarranted access, destruction of
data, and malicious tampering
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 11
Standardization, Integration,
Consistency, and Portability
 Standardization
 Integration
 Consistency:
 compatibility across different product versions
 compatibility with related, non-computer based
systems
 use common action sequences, terms, units, colors
 Portability
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 12
System–User Interface Design
Goals
 Define the target user community associated
with the interface (communities evolve and
change)
 5 human factors central to community
evaluation





Time to learn
Speed of performance
Rate of errors by users
Retention over time
Subjective satisfaction
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 13
But, in all cases…
 Trade-offs sometimes must be allowed in
development, use tools such as macros and
shortcuts to ease some burdens
 Test all design alternatives using a wide
range of mock-ups
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 14
Physical abilities and physical
workplace
 There is no average user, either
compromises must be made or multiple
versions of a system must be created
 Physical measurement of human
dimensions are not enough, take into
account dynamic measures such as reach,
strength or speed
 Account for variances of the user
population's sense perception
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 15
Cognitive and perceptual
abilities
 cognitive process
 short-term memory
 long-term memory and learning
 problem solving
 decision making
 attention and set (scope of concern)
 search and scanning
 time perception
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 16
Factors affecting perceptual
and motor performance
 arousal and vigilance
 fatigue
 perceptual (mental)
load
 knowledge of results
 monotony and boredom
 sensory deprivation






sleep deprivation
anxiety and fear
isolation
aging
drugs and alcohol
circadian rhythms
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 17
User differences
 Personality differences – Myers-Briggs Type
Indicator (MBTI)




extroversion versus introversion
sensing versus intuition
perceptive versus judging
feeling versus thinking
 Cultural and international diversity
 Users with disabilities
 Elderly Users
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 18
Theories and Principles
 Object-Action Interface Model
 Recognize the diversity
 Use the Golden Rules of Interface Design
 Prevent errors
 Balance of automation and human control
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 19
Foley and van Dam four-level
approach
 Conceptual level: user's mental model
 Semantic level: meanings conveyed by the
user’s input and computer's output
 Syntactic level: how the semantic units form
complete sentences and instructions
 Lexical level: device dependencies and
mechanisms by which a user specifies the
syntax
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 20
Approach is convenient for
designers
 Top-down nature is easy to explain
 Matches the software architecture
 Allows for useful modularity during design
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 21
Action models: Norman's
seven stages of action
 Forming the goal
 Forming the intention
 Specifying the action
 Executing the action
 Perceiving the system state
 Interpreting the system state
 Evaluating the outcome
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 22
Norman's contributions
 Context of cycles of action and evaluation
 Gulf of execution: Mismatch between the
users's intentions and the allowable actions
 Gulf of evaluation: Mismatch between the
system's representation and the users'
expectations
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 23
Object/Action Interface Model
 Syntactic-semantic model of human
behavior used to describe
 programming
 database-manipulation facilities
 direct manipulation
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 24
OA Interface Model II
 Distinction made between meaningfullyacquired semantic concepts and rotememorized syntactic details
 Semantic concepts of user's tasks well-organized
and stable in memory
 Syntactic details of command languages arbitrary
and required frequent rehearsal
 Introduction of GUIs shifts emphasis to
simple direct manipulations of visual
representations of objects/actions
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 25
Object-action design:
 understand the task
 real-world objects
 actions applied to those objects
 create metaphoric representations of
interface objects and actions
 designer makes interface actions visible to
users
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 26
Interface hierarchies of objects
and actions
 Hierarchy is a natural concept
 Interface includes hierarchies of objects and
actions at many levels
 Interface Objects (directory, name, length, etc.)
 Interface Actions (load a text data file, insert into the
data file, save the data file etc.)
 but note: save file can have many variants
 Interface objects and actions based on
familiar examples
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 27
Learning
 Users learn interface objects and actions by
 seeing a demonstration
 hearing an explanation of features
 conducting trial-and-error sessions
 Learning, use, and retention of this
knowledge is hampered by two problems
 Details vary across systems in an unpredictable
manner
 Greatly reduces the effectiveness of paired-associate
learning
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 28
How to …
 Minimizing these burdens (the goal of most
interface designers) aided by
 Modern direct-manipulation systems
 Familiar objects and actions representing their task
objects and actions
 Modern user interface building tools
 Standard widgets
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 29
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
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 30
Four critical points where user
failures can occur
 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
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 31
Consistent user interface goal
 Definition is elusive - multiple levels
sometimes in conflict
 Inconsistent action verbs




Take longer to learn
Cause more errors
Slow down users
Harder for users to remember
 Still, it is sometimes advantageous to be
inconsistent (but watch out!)
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 32
A recent example
 Many Florida counties have large numbers
of elderly people … whose eyesight is less
than ideal
 … which is why the US presidential election
ballots were designed with larger-than-usual
lettering
 … which HAD to be split in two pages
 … and the results is?
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 33
Consistent user interface goal
 Definition is elusive - multiple levels
sometimes in conflict
 Inconsistent action verbs




Take longer to learn
Cause more errors
Slow down users
Harder for users to remember
 Still, it is sometimes advantageous to be
inconsistent (but watch out!)
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 34
Some examples
 Consistency, you
said?
 Well, let’s see what
UST has to say 
 In most lifts, the
control table looks
like this …
 4th floor at the bottom
 Open door to the left
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 35
However …
 There are a few
lifts where 4th
floor button is
NOT at the bottom
 Probably because
of symmetry – but
users have to look
 … which they
usually do
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 36
Wait, there’s more!
 There are also
some lifts where
the Open Door
button is NOT on
the left …
 Which most users
DON’T look at –
normally, that is 
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 37
User Interface Metaphor
 The way(s) in
which users
interact with
the computer
 User interface
should
resemble a
known device
or environment
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 38
Designer’s model vs. user’s
model
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 39
Principle 1: Recognize the
Diversity
 Usage profiles
 User characteristic
 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
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 40
Interaction styles
 Direct manipulation
 Menu selection
 Form fill-in
 Command language
 Natural language
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 41
Principle 2: Use the Eight
Golden Rules of Interface
Design
 Strive for consistency (most frequently
violated rule)
 Enable frequent users to use shortcuts
 Offer informative feedback
 Design dialogs to yield closure
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 42
Principle 2 cont’d
 Offer error prevention and simple error
handling
 Permit easy reversal of actions
 Support internal locus of control
 Reduce short-term memory load
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 43
Data Display Guidelines
 Goals:




Efficient information assimilation by the user
Minimal memory load on user
Compatibility of data display with data entry
Flexibility for user control of data display
 Organizing the display
 Consistency of data display
 Getting the user's attention
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 44
Data Entry Guidelines
 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
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 45
Balance of Automation and
Human Control
 Ultimate goal: eliminate human actions
whenever no judgment is required
 real world is open system, while computers
constitute closed systems
 human judgment necessary for
unpredictable events
 equipment failure
 improper human performance
 incomplete or erroneous data
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 46
When designing
multimedia/hypermedia
 Know the users and their tasks
 Ensure that meaningful structure comes first
 Apply diverse skills
 Respect chunking
 Show interrelationships
 Ensure simplicity in traversal
 Design each screen carefully
 Require low cognitive load
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 47
Further reading
 Textbook (T. Vaughan): none (actually, there
is quite a lot, but … )
 Schneiderman’s book:
http://www.aw.com/DTUI/
 Hall of Fame:
http://www.iarchitect.com/mfame.htm
 Hall of Shame:
http://www.iarchitect.com/mshame.htm
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 48