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 lines.htmlhttp:// lines.html Supported by research findings

3 Guidelines, Principles, and Theories  Guidelines  Corporate iPhone User Interface Guidelines: ntation/UserExperience/Conceptual /AppleHIGuidelines/XHIGIntro/chapt er_1_section_1.html ntation/UserExperience/Conceptual /AppleHIGuidelines/XHIGIntro/chapt er_1_section_1.html How to Build an iPhone App that Doesn't Suck

4 Guidelines, Principles, and Theories  Guidelines  Ice Cream Sandwich Android User Interface Guidelines: dex.html 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   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 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.

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 A 1.Section 1 2.Section 2 2.Unit B 1.Section 1 2.Section 2 1.Unit A 1.Section 1 2.Section 2 2.Unit B 1.Section 1 2.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 caller Call 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 the most likely next task to be performed? Download a Game Search for a Song by title Purchase a song Listen to a previously purchased song Create a playlist Play all songs on your phone Find a clip on ESPN Download a clip from CNN Find directions via VZ 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 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  Semantic Level  Add a Phone Number Goal Schedule Appointment Check-In Patient Demographics Check-In Information Name Address

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) GOAL Perceived 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