SlideShare a Scribd company logo
chapter 5
interaction design
basics
interaction design basics
• design:
– what it is, interventions, goals, constraints
• the design process
– what happens when
• users
– who they are, what they are like …
• scenarios
– rich stories of design
• iteration and prototypes
– never get it right first time!
what is
design?
what is
design?
achieving goals within constraints
• goals - purpose
– who is it for, why do they want it
• constraints
– materials, platforms
• trade-offs
golden rule of
design
understand your materials
for Human–Computer Interaction
understand your materials
• understand computers
– limitations, capacities, tools, platforms
• understand people
– psychological, social aspects
– human error
• and their interaction …
The process of
design
analysi
s
design
implement
and deploy
prototype
what is
wanted
interviews
ethnograph
y
what is there
vs.
what is wanted
guideline
s
principles
dialogue
notation
s
precise
specificatio
n
architectures
documentatio
n help
evaluatio
n
heuristics
scenarios
task
analysis
Steps …
• requirements
– what is there and what is wanted …
• analysis
– ordering and understanding
• design
– what to do and how to decide
• iteration and prototyping
– getting it right … and finding what is really needed!
• implementation and deployment
– making it and getting it out there
4- Interaction design basics (part-1)_.pdf
user focus
know your user
personae
know your user
• who are they?
• probably not like you!
• talk to them
• watch them
• use your imagination
persona
• description of an ‘example’ user
– not necessarily a real person
• use as surrogate user
– what would Betty think
• details matter
– makes her ‘real’
example persona
Betty is 37 years old, She has been Warehouse Manager for
five years and worked for Simpkins Brothers Engineering for
twelve years. She didn’t go to university, but has studied in
her evenings for a business diploma. She has two children
aged 15 and 7 and does not like to work late. She did part of
an introductory in-house computer course some years ago, but
it was interrupted when she was promoted and could no longer
afford to take the time. Her vision is perfect, but her right-hand
movement is slightly restricted following an industrial accident 3
years ago. She is enthusiastic about her work and is happy to
delegate responsibility and take suggestions from her staff.
However, she does feel threatened by the introduction of yet
another new computer system (the third in her time at SBE).
scenarios
stories for design
use and reuse
scenarios …
• what will users want to do?
• step-by-step walkthrough
– what can they see (sketches, screen shots)
– what do they do (keyboard, mouse etc.)
– what are they thinking?
• use and reuse throughout design
scenario – movie player
Brian would like to see the new film “Moments of Significance”
and wants to invite Alison, but he knows she doesn’t like “arty”
films. He decides to take a look at it to see if she would like it
and so connects to one of the movie sharing networks. He uses
his work machine as it has a higher bandwidth connection, but
feels a bit guilty. He knows he will be getting an illegal copy of
the film, but decides it is OK as he is intending to go to the
cinema to watch it. After it downloads to his machine he takes
out his new personal movie player. He presses the ‘menu’
button and on the small LCD screen he scrolls using the arrow
keys to ‘bluetooth connect’ and presses the select button. On
his computer the movie download program now has an icon
showing that it has recognised a compatible device and he drags
the icon of the film over the icon for the player. On the
player the LCD screen says “downloading now”, a percent done
indicator and small whirling icon. … … …
UX storyboard
scenario – storyboard to
mix photos and sketches
… explore the depths
• explore interaction
– what happens when
• explore cognition
– what are the users thinking
• explore architecture
– what is happening inside
use scenarios to ..
• communicate with others
– designers, clients, users
• validate other models
– ‘play’ it against other models
• express dynamics
– screenshots – appearance
– scenario – behaviour
linearity
Scenarios – one linear path through system
Pros:
– life and time are linear
– easy to understand (stories and narrative are
natural)
– concrete (errors less likely)
Cons:
– no choice, no branches, no special conditions
– miss the unintended
• So:
– use several scenarios
– use several methods

More Related Content

