The Language of Interaction

The Languageof Interaction

Bill DeRoucheyZiba 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 inheritmeaning 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.

Languagesalways evolve.

Power icon0 1

Symbols start with one meaning…

then evolve and extend that meaning.

And migrate across domains.

Photo: Livia Labate

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…

which inherited from railroad signals…

Photo of railroad traffic signal

We need to decodecommunication.

© Scott McCloud, Understanding Comics

The languageof interaction.

WordsIconsColorsShapesSoundsMotionGestureSizeContour

ZoningLayoutIsolationPriorityProximityRepetitionAlignmentSequence

ClarityPerspectivePurposeDelightSurprise

Elements Relationships

The language of interaction.

Principles

Elements.

Words. Labels are everywhere.

Words. Instructing new users.

Words. Beneficial redundancy.

Photo: Darwin Bell

Words. Command or label?

Words. Simple …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.

Tempt

Tempt

Browse

Zoning. Dividing up the page.

Tempt

Tempt

Browse

Re-Tempt

Zoning. Dividing up the page.

Tempt

Tempt

Browse

Follow up

Promote

Zoning. Dividing up the page.

Tempt

Tempt

Browse

Follow up

Promote

Zoning. Dividing up the page.

TemptManage

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.

“[email protected]

“billder” on most social networks

More at

www. push click touch .com