guidelines principles and theories
Download
Skip this Video
Download Presentation
Guidelines, Principles, and Theories

Loading in 2 Seconds...

play fullscreen
1 / 63

Guidelines, Principles, and Theories - PowerPoint PPT Presentation


  • 82 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Guidelines, Principles, and Theories' - lane-heath


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
guidelines principles and theories
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
guidelines principles and theories1
Guidelines, Principles, and Theories
  • Guidelines
    • Government Web Usability
      • http://www.usability.gov/pdfs/guidelines.html
      • Supported by research findings
guidelines principles and theories2
Guidelines, Principles, and Theories
  • Guidelines
    • Corporate
      • iPhone User Interface Guidelines: http://developer.apple.com/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGIntro/chapter_1_section_1.html

How to Build an iPhone App that Doesn\'t Suck

http://www.youtube.com/watch?v=ENyzcXRPeeI

guidelines principles and theories3
Guidelines, Principles, and Theories
  • Guidelines
    • Ice Cream Sandwich
      • Android User Interface Guidelines: http://developer.android.com/design/index.html

ICS Guidelines

guidelines principles and theories4
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
guidelines principles and theories5
Guidelines, Principles, and Theories
  • Accessibility and Cell Phone Access
    • Nuance\'s TALKS and Code Factory\'s Mobile Speak screen readers
    • Screen magnifiers
  • iPhone
    • VoiceOver screen reader
    • Zoom magnification feature
    • Compatibility with wireless braille displays
    • Assisted Touch
  • Android
    • Google\'s Eyes-Free Project in 2011.
guidelines principles and theories6
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
guidelines principles and theories7
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
guidelines principles and theories8
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
guidelines principles and theories9
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
guidelines principles and theories10
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
guidelines principles and theories11
Guidelines, Principles, and Theories
  • Organizing the Display
    • Consistency of Data Display
      • Terminology, formats, colors, capitalization
    • Efficient information assimilation by the user
guidelines principles and theories12
Guidelines, Principles, and Theories
  • Organizing the Display
    • Consistency of Data Display
      • Terminology, formats, colors, capitalization
    • Efficient information assimilation by the user
guidelines principles and theories13
Guidelines, Principles, and Theories
  • Organizing the Display
    • Consistency of Data Display
      • Terminology, formats, colors, capitalization
    • Efficient information assimilation by the user
guidelines principles and theories14
Guidelines, Principles, and Theories
  • Organizing the Display
    • Consistency of Data Display
      • Terminology, formats, colors, capitalization
    • Efficient information assimilation by the user
guidelines principles and theories15
Guidelines, Principles, and Theories
  • Organizing the Display
    • Consistency of Data Display
      • Terminology, formats, colors, capitalization
    • Efficient information assimilation by the user
guidelines principles and theories16
Guidelines, Principles, and Theories
  • Organizing the Display
    • Consistency of Data Display
      • Terminology, formats, colors, capitalization
    • Efficient information assimilation by the user
guidelines principles and theories17
Guidelines, Principles, and Theories
  • Organizing the Display
    • Consistency of Data Display
      • Terminology, formats, colors, capitalization
    • Efficient information assimilation by the user
guidelines principles and theories18
Guidelines, Principles, and Theories
  • Organizing the Display
    • Consistency of Data Display
      • Terminology, formats, colors, capitalization
    • Efficient information assimilation by the user
guidelines principles and theories19
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

guidelines principles and theories20
Guidelines, Principles, and Theories
  • Organizing the Display
    • Flexibility for user control of data display
guidelines principles and theories21
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)
guidelines principles and theories22
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

guidelines principles and theories23
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

guidelines principles and theories24
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)
  • Unit A
    • Section 1
    • Section 2
  • Unit B
    • Section 1
    • Section 2

A

  • Unit A
    • Section 1
    • Section 2
  • Unit B
    • Section 1
    • Section 2

B

guidelines principles and theories25
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

guidelines principles and theories26
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
guidelines principles and theories27
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)
guidelines principles and theories28
Guidelines, Principles, and Theories
  • Principles
    • Differences in Users
      • Domain/Application Knowledge
      • Frequency of Use
      • Goals
      • Consequences of Errors
