Designing user interfaces

1. Designing user interfaces Lecture 6 General guidelines Version 6

2. Mental and conceptual models Mental models Structural Functional Conceptual models Design model User model Version 6

3. Designing conceptual models User’s model Design model User Designer Documentation System image System Version 6

4. Guidelines for conceptual models (1) Decide who takes the initiative Computer-initiated User-initiated Variable-initiative (adaptive) Mixed initiative Increase flexibility Reduce complexity Group commands logically Increase the power of commands Match the information load to the user Version 6

5. Guidelines for conceptual models (2) Maintain consistency Provide feedback Ensure visibility Provide controllability Encourage efficiency Achieve balance Version 6

6. Human Estimation Intuition Creativity Adaptation Subconscious concurrency Processing of exceptions Associative memory Non-deterministic decision making Pattern recognition World knowledge Error proneness Computer Accurate calculation Logical deduction Repetitive activity Consistency Multitasking Routine processing Data storage and retrieval Deterministic decision making Data processing Domain knowledge Freedom from error Achieving balance: relative aptitudes Version 6

7. Principles High level and widely applicable Interpret and apply to particular application Design rules Low level instructions They come from: Heuristics Psychological theory Experiments What is a guideline? Version 6

8. Where do we find them? • International standards (de jure) • e.g. ISO 9241 • Commercial style guides (de facto) • e.g. Apple Macintosh, MS Windows • Corporate style guides • e.g. Goddard Space Flight Center • Design specification • e.g. CIRCE • Handbooks, articles • e.g. Smith and Mosier Version 6

9. Example: ISO 9241 3.1 Structuring into levels and menus (overall structure) Menu structures should reflect user expectations and facilitate the user’s ability to find and to select menu options relevant for the task. In order to increase the probability of meeting this objective, the following conditional requirements and recommendations shall be evaluated … 3.1.1 Conventional categories If options can be arranged into conventional or natural groups known to the users, options shall be organised into levels and menus consistent with that order. Example: Grouping foods into meats, vegetables, fruits Dialogue principle: User expectations Conformance: Applicability - documented evidence, analytical evaluation or empirical evaluation compliance - observation Draft International Standard: Part 14 Menu dialogues Version 6

10. Example: Apple Macintosh From theButtons Guideline …. A button's width is sized to fit the name it surrounds; the standard width for OK and Cancel buttons is 59 pixels. Standard button height is 20 pixels. Figure 7-1 shows some typical buttons in a dialog box. Figure 7-1 Buttons in a dialog box http://developer.apple.com/techpubs/mac/HIGuidelines/HIGuidelines-2.html Version 6

11. Example: Microsoft Windows Layout: Spacing and positioning Maintain a consistent margin from the edge of the window — seven dialog units is recommended. Use spacing between groups within the window, as shown in Figure 14.27. http://msdn.microsoft.com/library/ Version 6

12. Example: Goddard Space Flight Center Chapter 5 Guidelines for interaction styles and data protection 5.5.3 Dangerous Operations Maintain the integrity of the data. Build protection around dangerous operations, such as accidental file deletion (Figure 5-7). http://usability.gsfc.nasa.gov/use/Ug_96/ Version 6

13. Example: CIRCE J1 - K1 is 735 twips Source: OU, 1996 Version 6

14. Example: Smith and Mosier 1. Data Entry 1.1 Position designation 1.1-1 Distinctive Cursor For position designation on an electronic display, provide a movable cursor with distinctive visual features (shape, blink, etc) Exception When position designation involves only selection among displayed alternatives, highlighting selected items might be used instead of a separately displayed cursor ….. Comment If the cursor is changed to denote different functions (e.g. to signal deletion rather than entry) then each different cursor should be distinguishable from the others. ….. http://www.hcibib.org/sam/1.html Version 6

15. General principles for text • Present information in a logical sequence • Group related items of data together • Use display space consistently • Use blank space to structure display • Maximise the information transfer rate • Present information in simplest way Include only information essential for decision-making • Include all information essential for decision-making Version 6

16. Messages • Concise • Matched to users' knowledge and experience • In the affirmative • Constructive, not critical • Specific and comprehensible • Imply that the user is in control • Use words that are consistent with action Version 6

17. Prompts • Place prompts when and where they will be needed • Match level of detail to user • Phrase prompts in the active voice • Avoid negatives • Order prompts chronologically • Format prompts using white space, justification and visual cues for easy scanning • Use consistent terminology Version 6

18. Instructions • Make text clear and simple • Short sentences • Simple and familiar words • Short paragraphs, separated by at least one line • Limit line length or use double columns • Avoid hyphenation • Avoid right justification Version 6

19. General principles for graphics • Create appropriate set of objects • Represent objects in a convincing way • Provide consistent graphic mechanisms for indicating actions on the object • Ensure that the user can identify the part of screen on which to focus • Provide a display mode in which underlying structure is revealed • Use a consistent and appropriate graphic vocabulary Version 6

20. Task time or response time? Task time = system response time • System display rate • User scan/read time • User think time • User response time • Time making errors • Time recovering from errors Users adapt to system response time Version 6

21. Adaptive user strategies Fast response time, fast error recovery Low user think time and stress High user errors and user satisfaction Fast response time, slow error recovery Moderate user think time, user errors, user satisfaction and stress Slow response time, slow error recovery High user think time and stress Low user errors and user satisfaction Version 6

22. Operation Keyboard or cursor input Simple commands Complex commands Complex processes Response time 'Instantaneous’ < 2 seconds < 12 seconds > 12 seconds Suitable response times Version 6

23. General guidelines for response times • Keep variability to within 50% of mean • Makes sources of variability visible • Make trade-offs between ease of learning and use versus response time • Manage user expectations with feedback Version 6

24. Error handling • Goals • Minimise user errors to protect the system from the user • Provide recovery from errors to protect the user from the system • Types of error • Perceptual • Cognitive • Motor Version 6

25. Perceptual errors • Caused by inadequate perceptual clues • Users fail to detect important information • Examples: • Objects are visually similar • System state is invisible • Lack of adequate feedback Version 6

26. Cognitive errors • Caused by taxing user's memory and problem solving capabilities • Examples: • Demands on memory recall • Poor mnemonic aids • Inconsistencies • Lack of context or status information • Mental calculations and translations Version 6

27. Motor errors • Caused by taxing level of motor skill • Examples: • Awkward motor movements • Similar motor movements • Pressure for speed • Hand-eye co-ordination • Requiring high levels of skill Version 6

28. General principles for error recovery (1) • Provide appropriate type of response • Prevent user from continuing • Warn user of dangerous situations • Ignore incorrect user action • Correct user action • Initiate dialogue with user • Learn from user Version 6

29. General principles for error recovery (2) • Provide functions for user to modify actions: • Undo function • Cancel function • Seek confirmation • Design effective error messages: • Clear and concise • Constructive • Positive Version 6

30. Summary • Explain conceptual models and give guidelines for their use • Describe main sources for guidelines • Distinguish principles from design rules • Apply guidelines for text and graphics • Describe guidelines for response times and error handling Further reading and revision: • Dix et al, Chap 5, pp. 190-199 • Mayhew, Chap 14, pp. 465-475, Chap 15, pp. 515-519, Chap 16, pp. 526-533. Version 6