0
DESIGNING WITH LENSES
     Lessons from the Meta-craft

             Bill Scott
             CHIFOO
            April 7, 2...
ABOUT ME
Dozens of awards including:
Family Game of the Year

Designed by Matt Leacock
Fellow Y! Patterns curator / ID
Game Designer
Matt switched my
vocabulary
Lenses, perspectives

Jesse Schell’s book
Art of Game Design
A Book of Lenses
DESIGN LENSES
LENS CARDS
A DESIGN LENS ALLOWS YOU TO VIEW THE USER
     EXPERIENCE FROM THE PERSPECTIVE
       OF A SINGLE DESIGN PRINCIPLE.
USUALLY FROM THE PERSPECTIVE
 OF ANOTHER FIELD OF STUDY
title




figure




synopsis




 focus questions
Game, Furniture, Car
                        SAMPLER: FOUR LENSES




                                                    ...
Game, Furniture, Car
                       SIMPLICITY/COMPLEXITY



                       Simplicity/Complexity
The Lens of
                        Simplicity/Complexity

                                    Strike the right
          ...
The Lens of
                        Simplicity/Complexity

                                    Strike the right
          ...
LENS APPLIED TO PANDEMIC
                        Before                           After
                        Actions:  ...
Simplicity/Complexity




                        ... AS SIMPLE AS POSSIBLE,
                            BUT NO SIMPLER


...
LENS APPLIED TO PANDEMIC
                        Before                                               After
              ...
The Lens of
                        Simplicity/Complexity

                                    Strike the right
          ...
FOUR POSTS, THREE SLATS, A HANDFUL OF
                        STRETCHERS, A FEW YARDS OF WOOLEN TAPE FOR THE
             ...
FOUR POSTS, THREE SLATS, A HANDFUL OF
                        STRETCHERS, A FEW YARDS OF WOOLEN TAPE FOR THE
             ...
Simplicity/Complexity




                        The Shakers did not spurn beauty; they simply reinvented it... The
     ...
The Lens of
                        Simplicity/Complexity

                                    Strike the right
          ...
2002 BMW iDrive
Simplicity/Complexity




                               700 commands
                               under...
Simplicity/Complexity




                          Now 7 buttons + knob.
                        And 6 programmable butto...
Simplicity/Complexity




                          Now 7 buttons + knob.
                        And 6 programmable butto...
Simplicity/Complexity




                          Now 7 buttons + knob.
                        And 6 programmable butto...
Simplicity/Complexity




                          Now 7 buttons + knob.
                        And 6 programmable butto...
Simplicity has a
                           context
Simplicity/Complexity
Simplicity has a
                           context
Simplicity/Complexity
Simplicity/Complexity

                        FOCUSED SIMPLICITY
The Lens of
                        Simplicity/Complexity
                                                          Rate &...
Simplicity/Complexity
Simplicity/Complexity
Simplicity/Complexity
Cognitive
                   FLOW



Flow
The Lens of Flow
                         A state of
                         heightened
                         mental f...
Notice anything?
Flow
Flow
Flow
Try again.
Flow
Flow
Flow
Exploratorium Exhibit
Flow
Flow
“Don’t stop the
          proceedings with
       idiocy” - Alan Cooper
Flow
“Don’t stop the
          proceedings with
       idiocy” - Alan Cooper



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




       Pogo-stick navigation
         can break flow
Flow
Flow
Flow
Flow
Flow




        You can encapsulate
       forks in flow within an
               overlay
Theater, Animation
                         SUPPORTING ACTOR




                                        Motion Graphics

...
Role of Supporting Actor
                   Gives added dimension to a main character through
                   relations...
The Lens of the
                   Supporting Actor
                                             A supporting
            ...
Supporting Actor
Supporting Actor
Supporting Actor
Supporting Actor
Supporting Actor
Occam:
                   W hat can b  e done with
                      ss is done i n vain with
                   le
Su...
Supporting Actor
Tufte:             ve Differenc
                                                   e.
                   Sm  allest Effect...
Supporting Actor
MOTION GRAPHICS LESSON
Supporting Actor
MOTION GRAPHICS LESSON
Supporting Actor
MOTION GRAPHICS LESSON
Supporting Actor




                        Simple Rule:
                                current e...
INTERESTING MOMENTS




                                                Art, Animation
          Magic, Comics




       ...
INTERESTING MOMENTS
                         Frescoes &            “Juxtaposed
                         stained glass     ...
The Lens of
                      Interesting Moments
                                         An experience is like
     ...
DISAPPEARING LADY
Interesting Moments




                      Magic is in both in the details and in the performance.

 ...
SIMPLE ILLUSION?
SIMPLE ILLUSION? EVENTS...
                         PAGE LOAD. MOUSE HOVER. MOUSE DOWN.
                           DRAG IN...
