SlideShare a Scribd company logo
CHAPTER 1
INTRODUCTION
TO
INTERACTION
DESIGN
Contact
Hours
Credits IA ESE
4 4 20 80
Modu
le No.
Topics Hrs
.
1
Introduction to Interaction Design 09
Good and Poor Design, What is Interaction Design, The Process Of Interaction
Design, Goal of Interaction Design and Usability.
2 Understanding and Conceptualizing Interaction Cognitive aspects and Social,
Emotional Interaction
09
Understanding the Problem Space and Conceptualizing Design, Conceptual Model,
Interface TypesCognitive aspects, Social Interaction and the Emerging Social
Phenomena,Emotions and the User Experience, Expressive and Frustrating
Interfaces, Persuasive Technologies .
3 Data Gathering, Establishing Requirements, Analysis, Interpretation and
Presentation
09
Establishing Requirements, Five Key Issues, Techniques for Data Gathering, Data
Analysis Interpretation and Presentation, Task Description and Task Analysis
4
Process of Interaction Design, Prototyping, Construction,
08
Interaction Design Process, Prototyping and Conceptual Design, Interface
Modul
e No.
Topics Hrs.
5 Design rules and Industry standards 07
Design principles, Principles to support Usability, Standards and
Guidelines, Golden rules and Heuristics, ISO/IEC standards
6 Evaluation Techniques and Framework 06
The Why, What, Where and When of Evaluation, Types of
Evaluation,case studies, DECIDE Framework, Usability Testing,
conducting experiments, Field Studies, Heuristic Evaluation and
walkthroughs, Predictive models.
Total Hr. 48
Ch 1 Introduction to User Interaction Design  Mary Margarat
Ch 1 Introduction to User Interaction Design  Mary Margarat
Ch 1 Introduction to User Interaction Design  Mary Margarat
Ch 1 Introduction to User Interaction Design  Mary Margarat
Ch 1 Introduction to User Interaction Design  Mary Margarat
What is Interaction Design?
■ Designing interactive products to support people
in their everyday and working lives.
■ The design of spaces for human communication
and interaction.
INTERACTION DESIGN IS.....
KEY PRINCIPLE IS.....
KEY PRINCIPLE IS.....
Ch 1 Introduction to User Interaction Design  Mary Margarat
Ch 1 Introduction to User Interaction Design  Mary Margarat
What is Usability?
■ Usability is part of the broader term “user experience”
and refers to the ease of access and/or use of a
product or website.
■ In essence, it is about developing interactive products
that are easy, effective, and enjoyable to use.
What is User Interface (UI) Design?
■ User interface (UI) design is the process of making
interfaces in software or computerized devices with a focus
on looks or style.
■ Designers aim to create designs users will find easy to use
and pleasurable.
■ UI design typically refers to graphical user interfaces but
also includes others, such as voice-controlled ones.
Usable interface has three main
outcomes:■ It should be easy for the user to become familiar with
and competent in using the user interface during
the first contact with the website.
■ It should be easy for users to achieve their
objective through using the website.
■ It should be easy to recall the user interface and how to
use it on subsequent visits.
What is Human-Computer Interaction
(HCI)?
■ Human-computer interaction (HCI) is a
multidisciplinary field of study focusing on the
design of computer technology and, in particular,
the interaction between humans (the users) and
computers.
■ “Interaction Design is the creation of a dialogue
between a person and a product, system, or service.
Evolution of HCI ‘interfaces’
■ 50s - Interface at the hardware level for engineers - switch panels
■ 60-70s - interface at the programming level - COBOL, FORTRAN
■ 70-90s - Interface at the terminal level - command languages
■ 80s - Interface at the interaction dialogue level - GUIs, multimedia
■ 90s - Interface at the work setting - networked systems,
groupware
■ 00s - Interface becomes pervasive
– RF tags, Bluetooth technology, mobile devices, consumer electronics,
interactive screens, embedded technology
HCI
USABILITY
INTERACTI
ON DESIGN
GOAL OF INTERACTION DESIGN
IS.....
5 Dimensions of Interaction Design
Ch 1 Introduction to User Interaction Design  Mary Margarat
Ch 1 Introduction to User Interaction Design  Mary Margarat
Ch 1 Introduction to User Interaction Design  Mary Margarat
Ch 1 Introduction to User Interaction Design  Mary Margarat
Ch 1 Introduction to User Interaction Design  Mary Margarat
GOOD AND POOR
DESIGN
BAD DESIGN
Information overload
GOOD DESIGN
Easy to understand
BAD DESIGN
BAD DESIGN: It is confusing
ATM’s that spit out your card after the cash
• ATM users are waiting for one
thing: cash. So when the cash
dispenses their immediate
reaction is to leave.
• That’s why it’s imperative that
the cash comes out last—
people are far less likely to
forget their card if it comes out
before the cash.
Doors that don’t indicate which side to push
You have a 50% chance of getting this door right:
Classes with exclusively right-handed desks
Example of bad and good design
– Elevator controls and labels on the bottom row all look the same, so
it is easy to push a label by mistake instead of a control button
– People do not make same mistake for the labels and buttons on the
top row. Why not?
Why is this vending machine so bad?
■ Need to push button first
to activate reader
■ Normally insert bill first
before making selection
■ Contravenes well known
convention
PROCESS
OF
INTERACTION DESIGN
What to design ???
■ Need to take into account:
– Who the users are
– What activities are being carried out
– Where the interaction is taking place
■ Need to optimise the interactions users have with a
product
– Such that they match the users activities and needs.
■ Use tried and tested user-based methods
Interaction Design
Interaction Design involves four basic activities:
■ Identifying needs and establishing requirements.
■ Developing alternative designs that meet those
requirements.
■ Building interactive versions of the designs so that
they can be communicated and assessed.
■ Evaluating what is being built throughout the
process.
A model for interaction design
Evaluate
(Re)Design
Identify needs/
establish
requirements
Build an
interactive
version
Final product
Start
Three characteristics of the Interaction Design
Process:
1. Users involved throughout the development of the
project
2. Specific usability and user experience goals should
be identified, documented and agreed upon at the
beginning
3. Iteration through the four activities (above).
Usability Goals:
■ Effectiveness
■ Efficiency
■ Safety
■ Utility
■ Learnability
■ Memorability
Usability
Goals
How easy is it to work in multidisciplinary
teams?
■ More people involved in doing interaction design the
more ideas and designs generated…but…
■ The more difficult it can be to communicate and
progress forwards the designs being created
What do professionals do in the ID business?
■ interaction designers - people involved in the design of all the
interactive aspects of a product
■ usability engineers - people who focus on evaluating products, using
usability methods and principles
■ web designers - people who develop and create the visual design of
websites, such as layouts
■ information architects - people who come up with ideas of how to plan
and structure interactive products
■ user experience designers - people who do all the above but who may
also carry out field studies to inform the design of products
What is involved in the process of interaction
design
■ Identify needs and establish requirements
■ Develop alternative designs
■ Build interactive prototypes that can be communicated
and assessed
■ Evaluate what is being built throughout the process
Core characteristics of interaction design
■ users should be involved through the development of the
project
■ specific usability and user experience goals need to be
identified, clearly documented and agreed at the beginning
of the project
■ iteration is needed through the core activities
Usability goals
■ Effective to use
■ Efficient to use
■ Safe to use
■ Have good utility
■ Easy to learn
■ Easy to remember how to use
User experience goals
– Satisfying - rewarding
– Fun - support creativity
– Enjoyable - emotionally fulfilling
– Entertaining …and more
– Helpful
– Motivating
– Aesthetically pleasing
– Motivating
Usability and user experience
goals
■ How do usability goals differ from user experience goals?
■ Are there trade-offs between the two kinds of goals?
– e.g. can a product be both fun and safe?
■ How easy is it to measure usability versus user experience
goals?
Design principles
■ Generalizable abstractions for thinking about
different aspects of design
■ The do’s and don’ts of interaction design
■ What to provide and what not to provide at the
interface
■ Derived from a mix of theory-based knowledge,
experience and common-sense
Key points
■ ID involves taking into account a number of
interdependent factors including context of use,
type of task and kind of user
■ Need to strive for usability and user experience
goals
■ Design and usability principles are useful
heuristics for analysing and evaluating
interactive products
Questions
■ Define: User Interaction Design, User Interface Design, User Experience
■ What is the difference between Good Design & Bad Design?
■ Which Goals of Interaction Design needs to be followed by Designer while
working on best User Interaction Design?
■ What are the Four Basic Activities followed in the process of Interaction Design?
Explain.
■ What are the five dimensions of Interaction Design
■ Describe what interaction design is and how it relates to human-computer
interaction.
■ Explain the process of Interaction design
■ What is the importance of interaction design? Write and explain goals of
Interaction design.
■ Discuss Interaction Paradigms.
■ Which activities are carried out in the process of Interaction Design? Explain all in

