Designing With Lenses (UxLx, CHIFOO, BigD)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Designing With Lenses (UxLx, CHIFOO, BigD)

on

  • 8,036 views

Given CHIFOO in Portland OR (4/7/2010), UxLx in Lisbon, Portugal (May 2010) & BigD in Dallas, TX (May 2010) ...

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.

Statistics

Views

Total Views
8,036
Views on SlideShare
6,027
Embed Views
2,009

Actions

Likes
27
Downloads
171
Comments
0

45 Embeds 2,009

http://looksgoodworkswell.blogspot.com 810
http://www.uxbooth.com 772
http://www.webaudit.pl 112
http://feeds.feedburner.com 89
http://looksgoodworkswell.blogspot.co.uk 44
http://www.looksgoodworkswell.com 23
http://www.slideshare.net 17
http://feeds2.feedburner.com 17
http://looksgoodworkswell.blogspot.in 16
http://looksgoodworkswell.blogspot.ca 14
http://looksgoodworkswell.blogspot.de 11
http://looksgoodworkswell.blogspot.com.br 9
http://static.slidesharecdn.com 8
http://looksgoodworkswell.blogspot.com.au 7
http://looksgoodworkswell.blogspot.nl 6
http://www.jordomedia.com 5
http://dashboard.bloglines.com 5
http://looksgoodworkswell.blogspot.sg 5
http://jackychong.tumblr.com 3
http://looksgoodworkswell.blogspot.mx 2
http://looksgoodworkswell.blogspot.it 2
http://looksgoodworkswell.blogspot.ch 2
http://us-w1.rockmelt.com 2
http://www.linkedin.com 2
http://looksgoodworkswell.blogspot.se 2
http://reader.youdao.com 2
http://translate.googleusercontent.com 2
http://www.lmodules.com 2
http://127.0.0.1 2
http://www.hanrss.com 1
http://uxbdev.com 1
http://www.looksgoodworkswell.blogspot.com 1
http://looksgoodworkswell.blogspot.hu 1
http://looksgoodworkswell.blogspot.com.es 1
http://looksgoodworkswell.blogspot.ru 1
http://looksgoodworkswell.blogspot.ie 1
http://looksgoodworkswell.blogspot.pt 1
http://looksgoodworkswell.blogspot.co.nz 1
http://looksgoodworkswell.blogspot.cz 1
http://looksgoodworkswell.blogspot.kr 1
http://looksgoodworkswell.blogspot.dk 1
http://flavors.me 1
http://looksgoodworkswell.blogspot.fi 1
http://looksgoodworkswell.blogspot.jp 1
http://looksgoodworkswell.blogspot.com.tr 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designing With Lenses (UxLx, CHIFOO, BigD) Presentation Transcript

  • 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