Mater of Arts in Communication Design

WEB DESIGN
Interaction design
Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

1
Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

2
Don Norman

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

3
Interaction with word
affector

mechanism

receptor

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

4
The seven stages of action (1)
1

• Forming the Goal
• Something to be achieved. Can be stated in a very
imprecise way, e.g., "make a nice meal“

2

• Forming the Intention
• Goals must be transformed into intentions, i.e., specific
statements of what has to be done to satisfy the goal. E.g.,
"Make a chicken casserole using a can of prepared sauce.“

3

• Specifying an Action Sequence
• What is to be done to the World. The precise sequence of
operators that must be performed to effect the intention.
E.g., "Defrost frozen chicken, open can, ...“

4

• Executing an Action
• Actually doing something. Putting the action sequence
into effect on the world. E.g., “actually opening the can”

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

5
The seven stages of action (2)
5

• Perceiving the State of the World
• Perceiving what has actually happened. E.g., “the
experience of smell, taste and look of the the
prepared meal”.

6

7

• Interpreting the State of the World
• Trying to make sense of the perceptions available.
E.g., “Putting those perceptions together to
present the sensory experience of a chicken
casserole”.

• Evaluating the Outcome
• Comparing what happened with what was
wanted. E.g., “did the chicken casserole match up
to the requirement of 'a nice meal?”

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

6
How do we make things?
Specify actions

Set
goal

Execute actions

Form intention

Get status of word

Evaluate outcome

Understand status

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

7
How do we make things?
Specify actions

Set
goal

Execute actions

Form intention

Get status of word

Evaluate outcome

Understand status

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

8
How do we make things?
Specify actions

Set
goal

Execute actions

Form intention

Get status of word

Evaluate outcome

Understand status

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

9
How do we make things?
Specify actions

Set
goal

Execute actions

Form intention

Get status of word

Evaluate outcome

Understand status

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

10
Objective of good design
• Help users cross the two gulfs
• Without manuals!

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

11
When a device as simple as a
door has to come with an
instruction manual—even a
one-word manual—then it is a
failure, poorly designed.
Donald Norman
Not always possible, but is a good target!
Minimize needs for help!
Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

12
Help vs manuals
• Help is when I get info during the process
• Manual is something I’m supposed to read before and it is not context
sensitive

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

13
Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

14
Sony – 65 buttons!

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

15
Affordance
An affordance is a
property of an object, or
an environment, which
allows an individual to
perform an action. For
example, a knob affords
twisting, and perhaps
pushing, while a cord
affords pulling.
Vital instrument to help customer to cross
easily the gulf of evaluation.
Evaluation makes by feedback analysis
easier the execution!
Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

16
Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

17
Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

18
Buttons

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

19
Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

Microsoft Office, 1995

Microsoft BOB, 1995

More an assistant than a guide

20
Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

21
The ISO Dialogue Principles
• ISO9241-10

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

22
Suitability for the Task
• A dialog supports suitability for the task, if it supports the user in the
effective and efficient completion of the task. The dialog presents
the user only those concepts which are related to the user's task.

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

23
Self-Descriptiveness
• A dialog supports self-descriptiveness, if each dialog step is
immediately comprehensible through feedback from the system or is
explained to the user on his or her requesting the relevant
information.

Microsoft Word for WindowsT

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

24
Controllability
• A dialog supports controllability, if the user is able to maintain
direction over the whole course of the interaction until the point at
which the goal has been met.

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

25
Conformity with User Expectations
• A dialog supports conformity with user expectations, if it corresponds
to the user's task knowledge, education, experience, and to
commonly held conventions.

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

26
Error Tolerance
• A dialog supports error tolerance if, despite evident errors in input,
the intended results may be achieved with either no or minimal
corrective action having to be taken. Errors should be explained to
the user for him or her to correct them.

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

27
Suitability for Individualization
• A dialog supports suitability for individualization, if the dialog system
is constructed to allow for modification to the user's individual
needs and skills for a given task.

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

28
Suitability for Learning
• A dialog supports suitability for learning, if it guides the user through
the learning stages minimizing the learning time.

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

29
Choose the best (1)

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

30
Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

31
Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

32
Choose the best (2)

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

33
Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

34
Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

35
“There are no simple
answers,
only tradeoffs”
Donald A.Norman

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

36
Roberto Dadda
www.dadda.it
roberto@dadda.it
+39 338 775 22 03
Twitter, facebook, linkedin: robertodadda

Interaction design

WEB DESIGN NABA 2014 Roberto DADDA

37

More Related Content

