Download - Language of Interaction IDEA08
The Languageof Interaction
Bill DeRouchey
What can we learn from the objects…
that people have to learn how to use?
LinguisticsAnthropology
DesignEmpathy
ok, it’s a bunch of buttons
We learn via whatwe already know.
Alberto Cañas
Using verbsin interfaces.
Chris Crawford
The form of a bookhasn’t changed.
Dave Gray
Notice the microinteractions.
David Armano
How do people learnhow to use interfaces?
People learn from past experiences.
Experiences create expectations.
What have you learned?
@
Playing laundry.
Interfaces inheritmeaning from
other interfaces.
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 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.
Meaning migrates across domains.
Photo: Livia Labate
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.
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. Command or label?
Words. Simple …Words. Simple or confusing?
Words. Redefining squanders meaning.
Shapes. Is this a “button”?
Shapes. Is this a “button”?
Shapes. Rounded rectangles evolve.
Shapes. Underline = “I am a button.”
Shapes. We don’t need shapes.
Shapes. What’s interactable anymore?
Relationships.
Zoning. Families of controls/content.
Zoning. An example: Amazon.
Zoning. Dividing up the page.
Tempt
Zoning. Dividing up the page.
Tempt
Zoning. Dividing up the page.
Zoning. Dividing up the page.
Tempt
Zoning. Dividing up the page.
Zoning. Dividing up the page.
Browse
Zoning. Dividing up the page.
Zoning. Dividing up the page.
Re-Tempt
Zoning. Dividing up the page.
Zoning. Dividing up the page.
Promote
Zoning. Dividing up the page.
Tempt
Tempt
Browse
Re-Tempt
Promote
Zoning. Dividing up the page.
Tempt
Tempt
Browse
Re-Tempt
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 is not focus.
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. Trend: Big fat letters.
Clarity. Action = results.
Perspective. Product or system?
Perspective. Is that really necessary?
Perspective. Is that really necessary?
Perspective. Is that really necessary?
Surprise. Design for delight.
!
Surprise. Anticipate frustration.
Surprise. The familiar in a new context.
The Languageof Interaction
Bill DeRoucheypushclicktouch.com@billder