Transcript Soarian™ User Interface

1
Guidelines, Principles, and Theories

Lesson 3 will cover the following aspects of user interface design
 Guidelines
• User interface guidelines that can be used by designers to improve the usability
of their applications
• Based on government and corporate research
• Organized display of information
 Principles
• Interaction Styles
• Shneiderman’s rules of interface design
• Automated systems and human control
 Theories
• Descriptive and Explanatory
• Predictive
• Taxonomies
• Object-Action Interface Model
2
Guidelines, Principles, and Theories

Guidelines
 Government Web Usability
• http://www.usability.gov/pdfs/guide
lines.html
• Supported by research findings
3
Guidelines, Principles, and Theories

Guidelines
 Corporate
• iPhone User Interface Guidelines:
http://developer.apple.com/docume
ntation/UserExperience/Conceptual
/AppleHIGuidelines/XHIGIntro/chapt
er_1_section_1.html
How to Build an iPhone App that Doesn't Suck
http://www.youtube.com/watch?v=ENyzcXRPeeI
4
Guidelines, Principles, and Theories

Guidelines
 Jelly Bean
• Android User Interface Guidelines:
http://developer.android.com/design/in
dex.html
ICS Guidelines
5
Guidelines, Principles, and Theories

Accessibility Guidelines
 Making websites usable by people with disabilities
• Visual: blindness, low vision and color blindness
• Motor/Mobility: difficulty or inability to use the hands, including tremors, muscle
slowness, loss of fine muscle control
• Auditory: deafness or hearing impairments or hard of hearing
• Seizures: photo-epileptic seizures caused by visual strobe or flashing effects
• Cognitive/Intellectual: developmental disabilities, learning disabilities and cognitive
disabilities of various origins, affecting memory, attention, developmental "maturity,"
problem-solving and logic skills
 http://www.w3.org/TR/WCAG10/
 Examples
• Provide a text equivalent for every non-text element
• Ensure that all information conveyed with color is also available w/o color
6
Guidelines, Principles, and Theories
 Accessibility and Cell Phone Access
 Nuance's TALKS and Code Factory's Mobile Speak screen readers
 Screen magnifiers

iPhone
 Voice-Over screen reader
 Zoom magnification feature
 Compatibility with wireless braille displays
 Assisted Touch
 Android
 Google's Talkback.
 http://www.youtube.com/watch?v=rubTwsrftPo
7
Guidelines, Principles, and Theories

Organizing the Display
 Consistency of Data Display
• Terminology, formats, colors, capitalization
 Efficient information assimilation by the user
• Left justified alpha data, right justified numeric data
8
Guidelines, Principles, and Theories

Organizing the Display
 Consistency of Data Display
• Terminology, formats, colors, capitalization
 Efficient information assimilation by the user
• Left justified alpha data, right justified numeric data
9
Guidelines, Principles, and Theories

Organizing the Display
 Consistency of Data Display
• Terminology, formats, colors, capitalization
 Efficient information assimilation by the user
• Left justified alpha data, right justified numeric data
10
Guidelines, Principles, and Theories

Organizing the Display
 Consistency of Data Display
• Terminology, formats, colors, capitalization
 Efficient information assimilation by the user
• Left justified alpha data, right justified numeric data
11
Guidelines, Principles, and Theories

Organizing the Display
 Consistency of Data Display
• Terminology, formats, colors, capitalization
 Efficient information assimilation by the user
• Left justified alpha data, right justified numeric data
12
Guidelines, Principles, and Theories

Organizing the Display
 Consistency of Data Display
• Terminology, formats, colors, capitalization
 Efficient information assimilation by the user
13
Guidelines, Principles, and Theories

Organizing the Display
 Consistency of Data Display
• Terminology, formats, colors, capitalization
 Efficient information assimilation by the user
14
Guidelines, Principles, and Theories

Organizing the Display
 Consistency of Data Display
• Terminology, formats, colors, capitalization
 Efficient information assimilation by the user
15
Guidelines, Principles, and Theories

Organizing the Display
 Consistency of Data Display
• Terminology, formats, colors, capitalization
 Efficient information assimilation by the user
16
Guidelines, Principles, and Theories

Organizing the Display
 Consistency of Data Display
• Terminology, formats, colors, capitalization
 Efficient information assimilation by the user
17
Guidelines, Principles, and Theories

Organizing the Display
 Consistency of Data Display
