LECTURE 11 USABILITY -PROTOTYPING

Transcription

1 October 13th 2014 LECTURE 11 USABILITY -PROTOTYPING 1

2 Recapitulation Lecture #10 Tool box for HCI Task Analysis Cognitive techniques GOMS/CCT ERMIA CWA Dialogue Analysis-Design Color/Text Analysis-Design 2

3 Example: Cognitive Task Analysis Send in 2011, by former CS HCI student OV Chipcard Checkout Counter A C C A B D D B 3

4 Waterfall with iteration Requirements specification Architectural design Detailed design Discoveries in later stages can be reflected in iterations Requirements were incomplete in the analysis phase Therefore sometime better to acknowledge incompleteness and use advanced understanding Coding and unit testing Integration and testing It is clear that the design process is not at all linear Operation and maintenance Preference for Star Model? 4

5 Star Model Representations... Dialog Analysis Cognetics User Analysis Task Analysis Interaction Design Technology Assessment Problem Statement Usability Analysis Specification Context Analysis Usability testing Prototype High-Fidelity Prototype Cognetics 5

6 USABILITY USABILITY ENGINEERING 6

7 Usability Definition:Usability comprises the effectiveness, efficiency and satisfaction with which specified users can achieve specified goalsin a particular environment In design/development process Usability Specifications Levels of Specification Measurement Usability engineering Comparable to Software Engineering 7

8 Usability & 7 Stages model Gulf of execution Translate user s formulation of actions to the system Gulf of evaluation Effect of action in user s expectation of changed system state A good conceptual design & Mental Model helps in dealing with Gulf of execution/evaluation 8

9 Usability engineering Providing structured methods in UI design during product development Measuring very specific user actions in specific situations Try to find real usability problem(s) e.g. programming errors in VCR/interactive TV Usability specifications is not the same as Usability e.g. Video Recording still a pain to program! 9

10 Usability Engineering Life Cycle Close to Soft Systems (lecture 9) Holistic view of usability engineering Links to software engineering OOSE Requirements, Design, Evaluating, Prototyping Scaled down for smaller projects Usability goals are formulated in a style guide 10

11 Usability ~ Prototyping A chick and egg problem The sequence in which we discuss it does not reflect the sequence of its natural occurrence Imagine the Star Model How do usability & prototyping relate to evaluation! Focus on Usability specification!, this happens early in the design trajectory: requirements engineering 11

12 Usability Usability comprises the effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment.

