The Zero Interface: Using Zero-based Thinking to Maintain Simplicity (FOWD London 2014)

My talk for Future of Web Design London, 2014. Simplicity is not only removing the non-essential, it's also about not adding the non-essential in the first place.

Transcript

1. The
   Zero
   Interface Using Zero-based Thinking
   to Maintain Simplicity
   Stephen Hay Future of Web Design, London 2014
   

   View Slide

2. It’s often said that simplicity
   is a matter of removing the unnecessary.
   Another approach might be
   not to add the unnecessary in the first place.
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. a b
    

    View Slide

18. a b
    

    View Slide

19. Rube Goldberg
    (adjective)
    

    View Slide

20. image: http://en.wikipedia.org/wiki/Rube_Goldberg_machine
    

    View Slide

21. accomplishing by complex means what
    seemingly could be done simply.
    image: http://en.wikipedia.org/wiki/Rube_Goldberg_machine
    

    View Slide

22. a b
    

    View Slide

23. a b
    

    View Slide

24. a b
    

    View Slide

25. Between A & B
    (among other things):
    

    View Slide

26. Between A & B
    (among other things):
    Processes (both concept and interaction)
    

    View Slide

27. Between A & B
    (among other things):
    Processes (both concept and interaction)
    The UI itself
    

    View Slide

28. Between A & B
    (among other things):
    Processes (both concept and interaction)
    The UI itself
    Technical implementation
    

    View Slide

29. Between A & B
    (among other things):
    Processes (both concept and interaction)
    The UI itself
    Technical implementation
    These are all the result of design decisions.
    

    View Slide

30. process
    

    View Slide

31. View Slide

32. source: http://badusability.com/3-simple-steps-to-qr-code-joy/
    

    View Slide

33. source: http://badusability.com/3-simple-steps-to-qr-code-joy/
    

    View Slide

34. View Slide

35. source: http://wtfmobileweb.com/
    

    View Slide

36. View Slide

37. This can be simpler…
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. UI
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. tech
    

    View Slide

47. Not being able to do something
    in a particular browser
    is not a browser problem.
    It’s a design problem.
    

    View Slide

48. Transfer lots of money
    

    View Slide

49. Transfer lots of money
    A button.
    

    View Slide

50. Transfer lots of money
    A button.
    But it’s not.
    

    View Slide

51. Transfer lots of money
    A button.
    But it’s not.
    It’s a link.
    

    View Slide

52. Transfer lots of money
    A button.
    But it’s not.
    It’s a link.
    Made to look like a button.
    

    View Slide

53. Transfer lots of money
    A button.
    But it’s not.
    It’s a link.
    Made to look like a button.
    But it links to nowhere.
    

    View Slide

54. Transfer lots of money
    A button.
    But it’s not.
    It’s a link.
    Made to look like a button.
    But it links to nowhere.
    It’s JavaScript (and click) dependent.
    

    View Slide

55. Transfer lots of money
    A button.
    But it’s not.
    It’s a link.
    Made to look like a button.
    But it links to nowhere.
    It’s JavaScript (and click) dependent.
    It’s insane.
    

    View Slide

56. Look at how they managed
    to complicate things so
    effectively.
    

    View Slide

57. Look at how they managed
    to complicate things so
    effectively.
    1. Make a link.
    

    View Slide

58. Look at how they managed
    to complicate things so
    effectively.
    1. Make a link.
    2. Style it to look like a button.
    

    View Slide

59. Look at how they managed
    to complicate things so
    effectively.
    1. Make a link.
    2. Style it to look like a button.
    3. Add JavaScript to make it act like a button.
    

    View Slide

60. Look at how they managed
    to complicate things so
    effectively.
    1. Make a link.
    2. Style it to look like a button.
    3. Add JavaScript to make it act like a button.
    4. Reduce complexity by not testing.
    

    View Slide

61. Look at how they could
    have done it.
    

    View Slide

62. Look at how they could
    have done it.
    1. Make a button, with the element.
    2. Style it.
    

    View Slide

63. A breakpoint.
    article {
    width: 60%;
    float: left;
    }
    aside {
    width: 40%;
    float: right;
    }
    @media screen and (max-width: 900px) {
    article,
    aside {
    width: 100%;
    float: none;
    }
    }
    

    View Slide

64. A breakpoint.
    article {
    width: 60%;
    float: left;
    }
    aside {
    width: 40%;
    float: right;
    }
    @media screen and (max-width: 900px) {
    article,
    aside {
    width: 100%;
    float: none;
    }
    }
    You’ve got to be kidding.
    

    View Slide

65. A breakpoint.
    article {
    width: 60%;
    float: left;
    }
    aside {
    width: 40%;
    float: right;
    }
    @media screen and (max-width: 900px) {
    article,
    aside {
    width: 100%;
    float: none;
    }
    }
    You’ve got to be kidding.
    

    View Slide

66. Look at how they managed
    to complicate things so
    effectively.
    

    View Slide

67. Look at how they managed
    to complicate things so
    effectively.
    1. Style article and aside as columns.
    

    View Slide

68. Look at how they managed
    to complicate things so
    effectively.
    1. Style article and aside as columns.
    2. Use media query to undo what we just did.
    

    View Slide