PPTX
PPTX
Clark County Presentation - Web Design
PDF
PDF CITYDESK
PDF
NUS-ISS Learning Day 2015 - Digital User Experience: Lessons from Everyday Ob...
PDF
Poli15 barbie - 20160202
PDF
Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam
PPTX
7 Stages of User Action Theory
PDF
User-Centered Interaction Design
Clark County Presentation - Web Design
PDF CITYDESK
NUS-ISS Learning Day 2015 - Digital User Experience: Lessons from Everyday Ob...
Poli15 barbie - 20160202
Lecture 3: Human-Computer Interaction Course (2015) @VU University Amsterdam
7 Stages of User Action Theory
User-Centered Interaction Design

Similar to Iteraction design (20)

PPTX
Interaction
PDF
05 2 artifacts
PPT
Chapter 1 id2e_slides
PPTX
Form design
PPTX
Lecture 1 _ Introduction to ID and HCI.pptx
PPTX
What is Interaction Design?
PPTX
Ch 1 Introduction to User Interaction Design Mary Margarat
PPTX
Interaction-design-basic.pptx
PPT
Chapter-10.pptytfjyjrdjrtjfdthdfrthrdthrd
PPT
Chapter-1 (1).pptdydidydydy6dydyyfydyuyd
PPTX
Human Computer Interaction: Lecture 2: Interaction Design
PPT
UX: Interaction Design
PDF
chapter_01_5e.pdf
PPT
What Is Interaction Design
PDF
Introduction to Interaction Design
PDF
HCI Basics
PPTX
introduction of HCI design and techniques
PPTX
Interaction Design
PDF
Principles of Interactive Design
ODP
Eliminating the Odd
Interaction
05 2 artifacts
Chapter 1 id2e_slides
Form design
Lecture 1 _ Introduction to ID and HCI.pptx
What is Interaction Design?
Ch 1 Introduction to User Interaction Design Mary Margarat
Interaction-design-basic.pptx
Chapter-10.pptytfjyjrdjrtjfdthdfrthrdthrd
Chapter-1 (1).pptdydidydydy6dydyyfydyuyd
Human Computer Interaction: Lecture 2: Interaction Design
UX: Interaction Design
chapter_01_5e.pdf
What Is Interaction Design
Introduction to Interaction Design
HCI Basics
introduction of HCI design and techniques
Interaction Design
Principles of Interactive Design
Eliminating the Odd
Ad

More from Roberto Dadda (20)

PDF
01 usability
PDF
02 unusability
PDF
03 users models
PDF
04 user centered design
PDF
05 1 artifacts
PDF
07 norms and standards
PDF
08 vision and gestalt
PDF
09 colors
PDF
10 form design
PDF
11 error management
PDF
12 tipography for the web
PDF
14 accessibility short
PDF
13 equilibrium order time
PDF
15 emotional design
PDF
Poli15 uffizi - 2016-02-03
PDF
Poli15 careffour - 2015-12-01
PDF
Poli15 guanda publishing - 2016-02-03
PDF
Poli15 sansha
PDF
Poli15 nescafé final analysis
PDF
Poli15 Fujifilm
01 usability
02 unusability
03 users models
04 user centered design
05 1 artifacts
07 norms and standards
08 vision and gestalt
09 colors
10 form design
11 error management
12 tipography for the web
14 accessibility short
13 equilibrium order time
15 emotional design
Poli15 uffizi - 2016-02-03
Poli15 careffour - 2015-12-01
Poli15 guanda publishing - 2016-02-03
Poli15 sansha
Poli15 nescafé final analysis
Poli15 Fujifilm
Ad

Recently uploaded (20)