• Terminology, formats, colors, capitalization
 Efficient information assimilation by the user
18
Guidelines, Principles, and Theories

Organizing the Display
 Consistency of Data Display
• Terminology, formats, colors, capitalization
 Efficient information assimilation by the user
19
Guidelines, Principles, and Theories

Organizing the Display
 Consistency of Data Display
• Terminology, formats, colors, capitalization
 Efficient information assimilation by the user
20
Guidelines, Principles, and Theories

Organizing the Display
 Minimal memory load on the user
 Compatibility of data display with data entry
Data Display Version
Data Entry Version
21
Guidelines, Principles, and Theories

Organizing the Display
 Flexibility for user control of data display
22
Guidelines, Principles, and Theories

Getting the user’s attention
 Intensity (luminance, contrast)
 Color (up to four)
 Size (up to four sizes)
 Choice of formats (up to three fonts)
 Inverse video
 Blinking
 Audio (distinguishing between signals)
23
Guidelines, Principles, and Theories

Getting the user’s attention
 Intensity (luminance, contrast)
A
 Color (up to four)
 Size (up to four sizes)
 Choice of formats (up to three fonts)
 Inverse video
 Blinking
 Audio (distinguishing between signals)
B
24
Guidelines, Principles, and Theories

Getting the user’s attention
 Intensity (luminance, contrast)
 Color (up to four)
A
 Size (up to four sizes)
 Choice of formats (up to three fonts)
 Inverse video
 Blinking
 Audio (distinguishing between signals)
B
25
Guidelines, Principles, and Theories

Getting the user’s attention
 Intensity (luminance, contrast)
 Color (up to four)
1.
 Size (up to four sizes)
 Choice of formats (up to three fonts)
2.
 Inverse video
Unit A
1. Section 1
2. Section 2
Unit B
1. Section 1
2. Section 2
A
 Blinking
 Audio (distinguishing between signals)
1.
2.
Unit A
1.
Section 1
2.
Section 2
Unit B
1. Section 1
2.
Section 2
B
26
Guidelines, Principles, and Theories

Getting the user’s attention
 Intensity (luminance, contrast)
 Color (up to four)
 Size (up to four sizes)
 Choice of formats (up to three fonts)
 Inverse video
 Blinking
 Audio (distinguishing between signals)
This is a paragraph that does
not really say anything;
however inverse video can be
used to draw attention to
specific words.
27
Guidelines, Principles, and Theories

Facilitating Data Entry
 Consistency of transactions
• (E.g. insurance Companies vs. individuals)
 Minimal input actions by the user
• Single key press (restricted to keypad, no mousing around)
• Pre-population of defaults
28
Guidelines, Principles, and Theories

Facilitating Data Entry
 Minimal memory load on users (e.g., auto-complete)
 Compatibility of data entry with data display (e.g., Explanation of Benefits)
 Flexibility for user control of data entry (e.g., user defined order of columns)
29
Guidelines, Principles, and Theories
 Principles
 Differences in Users
• Domain/Application Knowledge
• Frequency of Use
• Goals
• Consequences of Errors
30
Guidelines, Principles, and Theories

Principles

User Skills Levels
•
Novice Users
– Limit terminology
– Simplified actions
– Feedback
•
Knowledgeable Intermittent Users
– Broad knowledge of the interface
– Reduce memory load (e.g., where to find functions)
– Protection from danger of actions (relaxes exploration)
•
Expert Frequent Users
– Need speed (short-cuts)
– Don’t reduce speed as a result of lengthy feedback
31
Guidelines, Principles, and Theories
Photographs
Personalizing
Change
ringtone
What is the
most likely next task
to be performed?
Talking
Download a new
ringtone
Set phone to
silent mode
Call a number
Assumed
starting point
for all users
Add a number to
your directory
Remove a number
from your
directory
View missed calls
View photos you
have taken with
your camera
Change
wallpaper
Gaming
Play a game
Specify a
unique ring for
a caller
Download a
Game
Show the callers
picture when they
call
Music and Video
Messaging
Send a text
message
Send a text
message to a
contact
Reply to a text
message
Send a picture
message
Download a
clip from CNN
Search for a
Song by title
Find a clip
on ESPN
Purchase a
song
Listen to a previously
purchased song
Information Gathering
Read the news
Find directions via
VZ Navigator
Create a
playlist
Play all songs
on your phone
32
Guidelines, Principles, and Theories

Interaction Style