guidelines principles and theories29
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
guidelines principles and theories30
Guidelines, Principles, and Theories

Photographs

Personalizing

View photos you have taken with your camera

Change

ringtone

Change wallpaper

What is the

most likely next task to be performed?

Download a new ringtone

Gaming

Play a game

Talking

Set phone to silent mode

Specify a unique ring for a caller

Download a Game

Call a number

Show the callers picture when they call

Add a number to your directory

Assumed starting point for all users

Remove a number from your directory

Music and Video

Messaging

Download a clip from CNN

Find a clip

on ESPN

Send a text message to a contact

Send a text message

View missed calls

Search for a

Song by title

Reply to a text message

Purchase a

song

Send a picture message

Listen to a previously

purchased song

Information Gathering

Play all songs

on your phone

Create a

playlist

Read the news

Find directions via

VZ Navigator

guidelines principles and theories31
Guidelines, Principles, and Theories
  • Interaction Style
    • Direct Manipulation
      • Visual representation of familiar task objects
      • Can significantly simplify a task
      • Difficult to program
guidelines principles and theories32
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?
guidelines principles and theories33
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
guidelines principles and theories34
Guidelines, Principles, and Theories
  • Interaction Style
    • Command Language
      • E.g., [CMD: u 800-222-2222 CA=ATX]
      • Powerful
      • Difficult to Learn
guidelines principles and theories35
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)
guidelines principles and theories36
Guidelines, Principles, and Theories
  • Shneiderman’s 8 Principles of Interface Design
    • Consistency
      • Terms, color, layout, fonts, patterns (e.g., yes/no buttons in same order)
    • Cater to universal usability
      • Novice vs. Expert (adaptability to short-cuts)
      • Previous computer experience
      • Domain expertise
      • Disabilities
    • Offer informative feedback
      • For every user action there should be system feedback
    • Design dialogs to yield closure
      • Sequence of actions should have a beginning, middle and end
    • Prevent Errors
      • Enabling/Disabling fields
      • Formatted Fields (alpha, date, SSN, TN)
      • Error Messages (simple, constructive, specific instructions for recovery)
      • Auto-complete
guidelines principles and theories37
Guidelines, Principles, and Theories
  • Shneiderman’s 8 Principles of Interface Design
    • Consistency
      • Terms, color, layout, fonts, patterns (e.g., yes/no buttons in same order)
    • Cater to universal usability
      • Novice vs. Expert (adaptability to short-cuts)
      • Previous computer experience
      • Domain expertise
      • Disabilities
    • Offer informative feedback
      • For every user action there should be system feedback
    • Design dialogs to yield closure
      • Sequence of actions should have a beginning, middle and end
    • Prevent Errors
      • Enabling/Disabling fields
      • Formatted Fields (alpha, date, SSN, TN)
      • Error Messages (simple, constructive, specific instructions for recovery)
      • Auto-complete
guidelines principles and theories38
Guidelines, Principles, and Theories
  • Shneiderman’s 8 Principles of Interface Design
    • Consistency
      • Terms, color, layout, fonts, patterns (e.g., yes/no buttons in same order)
    • Cater to universal usability
      • Novice vs. Expert (adaptability to short-cuts)
      • Previous computer experience
      • Domain expertise
      • Disabilities
    • Offer informative feedback
      • For every user action there should be system feedback
    • Design dialogs to yield closure
      • Sequence of actions should have a beginning, middle and end
    • Prevent Errors
      • Enabling/Disabling fields
      • Formatted Fields (alpha, date, SSN, TN)
      • Error Messages (simple, constructive, specific instructions for recovery)
      • Auto-complete
guidelines principles and theories39
Guidelines, Principles, and Theories
  • Shneiderman’s 8 Principles of Interface Design
    • Consistency
      • Terms, color, layout, fonts, patterns (e.g., yes/no buttons in same order)
    • Cater to universal usability
      • Novice vs. Expert (adaptability to short-cuts)
      • Previous computer experience
      • Domain expertise
      • Disabilities
    • Offer informative feedback
      • For every user action there should be system feedback
    • Design dialogs to yield closure
      • Sequence of actions should have a beginning, middle and end
    • Prevent Errors
      • Enabling/Disabling fields
      • Formatted Fields (alpha, date, SSN, TN)
      • Error Messages (simple, constructive, specific instructions for recovery)
      • Auto-complete
