Language of Interaction IDEA08

105
The Language of Interaction Bill DeRouchey

description

Language of Interaction, presented at IDEA 08 in Chicago, October 8, 2008. *Note* I will be stitching in the audio in a few days.

Transcript of Language of Interaction IDEA08

Page 1: Language of Interaction IDEA08

The Languageof Interaction

Bill DeRouchey

Page 2: Language of Interaction IDEA08

What can we learn from the objects…

Page 3: Language of Interaction IDEA08

that people have to learn how to use?

Page 4: Language of Interaction IDEA08

LinguisticsAnthropology

DesignEmpathy

ok, it’s a bunch of buttons

Page 5: Language of Interaction IDEA08
Page 6: Language of Interaction IDEA08

We learn via whatwe already know.

Alberto Cañas

Page 7: Language of Interaction IDEA08

Using verbsin interfaces.

Chris Crawford

Page 8: Language of Interaction IDEA08

The form of a bookhasn’t changed.

Dave Gray

Page 9: Language of Interaction IDEA08

Notice the microinteractions.

David Armano

Page 10: Language of Interaction IDEA08

How do people learnhow to use interfaces?

Page 11: Language of Interaction IDEA08

People learn from past experiences.

Page 12: Language of Interaction IDEA08

Experiences create expectations.

Page 13: Language of Interaction IDEA08

What have you learned?

Page 14: Language of Interaction IDEA08
Page 15: Language of Interaction IDEA08
Page 16: Language of Interaction IDEA08
Page 17: Language of Interaction IDEA08
Page 18: Language of Interaction IDEA08
Page 19: Language of Interaction IDEA08
Page 20: Language of Interaction IDEA08
Page 21: Language of Interaction IDEA08
Page 22: Language of Interaction IDEA08

@

Page 23: Language of Interaction IDEA08
Page 24: Language of Interaction IDEA08
Page 25: Language of Interaction IDEA08
Page 26: Language of Interaction IDEA08

Playing laundry.

Page 27: Language of Interaction IDEA08

Interfaces inheritmeaning from

other interfaces.

Page 28: Language of Interaction IDEA08

We need to see what people see.

Page 29: Language of Interaction IDEA08

We need to seek inspiration.

Page 30: Language of Interaction IDEA08

Inspiration from what we carry around.

Page 31: Language of Interaction IDEA08

Inspiration from common interactions.

Page 32: Language of Interaction IDEA08

Inspiration from what amuses us.

Page 33: Language of Interaction IDEA08

Inspiration from what intimidates us.

Page 34: Language of Interaction IDEA08

Inspiration from hacking it up.

Page 35: Language of Interaction IDEA08

Inspiration from mixing it up.

Page 36: Language of Interaction IDEA08

Inspiration from seeing the language.

Page 37: Language of Interaction IDEA08

We create and curate this language…

Page 38: Language of Interaction IDEA08

but language evolves and spreads.

Page 39: Language of Interaction IDEA08

Languagesalways evolve.

Page 40: Language of Interaction IDEA08

Power icon0 1

Symbols start with one meaning…

Page 41: Language of Interaction IDEA08

then evolve and extend that meaning.

Page 42: Language of Interaction IDEA08

Meaning migrates across domains.

Photo: Livia Labate

Page 43: Language of Interaction IDEA08

Or meaning can evolve…

Page 44: Language of Interaction IDEA08

into which team possesses the arrow.

Page 45: Language of Interaction IDEA08

Meaning can survive a long time.

Page 46: Language of Interaction IDEA08

For example: Why green and red?

Page 47: Language of Interaction IDEA08

Bad, negative. Good, positive.

Page 48: Language of Interaction IDEA08

Why do we use red and green?

???

Page 49: Language of Interaction IDEA08

They are inherited from traffic signals…

Page 50: Language of Interaction IDEA08

which inherited from railroad signals…

Photo of railroad traffic signal

Page 51: Language of Interaction IDEA08

We need to decodecommunication.

Page 52: Language of Interaction IDEA08

© Scott McCloud, Understanding Comics

Page 53: Language of Interaction IDEA08

The languageof interaction.

Page 54: Language of Interaction IDEA08

WordsIconsColorsShapesSoundsMotionGestureSizeContour

ZoningLayoutIsolationPriorityProximityRepetitionAlignmentSequence

