Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Requirements Analysis and Prototyping - Lecture 3 - Human-Computer Interaction (1023841ANR)

Requirements Analysis and Prototyping - Lecture 3 - Human-Computer Interaction (1023841ANR)

This lecture forms part of the course Human-Computer Interaction given at the Vrije Universiteit Brussel.

Beat Signer
PRO

October 13, 2023
Tweet

More Decks by Beat Signer

Other Decks in Education

Transcript

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

    View Slide

  2. Beat Signer - Department of Computer Science - [email protected] 2
    October 13, 2023
    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

    View Slide

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

    View Slide

  4. Beat Signer - Department of Computer Science - [email protected] 4
    October 13, 2023
    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, …

    View Slide

  5. Beat Signer - Department of Computer Science - [email protected] 5
    October 13, 2023
    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

    View Slide

  6. Beat Signer - Department of Computer Science - [email protected] 6
    October 13, 2023
    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

    View Slide

  7. Beat Signer - Department of Computer Science - [email protected] 7
    October 13, 2023
    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

    View Slide

  8. Beat Signer - Department of Computer Science - [email protected] 8
    October 13, 2023
    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

    View Slide

  9. Beat Signer - Department of Computer Science - [email protected] 9
    October 13, 2023
    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)

    View Slide

  10. Beat Signer - Department of Computer Science - [email protected] 10
    October 13, 2023
    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
    recordings
    Livescribe Echo Smartpen

    View Slide

  11. Beat Signer - Department of Computer Science - [email protected] 11
    October 13, 2023
    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

    View Slide

  12. Beat Signer - Department of Computer Science - [email protected] 12
    October 13, 2023
    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

    View Slide

  13. Beat Signer - Department of Computer Science - [email protected] 13
    October 13, 2023
    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

    View Slide

  14. Beat Signer - Department of Computer Science - [email protected] 14
    October 13, 2023
    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

    View Slide

  15. Beat Signer - Department of Computer Science - [email protected] 15
    October 13, 2023
    Online Survey Tools
    Qualtrics

    View Slide

  16. Beat Signer - Department of Computer Science - [email protected] 16
    October 13, 2023
    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

    View Slide

  17. Beat Signer - Department of Computer Science - [email protected] 17
    October 13, 2023
    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

    View Slide

  18. Beat Signer - Department of Computer Science - [email protected] 18
    October 13, 2023
    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

    View Slide

  19. Beat Signer - Department of Computer Science - [email protected] 19
    October 13, 2023
    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
    ▪ …

    View Slide

  20. Beat Signer - Department of Computer Science - [email protected] 20
    October 13, 2023
    Volere Requirements Shell

    View Slide

  21. Beat Signer - Department of Computer Science - [email protected] 21
    October 13, 2023
    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
    ▪ …

    View Slide

  22. Beat Signer - Department of Computer Science - [email protected] 22
    October 13, 2023
    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

    View Slide

  23. Beat Signer - Department of Computer Science - [email protected] 23
    October 13, 2023
    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

    View Slide

  24. Beat Signer - Department of Computer Science - [email protected] 24
    October 13, 2023
    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

    View Slide

  25. Beat Signer - Department of Computer Science - [email protected] 25
    October 13, 2023
    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

    View Slide

  26. Beat Signer - Department of Computer Science - [email protected] 26
    October 13, 2023
    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

    View Slide

  27. Beat Signer - Department of Computer Science - [email protected] 27
    October 13, 2023
    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, ...

    View Slide

  28. Beat Signer - Department of Computer Science - [email protected] 28
    October 13, 2023
    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

    View Slide

  29. Beat Signer - Department of Computer Science - [email protected] 29
    October 13, 2023
    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

    View Slide

  30. Beat Signer - Department of Computer Science - [email protected] 30
    October 13, 2023
    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

    View Slide

  31. Beat Signer - Department of Computer Science - [email protected] 31
    October 13, 2023
    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

    View Slide

  32. Beat Signer - Department of Computer Science - [email protected] 32
    October 13, 2023
    Paper-based Wireframes
    Martha Eierdanz, https://martha-eierdanz.com/paper-prototyping-in-practice

    View Slide

  33. Beat Signer - Department of Computer Science - [email protected] 33
    October 13, 2023
    Paper-based Prototyping
    Liz Thomas, https://pbs.twimg.com/media/CaznpC_UcAAQGg4?format=jpg

    View Slide

  34. Beat Signer - Department of Computer Science - [email protected] 34
    October 13, 2023
    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

    View Slide

  35. Beat Signer - Department of Computer Science - [email protected] 35
    October 13, 2023
    Mid-Fidelity Prototyping
    Figma

    View Slide

  36. Beat Signer - Department of Computer Science - [email protected] 36
    October 13, 2023
    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

    View Slide

  37. Beat Signer - Department of Computer Science - [email protected] 37
    October 13, 2023
    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
    ▪ …

    View Slide

  38. Beat Signer - Department of Computer Science - [email protected] 38
    October 13, 2023
    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

    View Slide

  39. Beat Signer - Department of Computer Science - [email protected] 39
    October 13, 2023
    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

    View Slide

  40. Beat Signer - Department of Computer Science - [email protected] 40
    October 13, 2023
    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

    View Slide

  41. Beat Signer - Department of Computer Science - [email protected] 41
    October 13, 2023
    References …
    ▪ Mastering the Requirements Process: Getting
    Requirements Right, S. Robertson and J. Robertson,
    Addison-Wesley Professional, 2012
    ▪ Phidgets Inc.
    ▪ https://www.phidgets.com
    ▪ Arduino
    ▪ https://www.arduino.cc
    ▪ M5Stack
    ▪ https://m5stack.com
    ▪ How to Prototype in Figma
    ▪ https://www.youtube.com/watch?v=PSUTO1eZkmA

    View Slide

  42. Beat Signer - Department of Computer Science - [email protected] 42
    October 13, 2023
    References …
    ▪ Mastering the Requirements Process: Getting
    Requirements Right, S. Robertson and J. Robertson,
    Addison-Wesley Professional, 2012
    ▪ Phidgets Inc.
    ▪ https://www.phidgets.com
    ▪ Arduino
    ▪ https://www.arduino.cc
    ▪ M5Stack
    ▪ https://m5stack.com
    ▪ How to Prototype in Figma
    ▪ https://www.youtube.com/watch?v=PSUTO1eZkmA

    View Slide

  43. Beat Signer - Department of Computer Science - [email protected] 43
    October 13, 2023
    References ...
    ▪ MAXQDA
    ▪ https://www.maxqda.com
    ▪ https://softweb.vub.be
    ▪ Qualtrics XM
    ▪ https://www.qualtrics.com
    ▪ https://softweb.vub.be

    View Slide

  44. 2 December 2005
    Next Lecture
    Human Perception and Cognition

    View Slide