2 December 2005 Human-Computer Interaction Requirements Analysis and Prototyping Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel beatsigner.com Department of Computer Science Vrije Universiteit Brussel beatsigner.com

Beat Signer - Department of Computer Science - [email protected] 2 October 7, 2024 Requirements Analysis ▪ Update/replace an existing system or develop a totally innovative product ▪ initial set of requirements or requirements produced from scratch ▪ We have to understand ▪ users and their capabilities (who) ▪ user tasks and goals (how) ▪ conditions (context) under which the product will be used (where) ▪ Requirements analysis is often intertwined (iterative activity) with design activities and evaluation activities ▪ Produce a set of stable requirements forming a sound basis to start with the design

Beat Signer - Department of Computer Science - [email protected] 3 October 7, 2024 Interaction Design Lifecycle Model Establishing requirements Designing alternatives Prototyping Evaluating Final product

Beat Signer - Department of Computer Science - [email protected] 4 October 7, 2024 Types of Requirements ▪ Functional requirements ▪ what should the product do (fundamental) ▪ Data requirements ▪ type of data ▪ amount of data ▪ data accuracy ▪ … ▪ Environmental requirements (context of use) ▪ physical environment - lighting, noise, movement, dust, … ▪ social environment - synchronous or asynchronous sharing of data, co-located or distributed, …

Beat Signer - Department of Computer Science - [email protected] 5 October 7, 2024 Types of Requirements … ▪ Environmental requirements (context of use) … ▪ organisational environment - user support, resources for training, how hierarchical is the management, … ▪ technical environment - technologies the product will run on, compatibility, technological limitations, … ▪ User characteristics ▪ key attributes of intended user group - abilities and skills - nationality and educational background - preferences - physical or mental disabilities - level of expertise (novice, expert, casual user, frequent user, …) ▪ user profile consists of a collection of attributes for a typical user

Beat Signer - Department of Computer Science - [email protected] 6 October 7, 2024 Types of Requirements … ▪ Usability goals ▪ define measures for agreed usability goals - objective measure of a user’s performance - measuring a user’s perceptions of the interaction ▪ User experience goals

Beat Signer - Department of Computer Science - [email protected] 7 October 7, 2024 Exercise: Types of Requirements ▪ Interactive product to pay for food (by credit card) in a university’s self-service cafeteria ▪ Interactive product to control the functioning of a nuclear power plant

Beat Signer - Department of Computer Science - [email protected] 8 October 7, 2024 Data Gathering for Requirements ▪ Different forms of data gathering to get information about tasks and associated goals as well as the context of use ▪ interviews ▪ focus groups ▪ questionnaires ▪ direct observation ▪ indirect observation ▪ studying documentation ▪ researching similar products

Beat Signer - Department of Computer Science - [email protected] 9 October 7, 2024 Interviews ▪ Open-ended or unstructured interview ▪ good to get first impressions (exploratory) ▪ rich data with deep understanding of the topic ▪ time consuming to analyse ▪ Structured interview ▪ closed questions with predefined set of alternative answers ▪ questions should be worded the same and asked in the same order for each participant ▪ Semi-structured interview ▪ combination of closed and open questions ▪ e.g.start with a closed question followed by open question(s)

Beat Signer - Department of Computer Science - [email protected] 10 October 7, 2024 Interviews … ▪ Pilot test ▪ good to test the interview with research colleagues and extra participants ▪ Recording of responses ▪ written notes ▪ audio or video recordings - more details but have to be transcribed later ▪ think about tools that directly link written notes to record- ings (e.g.Smartpen) Livescribe Echo Smartpen

Beat Signer - Department of Computer Science - [email protected] 11 October 7, 2024 Interviews … ▪ Data analysis ▪ closed questions - count frequency of each answer and perform statistical tests to confirm validity ▪ open questions - transcription of recordings or only refer to recordings for details? - qualitative methods for coding data (e.g. via tools such as MAXQDA) MAXQDA

Beat Signer - Department of Computer Science - [email protected] 12 October 7, 2024 Focus Groups ▪ Trained facilitator interviews groups of 3–10 people ▪ Selection of participants ▪ homogeneous or heterogeneous (background)? ▪ do participants know each other? ▪ … ▪ Can be conducted in special requirements workshops ▪ Individuals develop opinions within a social context by talking to each other ▪ Investigates community issues rather than individual experiences ▪ group dynamics can limit the generalisation of results