SIMPLE ILLUSION? ACTORS...


                      PAGE. CURSOR. TOOL TIP. DRAG
Interesting Moments




                  ...
Actors   Events




                                        96
Interesting Moments




                                   ...
INTERESTING MOMENTS
Interesting Moments
INTERESTING MOMENTS
Interesting Moments
INTERESTING MOMENTS
Interesting Moments
INTERESTING MOMENTS
Interesting Moments
INTERESTING MOMENTS
Interesting Moments
INTERESTING MOMENTS
Interesting Moments
INTERESTING MOMENTS
Interesting Moments




                                 Events
                      Actors
interesting moments
                      opportunities for
                      engaging with the user
                 ...
SYMMETRY OF INTERACTION
Interesting Moments
SYMMETRY OF INTERACTION
Interesting Moments
SYMMETRY OF INTERACTION
Interesting Moments
SYMMETRY OF INTERACTION
Interesting Moments
SYMMETRY OF INTERACTION
Interesting Moments
SHIFTING CONTENT
Interesting Moments




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




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




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




                      anti-pattern. hover & cover. yahoo! teachers
DELICACY BROKEN
Interesting Moments




                      barnes and nobles
DRAG & DROP MOMENTS
Interesting Moments




                      meebo bar
DRAG & DROP INVITATION
Interesting Moments
DRAG & DROP INVITATION
Interesting Moments
DRAG & DROP INVITATION

                                    These interesting
                                 moments wor...
Interesting Moments
Can you spot the moment
                       that the “delicacy of the
                       illusion” was destroyed?
I...
Interesting Moments
Interesting Moments
Interesting Moments
Can you see how the
Interesting Moments




                       illusion is created?
Interesting Moments
Interesting Moments
FEEDBACK?
• Lenses   are still experimental for me.

• Launched    http://designingwithlenses.com to collect & curate lens...
CARDS? ROLES?
RESOURCES
        designingwebinterfaces.com/resources




                          kits




books
Companion Site
designingwithlenses.com
Presentation
billwscott.com/share/
presentations/2010/chifoo
Blogs
looksgoodworkswe...
Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)
Designing With Lenses (UxLx, CHIFOO, BigD)
Upcoming SlideShare
Loading in...5
×

Designing With Lenses (UxLx, CHIFOO, BigD)

6,756

Published on

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.

Published in: Design
0 Comments
27 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,756
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
172
Comments
0
Likes
27
Embeds 0
No embeds

No notes for slide

