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 Theories • Guidelines • Government Web Usability • http://www.usability.gov/pdfs/guidelines.html • Supported by research findings

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 Theories • Guidelines • Ice Cream Sandwich • Android User Interface Guidelines: http://developer.android.com/design/index.html ICS Guidelines

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 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 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 Theories • Organizing the Display • Consistency of Data Display • Terminology, formats, colors, capitalization • Efficient information assimilation by the user

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 Theories • Organizing the Display • Flexibility for user control of data display

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 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 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 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 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 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 Theories • Principles • Differences in Users • Domain/Application Knowledge • Frequency of Use • Goals • Consequences of Errors

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 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 Theories • Interaction Style • Direct Manipulation • Visual representation of familiar task objects • Can significantly simplify a task • Difficult to program

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 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 Theories • Interaction Style • Command Language • E.g., [CMD: u 800-222-2222 CA=ATX] • Powerful • Difficult to Learn

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 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 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 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 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 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 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 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 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 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 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 Theories