ClarityPerspectivePurposeDelightSurprise

Elements Relationships

The language of interaction.

Principles

Page 55: Language of Interaction IDEA08

Elements.

Page 56: Language of Interaction IDEA08

Words. Labels are everywhere.

Page 57: Language of Interaction IDEA08

Words. Command or label?

Page 58: Language of Interaction IDEA08

Words. Simple …Words. Simple or confusing?

Page 59: Language of Interaction IDEA08

Words. Redefining squanders meaning.

Page 60: Language of Interaction IDEA08

Shapes. Is this a “button”?

Page 61: Language of Interaction IDEA08

Shapes. Is this a “button”?

Page 62: Language of Interaction IDEA08

Shapes. Rounded rectangles evolve.

Page 63: Language of Interaction IDEA08

Shapes. Underline = “I am a button.”

Page 64: Language of Interaction IDEA08

Shapes. We don’t need shapes.

Page 65: Language of Interaction IDEA08

Shapes. What’s interactable anymore?

Page 66: Language of Interaction IDEA08

Relationships.

Page 67: Language of Interaction IDEA08

Zoning. Families of controls/content.

Page 68: Language of Interaction IDEA08

Zoning. An example: Amazon.

Page 69: Language of Interaction IDEA08

Zoning. Dividing up the page.

Page 70: Language of Interaction IDEA08

Tempt

Zoning. Dividing up the page.

Page 71: Language of Interaction IDEA08

Tempt

Zoning. Dividing up the page.

Page 72: Language of Interaction IDEA08

Zoning. Dividing up the page.

Page 73: Language of Interaction IDEA08

Tempt

Zoning. Dividing up the page.

Page 74: Language of Interaction IDEA08

Zoning. Dividing up the page.

Page 75: Language of Interaction IDEA08

Browse

Zoning. Dividing up the page.

Page 76: Language of Interaction IDEA08

Zoning. Dividing up the page.

Page 77: Language of Interaction IDEA08

Re-Tempt

Zoning. Dividing up the page.

Page 78: Language of Interaction IDEA08

Zoning. Dividing up the page.

Page 79: Language of Interaction IDEA08

Promote

Zoning. Dividing up the page.

Page 80: Language of Interaction IDEA08

Tempt

Tempt

Browse

Re-Tempt

Promote

Zoning. Dividing up the page.

Page 81: Language of Interaction IDEA08

Tempt

Tempt

Browse

Re-Tempt

Promote

Zoning. Dividing up the page.

TemptManage

Page 82: Language of Interaction IDEA08

Priority. There is a focus.

Page 83: Language of Interaction IDEA08

Priority. Where is the importance?

Page 84: Language of Interaction IDEA08

Priority. Where is the focus?

Page 85: Language of Interaction IDEA08

Priority. Color used to create focus…

Page 86: Language of Interaction IDEA08

…but multiple is not focus.

Page 87: Language of Interaction IDEA08

Priority. Promote the likely option.

Page 88: Language of Interaction IDEA08

Priority. Create a hero.

Page 89: Language of Interaction IDEA08

Principles.

Page 90: Language of Interaction IDEA08

Clarity. Make sense or confusion?

Page 91: Language of Interaction IDEA08

Clarity. Sacrifice meaning for… rad?

Page 92: Language of Interaction IDEA08

Clarity. Anticipate the question.

Page 93: Language of Interaction IDEA08

Clarity. Meaning from a distance.

Page 94: Language of Interaction IDEA08

Clarity. Trend: Big fat letters.

Page 95: Language of Interaction IDEA08

Clarity. Action = results.

Page 96: Language of Interaction IDEA08

Perspective. Product or system?

Page 97: Language of Interaction IDEA08

Perspective. Is that really necessary?

Page 98: Language of Interaction IDEA08

Perspective. Is that really necessary?

Page 99: Language of Interaction IDEA08

Perspective. Is that really necessary?

Page 100: Language of Interaction IDEA08

Surprise. Design for delight.

!

Page 101: Language of Interaction IDEA08

Surprise. Anticipate frustration.

Page 102: Language of Interaction IDEA08

Surprise. The familiar in a new context.

Page 103: Language of Interaction IDEA08
Page 104: Language of Interaction IDEA08
Page 105: Language of Interaction IDEA08

The Languageof Interaction

Bill DeRoucheypushclicktouch.com@billder