PPTX
Necrosgwjskdnbsjdmdndmkdndndnmdndndkdmdndkdkndmdmis.pptx
PPTX
22CDH01-V3-UNIT III-UX-UI for Immersive Design
PDF
The Basics of Presentation Design eBook by VerdanaBold
PDF
GSH-Vicky1-Complete-Plans on Housing.pdf
PDF
SOUND-NOTE-ARCHITECT-MOHIUDDIN AKHAND SMUCT
PDF
Trends That Shape Graphic Design Services
PPTX
ACL English Introductionadsfsfadf 20200612.pptx
PDF
How Animation is Used by Sports Teams and Leagues
PPTX
a group casestudy on architectural aesthetic and beauty
PDF
Timeless Interiors by PEE VEE INTERIORS
PPTX
ENG4-Q2-W5-PPT (1).pptx nhdedhhehejjedheh
PDF
Chalkpiece Annual Report from 2019 To 2025
PDF
analisis snsistem etnga ahrfahfffffffffffffffffffff
PPT
robotS AND ROBOTICSOF HUMANS AND MACHINES
PPTX
timber basics in structure mechanics (dos)
PDF
The Complete Guide to Buying Verified Stripe Accounts 2025.pdf
PPT
Fire_electrical_safety community 08.ppt
PPTX
Introduction to Building Information Modeling
PPTX
22CDO02-IMGD-UNIT-I-MOBILE GAME DESIGN PROCESS
PPT
EthicsNotesSTUDENTCOPYfghhnmncssssx sjsjsj
Necrosgwjskdnbsjdmdndmkdndndnmdndndkdmdndkdkndmdmis.pptx
22CDH01-V3-UNIT III-UX-UI for Immersive Design
The Basics of Presentation Design eBook by VerdanaBold
GSH-Vicky1-Complete-Plans on Housing.pdf
SOUND-NOTE-ARCHITECT-MOHIUDDIN AKHAND SMUCT
Trends That Shape Graphic Design Services
ACL English Introductionadsfsfadf 20200612.pptx
How Animation is Used by Sports Teams and Leagues
a group casestudy on architectural aesthetic and beauty
Timeless Interiors by PEE VEE INTERIORS
ENG4-Q2-W5-PPT (1).pptx nhdedhhehejjedheh
Chalkpiece Annual Report from 2019 To 2025
analisis snsistem etnga ahrfahfffffffffffffffffffff
robotS AND ROBOTICSOF HUMANS AND MACHINES
timber basics in structure mechanics (dos)
The Complete Guide to Buying Verified Stripe Accounts 2025.pdf
Fire_electrical_safety community 08.ppt
Introduction to Building Information Modeling
22CDO02-IMGD-UNIT-I-MOBILE GAME DESIGN PROCESS
EthicsNotesSTUDENTCOPYfghhnmncssssx sjsjsj

