DOET CHAPTER 1 The psychopathology of everyday things

1. DOET CHAPTER 1The psychopathology of everyday things CS420/620 – Human Computer Interaction Prepared by MajedAl Zayer (former course instructor)

2. What characterizes an object?

3. What characterizes an object • Actions • door.push(); • door.pull(); • State • door.isClosed • door.isOpen

5. To perform actions on an object and to know its state,We need clues that we can relate to

6. Agenda • Elements of good design • Fundamental principles of interaction • Affordances • Signifiers • Mapping • Feedback • Conceptual models

7. Agenda • Elements of good design • Fundamental principles of interaction • Affordances • Signifiers • Mapping • Feedback • Conceptual models

8. A good design is … Discoverable • What actions can I perform? • Where to perform these actions?

9. A good design is … Understandable • What does it all mean? • How is the product supposed to be used? • What do all controls and settings mean?

10. How can we design for discoverability& understanding?

11. Agenda • Elements of good design • Fundamental principles of interaction • Affordances • Signifiers • Mapping • Feedback • Conceptual models

12. Fundamental principles of interaction Affordances Signifiers Mapping Discoverability Lead to Feedback Understanding Constraints Conceptual Models

13. Agenda • Elements of good design • Fundamental principles of interaction • Affordances • Signifiers • Mapping • Feedback • Conceptual models

14. Affordances The relationship between the properties of an object and the capabilities of the interacting human with respect to the actions that can be performed on this object by this human

15. Affordances Concerned with two sides: the object and the human The relationship between the properties of an object and the capabilities of the interacting human with respect to the actions that can be performed on this object by this human

16. Affordances • Clickable button • Light chair • Steep ramp The relationship between the properties of an object and the capabilities of the interacting human with respect to the actions that can be performed on this object by this human

17. Affordances • Strong • Tall • Fully sighted The relationship between the properties of an object and the capabilities of the interacting human with respect to the actions that can be performed on this object by this human

18. Affordances The relationship between the properties of an object and the capabilities of the interacting human with respect to the actions that can be performed on this object by this human • <Heavy chair, strong human>  The chair affords lifting • <Touchable screen, no hands>  The touchscreen doesn’t afford touching

19. Affordances - Example • What actions can be done with a sheetof glass by an interacting agent, e.g., • Air • Light • Humans

20. Affordances • If affordances are concerned with actions that are possible given our abilities, then … Anti-affordancesareconcerned with actions that are not possible given our capabilities

21. Affordances Effective affordances are perceivable

22. Affordances • What makes them perceivable? Object form × Interaction expectations

23. Affordances • What makes them perceivable? Object form × Interaction expectations

24. Affordances • What makes them perceivable? Object form × Interaction expectations

25. Affordances • When hidden affordances are put to use

26. Affordances • When hidden affordances are put to use

27. Affordances • When hidden affordances are put to use • Game design • Ads

28. Agenda • Elements of good design • Fundamental principles of interaction • Affordances • Signifiers • Mapping • Feedback • Conceptual models

29. Signifiers • Object: a door • Agent: a human with functioning hands • What’s the affordance? • Where can I do the action?

30. Signifiers – The clues “Any mark or sound, any perceivable indicator that communicates appropriate behavior to a person”

31. Signifiers – The clues “Any mark or sound, any perceivable indicator that communicates appropriate behavior to a person”

32. Signifiers – The clues “Any mark or sound, any perceivable indicator that communicates appropriate behavior to a person”

33. Signifiers – The clues “Any mark or sound, any perceivable indicator that communicates appropriate behavior to a person”

34. Signifiers – The clues “Any mark or sound, any perceivable indicator that communicates appropriate behavior to a person” The communication medium has to be compatible & perceivable to that person

35. Signifiers – The clues • Your job as a designer is to … Communicate meaningful clues to your user group about the use of the designto highlight the design purpose

36. Signifiers – The clues PULL Perceived Explicit

37. Affordances vs. Signifiers Signifiers expose affordances,they save people from trial and error

38. Affordances & Signifiers in user interfaces

39. Affordances & Signifiers in user interfaces

40. Agenda • Elements of good design • Fundamental principles of interaction • Affordances • Signifiers • Mapping • Feedback • Conceptual models

41. Mapping

42. Mapping

43. Mapping The spatial relationship between the control and what’s being controlled

44. Mapping The spatial relationship between the control and what’s being controlled

45. Mapping The spatial relationship between the control and what’s being controlled

46. Mapping The spatial relationship between the control and what’s being controlled

47. Mapping & conceptual models • Steering a car • The top of the steering wheel moves to the same direction as the car’s • Moving a computer mouse • X-axis of the mouse = X-axis of the screen • Z-axis of the mouse = Y-axis of the screen • Dimming lights • Up = more light • Down = less light

48. Mapping & conceptual models Clear and understandable conceptual models help us remember the mapping relationship

49. Natural mapping

50. Natural mapping