Transcript of "Designing With Lenses (UxLx, CHIFOO, BigD)"

  1. 1. DESIGNING WITH LENSES Lessons from the Meta-craft Bill Scott CHIFOO April 7, 2010
  2. 2. ABOUT ME
  3. 3. Dozens of awards including: Family Game of the Year Designed by Matt Leacock Fellow Y! Patterns curator / ID Game Designer
  4. 4. Matt switched my vocabulary Lenses, perspectives Jesse Schell’s book Art of Game Design A Book of Lenses
  5. 5. DESIGN LENSES
  6. 6. LENS CARDS
  7. 7. A DESIGN LENS ALLOWS YOU TO VIEW THE USER EXPERIENCE FROM THE PERSPECTIVE OF A SINGLE DESIGN PRINCIPLE.
  8. 8. USUALLY FROM THE PERSPECTIVE OF ANOTHER FIELD OF STUDY
  9. 9. title figure synopsis focus questions
  10. 10. Game, Furniture, Car SAMPLER: FOUR LENSES Cognitive Simplicity/Complexity Flow Theater, Animation Motion Graphics Art, Animation Magic, Comics Supporting Actor Interesting Moments
  11. 11. Game, Furniture, Car SIMPLICITY/COMPLEXITY Simplicity/Complexity
  12. 12. 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?
  13. 13. 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?
  14. 14. 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
  15. 15. Simplicity/Complexity ... AS SIMPLE AS POSSIBLE, BUT NO SIMPLER Source: Matt Leacock. Lessons Learned from Pandemic. Presented at Netflix
  16. 16. 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
  17. 17. 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?
  18. 18. 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
  19. 19. 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
  20. 20. 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.
  21. 21. 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?
  22. 22. 2002 BMW iDrive Simplicity/Complexity 700 commands under one knob and one button Source: http://en.wikipedia.org/wiki/IDrive
  23. 23. Simplicity/Complexity Now 7 buttons + knob. And 6 programmable buttons Source: http://bit.ly/dy5wNx
  24. 24. Simplicity/Complexity Now 7 buttons + knob. And 6 programmable buttons Source: http://bit.ly/dy5wNx
  25. 25. Simplicity/Complexity Now 7 buttons + knob. And 6 programmable buttons Source: http://bit.ly/dy5wNx
  26. 26. Simplicity/Complexity Now 7 buttons + knob. And 6 programmable buttons Source: http://bit.ly/dy5wNx
  27. 27. Simplicity has a context Simplicity/Complexity
  28. 28. Simplicity has a context Simplicity/Complexity
  29. 29. Simplicity/Complexity FOCUSED SIMPLICITY
  30. 30. 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?
  31. 31. Simplicity/Complexity
  32. 32. Simplicity/Complexity
  33. 33. Simplicity/Complexity
  34. 34. Cognitive FLOW Flow
  35. 35. 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?
  36. 36. Notice anything? Flow
  37. 37. Flow
  38. 38. Flow
  39. 39. Try again. Flow
  40. 40. Flow
  41. 41. Flow
  42. 42. Exploratorium Exhibit Flow
  43. 43. Flow
  44. 44. “Don’t stop the proceedings with idiocy” - Alan Cooper Flow
  45. 45. “Don’t stop the proceedings with idiocy” - Alan Cooper Idiot Box Flow
  46. 46. Flow
  47. 47. Keeps the user in browse flow till ready to make a choice. Flow
  48. 48. Flow
  49. 49. Flow Pogo-stick navigation can break flow
  50. 50. Flow
  51. 51. Flow
  52. 52. Flow
  53. 53. Flow
  54. 54. Flow You can encapsulate forks in flow within an overlay
  55. 55. Theater, Animation SUPPORTING ACTOR Motion Graphics Supporting Actor
  56. 56. 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
  57. 57. 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
  58. 58. Supporting Actor
  59. 59. Supporting Actor
  60. 60. Supporting Actor
  61. 61. Supporting Actor
  62. 62. Supporting Actor
  63. 63. Occam: W hat can b e done with ss is done i n vain with le Supporting Actor more.
  64. 64. Supporting Actor
  65. 65. 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
  66. 66. Supporting Actor
  67. 67. MOTION GRAPHICS LESSON Supporting Actor
  68. 68. MOTION GRAPHICS LESSON Supporting Actor
  69. 69. MOTION GRAPHICS LESSON Supporting Actor Simple Rule: current effect in half. Cut the A nd maybe half again.
  70. 70. INTERESTING MOMENTS Art, Animation Magic, Comics Interesting Moments
  71. 71. 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
  72. 72. 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?
  73. 73. 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.
  74. 74. SIMPLE ILLUSION?
  75. 75. 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+
  76. 76. SIMPLE ILLUSION? ACTORS... PAGE. CURSOR. TOOL TIP. DRAG Interesting Moments OBJECT. DRAG OBJECT’S PARENT CONTAINER. DROP TARGET. 6+
  77. 77. Actors Events 96 Interesting Moments Interesting Moments
  78. 78. INTERESTING MOMENTS Interesting Moments
  79. 79. INTERESTING MOMENTS Interesting Moments
  80. 80. INTERESTING MOMENTS Interesting Moments
  81. 81. INTERESTING MOMENTS Interesting Moments
  82. 82. INTERESTING MOMENTS Interesting Moments
  83. 83. INTERESTING MOMENTS Interesting Moments
  84. 84. INTERESTING MOMENTS Interesting Moments Events Actors
  85. 85. interesting moments opportunities for engaging with the user throughout an interaction Interesting Moments micro-states
  86. 86. SYMMETRY OF INTERACTION Interesting Moments
  87. 87. SYMMETRY OF INTERACTION Interesting Moments
  88. 88. SYMMETRY OF INTERACTION Interesting Moments
  89. 89. SYMMETRY OF INTERACTION Interesting Moments
  90. 90. SYMMETRY OF INTERACTION Interesting Moments
  91. 91. SHIFTING CONTENT Interesting Moments contextual tool overlay. bing.com
  92. 92. HOVER & COVER Interesting Moments contextual tool overlay. bing.com
  93. 93. HOVER & COVER Interesting Moments anti-pattern. hover & cover. yahoo! teachers
  94. 94. HOVER & COVER Interesting Moments anti-pattern. hover & cover. yahoo! teachers
  95. 95. DELICACY BROKEN Interesting Moments barnes and nobles
  96. 96. DRAG & DROP MOMENTS Interesting Moments meebo bar
  97. 97. DRAG & DROP INVITATION Interesting Moments
  98. 98. DRAG & DROP INVITATION Interesting Moments
  99. 99. DRAG & DROP INVITATION These interesting moments work together Interesting Moments to create an illusion.
  100. 100. Interesting Moments
  101. 101. Can you spot the moment that the “delicacy of the illusion” was destroyed? Interesting Moments
  102. 102. Interesting Moments
  103. 103. Interesting Moments
  104. 104. Interesting Moments
  105. 105. Can you see how the Interesting Moments illusion is created?
  106. 106. Interesting Moments
  107. 107. Interesting Moments
  108. 108. 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.
  109. 109. CARDS? ROLES?
  110. 110. RESOURCES designingwebinterfaces.com/resources kits books
  111. 111. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×