Beat Signer - Department of Computer Science - [email protected] 13 October 7, 2024 Questionnaires/Surveys ▪ Can ask closed as well as open questions ▪ “Did you like the design of the homepage?” vs.“What do you think about the design of the homepage?” ▪ Might be used for initial responses that can then be used for selecting people to be interviewed ▪ Different formats of questions and responses ▪ checkboxes - e.g. male or female ▪ ranges - e.g. age: 0–17, 18–29, 30–39, 40–49 and 50 and older - avoid any overlaps

Beat Signer - Department of Computer Science - [email protected] 14 October 7, 2024 Questionnaires/Surveys … ▪ rating - Likert scale • how many points on the scale? even or odd number of points? • place negative end of the scale first (e.g.strongly disagree) and the positive last - semantic differential scale • user is asked to place a cross in a number of positions between two extremes • extremes represented by two adjectives (e.g.attractive vs. ugly) ▪ Usually small number of participants (less than 20) in interaction design questionnaires with high return rates ▪ Online questionnaires ▪ email or web-based questionnaires

Beat Signer - Department of Computer Science - [email protected] 15 October 7, 2024 Online Survey Tools Qualtrics

Beat Signer - Department of Computer Science - [email protected] 16 October 7, 2024 Direct and Indirect Observation ▪ Direct observation (field study) of participants in their natural setting (e.g.via ethnographic studies) ▪ understand the nature of the tasks and the context in which they are performed ▪ Indirect observation of users ▪ diaries ▪ interaction logging (software) - e.g. for evolving products

Beat Signer - Department of Computer Science - [email protected] 17 October 7, 2024 Studying Documentation and Products ▪ Studying of manuals and other documentation ▪ good for background information on the user’s work ▪ Researching of similar products might help to trigger some requirements ▪ e.g.investigate desktop image editing software when designing an image editor for mobile devices

Beat Signer - Department of Computer Science - [email protected] 18 October 7, 2024 Data Gathering Guidelines for Requirements ▪ Focus on identifying the stakeholders’ needs ▪ Involve all the stakeholder groups ▪ not only direct users ▪ Involve more than one representative from each stakeholder group ▪ Support iterative requirements activity with descriptions and prototypes

Beat Signer - Department of Computer Science - [email protected] 19 October 7, 2024 Data Analysis, Interpretation and Presentation ▪ Formats such as the Volere requirements shell highlight the information to look for ▪ good first step in data analysis for requirements ▪ Functional requirements ▪ class diagrams ▪ state charts ▪ sequence diagrams ▪ … ▪ Data requirements ▪ entity-relationship (ER) diagrams ▪ …

Beat Signer - Department of Computer Science - [email protected] 20 October 7, 2024 Volere Requirements Template

Beat Signer - Department of Computer Science - [email protected] 21 October 7, 2024 Task Description ▪ More recently task descriptions are used throughout the development ▪ from early requirements activities, through prototyping and evaluation ▪ Techniques with a user-centred focus on describing users’ goals and tasks ▪ scenarios ▪ use cases ▪ …

Beat Signer - Department of Computer Science - [email protected] 22 October 7, 2024 Scenarios ▪ Informal narrative description (stories) ▪ Scenarios by stakeholders often first step in establishing requirements ▪ level of detail varies depending on where in the development process a scenario is being used ▪ emphasise the tasks, context as well as usability and user experience goals during the requirements activity ▪ Often generated during workshops, interviews or brainstorming sessions ▪ not intended to capture full set of requirements (one perspective) ▪ can also be used to describe situations envisioned in the future

Beat Signer - Department of Computer Science - [email protected] 23 October 7, 2024 Use Cases ▪ Focus on user goals (like scenario) but emphasis is on user-system interaction rather than on the user’s task itself ▪ A use case diagram consists of actors and the use cases these actors are associated with ▪ use case consists of a textual description of a normal course as well as some alternative courses Withdraw Cash 1. System asks the user to enter their card 2. User enters the card 3. System displays options 4. User chooses the option to withdraw money 5. … 3. If the card is invalid: 3.1. System displays an error message 3.2. System returns the card 3.3. System returns to step 1