More Related Content

PDF
3450_Fall2016_Syllabus
PPTX
User Centered Design: Interviews & Surveys.
PPTX
Information Architecture. Card Sorting
PPTX
Interaction design patterns
PPT
Chapter 1 id2e_slides
PPSX
What is interaction design
PPT
What Is Interaction Design
PDF
User interface and user experience ui ux design basics
3450_Fall2016_Syllabus
User Centered Design: Interviews & Surveys.
Information Architecture. Card Sorting
Interaction design patterns
Chapter 1 id2e_slides
What is interaction design
What Is Interaction Design
User interface and user experience ui ux design basics

What's hot (15)

PDF
How to Find a Good UI/UX Designer (or be one!)
PPTX
Human Computer Interaction Introduction
PPTX
Interaction design quick tour 1
PPT
HCI Presentation
PDF
Understanding the Problem Space and Conceptualizing in HCI
PPTX
Multi Platform User Exerience
PDF
Principles of Interactive Design
PPTX
Intro to ux and how to design a thoughtful ui
PPTX
UX & Design Riyadh: Usability Guidelines for Websites & Mobile Apps
PPTX
User profiles. Personas
PDF
[TechTalks] Effects of UI/ UX Designs on Customer Satisfaction & Loyalty
PPTX
"What Are the Key Differences between UI and UX Design?"
PPTX
Chapter1(hci)
PDF
Using 10 Dumpster On Rent Strategies Like The Pros
PDF
Introduction to UX Design
How to Find a Good UI/UX Designer (or be one!)
Human Computer Interaction Introduction
Interaction design quick tour 1
HCI Presentation
Understanding the Problem Space and Conceptualizing in HCI
Multi Platform User Exerience
Principles of Interactive Design
Intro to ux and how to design a thoughtful ui
UX & Design Riyadh: Usability Guidelines for Websites & Mobile Apps
User profiles. Personas
[TechTalks] Effects of UI/ UX Designs on Customer Satisfaction & Loyalty
"What Are the Key Differences between UI and UX Design?"
Chapter1(hci)
Using 10 Dumpster On Rent Strategies Like The Pros
Introduction to UX Design
Ad