guidelines principles and theories40
Guidelines, Principles, and Theories
  • Shneiderman’s 8 Principles of Interface Design
    • Consistency
      • Terms, color, layout, fonts, patterns (e.g., yes/no buttons in same order)
    • Cater to universal usability
      • Novice vs. Expert (adaptability to short-cuts)
      • Previous computer experience
      • Domain expertise
      • Disabilities
    • Offer informative feedback
      • For every user action there should be system feedback
    • Design dialogs to yield closure
      • Sequence of actions should have a beginning, middle and end
    • Prevent Errors
      • Enabling/Disabling entry fields
      • Formatted Fields (alpha, numeric, date, SSN, TN)
      • Error Messages (simple, constructive, specific instructions for recovery)
      • Auto-complete
guidelines principles and theories41
Guidelines, Principles, and Theories
  • Shneiderman’s 8 principles of Interface Design
    • Prevent Errors (cont.)
      • Verification of completion of sub-tasks
      • Single actions to accomplish an action sequence
    • Permit easy reversal of actions
      • A single action
      • A set of data
      • A complete process
    • Support internal focus of control
      • Users should be the initiators of actions, not the responders to actions
    • Reduce short-term memory load
      • 7 +/- 2 chunks
      • On line access to codes, abbreviations should be provided
      • Drop-downs
guidelines principles and theories42
Guidelines, Principles, and Theories
  • Shneiderman’s 8 prinicles of Interface Design
    • Prevent Errors (cont.)
      • Verification of completion of sub-tasks
      • Single actions to accomplish an action sequence
    • Permit easy reversal of actions
      • A single action
      • A set of data
      • A complete process
    • Support internal focus of control
      • Users should be the initiators of actions, not the responders to actions
    • Reduce short-term memory load
      • 7 +/- 2 chunks
      • On line access to codes, abbreviations should be provided
      • Drop-downs
guidelines principles and theories43
Guidelines, Principles, and Theories
  • Shneiderman’s 8 prinicles of Interface Design
    • Prevent Errors (cont.)
      • Verification of completion of sub-tasks
      • Single actions to accomplish an action sequence
    • Permit easy reversal of actions
      • A single action
      • A set of data
      • A complete process
    • Support internal focus of control
      • Users should be the initiators of actions, not the responders to actions
    • Reduce short-term memory load
      • 7 +/- 2 chunks
      • On line access to codes, abbreviations should be provided
      • Drop-downs
guidelines principles and theories44
Guidelines, Principles, and Theories
  • Shneiderman’s 8 principles of Interface Design
    • Prevent Errors (cont.)
      • Verification of completion of sub-tasks
      • Single actions to accomplish an action sequence
    • Permit easy reversal of actions
      • A single action
      • A set of data
      • A complete process
    • Support internal focus of control
      • Users should be the initiators of actions, not the responders to actions
    • Reduce short-term memory load
      • 7 +/- 2 chunks
      • Drop-downs
guidelines principles and theories45
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
guidelines principles and theories46
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
guidelines principles and theories47
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
guidelines principles and theories48
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
guidelines principles and theories49
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)
guidelines principles and theories50
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
guidelines principles and theories51
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
guidelines principles and theories52
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
guidelines principles and theories53
Guidelines, Principles, and Theories
  • Conceptual Model
  • Semantic Level
    • Add a Phone Number

Schedule Appointment

Goal

Check-In Information

Name

Check-In

Patient Demographics

Address

slide55

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
slide56

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
slide57

Guidelines, Principles, and Theories

  • Syntactic Level – Add a Telephone Number
    • Direct Entry of Phone Number
      • Specify Type
    • Click “Done”
slide58

Guidelines, Principles, and Theories

  • S-R-C Model (by Darwin Hunt)

Internal Model

Internal Response

Predicted Consequences

Perceived Situation

GOAL

ACTUAL SITUATION

ACTUAL RESULTS

ACTUAL RESPONSE

External Model

guidelines principles and theories54
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
guidelines principles and theories55
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.”
slide61

Guidelines, Principles, and Theories

  • Pattern Example: Error Handling
guidelines principles and theories56
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
guidelines principles and theories57
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
ad