Upload
curtis-golden
View
218
Download
2
Embed Size (px)
Citation preview
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/
guidelines.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/
chapter_1_section_1.html
http://www.youtube.com/watch?v=ENyzcXRPeeIHow to Build an iPhone App that Doesn't Suck
4
Guidelines, Principles, and Theories
Guidelines
Jelly Bean
• Android User Interface Guidelines:
http://developer.android.com/design/i
ndex.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)
Color (up to four)
Size (up to four sizes)
Choice of formats (up to three fonts)
Inverse video
Blinking
Audio (distinguishing between signals)
A
B
24
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)
A
B
25
1. Unit A1. Section 12. Section 2
2. Unit B1. Section 12. Section 2
1. Unit A1. Section 12. Section 2
2. Unit B1. Section 12. Section 2
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)
A
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.
inverse video
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
Assumed starting point for all users
Change wallpaper
Change ringtone
Send a text message to a
contact
Reply to a text message
Send a picture message
Specify a unique ring for
a callerCall a number
Show the callers picture when they
call
Remove a number from your directory
Play a game
Read the news
Download a new ringtone
View photos you have taken with
your camera
Add a number to your directory
Set phone to silent mode
Send a text message
Talking
Messaging
Personalizing
Gaming
Photographs
Information Gathering
View missed calls
What is themost likely next task
to be performed?
Download a Game
Search for a Song by title
Purchase a song
Listen to a previouslypurchased song
Create a playlist
Play all songson your phone
Find a clip on ESPN
Download a clip from CNN
Find directions viaVZ Navigator
Music and Video
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
• Disabilities3. Offer informative feedback
• For every user action there should be system feedback4. Design dialogs to yield closure
• Sequence of actions should have a beginning, middle and end5. 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
• Disabilities3. Offer informative feedback
• For every user action there should be system feedback4. Design dialogs to yield closure
• Sequence of actions should have a beginning, middle and end5. 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
• Disabilities3. Offer informative feedback
• For every user action there should be system feedback4. Design dialogs to yield closure
• Sequence of actions should have a beginning, middle and end5. 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
• Disabilities3. Offer informative feedback
• For every user action there should be system feedback4. Design dialogs to yield closure
• Sequence of actions should have a beginning, middle and end5. 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
• Disabilities3. Offer informative feedback
• For every user action there should be system feedback4. Design dialogs to yield closure
• Sequence of actions should have a beginning, middle and end5. 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
5. Prevent Errors (cont.)
• Verification of completion of sub-tasks
• Single actions to accomplish an action sequence
6. Permit easy reversal of actions
• A single action
• A set of data
• A complete process
7. Support internal focus of control
• Users should be the initiators of actions, not the responders to actions
8. 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
Semantic Level
Add a Phone Number
GoalGoal
Schedule Appointment
Schedule Appointment
Check-InCheck-In
Patient Demographics
Patient Demographics
Check-In Information
Check-In Information
NameName
AddressAddress
55
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
Guidelines, Principles, and Theories
56
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
Guidelines, Principles, and Theories
57
Syntactic Level – Add a Telephone Number
Direct Entry of Phone Number
Specify Type
Click “Done”
Guidelines, Principles, and Theories
58
S-R-C Model (by Darwin Hunt)
GOALPerceived Situation
Internal Response
Predicted Consequences
ACTUAL RESPONSE
ACTUAL RESULTS
ACTUAL SITUATION
Internal Model
External Model
Guidelines, Principles, and Theories
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
Pattern Example: Error Handling
Guidelines, Principles, and Theories
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
• Click, Double-Click
Simple forms of feedback
• 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
64
Guidelines, Principles and Theories
Kit Kat – October 2013
New immersive mode, which automatically hides everything except what you really want to see.
Making calling easier
• Search across your contacts, nearby places, or even Google Apps accounts (like your company’s directory), directly from within the app.
65
Cover – context specific application for simplification
http://techcrunch.com/2013/10/24/cover-android/
Guidelines, Principles and Theories
66
Aviate: intelligent home screen for Androidhttp://www.theverge.com/2013/10/15/4839182/aviate-for-android-screenshots
Guidelines, Principles and Theories
67
Improving beyond direct manipulation of mobile?
Guidelines, Principles and Theories
68
Go Launcher EX - An app for customizing android home screens (March 2013).
http://www.youtube.com/watch?v=3SvEYlqfXQI
http://www.youtube.com/watch?v=3SvEYlqfXQI
Guidelines, Principles and Theories