Similar to Ch 1 Introduction to User Interaction Design Mary Margarat (20)

PPTX
What is Interaction Design?
PDF
Design Thinking Dallas by Chris Bernard
PPTX
Introduction & Course Overview: Design Thinking for User Experience Design, P...
PPTX
Design process interaction design basics
PDF
Design Learnings
PPT
HCI Module-4-UX-Emotion-and-Experience.ppt
PPTX
Myth & fact - Designing for UX
PPTX
UI/UX Design
PDF
Ux matters2016-final
PPTX
Human Computer Interaction: Lecture 2: Interaction Design
PDF
Proof That UI UX Really Works
PPTX
User Experience Explained
PDF
UIUX Interview Questions PDF By ScholarHat
PDF
Andolfatto Filippo Master Thesis - The modern store: usage of multimodal tech...
PPTX
UX Design Process - MIT ID Innovation
PDF
UX/UI Introduction
PPTX
Design Thinking: A Common Sense Process
PPTX
Usability Workshop, 11-8-2012
PPTX
UI UX DESIGN.pptx
PDF
User Experience Design: an Overview
What is Interaction Design?
Design Thinking Dallas by Chris Bernard
Introduction & Course Overview: Design Thinking for User Experience Design, P...
Design process interaction design basics
Design Learnings
HCI Module-4-UX-Emotion-and-Experience.ppt
Myth & fact - Designing for UX
UI/UX Design
Ux matters2016-final
Human Computer Interaction: Lecture 2: Interaction Design
Proof That UI UX Really Works
User Experience Explained
UIUX Interview Questions PDF By ScholarHat
Andolfatto Filippo Master Thesis - The modern store: usage of multimodal tech...
UX Design Process - MIT ID Innovation
UX/UI Introduction
Design Thinking: A Common Sense Process
Usability Workshop, 11-8-2012
UI UX DESIGN.pptx
User Experience Design: an Overview
Ad