13 Usability Components (from #1) Learnability (also referred to as Memorability) Ease of learning the system, i.e. the basic tasks Skills retained over time Throughput (also referred to as Efficiency) Speed of task performance Low user error rate Flexibility Suitability for intended user expertise Can system be customised? Attitude (also referred to as Satisfaction) User subjective satisfaction with system 13

14 Usability Studio s Studios are decorated according to specific usability questions Studio equipment is context dependent 14

15 Usability Specifications Definition and purpose Usability factors Measuring instruments Usability specification process Setting usability levels Advantages and disadvantages 15

16 Usability Definition (1990) ISO 9241definition Effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment. Functional ~ Usability Specifications Functional specifications: are central to ensuring system functionality Usability specifications: are central to ensuring system usability 16

17 ISO usability standard 9241 Adopts traditional usability categories: effectiveness can you achieve what you want to? efficiency can you do it without wasting effort? satisfaction do you enjoy the process? 17

18 Purpose Usability Specifications 1. Establish when an interface is good enough 2. When to stop iteration 3. Controlling document of design process 18

19 Common Usability Factors Speed of operation Completion rate Error free rate Satisfaction rating Learnability Retainability Advanced feature usage Most important Software measures as identified/used by IBM in

20 Time Dimension Usability Factors Initial performance Long-term performance First impression Long-term user satisfaction 20

21 Usability Measuring Instrument Method for providing values for a particular usability factor Always quantitative, i.e. numerically measured Objective Observable user performance Often associated with a benchmark test Involves typical user task (normally simple and frequent) Subjective User opinion Usually associated with a user questionnaire Objective and subjective measures are of equal importance 21

22 Important metrics from ISO 9241 Usability Effectiveness Efficiency Satisfaction objective measures measures measures Suitability Percentage of Time to Rating scale for the task goals achieved complete a task for satisfaction Appropriate for Number of power Relative efficiency Rating scale for trained users features used compared with satisfaction with an expert user power features Learnability Percentage of Time to learn Rating scale for functions learned criterion ease of learning Error tolerance Percentage of Time spent on Rating scale for errors corrected correcting errors error handling successfully 22

23 Usability Specification Process Defining usability through metrics duration metrics count measures proportion completed quality Setting and agreeing planned levels of metrics Analysing impact of design solutions Incorporating user-derived feedback Iterating until planned levels are achieved SUS questionnaire (for assignment) 23

24 e.g. Usability Specs DTP package Time Task Measured Current Worst Planned Best Initialization Benchmark #1 Time to successful installation Difficult to install 90 min 30 min 20 min Initial performance Set TAB # errors 3 errors 3 errors 2 errors 0 errors Initial performance Delete TAB Time on first trial 6 s 6 s 4 s 2 s First Impression Questionnaire Average score (1-5) NA

25 Usability and Requirements Usability levels become part first of the requirements document then of the system specification then of the complete system documentation then of report on system design / implementation 25

26 Setting Levels for Usability Restrict to major / critical issues Method: guesses agreed by a team, i.e. user interaction designer user interface software developer marketing person project manager generates team commitment to usability targets Initial performance and first impression are almost always appropriate 26

27 Current & Worst Acceptable Levels Current Level Present level of value to be measured Possible even from manual system or initial prototype May be related to a competitive system Worst Acceptable Level Worst acceptable, not worst possible Eventually, if any observed value on any attribute is does not meet this level then: the system is formally unacceptable Level should equal or improve current level except for initial performance slower and error prone make an educated guess 27

28 Planned Target & Best Possible Levels Planned Target Level The what you would like level Attributes not yet at this level focus development effort Set higher than current level (if known) Match or exceed competitor s product Best Possible Level Realistic state-of-the-art upper limit Indicates room for future improvement Assumes expert user, best design, best available technology 28

29 Advantages Usability Specs Part of the management and control mechanisms for the iterative refinement process Define a quantitative end to the (potentially endless) iterative refinement process Allows clear assessment of usability during iterative prototyping cycles Identifies data to be collected, avoids gathering unusable or irrelevant data Objectively identifies interface weaknesses which need further design effort 29

30 Disadvantages Usability Specifications Measures of specific user actions in specific situations No reliable technique for setting usability specifications; Issue of globalization Different tasks and user groups may need different usability specifications 30

31 31

32 Prototyping is common in almost every field of engineering design In prototyping one has to plan to throw away PROTOTYPING 32

33 Prototyping the User-Interface Purpose of prototyping Merits of prototyping Types of prototyping Prototyping and management Limitations of prototyping on its own 33

34 Purpose of Prototyping Identifying user interface (and other) requirements: almost impossible to specify in advance It is not until users interact with something concrete that their rich expertise about their working environment will surface. 34

35 Design is Developing Artifact Indeed, Magritte was right! 35

36 Prototyping The prototyping approach provides continuous feedback on the current design situation In HCI there will never be fully satisfactory design guidelines applicable in all circumstances Need not be computer based or have full functionality Supported by good software tools Graphical editors, construction kits User Interface Management Systems (UIMS) Wireframes Prototyping does NOT mean build in haste 36

37 Prototyping the User Interface PACT Analysis requirements engineering Guidelines Technology Build Prototype Test Prototype Enhance Design People Activities Context Technologies Life Cycle 37

38 Prototype Fidelity Prototyping is concerned with the design process leading up to production of a final system Prototypes are not the final system, merely representations of that system: Artifact As the Prototyping refines, the Fidelity of the prototype increases. low fidelity start design high fidelity end design 38

39 Merits of Prototyping Requirements capture Interface and functional requirements Reveals problems / prevents gross mistakes Allows evaluation and discussion Fostering innovative ideas (from designers and users) Users enjoy prototyping and feel involved Participatory design Suggests level of user support Results in better usability Reduced deadline effect Fewer lines of code 39

40 Fidelity in Prototyping Fidelity refers to the level of detail High fidelity: A prototype that looks like the final product Low fidelity: Artists renditions with many details missing 40

41 Why Low-Fidelity Prototype? Traditional methods take too long sketches prototype evaluate iterate Can simulate the prototype sketches evaluate iterate sketches act as prototypes designer plays computer other design team members observe & record Requires Fröbel implementation skills allows non-programmers to participate 41

42 Construct Low-Fidelity Prototype 42

43 Sketched Paper Design 43

44 Low-Fidelity Prototyping Takes only a few hours no expensive equipment needed Can test multiple alternatives!!! Can change the design as you test If users are trying to use the interface in a way you did not design/intend it go with what they think! Adapt! Allows designers & users to work together 44

45 45

46 Storyboards Series of sketches showing how a user might progress through a task using an interface Film industry Graphical snapshots Often used with scenarios, bringing more detail Derived from the scenario Focus on history of events (task-analysis) Help envisioning the progress of the interaction 46

47 Example Story Board (scenario) 47

48 Example Lo-Fi Prototype 48

49 Example Med-Fi Prototype Includes a Scenario for use 49

50 Prototyping Increasing Fidelity 50

51 Benefits of Participatory Design Computer-based systems that are poorly suited to how people actually work impose cost not only on the organisation in terms of low productivity but also on the people who work with them. Studies of work in computer-intensive workplaces have pointed to a host of serious problems that can be caused by job design that is insensitive to the nature of the work being performed, or to the needs of human beings in an automated workplace. Kuhn, S. in Bringing Design to Software,

52 Prototyping: Participatory Design Involving users as full partners in design. Intention, Scandinavian origin (law) Two methods are frequently used: CARD: Collaborative Analysis of Requirements & Design Goal: design workflow Higher level of abstraction PICTIVE: Plastic Interface for Collaborative Technology Initiatives through Video Exploration Goal: design screens Find interaction PICTIVE and CARD can be used together. 52

53 CARD Collaborative Analysis of Requirements & Design 53

54 PICTIVE 54

55 Low fidelity prototyping & PICTIVE Use pre-made interface components on paper Empty widgets are created and printed buttons menu alert box combo box list box tabs entries 55

56 Working with PICTIVE A PICTIVE session has four parts: Stakeholders all introduce themselves Brief tutorials about areas represented in the session (optional) Brainstorming of ideas for the design Walkthrough of the design and summary of decisions made Video capture of all interactions on the table 56

57 Ex. Results PICTIVE/Sketching Collections of Sreens & Screen Interaction(s), from Univ. of Manchester (2000) 57

58 Ex. Results Paper Design (LoFi) Collections of Screens & Screen Interaction(s), from Univ. of Oslo (2011) 58

59 PICTIVE Session Example Prototype for the LOL system (Aus) 59

60 Computer Assisted LowFi Prototyping The SILK System Sketching Interfaces Like Krazy The Denim System Designing Web Sites by Sketching Interactive Storyboarding for WWW 60

61 Designing Interfaces with SILK Designer sketches ideas rapidly with electronic pad and pen SILK recognizes widgets easy editing with gestures Designer or end-user tests interface widgets behave specify additional behavior visually Automatically transforms to a finished UI 61

62 Specifying Behavior Sequencing behavior between widgets before after Storyboards series of rough sketches depicting changes in response to end-user interaction Expresses many common behaviors Widgets are linked HyperCard like 62

63 SILK Storyboards Copy sketches to storyboard window Draw arrows from objects to screens Switch to run mode to test SILK changes screens on mouse clicks 63

64 64

65 DENIM:Designing Web Sites by Sketching Early-phase information & navigation design Integrates multiple views site map storyboard page sketch Supports informal interaction sketching, pen-based interaction Includes special gestures for fast interaction 65

66 Working with DENIM Sketch Storyboard Run-prototype Image from James Landay 66

67 Denim Demo 67

68 Wizard of Oz 68

69 Wizard of Oz prototyping User thinks having interacting with a computer, but a developer is responding to output rather than the system. Usually done early in design to understand users expectations (requirements) User >Blurb blurb >Do this >Why? 69

70 Example Wizard of Oz 70

71 Early wizard of Oz Chess machine built in Hungary (Kempelen) It worked remarkably well 71

72 Wizard of Oz Prototyping 72

73 Types of Prototyping (1) Low-fidelity // High-fidelity Vertical Focus on a specific element and simulate in depth Horizontal Take a broad perspective but with reduced functionality at any point Full Complete functionality, but less performance than final system 73

74 Granularity in Prototyping Low-Fidelity Paper-based Sketching Paper-based Storyboard a.k.a. PICTIVE Computer Aided Sketches / Storyboard Wizard of Oz / Slide Shows / Video Computer based Scenario Simulation Computer based Horizontal Simulation Computer based Vertical Simulation High-Fidelity Computer based Full-Functional Simulation 74

75 Types of Prototyping (2) Number of different Features T 0 Vertical Prototype Scenario Horizontal Prototype Full System Available Functionality 75

76 Prototyping Methods (1) Throw-away prototypes (rapid) Requirements Animation Incremental prototypes Evolutionary 76

77 Prototyping Methods (2) Requirements Animation Functional requirements are demonstrated in prototype (mock-up) Throw-away prototyping Similar to requirements animation Prototype is not developed into the final product Evolutionary prototyping Prototype is not discarded Prototype used as the basis for next iteration of design i.e. system evolves from prototype Incremental prototyping Final product is build as separate components, one at a time allows large systems to be installed in phases to avoid delays between specification and delay Typical with larger projects 77

78 Prototyping Early design Brainstorm different representations Choose a representation Rough out interface style Task centered walkthrough and redesign Low fidelity paper prototypes Fine tune interface, screen design Heuristic evaluation and redesign Medium fidelity prototypes Usability testing and redesign High fidelity prototypes / restricted systems Limited field testing Working systems Alpha/Beta tests Late design 78

79 Comparison of Techniques Technique Advantages Disadvantages Vertical Horizontal Scenario Wizard-of Oz Animation (slides & video) Realistic, In depth implementation Real user task Test entire UI Fast implementation Easy and cheap to construct Save programming time Renders understanding Simple System simulation Limited part of UI Cannot perform real tasks Cannot perform real tasks Limited part of UI Train people as computers Less realistic No real interaction Little flexibility 79

80 Groups Involved in Prototyping Designers End Users Managers 80

81 Management Issues Time takes time to develop particularly for throw-away prototypes Planning managers do not always have experience required to plan and cost a design process with prototyping Non-functional features e.g. safety and reliability not included Contracts difficult to manage prototyping activities via a contract 81

82 Choosing a prototyping technique Cost and schedule constraints Proof-of-concept Navigation and flow User-driven or Facilitator-driven Look-and-feel of product Usability test Available facilitation/ programming skill What developmental stage are you in? 82

83 Performance of a technique Suitable for: quick-and-easy application? providing controlled study? qualitative analysis? quantitative analysis? Requires: special equipment? special personnel? 83

84 Limitations on just Prototyping? Difficult for users: no coherent conceptual model users feel system has unpredictable components Uneven appreciation of various user groups users involved with prototype development may not represent cross-section of users not easy to learn or intuitive for newcomers Lack of task analysis lack of breadth of task support Failure to fully comply with a style guide lack of internal and external consistency Lack of usability evaluation 84

85 Recapitulation Lecture #11 Definition of Usability Definition of Usability Engineering Usability Specification Levels Measurement Instruments Definition of Prototyping From Low-Fidelity to High-Fidelity Types and Methods of Prototyping Management Issues Pitfalls in Prototyping 85

86 We have used a computer to prototype the structural strength of our project and I am afraid the results aren t encouraging 86