Direct Manipulation
• Visual representation of familiar task objects
• Can significantly simplify a task
• Difficult to program
33
Guidelines, Principles, and Theories

Interaction Style

Menu Selection
• Read a list of menu items
• Select an item
• Observe the effect
• Are all needed functions listed on the menu?
34
Guidelines, Principles, and Theories
 Interaction Style
 Form Fill-In
• For data entry applications
• Field labels should be clear
• Permissible values should be known (e.g., mm/dd/yyyy)
• Support is provided to respond to error message
35
Guidelines, Principles, and Theories

Interaction Style
 Command Language
• E.g., [CMD: u 800-222-2222 CA=ATX]
• Powerful
• Difficult to Learn
36
Guidelines, Principles, and Theories
 Interaction Style
 Natural Language
• Typed
– Requires clarification dialog
• Verbal
– Difficulty with context (e.g., “Put that object on top of that
object there”)
– Dialog is constrained (e.g., “If English is your preferred
language, speak or say one)
– Difficulty in traversing menu structures (e.g., I just want to
speak to someone directly)
37
Guidelines, Principles, and Theories

Shneiderman’s 8 Principles of Interface Design
1. Consistency
• Terms, color, layout, fonts, patterns (e.g., yes/no buttons in same order)
2. Cater to universal usability
•
Novice vs. Expert (adaptability to short-cuts)
•
Previous computer experience
•
Domain expertise
• Disabilities
3. Offer informative feedback
• For every user action there should be system feedback
4. Design dialogs to yield closure
• Sequence of actions should have a beginning, middle and end
5. Prevent Errors
•
Enabling/Disabling fields
•
Formatted Fields (alpha, date, SSN, TN)
•
Error Messages (simple, constructive, specific instructions for recovery)
•
Auto-complete
38
Guidelines, Principles, and Theories

Shneiderman’s 8 Principles of Interface Design
1. Consistency
• Terms, color, layout, fonts, patterns (e.g., yes/no buttons in same order)
2. Cater to universal usability
•
Novice vs. Expert (adaptability to short-cuts)
•
Previous computer experience
•
Domain expertise
• Disabilities
3. Offer informative feedback
• For every user action there should be system feedback
4. Design dialogs to yield closure
• Sequence of actions should have a beginning, middle and end
5. Prevent Errors
•
Enabling/Disabling fields
•
Formatted Fields (alpha, date, SSN, TN)
•
Error Messages (simple, constructive, specific instructions for recovery)
•
Auto-complete
39
Guidelines, Principles, and Theories

Shneiderman’s 8 Principles of Interface Design
1. Consistency
• Terms, color, layout, fonts, patterns (e.g., yes/no buttons in same order)
2. Cater to universal usability
•
Novice vs. Expert (adaptability to short-cuts)
•
Previous computer experience
•
Domain expertise
• Disabilities
3. Offer informative feedback
• For every user action there should be system feedback
4. Design dialogs to yield closure
• Sequence of actions should have a beginning, middle and end
5. Prevent Errors
•
Enabling/Disabling fields
•
Formatted Fields (alpha, date, SSN, TN)
•
Error Messages (simple, constructive, specific instructions for recovery)
•
Auto-complete
40
Guidelines, Principles, and Theories

Shneiderman’s 8 Principles of Interface Design
1. Consistency
• Terms, color, layout, fonts, patterns (e.g., yes/no buttons in same order)
2. Cater to universal usability
•
Novice vs. Expert (adaptability to short-cuts)
•
Previous computer experience
•
Domain expertise
• Disabilities
3. Offer informative feedback
• For every user action there should be system feedback
4. Design dialogs to yield closure
• Sequence of actions should have a beginning, middle and end
5. Prevent Errors
•
Enabling/Disabling fields
•
Formatted Fields (alpha, date, SSN, TN)
•
Error Messages (simple, constructive, specific instructions for recovery)
•
Auto-complete
41
Guidelines, Principles, and Theories

Shneiderman’s 8 Principles of Interface Design
1. Consistency
• Terms, color, layout, fonts, patterns (e.g., yes/no buttons in same order)
2. Cater to universal usability
•
Novice vs. Expert (adaptability to short-cuts)
•
Previous computer experience
•
Domain expertise
• Disabilities
3. Offer informative feedback
• For every user action there should be system feedback
4. Design dialogs to yield closure
• Sequence of actions should have a beginning, middle and end
5. Prevent Errors
•
Enabling/Disabling entry fields
•
Formatted Fields (alpha, numeric, date, SSN, TN)
•
Error Messages (simple, constructive, specific instructions for recovery)
•
Auto-complete
42
Guidelines, Principles, and Theories

