Chapter 11 Design, prototyping, and construction

Outline Prototyping and construction Conceptual design Physical design Using scenarios in design Using prototypes in design

Prototyping and construction What is a prototype? Ranges from a paper-based storyboard through to a complex piece of software Allows stakeholders to Interact with an envisioned product Gain real experiences Explore imagined uses So, a prototype is a limited representation of a design that allows users to interact with it and to explore its suitability

Why prototype? To test out the technical feasibility of an idea To clarify some vague requirements To do some user testing and evaluation To check that a certain design direction is compatible with the rest of the system development Your purpose will influence the kind of prototype you build

Low-fidelity prototyping Does not look very much like the final product Simple, cheap, and quick to produce/modify Only for exploration

Low-fidelity prototyping Examples: Storyboarding – shows steps a user might go through to perform a task by using the product Sketching Prototyping with index cards Wizard of Oz – a human operator sits and simulates the software’s response to the user

Storyboards Often used with scenarios, bringing more detail, and a chance to role play It is a series of sketches showing how a user might progress through a task using the device Used early in design From:

Sketching Sketching is important to low-fidelity prototyping Don’t be inhibited about drawing ability. Practice simple symbols From:

Card-based prototypes Index cards (3 X 5 inches) Each card represents one screen or part of screen Often used in website development From:

‘Wizard-of-Oz’ prototyping The user thinks they are interacting with a computer, but a developer is responding to output rather than the system. Usually done early in design to understand users’ expectations >Blurb blurb >Do this >Why? User From:

High-fidelity prototyping Looks much more like the final product Powerpoint prototype has characteristics of high and low fidelity

Low-fidelity prototype Advantages Lower development cost Evaluate multiple design concepts Useful communication device Address screen layout issues Useful for identifying market requirements Proof-of-concept Disadvantages Limited error checking Poor detailed specification to code to Facilitator-driven Limited utility after requirements established Limited usefulness for usability tests Navigational and flow limitations

High-fidelity prototype Advantages Complete functionality Fully interactive User-driven Clearly defines navigational scheme Use for exploration and test Look and feel of final product Serves as a living specification Marketing and sales tool Disadvantages More expensive to develop Time-consuming to create Inefficient for proof-of- concept designs Not effective for requirements gathering

Compromises in prototyping All prototypes involve compromises For software-based prototyping maybe there is a slow response? sketchy icons? limited functionality? Two common types of compromise ‘horizontal’: provide a wide range of functions, but with little detail ‘vertical’: provide a lot of detail for only a few functions Compromises in prototypes mustn’t be ignored. Product needs engineering

Construction: from design to implementation Evolutionary prototyping involves evolving a prototype into the final product The prototypes should be subjected to rigorous testing along the way Throwaway prototyping uses the prototypes as stepping stones towards the final design The prototypes are thrown away and the final product is built from scratch

Conceptual design Transform needs/requirements into a conceptual model A conceptual model is an outline of what people can do with a product what concepts are needed to understand how to interact with it Empathize with users – really understand the users’ experience

Conceptual design Key guiding principles of conceptual design are: Keep an open mind but never forget the users and their context Discuss ideas with other stakeholders as much as possible Use low-fidelity prototyping to get rapid feedback Iterate, iterate, iterate

Conceptual design Requirements activity Provide information about the concepts involved in a task and their relationships Empathize with users together with requirements Provide information about the product’s user experience goals Give a good understanding of what the product should be like

Developing an initial conceptual model

Interface metaphors Which interface metaphors would be suitable to help users understand the product? 3 steps to choose a good metaphor Understand what the system will do Understand which parts of the system users may have difficulties with Generate metaphors

Interface metaphors Evaluate metaphors How much structure does the metaphor provide? How much of the metaphor is relevant to the problem? Is the interface metaphor easy to represent? Will your audience understand the metaphor? How extensible is the metaphor?

Interface metaphors Example- a group travel organizer : printed travel brochure Structure? A book with pages, a cover, binding, an index, table of contents, and content about destinations and accommodation Relevant? Content is relevant. Page turning is less relevant. Keeping info updated should be easier with the organizer.

Interface metaphors Example- a group travel organizer : printed travel brochure Easy to represent? Holiday info could be a set of brochure-like ‘pages’ Understood by audience? Yes How extensible? Extended to include functionalities of a book

Interface metaphors Example- a group travel organizer : travel consultant Structure? Travelers specify their needs. Consultants do research. Relevant? To some extent. Some may like someone else to search for their holidays; some may not.

