Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Stephen Hay

April 08, 2014
Tweet

More Decks by Stephen Hay

Other Decks in Design

Transcript

  1. 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.
  2. a b

  3. a b

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

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

  6. a b

  7. a b

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

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

    and interaction) The UI itself Technical implementation These are all the result of design decisions.
  10. UI

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

    is not a browser problem. It’s a design problem.
  12. Transfer lots of money A button. But it’s not. It’s

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

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

    a button, with the <button> element. 2. Style it.
  20. A breakpoint. article { width: 60%; float: left; } aside

    { width: 40%; float: right; } @media screen and (max-width: 900px) { article, aside { width: 100%; float: none; } }
  21. 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.
  22. 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.
  23. 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.
  24. Look at how they could have done it. @media screen

    and (min-width: 900px) { article { width: 60%; float: left; } aside { width: 40%; float: right; } }
  25. 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 } }
  26. 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.
  27. The simplest way to achieve simplicity is through thoughtful reduction.

    — John Maeda, The Laws of Simplicity (Law 1)
  28. The other simplest way to achieve simplicity is by not

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

    can break it. source: http://info.cern.ch/hypertext/WWW/TheProject.html
  30. 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
  31. 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.
  32. The problem with baggage is that all of it is

    focused on existing solutions.
  33. 2. Put each thing you add through Hell Week. Every

    step you add is one too many by default.
  34. Oh, wait… Going directly from A to B is great,

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

    increase Ability. — BJ Fogg, behaviormodel.org