Recently uploaded (20)

PPTX
IOT PPTs Week 10 Lecture Material.pptx of NPTEL Smart Cities contd
PDF
Mitigating Risks through Effective Management for Enhancing Organizational Pe...
PPTX
Lesson 3_Tessellation.pptx finite Mathematics
PPTX
bas. eng. economics group 4 presentation 1.pptx
PDF
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
PPTX
Strings in CPP - Strings in C++ are sequences of characters used to store and...
PPTX
Sustainable Sites - Green Building Construction
PPTX
KTU 2019 -S7-MCN 401 MODULE 2-VINAY.pptx
PDF
Digital Logic Computer Design lecture notes
PDF
Model Code of Practice - Construction Work - 21102022 .pdf
PDF
composite construction of structures.pdf
PPTX
CARTOGRAPHY AND GEOINFORMATION VISUALIZATION chapter1 NPTE (2).pptx
PPTX
Recipes for Real Time Voice AI WebRTC, SLMs and Open Source Software.pptx
PDF
The CXO Playbook 2025 – Future-Ready Strategies for C-Suite Leaders Cerebrai...
PPTX
Lecture Notes Electrical Wiring System Components
PPTX
web development for engineering and engineering
PPTX
Infosys Presentation by1.Riyan Bagwan 2.Samadhan Naiknavare 3.Gaurav Shinde 4...
PDF
Structs to JSON How Go Powers REST APIs.pdf
PDF
Operating System & Kernel Study Guide-1 - converted.pdf
PPTX
MET 305 2019 SCHEME MODULE 2 COMPLETE.pptx
IOT PPTs Week 10 Lecture Material.pptx of NPTEL Smart Cities contd
Mitigating Risks through Effective Management for Enhancing Organizational Pe...
Lesson 3_Tessellation.pptx finite Mathematics
bas. eng. economics group 4 presentation 1.pptx
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
Strings in CPP - Strings in C++ are sequences of characters used to store and...
Sustainable Sites - Green Building Construction
KTU 2019 -S7-MCN 401 MODULE 2-VINAY.pptx
Digital Logic Computer Design lecture notes
Model Code of Practice - Construction Work - 21102022 .pdf
composite construction of structures.pdf
CARTOGRAPHY AND GEOINFORMATION VISUALIZATION chapter1 NPTE (2).pptx
Recipes for Real Time Voice AI WebRTC, SLMs and Open Source Software.pptx
The CXO Playbook 2025 – Future-Ready Strategies for C-Suite Leaders Cerebrai...
Lecture Notes Electrical Wiring System Components
web development for engineering and engineering
Infosys Presentation by1.Riyan Bagwan 2.Samadhan Naiknavare 3.Gaurav Shinde 4...
Structs to JSON How Go Powers REST APIs.pdf
Operating System & Kernel Study Guide-1 - converted.pdf
MET 305 2019 SCHEME MODULE 2 COMPLETE.pptx