Shneiderman’s 8 principles of Interface Design
6. Prevent Errors (cont.)
•
Verification of completion of sub-tasks
•
Single actions to accomplish an action sequence
7. Permit easy reversal of actions
•
A single action
•
A set of data
•
A complete process
8. Support internal focus of control
•
Users should be the initiators of actions, not the responders to actions
9. Reduce short-term memory load
•
7 +/- 2 chunks
•
On line access to codes, abbreviations should be provided
•
Drop-downs
43
Guidelines, Principles, and Theories

Shneiderman’s 8 prinicles of Interface Design
6. Prevent Errors (cont.)
•
Verification of completion of sub-tasks
•
Single actions to accomplish an action sequence
7. Permit easy reversal of actions
•
A single action
•
A set of data
•
A complete process
8. Support internal focus of control
•
Users should be the initiators of actions, not the responders to actions
9. Reduce short-term memory load
•
7 +/- 2 chunks
•
On line access to codes, abbreviations should be provided
•
Drop-downs
44
Guidelines, Principles, and Theories

Shneiderman’s 8 prinicles of Interface Design
6. Prevent Errors (cont.)
•
Verification of completion of sub-tasks
•
Single actions to accomplish an action sequence
7. Permit easy reversal of actions
•
A single action
•
A set of data
•
A complete process
8. Support internal focus of control
•
Users should be the initiators of actions, not the responders to actions
9. Reduce short-term memory load
•
7 +/- 2 chunks
•
On line access to codes, abbreviations should be provided
•
Drop-downs
45
Guidelines, Principles, and Theories

Shneiderman’s 8 principles of Interface Design
6. Prevent Errors (cont.)
•
Verification of completion of sub-tasks
•
Single actions to accomplish an action sequence
7. Permit easy reversal of actions
•
A single action
•
A set of data
•
A complete process
8. Support internal focus of control
•
Users should be the initiators of actions, not the responders to actions
9. Reduce short-term memory load
•
7 +/- 2 chunks
•
Drop-downs
46
Guidelines, Principles, and Theories
 Integrating automation while preserving human control
 Supervisory Control
• The real world is an open system (unlimited number of
unpredictable events)
• Computers are closed systems (limited number of events)
• Human’s must be able to support the unpredictable events
(safety, failures, quality)
• The human should be in the loop
47
Guidelines, Principles, and Theories
 Integrating automation while preserving human control
 Human Strengths
•
•
•
•
•
•
•
Recognize constant patterns in varying situations
Sense unusual and unexpected events
Remembers principles and strategies
Adapt decisions to the situation
Select alternatives if original approach fails
Generalize from observations
Develop new solutions
48
Guidelines, Principles, and Theories
 Integrating automation while preserving human
control
 Computer Strengths
•
•
•
•
•
•
•
Sense stimuli outside human’s range
Store quantities of coded information accurately
Monitor pre-specified events, especially infrequent ones
Make rapid and consistent responses to input signals
Recall quantities of detailed information accurately
Process quantitative data in pre-specified ways
Perform repetitive pre-programmed actions reliably
49
Guidelines, Principles, and Theories
 Adaptive Interface
 The application adapts to the user’s expertise based on the user
model
• Contents of menus
• Order of menu items
• Consider the violation of user expectations
50
Guidelines, Principles, and Theories

Theories

Description and Explanatory
• Consistent nomenclature for objects and actions (e.g., click, drag)

Predictive
• Allow a comparison of proposed designs for execution times and
error rates
– E.g., effect of font type

Other Type of Theories
• Motor-Task (e.g., pointing with a mouse)
• Perceptual Activities (e.g., finding an item on a display)

• Cognitive Aspects (e.g., changing a font style)
Taxonomy

Classifies a complex set of phenomena into understandable categories
• Task Structured vs. Unstructured
• Technical Aptitude (e.g., website, CAD/CAM)
• UI Styles (forms, menus, commands)
51
Guidelines, Principles, and Theories

Levels of Analysis
 Conceptual Level – The User’s Mental Model of the Application
• E.g., Paint and Draw Programs
 Semantic Level
• The meanings conveyed by the user’s input and the computer’s input
• E.g., Delete an object
 Syntactic Level
