Language of Interaction, presented at IDEA 08 in Chicago, October 8, 2008. *Note* I will be stitching in the audio in a few days.

1. The Language
of Interaction
Bill DeRouchey

2. What can we learn from the objects…

3. that people have to learn how to use?

4. Linguistics
Anthropology
Design
Empathy
ok, it’s a bunch of buttons

6. We learn via what
we already know.
Alberto Cañas

7. Using verbs
in interfaces.
Chris Crawford

8. The form of a book
hasn’t changed.
Dave Gray

9. Notice the micro
interactions.
David Armano

10. How do people learn
how to use interfaces?

11. People learn from past experiences.

12. Experiences create expectations.

13. What have you learned?

22. @

26. Playing laundry.

27. Interfaces inherit
meaning from
other interfaces.

28. We need to see what people see.

29. We need to seek inspiration.

30. Inspiration from what we carry around.

31. Inspiration from common interactions.

32. Inspiration from what amuses us.

33. Inspiration from what intimidates us.

34. Inspiration from hacking it up.

35. Inspiration from mixing it up.

36. Inspiration from seeing the language.

37. We create and curate this language…

38. but language evolves and spreads.

39. Languages
always evolve.

40. Power icon
01
Symbols start with one meaning…

41. then evolve and extend that meaning.

42. Photo: Livia Labate
Meaning migrates across domains.

43. Or meaning can evolve…

44. into which team possesses the arrow.

45. Meaning can survive a long time.

46. For example: Why green and red?

47. Bad, negative. Good, positive.

48. ???
Why do we use red and green?

49. They are inherited from traffic signals…

50. Photo of railroad traffic signal
which inherited from railroad signals…

51. We need to decode
communication.

52. © Scott McCloud, Understanding Comics

53. The language
of interaction.

54. Elements Relationships Principles
Words Zoning Clarity
Icons Layout Perspective
Colors Isolation Purpose
Shapes Priority Delight
Sounds Proximity Surprise
Motion Repetition
Gesture Alignment
Size Sequence
Contour
The language of interaction.

55. Elements.

56. Words. Labels are everywhere.

57. Words. Command or label?

58. Words. Simple or confusing?
…

59. Words. Redefining squanders meaning.

60. Shapes. Is this a “button”?

61. Shapes. Is this a “button”?

62. Shapes. Rounded rectangles evolve.

63. Shapes. Underline = “I am a button.”

64. Shapes. We don’t need shapes.

65. Shapes. What’s interactable anymore?

66. Relationships.

67. Zoning. Families of controls/content.

68. Zoning. An example: Amazon.

69. Zoning. Dividing up the page.

70. Tempt
Zoning. Dividing up the page.

71. Tempt
Zoning. Dividing up the page.

72. Zoning. Dividing up the page.

73. Tempt
Zoning. Dividing up the page.

74. Zoning. Dividing up the page.

75. Browse
Zoning. Dividing up the page.

76. Zoning. Dividing up the page.

77. Re-Tempt
Zoning. Dividing up the page.

78. Zoning. Dividing up the page.

79. Promote
Zoning. Dividing up the page.

80. Browse
Promote
Tempt
Tempt Re-Tempt
Zoning. Dividing up the page.

81. Tempt
Manage
Browse
Promote
Tempt
Tempt Re-Tempt
Zoning. Dividing up the page.

82. Priority. There is a focus.

83. Priority. Where is the importance?

84. Priority. Where is the focus?

85. Priority. Color used to create focus…

86. …but multiple is not focus.

87. Priority. Promote the likely option.

88. Priority. Create a hero.

89. Principles.

90. Clarity. Make sense or confusion?

91. Clarity. Sacrifice meaning for… rad?

92. Clarity. Anticipate the question.

93. Clarity. Meaning from a distance.

94. Clarity. Trend: Big fat letters.

95. Clarity. Action = results.

96. Perspective. Product or system?

97. Perspective. Is that really necessary?

98. Perspective. Is that really necessary?

99. Perspective. Is that really necessary?

100. !
Surprise. Design for delight.

101. Surprise. Anticipate frustration.

102. Surprise. The familiar in a new context.

105. The Language
of Interaction
pushclicktouch.com Bill DeRouchey
@billder