Interface metaphors Example- a group travel organizer : travel consultant Easy to represent? Represented by a software agent, or database entry and search facility Understood by audience? Yes How extensible? The consultant could give a few or a large number of options

Interaction type Which interaction type(s) would best support the users’ activities? Instructing, conversing, manipulating, or exploring Example: travel organizer Instructing – finding information about visa regulations Conversing – finding information about holiday plans

Interface type Do different interface types suggest alternative design insights or options? Thinking about a conceptual model should not be influenced by a predetermined interface type Considering different interfaces prompt alternatives one step towards producing practical prototypes

Expanding the initial conceptual model

Expanding the conceptual model What functions will the product perform? i.e. how the task will be divided up between the human and the machine (task allocation) Too high cognitive load for the user, the device may be too stressful Too much control taken by the device (inflexible), the product may not be used What functions will be ‘hard-wired’, what will be left under software control

Expanding the conceptual model How are the functions related to each other? Temporally, e.g. one must be performed before another Categorizations, e.g. all functions relating to telephone memory storage in a cell phone The relationships between tasks (task analysis) supply information to support these kinds of decisions

Expanding the conceptual model What information needs to be available? What data is required to perform a task? How is this data to be transformed by the system?

Physical design Where the border between conceptual design and physical design lies is not relevant What’s more important is that the conceptual design should not be tied to physical constraints too early because this might inhibit creativity

Using scenarios in design Expressed proposed or imagined situations Used throughout design in many ways Used as scripts for user evaluation of prototypes Provide a concrete example of a task Used as the basis of storyboard creation Build a shared understanding among team members Sell ideas to users, managers, potential customers

Using scenarios in design Plus and minus scenarios to capture the most positive and negative consequences of a particular proposed design solution

Using prototypes in design

Generate storyboard from scenario From:

Scenario for holiday planner “The Thomson family enjoy outdoor activity holidays and want to try their hand at sailing this year. There are four members of the family: Sky who is 10 years old, Eamonn who is 15 years old, Claire who is 35, and Will who is 40. While out on a shopping trip they call by at the travel agents in their local town to start exploring the possibilities... The travel organizer is located in a quiet corner of the agents’ office, where there are comfortable seats and play things for young children. They all gather around the organizer and enter their initial set of requirements—a sailing holiday for four novices. The stand-alone console is designed so that all members of the family can interact easily and comfortably with it. The system’s initial suggestion is that they should consider a flotilla holiday, where several novice crews go sailing together and provide mutual support for first-time sailors…”

Generate card-based prototype from use case From:

Use case for holiday planner 1. The system displays options for investigating visa and vaccination requirements. 2. The user chooses the option to find out about visa requirements. 3. The system prompts user for the name of the destination country. 4. The user enters the country’s name. 5. The system checks that the country is valid. 6. The system prompts the user for her nationality. 7. The user enters her nationality. 8. The system checks the visa requirements of the entered country for a passport holder of her nationality. 9. The system displays the visa requirements. 10. The system displays the option to print out the visa requirements. 11. The user chooses to print the requirements.

Summary Different kinds of prototyping are used for different purposes and at different stages Prototypes answer questions, so prototype appropriately Construction: the final product must be engineered appropriately Conceptual design (the first step of design) Consider interaction types and interface types to prompt creativity Storyboards can be generated from scenarios Card-based prototypes can be generated from use cases From:

Chapter 12 Introducing evaluation

Outline Why, what, where and when of evaluation Evaluation approaches and methods Evaluation case studies

Why, what, where and when of evaluation Why evaluate? Get feedback on early design ideas Able to fix problems before launching to market Focus on real problems rather than on designers’ preferences What to evaluate Early design ideas Prototypes Finished products

Why, what, where and when of evaluation Where to evaluate laboratory or natural settings When to evaluate Formative evaluation – to check that the product continues to meet users’ needs Summative evaluation – to assess whether the finished product meets required standards

The language of evaluation Analytical evaluation an approach to evaluation that does not involve end-users, e.g. heuristic evaluation, walkthroughs, and modeling Controlled experiment A study that is performed in a laboratory which is controlled by the evaluator Field study A study that is done in a natural environment

The language of evaluation Formative evaluation Heuristic evaluation An approach to evaluation in which knowledge of typical users is applied to identify usability problems Predictive evaluation An approach to evaluation in which theoretically based models are used to predict user performance

The language of evaluation Summative evaluation Usability laboratory a laboratory that is designed for usability testing User studies Any evaluation that involves users directly Usability study An evaluation that is performed to examine the usability of a design or system

