The Language
of Interaction

            Bill DeRouchey
What can we learn from the objects…
that people have to learn how to use?
Linguistics
   Anthropology
      Design
     Empathy
ok, it’s a bunch of buttons
We learn via what
                we already know.

Alberto Cañas
Using verbs
                 in interfaces.

Chris Crawford
The form of a book
            hasn’t changed.

Dave Gray
Notice the micro
               interactions.

David Armano
How do people learn
how to use interfaces?
People learn from past experiences.
Experiences create expectations.
What have you learned?
@
Playing laundry.
Interfaces inherit
  meaning from
other interfaces.
We need to see what people see.
We need to seek inspiration.
Inspiration from what we carry around.
Inspiration from common interactions.
Inspiration from what amuses us.
Inspiration from what intimidates us.
Inspiration from hacking it up.
Inspiration from mixing it up.
Inspiration from seeing the language.
We create and curate this language…
but language evolves and spreads.
Languages
always evolve.
Power icon
            01

Symbols start with one meaning…
then evolve and extend that meaning.
Photo: Livia Labate




Meaning migrates across domains.
Or meaning can evolve…
into which team possesses the arrow.
Meaning can survive a long time.
For example: Why green and red?
Bad, negative.   Good, positive.
???




Why do we use red and green?
They are inherited from traffic signals…
Photo of railroad traffic signal




which inherited from railroad signals…
We need to decode
 communication.
©   Scott McCloud, Understanding Comics
The language
of interaction.
Elements    Relationships      Principles
Words       Zoning             Clarity
Icons       Layout             Perspectiv...
Elements.
Words. Labels are everywhere.
Words. Command or label?
Words. Simple or confusing?
              …
Words. Redefining squanders meaning.
Shapes. Is this a “button”?
Shapes. Is this a “button”?
Shapes. Rounded rectangles evolve.
Shapes. Underline = “I am a button.”
Shapes. We don’t need shapes.
Shapes. What’s interactable anymore?
Relationships.
Zoning. Families of controls/content.
Zoning. An example: Amazon.
Zoning. Dividing up the page.
Tempt




Zoning. Dividing up the page.
Tempt




Zoning. Dividing up the page.
Zoning. Dividing up the page.
Tempt



Zoning. Dividing up the page.
Zoning. Dividing up the page.
Browse




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



Zoning. Dividing up the page.
Zoning. Dividing up the page.
Promote




Zoning. Dividing up the page.
Browse
             Promote

                            Tempt

 Tempt      Re-Tempt



Zoning. Dividing up the page.
Tempt
                                Manage


 Browse
             Promote

                            Tempt

 Tempt    ...
Priority. There is a focus.
Priority. Where is the importance?
Priority. Where is the focus?
Priority. Color used to create focus…
…but multiple is not focus.
Priority. Promote the likely option.
Priority. Create a hero.
Principles.
Clarity. Make sense or confusion?
Clarity. Sacrifice meaning for… rad?
Clarity. Anticipate the question.
Clarity. Meaning from a distance.
Clarity. Trend: Big fat letters.
Clarity. Action = results.
Perspective. Product or system?
Perspective. Is that really necessary?
Perspective. Is that really necessary?
Perspective. Is that really necessary?
!
Surprise. Design for delight.
Surprise. Anticipate frustration.
Surprise. The familiar in a new context.
The Language
          of Interaction

pushclicktouch.com    Bill DeRouchey
@billder
Language of Interaction IDEA08
Language of Interaction IDEA08
Language of Interaction IDEA08
Language of Interaction IDEA08
Language of Interaction IDEA08
Language of Interaction IDEA08
Language of Interaction IDEA08
Language of Interaction IDEA08
Language of Interaction IDEA08
Language of Interaction IDEA08
Language of Interaction IDEA08
Language of Interaction IDEA08
Language of Interaction IDEA08
Language of Interaction IDEA08
Upcoming SlideShare
Loading in …5
×

Language of Interaction IDEA08

1,979 views

Published on

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