• Sentences provided by the user to instruct the computer to perform a task
• E.g., Select an object – keystroke – confirm deletion
 Lexical Level
• Mechanisms by which users specify the syntax
• E.g., Mouse-Click
52
Guidelines, Principles, and Theories

Stages-of-action model: Norman (1988) Explanatory Model of HCI
 Stages:
• Form the goal
• Form the intention
• Specify the action
• Execute the action
• Perceive the system state
• Interpret the system state
• Evaluation the outcome
 Gulf of execution
• Mismatch between the user’s intentions and the allowable actions
– E.g., Copy the format of a letter
 Gulf of evaluation
• Mismatch between the system’s representation and the user’s expectation
– E.g., difficulty of drawing an object directly in Microsoft Word
53
Guidelines, Principles, and Theories

Norman Error Analysis
 Where errors occur:
• Users form an inadequate goal
• User may not find the correct interface object because of an
incomprehensible label or icon
• User may not now how to specify or execute a desired action
• Users may receive inappropriate or misleading feedback


54
Guidelines, Principles, and Theories
Conceptual Model
Schedule
Appointment
Goal
Check-In
Information
Name
Check-In
Patient
Demographics
Address
Semantic Level
 Add a Phone Number
55
Guidelines, Principles, and Theories
 Syntactic Level – Add a Telephone Number
 Select “Check-In” Hyperlink from the Home Page
 Locate the Patient via a Locator
 Enter SSN, Last Name, MRN, etc.
 Semantic Match or Full Match
 Select from list of results or create a new patient
 Navigate to the Address/Phone Tab
 Direct Entry of Phone Number
56
Guidelines, Principles, and Theories
 Syntactic Level – Add a Telephone Number
 Select “Check-In” Hyperlink from the Home Page
 Locate the Patient via a Locator
 Enter SSN, Last Name, MRN, etc.
 Semantic Match or Full Match
 Select from list of results or create a new patient
 Navigate to the Address/Phone Tab
57
Guidelines, Principles, and Theories
 Syntactic Level – Add a Telephone Number
 Direct Entry of Phone Number
 Specify Type
 Click “Done”
58
Guidelines, Principles, and Theories
 S-R-C Model (by Darwin Hunt)
Internal Model
GOAL
Perceived
Situation
ACTUAL
SITUATION
Internal
Response
ACTUAL
RESULTS
External Model
Predicted
Consequences
ACTUAL
RESPONSE
59
Guidelines, Principles, and Theories

GOMS – Goals, Operators, Methods, Selection Rules

Users formulate a goal (e.g., create a letter) and sub-goals (e.g., insert a word)

Users think in terms of operators – “elementary perceptual, motor, or cognitive acts,
whose execution is necessary to change any aspect of the user’s mental state or to
affect the task environment.”. E.g., press arrow key, move mouse

Users achieve their goals by using methods (e.g., move cursor and click on a button)

Selection rules are control structures for choosing between several methods to
accomplish a goal E.g., multiple methods of delete
60
Guidelines, Principles, and Theories

Widget-level Theories

Patterns for HCI exists for desktop and web based applications

A pattern is a proven solution to a problem in a context

Alexander: "Each pattern is a three-part rule, which expresses a relation between a
certain context, a problem, and a solution.”
61
Guidelines, Principles, and Theories

Pattern Example: Error Handling
62
Guidelines, Principles, and Theories

Object-Action Interface Model

Direct Manipulation has largely replaced Command Languages

Task actions start from high-level intentions that are decomposed into intermediate
goals and individual steps (e.g., drag a file to a trash can)

Define the task objects and actions (e.g., select a patient, check the patient in to the
facility)

The metaphoric representation is then created (e.g., drag a patient icon into a bed)

The interface is easier to learn since the syntactic details are minimized.

Standard widgets with familiar syntax
•

Simple forms of feedback
•

Click, Double-Click
Highlighting
UI Designers often need to take training courses, read workbooks, and interview users
to gain the knowledge needed to create an object/action hierarchy
63
Guidelines, Principles, and Theories

Object-Action Interface Model
 Multiple complex actions needed to complete a task (e.g., write a letter)
•
•
•
•
•
•
•
Writing (task action)
Letter (task object)
Letter is stored as a document (interface object)
Know the details of the save command (interface action)
Middle Level Concept (construct a sentence)
Low level details of spell each word (low-level task object)
Know where the keys are for each letter (low-level interface object