PPTX
IG1 Element Element 2.pptx (part-1)_4.pptx
PPTX
IT7 FIGMA Chapter 5 - Design Basics.pptx
PPT
Interactive design basics
PPT
E3 chap-05
PDF
Human computer Interface designchap-05-.pdf
PPT
HCI chapter 3 ppt interaction design basics for understand design process
PPT
Interactive System Design Prototype Presentation
PPT
Discovery methods for HCI
IG1 Element Element 2.pptx (part-1)_4.pptx
IT7 FIGMA Chapter 5 - Design Basics.pptx
Interactive design basics
E3 chap-05
Human computer Interface designchap-05-.pdf
HCI chapter 3 ppt interaction design basics for understand design process
Interactive System Design Prototype Presentation
Discovery methods for HCI

Similar to 4- Interaction design basics (part-1)_.pdf (20)

PPT
E3 chap-05
PPT
HCI 3e - Ch 5: Interaction design basics
PPT
E3 Chap 05 Interaction Design Basics
PPTX
Interaction-design-basic.pptx
PPT
Interaction design process in human Computer Interface(Human computer interac...
PPT
Interaction Design
PPTX
Foundations understanding users and interactions
PPTX
HCI-software engineering life cycle.pptx
PDF
Introduction to Prototyping: What, Why, How
PDF
Abstract
PDF
Introduction to Interaction Design
PPTX
Week 8 & 10
PDF
IxD Works Miniworkshop: Introduction
PDF
Human Computer Interaction-Chapter four.pdf
PPT
Know the user
PPTX
Design process interaction design basics
PPTX
HCI_Lecture_05.pptx
PPT
Summ11 useinterx
PPT
Human Factors and User Interface Design
E3 chap-05
HCI 3e - Ch 5: Interaction design basics
E3 Chap 05 Interaction Design Basics
Interaction-design-basic.pptx
Interaction design process in human Computer Interface(Human computer interac...
Interaction Design
Foundations understanding users and interactions
HCI-software engineering life cycle.pptx
Introduction to Prototyping: What, Why, How
Abstract
Introduction to Interaction Design
Week 8 & 10
IxD Works Miniworkshop: Introduction
Human Computer Interaction-Chapter four.pdf
Know the user
Design process interaction design basics
HCI_Lecture_05.pptx
Summ11 useinterx
Human Factors and User Interface Design
Ad

More from MuhammadjunaidgulMuh1 (8)

PPTX
unit 7 unit 6.unit 6.unit 6.unit 6. .pptx
PPTX
unit 6 unit 6.unit 6. unit 6unit 6. . .pptx
PPTX
unit Element Element Element 4.pptx
PPTX
3- The Interaction Interaction design basics .pptx
PPTX
R programming.pptx r language easy concept
PPT
02Data.ppt 02Data.ppt data mining introduction topic1
PPT
02Data.ppt data mining introduction topic
PPT
01Intro.ppt data analytics r language slide 1
unit 7 unit 6.unit 6.unit 6.unit 6. .pptx
unit 6 unit 6.unit 6. unit 6unit 6. . .pptx
unit Element Element Element 4.pptx
3- The Interaction Interaction design basics .pptx
R programming.pptx r language easy concept
02Data.ppt 02Data.ppt data mining introduction topic1
02Data.ppt data mining introduction topic
01Intro.ppt data analytics r language slide 1
Ad

Recently uploaded (20)

PDF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
PDF
Chinmaya Tiranga quiz Grand Finale.pdf
PDF
Microbial disease of the cardiovascular and lymphatic systems
PPTX
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
PPTX
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
PPTX
Final Presentation General Medicine 03-08-2024.pptx
PDF
01-Introduction-to-Information-Management.pdf
PPTX
202450812 BayCHI UCSC-SV 20250812 v17.pptx
PDF
2.FourierTransform-ShortQuestionswithAnswers.pdf
PDF
Computing-Curriculum for Schools in Ghana
PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
PPTX
Tissue processing ( HISTOPATHOLOGICAL TECHNIQUE
PPTX
Cell Structure & Organelles in detailed.
PDF
Supply Chain Operations Speaking Notes -ICLT Program
PPTX
Institutional Correction lecture only . . .
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
PPTX
Presentation on HIE in infants and its manifestations
PPTX
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
PDF
Classroom Observation Tools for Teachers
PPTX
Cell Types and Its function , kingdom of life
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
Chinmaya Tiranga quiz Grand Finale.pdf
Microbial disease of the cardiovascular and lymphatic systems
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
Final Presentation General Medicine 03-08-2024.pptx
01-Introduction-to-Information-Management.pdf
202450812 BayCHI UCSC-SV 20250812 v17.pptx
2.FourierTransform-ShortQuestionswithAnswers.pdf
Computing-Curriculum for Schools in Ghana
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Tissue processing ( HISTOPATHOLOGICAL TECHNIQUE
Cell Structure & Organelles in detailed.
Supply Chain Operations Speaking Notes -ICLT Program
Institutional Correction lecture only . . .
FourierSeries-QuestionsWithAnswers(Part-A).pdf
Presentation on HIE in infants and its manifestations
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
Classroom Observation Tools for Teachers
Cell Types and Its function , kingdom of life

4- Interaction design basics (part-1)_.pdf

  • 2. interaction design basics • design: – what it is, interventions, goals, constraints • the design process – what happens when • users – who they are, what they are like … • scenarios – rich stories of design • iteration and prototypes – never get it right first time!
  • 4. what is design? achieving goals within constraints • goals - purpose – who is it for, why do they want it • constraints – materials, platforms • trade-offs
  • 6. for Human–Computer Interaction understand your materials • understand computers – limitations, capacities, tools, platforms • understand people – psychological, social aspects – human error • and their interaction …
  • 7. The process of design analysi s design implement and deploy prototype what is wanted interviews ethnograph y what is there vs. what is wanted guideline s principles dialogue notation s precise specificatio n architectures documentatio n help evaluatio n heuristics scenarios task analysis
  • 8. Steps … • requirements – what is there and what is wanted … • analysis – ordering and understanding • design – what to do and how to decide • iteration and prototyping – getting it right … and finding what is really needed! • implementation and deployment – making it and getting it out there
  • 10. user focus know your user personae
  • 11. know your user • who are they? • probably not like you! • talk to them • watch them • use your imagination
  • 12. persona • description of an ‘example’ user – not necessarily a real person • use as surrogate user – what would Betty think • details matter – makes her ‘real’
  • 13. example persona Betty is 37 years old, She has been Warehouse Manager for five years and worked for Simpkins Brothers Engineering for twelve years. She didn’t go to university, but has studied in her evenings for a business diploma. She has two children aged 15 and 7 and does not like to work late. She did part of an introductory in-house computer course some years ago, but it was interrupted when she was promoted and could no longer afford to take the time. Her vision is perfect, but her right-hand movement is slightly restricted following an industrial accident 3 years ago. She is enthusiastic about her work and is happy to delegate responsibility and take suggestions from her staff. However, she does feel threatened by the introduction of yet another new computer system (the third in her time at SBE).
  • 15. scenarios … • what will users want to do? • step-by-step walkthrough – what can they see (sketches, screen shots) – what do they do (keyboard, mouse etc.) – what are they thinking? • use and reuse throughout design
  • 16. scenario – movie player Brian would like to see the new film “Moments of Significance” and wants to invite Alison, but he knows she doesn’t like “arty” films. He decides to take a look at it to see if she would like it and so connects to one of the movie sharing networks. He uses his work machine as it has a higher bandwidth connection, but feels a bit guilty. He knows he will be getting an illegal copy of the film, but decides it is OK as he is intending to go to the cinema to watch it. After it downloads to his machine he takes out his new personal movie player. He presses the ‘menu’ button and on the small LCD screen he scrolls using the arrow keys to ‘bluetooth connect’ and presses the select button. On his computer the movie download program now has an icon showing that it has recognised a compatible device and he drags the icon of the film over the icon for the player. On the player the LCD screen says “downloading now”, a percent done indicator and small whirling icon. … … …
  • 18. scenario – storyboard to mix photos and sketches
  • 19. … explore the depths • explore interaction – what happens when • explore cognition – what are the users thinking • explore architecture – what is happening inside
  • 20. use scenarios to .. • communicate with others – designers, clients, users • validate other models – ‘play’ it against other models • express dynamics – screenshots – appearance – scenario – behaviour
  • 21. linearity Scenarios – one linear path through system Pros: – life and time are linear – easy to understand (stories and narrative are natural) – concrete (errors less likely) Cons: – no choice, no branches, no special conditions – miss the unintended • So: – use several scenarios – use several methods