Iteraction design

  • 1. Mater of Arts in Communication Design WEB DESIGN Interaction design Interaction design WEB DESIGN NABA 2014 Roberto DADDA 1
  • 2. Interaction design WEB DESIGN NABA 2014 Roberto DADDA 2
  • 3. Don Norman Interaction design WEB DESIGN NABA 2014 Roberto DADDA 3
  • 4. Interaction with word affector mechanism receptor Interaction design WEB DESIGN NABA 2014 Roberto DADDA 4
  • 5. The seven stages of action (1) 1 • Forming the Goal • Something to be achieved. Can be stated in a very imprecise way, e.g., "make a nice meal“ 2 • Forming the Intention • Goals must be transformed into intentions, i.e., specific statements of what has to be done to satisfy the goal. E.g., "Make a chicken casserole using a can of prepared sauce.“ 3 • Specifying an Action Sequence • What is to be done to the World. The precise sequence of operators that must be performed to effect the intention. E.g., "Defrost frozen chicken, open can, ...“ 4 • Executing an Action • Actually doing something. Putting the action sequence into effect on the world. E.g., “actually opening the can” Interaction design WEB DESIGN NABA 2014 Roberto DADDA 5
  • 6. The seven stages of action (2) 5 • Perceiving the State of the World • Perceiving what has actually happened. E.g., “the experience of smell, taste and look of the the prepared meal”. 6 7 • Interpreting the State of the World • Trying to make sense of the perceptions available. E.g., “Putting those perceptions together to present the sensory experience of a chicken casserole”. • Evaluating the Outcome • Comparing what happened with what was wanted. E.g., “did the chicken casserole match up to the requirement of 'a nice meal?” Interaction design WEB DESIGN NABA 2014 Roberto DADDA 6
  • 7. How do we make things? Specify actions Set goal Execute actions Form intention Get status of word Evaluate outcome Understand status Interaction design WEB DESIGN NABA 2014 Roberto DADDA 7
  • 8. How do we make things? Specify actions Set goal Execute actions Form intention Get status of word Evaluate outcome Understand status Interaction design WEB DESIGN NABA 2014 Roberto DADDA 8
  • 9. How do we make things? Specify actions Set goal Execute actions Form intention Get status of word Evaluate outcome Understand status Interaction design WEB DESIGN NABA 2014 Roberto DADDA 9
  • 10. How do we make things? Specify actions Set goal Execute actions Form intention Get status of word Evaluate outcome Understand status Interaction design WEB DESIGN NABA 2014 Roberto DADDA 10
  • 11. Objective of good design • Help users cross the two gulfs • Without manuals! Interaction design WEB DESIGN NABA 2014 Roberto DADDA 11
  • 12. When a device as simple as a door has to come with an instruction manual—even a one-word manual—then it is a failure, poorly designed. Donald Norman Not always possible, but is a good target! Minimize needs for help! Interaction design WEB DESIGN NABA 2014 Roberto DADDA 12
  • 13. Help vs manuals • Help is when I get info during the process • Manual is something I’m supposed to read before and it is not context sensitive Interaction design WEB DESIGN NABA 2014 Roberto DADDA 13
  • 14. Interaction design WEB DESIGN NABA 2014 Roberto DADDA 14
  • 15. Sony – 65 buttons! Interaction design WEB DESIGN NABA 2014 Roberto DADDA 15
  • 16. Affordance An affordance is a property of an object, or an environment, which allows an individual to perform an action. For example, a knob affords twisting, and perhaps pushing, while a cord affords pulling. Vital instrument to help customer to cross easily the gulf of evaluation. Evaluation makes by feedback analysis easier the execution! Interaction design WEB DESIGN NABA 2014 Roberto DADDA 16
  • 17. Interaction design WEB DESIGN NABA 2014 Roberto DADDA 17
  • 18. Interaction design WEB DESIGN NABA 2014 Roberto DADDA 18
  • 19. Buttons Interaction design WEB DESIGN NABA 2014 Roberto DADDA 19
  • 20. Interaction design WEB DESIGN NABA 2014 Roberto DADDA Microsoft Office, 1995 Microsoft BOB, 1995 More an assistant than a guide 20
  • 21. Interaction design WEB DESIGN NABA 2014 Roberto DADDA 21
  • 22. The ISO Dialogue Principles • ISO9241-10 Interaction design WEB DESIGN NABA 2014 Roberto DADDA 22
  • 23. Suitability for the Task • A dialog supports suitability for the task, if it supports the user in the effective and efficient completion of the task. The dialog presents the user only those concepts which are related to the user's task. Interaction design WEB DESIGN NABA 2014 Roberto DADDA 23
  • 24. Self-Descriptiveness • A dialog supports self-descriptiveness, if each dialog step is immediately comprehensible through feedback from the system or is explained to the user on his or her requesting the relevant information. Microsoft Word for WindowsT Interaction design WEB DESIGN NABA 2014 Roberto DADDA 24
  • 25. Controllability • A dialog supports controllability, if the user is able to maintain direction over the whole course of the interaction until the point at which the goal has been met. Interaction design WEB DESIGN NABA 2014 Roberto DADDA 25
  • 26. Conformity with User Expectations • A dialog supports conformity with user expectations, if it corresponds to the user's task knowledge, education, experience, and to commonly held conventions. Interaction design WEB DESIGN NABA 2014 Roberto DADDA 26
  • 27. Error Tolerance • A dialog supports error tolerance if, despite evident errors in input, the intended results may be achieved with either no or minimal corrective action having to be taken. Errors should be explained to the user for him or her to correct them. Interaction design WEB DESIGN NABA 2014 Roberto DADDA 27
  • 28. Suitability for Individualization • A dialog supports suitability for individualization, if the dialog system is constructed to allow for modification to the user's individual needs and skills for a given task. Interaction design WEB DESIGN NABA 2014 Roberto DADDA 28
  • 29. Suitability for Learning • A dialog supports suitability for learning, if it guides the user through the learning stages minimizing the learning time. Interaction design WEB DESIGN NABA 2014 Roberto DADDA 29
  • 30. Choose the best (1) Interaction design WEB DESIGN NABA 2014 Roberto DADDA 30
  • 31. Interaction design WEB DESIGN NABA 2014 Roberto DADDA 31
  • 32. Interaction design WEB DESIGN NABA 2014 Roberto DADDA 32
  • 33. Choose the best (2) Interaction design WEB DESIGN NABA 2014 Roberto DADDA 33
  • 34. Interaction design WEB DESIGN NABA 2014 Roberto DADDA 34
  • 35. Interaction design WEB DESIGN NABA 2014 Roberto DADDA 35
  • 36. “There are no simple answers, only tradeoffs” Donald A.Norman Interaction design WEB DESIGN NABA 2014 Roberto DADDA 36
  • 37. Roberto Dadda www.dadda.it roberto@dadda.it +39 338 775 22 03 Twitter, facebook, linkedin: robertodadda Interaction design WEB DESIGN NABA 2014 Roberto DADDA 37