Quick Upload

Loading...
Flash Player 9 (or above) is needed to view slideshows. We have detected that you do not have it on your computer.To install it, go here
Post to Twitter Post to Twitter
Share on Facebook
Myspace Hi5 Friendster Xanga LiveJournal Facebook Blogger Tagged Typepad Freewebs BlackPlanet gigya icons
« Prev Comments 1 - 4 of 4 Next »
  • reds
    reds said 5 months Edit Delete

    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!

  • billder
    billder said 6 months Edit Delete

    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?

  • reds
    reds said 6 months Edit Delete

    hi bill, really loved the slides. if you don't mind, could u explain this particular slide tho? thx!

  • Gusfischer
    Gusfischer said 6 months Edit Delete

    Wonderful, congrats!

Add a comment If you have a SlideShare account, login to comment; otherwise comment as a guest.
    SlideShare is now available on LinkedIn. Add it to your LinkedIn profile.

    The Language of Interaction

    From billder, 6 months ago Add as contact

    6559 views | 4 comments | 37 favorites | 437 downloads | 22 embeds (Stats)

    Categories

    Technology

    Tags

    Groups/Events

    Embed in your blog options close
    Embed (wordpress.com) Exclude related slideshows Embed in your blog

    More Info

    This slideshow is Public
    Total Views: 6559 on Slideshare: 6108 from embeds: 451
    Flagged as inappropriate Flag as inappropriate

    Flag as inappropriate

    Select your reason for flagging this slideshow as inappropriate.

    If needed, use the feedback form to let us know more details.

    Slideshow Transcript

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

    Feed RSS

    What's new?

    © 2008 SlideShare Inc. All Rights Reserved