Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Maintaining
SimplicityStephen Hay  SmartWeb 2015, Bucharest
Design decisions
It’s often said that simplicity

is a matter of removing the
unnecessary.
It’s often said that simplicity

is a matter of removing the
unnecessary.
Another approach might be 

to not add the unnec...
The UI Terror Loop
The UI Terror Loop
http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
The UI Terror Loop
http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
The UI Terror Loop
http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
The UI Terror Loop
http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
The UI Terror Loop
http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
The UI Terror Loop
http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
The UI Terror Loop
http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
The UI Terror Loop
http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
The UI Terror Loop
http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
The UI Terror Loop
http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
The UI Terror Loop
http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
The UI Terror Loop
http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
The UI Terror Loop
The UI Terror Loop
The UI Terror Loop
The UI Terror Loop
The UI Terror Loop
The UI Terror Loop
The UI Terror Loop
The UI Terror Loop
The UI Terror Loop
The UI Terror Loop
The UI Terror Loop
The UI Terror Loop
The UI Terror Loop
The UI Terror Loop
a b
The Universal Goal
a b
The Universal Goal
Rube Goldberg
(adjective)

image: http://en.wikipedia.org/wiki/Rube_Goldberg_machine
accomplishing by complex means
what seemingly could be done simply.
image: http://en.wikipedia.org/wiki/Rube_Goldberg_mach...
a b
a b
a b
Between A & B 

(among other things):
Between A & B 

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

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

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

(among other things):
Processes (both concept and interaction)
The UI itself
Technical implementation


Th...
process
source: http://badusability.com/3-simple-steps-to-qr-code-joy/
source: http://badusability.com/3-simple-steps-to-qr-code-joy/
source: http://wtfmobileweb.com/
Note that some processes—like
two-step verification—are
effective in part due to their
complexity.
{{unstablebuild}}
Not simple:
Not simple:
1. [user] Enters everything, ever
Not simple:
1. [user] Enters everything, ever
2. [program] Checks availability
Not simple:
1. [user] Enters everything, ever
2. [program] Checks availability
3. [user] Heart rate 140 bpm
Not simple:
1. [user] Enters everything, ever
2. [program] Checks availability
3. [user] Heart rate 140 bpm
Simple:
Simple:
1. [user] Enters date(s) and destination
Simple:
1. [user] Enters date(s) and destination
2. [program] Checks availability
Simple:
1. [user] Enters date(s) and destination
2. [program] Checks availability
3. [user] Continues if available
UI
tech
Not being able to do something
in a particular browser 

is not a browser problem.
It’s a design problem.
Transfer lots of money
Transfer lots of money
A button.
Transfer lots of money
A button.
But it’s not.
Transfer lots of money
A button.
But it’s not.
It’s a link.
Transfer lots of money
A button.
But it’s not.
It’s a link.
Made to look like a button.
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.
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 Java...
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 Java...
Look at how they managed 

to complicate things 

so effectively.
Look at how they managed 

to complicate things 

so effectively.
1. Make a link.
Look at how they managed 

to complicate things 

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

to complicate things 

so effectively.
1. Make a link.
2. Style it to look like a button.
3. Ad...
Look at how they managed 

to complicate things 

