Principles of User Interface Design ISMT Multimedia Spring 2000 Dr Vojislav B Misic
Jan 01, 2016
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 2
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 3
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 4
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 5
Industrial and commercial uses
Banking, insurance,order entry, inventory management, reservation, billing, and point-of-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 6
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 7
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 8
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 10
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 11
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 12
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 13
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 14
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 15
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 16
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 17
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 18
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 19
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 20
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 21
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 22
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 23
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 24
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 25
OA Interface Model II
Distinction made between meaningfully-acquired semantic concepts and rote-memorized 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 26
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 27
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 28
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 29
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 30
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 31
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 32
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 33
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 34
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 35
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 36
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 37
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 38
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 40
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 41
Interaction styles
Direct manipulation Menu selection Form fill-in Command language Natural language
ISMT Multimedia © 2000 Dr Vojislav B Misic Lecture 12/Slide 42
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 43
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 44
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 45
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 46
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 47
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