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