69. Look at how they could
    have done it.
    @media screen and (min-width: 900px) {
    article {
    width: 60%;
    float: left;
    }
    aside {
    width: 40%;
    float: right;
    }
    }
    

    View Slide

70. Look at how they could
    have done it.
    @media screen and (min-width: 900px) {
    article {
    width: 60%;
    float: left;
    }
    aside {
    width: 40%;
    float: right;
    }
    }
    article {
    width: 60
    float: le
    }
    aside {
    width: 40
    float: ri
    }
    @media screen
    article,
    aside {
    width
    float
    }
    }
    

    View Slide

71. Again:
    Processes (both concept and interaction)
    The UI itself
    Technical implementation
    

    View Slide

72. There’s a difference between
    simple and simple-looking.
    

    View Slide

73. View Slide

74. View Slide

75. source: http://ux.stackexchange.com/questions/11660/why-do-people-clear-the-screen-multiple-times-when-using-a-calculator
    

    View Slide

76. source: http://ux.stackexchange.com/questions/11660/why-do-people-clear-the-screen-multiple-times-when-using-a-calculator
    

    View Slide

77. View Slide

78. source: http://exisweb.net/menu-eats-hamburger
    

    View Slide

79. Simple doesn’t mean stupid.
    (And complex doesn’t mean smart.)
    

    View Slide

80. Simple doesn’t mean stupid.
    (And complex doesn’t mean smart.)
    We don’t need to Fisher-Price our designs.
    

    View Slide

81. Simple doesn’t mean stupid.
    (And complex doesn’t mean smart.)
    We don’t need to Fisher-Price our designs.
    We also don’t need to make less of a product.
    

    View Slide

82. How does complexity happen?
    

    View Slide

83. How does complexity happen?
    Sometimes, by adding to something simple.
    Most often, by starting with too much.
    

    View Slide

84. The simplest way to achieve
    simplicity is through
    thoughtful reduction.
    — John Maeda, The Laws of Simplicity (Law 1)
    

    View Slide

85. but…
    If you don’t add it, you don’t have to remove it.
    

    View Slide

86. The other simplest way to
    achieve simplicity is by
    not complicating things
    in the first place.
    — Not John Maeda
    

    View Slide

87. The first website still works
    because nothing was added
    that can break it.
    

    View Slide

88. The first website still works
    because nothing was added
    that can break it.
    source: http://info.cern.ch/hypertext/WWW/TheProject.html
    

    View Slide

89. Zero-based budgeting
    

    View Slide

90. Zero-based budgeting
    source: http://en.wikipedia.org/wiki/Zero-based_budgeting
    

    View Slide

91. Zero-based budgeting
    requires the budget request be re-evaluated
    thoroughly, starting from the zero-base.
    Budget history is ignored.
    source: http://en.wikipedia.org/wiki/Zero-based_budgeting
    

    View Slide

92. Zero Interface
    

    View Slide

93. Zero Interface
    requires the user experience be designed
    starting from the zero-base.
    Design baggage is ignored.
    

    View Slide

94. So, what’s design baggage?
    

    View Slide

95. So, what’s design baggage?
    The stuff clients, designers, and developers
    add to the project without careful evaluation
    against the goal of A to B.
    

    View Slide

96. Examples of client baggage
    

    View Slide

97. Examples of client baggage
    Refusal to understand or accept sunk costs
    

    View Slide

98. Examples of client baggage
    Refusal to understand or accept sunk costs
    Competitor patterns
    

    View Slide

99. Examples of client baggage
    Refusal to understand or accept sunk costs
    Competitor patterns
    Carousels
    

    View Slide

100. Examples of
     designer/developer baggage
     

     View Slide

101. Examples of
     designer/developer baggage
     Trends
     

     View Slide

102. Examples of
     designer/developer baggage
     Trends
     Pattern libraries
     

     View Slide

103. Examples of
     designer/developer baggage
     Trends
     Pattern libraries
     Frameworks
     

     View Slide

104. Examples of
     designer/developer baggage
     Trends
     Pattern libraries
     Frameworks
     Conventional wisdom
     

     View Slide

105. The problem with baggage is
     that all of it is focused on
     existing solutions.
     

     View Slide

106. Stop focusing on existing
     solutions and start focusing on
     the problem at hand.
     

     View Slide

107. How can we achieve
     simplicity?
     

     View Slide

108. 1.
     Start with nothing.
     

     View Slide

109. 2.
     Put each thing
     you add through
     Hell Week.
     Every step you add
     is one too many
     by default.
     

     View Slide

110. 3.
     Stop.
     Refine if necessary.
     

     View Slide

111. Zero Interface
     Think, done. A to B.
     

     View Slide

112. View Slide

113. Beware of too easy.
     Put on the brakes for users when needed.
     

     View Slide

114. Oh, wait…
     Going directly from A to B is great, but give
     people a chance to avoid mistakes.
     

     View Slide

115. By focusing on the Simplicity
     of the target behavior you
     increase Ability.
     — BJ Fogg, behaviormodel.org
     

     View Slide

116. Hey, this all sounds like
     progressive enhancement.
     It is.
     

     View Slide

117. View Slide

118. Thank you!
     @stephenhay
     zerointerface.nl
     the-haystack.com
     responsivedesignworkflow.com
     

     View Slide