so effectively.
1. Make a link.
2. Style it to look like a button.
3. Ad...
Look at how they could have
done it.
Look at how they could have
done it.
1. Make a button, with the <button> element.
2. Style it.
A breakpoint.
article {
width: 60%;
float: left;
}
aside {
width: 40%;
float: right;
}
@media screen and (max-width: 900px...
A breakpoint.
article {
width: 60%;
float: left;
}
aside {
width: 40%;
float: right;
}
@media screen and (max-width: 900px...
A breakpoint.
article {
width: 60%;
float: left;
}
aside {
width: 40%;
float: right;
}
@media screen and (max-width: 900px...
Look at how they managed to
complicate things so
effectively.
Look at how they managed to
complicate things so
effectively.
1. Style article and aside as columns.
Look at how they managed to
complicate things so
effectively.
1. Style article and aside as columns.
2. Use media query to...
Look at how 

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

they could have done it.
@media screen and (min-width: 900px) {
article {
width: 60%;
float: left;
}
aside {...
Again:
Processes (both concept and interaction)
The UI itself
Technical implementation
simple.A couple of things about
There’s a difference between
simple and simple-looking.
source: http://ux.stackexchange.com/questions/11660/why-do-people-clear-the-screen-multiple-times-when-using-a-
calculator
source: http://ux.stackexchange.com/questions/11660/why-do-people-clear-the-screen-multiple-times-when-using-a-
calculator
source: http://exisweb.net/menu-eats-hamburger
Simple doesn’t mean stupid.
(And complex doesn’t mean smart.)
Simple doesn’t mean stupid.
(And complex doesn’t mean smart.)
We don’t need to Fisher-Price our designs.
Simple doesn’t mean stupid.
(And complex doesn’t mean smart.)
We don’t need to Fisher-Price our designs.
Simple doesn’t mean stupid.
(And complex doesn’t mean smart.)
We don’t need to Fisher-Price our designs.
We also don’t nee...
We make cars.
SCROLL DOWN PAST THIS MODERN VARIATION OF A FLASH INTRO TO FIND SOME ACTUAL CONTENT.
(NOT AN ACTUAL PAGE)
How does complexity happen?
How does complexity happen?
Sometimes, by adding to something simple.
Most often, by starting with too much.
The simplest way to achieve
simplicity is through
thoughtful reduction.
— John Maeda, The Laws of Simplicity (Law 1)
but…
If you don’t add it, you don’t have to remove it.
The other simplest way to 

achieve simplicity is by 

not complicating things 

in the first place.
— Not John Maeda
The first website still works
because nothing was added
that can break it.
The first website still works
because nothing was added
that can break it.
source: http://info.cern.ch/hypertext/WWW/ThePro...
Zero-based budgeting
Zero-based budgeting
source: http://en.wikipedia.org/wiki/Zero-based_budgeting
Zero-based budgeting
requires the budget request be re-evaluated
thoroughly, starting from the zero-base.
Budget history i...
Zero Interface
Zero Interface
requires the user experience be designed
starting from the zero-base.
Design baggage is ignored.
So, what’s design baggage?
So, what’s design baggage?
The stuff clients, designers, and developers
add to the project without careful evaluation
agai...
Examples of client baggage
Examples of client baggage
Refusal to understand or accept sunk costs
Examples of client baggage
Refusal to understand or accept sunk costs
Competitor patterns
Examples of client baggage
Refusal to understand or accept sunk costs
Competitor patterns
Carousels
Examples of 

designer/developer baggage
Examples of 

designer/developer baggage
Trends
Examples of 

designer/developer baggage
Trends
Pattern libraries
Examples of 

designer/developer baggage
Trends
Pattern libraries
Frameworks
Examples of 

designer/developer baggage
Trends
Pattern libraries
Frameworks
Conventional wisdom
“I want to write a couple of
lines of CSS.”
“I want to write a couple of
lines of CSS.”
Autoprefixer
Sass
Minify
Grunt
Node/npm
Yeoman
Susy
Bower
Documentation
Bundler
The problem with baggage is
that all of it is focused on
existing solutions.
“Look at our competitors. 

We want one of those.”
Stop focusing on existing
solutions and start focusing on
the problem at hand.
How can we achieve
simplicity?
Start with nothing.
1
Put each thing
you add through
Hell Week.
2
Every step you add is one too many by default.
Stop.Refine if necessary.
3
Zero Interface
Think, done. A to B.
Beware of too easy.
Put on the brakes for people when needed.
Don’t get creepy; 

let people decide when they want somethi...
Oh, wait…
Going directly from A to B is great, but give
people a chance to avoid mistakes.
By focusing on the Simplicity
of the target behavior you
increase Ability.
— BJ Fogg, behaviormodel.org
Hey, this all sounds like
progressive enhancement.
It is.
Many people are reluctant to
get rid of their design baggage.
Humans are allergic to change.
They always say, 

“We’ve always done it this way.”
— Grace Hopper
Sometimes, great results
can be achieved when you
rid yourself of design
baggage and just start over.
Thank you!
@stephenhay
zerointerface.nl
the-haystack.com
responsivedesignworkflow.com
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Maintaining Simplicity, SmartWeb 2015, Bucharest
Próxima SlideShare
Cargando en…5
×

Maintaining Simplicity, SmartWeb 2015, Bucharest

1.464 visualizaciones

Publicado el

My talk for SmartWeb 2015 in Bucharest

Publicado en: Diseño
  • Sé el primero en comentar

Maintaining Simplicity, SmartWeb 2015, Bucharest

  1. 1. Maintaining SimplicityStephen Hay  SmartWeb 2015, Bucharest
  2. 2. Design decisions
  3. 3. It’s often said that simplicity
 is a matter of removing the unnecessary.
  4. 4. It’s often said that simplicity
 is a matter of removing the unnecessary. Another approach might be 
 to not add the unnecessary in the first place.
  5. 5. The UI Terror Loop
  6. 6. The UI Terror Loop http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
  7. 7. The UI Terror Loop http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
  8. 8. The UI Terror Loop http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
  9. 9. The UI Terror Loop http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
  10. 10. The UI Terror Loop http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
  11. 11. The UI Terror Loop http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
  12. 12. The UI Terror Loop http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
  13. 13. The UI Terror Loop http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
  14. 14. The UI Terror Loop http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
  15. 15. The UI Terror Loop http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
  16. 16. The UI Terror Loop http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
  17. 17. The UI Terror Loop http://sethgodin.typepad.com/seths_blog/2015/02/the-first-rule-of-web-design.html
  18. 18. The UI Terror Loop
  19. 19. The UI Terror Loop
  20. 20. The UI Terror Loop
  21. 21. The UI Terror Loop
  22. 22. The UI Terror Loop
  23. 23. The UI Terror Loop
  24. 24. The UI Terror Loop
  25. 25. The UI Terror Loop
  26. 26. The UI Terror Loop
  27. 27. The UI Terror Loop
  28. 28. The UI Terror Loop
  29. 29. The UI Terror Loop
  30. 30. The UI Terror Loop
  31. 31. The UI Terror Loop
  32. 32. a b The Universal Goal
  33. 33. a b The Universal Goal
  34. 34. Rube Goldberg (adjective)

  35. 35. image: http://en.wikipedia.org/wiki/Rube_Goldberg_machine
  36. 36. accomplishing by complex means what seemingly could be done simply. image: http://en.wikipedia.org/wiki/Rube_Goldberg_machine
  37. 37. a b
  38. 38. a b
  39. 39. a b
  40. 40. Between A & B 
 (among other things):
  41. 41. Between A & B 
 (among other things): Processes (both concept and interaction)
  42. 42. Between A & B 
 (among other things): Processes (both concept and interaction) The UI itself
  43. 43. Between A & B 
 (among other things): Processes (both concept and interaction) The UI itself Technical implementation
  44. 44. Between A & B 
 (among other things): Processes (both concept and interaction) The UI itself Technical implementation 
 These are all the results of design decisions.
  45. 45. process
  46. 46. source: http://badusability.com/3-simple-steps-to-qr-code-joy/
  47. 47. source: http://badusability.com/3-simple-steps-to-qr-code-joy/
  48. 48. source: http://wtfmobileweb.com/
  49. 49. Note that some processes—like two-step verification—are effective in part due to their complexity.
  50. 50. {{unstablebuild}}
  51. 51. Not simple:
  52. 52. Not simple: 1. [user] Enters everything, ever
  53. 53. Not simple: 1. [user] Enters everything, ever 2. [program] Checks availability
  54. 54. Not simple: 1. [user] Enters everything, ever 2. [program] Checks availability 3. [user] Heart rate 140 bpm
  55. 55. Not simple: 1. [user] Enters everything, ever 2. [program] Checks availability 3. [user] Heart rate 140 bpm
  56. 56. Simple:
  57. 57. Simple: 1. [user] Enters date(s) and destination
  58. 58. Simple: 1. [user] Enters date(s) and destination 2. [program] Checks availability
  59. 59. Simple: 1. [user] Enters date(s) and destination 2. [program] Checks availability 3. [user] Continues if available
  60. 60. UI
  61. 61. tech
  62. 62. Not being able to do something in a particular browser 
 is not a browser problem. It’s a design problem.
  63. 63. Transfer lots of money
  64. 64. Transfer lots of money A button.
  65. 65. Transfer lots of money A button. But it’s not.
  66. 66. Transfer lots of money A button. But it’s not. It’s a link.
  67. 67. Transfer lots of money A button. But it’s not. It’s a link. Made to look like a button.
  68. 68. 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.
  69. 69. 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.
  70. 70. 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.
  71. 71. Look at how they managed 
 to complicate things 
 so effectively.
  72. 72. Look at how they managed 
 to complicate things 
 so effectively. 1. Make a link.
  73. 73. Look at how they managed 
 to complicate things 
 so effectively. 1. Make a link. 2. Style it to look like a button.
  74. 74. 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.
  75. 75. 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.
  76. 76. Look at how they could have done it.
  77. 77. Look at how they could have done it. 1. Make a button, with the <button> element. 2. Style it.
  78. 78. A breakpoint. article { width: 60%; float: left; } aside { width: 40%; float: right; } @media screen and (max-width: 900px) { article, aside { width: 100%; float: none; } }
  79. 79. 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.
  80. 80. 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.
  81. 81. Look at how they managed to complicate things so effectively.
  82. 82. Look at how they managed to complicate things so effectively. 1. Style article and aside as columns.
  83. 83. Look at how they managed to complicate things so effectively. 1. Style article and aside as columns. 2. Use media query to undo what they just did.
  84. 84. Look at how 
 they could have done it. @media screen and (min-width: 900px) { article { width: 60%; float: left; } aside { width: 40%; float: right; } }
  85. 85. Look at how 
 they could have done it. @media screen and (min-width: 900px) { article { width: 60%; float: left; } aside { width: 40%; float: right; } }
  86. 86. Again: Processes (both concept and interaction) The UI itself Technical implementation
  87. 87. simple.A couple of things about
  88. 88. There’s a difference between simple and simple-looking.
  89. 89. source: http://ux.stackexchange.com/questions/11660/why-do-people-clear-the-screen-multiple-times-when-using-a- calculator
  90. 90. source: http://ux.stackexchange.com/questions/11660/why-do-people-clear-the-screen-multiple-times-when-using-a- calculator
  91. 91. source: http://exisweb.net/menu-eats-hamburger
  92. 92. Simple doesn’t mean stupid. (And complex doesn’t mean smart.)
  93. 93. Simple doesn’t mean stupid. (And complex doesn’t mean smart.) We don’t need to Fisher-Price our designs.
  94. 94. Simple doesn’t mean stupid. (And complex doesn’t mean smart.) We don’t need to Fisher-Price our designs.
  95. 95. 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 by removing essential content.
  96. 96. We make cars. SCROLL DOWN PAST THIS MODERN VARIATION OF A FLASH INTRO TO FIND SOME ACTUAL CONTENT. (NOT AN ACTUAL PAGE)
  97. 97. How does complexity happen?
  98. 98. How does complexity happen? Sometimes, by adding to something simple. Most often, by starting with too much.
  99. 99. The simplest way to achieve simplicity is through thoughtful reduction. — John Maeda, The Laws of Simplicity (Law 1)
  100. 100. but… If you don’t add it, you don’t have to remove it.
  101. 101. The other simplest way to 
 achieve simplicity is by 
 not complicating things 
 in the first place. — Not John Maeda
  102. 102. The first website still works because nothing was added that can break it.
  103. 103. The first website still works because nothing was added that can break it. source: http://info.cern.ch/hypertext/WWW/TheProject.html
  104. 104. Zero-based budgeting
  105. 105. Zero-based budgeting source: http://en.wikipedia.org/wiki/Zero-based_budgeting
  106. 106. 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
  107. 107. Zero Interface
  108. 108. Zero Interface requires the user experience be designed starting from the zero-base. Design baggage is ignored.
  109. 109. So, what’s design baggage?
  110. 110. 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.
  111. 111. Examples of client baggage
  112. 112. Examples of client baggage Refusal to understand or accept sunk costs
  113. 113. Examples of client baggage Refusal to understand or accept sunk costs Competitor patterns
  114. 114. Examples of client baggage Refusal to understand or accept sunk costs Competitor patterns Carousels
  115. 115. Examples of 
 designer/developer baggage
  116. 116. Examples of 
 designer/developer baggage Trends
  117. 117. Examples of 
 designer/developer baggage Trends Pattern libraries
  118. 118. Examples of 
 designer/developer baggage Trends Pattern libraries Frameworks
  119. 119. Examples of 
 designer/developer baggage Trends Pattern libraries Frameworks Conventional wisdom
  120. 120. “I want to write a couple of lines of CSS.”
  121. 121. “I want to write a couple of lines of CSS.” Autoprefixer Sass Minify Grunt Node/npm Yeoman Susy Bower Documentation Bundler
  122. 122. The problem with baggage is that all of it is focused on existing solutions.
  123. 123. “Look at our competitors. 
 We want one of those.”
  124. 124. Stop focusing on existing solutions and start focusing on the problem at hand.
  125. 125. How can we achieve simplicity?
  126. 126. Start with nothing. 1
  127. 127. Put each thing you add through Hell Week. 2
  128. 128. Every step you add is one too many by default.
  129. 129. Stop.Refine if necessary. 3
  130. 130. Zero Interface Think, done. A to B.
  131. 131. Beware of too easy. Put on the brakes for people when needed. Don’t get creepy; 
 let people decide when they want something.
  132. 132. Oh, wait… Going directly from A to B is great, but give people a chance to avoid mistakes.
  133. 133. By focusing on the Simplicity of the target behavior you increase Ability. — BJ Fogg, behaviormodel.org
  134. 134. Hey, this all sounds like progressive enhancement. It is.
  135. 135. Many people are reluctant to get rid of their design baggage.
  136. 136. Humans are allergic to change. They always say, 
 “We’ve always done it this way.” — Grace Hopper
  137. 137. Sometimes, great results can be achieved when you rid yourself of design baggage and just start over.
  138. 138. Thank you! @stephenhay zerointerface.nl the-haystack.com responsivedesignworkflow.com

×