Beat Signer - Department of Computer Science - [email protected] 24 October 7, 2024 Conceptual Design ▪ Transforms requirements into a conceptual model ▪ what can people do with a product? - emerges from functional requirements ▪ what concepts are needed to understand how to interact with the product? - depends on a variety of issues • who will be the users and what kind of interface will be used • terminology and application domain • … ▪ Key guiding principles of conceptual design ▪ 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 and iterate

Beat Signer - Department of Computer Science - [email protected] 25 October 7, 2024 Personas ▪ Descriptions (conceptual model) of typical users ▪ brings user profiles to life ▪ consists of a name and often a photo ▪ unique set of goals related to the product ▪ user’s skills, attitudes, tasks and environment ▪ Details help designers to see personas as real potential users

Beat Signer - Department of Computer Science - [email protected] 26 October 7, 2024 Brainstorming for Innovation ▪ Generate ideas for alternative designs and for suggesting innovative and better products ▪ Factors for requirements brainstorming ▪ participants should know the user’s goals to be supported ▪ no ideas should be criticised or debated ▪ include participants from a wide range of disciplines ▪ do not ban silly stuff (can often turn into useful requirements) ▪ use catalysts (e.g.earlier ideas) for further inspiration ▪ keep records and possibly number the ideas (for reference) ▪ user warm-up exercises - e.g. IDEO’s TechBox idea mentioned in previous lecture

Beat Signer - Department of Computer Science - [email protected] 27 October 7, 2024 Physical Design ▪ Considers details of the product including ▪ visual appearance including colour and graphics or sounds ▪ icon design, button design, menu design, interface layout ▪ choice of interaction devices ▪ No rigid border between conceptual and physical design ▪ iterative process where conceptual design decisions might have to be revisited during physical design ▪ User characteristics have a significant impact on physical design ▪ accessibility - good design for all products to include accessibility features ▪ national culture - cross-cultural design includes the use of appropriate language(s), colours, ...

Beat Signer - Department of Computer Science - [email protected] 28 October 7, 2024 Using Scenarios in Design ▪ Scenarios play different roles in the design process ▪ as basis for the overall design - basis for storyboard creation - script for prototype evaluation ▪ for the technical implementation ▪ as a means of cooperation within design teams ▪ as a means of cooperation across professions' boundaries - basis of communication in a multidisciplinary team ▪ The most positive and negative consequences of a particular proposed design might be captured by plus and minus scenarios

Beat Signer - Department of Computer Science - [email protected] 29 October 7, 2024 Prototyping ▪ “It is often said that users can’t tell you what they want, but when they see something and get to use it, they soon know what they don’t want.” ▪ A prototype is a manifestation of design that allows stakeholders to interact with it and explore its suitability ▪ paper-based storyboard or outline of a screen ▪ electronic picture or video simulation of a task ▪ 3D cardboard mock-up or object printed with a 3D printer ▪ piece of software ▪ … ▪ Prototypes help to choose between design alternatives ▪ Building a prototype encourages reflection in design

Beat Signer - Department of Computer Science - [email protected] 30 October 7, 2024 Low-Fidelity Prototyping ▪ Low-fidelity prototypes often do not look very much like final products ▪ different materials ▪ Simple, cheap and quick to modify ▪ support exploration of alternative designs ▪ Storyboarding ▪ often used in combination with a scenario PalmPilot prototype, Jeff Hawkins, 1995

Beat Signer - Department of Computer Science - [email protected] 31 October 7, 2024 Low-Fidelity Prototyping … ▪ Sketching ▪ hand-drawn sketches containing computer components, icons, dialogue boxes, … ▪ Prototyping with index cards ▪ each card represents one screen or one element of a task ▪ Wizard of Oz experiment ▪ assumes that one has a software-based prototype ▪ human operator (wizard) simulates the software’s response to the user ▪ PowerPoint ▪ balances the provisionality of paper with the polished appearance of software prototypes - characteristics of low and high fidelity

