Given CHIFOO in Portland OR (4/7/2010), UxLx in Lisbon, Portugal (May 2010) & BigD in Dallas, TX (May 2010)
In any field of design, designers can enhance their craft by studying the work of others. Through the careful exercise of breaking down real-world solutions into their underlying principles and patterns, previous lessons can be applied to new sets of problems we encounter. Designing for web interfaces is no different. By necessity we are constantly searching for inspiration and practical guidance in solving the problems we face as designers each day. A powerful approach is to capture these lessons into “design lenses”. A design lens allows you to view the user experience through the eyes of a single design principle. Lenses were originally created for game design but are just as powerful for user experience design.
In this talk, Bill introduces the idea of design lenses and discuss several lenses inspired from fields of study as diverse as theater, magic, game & car design, Shaker furniture, motion graphics, and comics for inspiration in designing rich, interactive interfaces. By teasing out some of the key takeaways from each of these disciplines, a fresh light can be shed on our own corner of the design universe.
14. The Lens of
Simplicity/Complexity
Strike the right
balance between
Simplicity/Complexity
simplicity and
complexity.
• Are the main things simple?
• Does complexity emerge as
needed? Or is the interface
intrinsically complex?
• Does the balance match
the context?
15. The Lens of
Simplicity/Complexity
Strike the right
balance between
Simplicity/Complexity
simplicity and
complexity. Pandemic.
Game Design.
• Are the main things simple?
• Does complexity emerge as
needed? Or is the interface
intrinsically complex?
• Does the balance match
the context?
16. LENS APPLIED TO PANDEMIC
Before After
Actions: Actions:
Simplicity/Complexity
Quarantine with cubes Everything takes 1 action
Move and cure with cards
End of Turn: End of Turn:
Draw 4 points of stuff Draw 2 cards
Cards count for 2
Cubes count for 1
Source: Matt Leacock. Lessons Learned from Pandemic. Presented at Netflix
17. Simplicity/Complexity
... AS SIMPLE AS POSSIBLE,
BUT NO SIMPLER
Source: Matt Leacock. Lessons Learned from Pandemic. Presented at Netflix
18. LENS APPLIED TO PANDEMIC
Before After
Single Deck of Cards: Two Decks of Cards:
Simplicity/Complexity
- For direct flights
- For connecting flights
- For charter flights
- To cure diseases
- To infect cities
infection card
player card
Source: Matt Leacock. Lessons Learned from Pandemic. Presented at Netflix
19. The Lens of
Simplicity/Complexity
Strike the right
balance between
Simplicity/Complexity
simplicity and
complexity. Shakers.
Furniture Design.
• Are the main things simple?
• Does complexity emerge as
needed? Or is the interface
intrinsically complex?
• Does the balance match
the context?
20. FOUR POSTS, THREE SLATS, A HANDFUL OF
STRETCHERS, A FEW YARDS OF WOOLEN TAPE FOR THE
SEAT. IT COULD SCARCELY BE MORE SIMPLY MADE,
BUT LOOK MORE CLOSELY AT THIS PRODUCT OF AN
UNHURRIED HAND. THE PROPORTIONS WERE
Simplicity/Complexity
CHOSEN WITH CARE.
THE POSTS ARE SLENDER, NO THICKER THAN NEEDED FOR STRENGTH.
YOU CAN LIFT THE CHAIR WITH A FINGER. THE SLATS INCREASE
SLIGHTLY IN HEIGHT AS THEY RISE, AS DOES THE SPACE BETWEEN THEM, SO
THAT THE BACK SEEMS TO FLOAT ABOVE THE SEAT AND LEGS. THE CHAIR
SLANTS BACKWARD AT AN ANGLE AGREEABLE FOR SITTING.
Source: Shaker Design. June Sprigg. p . 11
21. FOUR POSTS, THREE SLATS, A HANDFUL OF
STRETCHERS, A FEW YARDS OF WOOLEN TAPE FOR THE
SEAT. IT COULD SCARCELY BE MORE SIMPLY MADE,
BUT LOOK MORE CLOSELY AT THIS PRODUCT OF AN
UNHURRIED HAND. THE PROPORTIONS WERE
Simplicity/Complexity
CHOSEN WITH CARE.
THE POSTS ARE SLENDER, NO THICKER THAN NEEDED FOR STRENGTH.
YOU CAN LIFT THE CHAIR WITH A FINGER. THE SLATS INCREASE
SLIGHTLY IN HEIGHT AS THEY RISE, AS DOES THE SPACE BETWEEN THEM, SO
THAT THE BACK SEEMS TO FLOAT ABOVE THE SEAT AND LEGS. THE CHAIR
SLANTS BACKWARD AT AN ANGLE AGREEABLE FOR SITTING.
Source: Shaker Design. June Sprigg. p . 11
22. Simplicity/Complexity
The Shakers did not spurn beauty; they simply reinvented it... The
Shakers had just one [restriction]: do not make what is not useful.
The rejected ornament. The rest--color, pattern, line, form,
proportion--they freely and joyously used.
23. The Lens of
Simplicity/Complexity
Strike the right
balance between
Simplicity/Complexity
simplicity and
complexity.
BMW.
Car Design.
• Are the main things simple?
• Does complexity emerge as
needed? Or is the interface
intrinsically complex?
• Does the balance match
the context?
32. The Lens of
Simplicity/Complexity
Rate & Replace.
Strike the right Web Design.
balance between
Simplicity/Complexity
simplicity and
complexity.
• Are the main things simple?
• Does complexity emerge as
needed? Or is the interface
intrinsically complex?
• Does the balance match
the context?
37. The Lens of Flow
A state of
heightened
mental focus.
• Are there natural transitions? Flow Book.
Flow
• Every dialog needed? Psychology.
• Would one page suffice?
• Can you persist context?
• More subtle ways to show
state change?
• Are there assists that amplify
efforts?
58. Role of Supporting Actor
Gives added dimension to a main character through
relationship with this character.
Supporting Actor
Enhances the plot of a story.
Best Actor in a Supporting
Role - 2009
Christoph Waltz
(Col. Hans Landa)
Inglourious Basterds
59. The Lens of the
Supporting Actor
A supporting
actor/actress
must use Thelma Ritter.
Supporting Actor
restraint not to Actress.
upstage the
main actor.
Stella in Rear Window
Ask these questions about effect/elements:
• Do they enhance the overall plot/goal? Nominated for 6
• What would they experience be like
without them? Oscars for Best
• Are there alternate, more subtle
approaches? Supporting Actress
• Is the interaction natural (not forced)?
Never won
73. INTERESTING MOMENTS
Frescoes & “Juxtaposed
stained glass pictorial & other
have been telling images in
stories for a long deliberate
time. sequence.”
Interesting Moments
panes panels
tell the moments tell the moments
of a story of a story
The masters of Magic hangs in the
animation called it balance of the
the “Illusion of “delicacy of the
Life”. illusion”.
cells the performance
tell the moments hides the moments
of a story of a story
74. The Lens of
Interesting Moments
An experience is like
an illusion. It looks
Interesting Moments
simplest when every
moment has been
painstakingly
premeditated. Magic is in both in
Ask these questions about the moments: the details and in
the performance.
• Have you considered all the details?
• Are you using them for engagement?
• Choosing wisely which to ignore?
• Do they add up to a story?
• Are there tell-tale signs? e.g., bandaids
to cover up for unconsidered
moments?
75. DISAPPEARING LADY
Interesting Moments
Magic is in both in the details and in the performance.
The slightest mistake will destroy the illusion. Each
moment matters.
80. SIMPLE ILLUSION? EVENTS...
PAGE LOAD. MOUSE HOVER. MOUSE DOWN.
DRAG INITIATED. DRAG LEAVES ORIGINAL
LOCATION. DRAG RE-ENTERS ORIGINAL LOCATION.
Interesting Moments
DRAG RE-ENTERS ORIGINAL LOCATION. DRAG
ENTERS VALID TARGET. DRAG EXITS VALID TARGET.
DRAG ENTERS SPECIFIC INVALID TARGET. DRAG IS
OVER NO SPECIFIC TARGET. DRAG HOVERS OVER
VALID TARGET. DRAG HOVERS OVER INVALID TARGET.
DROP ACCEPTED. DROP REJECTED. DROP ON
PARENT CONTAINER.
16+
113. FEEDBACK?
• Lenses are still experimental for me.
• Launched http://designingwithlenses.com to collect & curate lenses.
• Lumpers vs. Splitters?
• Lens rooted in narrowly drawn principle/lesson from another field?
OR lens rooted in generally universal principle and colored by many
stories from other fields
• How important is the narrative of the story to the lens? Should the
focusing questions be in the story narrative or in the user experience
narrative?
• Different than patterns.