Introduction to HCI (Human Computer...
Transcript of Introduction to HCI (Human Computer...
![Page 1: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/1.jpg)
Prof. Narges Mahyar UMass Amherst
[email protected] Courses, projects, papers, and more: http://groups.cs.umass.edu/nmahyar/
© Mahyar with acknowledgements to Joanna McGrenere and Leila Aflatoony
Introduction to HCI (Human Computer Interaction)
�1
Fall 2019HCI Design Process
![Page 2: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/2.jpg)
Today
▸Administrivia - 5 min
▸Discussion on pre readings - 10 min
▸HCI design process - 30 min
▸In-class activity - 30 min
�2
![Page 3: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/3.jpg)
Homework…
▸Design Thinking exercise
▸Prototypes: email to Mahmood Jasim
�3
![Page 4: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/4.jpg)
Due by Now…
▸Check the website
▸Are you able to see our Piazza posts? each others’ posts?
▸Ask questions publicly, so other students can see/answer your questions
▸Feel free to comment/reply to each other’s questions and use Piazza as a learning resource
▸Questions? [5 min]
�4
![Page 5: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/5.jpg)
Discussion on design thinking activity and Norman reading
▸What the heck did we actually do last class??? How did the rest of the exercise go???
▸Get into pairs and take turns (2 min each) answering:
▸What surprised you? or
▸What you disagreed with?
�5
![Page 6: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/6.jpg)
Learning goals
▸after this lecture, you should be able to: ▸contrast the central principles of user-centered versus
technology-centered design ▸describe the stages of the HCI process and different
types of goals each might have ▸ know the roadmap for deploying evaluation
techniques in different stages ▸ identify important features of the process (e.g.,
iteration); LATER lectures will discuss more features ▸ define and identify stakeholders
�6
![Page 7: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/7.jpg)
What is HCI?
A discipline that applies Human-Centered Design methods to the design of interactive technologies… and increasingly, uses the Design Thinking framework.
�7
![Page 8: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/8.jpg)
Different attitudes toward design
technology-centered
vs.
user-centered design
�8
![Page 9: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/9.jpg)
Technology-centered design
▸natural to design for all kinds of reasons … ▸technology-centered design ▸design decisions are guided by technology
▸prevalent attitude in real world because . . . ▸technology is fun! ▸making novel things is engaging – for the designer ▸if it seems like it should work well – or looks cool –
people often buy it, too.
�9
![Page 10: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/10.jpg)
Technology-centered design
▸Technology- (or curiosity-driven) design: ▸can be the basis of radical innovation that
eventually will change peoples’ lives. ▸Not necessarily a bad thing.
▸The problem? ▸risk of leaving out real people, who have real
problems right now.
�10
![Page 11: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/11.jpg)
Try: google “wearable phone”
▸cool!
▸but - what would it actually be like to use these?
�11
![Page 12: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/12.jpg)
Segway:
what is it for?
�12
![Page 13: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/13.jpg)
Attitude of user-centered design
incorporate users into the design process
Humans
TechnologyTasks
Design
![Page 14: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/14.jpg)
spectrum of attitudes towards design
▸attitude of technology–centered design ▸progress made by technological advances ▸goal is to show off gadgets and inventions
▸attitude of designer-centered design ▸progress made by considering designers’ intuition ▸imagining what the user will do and feel
▸attitude of user-centered design ▸incorporating the users into the design process ▸empirical studies integrated early into the design ▸users as part of the development team
�14user
technology
![Page 15: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/15.jpg)
HCI design process
�15
![Page 16: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/16.jpg)
Why do we need a process?
human activity needing better
support
usable and useful interactive systemthat addresses this
?
�16
How do you get from problem to solution?
A map would help.
![Page 17: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/17.jpg)
Process stages and their goals
pre design: understand the problem
early design: explore design space
mid design: develop the chosen approach
late design: integrate and start to deploy
always: evaluate and prototype
�17
![Page 18: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/18.jpg)
Pre design questions
▸understand the problem
▸problem = “human activity needing support”
▸do users really have the problem you think they do?is it an important problem for them?
▸who are the users? who cares? what non-users are involved in the problem and its potential solution?
▸ what are your users like? how varied are they? expertise, abilities, priorities, special needs, constraints, ….
▸ what is the task? what are they really trying to do, and what is getting in the way?
▸ what properties must a solution have?
�18
![Page 19: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/19.jpg)
Early design questions
explore design space
▸ have you considered all relevant approaches?
▸ what are the ‘metrics’ that you should be considering as you compare approaches? feasibility, price, complexity, functionality, fit to company focus/intellectual property, …
▸ what are the high-risk elements of your likely approach, and can you address them?
at this stage - don’t invest effort or love. Be quick, dirty, no attachment.
�19 à CHOSEN DESIGN APPROACH
cover later in term
![Page 20: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/20.jpg)
Mid design questions
develop / confirm chosen approach; reduce risk
▸ are there major “elements” of your design that can be advanced separately? e.g. layout and flow, look-and-feel, technical interface implementation
▸ what are the major questions / uncertainties / risks associated with each design element? focus on these. minimize time on problems you know you can solve.
▸ what user input will you need to verify your design progress? when, where; how much will it cost and can you afford it?
▸ what prototypes do you need to support problem solving, including getting user input on your design?
�20à DESIGN ELEMENTS CONFIRMED & MOCKED-UP
cover later in term
![Page 21: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/21.jpg)
Late design questions
integrate and field-test
there shouldn’t be a lot of questions at this stage if you did the earlier stages right.
▸ integrate the different design elements
▸ final delivery platform
▸ put systems in real users’ hands in real contexts for longer durations
▸ fine-tune, debug
�21à RELEASEABLE SYSTEM!
cover later in term
![Page 22: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/22.jpg)
What does this process look like?
The process emerges…
�22
![Page 23: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/23.jpg)
Understand USERS: • who they are • their key tasks
• user and task descriptions
• design requirements
GO
ALS
MAT
ERIA
LS /
MET
HO
DS
PRO
DU
CTS
Understand DESIGN: • design space and risks • choose design approach
Examine existing: • user tasks & • objectives • contexts • interfaces
Make use of: • requirements • task analysis • real & virtualized users • technology options • company IP
low fidelity prototyping
methods
• throw-away prototypes • design direction • risk analysis
Evaluate w/: • observation • interview/quest • participatory
interaction • task walk-throughs
REFINE Design: • by element • considering task • varied contexts
Make use of: • graphical design • interface guidelines • style guides • real & virtualizedusers
med/ high fidelity
prototyping
methods
• testable medium-fidelity prototypes
Evaluate w/: • usability testing – controlled, uncontrolled
• heuristic evaluation
CONFIRM & debug: • performance in
real use
• alpha/beta systems or
• complete specification
Field testing
User Interface Design Process: Evolving Iterations
PRE DESIGN
EARLY DESIGN
MID DESIGN
LATE DESIGN
Evaluate w/: •observation – many kinds
•ethnography •interviews, questionnaires
•task analysis
Release!
�23K MacLean - derived from version by Saul Greenberg (U Calgary)
![Page 24: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/24.jpg)
Understand USERS: • who they are • their key tasks
• user and task descriptions
• design requirements
GO
ALS
MAT
ERIA
LS /
MET
HO
DS
PRO
DU
CTS
Understand DESIGN: • design space and risks • choose design approach
Examine existing: • user tasks & • objectives • contexts • interfaces
Make use of: • requirements • task analysis • real & virtualized users • technology options • company IP
low fidelity prototyping
methods
• throw-away prototypes • design direction • risk analysis
Evaluate w/: • observation • interview/quest • participatory
interaction • task walk-throughs
REFINE Design: • by element • considering task • varied contexts
Make use of: • graphical design • interface guidelines • style guides • real & virtualizedusers
med/ high fidelity
prototyping
methods
• testable medium-fidelity prototypes
Evaluate w/: • usability testing – controlled, uncontrolled
• heuristic evaluation
CONFIRM & debug: • performance in
real use
• alpha/beta systems or
• complete specification
Field testing/evaluation
User Interface Design Process: Evolving Iterations
K MacLean - derived from version by Saul Greenberg (U Calgary)
PRE-DESIGN EARLY-DESIGN MID-DESIGN LATE-DESIGN
Evaluate w/: •observation – many kinds
•ethnography •interviews, questionnaires
•task analysis
Release!
we’ll see this picture many times You’ll have time to get to know it.
"24
![Page 25: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/25.jpg)
Key Features
• stage evolution:in goals, methods, products
• Iteration:both within and between stages
• methods:used throughout, or stage-specific
"25
![Page 26: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/26.jpg)
Role of evaluation in stagesWhy does every stage has an evaluation component?
"26
![Page 27: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/27.jpg)
Role of evaluation in stages
Why does every stage has an evaluation component?
Because we must connect our design progress to user’s task needs and contexts ▸ many ways of doing this. → know your tools and choose effectively
▸ evaluation techniques: tools in a toolkit ▸ each tool has strengths/weaknesses, and a cost to use
�27
![Page 28: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/28.jpg)
roadmap to evaluation
types
pre-design ethnography
observation
interviews,focus groups
questionnaires,surveys
early design interviews,
focus groups,observation
questionnaires,surveys
contextual inquiry &work modeling
task analysis,task / cognitive walkthroughs
participatory design
heuristic evaluation
mid-late design observation, interviews,
questionnaires,surveys
using advanced prototypes
heuristic evaluation
formal performance / usability testing
à evaluation material (prototype) evolves à "28
![Page 29: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/29.jpg)
roadmap to evaluation
types
pre-design ethnography
observation
interviews,focus groups
questionnaires,surveys
early design interviews,
focus groups,observation
questionnaires,surveys
contextual inquiry &work modeling
task analysis,task / cognitive walkthroughs
participatory design
heuristic evaluation
mid-late design observation, interviews,
questionnaires,surveys
using advanced prototypes
heuristic evaluation
formal performance / usability testing
à evaluation material (prototype) evolves à "29
![Page 30: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/30.jpg)
Some techniques are ubiquitous…
▸interviews, observation, questionnaires:
▸ valuable throughout design process
▸BUT – they may be executed differently.
▸ early: for understanding
▸ later: for input on your design approach & details
▸what’s the difference? what’s the same?
�30
![Page 31: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/31.jpg)
Bowing to reality
▸what makes it hard to follow the “ideal” process? ▸deadlines ▸budget ▸access to appropriate users ▸involvement late in design cycle ▸valuation of HCI input by other parts of the
organization ▸what do you do then?
�31
![Page 32: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/32.jpg)
Who are the stakeholders?
▸stakeholder = anyone who has some reason to care about the interface
▸can be lots of them!
▸needs may conflict
▸user: convenience, functionality, …
▸boss: price, worker efficiency
▸developer: ease of development - deadlines, budget
▸manufacturer: cost of production
▸advertiser: visibility
▸… more �32
![Page 33: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/33.jpg)
How to figure out who your stakeholders are:
▸who will ask for it?
▸who will use it? ▸who will decide whether to use it (or if someone else will use it?) ▸who will pay for it?
▸who has to make (design / build) it ? ▸who has to make a profit from it? ▸who will otherwise make your life miserable if they don’t like it?
▸???
�33
![Page 34: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/34.jpg)
On deck…
Tuesday’s class…
1. Readings (as posted)
2. Think about project ideas (real world problems around you)
3. Fill out the first day survey before the next class
�34
![Page 35: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/35.jpg)
Activity
get into groups of 4~5, introduce each other
[10 min] Part 1. Brainstorm some real world problems around you:
- International students transitioning to the US - Communication issues around the campus
[10 min] Part 2. Identify stakeholders
[10 min] Part 3. Explore some early solutions
�35
![Page 36: Introduction to HCI (Human Computer Interaction)groups.cs.umass.edu/.../325-02-HCI-Design-process-.pdf · Learning goals after this lecture, you should be able to: contrast the central](https://reader030.fdocuments.us/reader030/viewer/2022040402/5e82779bafb10172422d9bb4/html5/thumbnails/36.jpg)
Brainstorming rules
defer judgement, go for quantity, and be visual (record ideas and gather similar ones together)
�36