The Language
of Interaction

            Bill DeRouchey
                 Ziba Design
What can we learn from the objects…
that surround us every day?
What insight can they provide?
People are surrounded by technology,
products that we design and make…
that they have to learn how to use.
How do people figure it all out?
People learn from past experiences.
Interfaces inherit
  meaning from
other interfaces.
They unconsciously look for language.
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 surrounds us.
Inspiration from what guides us.
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




And migrate across domains.
Meaning translates across products…
to become a true icon.
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.
Start, on.   Stop, off.
???




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. Instructing new users.
Photo: Darwin Bell



Words. Beneficial redundancy.
Words. Command or label?
Words. Simple or confusing?
              …
Words. Redefining leads to confusion.
Words. Clean and simple.
Words. Inviting. Add a trip?
Colors.
Shapes. Which is a “button”?
Shapes. Physical shape has meaning.
Shapes. Physical shape has meaning.
Shapes. “Look at me, I’m a button!”
Shapes. Rounded rectangles evolve.
Shapes. Underline = “I am a button.”
Shapes. We don’t need shapes.
Shapes. The whole side is a button.
Shapes. Or the button disappears.
Shapes. What’s interactable anymore?
Gesture. First public exposure?
Gesture. Cooties lead to gestures.
Gesture. Tapping into natural motions.
Relationships.
Zoning. Families of controls/content.
Zoning. An example: Amazon.
Tempt




Zoning. Dividing up the page.
Tempt

 Tempt



Zoning. Dividing up the page.
Browse


                            Tempt

 Tempt



Zoning. Dividing up the page.
Browse


                            Tempt

 Tempt      Re-Tempt



Zoning. Dividing up the page.
Browse
             Promote

                            Tempt

 Tempt      Follow up



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 focuses is not focus.
Priority. Distinguish the likely option.
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. Big fat letters.
Clarity. Action = results.
Perspective. Product or system?
Perspective. Customized for who?
Perspective. Is that really necessary?
Perspective. Is that really necessary?
Perspective. Is that really necessary?
!
Surprise. Design for delight.
Surprise. Anticipate frustration.
Surprise. Anticipate frustration.
More at
www. push   click touch .com



   “bill_derouchey@ziba.com
   “billder” on most social networks
The Language of Interaction
Upcoming SlideShare
Loading in...5
×

The Language of Interaction

19,943

Published on

Published in: Technology, Education
6 Comments
65 Likes
Statistics
Notes
  • Thank's, It’s a good presentation.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • audio can be found at: http://www.webvisionsevent.com/podcasts/2008/DeRouchey.mp3
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • hi bill, thanks for explaining. i've heard your UX Week 2007 talk and some of the slides look familiar to the material but the titles don't match (Learning Interaction Design From Everyday Objects). probably it's another talk but i like the subject and i liked your talk. can't wait for the audio for this one!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Reds: (this will all make more sense when the audio is sliced in of course...) Re: slide 91. Two ATMs clearly manufactured by the same company because the button tooling is identical. However, they let individual banks reorder and recolor the control buttons. It would be better for everybody if a design language was implemented to make the interaction the same across products. So are you designing products or designing a system? Does that help?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • hi bill, really loved the slides. if you don't mind, could u explain this particular slide tho? thx!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
19,943
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
768
Comments
6
Likes
65
Embeds 0
No embeds

No notes for slide

