Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Start a free Basic trial
to watch this video
The Zero Interface: Use Zero-based Thinking to Maintain Simplicity
40:24 with Stephen HayFor all our talk of simplicity, we web-makers (and our clients) have a tendency to add a heavy amount of complexity to very simple things. In fact, many web designers and developers end up spending significant amounts of project time *undoing* problems caused by decisions made (or not made) early in the design process. In effect, we often ruin the things we build during the process of building them, but it doesn't have to be that way. In this session Stephen looks at how and why we tend to complicate things, and how an extreme, exaggerated application of progressive enhancement can help us *really* simplify things and increase value for the people using the things we make.
-
0:00
[MUSIC].
-
0:12
Good morning.
-
0:14
Thank you for having me here, I was at the first Future of Web Design, I
-
0:18
think, so it's, it's really great to be, here on the other side, if you will.
-
0:24
Paul asked me to, ask you all, to go buy his book.
-
0:30
So, he promised not to mention it himself.
-
0:34
Today I'm gonna talk about simplicity.
-
0:36
When we think about simplicity, we often think in terms of reduction.
-
0:41
Taking things away.
-
0:42
But sometimes we want, we might want to think in
-
0:45
terms of not adding certain things, in the first place.
-
0:48
So that's what I'll be talking about.
-
0:50
To give you an example this is, I live in Holland, so this
-
0:54
is the Dutch version of a website that you might recognize, it's an airline.
-
1:00
You might recognize it by it's refined color palate.
-
1:03
[LAUGH]
-
1:06
And the interesting thing about this is this, this sentence is in Dutch.
-
1:11
It says click after the selection
-
1:17
and add selected items to continue.
-
1:23
Okay?
-
1:24
It's hard to understand anyway.
-
1:26
So this button says add, select an items, in, in Dutch.
-
1:30
This sentence says, leave the booking, as was, and it says that in English.
-
1:36
Okay?
-
1:38
This says, no don't do that, in Dutch, and this one says, no thank you, [LAUGH].
-
1:45
[LAUGH] Okay, what exactly are they doing here?
-
1:49
So, the, the problem is, that when you're going through this process, which should
-
1:54
be a simple process, add these things to my cart or whatever it is.
-
1:59
You should just add the things and go on or say no, I don't wanna add the things.
-
2:04
But all these things kind of, it's like hypnotism.
-
2:08
It's just kind of, someone's going, whoo whoo.
-
2:11
They throw cold water in your face.
-
2:12
You're like, what, what.
-
2:14
And this, this is what happens.
-
2:15
So you keep looking around, looking around.
-
2:17
What am I gonna do?
-
2:18
Oh my God.
-
2:18
Oh my God.
-
2:19
Oh my God.
-
2:21
Boom!
-
2:21
So what we wanna do, is go from A to B.
-
2:27
That's all we want.
-
2:28
That's all any of our customers want to do.
-
2:31
Any end users, just to use the word user.
-
2:34
People just want to go from A to B.
-
2:36
And, they'd love to do it in a straight line.
-
2:39
As designers and developers, what we often do is Rube
-
2:43
Goldberg interfaces, and how many people know what Rube Goldberg is?
-
2:49
This kind of thing, right?
-
2:51
So this is basically this contraption that, that, wipes his mouth
-
2:55
after he takes a bite, or you know, of his food.
-
2:59
So the bird, I don't even know how it works actually.
-
3:02
[LAUGH] The bird eats something, something falls into the bucket.
-
3:06
That pulls the thing lights a rocket.
-
3:08
The rocket takes off and then it pulls the clock, and wipes his mouth.
-
3:13
So basically taking something inherently simple and making it complex.
-
3:18
And we do that all the time and we don't often realize that we're doing it.
-
3:21
I do it all the time.
-
3:23
it's, it's really hard not to do it.
-
3:25
So, instead of doing, A to B with a straight line,
-
3:28
we just take this round about way, from A to B.
-
3:31
And if you look at, this path, of these arrows here, what does it remind you of?
-
3:38
Well, it reminded me of the Unicode, pile of pooh.
-
3:42
Which is pretty much what it is, it's like
-
3:45
a UI crapplet that we just kinda leave in between
-
3:52
the thing that users wanna do and themselves.
-
3:55
So the thing about piles of poo is if you're walking
-
3:58
down the street and you see one, there are two options.
-
4:02
You're either gonna see it and try to figure
-
4:04
your way around it, or you're gonna step in it.
-
4:06
And that's what we're doing basically for most of our users.
-
4:10
So between A and B, there are lots of different ways that
-
4:14
we can add piles of poo to our interfaces, to our processes.
-
4:21
One is the process itself, okay?
-
4:24
Which is kind of, probably, the first example that I gave.
-
4:27
It's the process.
-
4:28
There's something, inherently wrong with, with that process.
-
4:32
It could be content.
-
4:33
It could be the whole concept of the process, itself.
-
4:37
Could be the interaction.
-
4:39
So anything having to do with the process itself.
-
4:42
Another thing is the UI itself, just, the, the visual design of the UI,
-
4:46
which can just confuse the hell out of people depending on, on what you do.
-
4:50
And then of course, the technical implementation.
-
4:55
Okay, so there are other ways that you can
-
4:58
confuse people and add complexity to the things you
-
5:01
do, but this is just these are, these three
-
5:04
I'm pulling out because they're the results of design decisions.
-
5:09
Someone actually decided to do things a certain way
-
5:13
and that's why they, they are the way they are.
-
5:15
So it's not like suddenly, we we just have this thing and we have to
-
5:21
reduce reduce complexity on it and it just happened to be that way.
-
5:26
Someone decided to make it that way.
-
5:29
So let's look at these three things in order and
-
5:32
see what kind of examples we can, we can find.
-
5:35
So looking at the process.
-
5:37
I'm sure most of you have seen this.
-
5:38
I know Brad Frost uses this quite often as an example.
-
5:42
So, you're on your phone and you get this message that
-
5:46
says you need to open this in your web browser on a
-
5:50
laptop so that you can get a QR code which will,
-
5:53
you know, tell you where you need to go with your phone.
-
5:57
Which makes [LAUGH] no sense whatsoever.
-
6:00
Right, this is the kind of thing and if you
-
6:03
like this kind of thing, there's this site called, WTF mobile.
-
6:08
Or this is BadUsability.com, I'm sorry, the, which has some good examples as well.
-
6:13
So the, this is a UI craplet, basically.
-
6:17
Okay.
-
6:18
Here's another one.
-
6:20
You're on your phone, and you get the
-
6:22
choice of which, which experience you would like.
-
6:25
Right, you can choose the desktop experience, but, some features
-
6:29
are not available on mobile phones if you choose that.
-
6:33
Why would you have to choose this, you know?
-
6:36
So I always think in terms of my mom, you know, my mom
-
6:40
is like the ultimate, or my kids are like the ultimate usability testers.
-
6:45
If they don't understand what's going on, and
-
6:47
what they should do then, then no one does.
-
6:49
So I recommend you use family members in that way.
-
6:56
This is the, the website of the place where I live in Holland.
-
7:02
Looks kinda like a carnival in a way.
-
7:05
But, if you compare this to something like gov.uk,
-
7:08
which kinda has the same types of things in there,
-
7:11
I mean taxes, I wanna get a passport, I wanna chop down a tree so I need a permit.
-
7:16
All these types of things.
-
7:17
Where do we, where do you go here?
-
7:19
So they, what they've done is just basically said, all the stuff
-
7:23
that we think is important we are just gonna put on the homepage.
-
7:27
And it becomes this political thing, which I know
-
7:30
that they've had to deal with gov.uk as well.
-
7:33
Everyone wants something on the homepage.
-
7:36
So this homepage is not designed for the people who
-
7:39
use it, this homepage is designed to appease everyone internally.
-
7:43
So that they can say, hey, we have all of our stuff on the homepage, you know?
-
7:49
And notice the carrasoul, right.
-
7:52
We gotta have a carassoul.
-
7:53
So if you wanna find something like say you wanna get a
-
7:56
passport, you either have to type in to this search field right here.
-
8:01
Or, if you don't just skip over it, because it's visually kinda
-
8:05
strange, then you'd have to click on the letter P here for passport.
-
8:10
Well, it would be, yeah, it would still be a P in Dutch.
-
8:13
So it's not really easy to get to where you wanna go.
-
8:19
Okay, so it could be a lot simpler.
-
8:21
And there's another another municipality in
-
8:24
the Netherlands that tried a different approach.
-
8:27
They thought, since most people on our site search,
-
8:30
then we'll just build this whole thing around search.
-
8:32
You have to have good search if you do that.
-
8:35
But what they do is, they have this big
-
8:37
picture that no one really cares about, of course.
-
8:40
But, they've got this kind of Google-like, thing in the middle.
-
8:44
And these terms are just the terms that, in real time, people search for the most.
-
8:50
So the chance is, it's about an 80% chance that if you're
-
8:53
looking for something on this website it's one of these things right here.
-
8:57
So the rest you really don't need.
-
8:59
And you have it, if you want, in this
-
9:02
menu and they've divided it up into five different segments.
-
9:07
living, working, business, learning, and leisure time.
-
9:15
So, leisure.
-
9:17
So, it's not perfect.
-
9:19
But it's a lot better than the first example.
-
9:21
So this is an attempt to try to get something a little bit more simple.
-
9:28
This is Schiphol airport.
-
9:30
That's the airport that I flew out of, and I had arranged to park my car.
-
9:35
So I go to the Schiphol parking website.
-
9:39
Which is funny, because they have, smart parking,
-
9:43
park and travel, valet parking, business parking, valet parking.
-
9:48
Oh that's, holiday valet parking, that's somehow different than, valet parking.
-
9:53
Excellence parking, short stop parking, visitors parking, excellence
-
9:59
parking, picking people up and taking them away [LAUGH] and, privium parking.
-
10:06
The funny thing about it is that 80%
-
10:09
of these options are all the same parking lot.
-
10:11
[LAUGH] So I don't understand what the difference is.
-
10:15
The only way to find out what the difference is,
-
10:17
is to click on each one of those things and
-
10:19
then read the little description, and if that description is
-
10:22
anything like this is, then you won't understand it anyways.
-
10:25
So why bother?
-
10:28
Here's another thing.
-
10:29
Vacation up to two days or longer than two days.
-
10:35
Business, up to do, two days, or longer than two days.
-
10:39
So I'm curious, what's the difference between
-
10:42
business parking and vacation parking, you know?
-
10:45
Is one more expensive than the other?
-
10:47
Do, you know, you get some benefits?
-
10:49
There's nothing that explains any of this at all.
-
10:51
And this is the first page that you see.
-
10:54
So it's kind of like you have to go
-
10:55
read something, come back, and then you start this process.
-
11:00
Once you get into the process, which makes me think
-
11:03
that it's a different system, behind it, than the normal website.
-
11:08
The process itself is actually pretty easy to go through.
-
11:11
So they did a pretty good job with that.
-
11:13
It seems like they took some kind of process
-
11:16
checkout system and kind of plugged it into the site.
-
11:19
You ever have that?
-
11:20
You build this site.
-
11:21
This site's terrible, and you get this little component that you can
-
11:24
add in, and that component works well, or the other way around.
-
11:28
The component's terrible you know, and the rest of the site is okay.
-
11:33
So this is this is a pretty easy process to go through.
-
11:35
You just choose your stuff.
-
11:38
They try to get you to donate something you just click on reserve.
-
11:42
You'd choose which credit card you want, or which way you want to pay.
-
11:46
So it's pretty, pretty easy to do.
-
11:50
In the UI it's also possible to add a lot of complexity.
-
11:54
This is, again, for the smart parking because
-
11:56
eventually I chose smart parking because I'm smart.
-
12:00
[LAUGH] The thing about this which is
-
12:03
interesting, is that they've got the times.
-
12:06
So one minute after midnight I can arrive and park my car on April second.
-
12:15
And then one minute before midnight on April thirds, I can, I can leave.
-
12:19
The things is that this system does nothing at all with the time.
-
12:24
There is no parking in the whole site that does
-
12:28
anything at all with the time that you fill in.
-
12:30
Yet, you have to fill in the time that you're arriving and leaving.
-
12:34
Which is kinda weird.
-
12:35
Just don't add that, you know, if no one has to fill it in, okay?
-
12:39
So, after that this price stays the same,
-
12:45
basically, no matter what times you put in there.
-
12:48
Just little things but all these little things add up.
-
12:52
It's just too much.
-
12:54
Brad Frost, a few days ago, added this, this little thing.
-
13:00
This area right here, that's an area that you can paste a phone number.
-
13:07
See it?
-
13:07
[LAUGH] It's pretty clear, isn't it?
-
13:10
So this kind of thing this is a, an attempt at making something simpler
-
13:16
by making it look simpler, but in fact, the fact that you're making it look
-
13:21
simpler makes it not as simple as that you'd tried to you know, it's, you tried
-
13:27
to get to in the first place, so it's you're kind of overriding yourself.
-
13:33
You're kind of defeating your own purpose by making
-
13:35
things look simpler, when they're more confusing to users.
-
13:38
So lots of people don't even know that you can do anything with this area up there.
-
13:43
Okay.
-
13:46
technology, the, the implementation.
-
13:50
We always talk about browsers.
-
13:52
the, the browsers give us all these problems.
-
13:55
Developers talk about that.
-
13:56
A lot of developers here, or no?
-
13:58
How many?
-
14:00
Okay.
-
14:00
Oh, quite a few, quite a few.
-
14:02
So I don't mean this in a bad way [LAUGH].
-
14:07
But, when you have a browser problem, often times
-
14:10
it's not a browser problem, it's a design problem.
-
14:14
So if you designed something that works really well in a certain
-
14:17
browser and it doesn't work well in another browser and you need
-
14:20
it to look that way or the client wants it to, to
-
14:23
work in the same way in a different browser, it's a design problem.
-
14:27
So why does the client expect that something is going to
-
14:31
be the same in browser X as it is in browser Y?
-
14:35
Because we gave them that expression with our design, okay?
-
14:40
So when we train our, our clients by taking
-
14:43
them by the hand through the entire design process,
-
14:46
they'll know what things work and what things don't
-
14:50
and why we make the choices that we do.
-
14:53
So, something I talk about in my book, which
-
14:56
I'm not going to plug as some people I know.
-
15:00
One of my favorite examples is several years ago my bank,
-
15:06
I wanted to transfer money, which is what we often do.
-
15:10
And sometimes I have to transfer lots of money.
-
15:14
And so I fill out this form.
-
15:16
And you all know these forms.
-
15:18
And then at the end I just have the Submit button.
-
15:21
So, the, because I'm kind of a designer, developer, I'm used to filling in
-
15:26
forms pretty quickly and pressing Enter when
-
15:28
I wanna send the form instead of clicking.
-
15:32
But it turns out that this thing this button, it wasn't a button, actually.
-
15:39
It was a link and it was made to look like a button.
-
15:44
And it links to nowhere.
-
15:46
[LAUGH] And they use JavaScript to make it do
-
15:49
something and they made it JavaScript and click dependent.
-
15:54
So when I didn't click on it, I just pressed Enter, it didn't do anything.
-
15:59
So I thought I did something wrong.
-
16:00
So I clicked on it, but because the JavaScript was so well written, the fact
-
16:05
that I pressed Enter made it so that a click wouldn't work on it either.
-
16:10
So, I refreshed.
-
16:15
I still had the same data there, and and I was kinda worried because
-
16:22
did I just now, did I in fact or did I not just transfer a lot of money, you know?
-
16:28
So these kind of things are kind of terrifying.
-
16:30
I didn't wanna do it twice.
-
16:32
So luckily I could just kind of open the browser dev tools and see what's going on.
-
16:38
But again my mom, right?
-
16:41
My mom's like dev tools [SOUND].
-
16:43
[LAUGH] So that's not gonna happen.
-
16:46
This is stupid because look at how they managed to make this thing so complicated.
-
16:55
They made a link.
-
16:57
They styled it to look like a button.
-
16:58
And then they added JavaScript to make it act like a button.
-
17:04
And then they reduce complexity by not testing.
-
17:07
[LAUGH] Okay?
-
17:09
And look at how they could have done it.
-
17:11
Make a button, with HTML button, and then style it, done, okay.
-
17:18
So they didn't do that.
-
17:20
And here's another example.
-
17:21
This is one that a similar example that Brad Frost also always talks about.
-
17:26
How many people do responsive design here?
-
17:28
So you're familiar with media queries.
-
17:31
So this is something that happens all the time and
-
17:34
it just surprises me, so this is complexity in code.
-
17:37
You know, the user doesn't have to deal with this, but we do.
-
17:42
So what we do here is we just say, an article, we have an article and an aside.
-
17:47
Lets say a main content and a side bar and
-
17:50
the, the main content's 60%, floats to the left hand side.
-
17:54
And then other the sidebar's 40% of the screen and it goes to the right hand side.
-
18:00
So kind of a two column layout, really simple.
-
18:02
So we do that and then we undo it [LAUGH] whenever the
-
18:08
screen is less than 900 pixels, in this case.
-
18:14
Okay.
-
18:14
Do you, kind of follow how stupid this is [LAUGHING].
-
18:18
This is, basically doing something and then undoing it when
-
18:22
you probably shouldn't have even done it in the first place.
-
18:26
So, this is, you know, cold pile of poo right here.
-
18:31
So look at how they managed to complicate things.
-
18:34
They style these things as columns, and then they
-
18:37
use a media query to undo what they just did.
-
18:40
Okay, so, what they could have done, is this.
-
18:44
Just say, as soon as the screen's 900 pixels, I'll turn this thing into columns.
-
18:50
Okay.
-
18:51
Using a min width instead of a max width.
-
18:54
So this is kind of, I see questions about this
-
18:56
all the time pertaining the responsive design about max width.
-
19:00
What kind of max width do you use, you know?
-
19:03
320 pixels, 490 pixels?
-
19:05
It doesn't matter you know.
-
19:06
When your, when your design doesn't work anymore, because
-
19:10
the screen's too wide, put a break point in there.
-
19:13
You know, don't worry about, don't worry about a specific device.
-
19:16
Okay, but that's another topic for another day.
-
19:19
So again, these, these three things, these
-
19:22
design decisions that were made, can complicate your
-
19:26
code, your UI and your whole process for the people who use the things you make.
-
19:34
There's a difference between simple and simple looking.
-
19:37
We have a lot of simple looking things.
-
19:39
iOS is a great example.
-
19:41
when, when my partner doesn't know where to click or
-
19:44
my children don't know where to click on an iOS
-
19:47
device because things don't have some kind of visual affordance
-
19:52
that make them look like something you can click on.
-
19:56
They don't know where to click.
-
19:57
Just looks like a word.
-
19:58
But it is simple looking you know, and we
-
20:00
can say how elegant and minimal it is, you know.
-
20:02
And I know that that's a sacred cow to some people.
-
20:06
iOS.
-
20:06
Don't talk about iOS, you know?
-
20:08
I'll talk about another sacred cow, Base Camp.
-
20:10
How many people use Base Camp?
-
20:13
Yeah, former 37 Signals.
-
20:15
I'm not, definitely not allowed to talk about that or I'll get death threats.
-
20:19
[LAUGH] I don't like Base Camp personally, I respect what they do.
-
20:23
And I think they are great company and very talented people.
-
20:26
But I really dislike Base Camp.
-
20:28
Why?
-
20:28
Because it's supposedly the simple thing.
-
20:30
And it does looks simple.
-
20:32
But the conversation I have the most, when we
-
20:35
are doing projects with Base Camp, with clients, is
-
20:38
I walk them through on Skype or in person,
-
20:40
where they can find that thing in Base Camp.
-
20:44
You know, have anyone ever had that?
-
20:47
Or, does base camp work fantastic.
-
20:49
Okay, one person, thank you.
-
20:50
[LAUGH] All right.
-
20:53
It's just it looks simple.
-
20:56
But it's, it's not what I thought it was going to be.
-
21:00
Okay?
-
21:00
So perception has a lot to do with simplicity as well.
-
21:04
What do people think they can do with something.
-
21:07
This is interesting, calculators not particularly
-
21:12
this calculator but like real handheld
-
21:14
calculators that we probably don't use anymore but on your phone, for example.
-
21:18
How many people click or touch the, the clear button more than once?
-
21:26
When they're going to do a calculation on a calculator.
-
21:29
Yeah.
-
21:29
A lot of people, right?
-
21:31
Do it like ten times, just [NOISE].
-
21:33
Make sure it's zero.
-
21:34
You don't, you don't have that problem with the number one.
-
21:39
You know, you just press one.
-
21:40
And you trust it.
-
21:42
Why is that?
-
21:43
Well, when you press one, you get the feedback on the screen.
-
21:46
The one shows up, so you know I pressed one.
-
21:49
You wouldn't dare to press it again, you know?
-
21:51
But why do we do that, uh,why do we do that other thing with the clear
-
21:55
button, so there's a question about this on,
-
21:58
on User Experience Exchange, which is really interesting.
-
22:04
Why people press screen, multiple times?
-
22:07
And it's a really, really good question.
-
22:09
And one of the answers was, that we
-
22:11
had two different types of clear, on a calculator.
-
22:14
One was, that you just clear a part of the operation that you're doing.
-
22:18
And the other one is to clear, the whole operation.
-
22:21
And, there's some confusion about.
-
22:22
As as to which is wich to a lot of people, you know.
-
22:26
I guess CE was clear entry and, and C is just clear.
-
22:32
So you, people, it was ambiguous.
-
22:36
You know, what are we doing here?
-
22:37
Which one's the right thing to do, so.
-
22:39
It's a simple thing, a calculator, in that sense.
-
22:41
You know, you clear something or you
-
22:43
don't, but in that case it's kinda complex.
-
22:46
Okay?
-
22:47
So the, the thing I like about this what
-
22:49
makes them trust the button less than other button?
-
22:52
Is there some sort of feedback mechanism that's missing, even if it's just a habit?
-
22:56
How does one end up developing it?
-
22:59
So we see this thing creeping into websites all the time, I mean
-
23:02
calculators are these things that have stuck with us for a long time
-
23:06
and we still use them the same, the same way, and even the
-
23:08
virtual calculators have the same two two buttons, the C and the CE.
-
23:13
So, a habit.
-
23:17
Has a lot to do with what, what we do.
-
23:20
And why things are so complicated.
-
23:23
We're just used to doing them that way.
-
23:25
And even though they could be better, we're kind of afraid
-
23:27
to make them better, because everyone knows how this works, right?
-
23:31
Like the hamburger.
-
23:33
The hamburger icon.
-
23:35
Everyone knows the hamburger, right?
-
23:38
They know what it means.
-
23:40
It dro.,
-
23:41
it makes a menu drop down.
-
23:42
Well turns out that not everyone knows what that icon means,
-
23:46
and they might later on, but just the fact that everyone does
-
23:50
it, that a lot of people use it, doesn't mean that
-
23:53
people know that if they tap on it, they'll get a menu.
-
23:56
Okay so there's this thing that Luke Flabusky talked about recently.
-
24:02
And that's this I'll post these slides, but
-
24:06
there's the, this link under here and they
-
24:07
did some, some testing about affordances and you
-
24:13
know, the hamburger icon versus the word menu.
-
24:16
Which anyone who speaks English knows the word menu.
-
24:20
That's simple, the word menu.
-
24:22
An icon that a lot of people don't
-
24:24
understand looks simple but is not necessarily simple.
-
24:29
So they turned, it turned out that when you use the hamburger
-
24:32
icon without an affordance around it to make it look like a button,.
-
24:36
That's, the fewest amount of people clicked on it.
-
24:39
When you put an affordance around it, like in this
-
24:42
case, this this little border, more people clicked on it.
-
24:48
But far and away, the most people clicked
-
24:51
on this one, the affordance around the word Menu.
-
24:57
So sometimes language is actually better than pictures.
-
25:02
We like to think that pictures are simpler than language.
-
25:06
But that just depends on who your audience is.
-
25:09
So you have these laptops and these UIs that are made
-
25:13
for illiterate people, people who can't read, people who can't write.
-
25:17
And these are really interesting projects, but
-
25:19
they're different than this kind of thing.
-
25:22
If you look at those types of projects for people who can't read,
-
25:26
or who can't read very well, the
-
25:28
pictures are almost like children's book illustrations.
-
25:31
It's like what you'd have in, in first grade at school.
-
25:35
Those types of things.
-
25:36
You're not going to put those in your you know, book the flight interface, right?
-
25:41
So if you're willing to do that, then
-
25:43
you'll have some kind of more universal pictures.
-
25:46
A lot of, a lot of research goes into, to
-
25:49
making symbols and what we have is this plethora of.
-
25:54
Icon fonts.
-
25:55
It's so easy to just say, hey, which icon font are we gonna use?
-
25:59
Just use icons next to everything.
-
26:02
So if you do that, that's fine, but just know that usually
-
26:06
an icon with text together is the most effective way of working.
-
26:12
Okay.
-
26:13
The text might not be visually simulating enough.
-
26:16
It might not stand out enough, depending on your design.
-
26:19
But often times the combination of the two works better than just the one.
-
26:24
Okay?
-
26:25
That said, simple doesn't mean stupid.
-
26:28
We don't have to Fisher-Price all of our designs,
-
26:32
you know, and make them look like children's toys.
-
26:35
You can do rich, complex things.
-
26:38
My point is to start simple and then add complexity
-
26:43
in layers on top so, which you've probably heard before.
-
26:47
You don't need to make less of a product.
-
26:50
I saw a site, the other day, I thought it was a April Fool's joke.
-
26:53
But, there's this cookie, in Holland called a [FOREIGN],
-
26:55
I don't know if any of you know that.
-
26:57
But it's like little waffle's that have kinda of, like a syrup in between I guess.
-
27:04
Kinda caramel type thing.
-
27:06
And they're really, really popular and Dutch people all over the world, that's
-
27:10
kind of like their favorite thing, you know, that and Dutch salt, salty licorice.
-
27:17
Whatever.
-
27:18
But they had this app company had this site and they, it was a one pager.
-
27:26
Made with Twitter Bootstrap.
-
27:27
At least that's what it looks like.
-
27:29
And they had this thing where you could just put your
-
27:31
address in, and you can order a box of these [UNKNOWN].
-
27:36
And you didn't, it was nice.
-
27:40
It was simple.
-
27:41
You just put your address in, boom.
-
27:43
You know, you're, you get these things sent through the mail.
-
27:48
But who's sending them?
-
27:51
What are the ingredients?
-
27:52
You know, my my youngest son is really, really, really allergic to, to peanuts.
-
27:57
You know, do they have peanuts in there?
-
27:59
Is it, is it manufactured in a,
-
28:01
in a company that manufactures things with peanuts?
-
28:05
You know?
-
28:05
You don't even know who's making these things.
-
28:08
So there's, like, essential information that's missing.
-
28:11
In the attempt to make this a really simple thing.
-
28:16
So they probably won't like that I'm saying this
-
28:18
cuz I know a couple of guys there, but
-
28:21
Looking simple is not simple, necessarily.
-
28:26
So how do we come up with this complexity in the first place, and.
-
28:32
Usually it's by adding something to something that was, inherently simple.
-
28:36
So something's fine, and we went and screwed
-
28:38
it up, by adding stuff to it, okay.
-
28:41
So we start with too much.
-
28:44
Many people when I talk about simplicity they, talk about John Maeda's book.
-
28:48
The loss of simplicity.
-
28:50
And he says the simplest way
-
28:51
to achieve simplicity is through thoughtful reduction.
-
28:54
Which is true.
-
28:55
It's I disagree with the fact that it's the simplest way.
-
28:59
I think it's one of the ways.
-
29:01
Because if you don't add something, you don't have to remove it, right?
-
29:07
So the other simplest way, to achieve simplicity,
-
29:10
is by not complicating things in the first place.
-
29:12
That's not John Maeda.
-
29:14
[LAUGH] So the first website in the world still
-
29:19
works on just about any device that shows HTML.
-
29:22
Doesn't look very pretty, but no one added anything that would let it break.
-
29:27
You know.
-
29:28
Think about an audio player, for example.
-
29:30
nowadays, we have all these API's and all these, services.
-
29:35
We could just, if you have a site, a client of
-
29:37
mine does podcasts, and they want, they have like 600 podcasts.
-
29:41
And they, they wanna publish these things on the site, so
-
29:44
they're thinking, you know, you could put on Sound Cloud, and.
-
29:48
Embed the player in your page or something like that.
-
29:51
But if you start from simple what's the simplest
-
29:55
way to get an audio file on the page?
-
29:57
Anyone?
-
29:59
Yeah.
-
30:00
[INAUDIBLE].
-
30:03
I'm sorry.
-
30:03
Embed the media in the page.
-
30:05
Embed the media in the page.
-
30:07
Yeah, there's one even simpler than that.
-
30:10
Just a link, right?
-
30:12
A link to the MP3 file or whatever it might be.
-
30:15
Because if you click on a link and you
-
30:16
have, you'll either download it or if you're on some
-
30:19
kind of device that supports it, you'll, it'll just open
-
30:22
the device, the device's player and play it in there.
-
30:26
So that's simple.
-
30:27
Works everywhere.
-
30:28
Anywhere that, that supports, you know, downloading
-
30:31
media in that way, or supports links.
-
30:35
So on top of that, you can do, you can embed something,
-
30:38
you know, you could put a player for the devices that have that.
-
30:42
And you can enhance that experience and make it, make it really, really good.
-
30:46
But when we work from the top down, we're missing a lot of people.
-
30:49
You, we're adding complexity.
-
30:50
The complexity of a player is,
-
30:55
much more than just a link, right?
-
31:00
So there's this thing in accounting.
-
31:02
This, concept called zero based budgeting.
-
31:04
And if you're ever worked with organizations like I have.
-
31:08
like, large government organizations.
-
31:09
And, and, like, large corporations.
-
31:11
There are always.
-
31:13
Looking at budgets.
-
31:14
And zero-based budgeting is kind of different
-
31:18
than how most of these organizations work.
-
31:21
The, the budget is totally reevaluated.
-
31:27
So they, they act like you had no budget
-
31:29
before, and the look at what needs to be done.
-
31:32
And they'll just evaluate what budget is needed as opposed to
-
31:36
comparing last year's budget, you know, what did you not spend?
-
31:40
Okay, well, you'll get that much less this year, right?
-
31:43
So, and, you know, lots of people try to protect
-
31:46
the budget so they just try to use it up.
-
31:48
We, we notice that all the time, especially toward the end of the year.
-
31:51
I don't know how it is here but in Holland.
-
31:53
Suddenly all the roads are broken, right?
-
31:56
[LAUGH] Everyone needs to use up all the
-
31:58
money like the last two months of the year.
-
32:01
So zero based budgeting says wait a minute.
-
32:03
Let's just throw everything away, look at what we need and see if if
-
32:10
we really need something and then figure out what budget we need for that.
-
32:14
So my consultancy is called Zero Interface.
-
32:16
And the Zero Interface is this concept I've been talking
-
32:20
about for for several years and it's just, it's really simple.
-
32:24
It's just stuh eh, design in the same way as zero based budgeting in that sense.
-
32:30
You have the zero interface which Requires that you start from a zero base.
-
32:36
You have, you take nothing with you.
-
32:38
There's no design baggage.
-
32:40
You just ignore what you've done before, and what you have, and you think
-
32:44
what, if I were to design this thing from scratch, and we knew nothing.
-
32:51
What would I do, how would I do it?
-
32:54
Sometimes, when you're with, eh, Paul and I
-
32:56
were talking last night at dinner, and he
-
33:00
said, well what happens when you have an
-
33:01
existing project, and you have to make that simpler?
-
33:05
In that case, the zero interface is more of a thinking exercise.
-
33:09
What would we do, if we were able to start over.
-
33:13
What result would we want?
-
33:15
And then, the second step would be, let's let's look
-
33:19
at what we have now and what steps can we
-
33:21
take to get as close as we can to that
-
33:24
ideal that we would have had if we started fresh?
-
33:27
That sometimes works better than just having thins massive thing
-
33:31
and then trying to pull away little parts, you know?
-
33:34
Which can become real expensive.
-
33:36
In fact,.
-
33:38
I've had to deal with projects where it was cheaper
-
33:41
to start over than to fix what was already there.
-
33:45
So I'm sure lots of you have had projects like that as well.
-
33:49
So what's design baggage?
-
33:51
We have a couple types.
-
33:53
like, the stuff clients, developers and,
-
33:58
Designers kinda add to the project, they bring with them to the project.
-
34:03
And they kind of put, put that in between A and B, okay.
-
34:07
So clients, they have their design baggage.
-
34:11
Arguably, the hardest to get rid of,
-
34:14
because they're the ones paying you, right?
-
34:17
So you can kind of help them.
-
34:19
By showing them that sometimes simpler
-
34:21
would, would make them more money basically.
-
34:26
Sometimes clients don't understand sunk costs.
-
34:29
The principal of sunk costs.
-
34:30
When you've spent the money, you've spent the money.
-
34:32
You're going to a concert, you've paid for the tickets.
-
34:36
And now you can't go.
-
34:39
What do you do?
-
34:40
Do you say, I'm gonna go, because I paid for the tickets?
-
34:44
You could, and a lot of people want to do that.
-
34:46
But you've already paid it, so it doesn't matter if you go or not.
-
34:50
You've already paid it.
-
34:51
So we have this big CMS, right?
-
34:56
We're using Drupal, and we want to keep using Drupal.
-
35:02
Competitor patterns.
-
35:04
My competitor does it and obviously, we want to do exactly what
-
35:07
the competitor does so that we have no competitive advantage [LAUGH] right?
-
35:12
Because we're doing the exact same thing.
-
35:14
So that's kinda kinda an interesting discussion.
-
35:18
And carousels, [LAUGH] every client wants a carousel on the
-
35:22
page, or slide show if you, prefer to call it that.
-
35:26
So, we have our own baggage as well.
-
35:28
trends, flat design, anyone?
-
35:33
Pattern libraries, you know?
-
35:35
Bootstrap.
-
35:37
Foundation.
-
35:38
All these things that we, think are easy to work with and they are, for us.
-
35:42
They're really easy to work with.
-
35:45
They add, they add something, and if we're
-
35:48
not careful they can add a lot of complexity.
-
35:51
Frameworks, ya know, preconceived UI frameworks and stuff like that.
-
35:59
And conventional wisdom, of course, which we have
-
36:02
a lot of, probably in this talk as well.
-
36:06
The problem with this baggage is that it's
-
36:08
all focused on existing solutions that are out there.
-
36:10
So we're relying on these things that are already
-
36:12
there to solve the problems that we come across.
-
36:15
In dealing with our clients but are
-
36:18
those pre-existing solutions good enough, you know?
-
36:24
Our clients need something.
-
36:25
We need to, everyone talks about focus on the solution, you know.
-
36:30
Don't, don't always focus on problems.
-
36:32
Don't be so negative, Steven.
-
36:35
But stop focusing on solutions.
-
36:37
Start focusing on the problem!
-
36:40
We don't focus enough on the problem.
-
36:42
If you focus on the problem, sometimes the
-
36:45
simple solutions will just present themselves to us.
-
36:49
So, how can we achieve it?
-
36:51
Really, really simple.
-
36:52
If you, if I'm asking you to [LAUGH] to get to simplicity.
-
36:57
I have to make it really simple to do so.
-
37:00
The first thing is to start with nothing, if you're
-
37:02
on a new project it's easy because you have nothing.
-
37:05
If you're on an existing project, it's a little bit harder
-
37:07
but you have to imagine that you're starting with, with nothing, okay.
-
37:14
Number two is put each thing you add through hell week.
-
37:17
Most of you probably heard of the Navy Seals training hell week, which is week
-
37:21
three of their basic training and they basically sleep for, for like five days.
-
37:27
They sleep like four hours and they just it's
-
37:31
almost like actually it's kind of torture in a way.
-
37:34
So, a lot of people drop off, the Navy seal training during Hell week.
-
37:39
Those are not the people that you want, you
-
37:41
want people who can handle the stress of combat situations.
-
37:46
And, the people that drop off, if they can't handle that kind of situation.
-
37:51
Because you can't prepare anyone for a war-like situation.
-
37:54
They certainly won't be able to handle the stress of an actual combat situation.
-
37:57
So you get the very best people out of
-
38:01
that, out of that hell week, who continue on.
-
38:05
So that's kinda what you have to do with all the little things you add.
-
38:08
Every single thing you add has to go through hell week.
-
38:11
To be it has to be tested within your team or by yourself.
-
38:18
Does this really help me to get from A to B?
-
38:21
If I could just get A, from A to B by thinking.
-
38:24
I, I want this book from Amazon, think, done.
-
38:29
That's.
-
38:30
The Zero Interface.
-
38:31
Any step I add between, is potentially, something that adds too much complexity.
-
38:36
So it has to be, really thought through.
-
38:38
And you'll come up with really simple designs.
-
38:40
When you do it, stop.
-
38:43
That's it.
-
38:44
You can enhance later on.
-
38:45
And make the experience a little bit better for other people.
-
38:47
But just.
-
38:48
Try this.
-
38:49
This is a, a good exercise and your stuff will always become more complex than this.
-
38:54
This just kind of evens the playing field a little bit.
-
38:59
So, this is the Zero Interface.
-
39:00
Think, done, and I have 46 seconds to finish this talk so
-
39:05
I will do so by looking at Amazon The, the one click.
-
39:10
Which is kind of, really, the closest
-
39:12
thing I've found to the zero interface, really.
-
39:14
You click, and then you, you buy something.
-
39:17
Okay?
-
39:18
So the problem with one click is that it might be too easy.
-
39:23
And it is, because when I went to, [LAUGH] to get screenshots, I bought a book.
-
39:30
Right?
-
39:30
So it didn't say, are you sure you want to buy the book?
-
39:33
No, I just bought the book.
-
39:35
That's, that's like the other extreme, you know,
-
39:38
you got to protect people like me from ourselves.
-
39:40
You know what I mean?
-
39:40
[LAUGH] So just add a little screen that ask if we really wanna do that.
-
39:45
Okay?
-
39:46
A BJ Fogg says by focusing on simplicity of this target behavior,
-
39:49
you increase the ability of the people using the thing that you're making.
-
39:55
So if this all sounds like progressive enhancement, that's exactly
-
39:59
what it is, that's pretty much what I'm talking about.
-
40:01
Starting at the very base and then working your way up and enhancing the experience.
-
40:08
So I'd like to leave you with what John
-
40:10
Maeda posted the other day, a quote from Grace Hopper.
-
40:13
The most dangerous phrase in the English
-
40:15
language is, we've always done it this way.
-
40:17
Thank you.
-
40:21
[NOISE]
You need to sign up for Treehouse in order to download course files.
Sign up