The Language of Interaction

Slide 1: The Language of Interaction Bill DeRouchey Ziba Design

Slide 2: What can we learn from the objects…

Slide 3: that surround us every day?

Slide 4: What insight can they provide?

Slide 5: People are surrounded by technology,

Slide 6: products that we design and make…

Slide 7: that they have to learn how to use.

Slide 8: How do people figure it all out?

Slide 9: People learn from past experiences.

Slide 10: Interfaces inherit meaning from other interfaces.

Slide 11: They unconsciously look for language.

Slide 12: We need to see what people see.

Slide 13: We need to seek inspiration.

Slide 14: Inspiration from what we carry around.

Slide 15: Inspiration from common interactions.

Slide 16: Inspiration from what surrounds us.

Slide 17: Inspiration from what guides us.

Slide 18: Inspiration from what amuses us.

Slide 19: Inspiration from what intimidates us.

Slide 20: Inspiration from hacking it up.

Slide 21: Inspiration from mixing it up.

Slide 22: Inspiration from seeing the language.

Slide 23: We create and curate this language…

Slide 24: but language evolves and spreads.

Slide 25: Languages always evolve.

Slide 26: Power icon 01 Symbols start with one meaning…

Slide 27: then evolve and extend that meaning.

Slide 28: Photo: Livia Labate And migrate across domains.

Slide 29: Meaning translates across products…

Slide 30: to become a true icon.

Slide 31: Or meaning can evolve…

Slide 32: into which team possesses the arrow.

Slide 33: Meaning can survive a long time.

Slide 34: For example: Why green and red?

Slide 35: Bad, negative. Good, positive.

Slide 36: Start, on. Stop, off.

Slide 37: ??? Why do we use red and green?

Slide 38: They are inherited from traffic signals…

Slide 39: Photo of railroad traffic signal which inherited from railroad signals…

Slide 40: We need to decode communication.

Slide 41: © Scott McCloud, Understanding Comics

Slide 42: The language of interaction.

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.

Slide 44: Elements.

Slide 45: Words. Labels are everywhere.

Slide 46: Words. Instructing new users.

Slide 47: Photo: Darwin Bell Words. Beneficial redundancy.

Slide 48: Words. Command or label?

Slide 49: Words. Simple or confusing? …

Slide 50: Words. Redefining leads to confusion.

Slide 51: Words. Clean and simple.

Slide 52: Words. Inviting. Add a trip?

Slide 53: Colors.

Slide 54: Shapes. Which is a “button”?

Slide 55: Shapes. Physical shape has meaning.

Slide 56: Shapes. Physical shape has meaning.

Slide 57: Shapes. “Look at me, I’m a button!”

Slide 58: Shapes. Rounded rectangles evolve.

Slide 59: Shapes. Underline = “I am a button.”

Slide 60: Shapes. We don’t need shapes.

Slide 61: Shapes. The whole side is a button.

Slide 62: Shapes. Or the button disappears.

Slide 63: Shapes. What’s interactable anymore?

Slide 64: Gesture. First public exposure?

Slide 65: Gesture. Cooties lead to gestures.

Slide 66: Gesture. Tapping into natural motions.

Slide 67: Relationships.

Slide 68: Zoning. Families of controls/content.

Slide 69: Zoning. An example: Amazon.

Slide 70: Tempt Zoning. Dividing up the page.

Slide 71: Tempt Tempt Zoning. Dividing up the page.

Slide 72: Browse Tempt Tempt Zoning. Dividing up the page.

Slide 73: Browse Tempt Tempt Re-Tempt Zoning. Dividing up the page.

Slide 74: Browse Promote Tempt Tempt Follow up Zoning. Dividing up the page.

Slide 75: Tempt Manage Browse Promote Tempt Tempt Follow up Zoning. Dividing up the page.

Slide 76: Priority. There is a focus.

Slide 77: Priority. Where is the importance?

Slide 78: Priority. Where is the focus?

Slide 79: Priority. Color used to create focus…

Slide 80: …but multiple focuses is not focus.

Slide 81: Priority. Distinguish the likely option.

Slide 82: Priority. Promote the likely option.

Slide 83: Priority. Create a hero.

Slide 84: Principles.

Slide 85: Clarity. Make sense or confusion?

Slide 86: Clarity. Sacrifice meaning for… rad?

Slide 87: Clarity. Anticipate the question.

Slide 88: Clarity. Meaning from a distance.

Slide 89: Clarity. Big fat letters.

Slide 90: Clarity. Action = results.

Slide 91: Perspective. Product or system?

Slide 92: Perspective. Customized for who?

Slide 93: Perspective. Is that really necessary?

Slide 94: Perspective. Is that really necessary?

Slide 95: Perspective. Is that really necessary?

Slide 96: ! Surprise. Design for delight.

Slide 97: Surprise. Anticipate frustration.

Slide 98: Surprise. Anticipate frustration.

Slide 100: More at www. push click touch .com “bill_derouchey@ziba.com “billder” on most social networks