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.

1. DESIGNING WITH LENSES
Lessons from the Meta-craft
Bill Scott
CHIFOO
April 7, 2010

2. ABOUT ME

4. Dozens of awards including:
Family Game of the Year
Designed by Matt Leacock
Fellow Y! Patterns curator / ID
Game Designer

5. Matt switched my
vocabulary
Lenses, perspectives
Jesse Schell’s book
Art of Game Design
A Book of Lenses

6. DESIGN LENSES

7. LENS CARDS

8. A DESIGN LENS ALLOWS YOU TO VIEW THE USER
EXPERIENCE FROM THE PERSPECTIVE
OF A SINGLE DESIGN PRINCIPLE.

9. USUALLY FROM THE PERSPECTIVE
OF ANOTHER FIELD OF STUDY

10. title
figure
synopsis
focus questions

12. Game, Furniture, Car
SAMPLER: FOUR LENSES
Cognitive
Simplicity/Complexity Flow
Theater, Animation
Motion Graphics
Art, Animation
Magic, Comics
Supporting Actor Interesting Moments

13. Game, Furniture, Car
SIMPLICITY/COMPLEXITY
Simplicity/Complexity

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?

24. 2002 BMW iDrive
Simplicity/Complexity
700 commands
under one knob
and one button
Source: http://en.wikipedia.org/wiki/IDrive

25. Simplicity/Complexity
Now 7 buttons + knob.
And 6 programmable buttons
Source: http://bit.ly/dy5wNx

26. Simplicity/Complexity
Now 7 buttons + knob.
And 6 programmable buttons
Source: http://bit.ly/dy5wNx

27. Simplicity/Complexity
Now 7 buttons + knob.
And 6 programmable buttons
Source: http://bit.ly/dy5wNx

28. Simplicity/Complexity
Now 7 buttons + knob.
And 6 programmable buttons
Source: http://bit.ly/dy5wNx

29. Simplicity has a
context
Simplicity/Complexity

30. Simplicity has a
context
Simplicity/Complexity

31. Simplicity/Complexity
FOCUSED SIMPLICITY

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?

33. Simplicity/Complexity

34. Simplicity/Complexity

35. Simplicity/Complexity

36. Cognitive
FLOW
Flow

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?

38. Notice anything?
Flow

39. Flow

40. Flow

41. Try again.
Flow

42. Flow

43. Flow

44. Exploratorium Exhibit
Flow

45. Flow

46. “Don’t stop the
proceedings with
idiocy” - Alan Cooper
Flow

47. “Don’t stop the
proceedings with
idiocy” - Alan Cooper
Idiot Box
Flow

48. Flow

49. Keeps the user in
browse flow till ready
to make a choice.
Flow

50. Flow

51. Flow
Pogo-stick navigation
can break flow

52. Flow

53. Flow

54. Flow

55. Flow

56. Flow
You can encapsulate
forks in flow within an
overlay

57. Theater, Animation
SUPPORTING ACTOR
Motion Graphics
Supporting Actor

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

60. Supporting Actor

61. Supporting Actor

62. Supporting Actor

63. Supporting Actor

64. Supporting Actor

65. Occam:
W hat can b e done with
ss is done i n vain with
le
Supporting Actor
more.

66. Supporting Actor

67. Tufte: ve Differenc
e.
Sm allest Effecti
Supporting Actor
l distinctions
M ake all visua ll
sible, but sti
as subtle as pos .
clear and effective

68. Supporting Actor

69. MOTION GRAPHICS LESSON
Supporting Actor

70. MOTION GRAPHICS LESSON
Supporting Actor

71. MOTION GRAPHICS LESSON
Supporting Actor
Simple Rule:
current effect in half.
Cut the
A nd maybe half again.

72. INTERESTING MOMENTS
Art, Animation
Magic, Comics
Interesting Moments

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.

79. SIMPLE ILLUSION?

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+

81. SIMPLE ILLUSION? ACTORS...
PAGE. CURSOR. TOOL TIP. DRAG
Interesting Moments
OBJECT. DRAG OBJECT’S PARENT
CONTAINER. DROP TARGET.
6+

82. Actors Events
96
Interesting Moments
Interesting Moments

83. INTERESTING MOMENTS
Interesting Moments

84. INTERESTING MOMENTS
Interesting Moments

85. INTERESTING MOMENTS
Interesting Moments

86. INTERESTING MOMENTS
Interesting Moments

87. INTERESTING MOMENTS
Interesting Moments

88. INTERESTING MOMENTS
Interesting Moments

89. INTERESTING MOMENTS
Interesting Moments
Events
Actors

90. interesting moments
opportunities for
engaging with the user
throughout an
interaction
Interesting Moments
micro-states

91. SYMMETRY OF INTERACTION
Interesting Moments

92. SYMMETRY OF INTERACTION
Interesting Moments

93. SYMMETRY OF INTERACTION
Interesting Moments

94. SYMMETRY OF INTERACTION
Interesting Moments

95. SYMMETRY OF INTERACTION
Interesting Moments

96. SHIFTING CONTENT
Interesting Moments
contextual tool overlay. bing.com

97. HOVER & COVER
Interesting Moments
contextual tool overlay. bing.com

98. HOVER & COVER
Interesting Moments
anti-pattern. hover & cover. yahoo! teachers

99. HOVER & COVER
Interesting Moments
anti-pattern. hover & cover. yahoo! teachers

100. DELICACY BROKEN
Interesting Moments
barnes and nobles

101. DRAG & DROP MOMENTS
Interesting Moments
meebo bar

102. DRAG & DROP INVITATION
Interesting Moments

103. DRAG & DROP INVITATION
Interesting Moments

104. DRAG & DROP INVITATION
These interesting
moments work together
Interesting Moments
to create an illusion.

105. Interesting Moments

106. Can you spot the moment
that the “delicacy of the
illusion” was destroyed?
Interesting Moments

107. Interesting Moments

108. Interesting Moments

109. Interesting Moments

110. Can you see how the
Interesting Moments
illusion is created?

111. Interesting Moments

112. Interesting Moments

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.

114. CARDS? ROLES?

115. RESOURCES
designingwebinterfaces.com/resources
kits
books

116. Companion Site
designingwithlenses.com
Presentation
billwscott.com/share/
presentations/2010/chifoo
Blogs
looksgoodworkswell.com
designingwebinterfaces.com
designingwithlenses.com
Book
Designing Web Interfaces
Follow me on twitter!
@billwscott
@uxlenses