Transcript of "The Language of Interaction"

  1. 1. The Language of Interaction Bill DeRouchey Ziba Design
  2. 2. What can we learn from the objects…
  3. 3. that surround us every day?
  4. 4. What insight can they provide?
  5. 5. People are surrounded by technology,
  6. 6. products that we design and make…
  7. 7. that they have to learn how to use.
  8. 8. How do people figure it all out?
  9. 9. People learn from past experiences.
  10. 10. Interfaces inherit meaning from other interfaces.
  11. 11. They unconsciously look for language.
  12. 12. We need to see what people see.
  13. 13. We need to seek inspiration.
  14. 14. Inspiration from what we carry around.
  15. 15. Inspiration from common interactions.
  16. 16. Inspiration from what surrounds us.
  17. 17. Inspiration from what guides us.
  18. 18. Inspiration from what amuses us.
  19. 19. Inspiration from what intimidates us.
  20. 20. Inspiration from hacking it up.
  21. 21. Inspiration from mixing it up.
  22. 22. Inspiration from seeing the language.
  23. 23. We create and curate this language…
  24. 24. but language evolves and spreads.
  25. 25. Languages always evolve.
  26. 26. Power icon 01 Symbols start with one meaning…
  27. 27. then evolve and extend that meaning.
  28. 28. Photo: Livia Labate And migrate across domains.
  29. 29. Meaning translates across products…
  30. 30. to become a true icon.
  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. Start, on. Stop, off.
  37. 37. ??? Why do we use red and green?
  38. 38. They are inherited from traffic signals…
  39. 39. Photo of railroad traffic signal which inherited from railroad signals…
  40. 40. We need to decode communication.
  41. 41. © Scott McCloud, Understanding Comics
  42. 42. The language of interaction.
  43. 43. 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.
  44. 44. Elements.
  45. 45. Words. Labels are everywhere.
  46. 46. Words. Instructing new users.
  47. 47. Photo: Darwin Bell Words. Beneficial redundancy.
  48. 48. Words. Command or label?
  49. 49. Words. Simple or confusing? …
  50. 50. Words. Redefining leads to confusion.
  51. 51. Words. Clean and simple.
  52. 52. Words. Inviting. Add a trip?
  53. 53. Colors.
  54. 54. Shapes. Which is a “button”?
  55. 55. Shapes. Physical shape has meaning.
  56. 56. Shapes. Physical shape has meaning.
  57. 57. Shapes. “Look at me, I’m a button!”
  58. 58. Shapes. Rounded rectangles evolve.
  59. 59. Shapes. Underline = “I am a button.”
  60. 60. Shapes. We don’t need shapes.
  61. 61. Shapes. The whole side is a button.
  62. 62. Shapes. Or the button disappears.
  63. 63. Shapes. What’s interactable anymore?
  64. 64. Gesture. First public exposure?
  65. 65. Gesture. Cooties lead to gestures.
  66. 66. Gesture. Tapping into natural motions.
  67. 67. Relationships.
  68. 68. Zoning. Families of controls/content.
  69. 69. Zoning. An example: Amazon.
  70. 70. Tempt Zoning. Dividing up the page.
  71. 71. Tempt Tempt Zoning. Dividing up the page.
  72. 72. Browse Tempt Tempt Zoning. Dividing up the page.
  73. 73. Browse Tempt Tempt Re-Tempt Zoning. Dividing up the page.
  74. 74. Browse Promote Tempt Tempt Follow up Zoning. Dividing up the page.
  75. 75. Tempt Manage Browse Promote Tempt Tempt Follow up Zoning. Dividing up the page.
  76. 76. Priority. There is a focus.
  77. 77. Priority. Where is the importance?
  78. 78. Priority. Where is the focus?
  79. 79. Priority. Color used to create focus…
  80. 80. …but multiple focuses is not focus.
  81. 81. Priority. Distinguish the likely option.
  82. 82. Priority. Promote the likely option.
  83. 83. Priority. Create a hero.
  84. 84. Principles.
  85. 85. Clarity. Make sense or confusion?
  86. 86. Clarity. Sacrifice meaning for… rad?
  87. 87. Clarity. Anticipate the question.
  88. 88. Clarity. Meaning from a distance.
  89. 89. Clarity. Big fat letters.
  90. 90. Clarity. Action = results.
  91. 91. Perspective. Product or system?
  92. 92. Perspective. Customized for who?
  93. 93. Perspective. Is that really necessary?
  94. 94. Perspective. Is that really necessary?
  95. 95. Perspective. Is that really necessary?
  96. 96. ! Surprise. Design for delight.
  97. 97. Surprise. Anticipate frustration.
  98. 98. Surprise. Anticipate frustration.
  99. 99. More at www. push click touch .com “bill_derouchey@ziba.com “billder” on most social networks
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×