Overview of Interaction Design
Definition
Designing interactive products to support the way people communicate and interact in their everyday and working lives.
1) discovering requirements, designing to fulfil requirements, producing prototypes and evaluating them. 2)Focused on users and their goals 3)Involves trade-offs to balance conflicting requirements
key:Generating alternatives and choosing
Core characteristics
1. Users should be involved
importance:
1）Understanding of users’ goals leading to better products
2）Expectation management (使沟通真实化)
3）Ownership： i.Make the users active stakeholders ii.More likely to forgive or accept problems iii.make a big difference in acceptance and success
Degree:
- Member of design team: full time.part time, Participatory design(all stakeholders in early stage)
- Face to face (roup or individual)
- Online contributions(thousands of users)
- A after product release
2. Specific usability and user experience goals to be identified at the beginning of the project
3. Iteration is needed through the core activities
Usability and user experience
usability(能用，Objective): effectiveness, efficiency, safety, utility, learnability, memorability
user experience(享用,Subjective): Enjoyable, Motivating, Experiencing flow, Engaging, Satisfying
The Process of Interaction Design***
Interaction design lifecycle model*
Four basic activities：
1. Discovering requirements for the interactive product.
2. Designing alternatives that meet those requirements.
3. Prototyping the alternative designs so that they can be communicated and assessed.
4. Evaluating the product and the user experience it offers throughout the process.
Double diamond of design*
explore&articulating the problem space
Others: Google design sprints,Research in the wild
Practical issues with interaction design***
User-centered approach principle:
1. Early focus on users and tasks：tasks and goals, behaviour and context(user, activity, environment) of use，characteristics，consulted（从头到尾),
2. Empirical measurement,行为观察和记录
3. Iterative design: when problems are found in user testing, fix them and carry out more tests
User/stakeholders
User:everybody Stakeholders:can influence or be influenced by the success or failure of a project
needs: goals, usability, and user experience goals,
Requirements
A statement about an intended product that specifies what it is expected to do or how it will perform
Describing requirements
purpose:problem space,what will be developed
1) Atomic requirement shell
2) User stories Format:As a <role>, I want <behavior> so that <benefit>
Kinds：Functional(sys should do)/Non-functional(characteristics)
type: functional/ data/ environment/ user characteristics/ usability goal/ user experience goals
Requirement gathering techniques***
Interviews, observations, questionnaires
Contextual Inquiry
4 principle: Context,Partnership,Interpretation,Focus
Concept: 1)Joy of life:Accomplish,Connection ,Identity,Sensation 2)Joy of use: Direct in action, the hassle factor,learning delta
interview 4 parts: Overview, transition, Main interview, Wrap-up/ then, interpretation, contextual models
Brainstorming: a wide range of disciplines, Keep records, Sharpen the focus
Studying documentation
Researching similar products
Bringing requirements to life***
User stories
Persona 用户画像
Rich descriptions of typical users
1) Capture a set of user characteristics (user profile),Develop a small set of personas with one primary
Scenario
An informal narrative story
Capturing interactions
Use cases
➔ Focus on functional requirements and capture interaction
Design
Accessibility and inclusiveness
Accessibility: the extent to which an interactive product is accessible by as many people as possible(e.g disabilities: Sensory, Physical, Cognitive; Permanent,Temporary, Situational )
Inclusiveness: making products and services that accommodate the widest possible number of people
Design principles***
inform:
➔ Generalizable abstractions for thinking about different aspects of design
➔ The do’s and don'ts of interaction design
➔ What to provide and what not to provide at the interface
➔ Derived from a mix of theory-based knowledge/experience/common sense
考试一般会举到三个...
e.g
Visibility
G:Car Dashboard B:Hidden Door Handles:
Feedback
Sending information back to the user about what has been done e.g指示灯
G: Microwave Beep: Microwaves that beep when the cooking cycle is complete provide clear feedback to the user that the task is done.
B:Elevator Buttons without Indicators: Some elevator buttons do not light up or provide any feedback when pressed, leaving users uncertain if the button press was registered.
Constraints
Restricting the possible actions that can be performed,reduce mistakes e.g 插头
G: USB Port Design B:Overly Complex Remote Controls
Consistency
Design interfaces to have similar operations and use similar elements for similar tasks.
easier to learn and use e.g 图标设置
Internal consistency refers to designing operations to behave the same within an application
External consistency refers to designing operations, interfaces, and so on to be the same across applications and devices
Aesthetic consistency e.g logo
Functional consistency :mean/action → learnability
G：Microsoft Office Suite: Applications within the Office suite (Word, Excel, PowerPoint) maintain consistent menu layouts and toolbars, enabling users to transfer their knowledge across different programs effortlessly.
B:Inconsistent Website Buttons: Websites that use different styles (shapes, colors, positions) for buttons across various pages force users to re-learn how to interact with each page, increasing the cognitive load.
Affordance
Refers to an attribute of an object that allows people to know how to use it.
perceived’ affordances: mapping(Relationship between controls and their effects, e.g操作图标), virtual affordances
G： Door Push/Pull Signs B:Smooth, Unlabeled Buttons
Shneiderman's 8 golden rules
(可删减)
1. Strive for consistency
Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent commands should be employed throughout. Workflows/Processes/Functionality/Appearance/Terminology
2. Enable frequent users to use shortcuts e.g 快捷键
3. Offer informative feedback
For every operator action, there should be some system feedback. e.g 进度条
4. Design dialog to yield closure
Sequence of actions should be organized into groups with a beginning, middle, and end.
5. Offer simple error handling
As much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect the error and offer simple, comprehensible mechanism for handling the error
6. Permit easy traversal of actions：undo,versions
7. Support internal locus of control
Design the system to make users the initiators of actions rather than the responders,感觉主要用于对话框的设置
8. Reduce short-term memory load
Design alternatives
helps identify better designs, Balancing constraints and trade-offs
from: research and synthesis, Cross-fertilization of ideas,generate different designs, Product evolution, Seek inspiration
choose:
1. Interaction design focuses on externally-visible and measurable behavior
2. Technical feasibility
3. Evaluation with users and stakeholders
4. A/B Testing: inform the choice between alternatives
5. Quality thresholds
Interaction types***
interaction: description of what the user is doing when interacting with a system
interface: The kind of interface used to support the interaction
Instructing 指令型交互
用户通过命令或指示直接与系统进行交互.明确的输入和输出，用户告诉系统做什么，系统执行操作并反馈结果。
good: repetitive tasks, e.g spell-checking
- Where users instruct a system and tell it what to do(e.g Tell the time, print a file, or save a file )
- The main benefit is that instructing supports quick and efficient interaction(Good for repetitive kinds of actions performed on multiple objects)
e.g command line, word processors, and vending machines
Conversing 对话型交互
用户与系统通过类似人类对话的方式进行互动,互动是双向和连续的，系统能够理解用户的自然语言输入并做出相应的回答
good: services
➔ Underlying model of having a conversation with another human
➔ Ranges from simple voice recognition menu-driven systems to more complex ‘natural language’ dialogs
E.g virtual agents, chatbots, toys, and pet robots
pro: novices, to interact with a familiar system ; con: Misunderstandings
Manipulating 操控型交互
用户通过直接操作界面元素来与系统互动,用户直接控制界面元素，交互通常是即时的、直观的
good:‘doing’ types of tasks, e.g photoshop
➔ Exploits users’ knowledge of how they move and manipulate in the physical world
➔ Involves dragging, selecting, opening, closing and zooming actions on virtual objects, also can involve actions using physical controllers (e.g., Nintendo Switch)
➔ Tagged physical objects (e.g., balls) that are manipulated in a physical world result in physical/digital events (e.g., animation being played)
Direct Manipulation (DM)
⇾ Continuous representation ⇾ Rapid reversible actions with immediate feedback on object
of interest ⇾ Physical actions and button pressing instead of issuing
e.g(Drag and drop to move files)
pro: quickly learn/perform tasks rapidly/ retain concepts over time/Rarely need error messages/ if actions align with goals and adjust if necessary/ Reduced anxiety/confidence
con：too literally/slower/repetitive task/error(e.g drag a number)
Exploring 探索型交互
用户通过浏览和导航来发现和了解系统的信息或功能, 用户在没有明确指示的情况下自由探索，发现系统的内容或功能
Involves moving through virtual or physical environments
Responding响应型交互
系统主动向用户提供信息或请求用户的反馈，用户对此进行响应.系统的行为触发用户的响应，交互是由系统启动的，用户做出相应的反应
➔ System takes the initiative to alert user to something that it “thinks” is of interest
➔ Automatic system response without any requests made by the user
e.g notification/ running milestone
Hybrid conceptual models are good for supporting multiple ways of carrying out the same actions
Conceptualizing design***概念化设计
Conceptualize what the proposed product will do
1) Understanding the problem space
2) Being clear about your assumptions and claims
3) Specifying how the proposed design will support users
Why
To scrutinize vague ideas and assumptions about the benefits of the proposed product in terms of their feasibility(可行性审查)
- write down assumptions and claims（自信过头） / - defend and support /-Iteratively work out improvement
-Ask questions, reconsider assumptions, and articulate concerns
Benefits
- Orientation - Open-minded - Common ground（共同兴趣点）
Conceptual model
problem space → design space
a high-level description of how a system is organized and operates
What users can do with it and the concepts they need to understand how to interact with it
Core components
1) Metaphors and analogies that convey to people
2) Concepts to which people are exposed to through the product
3) Relationship and mappings between these concepts
First steps -users be doing /metaphor/interaction modes and styles
Obvious and simple,intuitive （直观）to use
Interface metaphor
Interface designed to be similar to a physical entity but also has own properties
Exploit user’s familiar knowledge, helping them to understand ‘the unfamiliar’
Benefits: learning new systems easier/understand the underlying conceptual model/ innovative/more accessible to a greater diversity of users
Problems: Break conventional and cultural rules/Conflicts with design principles...
Paradigms, visions, theories, models, and frameworks
Provide ways of framing design and research
Paradigm 范式
Inspiration for a conceptual model. General approach adopted by a community for carrying out research. (e.g Pervasive computing, Wearable computing)
visions 愿景
A driving force that frames research and development, future scenario
theories 理论
Explanation of a phenomenon, to predict
models 模型
A simplification of an HCI phenomenon
frameworks 框架
Set of interrelated concepts and-or specific questions for ‘what to look for’
20 interface types***
1. Command 2. Graphical（Window, Menu, Icon） 3. Multimedia 4. Virtual reality 5. Web 6. Mobile 7. Appliance 8. Voice 9. Pen 10. Touch 11. Gesture 12. Haptic 13. Multimodal 14. Shareable 15. Tangible 16. Augmented reality 17. Wearables 18. Robots and drones 19. Brain–computer interaction 20. Smart
Prototyping
Reasons/goals
Prototypes answer questions, and support designers in choosing between alternatives
Understanding: avoid false assumptions,understand 1）design alternatives, 2）strategy(Intangible → tangible) 3) user-centred processes(build empathy: empathy map, user journey map)
Communication: increase the efficiency in making decision(➔ Same “language” ➔ Different stakeholder ➔ No ”maybe” )
Test & reflection: examine and improve the current design, test and reflect on Hypotheses and assumptions and Other’s comments. present and promote the idea to users/peers.
Fidelity
Definition
The fidelity of a prototype refers to how it conveys the look-and-feel of the final product
Advantages
Select the right level of fidelity in prototyping is the key to the success of design process.
Low-fidelity
unlike the final medium. quick, cheap and easily changed
➔ sketches of screens, task sequences, etc.
➔ ’Post-it’ notes
➔ Storyboards(scenarios,a series of sketches, early in design )
➔ ’Wizard-of-Oz’ (The user thinks they are interacting with a computer, but a developer is responding to output rather than the system.)
decrease prone to over-engineering a prototype prematurely
High-fidelity
expect to be in the final product.
Compromise: ‘horizontal’: provide a wide range of functions,but with little detail; provide a lot of detail for only a few functions. costs and trade-offs
Level of fidelity
Continuum
no clear separations!
Five dimensions
Visual,Interaction, Breadth, Depth, Content
Processes
choose: based on your purpose, audience, and assumptions.
Minimum viable product（最小可行产品）
A product with enough features to attract early-adopter customers and validate a product idea early in the product development cycle.
构建一个包含最小功能集的产品快速推向市场，以便测试核心假设并获取用户反馈。（high value & low effort）
step 1)Understand your users and identify the problem 2)Write down user flow 3)Use the prototype to optimize the user flow 4)Test, refine, iterate
Exploration
thinking rather than doing
Key points:1)Find the right issue to solve 2)Find solutions 3)Identify where we are now
steps: 1) Brainstorming about issues/solutions 2)Clustering and categorization(Identify the directions/main issues/topics, 求同存异) 3)Priority check
Specific audience
Focusing on specific audience makes you maintain a smooth communication with different stakeholder.
steps
1) Identify your audience, purpose, and fidelity+2)tools
⇾ Designer – feedback, support, criticism, idea
⇾ Sponsor - approval, progress, resource
⇾ Customer – contract, purchase
⇾ Developer – feasibility, coding, technical
2)Tools
Designer – No need for the whole user flow, Specific functions
Sponsor, Customer - Better to provide the whole user flow, A “complete” experience for the product
Developer - Confirmed assumptions with no implementationProvide details
3)Present:good story, bridge
Assumptions
Focusing on assumptions makes you to improve your ideas and products. The assumptions could be either abstract or concrete.
steps:
⇾ Understand your audience, issues, and assumptions
⇾ Fidelity
⇾ Purpose of the testing(Tool: Clicks or actions:input , A/B test:alternatives , Procedures:flow)(Plan: Purpose and assumptions, User groups, questions, tasks)
⇾ Make and test(Do nothing in guiding the user, Ask questions after the testing, Find new possibilities for your product and iterate)
Digital prototyping
There is a series characteristics about digital product, and these features are mostly built around the screen interactions(screen, Responsive design, Interaction types, Accessibility, Animation)
Physical prototyping
Compared with digital prototyping, the key to physical prototyping focuses more on the(➔ Electronic technology,Compatibility, Material and tactility)
Evaluation
Week5
Heuristic evaluations and walkthroughs
Nielsen’s heuristics
1. Visibility of system status (informed, feed back, e.g 音量调节)
2. Match between system and real world (the users' language)
3. User control and freedom (leave the unwanted action )
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall（minimize memory, e.g search history）
7. Flexibility and efficiency of use (tailor frequent actions.e.g short cuts)
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, recover from errors (indicate problem, suggest solution)
10. Help and documentation
Heuristic evaluation - 依赖专家
1) Briefing session - tell expert to do
2) evaluation - get a feel, focus
3) Debriefing session
pro:Few ethical and practical issues
con: find experts,Experts have biases, miss important problems, trivial problems
Cognitive walkthroughs 认知穿行
认知穿行是一种以任务为导向的评估技术，模拟用户在完成特定任务时的思维过程。评审员通过逐步分析用户完成任务时的每一步操作，预测可能遇到的问题和困难。
Simulating how users go about problem-solving at each step in a human-computer interaction
Focus on ease of learning
procedure:
1. Preparation: 1) characteristics of typical users, 2) sample tasks, 3) prototype to sequence of the actions
2. A designer and one or more researchers come together to do the analysis.
3. The researchers walk through the action sequences for each task, placing it within the context of a typical scenario. As they do this, they try to answer three questions.
4. Compile a record of critical information – assumptions, notes of issues and design changes, etc.
5. (Check with real users and) Revise the design to fix the problems presented.
Three questions?
Questionnaire
➔ Questions can be closed-ended or open-ended
design:
question order. /populations./ clear instructions./ Avoid very long questions. / positive, negative or mixed/ keeping the questionnaire compact.
good response：
the purpose of study is clear/ anonymity/ well designed/ short version / Follow-up/ incentive/ mail: a stamped, addressed envelope
pro，con
Interview
➔ Unstructured: Not directed by a script. Rich but not replicable.
➔ Structured: Tightly scripted, often like a questionnaire. Replicable but may lack richness.
➔ Semi-structured: Guided by a script, but interesting issues can be explored in more depth. Can provide a good balance between richness and replicability.
➔ Focus groups: A group interview
type:closed questions/open questions
running:Introduction, Warm-up,Main body,A cool-off period, Closure
pro: deep, flexible
con: skill/ Time and resource/ analysis/ recall required
enrich: prototype, scenario
Choosing and combining techniques
Five key issues
1. Setting goals -what, how
2. Identifying participants -whom
3. Relationship with participants -professional -Informed consent
4. Triangulation 三角测量 -more than one perspective -quantitative experiment/qualitive interview
5.pilot studies
Week8
Why, what, where and when to evaluate
Iterative design and evaluation is a continuous process.
➔ Why: To check users’ requirements and confirm that users can utilize the product and that they like it
➔ What: A conceptual model, early and subsequent prototypes of a new system, more complete prototypes, and a prototype to compare with competitors’ products
➔ Where: In natural, in-the-wild, and laboratory settings
➔ When: Throughout design; finished products can be evaluated to collect information to inform new products
Different types of evaluation methods
measurements
based on human performance (task-based):Time performance, Task correctness / accuracy, Error rate, Time to learn and retention over time, User satisfaction
settings
1. Controlled settings that directly involve users
2. Natural settings involving users (little or no control )
3. Any setting that doesn’t directly involve users
Methods
Practical challenges of evaluation
Participants’ consent（知情）
Interpreting data: Reliability, Validity, Ecological validity, Biases, Scope
Usability testing
小规模不可复制
➔ Controlled settings
➔ Users are observed and timed
➔ Data is recorded on video, and key presses are logged
➔ The data is used to calculate performance times and to identify and explain errors
➔ User satisfaction is evaluated using questionnaires and interviews
➔ Field observations may be used to provide contextual understanding
➔ Involves recording performance of typical users doing typical tasks
Quantitative performance measures
conditions ➔ Test conditions are the same for every participant
how many:5-10 people
Experimental design
大规模可复制
➔ Test hypothesis
➔ Predict the relationship between two or more variables
➔ Independent variable is manipulated by the researcher
➔ Dependent variable influenced by the independent variable
➔ Typical experimental designs have one or two independent variables
➔ Validated statistically and replicable
hypothesis
An experiment normally starts with a research hypothesis
➔ Null hypothesis: typically states that there is no difference between experimental treatments
➔ Alternative hypothesis: a statement that is mutually exclusive with the null hypothesis
➔ The goal of an experiment is to find statistical evidence to reject the null hypothesis in order to support the alternative hypothesis
➔ H0: There is no difference in academic performance between students who are in a relationship and those who are not.
➔ H1: There is a difference in academic performance between students who are in a relationship and those who are not.
原假设（Null Hypothesis，H₀）
- 定义：原假设通常陈述实验处理之间没有差异或没有显著的效果。它是一个默认的立场，即认为任何观察到的差异只是由随机误差引起的。
- 目的：原假设的提出是为了在统计检验中提供一个可以被证伪的基线。研究者的目标是寻找证据来拒绝原假设。
- 例子：如果我们想研究某种药物对疾病的效果，原假设可能是“这种药物对疾病没有效果”，即认为药物组和安慰剂组之间的治疗效果没有显著差异。
备择假设（Alternative Hypothesis，H₁）
- 定义：备择假设是与原假设互斥的陈述，通常表示实验处理之间存在差异或有显著的效果。它是研究者期望通过实验验证的陈述。
- 目的：备择假设是原假设的对立面，它描述了如果原假设不成立，那么实际情况应该是什么样子。
- 例子：继续上面的例子，备择假设可能是“这种药物对疾病有显著效果”，即认为药物组和安慰剂组之间的治疗效果存在显著差异。
实验的目标是通过统计检验，寻找证据来拒绝原假设，从而支持备择假设
designs
- Between-Subjects Design：不同人，不同组。
- Within-Subjects Design：相同人，不同条件。
p67
lifecycle
1. Identify a research hypothesis
2. Specify the design of the study
3. Run a pilot study to test the design, the system, and the study instruments
4. Recruit participants
5. Run the actual data collection sessions
6. Analyze the data
7. Report the results
procedure
1. Preparation
2. Greet participants
3. Introduce the purpose of the study and the procedures
4. Get consent
5. Assign participants to a specific experiment condition
6. Training task(s)
7. Actual task(s)
8. Participants answer questionnaires (if any)
9. Debriefing session
10. Payment (if any)
Statistical analysis
------------------------
Week10
Observation
type:
Direct observation: In the field, In controlled environments
framework:
Space, Actors, Activities, Objects, Acts, Events, Time, Goals, Feelings
Ethnography
Online Ethnography
Observations and materials that might be collected: Activity, Rules and procedures, Descriptions, Recordings, Informal interviews, Diagrams of the physical layout
Indirect observation: tracking users’ activities
⇾ Diaries
⇾ Interaction logs ⇾ Web analytics
Field study
Field studies are done in natural settings( "In the wild” )
Seek to understand what users do naturally and how technology impacts them
design to:1) Identify opportunities for new technology 2) Determine design requirements 3)Decide how best to introduce new technology 4)Evaluate technology in use
Analytics
nvolves collecting data about users activity on a website or product to see which parts are used
automatically
A variety of users’ actions can be recorded by software automatically
pro: unobtrusive, Large volumes of data con: ethical concerns
Web Analytics
interaction logging through analyses users’ activities on website
designers to track the activities of users on their site
A/B testing
➔ A large-scale experiment (thousands of participants or more)
➔ Offers another way to evaluate a website, application of app running on a mobile device
➔ Often used for evaluating changes in design on social media applications
➔ Compares how two groups of users perform on two versions of a design
➔ May create ethical dilemmas if users don’t know they are part of the test
1. What is the independent variable?
2. What is the dependent variable?
3. Do you have a hypothesis?
4. Is it a within-subjects design or between-subjects design?
5. How will you deal with ethical issues?
Predictive models
➔ Provide a way of evaluating products or designs without directly involving users, less expensive than user testing
➔ Use formulas to derive various measures of user performance
➔ Usefulness limited to systems with predictable tasks, for example, voicemail systems, smartphones, and dedicated mobile devices
Fitts' Law ...