Ch 1 Introduction to User Interaction Design Mary Margarat

  • 3. Modu le No. Topics Hrs . 1 Introduction to Interaction Design 09 Good and Poor Design, What is Interaction Design, The Process Of Interaction Design, Goal of Interaction Design and Usability. 2 Understanding and Conceptualizing Interaction Cognitive aspects and Social, Emotional Interaction 09 Understanding the Problem Space and Conceptualizing Design, Conceptual Model, Interface TypesCognitive aspects, Social Interaction and the Emerging Social Phenomena,Emotions and the User Experience, Expressive and Frustrating Interfaces, Persuasive Technologies . 3 Data Gathering, Establishing Requirements, Analysis, Interpretation and Presentation 09 Establishing Requirements, Five Key Issues, Techniques for Data Gathering, Data Analysis Interpretation and Presentation, Task Description and Task Analysis 4 Process of Interaction Design, Prototyping, Construction, 08 Interaction Design Process, Prototyping and Conceptual Design, Interface
  • 4. Modul e No. Topics Hrs. 5 Design rules and Industry standards 07 Design principles, Principles to support Usability, Standards and Guidelines, Golden rules and Heuristics, ISO/IEC standards 6 Evaluation Techniques and Framework 06 The Why, What, Where and When of Evaluation, Types of Evaluation,case studies, DECIDE Framework, Usability Testing, conducting experiments, Field Studies, Heuristic Evaluation and walkthroughs, Predictive models. Total Hr. 48
  • 10. What is Interaction Design? ■ Designing interactive products to support people in their everyday and working lives. ■ The design of spaces for human communication and interaction.
  • 16. What is Usability? ■ Usability is part of the broader term “user experience” and refers to the ease of access and/or use of a product or website. ■ In essence, it is about developing interactive products that are easy, effective, and enjoyable to use.
  • 17. What is User Interface (UI) Design? ■ User interface (UI) design is the process of making interfaces in software or computerized devices with a focus on looks or style. ■ Designers aim to create designs users will find easy to use and pleasurable. ■ UI design typically refers to graphical user interfaces but also includes others, such as voice-controlled ones.
  • 18. Usable interface has three main outcomes:■ It should be easy for the user to become familiar with and competent in using the user interface during the first contact with the website. ■ It should be easy for users to achieve their objective through using the website. ■ It should be easy to recall the user interface and how to use it on subsequent visits.
  • 19. What is Human-Computer Interaction (HCI)? ■ Human-computer interaction (HCI) is a multidisciplinary field of study focusing on the design of computer technology and, in particular, the interaction between humans (the users) and computers. ■ “Interaction Design is the creation of a dialogue between a person and a product, system, or service.
  • 20. Evolution of HCI ‘interfaces’ ■ 50s - Interface at the hardware level for engineers - switch panels ■ 60-70s - interface at the programming level - COBOL, FORTRAN ■ 70-90s - Interface at the terminal level - command languages ■ 80s - Interface at the interaction dialogue level - GUIs, multimedia ■ 90s - Interface at the work setting - networked systems, groupware ■ 00s - Interface becomes pervasive – RF tags, Bluetooth technology, mobile devices, consumer electronics, interactive screens, embedded technology
  • 22. GOAL OF INTERACTION DESIGN IS.....
  • 23. 5 Dimensions of Interaction Design
  • 31. GOOD DESIGN Easy to understand
  • 33. BAD DESIGN: It is confusing
  • 34. ATM’s that spit out your card after the cash • ATM users are waiting for one thing: cash. So when the cash dispenses their immediate reaction is to leave. • That’s why it’s imperative that the cash comes out last— people are far less likely to forget their card if it comes out before the cash.
  • 35. Doors that don’t indicate which side to push You have a 50% chance of getting this door right:
  • 36. Classes with exclusively right-handed desks
  • 37. Example of bad and good design – Elevator controls and labels on the bottom row all look the same, so it is easy to push a label by mistake instead of a control button – People do not make same mistake for the labels and buttons on the top row. Why not?
  • 38. Why is this vending machine so bad? ■ Need to push button first to activate reader ■ Normally insert bill first before making selection ■ Contravenes well known convention
  • 40. What to design ??? ■ Need to take into account: – Who the users are – What activities are being carried out – Where the interaction is taking place ■ Need to optimise the interactions users have with a product – Such that they match the users activities and needs. ■ Use tried and tested user-based methods
  • 41. Interaction Design Interaction Design involves four basic activities: ■ Identifying needs and establishing requirements. ■ Developing alternative designs that meet those requirements. ■ Building interactive versions of the designs so that they can be communicated and assessed. ■ Evaluating what is being built throughout the process.
  • 42. A model for interaction design Evaluate (Re)Design Identify needs/ establish requirements Build an interactive version Final product Start
  • 43. Three characteristics of the Interaction Design Process: 1. Users involved throughout the development of the project 2. Specific usability and user experience goals should be identified, documented and agreed upon at the beginning 3. Iteration through the four activities (above).
  • 44. Usability Goals: ■ Effectiveness ■ Efficiency ■ Safety ■ Utility ■ Learnability ■ Memorability
  • 46. How easy is it to work in multidisciplinary teams? ■ More people involved in doing interaction design the more ideas and designs generated…but… ■ The more difficult it can be to communicate and progress forwards the designs being created
  • 47. What do professionals do in the ID business? ■ interaction designers - people involved in the design of all the interactive aspects of a product ■ usability engineers - people who focus on evaluating products, using usability methods and principles ■ web designers - people who develop and create the visual design of websites, such as layouts ■ information architects - people who come up with ideas of how to plan and structure interactive products ■ user experience designers - people who do all the above but who may also carry out field studies to inform the design of products
  • 48. What is involved in the process of interaction design ■ Identify needs and establish requirements ■ Develop alternative designs ■ Build interactive prototypes that can be communicated and assessed ■ Evaluate what is being built throughout the process
  • 49. Core characteristics of interaction design ■ users should be involved through the development of the project ■ specific usability and user experience goals need to be identified, clearly documented and agreed at the beginning of the project ■ iteration is needed through the core activities
  • 50. Usability goals ■ Effective to use ■ Efficient to use ■ Safe to use ■ Have good utility ■ Easy to learn ■ Easy to remember how to use
  • 51. User experience goals – Satisfying - rewarding – Fun - support creativity – Enjoyable - emotionally fulfilling – Entertaining …and more – Helpful – Motivating – Aesthetically pleasing – Motivating
  • 52. Usability and user experience goals ■ How do usability goals differ from user experience goals? ■ Are there trade-offs between the two kinds of goals? – e.g. can a product be both fun and safe? ■ How easy is it to measure usability versus user experience goals?
  • 53. Design principles ■ Generalizable abstractions for thinking about different aspects of design ■ The do’s and don’ts of interaction design ■ What to provide and what not to provide at the interface ■ Derived from a mix of theory-based knowledge, experience and common-sense
  • 54. Key points ■ ID involves taking into account a number of interdependent factors including context of use, type of task and kind of user ■ Need to strive for usability and user experience goals ■ Design and usability principles are useful heuristics for analysing and evaluating interactive products
  • 55. Questions ■ Define: User Interaction Design, User Interface Design, User Experience ■ What is the difference between Good Design & Bad Design? ■ Which Goals of Interaction Design needs to be followed by Designer while working on best User Interaction Design? ■ What are the Four Basic Activities followed in the process of Interaction Design? Explain. ■ What are the five dimensions of Interaction Design ■ Describe what interaction design is and how it relates to human-computer interaction. ■ Explain the process of Interaction design ■ What is the importance of interaction design? Write and explain goals of Interaction design. ■ Discuss Interaction Paradigms. ■ Which activities are carried out in the process of Interaction Design? Explain all in