accomplishing by complex means what
seemingly could be done simply.
image: http://en.wikipedia.org/wiki/Rube_Goldberg_machine
Slide 22
Slide 22 text
a b
Slide 23
Slide 23 text
a b
Slide 24
Slide 24 text
a b
Slide 25
Slide 25 text
Between A & B
(among other things):
Slide 26
Slide 26 text
Between A & B
(among other things):
Processes (both concept and interaction)
Slide 27
Slide 27 text
Between A & B
(among other things):
Processes (both concept and interaction)
The UI itself
Slide 28
Slide 28 text
Between A & B
(among other things):
Processes (both concept and interaction)
The UI itself
Technical implementation
Slide 29
Slide 29 text
Between A & B
(among other things):
Processes (both concept and interaction)
The UI itself
Technical implementation
These are all the result of design decisions.
Not being able to do something
in a particular browser
is not a browser problem.
It’s a design problem.
Slide 48
Slide 48 text
Transfer lots of money
Slide 49
Slide 49 text
Transfer lots of money
A button.
Slide 50
Slide 50 text
Transfer lots of money
A button.
But it’s not.
Slide 51
Slide 51 text
Transfer lots of money
A button.
But it’s not.
It’s a link.
Slide 52
Slide 52 text
Transfer lots of money
A button.
But it’s not.
It’s a link.
Made to look like a button.
Slide 53
Slide 53 text
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.
Slide 54
Slide 54 text
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.
Slide 55
Slide 55 text
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.
Slide 56
Slide 56 text
Look at how they managed
to complicate things so
effectively.
Slide 57
Slide 57 text
Look at how they managed
to complicate things so
effectively.
1. Make a link.
Slide 58
Slide 58 text
Look at how they managed
to complicate things so
effectively.
1. Make a link.
2. Style it to look like a button.
Slide 59
Slide 59 text
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.
Slide 60
Slide 60 text
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.
Slide 61
Slide 61 text
Look at how they could
have done it.
Slide 62
Slide 62 text
Look at how they could
have done it.
1. Make a button, with the element.
2. Style it.
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
Slide 92
Slide 92 text
Zero Interface
Slide 93
Slide 93 text
Zero Interface
requires the user experience be designed
starting from the zero-base.
Design baggage is ignored.
Slide 94
Slide 94 text
So, what’s design baggage?
Slide 95
Slide 95 text
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.
Slide 96
Slide 96 text
Examples of client baggage
Slide 97
Slide 97 text
Examples of client baggage
Refusal to understand or accept sunk costs
Slide 98
Slide 98 text
Examples of client baggage
Refusal to understand or accept sunk costs
Competitor patterns
Slide 99
Slide 99 text
Examples of client baggage
Refusal to understand or accept sunk costs
Competitor patterns
Carousels
Slide 100
Slide 100 text
Examples of
designer/developer baggage
Slide 101
Slide 101 text
Examples of
designer/developer baggage
Trends
Slide 102
Slide 102 text
Examples of
designer/developer baggage
Trends
Pattern libraries
Slide 103
Slide 103 text
Examples of
designer/developer baggage
Trends
Pattern libraries
Frameworks
Slide 104
Slide 104 text
Examples of
designer/developer baggage
Trends
Pattern libraries
Frameworks
Conventional wisdom
Slide 105
Slide 105 text
The problem with baggage is
that all of it is focused on
existing solutions.
Slide 106
Slide 106 text
Stop focusing on existing
solutions and start focusing on
the problem at hand.
Slide 107
Slide 107 text
How can we achieve
simplicity?
Slide 108
Slide 108 text
1.
Start with nothing.
Slide 109
Slide 109 text
2.
Put each thing
you add through
Hell Week.
Every step you add
is one too many
by default.
Slide 110
Slide 110 text
3.
Stop.
Refine if necessary.
Slide 111
Slide 111 text
Zero Interface
Think, done. A to B.
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
Beware of too easy.
Put on the brakes for users when needed.
Slide 114
Slide 114 text
Oh, wait…
Going directly from A to B is great, but give
people a chance to avoid mistakes.
Slide 115
Slide 115 text
By focusing on the Simplicity
of the target behavior you
increase Ability.
— BJ Fogg, behaviormodel.org
Slide 116
Slide 116 text
Hey, this all sounds like
progressive enhancement.
It is.