CSM18 Usability Engineering - The Design Process

1. CSM18 Usability Engineering - The Design Process Design rules & guidelines Models of user in the design • cognitive models • users cognitive knowledge • users cognitive strategies • hierarchical models • order or sequence of processes, tasks • linguistic models • syntax & grammar • physical and device models • keyboard, mouse, speech UniS Department of Computing

2. The Design Process for Usability Design of a User Interface needs be considered from different perspectives • functional perspective • hierarchy of tasks • usability perspective • aesthetic qualities Design use same methodologies as any Systems Analysis and Design process - Software engineering & HCI design UniS Department of Computing

3. Software engineering & HCI design Software engineering “The development and use of principles, methods and tools to design and develop, economically and optimally, software systems that are aesthetically pleasing, efficient, reliable and usable for the purposes for which they were designed.” Software engineering - process model for software development: • requirements analysis • specification including usability • design and construction • project planning • costs, time, scope • systems and software • task analysis • design of data structures • program structure etc. UniS Department of Computing

4. Software engineering & HCI design • verification, testing, user trials • repairing faults (debugging), improvements • management • updating, maintenance These software engineering processes carried out within a developmental model: • Waterfall lifecycle model • Prototype method For HCI and user-interface design related activities such as user & task requirements must be considered at every stage of the process UniS Department of Computing

5. Design Rules & Usability Engineering Explicit measurement of usability “usability metric” (Whiteside et al.) 1. Time to complete a task 2. Percent of task completed 3. Percent of task completed per unit time 4. Ration of successes to failures 5. Time spent in errors 6. Percent or number of errors 7. Percent or number of competitors better than it 8. Number of commands used 9. Frequency of help and documentation use 10. Percent of favourable/unfavourable user comments 11. Number of repetitions of failed commands 12. Number of runs of success and of failures 13. Number of times interface misleads the user 14. Number of good and bad features recalled by users UniS Department of Computing

6. Design Rules & Usability Engineering 15. Number of available commands not invoked 16. Number of regressive behaviours 17. Number of users preferring your system 18. Number of times users need to work around a problem 19. Number of times the user is disrupted from a work task 20. Number of times user loses control of the system 21. Number of times user expresses frustration or satisfaction Possible ways to set measurement levels in a usability specification with respect to: 1. An existing system or previous version 2. Competitive systems 3. Carrying out the task without use of a computer system 4. An absolute scale 5. Your own prototype 6. User’s own earlier performance 7. Summation of each component of a system measured separately UniS Department of Computing

7. Design Rules & Usability Engineering Problems with usability engineering • Measurement - only consider things that can be measured - may not be the most important for the user. • Specific users & situations may change the requirements UniS Department of Computing

8. Cognitive Models of design A variety of models and notations are used in HCI as part of the design life cycle. Includes model of Users, interactions and interfaces. Models of user in design - all model some aspect of users’ understanding, knowledge, intentions or processing. 1. Goals and task hierarchies 2. Linguistic models users’ syntax and grammar 3. Physical & device models models user performance with interactive system 4 Acquired mental model where the user builds a mental representation of the task UniS Department of Computing

9. Cognitive Psychology • Visual Perception - resolution, visibility in poor light, flicker, colour reception (colour blindness) • Visual Interpretation - constructs a model of the world comparing, transforming, enhancing, distorting, discarding information etc. • 3D to 2D transformation - perspective gives depth clues interpret 2D images as 3D • Animation - motion parallax • Attention constraints - divided attention, selective, cognitive overload, emergency situation (can't do more than one thing at a time) • Theories of Information processing and memory • little guidance on interface design except recall & recognition UniS Department of Computing

10. Cognitive Psychology • Empirical findings - • Motion must be realistic even at expense of resolution • Audio effects enhance visual effects • Empirical approach to design - Make an Intelligent guess and then test!! • More systematic approach to design • Mental Models: • A mental model should lead to a prediction in a new situation - ‘run a mental model’ • Mental model built up by previous experience, reasoning, extent of understanding, framework in which understanding exists, concepts UniS Department of Computing

11. Cognitive Psychology • We need to know the user's Mental Models - • their understanding of how a device works in terms of its internal structure and processes leads to us being able to instruct a user how to do .... • Wrong mental models lead to problems eg word processor vs text editor • Goals, sub-goals and Plans: • Goals > intentions > plans > assemble set of actions • Goals may change with experience and/or the interaction gain understanding as you go along may modify the goal • Need to know of the existence of actions that change the state or Mode (clearly state Mode on screen) UniS Department of Computing

12. Cognitive Psychology • Errors • Mistakes - failure of intention - don’t realise mistake made - failure of action • Slips - accidental errors • Mode error - in the wrong state • Description errors - misinterpret information given or implied • Information flow - Visually rich interface can overwhelm or confuse - make it well structured • Text • Graphics • Icons • Colour UniS Department of Computing

13. Cognitive Psychology • Meta knowledge - Tell users facilities exist and how to find them rather than make them remember how to use them • Direct manipulation interface - recognition rather than recall • Interface - abstract world • - virtual world • Interface - user must spend time to gain experience • Requirements Analysis - specify functionality of the system - leads to Detailed Specification - what the system will do • Task Analysis - how the system will do it • Start with User and specify Tasks • Hierarchical Task Analysis - HTA Diagram UniS Department of Computing

14. Cognitive Psychology • Specify Interface - Screen Design • Objects - text, date, numbers, graphics, icons • Actions - type, move, select, delete etc. • Sequence of Actions • Specify Interface - State Transition Diagrams - Change in attributes values (state) - Carry out Cognitive Walkthrough • Build Prototype in Visual Basic • Carry out Evaluation/User Trials • Report - discuss all stages of design process • Diagrams - explain • Critique your design and methodology UniS Department of Computing

15. 1 boil water 2 empty pot 4 pour in boiling water 5 wait 4 or 5 minutes 6 pour tea 0. make a cup of tea Hierarchical task analysis: making a cup of tea 3 put tea leaves in pot 1.1 fill kettle 1.2 put kettle on stove 1.3 wait for kettle to boil 1.4 turn off gas UniS Department of Computing

16. Diagrammatic Notation used in design Diagrammatic Notations Two powerful methods are • Flow charts • State transition networks UniS Department of Computing

17. Delete D1 Please enter employee no.:__ Flow chart of deletion sub-dialogue read recordC1 Delete D2 Name: Alan Dix Dept: Computing delete? (Y/N):__ Delete D3 Name: Alan Dix Dept:Computing delete? (Y/N): __ Please enter Y or N other answer?C1 N Finish Y delete recordC1 Finish UniS Department of Computing

18. State Transition Diagram Microwave Cooker Power Off Power On Clock not set Unacceptable state Clock set Ready Power Set Duration Set Delayed Start Label transitions Duration Set Cooking Cancelled Stopped UniS Department of Computing

19. State Transition Diagram • Intentionality - Cooking • Conceptual Design - Entities and process/behaviour • time of day • time to start cooking • duration of cooking time • possibility to interrupt and continue cooking • Semantic Design - User Operations documented by Finite State Transition Diagram • Transitions • Set clock • Set start time • Set duration • Set power UniS Department of Computing

20. State Transition Diagram • Syntactic Design - Diagram of front panel of cooker (screen) • All states are apparent to user (should be) • All courses of action must be shown as transitions between states • Feedback message for each transitions (good design) • If state has more than one value decide if need a new state is needed • on/off could be the value of one state or designed as two states • Duration Set is duplicated - could be avoided • Benefits of FSTD • Easily see missing transactions from diagram • Diagram will tell you which options in any menu are inactive UniS Department of Computing