The language of evaluation Usability testing An approach to evaluation that involves measuring users’ performance and evaluating their satisfaction with the system in question on certain tasks in a laboratory setting User testing An evaluation approach where users are asked to perform certain tasks using a system or prototype in an informal or laboratory setting

Evaluation approaches Usability testing Field studies Analytical evaluation

Evaluation methods Observing users Asking users Asking experts User testing Inspections Modeling users’ performance

Characteristics of approaches Usability testing Field studies Analytical Usersdo tasknaturalnot involved Locationcontrollednaturalanywhere Whenprototypeearlyprototype Dataquantitativequalitativeproblems Feedbackmeasures & errors descriptionsproblems Typeappliednaturalisticexpert From:

Evaluation approaches and methods MethodUsability testing Field studies Analytical Observing x x Asking users x x Asking experts x x Testing x Modeling x From:

Evaluation case studies

Evaluation to design a mobile record system for Indian ANMs A field study using observations and interviews to refine the requirements. It would replace a paper system. It had to be easy to use in rural environments. Basic information would be recorded: identify each house-hold, head of house, no. members, age and medical history of members, etc. From:

Could these icons be used with other cultures? For more interesting examples of mobile designs for the developing world see Gary Marsden’s home page: From:

Multiple methods to evaluate the 1984 OMS Early tests of printed scenarios & user guides.  Early simulations of telephone keypad.  An Olympian joined team to provide feedback.  Interviews & demos with Olympians outside US.  Overseas interface tests with friends and family.  Free coffee and donut tests.  Usability tests with 100 participants.  A ‘try to destroy it’ test.  Pre-Olympic field-test at an international event.  Reliability of the system with heavy traffic. From:

Key points  Evaluation & design are closely integrated in user-centered design.  Some of the same techniques are used in evaluation as for establishing requirements but they are used differently (e.g. observation interviews & questionnaires).  Three main evaluation approaches are: usability testing, field studies, and analytical evaluation.  The main methods are:observing, asking users, asking experts, user testing, inspection, and modeling users’ task performance.  Different evaluation approaches and methods are often combined in one study.  Triangulation involves using a combination of techniques to gain different perspectives, or analyzing data using different techniques.  Dealing with constraints is an important skill for evaluators to develop. From:

Chapter 13 An evaluation framework

DECIDE: a framework to guide evaluation 1. Determine the goals 2. Explore the questions 3. Choose the evaluation approach and methods 4. Identify the practical issues 5. Decide how to deal with the ethical issues 6. Evaluate, analyze, interpret, and present the data

Determine the goals Goals determine the scope of evaluation Different goals To make sure that the design met users’ needs To fine tune an interface To examine how mobile tech changes working practices To investigate what makes collaborative computer games engaging

Explore the questions Questions make goals operational Example: Goal: Find out why some people prefer to purchase paper airline tickets rather than e-tickets Questions: What are customers’ attitudes to these e-tickets? Do they trust the system? Is the user interface to the ticketing system poor?

Explore the questions Questions can be further broken down into very specific subquestions Example: Question: Is the user interface to the ticketing system poor? Subquestions: Is the system difficult to navigate? Is the terminology confusing? Is the response time too slow?

Choose the approach and methods Depend on Goals Questions Resources Practical issues Ethical issues

Identify the practical issues Kind of users to be involved target user groups (level of experience, gender, age, etc.) tasks Logistical issues Facilities and equipment How will you do the video recording? How will you record the data when users move quickly from one environment to another? Schedule and budget

Identify the practical issues Kind of expertise needed to perform the evaluation Running user tests requires knowledge of experimental design and video recording Using statistical measures needs knowledge of statistics -> consult a statistician

Decide about ethical issues Develop an informed consent form Participants have a right to: - Know the goals of the study; - Know what will happen to the findings; - Privacy of personal information; - Leave when they wish; - Be treated politely From:

Evaluate, interpret & present data The approach and methods used influence how data is evaluated, interpreted and presented The following need to be considered: - Reliability: can the study be replicated? - Validity: is it measuring what you expected? - Biases: is the process creating biases? - Scope: can the findings be generalized? - Ecological validity: is the environment influencing the findings? i.e. Hawthorn effect From:

Key points  There are many issues to consider before conducting an evaluation study.  These include the goals of the study, the approaches and methods to use, practical issues, ethical issues, and how the data will be collected, analyzed and presented.  The DECIDE framework provides a useful checklist for planning an evaluation study. From: