USA: +1(669)289-8683 
Sign in
Youmustsubmittwoseparatecopies(one Word file and one PDF file) using the Assignment Template on Blackboard via the allocated folder. These files must not be in compressed format.
It is your responsibility to check and make sure that you have uploaded both the correct files.
Zero mark will be given if you try to bypass the SafeAssign (e.g. misspell words, remove spaces between words, hide characters, use different character sets, convert text into image or languages other than English or any kind of manipulation).
Email submission will not be accepted.
You are advised to make your work clear and well-presented. This includes filling your information on the cover page.
You must use this template, failing which will result in zero mark.
You MUST show all your work, and text must not be converted into an image, unless specified otherwise by the question.
Late submission will result in ZERO mark.
The work should be your own, copying from students or other resources will result in ZERO mark.
Use Times New Romanfont for all your answers.
Description and Instructions
General Guidelines
The deadline for project submission is Monday, December 4, 2023.Each group can have up to 3 members.The project carries a total of 14 marks: 10 marks are allocated for the project work and documentation, while 4 marks are for the PowerPoint presentation.Students are required to both present and upload their PowerPoint presentations on Blackboard (BB).The project is divided into four sections, with marks designated for each. The PowerPoint presentation is worth 4 marks.
2 MarksLearning Outcome(s):LO1: Define interaction design process and describe different type of models, theories and frameworks for conceptualizing interaction.LO3: Demonstrate data gathering, analysis, and presentation techniques for discovering user interface requirements Part One
Modern HCI recognizes the multifaceted nature of design approaches that cater to diverse user needs and contexts. Four significant design strategies include user-centered design, activity-centered design, systems design, and genius design. Each of these approaches offers unique insights and methodologies for crafting effective interfaces.
1.Using the design approaches discussed in Chapter 2, propose a design for a software prototype for one of these groups of users:
a. Remote Workers
b. Travelers
c. Students
d. Healthcare Professionals
2.Your software prototype can be of any platform – web, mobile, stand-alone, wearable, etc. Your tasks are:
Name your software prototype and elucidate its aim, objective(s), and the specific problem it seeks to address. Also, specify which design approach(es) from Chapter 2 you are primarily leveraging and why.
3.Requirements Gathering:
Engage potential users through an online survey, interviews, or observations, tailored to your chosen user group. Aim for at least 10 survey responses and conduct two interviews or observations (or a combination).
4.Summarizing Findings:
Analyze and present your findings, focusing on user needs, tasks, and functional requirements. How do these findings align or diverge from the design approach(es) you’ve chosen?
5.Insights and Feedback:
Point out any unique insights, feedback, or innovative metaphors encountered during your data collection phase. How might these insights influence the design approach(es) you’ve chosen?
2 MarksLearning Outcome(s):LO2: Explain cognitive, social, and emotional aspects of different types of user interfaces.Part Two
The design phase is a precursor to prototyping. This involves visualizing and detailing the UI design. Based on your discoveries from Part One, articulate how the prototype will be fashioned and function. Your tasks involve:
Conceptualizing the Design:
oCraft at least three preliminary layouts that represent user requirements, the problems the prototype intends to solve, and the envisioned user interactions.
oExplain how the chosen design approach(es) from Chapter 2 influenced these conceptual designs. For instance, if activity-centered design was a primary choice, how does the design cater to specific user activities?
oSimple sketches or wireframes can be utilized for this task.
Concrete Design:
Convert your conceptual designs, enriching them with specifics like colors, auditory cues, graphics, menus, icons, etc. Dive deeper into design nuances as discussed in Chapters 7 and 12. Employ any visual design software you’re comfortable with.
4 MarksLearning Outcome(s):LO4: Illustrate prototyping for interaction design and explain practical facets of interface construction.Part Three
Prototyping brings your designs from Part Two to life, emphasizing interactivity. Design the interactive elements, ensuring users can explore and engage with the UI for eventual feedback during evaluations. While your prototype doesn’t need to be fully operational, it should be demonstrative of the intended final product. Utilize any visual programming platform of your choice.
For every interface screenshot, describe its function, its state transitions, and underline any UX methodologies applied to minimize user errors. Chapter 13 provides insights into UX design patterns.
Complement your prototype with a 2-minute video showcasing its interactive features.
2 MarksLearning Outcome(s):LO5: Describe and apply various interaction evaluation techniques.Part Four
Evaluation determines the prototype’s usability and user acceptance based on UX benchmarks. Select at least three potential users, ideally those you previously interviewed or who participated in your survey. Execute a User Acceptance Test (UAT) with these individuals and analyze their feedback with these criteria:
1.Gauge the average user satisfaction based on the prototype’s goals and objectives.
2.Count occurrences of both recognizable and unfamiliar metaphors or details to users.
3.Identify elements or functionalities that users found perplexing.
4.Gather additional suggestions or feedback for refinement.
College of Computing and Informatics
Project
Deadline: Monday 04/12/2023 @ 23:59
[Total Mark is 14]
Student Details:
CRN:
Name:
Name:
Name:
ID:
ID:
ID:
Instructions:
• You must submit two separate copies (one Word file and one PDF file) using the Assignment Template on
Blackboard via the allocated folder. These files must not be in compressed format.
• It is your responsibility to check and make sure that you have uploaded both the correct files.
• Zero mark will be given if you try to bypass the SafeAssign (e.g. misspell words, remove spaces between
words, hide characters, use different character sets, convert text into image or languages other than English
or any kind of manipulation).
• Email submission will not be accepted.
• You are advised to make your work clear and well-presented. This includes filling your information on the cover
page.
• You must use this template, failing which will result in zero mark.
• You MUST show all your work, and text must not be converted into an image, unless specified otherwise by
the question.
• Late submission will result in ZERO mark.
• The work should be your own, copying from students or other resources will result in ZERO mark.
• Use Times New Roman font for all your answers.
Description and Instructions
Pg. 01
Description and Instructions
General Guidelines
•
The deadline for project submission is Monday, December 4, 2023.
•
Each group can have up to 3 members.
•
The project carries a total of 14 marks: 10 marks are allocated for the project
work and documentation, while 4 marks are for the PowerPoint presentation.
•
Students are required to both present and upload their PowerPoint
presentations on Blackboard (BB).
•
The project is divided into four sections, with marks designated for each. The
PowerPoint presentation is worth 4 marks.
Part One
Pg. 02
Learning
Outcome(s):
LO1: Define
interaction design
process and
describe different
type of models,
theories and
frameworks for
conceptualizing
interaction.
LO3:
Demonstrate data
gathering,
analysis, and
presentation
techniques for
discovering user
interface
requirements
Part One
2 Marks
Modern HCI recognizes the multifaceted nature of design approaches that cater
to diverse user needs and contexts. Four significant design strategies include
user-centered design, activity-centered design, systems design, and genius
design. Each of these approaches offers unique insights and methodologies for
crafting effective interfaces.
1. Using the design approaches discussed in Chapter 2, propose a design for
a software prototype for one of these groups of users:
a. Remote Workers
b. Travelers
c. Students
d. Healthcare Professionals
2. Your software prototype can be of any platform – web, mobile, stand-alone,
wearable, etc. Your tasks are:
• Name your software prototype and elucidate its aim, objective(s), and the
specific problem it seeks to address. Also, specify which design
approach(es) from Chapter 2 you are primarily leveraging and why.
3. Requirements Gathering:
• Engage potential users through an online survey, interviews, or
observations, tailored to your chosen user group. Aim for at least 10
survey responses and conduct two interviews or observations (or a
combination).
4. Summarizing Findings:
• Analyze and present your findings, focusing on user needs, tasks, and
functional requirements. How do these findings align or diverge from the
design approach(es) you’ve chosen?
Part One
Pg. 03
5. Insights and Feedback:
• Point out any unique insights, feedback, or innovative metaphors
encountered during your data collection phase. How might these insights
influence the design approach(es) you’ve chosen?
Part Two
Pg. 04
Learning
Outcome(s):
LO2: Explain
cognitive, social,
and emotional
aspects of
different types of
user interfaces.
Part Two
2 Marks
The design phase is a precursor to prototyping. This involves visualizing and
detailing the UI design. Based on your discoveries from Part One, articulate how
the prototype will be fashioned and function. Your tasks involve:
•
Conceptualizing the Design:
o Craft at least three preliminary layouts that represent user requirements,
the problems the prototype intends to solve, and the envisioned user
interactions.
o Explain how the chosen design approach(es) from Chapter 2 influenced
these conceptual designs. For instance, if activity-centered design was a
primary choice, how does the design cater to specific user activities?
o Simple sketches or wireframes can be utilized for this task.
•
Concrete Design:
Convert your conceptual designs, enriching them with specifics like colors,
auditory cues, graphics, menus, icons, etc. Dive deeper into design nuances as
discussed in Chapters 7 and 12. Employ any visual design software you’re
comfortable with.
Part Three
Pg. 05
Learning
Outcome(s):
LO4: Illustrate
prototyping for
interaction design
and explain
practical facets of
interface
construction.
Part Three
4 Marks
Prototyping brings your designs from Part Two to life, emphasizing interactivity.
Design the interactive elements, ensuring users can explore and engage with
the UI for eventual feedback during evaluations. While your prototype doesn’t
need to be fully operational, it should be demonstrative of the intended final
product. Utilize any visual programming platform of your choice.
•
For every interface screenshot, describe its function, its state transitions,
and underline any UX methodologies applied to minimize user errors.
Chapter 13 provides insights into UX design patterns.
•
Complement your prototype with a 2-minute video showcasing its
interactive features.
Part Four
Pg. 06
Learning
Outcome(s):
LO5: Describe
and apply various
interaction
evaluation
techniques.
Part Four
2 Marks
Evaluation determines the prototype’s usability and user acceptance based on
UX benchmarks. Select at least three potential users, ideally those you
previously interviewed or who participated in your survey. Execute a User
Acceptance Test (UAT) with these individuals and analyze their feedback with
these criteria:
1. Gauge the average user satisfaction based on the prototype’s goals and
objectives.
2. Count occurrences of both recognizable and unfamiliar metaphors or details
to users.
3. Identify elements or functionalities that users found perplexing.
4. Gather additional suggestions or feedback for refinement.
College of Computing and Informatics
[Total Mark for this Project is 14] (4 Marks for this Presentation)
Student Details:
CRN: ###
Name: ###
Name: ###
Name: ###
ID: ###
ID: ###
ID: ###
Outlines
• Work Distribution among Group Members
• Project details
• Part 1
• Part 2
• Part 3
• Part 4
• Conclusion
Work Distribution among Group Members
• Enumerate all the tasks and specify who was responsible for each one.
Project Details
• List how easy it is to use the program to perform prescribed tasks.
Part one
• List the key issues faced in this project and how did you manage to
overcome them.
Part two
• List the key issues faced in this project and how did you manage to
overcome them.
Part three
• List the key issues faced in this project and how did you manage to
overcome them.
Part four
• List the key issues faced in this project and how did you manage to
overcome them.
Conclusion
• Conclude the work done and the knowledge gained in the project
activity.
Thank You
IT201
Human Computer Interaction
Week 2
What is Interaction Design?
3
Contents
1. Good and Poor Design
2. What Is Interaction Design?
3. The User Experience
4. Accessibility and Inclusiveness
5. Usability and User Experience Goals
4
Weekly Learning Outcomes
1. Define interaction design and how it relates to HCI and
explain the difference between good and poor design
2. Explain the relationship between the user experience and
usability
3. Introduce what is meant by accessibility an inclusiveness in
relation to HCI
5
Required Reading
1. Interaction Design: Beyond Human-Computer Interaction,
5th Edition: chapter 1 Page 1 to 34
Recommended Reading
1. COOPER, A., REIMANN, R., CRONIN, D. AND NOESSEL, C. (2014) About Face: The
Essentials of Interaction Design (4th ed.). John Wiley & Sons Inc.
https://www.wiley.com/en-ps/About+Face:+The+Essentials+of+Interaction+Design,
+4th+Edition-p-9781118766576
This Presentation is mainly dependent on the textbook: Interaction Design: Beyond Human-Computer Interaction, 5th
6
Good and Poor Design
• Interactive devices are pervasive in our daily life
• Smartphone, coffee machine, smoothie maker, e-reader, smart TV. etc.
• Some of the products are easy to use while some are not.
• Why?
• Keeping users in mind while designing the product makes it easy to
use.
• Many interfaces of new products do not adhere to the interaction
design principles validated in the 1990s.
• Important Question: How can we rectify this situation so that the
norm is that all new products are designed to provide good user
experiences?
8
Bad Design
• Two switches with light on each
switch
• The top switch turns the coffee
maker on and off. When it is on, its
light goes on.
• The bottom switch selects the
quantity of coffee desired,
• the smaller quantity of 3 or fewer cups
or the larger quantity of 4 or more cups.
• The problem is with the light on this
bottom switch.
• When would you expect the switch light
to go on, for the smaller quantity or for
the larger quantity?
www.baddesigns.com
• Why is this confusing?
• more coffee to be associated
with more light (light on).
9
Bad Design
• If you set the photocopier to
make 15 copies, sorted and
stapled. Then you push the big
button with the “C” to start
making your copies.
• What do you think will happen?
www.baddesigns.com
• The photocopier makes the
copies correctly.
• The photocopier settings are
cleared and no copies are made.
• If you selected (b) you are right!
The “C” stands for clear, not
copy.
10
Good Design
Why interface of this remote is better
designed?
• Shape to fit in hand
• Logical layout and color-coded,
distinctive buttons
• Easy-to-locate buttons
11
What to Design?
• Need to consider
•
•
•
•
•
the expected users
what might help people with the way they currently do things?
what might provide quality user experiences?
what people want and getting them involved in the design?
user-centered techniques during the design process
12
2. What is Interaction Design?
13
Interaction Design – I
“Designing interactive products to support the way people
communicate and interact in their everyday and working lives.”
Sharp, Rogers, and Preece (2019)
“The design of spaces for human communication and interaction.”
Winograd (1997)
Goal of Interaction Design is to develop usable products
Usability means easy to learn, effective to use, and provides an
enjoyable experience
14
Interaction Design – II
• Terms similar to interaction design:
• User interface design, software design, user-centered design, product
design, web design, experience design (UX)
• Interaction design is the umbrella term covering fundamental of
different disciplines
15
Interdisciplinary Field
16
Interaction Design Academic Perspective
• Psychology
• Social Sciences
• Computing Sciences
• Engineering
• Ergonomics
• Informatics
17
Interaction Design
Design Practices
• Graphic design
• Product design
• Artist-design
• Industrial design
• Film industry
18
Who is Involved?
• People from different backgrounds with different perspectives;
Pros
• More ideas and designs generated
Cons
• Difficult to communicate and progress forward the designs being create
19
3. The User Experience
20
The User Experience
• Product used by the people in the real world
• How people feel about the product, pleasure, satisfaction
• “Every product that is used by someone has a user experience: newspapers, ketchup
bottles, reclining armchairs, cardigan sweaters.” (Garrett, 2010)
• “All aspects of the end-user’s interaction with the company, its services, and its products.
(Nielsen and Norman, 2014)
• Interaction design focuses on designfor a user experience
21
The iPod Phenomenon
• distinct family of rainbow
colors
• Simple, elegant, distinct
brand, pleasurable, catchy
names, cool…
• Quality of the
overall user experience
paled in comparison to that
provided by the iPod
22
Essential Aspects of Interaction Design
• Users involvement throughout the development of the project
• Identification and specification of usability and user experience
goals
• Agreed upon with users
• Iterative process
23
Understanding Users
• Knowing users
• Age, education, where they live, work
• User understanding can help designers
• Understand user preferences
• How to design interactive products for good user experience
• One size does not fit all – children have different expectations than adults
• Cultural differences is also an important concern for interaction
design
24
Understanding Users
• Knowing users
• Age, education, where they live, work
• User understanding can help designers
• Understand user preferences
• How to design interactive products for good user experience
• One size does not fit all – children have different expectations than adults
• Cultural differences is also an important concern for interaction
design
25
4. Accessibility and Inclusiveness
26
Accessibility
Accessibility: the extent to which an interactive product is accessible by as many
people as possible
• Focus is on people with disabilities; for instance, those using android OS or apple voiceover
• Companies like Google and Apple provide tools for their developers
to
promote this. The focus is on people with disabilities. For example,
Android OS provides a
• Accessibility can be achieved in two ways:
• first, through the inclusive design of technology,
• and second, through the design of assistive technology.
27
Inclusiveness
Inclusiveness : making products and services that accommodate the widest possible
number of people
• For example, smartphones designed for all and made available to everyone regardless of their
disability, education, age, or income
• People with permanent disabilities often use assistive technology in their
everyday life, which they consider to be life-essential and an extension of
their self.
• Examples include
• wheelchairs (people now refer to “wearing their wheels,” rather than “using a
wheelchair”)
• and augmented and alternative communication aids.
• Much current HCI research into disability explores how new technologies,
such as IoT, wearables, and virtual reality, can be used to improve upon
existing assistive technologies.
28
5. Usability and User Experience Goals
29
Usability goals
• Effectiveness – Effective to use
• Efficiency – Efficient to use
• Safety – Safe to use
• Utility – Have good utility
• Learnability – Easy to learn
• Memorability – Easy to remember how to use
30
Usability goals and
Questions
• Effectiveness
• Is the product capable of allowing people to learn, carry out their work efficiently, access
the information that they need, or buy the goods that they want?
• Efficiency
• Once users have learned how to use a product to carry out their tasks, can they sustain a
high level of productivity?
• Safety
• What is the range of errors that are possible using the product, and what measures are
there to permit users to recover easily from them?
31
User Experience Goals
Desirable aspects
Satisfying
Helpful
Fun
Enjoyable
Motivating
Provocative
Engaging
Challenging
Surprising
Pleasurable Enhancing sociability Rewarding
Exciting
Supporting creativity Emotionally fulfilling
Entertaining Cognitively stimulating Experiencing flow
Undesirable aspects
Boring
Unpleasant
Frustrating
Patronizing
Making one feel guilty Making one feel stupid
Annoying
Cutesy
Childish
Gimmicky
32
Design principles
• 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, and
common-sense
33
Feedback – Examples of
poor interface
• Sending information back to the user about
what has been done
“ccclichhk”
• Includes sound, highlighting, animation, and
combinations of these
• For example, when screen button is clicked, it
provides sound or red highlight feedback:
34
Consistency
• Similar operations must have similar elements for similar tasks.
• for example, always use Ctrl key plus first initial of the command for an
operation: Ctrl+c, Ctrl+s, Ctrl+o
• Consistent interfaces are easier to learn and use
• Internal consistency
• designing operations to act the same within an application
• External consistency
• designing same operations and interfaces across applications and device
35
IT201
Human Computer Interaction
Week 3
THE PROCESS OF INTERACTION DESIGN
3
Contents
1. Introduction
2. What is involved in interact design?
3. Activities of interaction design
4. Practical issues
4
Weekly Learning Outcomes
1. Reflect on what interaction design involves and explain the
main principles of a user-centered approach.
2. Introduce the four basic activities of interaction design and
how they are related in a simple lifecycle model.
5
Required Reading
1. Interaction Design: Beyond Human-Computer Interaction,
5th Edition: chapter 1 Page 37 to 55
Recommended Reading
KELLEY, T., with LITTMAN, J. (2016) The Art of Innovation, Profile Books.
https://profilebooks.com/work/the-art-of-innovation/
This Presentation is mainly dependent on the textbook: Interaction Design: Beyond Human-Computer Interaction, 5th
6
1. Introduction
7
Introduction
• This chapter focuses on
•
•
•
•
•
•
what interaction design involves.
discussing the advantages of involving users in development.
what is a user-centered approach.
introducing the four basic activities of interaction design
asking some important questions about the interaction design process
Incorporating interaction design activities can be integrated into other development
lifecycles.
8
Activity
• Let’s design a cloud-based service
•
to enable people to share their photos, movies, music, chats, documents, and so on, in
an efficient, safe, and enjoyable way.
• What would you do?
• How would you start?
• Would you begin by sketching how the interface might look, work out how the
system architecture should be structured, or just start coding?
• Would you start by asking users about their current experiences with sharing
files and examine the existing tools, for example, Dropbox and Google Drive?
9
The double diamond of design
• The Design Council of the United Kingdom captures these in the double
diamond of design,
• This approach has four phases which are iterated:
•
•
•
•
Discover : Designers try to gather insights about the problem.
Define : Designers develop a clear brief that frames the design challenge.
Develop : Solutions or concepts are created, prototyped, tested, and iterated.
Deliver : The resulting project is finalized, produced, and launched.
10
The double diamond of design
Source: Adapted from The Design Process: What is the Double Diamond?
11
Activity 2.1
12
Activity 2.1
13
2. What is involved in interact design?
14
What is involved in Interaction Design?
• Interaction Design is a process focusing on:
▪ discovering requirements, designing to fulfil requirements, producing prototypes
and evaluating them
▪ considering users and their goals
▪ involving trade-offs to balance conflicting requirements
• Exploring alternatives and the best out of them
• Four approaches:
•
•
•
•
user-centered design,
activity-centered design,
systems design,
genius design
15
Importance of users involvement
Investigate about the
• current user experience?
• the change needed?
• Improvement the change will bring to the situation?
Explore and articulate the problem space
• Team effort
• different perspectives
• Avoid incorrect assumptions and unsupported claims
result of decades of research into human
factors of information displays
16
Understanding the problem space
• Users’ Expectation
•
•
•
•
Wishes and needs
Realistic expectations
Avoid surprises and disappointments
Timely training and communication
• Ownership is the key
• Active stakeholders vs passive listeners
• Problems identification and acceptance
• Essential or for product acceptance and success
17
Degrees of user involvement
• Users can be involved at different stages
•
•
•
•
Full time: constant input, but lose touch with users
Part time: patchy input, and very stressful
Short term: inconsistent across project life
Long term: consistent, but lose touch with users
• Face-to-face meetings in group or individual activities
• Market-driven products
•
•
•
•
Virtual contributions from thousands of users
Online Feedback Exchange (OFE) systems
Crowdsourcing design ideas
Citizen science
• Users may also be involved after product release
18
User-centered approach
User-centered approach is based on :
• Early focus on users and tasks
• directly studying cognitive, behavioral, anthropomorphic, and attitudinal characteristics
• Empirical measurement
• users’ reactions and performance to scenarios, simulations, and prototypes are
observed, recorded, and analyzed
• Iterative design
• finding problems with user testing, fix them and carry out more tests
19
3. Activities of interaction design
20
Four basic activities of Interaction Design
1.
2.
3.
4.
Discovering requirements
Designing alternatives
Prototyping alternative designs
Evaluating product and its user experience throughout
21
Discovering requirements
• discovering something new about the world and defining what will be
developed.
• In the case of interaction design,
• understanding the target users
• the support an interactive product could usefully provide
• this understanding is gleaned through data gathering and
analysis
22
Designing alternatives
• This is the core activity
• proposing ideas for meeting the requirements
• For interaction design this activity can be viewed as two subactivities:
• Conceptual design involves producing the conceptual model for the product
• conceptual model describes an abstraction outlining what people can do with a
product and what concepts are needed to understand how
to interact with it
• Concrete design considers the detail of the product including the colors,
sounds, and images to use, menu design, and icon design
• Alternatives are considered at every point
23
Prototyping
• Designing the behavior of interactive products as well as their look and feel.
• The most effective way for users to evaluate such designs is to interact with
them, and this can be achieved through prototyping.
• This does not necessarily mean that a piece of software is required.
• There are different prototyping techniques, not all of which require a
working piece of software
• For example,
• paper-based prototypes are quick and cheap to build and are effective for identifying
problems in the early stages of design,
• and through role-playing users can get a real sense of what it will be like to interact
with the product.
24
Evaluating
• Evaluation is the process of determining the usability and acceptability of
the product or design
• It is measured in terms of a variety of usability and user-experience criteria.
• Evaluation does not replace activities concerned with quality assurance
• QA and Testing activities are focused to make sure that the final product is
fit for its intended purpose, but it complements and enhances them
25
Simple Interaction design life cycle
26
Google Design Sprints (Knapp et al., 2016)
Source: Google Design Sprints (used courtesy of Agile Marketing)
27
Research in the Wild (Rogers and Marshall, 2017)
A framework for research in the wild studies
Source: Rogers and Marshall, 2017, p6. (used courtesy of Morgan and Claypool)
28
4. Practical issues
29
Some practical issues
• Who are the users?
• What are the users’ needs?
• How to generate alternative designs?
• How to choose among alternatives?
• How to integrate interaction design activities with other lifecycle
models?
30
Knowing stakeholders
Not easy
• 382 distinct types of users for smartphone apps (Sha Zhao et al, 2016)
• Many products are intended for use by large sections of the population, so
user is “everybody”
• More targeted products are associated with specific roles
Stakeholders
• Larger than the group of direct users
• Identifying stakeholders helps identify groups to include in interaction
design activities
31
Knowing users’ needs
• Wishes vs. needs
• Users rarely know what they need and what is possible
• Designers must:
▪ Explore the problem space
▪ Investigate who are the users
▪ Investigate user activities to see what can be improved
▪ Try out ideas with potential users
• Focus on peoples’ goals, usability, and user experience goals, rather than
expect stakeholders to articulate requirements
32
Generating and choosing among alternatives
• Considering alternatives helps identify better designs
• Where to search for?
▪ ‘Flair and creativity’: research and synthesis
▪ Cross-fertilization of ideas from different perspectives
▪ Users can generate different designs
▪ Product evolution based on changing use
▪ Seek inspiration: similar products and domain, or different products and domain
• Balancing constraints and trade-offs
• Evaluation with users or peers
• A/B testing and quality assurance
33
Integrating interaction design activities within other models
• Integrating interaction design activities in lifecycle models from other disciplines
requires careful planning
• Software development lifecycle models are prominent
• Integrating with agile software development is promising because:
▪
▪
▪
▪
It incorporates tight iterations
It champions early and regular feedback
It handles emergent requirements
It aims to strike a balance between flexibility and structure
34
IT201
Human Computer Interaction
Week 4
Conceptualizing Interaction
3
Contents
1. Conceptualizing Interaction and models
2. Interface Metaphors
3. interaction types
4. Paradigms, Visions, Theories, Models, and Frameworks
4
Weekly Learning Outcomes
1. Explain conceptualize interaction by describing what a
conceptual model is and how to begin to formulate one.
2. Discuss the use of interface metaphors as part of a
conceptual model and outline the core interaction types for
informing the development of a conceptual model.
3. Introduce paradigms, visions, theories, models, and
frameworks informing interaction design.
5
Required Reading
1. Interaction Design: Beyond Human-Computer Interaction,
5th Edition: chapter 3 Page 69 to 97
Recommended Reading
JOHNSON, J. and HENDERSON, A. (2012) Conceptual Models: Core to Good Design.
Morgan and Claypool Publishers.
https://www.morganclaypool.com/doi/abs/10.2200/S00391ED1V01Y201111HCI012
This Presentation is mainly dependent on the textbook: Interaction Design: Beyond Human-Computer Interaction, 5th
6
1. Conceptualizing Interaction and models
7
Conceptualizing design
Proof of concept
• Envisioning the working of proposed product
Why conceptualize?
• Finishing the vague ideas and assumptions about the benefits of the proposed product
in terms of their feasibility
• Feasibility to develop
• Desirable and usefulness.
8
Assumptions and claims
• Specify assumptions and claims
• Try to defend and support them by what they will provide
• Identify
▪ what ideas are vague or unrealistic
▪ human activities and interactivities that are problematic
• Iteratively work out how the design ideas might be improved
9
Assumptions
• Taking something for granted when it needs further investigation
▪ For example, people will want to watch TV while driving
Technotopic Narratives and Networked Subjects: Preparations for Everyday Life in Cooltown
10
Claims
• Stating something to be true when it is still open to question
▪ For example, “a multimodal style of interaction for controlling GPS — one
that involves speaking while driving — is safe.”
11
Activity
How will enabling robot waiters to speak to customers enhance their
experience?
Source : Xinhua, Guo Cheng
12
Identifying the problem
• For example:
▪ The robot could take orders and entertain customers by having a
conversation with them
▪ The robot could make recommendations for different customers, such as
restless children or fussy eaters
• But just assumptions
• The real problem being addressed:
“It is difficult to recruit good wait staff who provide the level of customer
service to which we have become accustomed.”
13
Analyzing the problem space
• What are the problems with an existing product or user experience?
• What are the reasons of these problems?
• How the proposed design will might sole these problems?
• For new user experience, how the proposed design ideas support,
change, or extend current ways of doing things?
14
Activity
• What were the assumptions and claims made about watching 3D TV?
Source: Andrey Popov, Shutterstock
15
Activity- Assumptions and claims:
• There was no existing problem to overcome
▪ What was being proposed was a new way of experiencing TV
• An assumption
▪ People would really enjoy the enhanced clarity and color detail provided by 3D
• A claim
▪ People would not mind paying a lot more for a new 3D-enabled TV screen because
of the new experience
16
Benefits of conceptualizing
Orientation
• It encourages design teams to ask specific questions to understand the
conceptual model
Open-minded
• Motivates design teams to avoid from becoming narrowly focused early on
Common ground
• Establish a set of commonly agreed terms
17
Problem space to design space
• Having a good understanding of the problem space can help inform
the design space
▪ For example, what kind of interface, behaviour, functionality to provide
• Before deciding upon these, it is important to develop a conceptual
model
18
What is a conceptual model?
• A conceptual model is:
“…a high-level description of how a system is organized and operates” (Johnson
and Henderson, 2002, p26)
• A conceptual model enables:
“…designers to straighten out their thinking before they start laying out their
widgets” (Johnson and Henderson, 2002, p28)
• Provides a working strategy and framework of general concepts
and their interrelations
19
Components of a Conceptual model
• Specifying Metaphors and analogies
• Understand what a product is for and how to use it for an activity
• Understand concepts that people are exposed to through the
product
▪ For example
▪ Task–Domain objects, their attributes, and operations
• What is the relationship between these concepts
20
Formulating a conceptual model
• Understand users tasks and activities?
• How will the system support these?
• What are the appropriate interface metaphor?
• What kinds of interaction modes and styles to use?
▪ Always consider how the user will understand the underlying conceptual model
• Many kinds of conceptual models
• The best conceptual models are:
▪ Obvious and simple
▪ The operations they support are intuitive to use
21
2. Interface Metaphors
22
Interface metaphors
• Although the interface designs are similar to a physical entity but
also has own properties
• desktop metaphor, and web portals
• These are based on activity, object, or a combination of both
• The designers must exploit user’s familiar knowledge and help them
to understand ‘the unfamiliar’
• Examples
• Conceptualizing what users are doing – surfing the Web
• A conceptual model instantiated at the interface – the desktop metaphor
• Visualizing an operation – an icon of a shopping cart into which the user
places items
23
Example of interface metaphors
• The card is a very popular
UI. Why?
▪ It has familiar form factor
▪ It can easily be flicked
through, sorted, and themed
▪ It structures content into
meaningful chunks (similar to
how paragraphs are used to
chunk a set of related sentences
into distinct sections)
▪ Its material properties give
the appearance of the
surface of paper
Google Now card for
restaurant recommendation in
Germany
Source: Johannes Shonning
24
Pros and Cons of interface metaphors
Pros
• Makes learning new
systems easier
• Helps users understand the
underlying conceptual
model
• Can be very innovative and
enable the realm of
computers and their
applications to be made
more accessible to a greater
diversity of users
Cons
• Break conventional and
cultural rules
• Can constrain designers in the
way that they conceptualize a
problem space
• Conflicts with design principles
• Forces users to understand
only the system in terms of
the metaphor
• Designers can inadvertently
use bad existing designs and
transfer the bad parts over
• Limits designers’ imagination
in coming up with new
conceptual models
25
Pros and Cons of interface metaphors
Pros
• Makes learning new
systems easier
• Helps users understand the
underlying conceptual
model
• Can be very innovative and
enable the realm of
computers and their
applications to be made
more accessible to a greater
diversity of users
Cons
• Break conventional and
cultural rules
• Can constrain designers in the
way that they conceptualize a
problem space
• Conflicts with design principles
• Forces users to understand
only the system in terms of
the metaphor
• Designers can inadvertently
use bad existing designs and
transfer the bad parts over
• Limits designers’ imagination
in coming up with new
conceptual models
26
3. Interaction types
27
Interaction types
• Instructing
▪ Used for issuing commands and selecting options
• Conversing
▪ Use for interacting with a conversational system
• Manipulating
▪ Designed for interacting with objects in a virtual or physical space by manipulating them
• Exploring
▪ Interface for moving through a virtual environment or a physical space
• Responding
▪ The system initiates the interaction and the user chooses whether to respond in a specific
manner
28
Instructing
• End users instruct with the system what to do
▪ For example: Tell the time, print a file, or save a file
• Very common conceptual model covering the diversity of
devices and systems
▪ For instance: Word processors, VCRs, and vending machines
• The main benefit is that instructing supports quick and efficient
interaction
▪ Good for repetitive kinds of actions performed on multiple objects
29
Example
Which is easiest and why?
30
Conversing
• Models of having a conversation with another human
• Simple voice recognition, menu-driven systems to more
complex ‘natural language’ dialogs
• Examples
• timetables, search engines, advice-giving systems, and help systems
• virtual agents, chatbots, toys, and pet robots designed to converse with you
31
How good is Conversing
Pros
• Allows users, especially novices, to interact with a system in a way
that is familiar to them
▪ Can make them feel comfortable, at ease, and less scared
Cons
• Misunderstandings can arise when the system does not know how
to parse what the user says
▪ For example, voice assistants can misunderstand what children say
32
Manipulating
• Involves
• dragging, selecting, opening, closing and zooming actions on virtual objects
• Based on users’ knowledge of how they move and manipulate in the
physical world
• Can involve actions using physical controllers
• (for example, Nintendo Wii) or air gestures (such as, Microsoft Kinect) to
control the movements of an on-screen avatar
• Tagged physical objects (for instance, balls) that are manipulated in
a physical world result in physical/digital events (such as animation)
33
Direct Manipulation (DM)
• Coined by Ben Shneiderman (1983)
• Three essential properties:
▪ Continuous representation of objects and actions of interest
▪ Physical actions and button pressing instead of issuing commands with
complex syntax
▪ Rapid reversible actions with immediate feedback on object of interest
34
Direct Manipulation
Pros
• Helpful for novices
• Experienced users can work
extremely rapidly to carry out
a wide range of tasks−even
defining new functions
• Intermittent users can retain
operational concepts over time
• Error messages rarely needed
• Users gain confidence and
mastery and feel in control
Cons
• the metaphor of direct
manipulation can be
considered too literally
• Not all tasks can be
described by objects,
• Some tasks are better
achieved through
delegating – spell checking
• Can cover screen space
• Moving a cursor using a
mouse or touchpad can be
slower
35
Exploring
• Is designed for applications for moving through virtual or physical
environments
▪ Users can explore aspects of a virtual 3D environment
▪ Sensors are used to embedded physical environments to trigger digital or
physical events to happen
• Examples of virtual environments, including cities, parks, buildings,
rooms, and datasets
▪ Enable users to fly over them and zoom in and out of different parts
36
Seeing things larger than life in VR
Cyber-Insects in the CAVE
Source : Alexei A. Sharov
37
Responding
• System takes the initiative to alert user
• System does this by:
▪ Detecting the location and-or presence of someone in a vicinity and
notifies them on their phone or watch,
▪ What it has learned from their repeated behaviors
• Examples:
▪ Alerts the user of a nearby coffee bar where some friends are meeting
▪ User’s fitness tracker notifies them of a milestone reached
• Automatic system response without any requests made by the
user
38
Which Interaction Style to Choose
• Direct manipulation
• For ‘doing’ types of tasks – designing, drawing, flying, driving, or sizing
windows
• Issuing instructions
• For repetitive tasks – spell-checking and file management
• Having a conversation I
• For certain services – finding information or requesting music
• Hybrid conceptual
• For supporting multiple ways of carrying out the same actions
39
Interaction type vs. Interaction style
Interaction type:
• A description of what the user is doing when interacting with a system, for
example, instructing, talking, browsing, or responding
Interface style:
• The kind of interface used to support the interaction, for instance, command,
menu-based, gesture, or voice
40
4. Paradigms, Visions, Theories, Models, and Frameworks
41
Paradigm
• Inspiration for a conceptual model
• General approach adopted by a community for carrying out
research
▪ Shared assumptions, concepts, values, and practices
▪ For example, desktop, ubiquitous computing, in the wild
• Pervasive computing
• Wearable computing
• Internet of Things (IoT)
42
Visions and Theory
Visions
• A driving force that frames research and development
• Provide concrete scenarios of how society can use the next
generation of imagined technologies
• Also raise ethical questions such as, privacy and trust
Theory
• Explanation of a phenomenon
• For example, information processing that explains how the mind, or some aspect
of it, is assumed to work
• Can help identify factors relevant to the design and evaluation of
interactive products
• Such as cognitive, social, and affective
43
Framework
• Set of interrelated concepts and-or specific questions for ‘what to look for’
• Provide advice on how to design user experiences
▪ Helping designers think about how to conceptualize learning, working,
socializing, fun, and emotion
• Focus on how to design particular kinds of interfaces to evoke certain
responses
• Come in various forms:
▪ Such as steps, questions, concepts, challenges, principles, tactics, and
dimensions
44
IT201
Human Computer Interaction
Week 5
Cognitive Aspects
3
Contents
1. Introduction
2. What Is Cognition?
3. Cognitive Processes
4. Cognitive Frameworks
4
Weekly Learning Outcomes
1. Explain the different aspects of cognition and it’s
importance for interaction design
2. Show the difference between various cognitive frameworks
that have been applied to HCI and explain what mental
models are.
5
Required Reading
1. Interaction Design: Beyond Human-Computer Interaction,
5th Edition: Chapter 4 Page 101 to 123
Recommended Reading
EYSENCK, M. and BRYSBAERT, M. (2018) Fundamentals of Cognition (3rd ed.). Routledge.
https://scholar.google.com/scholar?q=EYSENCK,+M.+and+BRYSBAERT,+M.
+(2018)+Fundamentals+of+Cognition+(3rd+ed.).+Rout-+ledge.
&hl=en&as_sdt=0&as_vis=1&oi=scholart
This Presentation is mainly dependent on the textbook: Interaction Design: Beyond Human-Computer Interaction, 5th
6
1. Introduction
7
Cognition
• Thinking, remembering, learning, daydreaming, decision-making,
seeing, reading, talking, writing…
• Ways of classifying cognition at a higher level:
▪ Experiential vs. reflective cognition (Norman, 1993)
▪ Fast vs slow thinking (Kahneman, 2011)
8
Understanding cognition
• Understanding cognition can:
• Provide knowledge about what users can and cannot be expected to do
• Identify and explain the nature and causes of problems that users encounter
• Provide theories, modeling tools, guidance, and methods that can lead to
the design of better interactive products
9
2. Cognitive Processes
10
Cognitive processes
1. Attention
2. Perception
3. Memory
4. Learning
5. Reading, speaking and listening
6. Problem-solving, planning, reasoning and decision-making
11
Attention
• Recognizing and selecting things on which to concentrate at a point in
• It may involves audio and/or visual senses
• Focused and divided attention
• Enables us to be selective in terms of the mass of competing stimuli, but limits our
ability to keep track of all events
• Design recommendation
• Information at the interface should be structured to capture users’ attention,
• for example, use perceptual boundaries (windows), color, reverse video, sound,
and flashing lights
• Use techniques to achieve this – color, ordering, spacing, underlining, sequencing,
and animation
• Avoid cluttering visual interfaces with too much information
• Consider designing different ways to support effective switching and returning to
an interface
12
Perception
• Information acquisition from the world and transformation into
experiences
• Obvious implication is to design representations that are readily
perceivable, for instance:
▪ Text should be legible
▪ Icons should be easy to distinguish and read
13
Activity
What is the time?
What is the time?
What is the time?
What is the time?
What is the time?
Which is the easiest to read and why?
14
Design recommendation
• Icons should enable users to distinguish their meaning readily
• Bordering and spacing are effective visual ways of grouping
information
• Sounds should be audible and distinguishable
• Research proper color contrast techniques when designing an
interface:
15
Memory
• Recalling of knowledge to act appropriately
▪ For example, recognizing someone’s face or remembering someone’s name
• We don’t remember everything
• filtering and processing
• Context is important as to how we remember (that is, where, when, how, and so
on)
• We recognize things much better than being able to recall things
• We remember less about objects that we have photographed than when we
observe them with the naked eye (Henkel, 2014)
16
Recognition vs. recall
• Command-based interfaces require users to recall from memory a
name from a possible set of 100s of names
• Graphical interfaces provide visually-based options (menus, icons)
that users need only browse through until they recognize one
• Web browsers provide tabs and history lists of visited URLs that
support recognition memory
17
Recognition vs. recall
• Command-based interfaces require users to recall from memory a name from a
possible set of 100s of names
• Graphical interfaces provide visually-based options (menus, icons) that users need
only browse through until they recognize one
• Memory load
• Online/mobile and phone banking now require users to provide multiple pieces of
information to access their account
• For instance, ZIP code, birthplace, a memorable date, first school attended
• Reduces stress and memory load on users
• Passwords could become extinct with the widespread use of biometrics and computer
vision algorithms
18
Design recommendations
• Reduce cognitive load by avoiding long and complicated procedures
for carrying out tasks
• Design interfaces that promote recognition rather than recall
• Provide users with various ways of labelling digital information to
help them easily identify it again
▪ For example, folders, categories, color, flagging, and time stamping
19
Learning
• Learning involves the accumulation of skills
• Two main types:
• Incidental learning (for example, recognizing people’s faces, what you
did today)
• Intentional learning (for instance, studying for an exam, learning to
cook)
• Intentional learning is much harder!
• Many technologies have been developed to help (for example, multimedia,
animations, VR)
• People find it hard to learn by following instructions in a manual
• People prefer to learn by doing
20
Design recommendations
• Design interfaces that encourage exploration
• Design interfaces that constrain and guide learners
• Dynamically linking concepts and representations can facilitate the
learning of complex material
21
Reading, speaking, and listening
• The ease with which people can read, listen, or speak differs:
• Many prefer listening to reading
• Reading can be quicker than speaking or listening
• Listening requires less cognitive effort than reading or speaking
• Voice user interfaces allow users to interact with them by asking questions – Google
Voice, Siri, and Alexa
• Speech-output systems use artificially-generated speech – written text-to-speech
systems for the visually impaired
• Natural-language systems enable users to type in questions and give text-based
responses – chatbots
22
Design recommendations
• Speech-based menus and instructions should be short
• Highlight the intonation of artificially generated speech voices
▪ They are harder to understand than human voices
• Provide opportunities for making text large on a screen
23
Problem-solving, planning, reasoning, and decisionmaking
• All these processes involve reflective cognition
▪ For example, thinking about what to do,
▪ what the options are, and the consequences
• Often involves conscious processes, discussion with others (or
oneself), and the use of artifacts
▪ Such as maps, books, pen and paper
• Also need to work through different scenarios and selecting the best
one
• Exploring the alternatives
24
Design recommendations
• Provide information and help pages that are easy to access for people who wish
to understand more about how to carry out an activity more effectively (for
example, web searching)
• Use simple and memorable functions to support rapid decision-making and
planning
25
3. Cognitive Frameworks
26
Cognitive frameworks
• These framework are used to explain and predict user behavior at
the interface
▪ Based on theories of behavior
▪ Focus is on mental processes
▪ Also use of artifacts and representations
• Most well known are:
▪
▪
▪
▪
Mental models
Gulfs of execution and evaluation
Distributed cognition
External and embodied cognition
27
Mental models
• Knowledge is sometimes described as a mental model:
• How to use the system (what to do next)
• What to do with unfamiliar systems or unexpected situations (how the
system works)
• Users develop an understanding of a system through learning about
and using it
• mental models are used to make inferences
28
Activity
You arrive home on a cold winter’s night to a cold house. How do you
get the house to warm up as quickly as possible?
1. Set the thermostat to be at its highest
2. or to the desired temperature?
Many people when asked (a) choose the first option
Why?
• They think it will heat the room up quicker
• But it is a wrong mental model for thermostats based on on-off switch model
Most of us have erroneous mental models (Kempton, 1996)
29
UX for better mental models
• UX can help to built better mental models by
• Clear and easy to use instructions
• tutorials and context sensitive guidance
• videos and chatbots
• Transparency: to make interfaces intuitive to use
• Knowing what actions an interface allows
• For example, swiping, clicking, or selecting
30
Gulfs of execution and evaluation
• The gulf of execution
▪ The distance from the user to the physical system
• The gulf of evaluation
▪ The distance from the physical system to the user
• Bridging the gulfs is important to reduce cognitive efforts
required to perform tasks
31
Distributed cognition
• Information is transformed through different media
(computers, displays, paper, heads)
32
External cognition
• Explains how we interact with external representations
(such as maps, notes, and diagrams)
• cognitive benefits and the processes involved
• What technologies can we develop to help people carry
out complex tasks (for example, learning, problem
solving, and decision-making)?
• Externalizing to reduce memory load
• use of diaries, reminders, calendars, notes, shopping lists, todo lists
33
Design recommendations
• Provide external representations at the interface to reduce memory
load
▪ For example, information visualizations have been designed to allow people
to make sense and rapid decisions about masses of data
34
IT201
Human Computer Interaction
Week 6
Social and Emotional Interaction
3
Contents
1. Being Social and remote conversations
2. Social Engagement
3. Emotions and the User Experience
4. Persuasive Technologies and Behavioral Change
5. Anthropomorphism
4
Weekly Learning Outcomes
1. Explain social interaction and describe the social
mechanisms that people use to communicate and
collaborate.
2. Discuss the use of social media for keeping in touch,
making contacts, and managing our social and working
lives.
3. Explain the relation of emotions with behavior and the
user experience and describe the effect of technologies on
people’s behavior.
5
Required Reading
1. Interaction Design: Beyond Human-Computer Interaction,
5th Edition: Chapter 5 and 6 Page 135 to 187
Recommended Reading
TURKLE, S. (2016) Reclaiming Conversation: The Power of Talk in a Digital Age.
https://www.penguinrandomhouse.com/books/313732/reclaiming-conversation-bysherry-turkle/
HÖÖK, K. (2018) Designing with the Body. MIT.
https://mitpress.mit.edu/books/designing-body
This Presentation is mainly dependent on the textbook: Interaction Design: Beyond Human-Computer Interaction, 5th
6
Chapter 5: Social Interaction
7
1. Being Social and remote conversations
8
Social interaction
• We live together, work together, play together, talk to each other,
and socialize
Are we spending too much time in our own digital bubbles?
9
Just Think
• Are F2F conversations being superseded by social media
interactions?
• How many friends do you have on Facebook, LinkedIn, WhatsApp,
and so on versus real life?
• How much do they overlap?
• How are the ways that we live and interact with one another
changing?
10
Conversational rules
Rule 1: The current speaker chooses the next speaker by asking an opinion, question,
or request
Rule 2: Another person decides to start speaking
Rule 3: The current speaker continues talking
Farewell rituals
• Bye then, see you, yeah bye, see you later….
Sacks et al. (1978)
11
online conversations
• Do the same conversational rules apply?
• How do people repair them for:
▪
▪
▪
▪
Email?
Instant messaging?
Texting?
Skype or other videoconferencing software?
12
online conversations
VideoWindow system (Bellcore, 1989)
videophone from the 1960s
13
Videoconferencing and telepresence rooms
• Many to choose from to connect multiple people (for instance,
Zoom)
• Customized telepresence rooms for groups
14
Telepresence and Social presence
• Telepresence refers to
one party being present
with another party, who
is present in a physical
space, such as a
meeting room
• Social presence refers
to the feeling of being
there with a real person
when in virtual reality
Telepresence
robots
Facebook’s vision of socializing in a
3D world using VR (social presence)
15
2. Social Engagement
16
Social engagement
• Participation in activities of a social group
• Social exchange where people give or receive something from others
• Voluntary, unpaid
• Websites often used as hub to connect people
• Retweeting is a powerful way of connecting millions of people…
• The epic Twitter battle between Ellen DeGeneres and Carter Wilkerson
• Millions retweeted in the space of hours
17
Social Interaction
• Social interaction is central to our everyday lives
• Enable us to collaborate and coordinate our activities
• Keeping aware of what others are doing and letting others know what you are
doing are important aspects of collaborative working and socializing
• Many technology systems have been built to support telepresence, social
presence, and co-presence
• Social media has changed the way people keep in touch and manage their social
lives
18
Chapter 6: Emotional Interaction
19
3. Emotions and the User Experience
20
Emotions and the user experience
• Emotional interaction is concerned with how we feel and react when
interacting with technologies
• HCI has traditionally been about designing efficient and effective
systems
• Now more about how to design interactive systems that make
people respond in certain ways
▪ For example, to be happy, to be trusting, to learn, or to be motivated
21
Simple feedback obtaining method and emotive messages
22
Design an interface for feelings
• Can an interface be designed to improve how we feel?
• Our moods and feelings are continuously changing
▪ How does the interface keep track and know when to do something?
• Matching of moods and interfaces
• happy, angry, sad, bored, or focused?
• Emotional Intelligence
▪ understand relationship between facial expressions, body language,
gestures, and tone of voice.
▪ How do people change their body posture when they are happy or angry
23
Design an interface for feelings
24
Claims from model
Our emotional state changes how we think
• When frightened or angry,
• we focus narrowly and our bodies respond by tensing muscles and sweating
• More likely to be less tolerant
• When happy, we are less focused and our bodies relax
• Overlooking minor problems and be more creative
25
Three levels of design in mind
• Visceral design
• refers to making products look, feel, and sound good
• Behavioral design
• is about use, and it equates with traditional values of usability
• Reflective design
• is about considering the meaning and personal value of a product
26
Expressive and appearance of interfaces
• Both informative and fun
• Color, icons, sounds, graphical elements, and animations are used to
make the ‘look and feel’ of an interface appealing
▪ Conveys an emotional state
• In turn, this can affect the usability of an interface
▪ People are prepared to put up with certain aspects of an interface (for instance,
slow download rate) if the end result is appealing and aesthetic
a) Emotional icons were used in the 1980s
b) computers use more impersonal
27
Compare the design of thermostats
(a) The Nest thermostat has a
minimalist and aestheticallypleasing design
• Round face and simple dial
• Large font and numbers
(b) It is very different from
earlier thermostat designs
• Utilitarian and dull
28
Microsoft’s Clippy and IKEA’s Anna
• Clippy was disliked
by so many?
▪ Was it annoying,
distracting,
patronizing, or other?
• Anna appeared as a
virtual agent
▪ Blinked, moved her lips
and head to suggest
facial expressions
29
Frustrating interfaces
Many causes:
▪ application doesn’t work properly or crashes
▪ system doesn’t do what it is intended to do and users’ expectations are not met
▪ system does not provide sufficient information
▪ vague, obtuse, or condemning error messages
▪ Appearance of the interface is garish, noisy, gimmicky, or patronizing
▪ a system requires users to carry out too many steps to perform a task
30
Recommendations for Error messages
“The application Word Wonder has unexpectedly quit due to a type 2 error.”
“The application has expectedly quit due to poor coding in the operating
system”
Shneiderman’s classic guidelines for error messages include:
•
•
•
•
•
Avoid using terms like FATAL, INVALID, or BAD
Audio warnings
Avoid UPPERCASE and long code numbers
Messages should be precise rather than vague
Provide context-sensitive help
31
404 error message
A friendly cute image instead of the
impersonal 404 error message
32
Affective Computing and Emotional AI
• Affective computing
• how to use computers to recognize and express emotions as humans do
(Picard, 1998)
• Designing ways for people to communicate their emotional state
• It uses sensing technologies to measure GSR, facial expressions, gestures,
and body movement
• Emotional AI
• aims to automate the measurement of feelings and behavior using AI to
infer them from facial expressions and voice
• The goal is to predict user’s emotions and aspects of their behavior
33
4. Persuasive Technologies and Behavioral Change
34
Techniques used
• Cameras
• for measuring facial expressions
• Biosensors
• placed on fingers or palms to measure GSR
• Affective expression in speech
• Six core
expressions
typically measured:
• Sadness, disgust,
fear, anger,
contempt, and joy
• for example, intonation, pitch, and loudness
• Using accelerometers and motion capture
systems
• Body movement and gestures
35
Emotional data analysis
• If user screws up their face when an ad pops up
• If user starts smiling
• Website can adapt its ad, movie storyline, or content to match
user’s emotional state
• If system used in a car, it might detect an angry driver and suggest
they take a deep breath
• Eye-tracking, finger pulse, speech, and words/phrases also
analyzed when tweeting or posting to Facebook
• Nintendo’s Pocket Pikachu
• Designed to motivate children to be more physically active on a regular
basis
36
5. Anthropomorphism
37
Anthropomorphism
• Attributing human-like qualities to inanimate objects
• Well known phenomenon in advertising
▪ Dancing butter, drinks, and breakfast cereals
• Much exploited in human-computer interaction
▪ Make user experience enjoyable and motivating
▪ Make people feel at ease by reducing anxiety
• Furnishing technologies with personalities can make them
enjoyable to interact with
38
Which do you prefer?
Feedback when user gets something wrong:
1. “Now Chris, that’s not right. You can do better than that. Try
again.”
2. “Incorrect. Try again.”
Is there a difference as to what you prefer depending on type of
message? Why?
39
Robot-like or cuddly?
Aibo
The Haptic Creature
40
IT201
Human Computer Interaction
Week 7
Interfaces
3
Contents
1. Interface Types
2. Natural User Interfaces and Beyond
3. Interface Selection
4
Weekly Learning Outcomes
1. Highlight the main design and research considerations for
each kind of the interfaces.
2. Describe Natural User Interface (NUI) term and discuss the
selection of an interface for a given activity.
5
Required Reading
1. Interaction Design: Beyond Human-Computer Interaction,
5th Edition: Chapter 7 Page 193 to 257
Recommended Reading
GOOGLE Material Design https://material.io/design/
This Presentation is mainly dependent on the textbook: Interaction Design: Beyond Human-Computer Interaction, 5th
6
1. Interface Types
7
Interface Types
1. Command
2. Graphical
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
8
Command line interfaces
• Commands such as abbreviations (for instance, ls) typed in at the
prompt to which the system responds
• for example, by listing current files
• prefer command-line interfaces for performing certain operations as
part of a complex software package, such as for CAD environment
• System administrators, programmers, and power users often find that
it is much more efficient and quicker to use command languages such
as Microsoft’s PowerShell.
9
Command line interfaces – example
Second Life command line-based interface for visually-impaired users
10
Graphical user interfaces (GUIs)
• Graphical user interface (GUI) was based on Xerox Star interface
• WIMP (windows, icons, menus, pointer) :
• Windows
• Sections of the screen that can be scrolled, stretched, overlapped, opened, closed,
and moved around the screen using the mouse
• Icons
• Pictograms that represent applications, objects, commands, and tools that were
opened when clicked on
• Menus
• Lists of options that can be scrolled through and selected
• Pointing device
• A mouse controlling the cursor as a point of entry to the windows, menus, and
icons on the screen
11
GUIs
first generation
GUI
Smart watch
menues
12
Multimedia
• Combining different media in a single interface
• Graphics, text, video, sound, and animation
• Facilitates rapid access to multiple representations of information.
• Mostly used for training, educational, and entertainment purposes.
• Better way of presenting information than a single media
• Encourages activity exploration
13
Virtual Reality (VR)
• Creates user experiences to feel real when interacting with an artificial
world
• Can be constructed to have a higher level of fidelity with the objects
they represent compared to other forms of graphical interfaces
• Used by airlines and travel companies to enhance travel experience
• Enables users to interact with objects and navigate in 3D space
14
Application of VR
• Video games
• Therapy for fears
• Experience how others
feel emotions
• Enrich user’s planning
experience for travel
destinations
• Architecture, design, and
education
15
Website design and Mobile Interfaces
Website design
• Early websites were largely
text-based, providing
hyperlinks
• Breadcrumbs to enable
users to peruse other
pages without losing track
• design information for
multiple
platforms—keyboard or
touch
Mobile Interfaces
• Handheld devices to be
used on move
• Are pervasive, increasingly
used in all aspects of
everyday and working life
• phones, fitness trackers,
and smartwatches
• Larger-sized tablets used in
mobile settings
• flight attendants,
marketing professionals,
and at car rental returns
16
Appliances
• Devices at homes and public places
• Washing machines, remotes, toasters, printers, and navigation systems
• Users are not interested in exploring the interface
• LED displays with multiple functions and feedback
• such as temperature, minutes remaining, and so on.
• IoTs – connected to the Internet with companion devices and
controlled by remote apps.
• An example is a coffee maker that can be make a coffee remotely
17
Pen-based devices
• Write, draw, select, and move objects at an interface using light pens
or styluses
• For interaction with tablets and large displays,
• Annotate existing documents, such as spreadsheets, presentations,
and diagrams quickly and easily
• Can be used by remote teams to communicate and work on the same
documents.
Anoto pen
18
Touchscreens
• Single touchscreens
• used in walk-up kiosks (such as ticket machines and ATMs) to detect
the presence and location of a person’s touch on the display
• Multi-touch surfaces
• support a range of more dynamic finger tip actions, for example,
swiping, flicking, pinching, pushing, and tapping
• Registering touches at multiple locations using a grid
• Smartphones, iPods, tablets, and tabletops
• Hand gestures, tapping, zooming, stretching, flicking, dwelling, and
dragging
19
Gesture-based systems
• Gestures involve moving arms
and hands to communicate
• Camera recognition, sensor,
and computer vision techniques
• Recognize people’s arm and
hand gestures in a room
• Gestures need to be presented
sequentially to be understood
Recognizes core gestures for manipulating
MRI or CT images using Microsoft Kinect
20
Multimodal Interfaces
• Information is experienced and
detected using different
modalities, such as touch, sight,
sound, and speech
• more flexible, efficient, and
expressive means of humancomputer interaction
• multi-sensor input to enable
other aspects of the human body
to be tracked
• For example, eye gaze, facial
expression, and lip movements
• Provides input for customizing
user interfaces
Tracking a person’s movements
21
Shareable interfaces
• Designed for more than one person to use:
• Provide multiple inputs and sometimes
allow simultaneous input by co-located
groups
• Large wall displays where people use their
own pens or gestures
• Interactive tabletops where small groups
interact with information using their
fingertips
• For example, DiamondTouch, Smart Table,
and Surface
• Provide a large interactional space that can
support flexible group working
• Simultaneously view the interactions and
have the same shared point of reference
as others
A smartboard and an interactive tabletop interface
22
Augmented Reality
• Pokémon Go made it a household game
▪ Used smartphone camera and GPS to place
virtual characters onto objects in the
environment
• medicine, navigation, air traffic control,
games, and everyday exploring
• AR is the concept of mixed reality, where
views of the real world are combined with
views of a virtual environment
• Enables virtual try-ons (for example,
Snapchat filters)
• AT mirrors set up in retail stores for trying
on make-up, sunglasses, jewelry
23
Wearables
• A broad category of devices that are worn
on the body.
• smartwatches, fitness trackers, fashion tech,
and smart glasses.
• Started with head- and eyewear-mounted
cameras like Google Glass
• Jewelry, caps, glasses, shoes, and jackets
have all been the subject of
experimentation
• focused on convenience,
• enabling people to carry out a task without
having to take out and control a handheld
device.
Google Glass
• Exoskeleton clothing is also an area where
fashion meets technology
24
Robots and Drones
• Remote robots used in
hazardous settings
• Domestic robots helping
around the house
• Pet robots as human
companions
• Sociable robots that work
collaboratively with humans
▪ Encourage social behaviors
• Unmanned aircraft that are
controlled
• entertainment,
• Agricultural applications,
• Helping to track poachers in
wildlife parks in Africa
• Can fly low and stream
photos to a ground station
where images can be
stitched together into maps
• Can be used to determine
the health of a crop, or
when it is the best time to
harvest the crop
25
Brain-computer interfaces
• Brain-computer interfaces (BCI)
provide a communication pathway
between a person’s brain waves and an
external device, such as a cursor on a
screen
• Person needs training to concentrate
on the task, for example, moving the
cursor
• BCIs work through detecting changes
in the neural functioning in the brain
• BCIs apps:
▪ Games (for example, Brain Ball)
▪ Enable people who are paralyzed to
control robots
26
2. Natural User Interfaces and Beyond
27
Smart interfaces
• The motivation for many new technologies is to make them smart,
• smartphone, smartwatch, smart building, smart home, or smart appliance
• Smart refers to having some intelligence and connected to the internet
and other devices
• Context-aware
• understand what is happening around them and execute
appropriate actions.
• some have been programmed with AI so that they can learn the
context and a user’s behavior. they then change settings or switch
things on according to the user’s assumed preferences.
• Human-building interaction
• Buildings are designed to sense and act on behalf of the inhabitants
28
3. Interface Selection
29
Which Interface?
• Interface depends on
• task, users, context, cost, robustness, and so on
• Answering questions like:
•
•
•
•
Is multimedia better than tangible interfaces for learning?
Is speech as effective as a command-based interface?
Is a multimodal interface more effective than a mono-modal interface?
Will wearable interfaces be better than mobile interfaces Are virtual
environments the ultimate interface for playing games?
• Are shareable interfaces better at supporting communication and
collaboration compared with using networked desktop PCs?
30
IT201
Human Computer Interaction
Week 9: Chapter 8 Data
Gathering
3
Content
1. Five key issues
2. Interviews
3. Questionnaires
4. Observations
4
Weekly Learning Outcome
1. Explain an interview planning and execution
2. Summarize the design of a simple questionnaire
3. Demonstrate observation planning and execution
5
Five Key Issues
6
Key Issues in data
gathering
1. Setting goals
Set the purpose of the
data gathering process
before you start
understanding how
technology fits into
family life
2. Identifying participants
Decide who is your
participants
how many participants
are needed for a study?
7
3. Relationship with participants
Key Issues in data
gathering
Clear and professional
Informed consent when
appropriate
4. Triangulation
Look at the data from
different perspective
Collect more than one type of
data.
8
Key Issues in
data gathering
9
5. Pilot study
Key Issues in data
gathering
A pilot study is a small trial run
of the main study. The aim is to
make sure that the proposed
method is viable before
embarking on the real study
10
Data Recording
• Notes, audio, video, and photographs can
be used individually or in combination:
• Notes plus photographs
• Audio plus photographs
• Video
• What are the advantages and
disadvantages of the three approaches
(note-taking, audio recording with
photographs, and video) for data recording
in this environment?
11
Interviews
12
Interviews
13
Comparison
• Unstructured time consuming but give rich data
• Structured: Structured interviews are useful only when the goals
are clearly understood, and specific questions can be identified
• Semi-structured: provide a good balance between richness and
replicability. Combine both structure and unstructured types
• Focus groups allows diverse or sensitive issues to be raised that
might otherwise be missed
14
Conduct and plan an
Interview
15
Develop questions
interview
Questions’ type
16
To avoid when
creating interview
questions
17
Run the Interview
• Introduction: Introduce yourself, explain the goals of the
interview, mention the ethical issues, ask to record, and
consent form must be presented
• Warm-up: first question must be easy and make the
interviewee comfortable
• Main body: Present questions in a logical order
• A cool-off period: Include a few easy questions to defuse
tension at the end
• Closure: Thank interviewee, signal the end, for example,
switch recorder off.
18
Other forms of
Interviews
Digital interviews: Skype, ZOOM, Teams, Phone calls
Advantages for the interviewee:
• Participants will feel more relax in their own place
• No travel expenses needed
• No dress code required
• Can remain anonymous
• They can cut off the connection any time
Advantages for the interviewer:
• Wider number of participants
• Might lose the judgment of body language in some cases
19
Enriching the
Interview Process
• Props: Devices for prompting
interviewee, for example, use a
prototype, scenario
• Help to ground the data in a
real setting.
• Easier for the participants to get
involved
20
Questionnaire
21
Questionnaires
• Different questions type can be used closed or open
• Closed questions are easier to analyze, and may be
distributed and analyzed by computer
• Similar to interview questions
• They can be directed to large sample of populations in
different locations
• Can be distributed by paper, email and the web
22
Designing
Questionnaires
• Questions must have a logical order The impact of a
question can be influenced by question order
• Think if you need different versions of the questionnaire
• Clear instructions on how to complete the questionnaire
must be included for example, whether answers can be
saved and completed later.
• Check typographical mistakes
• Think about the length of the questionnaire, don’t include
unnecessary questions
23
Questions and
Response Format
24
How to get Good
Responses
40 % response rate is good, 20% is often acceptable
25
Advantages of the
Online
Questionnaires
• It is easy and quick to distribute
• Quick responses
• Free of charge (unlike paper ones)
• Data can be collected in database for analysis
• Reduced time for analyzing the data
• Errors correction can be done easily
26
Creating Online
Questionnaires
27
Online
Questionnaire
Example
Questionnaire shows
check boxes, radio boxes,
and pull-down menus
28
Disadvantages of
the Online
Questionnaire
• when population size is unknown, sampling is
problematic
• Preventing individuals from responding more than
once can be an issue
• Individuals have also been known to change
questions in email questionnaires
29
Creating Online
Questionnaire
30
Observation
31
Observation’s Types
1. Direct observation
2. Indirect observation: tracking users’
activities
32
Direct
Observation’s Types
33
Structuring Frameworks for
Observation in the Fields
Simple framework
• The person: Who?
• The place: Where?
• The thing: What?
Detailed framework
Space: What is the physical space like?
Actors: What are the names and relevant details of the people
involved?
Activities: What are the actors doing, and why?
Objects: What physical objects are present, such as furniture?
Acts: What are specific individual actions?
Events: Is what you observe part of a special event?
Time: What is the sequence of events?
Goals: What are the actors trying to accomplish?
Feelings: What is the mood of the group and of individuals?
34
Planning and conducting an
observation field
1. Decide on the level of involvement: from
passive observer to active participant
2. How to gain acceptance
3. How to handle sensitive topics, for example,
culture, private spaces, and so on
4. How to collect the data:
• What data to collect
• What equipment to use
• When to stop observing
35
Ethnography
•
•
•
•
•
•
•
•
•
•
A method of observing human interactions in social settings and activities
It is a direct observation
A researcher’s degree of participation can vary
Collections of comments, incidents, and artifacts are made
Co-operation of people being observed is required
Useful informants
Continuous data analysis
Interpretivist technique
Questions get refined as understanding grows
Examples usually mentioned in reports
36
List of materials that might be
collected during an ethnographic study
37
Online Ethnography
38
Direct observation in Controlled
Environment
• The arrangement of equipment with respect to the participant is
important
• One of the problems with observation is that the observer doesn’t know
what users are thinking
• Think aloud technique The technique requires people to say out loud
everything that they are thinking and trying to do so that their thought
processes are externalized
• The occur of silence is a challenge
39
Indirect
Observation
Tracking users’ activities
• Diaries Participants are asked to write a diary of their
activities on a regular basis
• Interaction logging Interaction logging uses software
to record users’ activity in a log that can be examined
later
• Web analytics Examining the trail of activity that
people leave behind when they are active on websites,
Twitter, or Facebook is also a form of indirect
observation
Video and photographs collected remotely by drones or
other equipment
40
Choosing and
Combining Techniques
41
Choosing
Technique
42
IT201
Human Computer Interaction
Week 10: Chapter 9 DATA ANALYSIS,
INTERPRETATION, AND PRESENTATION
3
Contents
1. Quantitative and Qualitative
2. Basic Qualitative and Quantitative analysis
3. Which kind of analytic framework to use?
4. Tools to support data analysis
5. Interpreting and presenting the findings
4
Weekly Learning Outcomes
1. Describe the difference between qualitative and
quantitative data and analysis
2. Analyze data gathered from questionnaires, interviews,
and observations
3. Identify common pitfalls in data analysis, interpretation,
and presentation
5
Qualitative and Quantitative
Data
6
Quantitative data:
Expressed as numbers
Qualitative data: Difficult
to measure as numbers,
quality data
7
8
Qualitative and
Quantitative analysis
9
First step of Analysing
data
10
Basic Quantitative Data
• Averages:
1. Mean: the total of values added /divide
by number of data points
2. Median: Middle value of data when
ranked
3. Mode: Figure that appears most often
in the data
• Percentages %
• Graphical representations give overview of
data
11
Quantitative data
analysis
• The data in the following table
represents the time taken for a group
of users to select and buy an item from
an online shopping website. Using a
spreadsheet application graph to give
overall view of the data.
• From these two diagrams, there are
an areas for further investigation. The
values for user N (24) and user S (26)
are higher than the others and could be
looked at in more detail
12
Question design
affect data analysis
• Open question: Each answer
analyzed separately
• Closed question: Analyzed
quantitatively
Fixed alternative answers restrict what
can be said in findings
13
Qualitative Data
Analysis of qualitative data
analysis may be inductive
(extracted from the data),
or deductive (pre-existing
concepts)
14
Qualitative and Quantitative
Analysis
15
Basic Qualitative
Analysis
16
Looking for critical
incident
• It helps identifying significant subsets of the data
for more detailed analysis identify specific
incidents and then to focus and analyze them in
detail
• Incident may be positive or negative
17
Identifying Themes
18
Identifying Themes
To identify a theme:
• Start with exploring data
• Identify the theme
• Look for overall narrative
• Then use of affinity diagrams
The approach seeks to organize
individual ideas and insights into a
hierarchy showing common structures
and themes.
• Notes are grouped together when
they are similar in some fashion.
19
Categorizing Data
Inductive analysis is appropriate when
the study is exploratory
20
Analytic Frameworks
21
Which analytic
Framework to use
22
Conversation
analysis
• Focus on how a conversation is conducted
• Used in sociological studies
• Compare conversations, for instance, faceto-face conversations Vs social media
conversation
23
Conversation
Analysis
An extract of the conversation between
a family and Alexa
24
Discourse Analysis
25
Discourse Analysis
Example
• Discourse analysis is what you do when you are saying that you
are doing discourse analysis
• According to Coyle, discourse analysis is what you do when you
are saying that you are doing discourse analysis
• By adding just three words, “According to Coyle,” the sense of
authority changes, depending on what the reader knows about
Coyle’s work and reputation
26
Content Analysis
• Involves categorizing data into themes and study the
frequencies of them
• Can be used for any “text” such as: video, newspapers,
advertisements, images, and sounds
• It is often used as a combination with other techniques
27
Content Analysis
Example
• Online content can be analyzed using this technique , such as: text of tweets, links,
animated gifs, videos, and images.
• For example, Mark Blythe and Paul Cairns (2009) analyzed 100 videos from a
YouTube search by relevance for “iPhone 3G” using content analysis.
• They categorized the videos into seven categories:
1.
2.
3.
4.
5.
6.
7.
Review
Reportage
Unboxing
Demonstration
Satire
Advertisement
Vlog commentaries (such as, complaints about queues).
28
Interaction Analysis
29
Interaction Analysis
Example
• An example Brigitte Jordon and Austin Henderson (1995) use to
illustrate this process is their study of people around a pregnant
woman who was having her first contraction
• They noticed that, at the point of the first contraction, the medical
staff and family all shifted their attention away from the woman to
the monitoring equipment.
• They were able to find many more examples of this phenomenon,
providing strong evidence that the presence of high-tech
equipment changes the practice of caregiving, specifically that
caregiving is mediated by the real-time data presented through the
equipment.
30
Grounded Theory
31
Grounded Theory
Example
• The grounded theory
approach allowed the
development of a
taxonomy that reflects
the style and purpose of
the genre
32
System based
Frameworks
33
Socio-Technical
Systems Theory
(STS)
34
Distributed
cognition of
teamwork
• Study the nature of cognitive
phenomena across individuals,
artifacts, and internal and external
representations.
• It is useful for studying how
medical teams work and manage
new technologies introduced into
their work environment.
35
Tools to Support Data Analysis
36
Tools to support
data analysis
You can do it manually
• Spreadsheet — easy to use, basic graphs
• Statistical packages, for example, SAS and SPSS
• Qualitative data analysis tools
• Categorization and theme-based analysis
• Quantitative analysis of text-based data
• Nvivo and Dedoose support qualitative data analysis
• Computer Assisted Qualitative Data Analysis (CAQDAS)
Networking Project, based at the University of Surrey
37
Interpreting and presenting the
findings
38
Interpreting presenting
the findings
• Choosing an appropriate way to present
the findings of a study is as important as
choosing the right analytical approach
• The choice depends on:
1. Data gathering
2. Analytical techniques used
3. Audience
4. The study goals
39
Presenting the findings
40
Structed Notation
41
Using Stories
42
Summarise Findings
43
IT201
Human Computer Interaction
Week 11: Chapter 11 Discovering
Requirements
3
Contents
1. What, How and Why?
2. What are Requirements?
3. Data gathering for requirements
4. Brining requirements into life
4
Weekly Learning Outcomes
1. Describe different kinds of requirements
2. Illustrate use cases to capture interaction
5
What, How and Why?
6
What ,how and
why?
What is the purpose
of the requirements
activity
Two phases
1. exploring the
problem space to
gain insights about
the problem.
2. Establishing a
description of what
will be developed
7
What ,how and
why?
How to capture
requirements once
discovered
Can be captured in
different forms:
For products monitor
App, prototype or
operational product.
For process control
software structured or
rigorous notations
8
What ,how and
why?
Why Bother?
• To avoid
miscommunication
• To produce usable
products for users
9
What are Requirements?
10
What are
Requirements?
• A statement about a specific product which include what
it is expected to do or how it will perform
• The goals of the requirements activity is to identify,
clarify, and capture the requirements
• There is different forms of requirements at different
levels of abstraction
• User stories is an alternative way to capture what a
product is intended to do
11
Volere Shell
Example requirement
expressed using an
atomic requirements
shell from Volere
12
Different Type of
Requirements “Traditional”
13
Different types of
Requirements
Six of the most common types:
1. Functional requirements
2. Data requirements
3. Environment requirements
4. User requirements
5. Usability requirements
6. User experience requirements
14
Data Requirements
15
Environmental
Requirements
16
Data Gathering for
Requirements
17
Data gathering for
Requirements
Data gathering techniques: Interviews, observation, and
questionnaires
Studying documentation:
1. Manuals, standards, or activity logs, are a good source of data
2. Procedures and rules are often written down in manuals
3. Good source of data about the steps involved in an activity and any
regulations governing a task
4. Good for understanding legislation and getting background
information
5. Researching other products can also help identify requirements.
18
Data Gathering for
Requirements
1. Using Probes to Engage with Users
2. Contextual Inquiry
3. Brainstorming for Innovation
19
Using Probes to
engage with users
20
Probes Types
21
Contextual inquiry
22
Contextual inquiry
Four main principles:
1- Context: Going to the user, wherever they
are, and seeing what they do as they do it
2- Partnership: User and interviewer explore
user’s life together
3- Interpretation: Observations interpreted
by user and interviewer together
4- Focus: Project focus to understand to what
should be paid attention
23
Contextual inquiry
24
For parts for
contextual inquiry
1. Overview
2. Transition
3. Main interview
4. Wrap-up
25
Brainstorming for
innovation
26
Bringing Requirements into life
27
Bringing Requirements
into life
• Personas
Rich descriptions of typical users of the
product under development
• Scenarios
An “informal narrative description”
28
Personas
29
Persona’s example
30
Persona’s example
31
Scenarios
32
Scenarios Vs Personas
33
Use Cases
34
Use Cases Styles
35
Example essential use
case for travel
organizer
RetrieveVisa
USER INTENTIONSYSTEM RESPONSIBILITY
Find visa requirements
Request destination and nationality
Supply required information Obtain appropriate visa info
Obtain copy of visa info Offer info in different formats
Choose suitable format
Provide info in chosen format
Note : The user intention and system responsibility are offset vertically, showing a sequence of interactions
36
Use case for travel
organizer
1. The product asks for the name of the destination country
2. The user provides the country’s name
3. The product checks that the country is valid
4. The product asks the user for their nationality
5. The user provides their nationality
6. The product checks the visa requirements of that country for a passport holder of the
user’s nationality
7. The product provides the visa requirements
8. The product asks whether the user wants to share the visa requirements on social
media
9. The user provides appropriate social media information
37
Alternative courser for
travel organizer
Some alternative courses:
4. If the country name is invalid:
4.1: The product provides an error message
4.2: The product returns to step 1
6. If the nationality is invalid:
6.1: The product provides an error message
6.2: The product returns to step 4
7. If no information about visa requirements is found:
7.1: The product provides a suitable message
7.2: The product returns to step 1
38
IT201
Human Computer Interaction
Week 12: Chapter 12 Design, Prototyping and
construction
3
Content
1. Prototyping
2. Conceptual design
3. Concrete design
4. Generating prototypes
5. Construction
4
Weekly Learning Outcomes:
1. Describe prototyping and the different types of
prototyping activities
2. Explain the conceptual model for a product
3. Describe physical computing kits and software
development kit and their role in construction
5
Prototyping
6
What is
Prototype
Prototyping provides a
small-scale model of an
idea—whether it is a
new product or a
modification of an
existing one—which
allows designers to
communicate their ideas
and users to try them
out.
7
Prototype example
Small-scale model such as:
• A miniature car
• A miniature building
or town
8
Prototype example
9
What is Prototype in
interaction design
10
Why Prototype
11
Prototype
Different kinds of prototyping
• Low fidelity
• High fidelity
Compromises in prototyping
• Vertical
• Horizontal
12
Low-Fidelity
Prototyping
• It does not look very much like the final product, nor does it
provide the same functionality.
• For example, it may use very different materials, such as
paper and cardboard rather than electronic screens and
metal, it may perform only a limited set of functions, or it
may only represent the functions and not perform any of
them.
• Advantages: simple, cheap, quick to produce and easily
changed.
13
Low-Fidelity
Prototyping example
14
1. Storyboarding
• It is a series of sketches
showing how a user
might progress through a
task using the product.
• Often used with scenarios,
bringing in more detail
and a chance to role play
(Christina) using a new mobile device for exploring historical
15
2. Sketching
• Depends on hand-drawn
sketches
• Many people find it difficult to
engage in sketching because
they are not confident about
their drawing quality
• Use simple boxes, stick fingers
for sketching vocabulary
16
3. Prototyping with
Index cards
• It is used for developing a range of
interactive products.
• Simple and successful
• Index cards (3 x 5 inches)
• Each card represents
one element of interaction
• In evaluation, can step through the
cards
17
4. ‘Wizard-of-Oz’
Prototyping
• The user thinks they are interacting
with a computer, but a human is
responding to output rather than
the system
• Usually done early in design to
understand users’ expectations
18
High-Fidelity
Prototyping
• The materials used is expected to be in the final product
• The prototype looks more like the final system than a low-fidelity
version
• High-fidelity prototypes can be developed by integrating existing
hardware and software components
• Disadvantages: users think they have a complete system see
compromises
19
Compare
Type
Advantages
Disadvantages
Low-fidelity prototype
•
•
•
•
•
•
•
Quick revision possible
More time can be spent on
improving the design before
starting development
Evaluates multiple design concepts
Useful communication device
Proof of concept
•
•
•
•
•
•
Limited error checking
Poor detailed specification for
development
Facilitator-driven
Limited usefulness for usability tests
Navigational and flow limitations
High-fidelity prototype
•
•
•
•
•
•
•
•
•
(Almost) complete functionality
Fully interactive
User-driven
Clearly defines navigational scheme
Use for exploration and test
Look and feel of intended product
Serves as a “living” or evolving
specification
Marketing and sales tool
•
•
•
•
•
•
•
•
More resource-intensive to develop
Time-consuming to modify
Inefficient for proof-ofconcept designs
Potential of being mistaken for the
final product
Potential of setting inappropriate
expectations
20
Compromises
Prototyping
• For software-based prototyping, maybe there is a slow response? sketchy
icons? limited functionality?
• “In the wild” prototypes operational but not necessarily robust
Two common types of compromise:
Horizontal: Provides a wide range of functions, but with little detail
Vertical: Provides a lot of detail for only a few functions
• Compromises in prototypes must not be ignored. Product needs
engineering
21
Conceptual Design
22
Conceptual Design
23
Developing an initial
conceptual model
The following must be considered:
▪ Metaphors interface selection
How to choose interface metaphors that will help users understand
the product?
▪ Interaction types selection
Which interaction type(s) would best support the users’ activities?
▪ Do different interface types suggest alternative design insights or
options?
24
Interface metaphor
selection
• Interface metaphors combine familiar knowledge with new knowledge in a
way that will help the user understand the product
Three steps:
1. Understand functionality.
2. Identify potential problem areas
3. Generate metaphors
• Evaluate metaphors:
❑ How much structure does it provide?
❑ How much is relevant to the problem?
❑ Is it easy to represent?
❑ Will the audience understand it?
❑ How extensible is it?
25
Interaction type
selection
26
Do different interface
types provide insight?
Interfaces types’ subset:
1. Shareable interfaces: it is planned to be used by a group of people
and it should be exciting and fun.
2. Tangible interfaces: are a kind of sensor-based interaction, where
blocks or other physical objects are moved around.
3. Virtual Reality: an ideal product for making use of a virtual reality
interface, as it would allow individuals to experience the destination
and not the whole product, just for the elements where users want to
experience the destination.
27
Expanding the initial
conceptual model
28
Concrete Design and
Generating Prototype
29
Concrete design
• Difference between conceptual and concrete is a matter of changing
emphasis: during design
• Aspects to concrete design: Color, icons, buttons, interaction devices, etc.
• Two aspects of Dealing with issues related to user characteristics and
context:
1. Accessibility refers to the extent to which a product is accessible to as
many people as possible.
2. Inclusiveness means being fair, open, and equal to everyone.
30
Generating Prototype
31
Generate Storyboard
32
Generate Storyboard
33
Generate Card-Based
Prototype
Generate a card-based prototype from a use case
▪ Consider each step in use case – what interaction element is
needed
▪ Draw a card that captures it
34
Generate Card-Based
Prototype
35
Construction
36
Construction
1. Physical computing kits
• Use electronics to build and code prototypes
• Toolkits available include:
Arduino
LilyPad (for fabrics)
Senseboard
BBC micro:bit
MaKey MaKey
• Designed to be used by wide range of people
2. Software Development Kits (SDK)
It is a package of programming tools and components that supports the
development of applications for a specific platform
37
Physical Computing
Kits
The Arduino
board
Source: Used courtesy of Dr. Nicolai Marquardt
38
Physical Computing
Kits
The Makey Makey toolkit
Source : Makey Makey
39
Physical Computing
Kits
The BBC micro:
bit
Source: micro:bit. Used courtesy of Micro:bit Foundation
40
SDKs: Software
Development Kits
• For example, for iOS on iPhone and iPad and for Android on mobile
phone and tablet apps.
• Makes development much easier
• Includes: IDE (integrated development environment) , documentation,
drivers, sample code, and application programming interfaces (APIs)
41
Software Development
Kits Examples
• Amazon’s Alexa Skills Kit for voice-based services
• Apple’s ARKit for augmented reality
• Microsoft’s Kinect SDK for motion tracking
42
IT201
Human Computer Interaction
Week 13: Chapter 13 Interaction design in practice
Chapter 14: Introducing Evaluation
3
Contents
1. Explain the Agile UX process
2. Design Patterns
3. Tools for Interaction Design
4
Explain the Agile Process
5
Explain the Agile Process
6
Weekly Learning Outcomes
1. Describe some of the key trends in practice
related to interaction design
2. Discuss the place of UX design in Agile
development projects
7
Explain the Agile Process
8
Agile development
Short (one to three week)
timeboxes of iterative
development (sprint, iteration,
cycle)
Early and repeated customer/
user feedback
Re-prioritization of work based
on customer or user so that
emergent requirements can be
handled
Many approaches, for example,
eXtreme Programming (XP),
Scrum, Kanban, and DSDM
9
Agile UX
• It is a mixed techniques from interaction design and agile methods
• AgileUX requires balancing research and reflection for good UX with
rapid iterations incorporating user feedback
• In Agile iterations, requirements are explained and re-prioritized, rather
than specified up-front
• All techniques in UX are still relevant, but when to use and how much
needs careful planning
• Focus on product, not design, as deliverable
• Cross-functional teams
10
Agile UX practical
Areas
User research
Aligning work practices
Documentation
11
User Research
• Data gathering and analysis provide the ability to characterize users,
tasks, and context
• Detailed user research needs time cannot be fitted within a limited
timebox.
▪ Some user research can be performed in iteration 0 (zero), before
implementation starts
▪ Ongoing program of user research over a longer period.
12
LeanUX
Create products quickly to get
real user feedback for future
developments
Tight iterations of buildmeasure-learn
Minimum viable product tests
assumptions
Source: Gothelf, J. with J. Seiden (2016) Lean UX, 2nd edition, O’Reilly.
13
Aligning work
practices
Designing a complete
product upfront
causes problems
because of reprioritization
Some upfront work is
needed (technical and
UX)
Before development
starts a product’s
vision must be created .
Do design work one
iteration ahead of
development.
Use a parallel tracks
approach:
Some teams work two
iterations ahead
14
Parallel tracks
approach to Agile
UX
Source: Sy, D. (2007) Adapting usability investigations for development, Journal of
Usability Studies 2(3), May, 112–130. User Experience Professionals Association.
15
Aligning work
practices
Advantages of parallel tracks approach:
• Saving time:
1. No design time wasted on features not implemented
2. Usability testing and contextual inquiry could be done on the same
customer visit
3. Feedback on the designs received from developers and customers in a
timely manner
• Flexible schedule Agile flexibility supports schedule changes if a
problem is found
16
Documentation
Common communication approach for UX designers
In Agile process, minimal documentation is recommended so more time can be spent on design
and discussion
Only use documentation where needed by asking:
•
•
•
•
•
•
Can we reduce the amount of time spent on documentation?
Who uses documentation?
What is the minimum needed by customers?
How efficient is the sign-off process?
Is there any duplication?
How polished does documentation need to be?
17
Documentation
(Low Fidelity)
• Sour…
