A Philosophy of Restraint

Variant of a talk given at An Event Apart (Seattle), ESAD (Porto), Webshaped (Helsinki), Refresh (Edinburgh), and Reasons Festival (Brighton) during 2012. Some slides of work in progress removed.

With a wealth of ideas and tools at our disposal, we often muddle our messages and complicate our code.

We appreciate that less is usually more, yet stuff our sites to bursting point, failing to be economical with what we have.

We must know when to stop, and when to throw things out. We should embrace simplicity and subtlety, and exploit the invisible.

Through timeless lessons and practical examples, learn how reduction and restraint can improve communication, emotion, and experience in our designs, with a philosophy applicable to every aspect of the systems we produce.

Transcript

1. Simon Collison
   Refresh Edinburgh | July 2012
   A philosophy of
   restraint
   

   View Slide

2. View Slide

3. Why call it
   a philosophy?
   

   View Slide

4. Design is messy
   

   View Slide

5. We design to communicate,
   and we seek emotive responses.
   

   View Slide

6. View Slide

7. View Slide

8. To delight someone is to give them a
   small lesson in seeing the world as
   something good.
   Frank Chimero, designer
   

   View Slide

9. View Slide

10. A design aesthetic?
    

    View Slide

11. Minimal, lots of white space...
    and clean. Right?
    

    View Slide

12. www.foodsense.is
    

    View Slide

13. www.guardian.co.uk
    

    View Slide

14. www.webdesignerwall.com
    

    View Slide

15. Systems
    

    View Slide

16. We don’t design web pages.
    We design systems.
    

    View Slide

17. View Slide

18. www.bbc.co.uk/gel
    

    View Slide

19. www.bbc.co.uk/gel
    

    View Slide

20. View Slide

21. View Slide

22. • Build a foundation for complexity
    • Devise a holistic approach for all projects
    • Devise a detailed project-specific system
    • Invest time in flexible pa ern libraries
    • Prepare for all eventualities
    

    View Slide

23. Embrace
    constraints
    

    View Slide

24. Having complete freedom is
    possibly the worst way to start
    any project.
    

    View Slide

25. View Slide

26. Constraint is key to understanding complexity.
    Increase constraint and you create an ordered
    system; do that inappropriately and you create
    the conditions for catastrophic failure; remove
    constraint and the system is chaotic.
    Dave Snowden, The 5 C’s of Complexity
    

    View Slide

27. • Make sense of the constraints you’re given
    • Look for constraints you yourself can apply
    • Make constraints a feature or selling point
    

    View Slide

28. Exercising
    restraint
    

    View Slide

29. Responding to the problem in
    the simplest way possible.
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. • Immerse yourself in the subject
    • Design responses first, not a website
    • Discover what can be put to one side
    • Avoid misplaced vernacular and cliché
    

    View Slide

34. Simplicity
    and
    complexity
    

    View Slide

35. Less is more. Simple is be er.
    Right?
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. Unleash complexity in
    orchestrated phases, and
    increase power gradually.
    

    View Slide

48. • Good systems bear the weight of complexity
    • Embrace new methods for organising data
    • Find simplicity in the data flows
    • Don’t be afraid of obvious approaches
    • Release power gradually
    

    View Slide

49. Between the lines
    

    View Slide

50. Don’t underestimate humans.
    They can fill in the blanks.
    

    View Slide

51. Environment
    Experience
    Others
    Me
    Instruction
    Interaction
    

    View Slide

52. The Arrival, by Shaun Tan
    

    View Slide

53. View Slide

54. View Slide

55. • Anticipate mental models
    • Reveal only what is necessary
    • Let users find their own stories
    • Embrace serendipity
    • Trust users to make sense of things
    

    View Slide

56. Affordance &
    typography
    

    View Slide

57. An affordance is a quality of an
    object, or an environment, that
    allows an individual to perform
    an action.
    

    View Slide

58. www.flightcardapp.com/
    

    View Slide

59. www.typekit.com
    

    View Slide

60. é
    é
    www.secondandpark.com/
    

    View Slide

61. • Understand the power of a ractiveness
    • Create obvious opportunities for interaction
    • Avoid unnecessary fakery and over-texturing
    • Don’t “iCal” the skeuomorphics
    • Use web type responsibly
    

    View Slide

62. Distraction
    

    View Slide

63. www.bbc.co.uk
    

    View Slide

64. www.icelandair.com/
    

    View Slide

65. View Slide

66. www.jetblue.com/
    

    View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. View Slide

73. View Slide

74. • Use a clear hierarchy
    • Look for obvious clashes or fussy extras
    • Remove or lessen the impact of distractions
    • Avoid dozens of competing pa erns
    • Don’t disguise calls to action
    

    View Slide

75. Focus & context
    

    View Slide

76. Put the extraneous to one side.
    Focus on the task in hand, or add greater
    emphasis to stories.
    

    View Slide

77. View Slide

78. View Slide

79. View Slide

80. www.thebolditalic.com/ www.gregorywood.co.uk /
    

    View Slide

81. View Slide

82. View Slide

83. View Slide

84. • Design with context and tell the story
    • Allow users to focus
    • Split complex tasks into manageable chunks
    • Don’t compromise primary areas
    • Remove distractions at key times
    • Forms can always be simplified
    

    View Slide

85. Audit
    

    View Slide

86. A timely audit can prevent
    catastrophic failures, and shine
    new light on what you’ve learned.
    

    View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. • Add breathing space to your schedule
    • Make regular audits a part of your process
    • Be honest about shortcomings or failures
    • Never be afraid to rethink and rework
    

    View Slide

92. A final pause
    

    View Slide

93. Don’t launch. Instead, sit with
    your work, think about it. Sieve
    it down and give it space.
    

    View Slide

94. View Slide

95. View Slide

96. View Slide

97. View Slide

98. www.colly.com/
    

    View Slide

99. View Slide

100. • Sit with your ‘finished’ work for some time
     • Stand back from it, find new perspectives
     • Seek valued opinion and feedback
     • Find things to throw away or reduce
     • Launch only when you are ready
     

     View Slide

101. This is my
     philosophy
     

     View Slide

102. delight / emotion / surprise
     systems / constraint / restraint
     simplicity / complexity / focus
     context / reduction
     

     View Slide

103. Thanks
     Simon Collison
     @colly
     

     View Slide