Designing With Lenses (UxLx, CHIFOO, BigD)

11,765 views
10,571 views

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
11,765
On SlideShare
0
From Embeds
0
Number of Embeds
2,101
Actions
Shares
0
Downloads
174
Comments
0
Likes
27
Embeds 0
No embeds

No notes for slide

Designing With Lenses (UxLx, CHIFOO, BigD)

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

×