Beat Signer - Department of Computer Science - [email protected] 32 October 7, 2024 Paper-based Wireframes Diagram Description automatically generated Martha Eierdanz, https://martha-eierdanz.com/paper-prototyping-in-practice

Beat Signer - Department of Computer Science - [email protected] 33 October 7, 2024 Paper-based Prototyping A picture containing qr code Description automatically generated Liz Thomas, https://pbs.twimg.com/media/CaznpC_UcAAQGg4?format=jpg

Beat Signer - Department of Computer Science - [email protected] 34 October 7, 2024 High-Fidelity Prototyping ▪ Prototypes look much more like final product ▪ Growing interest in modifying and integrating existing components ▪ tinkering (hardware) ▪ component-based software engineering (software) ▪ Advantages ▪ look and feel of final product ▪ often fully interactive ▪ Disadvantages ▪ expensive and time-consuming to develop ▪ users comment on superficial aspects ▪ developers are reluctant to change something

Beat Signer - Department of Computer Science - [email protected] 35 October 7, 2024 Mid-Fidelity Prototyping Figma

Beat Signer - Department of Computer Science - [email protected] 36 October 7, 2024 Compromises in Prototyping ▪ Often the breadth of functionality is traded against the depth of functionality ▪ horizontal prototyping - provides a wide range of functions but with little detail ▪ vertical prototyping - provides a lot of details for only a few functions ▪ Throwaway prototyping ▪ final product is built from scratch ▪ no testing necessary along the way ▪ Evolutionary prototyping ▪ prototype evolves into the final product ▪ rigorous testing necessary along the way

Beat Signer - Department of Computer Science - [email protected] 37 October 7, 2024 Physical Prototypes ▪ Hardware toolkits for physical prototyping ▪ Phidgets hardware building blocks ▪ Arduino open source electronics platform ▪ M5Stack - ESP32 microcontroller - stackable modules and various sensors and actuators ▪ …

Beat Signer - Department of Computer Science - [email protected] 38 October 7, 2024 Exercise 2 ▪ Requirements Analysis

Beat Signer - Department of Computer Science - [email protected] 39 October 7, 2024 Further Reading ▪ Parts of this lecture are based on the Interaction Design: Beyond Human-Computer Interaction book ▪ chapter 8 - Data Gathering ▪ chapter 11 - Discovering Requirements ▪ chapter 12 - Design, Prototyping and Construction

Beat Signer - Department of Computer Science - [email protected] 40 October 7, 2024 Further Reading … ▪ Parts of this lecture are based on the Research Methods in Human-Computer Interaction book ▪ chapter 5 - Surveys ▪ chapter 8 - Interviews and Focus Groups

Beat Signer - Department of Computer Science - [email protected] 41 October 7, 2024 References ▪ Interaction Design: Beyond Human-Computer Interaction, Yvonne Rogers, Helen Sharp and Jenny Preece, Wiley (6th edition), April 2023 ISBN-13: 978-1119901099 Research Methods in Human-Computer Interaction, Jonathan Lazar, Jinjuan Heidi Feng and Harry Hochheiser, Morgan Kaufmann (2nd edition), May 2019, ISBN-13: 978-0128053904 Prototyping for Designers: Developing the Best Digital and Physical Products, Kathryn McElroy, O'Reilly Media (1st edition), January 2017 ISBN-13: 978-1491954089

Beat Signer - Department of Computer Science - [email protected] 42 October 7, 2024 References … ▪ Mastering the Requirements Process: Getting Requirements Right, S. Robertson and J. Robertson, Addison-Wesley Professional, 2012 ▪ Volere Requirements Specification Template ▪ https://www.volere.org/templates/ ▪ Phidgets Inc. ▪ https://www.phidgets.com ▪ Arduino ▪ https://www.arduino.cc ▪ M5Stack ▪ https://m5stack.com

Beat Signer - Department of Computer Science - [email protected] 43 October 7, 2024 References ... ▪ How to Prototype in Figma ▪ https://www.youtube.com/watch?v=PSUTO1eZkmA ▪ MAXQDA ▪ https://www.maxqda.com ▪ https://softweb.vub.be ▪ Qualtrics XM ▪ https://www.qualtrics.com ▪ https://softweb.vub.be

2 December 2005 Next Lecture Human Perception and Cognition