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
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.
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
32. source: http://badusability.com/3-simple-steps-to-qr-code-joy/
33. source: http://badusability.com/3-simple-steps-to-qr-code-joy/
35. source: http://wtfmobileweb.com/
37. This can be simpler…
42. UI
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.
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
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.
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.
118. Thank you! @stephenhay zerointerface.nl the-haystack.com responsivedesignworkflow.com