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

36857c1095dccf2f2c5ea470dc791530?s=47 Stephen Hay
April 08, 2014

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.

36857c1095dccf2f2c5ea470dc791530?s=128

Stephen Hay

April 08, 2014
Tweet

Transcript

  1. The Zero Interface Using Zero-based Thinking to Maintain Simplicity Stephen

    Hay Future of Web Design, London 2014
  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.
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. a b

  18. a b

  19. Rube Goldberg (adjective)

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

  21. accomplishing by complex means what seemingly could be done simply.

    image: http://en.wikipedia.org/wiki/Rube_Goldberg_machine
  22. a b

  23. a b

  24. a b

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

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

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

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

    and interaction) The UI itself Technical implementation
  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.
  30. process

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

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

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

  36. None
  37. This can be simpler…

  38. None
  39. None
  40. None
  41. None
  42. UI

  43. None
  44. None
  45. None
  46. tech

  47. Not being able to do something in a particular browser

    is not a browser problem. It’s a design problem.
  48. Transfer lots of money

  49. Transfer lots of money A button.

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

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

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

    a link. Made to look like a button.
  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.
  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.
  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.
  56. Look at how they managed to complicate things so effectively.

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

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

    1. Make a link. 2. Style it to look like a button.
  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.
  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.
  61. Look at how they could have done it.

  62. Look at how they could have done it. 1. Make

    a button, with the <button> element. 2. Style it.
  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; } }
  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.
  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.
  66. Look at how they managed to complicate things so effectively.

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

    1. Style article and aside as columns.
  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.
  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; } }
  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 } }
  71. Again: Processes (both concept and interaction) The UI itself Technical

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

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

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

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

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

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

    don’t need to Fisher-Price our designs.
  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.
  82. How does complexity happen?

  83. How does complexity happen? Sometimes, by adding to something simple.

    Most often, by starting with too much.
  84. The simplest way to achieve simplicity is through thoughtful reduction.

    — John Maeda, The Laws of Simplicity (Law 1)
  85. but… If you don’t add it, you don’t have to

    remove it.
  86. The other simplest way to achieve simplicity is by not

    complicating things in the first place. — Not John Maeda
  87. The first website still works because nothing was added that

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

    can break it. source: http://info.cern.ch/hypertext/WWW/TheProject.html
  89. Zero-based budgeting

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

  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
  92. Zero Interface

  93. Zero Interface requires the user experience be designed starting from

    the zero-base. Design baggage is ignored.
  94. So, what’s design baggage?

  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.
  96. Examples of client baggage

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

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

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

    costs Competitor patterns Carousels
  100. Examples of designer/developer baggage

  101. Examples of designer/developer baggage Trends

  102. Examples of designer/developer baggage Trends Pattern libraries

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

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

  105. The problem with baggage is that all of it is

    focused on existing solutions.
  106. Stop focusing on existing solutions and start focusing on the

    problem at hand.
  107. How can we achieve simplicity?

  108. 1. Start with nothing.

  109. 2. Put each thing you add through Hell Week. Every

    step you add is one too many by default.
  110. 3. Stop. Refine if necessary.

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

  112. None
  113. Beware of too easy. Put on the brakes for users

    when needed.
  114. Oh, wait… Going directly from A to B is great,

    but give people a chance to avoid mistakes.
  115. By focusing on the Simplicity of the target behavior you

    increase Ability. — BJ Fogg, behaviormodel.org
  116. Hey, this all sounds like progressive enhancement. It is.

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