1. HumancomputerInteraction
Lecture # 2
Design of Everything
Ms. Mariya Hanif
Sr. Lecturer (Software Engineering)
Department of Computer Science & Information Technology
IQRA UNIVERSITY, ISLAMABAD CAMPUS
MARIYA HANIF OPERATING SYSTEM FALL-2021 1

2. Design of Everyday Things
◦Donald Norman’s Design Principles
◦ Making Things Visible
◦ Affordances
◦ Natural Mapping
◦ Feedback
◦ Constraints
◦ Mental Models
5/29/2023
Key Objectives

3. Frustrations of everyday life!
Consider doors, switches, water taps, and stoves.
◦ Doors?
◦ Push doors that are meant to be pulled
◦ Pull doors that are meant to be pushed
◦ Walk into doors that are meant to slide
◦ Psychological principles: In which direction does it
move? On which side should one work on?
5/29/2023

4. 5/29/2023

5. Swinging Glass
Door
5/29/2023

6. Washing Machine
5/29/2023

7. 5/29/2023
Printer
Internet sources

8. Design of Everything
◦Visibility
◦Affordance
◦Natural Mapping
◦Feedback
◦Constraints
Donald Norman’s Design Principles
5/29/2023

9. Visibility
The more visible functions are, the more likely
users will be able to know what to do next.
In contrast, when functions are "out of sight," it
makes them more difficult to find and know how to
use.
To indicate what parts operate & how.
To indicate how the user is to interact with the
device
5/29/2023
Can I see it?

10. Don Norman’s Door Example – visibility
A plate naturally says “ push me” and a vertical
handle naturally says “pull me”,
5/29/2023

11. Don Norman’s Door Example
When Don Norman’s
advice is not followed
5/29/2023

12. Sensor technology like auto faucets - not
sure how to use - guess where to put
hands
5/29/2023

13. In buses and
it is hard to
find how to
move seat
forward or
backwards.
5/29/2023

14. Refer to an attribute of an object that allows people to
know how to use it.
◦ For example, a mouse button invites pushing (in so doing
acting clicking) by the way it is physically constrained in its
plastic shell.
Affordance provides strong clues to the operations of
things – user knows what to do.
◦ Plates: push
◦ Knobs: turning
◦ Slot: inserting things
Affordances
5/29/2023
How do I use it?

15. Affordances
Perceived & actual property of things
◦ Chair: support, sitting
◦ Glass: seeing through, breaking
◦ Wood: solidity, support, carving
5/29/2023

16. Perceived and actual properties of an
object that give clues to its operation
5/29/2023

17. Perceived and actual properties of an
object that give clues to its operation
5/29/2023

18. Perceived and actual properties of
an object that give clues to its
operation
5/29/2023

19. Natural Mapping
Refers to the relationship between controls and their effects in the world.
Nearly all artifacts need some kind of mapping between controls and effects,
whether it is a flashlight, car.
An example of a good mapping between control and effect is the up and
down arrows used to represent the up and down movement of the
cursor, respectively, on a computer keyboard.
Complex input like pressing several buttons together in a certain order is not
natural so we easily forget
◦ Taking screen shot in smart phones
5/29/2023
Where am I and Where I can go?

20. Natural Mapping
Which one
represents natural
mapping?
5/29/2023
Consider the gas stove in your home.
Does it use natural mapping?

21. Feedback
Feedback is about sending back information
about what action has been done and what has
been accomplished, allowing the person to
continue with the activity.
◦ Various kinds of feedback are available for
interaction design - audio, tactile, verbal, and
combinations of these.
5/29/2023
What is it doing now?

22. Feedback
Providing feedback through different means
doesn’t cost much but can increase customer
satisfaction
◦ What happens when you press a button on touch
screen?
◦ Inserting memory card or battery in a camera
5/29/2023

23. Constraints
The design concept of constraining refers to
determining ways of restricting the kind of user
interaction that can take place at a given moment.
There are various ways this can be achieved
5/29/2023
What can’t I do that?

24. Constraints
Cultural: Red is a rear light, yellow a front light
Logical: Two blue lights, two white pieces, probably go together
Physical: Pieces can only be fitted in a certain way
5/29/2023

25. References
Chapter 1 of The Design of Everyday Things
◦ By DONALD NORMAN
5/29/2023

26. THANK YOU !
5/29/2023