Published in: Design, Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,979
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
43
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Language of Interaction IDEA08

  1. 1. The Language of Interaction Bill DeRouchey
  2. 2. What can we learn from the objects…
  3. 3. that people have to learn how to use?
  4. 4. Linguistics Anthropology Design Empathy ok, it’s a bunch of buttons
  5. 5. We learn via what we already know. Alberto Cañas
  6. 6. Using verbs in interfaces. Chris Crawford
  7. 7. The form of a book hasn’t changed. Dave Gray
  8. 8. Notice the micro interactions. David Armano
  9. 9. How do people learn how to use interfaces?
  10. 10. People learn from past experiences.
  11. 11. Experiences create expectations.
  12. 12. What have you learned?
  13. 13. @
  14. 14. Playing laundry.
  15. 15. Interfaces inherit meaning from other interfaces.
  16. 16. We need to see what people see.
  17. 17. We need to seek inspiration.
  18. 18. Inspiration from what we carry around.
  19. 19. Inspiration from common interactions.
  20. 20. Inspiration from what amuses us.
  21. 21. Inspiration from what intimidates us.
  22. 22. Inspiration from hacking it up.
  23. 23. Inspiration from mixing it up.
  24. 24. Inspiration from seeing the language.
  25. 25. We create and curate this language…
  26. 26. but language evolves and spreads.
  27. 27. Languages always evolve.
  28. 28. Power icon 01 Symbols start with one meaning…
  29. 29. then evolve and extend that meaning.
  30. 30. Photo: Livia Labate Meaning migrates across domains.
  31. 31. Or meaning can evolve…
  32. 32. into which team possesses the arrow.
  33. 33. Meaning can survive a long time.
  34. 34. For example: Why green and red?
  35. 35. Bad, negative. Good, positive.
  36. 36. ??? Why do we use red and green?
  37. 37. They are inherited from traffic signals…
  38. 38. Photo of railroad traffic signal which inherited from railroad signals…
  39. 39. We need to decode communication.
  40. 40. © Scott McCloud, Understanding Comics
  41. 41. The language of interaction.
  42. 42. 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.
  43. 43. Elements.
  44. 44. Words. Labels are everywhere.
  45. 45. Words. Command or label?
  46. 46. Words. Simple or confusing? …
  47. 47. Words. Redefining squanders meaning.
  48. 48. Shapes. Is this a “button”?
  49. 49. Shapes. Is this a “button”?
  50. 50. Shapes. Rounded rectangles evolve.
  51. 51. Shapes. Underline = “I am a button.”
  52. 52. Shapes. We don’t need shapes.
  53. 53. Shapes. What’s interactable anymore?
  54. 54. Relationships.
  55. 55. Zoning. Families of controls/content.
  56. 56. Zoning. An example: Amazon.
  57. 57. Zoning. Dividing up the page.
  58. 58. Tempt Zoning. Dividing up the page.
  59. 59. Tempt Zoning. Dividing up the page.
  60. 60. Zoning. Dividing up the page.
  61. 61. Tempt Zoning. Dividing up the page.
  62. 62. Zoning. Dividing up the page.
  63. 63. Browse Zoning. Dividing up the page.
  64. 64. Zoning. Dividing up the page.
  65. 65. Re-Tempt Zoning. Dividing up the page.
  66. 66. Zoning. Dividing up the page.
  67. 67. Promote Zoning. Dividing up the page.
  68. 68. Browse Promote Tempt Tempt Re-Tempt Zoning. Dividing up the page.
  69. 69. Tempt Manage Browse Promote Tempt Tempt Re-Tempt Zoning. Dividing up the page.
  70. 70. Priority. There is a focus.
  71. 71. Priority. Where is the importance?
  72. 72. Priority. Where is the focus?
  73. 73. Priority. Color used to create focus…
  74. 74. …but multiple is not focus.
  75. 75. Priority. Promote the likely option.
  76. 76. Priority. Create a hero.
  77. 77. Principles.
  78. 78. Clarity. Make sense or confusion?
  79. 79. Clarity. Sacrifice meaning for… rad?
  80. 80. Clarity. Anticipate the question.
  81. 81. Clarity. Meaning from a distance.
  82. 82. Clarity. Trend: Big fat letters.
  83. 83. Clarity. Action = results.
  84. 84. Perspective. Product or system?
  85. 85. Perspective. Is that really necessary?
  86. 86. Perspective. Is that really necessary?
  87. 87. Perspective. Is that really necessary?
  88. 88. ! Surprise. Design for delight.
  89. 89. Surprise. Anticipate frustration.
  90. 90. Surprise. The familiar in a new context.
  91. 91. The Language of Interaction pushclicktouch.com Bill DeRouchey @billder

×