Don't Make Me Click


Uploaded by GoogleTechTalks on 03.04.2008

Transcript:
>> AU: Welcome to our UX Brown Bags/TechTalk. I'm Irene Au. I run the User Experience team
and I'd like to introduce to you Aza Raskin. Aza gave his first talk on user interface
at age 10. For those of you who don't know, he is Jef Raskin's son and Jef Raskin is one
of these, you know, user interface gurus that most of us in the industry know about that
and anyway we're in good company. So, at 17 he was talking consulting internationally.
At 19 he co-authored a physics textbook because he was too young to buy alcohol. And at 21
he started drinking alcohol and co-founded Humanized and two years later Aza founded
Songza.com. It was a--it's a minimalist search music--music search engine that had over a
million song plays during its first week of operation. And after Humanized he was sucked
into Mozilla and he's now head of user experience for Mozilla Labs. And in another life he has
done dark matter research at both Tokyo University and the University of Chicago. What you don't
know is that he graduated with honors in math and physics. And when not working, he enjoys
music, playing music and punning. So without further ado I'm pleased to introduce to you
Aza and he is going to talk about Don't Make Me Click.
>> RASKIN: Thank you for that. I'm sort of embarrassed but I will say that when I talk
I do puntificate. Thank you. Yes. Okay. That one is I guess being recorded, so that's going
to go on the Internet. Right. So, Don't Make Me Click. So, how many people here actually
design interfaces? Cool. How many people here have never made a website? The same group.
Wow. That's unusual. Normally, everybody sort of raises their hand sometimes slowly when
they're just serious people. Because most people--anytime you make something on a computer,
right, that a human uses, you've made an interface. You've designed an interface. You're sort
of--you need to be versed in the ideas of what makes an interface good. So, I'm here
to talk about Don't Make Me Click which is a--could have played on the Don't Make Me
Think by Steve Krug. And well, I'll just get into it. So, oops, let's see if this--there
we go. So, since the very beginning of the Web, right, way back in the primordial soups
of Mosaic, there's been the fundamental web tension, right? On one hand--wow, this doesn't
work very well. There we go. On one hand, there are pictures of your pets and pictures
of your children which are possibly the most boring thing possible to other people. Possibly
the most interesting thing possible to you. So on one hand of the fundamental web tension
where your website fits some place in between, there's boring. And on the other side there's
the Taser the Gnome games, right? I have tasered that gnome. I don't know how many times and
my mortgage rates still haven't gone down but that's annoying, right? So the fundamental
web tension is on the boring versus annoying thing, right? Your website falls some place
in between these two poles, right? So, it's just a matter of where. So, I've certainly
seen a lot of boring, a lot of very annoying and some place in between--oh, right. As I
said I do all my presentations in Firefox because I'm now at Mozilla and, you know,
we have this idea for the blink tags. Everybody knows what the marquee tag is, right? So,
do you know that you can put the marquee tag inside of the blink tag?
>> Awesome. >> RASKIN: Yeah, it's really cool. Actually,
you can put images in there, too. And you can put in the background, so your entire
background of your screen can be scrolling, right. Which is--and the thing that gets me,
right, is that some engineer, probably a whole group of engineers not only had to write this
but they had to write unit test for this. Right? And they spent, I'm sure days, weeks,
like working on making this just, you know. So I'm glad that we've gotten rid of the blink
tag more or less. So right in between boring and annoying, that's just right. Right? And
that's where you get websites which are actually useful. So we're going to figure out what
exactly that is. And you sort of use, you know, Google, good job. There is Facebook.
There is the iPod. I think Firefox is a very good job. Or sort of getting something which
is very useful but isn't boring per se, right? People go there and use it, and it isn't annoying,
right? So there's sort of a move right now to cinematic user experiences. I don't know
if you guys have been sort of following this, sort of the Pandora thing or things that are
zooming around. Apple is getting very fond of gratuitous zooming effect. And that's sort
of--that's moving over towards annoying. So, the thing I'm most fond of saying is that
to the--the interface, to the user, the interface is the product. I think this is really important
and I have a little parable which I sort of shortened down about Diggr 2.0, otherwise
known as a shovel. And this is the specification, right? And so, that means there's a lot of
time spent making the shovel which is the, you know, back in the thing you invest in
titanium plated with diamond bits. And then--and then you have the UI which is just the handle
and so what you normally get, of course, is that when you actually release your shovel
looks like this. So, this is sort of funny I guess but the weird thing is just that,
you know, most people especially marketing don't realize it. They think, hey, you know,
it's all about the features, not really about the experience, the product. So, Bill Buxton
has an incredibly a good example of this, right? About the--to the user, the interface
is the product, right? And he takes the picture of a bicycle and he puts it up. He says, "This
is not a very good advertisement for a bicycle." They chose another picture of a bicycle in
sort of a cute pose and says, this also isn't--this is slightly better, you know. It has--it looks
sort of Pixar-ish but it's not a great marketing tool, right? People aren't going to buy a
bicycle just for seeing this sort of picture. And then he shows a picture of a guy rushing
through a stream, water everywhere, right. Mud everywhere. You can't even see the bicycle
but boy do you want it, right? That's the interface, right? The whole getting on doing
it, that's the product as an experience, right? That's what important to the user not the
fact that it has, you know, graphite leaded things on the inside. That's important, too.
So, we come to the question of what is the best interface, right? We've just seen what
this--a bad interface for a shovel is, so what's the best interface? And I'm going to
be particularly bold here and say that on the very next slide I'm going to show you
the best interface, not just for a shovel--in fact, I'm not going to show you the best interface
for a shovel, but for every product out there, right? It's a pretty bold statement. So I
hope--like gear your memories, prime them. That it's this. I always intended to put this
slide intentionally left blank but then it isn't. I always think it's sort of a mental
quandary but this is the best interface, right? Is no interface. If you don't even realize
you're using something, that's great. And it's a little bit ironic. We're interaction
designers and the point of our job is to get rid of interaction. Like when we do our jobs
very, very well nobody even knows we were there. Sort of like the--these are not the
[INDISTINCT] you are looking for style of interface design but it's true. If you notice
the interface, that means you're thinking about the interface, not the thing you're
trying to do. So this is the best interface. So, what's better than this? Oh, by the way,
so about the blank screen. Brenda Laurel who is a research designer, an interface research
designer--no, designer and researcher calls it NFI and I don't swear normally but I guess
I take this opportunity and she calls it, No Fucking Interface. Like, that is the best
interface, right? It's pretty cool. So, what's better than this? That. A hole, right? If
anybody ever invents a shovel that is just a hole where you want it please get me one.
I really want it. But we'll come back to this, right? We'll come back to this. So the point
of what I want to talk about today, like the heart of it, again, this Don't Make Me Click,
don't force me to do thing and it's about interaction seduction. It's about us as designers
falling into the trap of making things go wiz bang pop, having gizmos and gadgets on
your desktop, having to click on things to get information, having icons instead of words,
it's about the desire to make things look fancy, right? That is the seduction of interaction
because it looks cool. It looks awesome. And if you follow this path what will you get?
You will get those annoying sort of splash screens. Everybody remembers like the flash
splash screens that you like. Wait, wait, before you can see the content please watch
as I animate my title and morph it into somebody else's name, right? Like, this is not useful
but that's where people sort of go, right? That's the seduction of interaction, sort
of the television style of designing. So, this probably looks familiar to some of you.
I don't know if you've heard of it. And it's, you know, it's nice. But, maybe we can do
better, right? Let's let the marketers in. This needs more interaction, right? Let's
follow the interaction seduction. So, what does search really do, right? We have all
this stuff random search. We can calculate, track flights, track packages, search discography,
find movies, maps, restaurants, locations, stock finance searching. There's a couple
I'm missing I'm sure, the weather I think. Although you're not indicating that to your
user, right? You need to sort of get out there show all this sort of wealth of information
that you have sitting inside of that box, so let's redesign it a little bit, right?
So now we have search in there a whole bunch of times, Google in there, so this is great
for SCO. I mean, this is beautiful, right? And now the user clearly can see the wealth
of information in there. But guess what, that's really Web 1.0. So, Let's Ajaxify, right?
Let's use our toolkits and let's see what we can do. Check it out. Ready? I'm pretty
proud of this one. Watch. Yeah, thank you. Wooh, ah, right? Well, this is clearly less
usable but you've seen websites that look like this, right? Right. This is a scary thing.
I've just tried to take the worst thing I could possibly imagine and wrap it up in just
a little bit of interaction seduction and we get this. And people do this all the time,
right? Because you give people a really easy recording and widget, they will use it. And
people will try to market it, right? That's how we got that silly Vista thing where you
have that sort of 3D Rollerdex. That was them saying, we need interaction. We need to do
something that is better than, or at least looks as fancy as Expose. We can't copy Expose,
so we are going to do something interacty and you get something that's the analogy of
this, the analog of this. All right. But there's still too much text, right? Let's really give
in to that interaction seduction. So here we go. I have replaced on the top your links
with beautiful iconography. >> Iconography.
>> RASKIN: Iconography. Thank you. And now not only--and so a lot of people say that
icons are great because, you know, then you don't have to localize but what you're really
getting are something like this sort of universal language which is equally unintelligible across
every culture. And, you know, there are lots of examples where like this in English means
stop and some place, I think in India, it means something not too good. So, that sort
of falls even there, right? There are a lot of dangers here. But even worse just from
an interaction standpoint what does this require? Well, I don't really know what this globe
means. You know, I made these and I still can't remember what they are. And now you
have to mouse over them before you see anything, right? So what we've done is we've removed
content. We've lowered the density of information on the screen and this is all part of that
sort of interaction seduction falling into it. All right. It's still too boring. Let's
see what else we can do, right? I have this awesome toolkit. I can do fun things and the
marketers still want something cooler, one thing with more pizzazz. So check this out,
okay. Instead of having that boring bar along the top and that's not extensible anyway,
what happens if you got like 25 products? Well, we can go like this. Yeah, exactly.
Wooh, ah. So now, to find anything, we have to sort of scroll around and then we can do
our little searches here and we've got the marketers paradise, right? And again this
looks sort of cleaner maybe, who knows, but we've all seen sights that looked like this.
Like in Yahoo! Right. This is interaction seduction. This is bad and yet it happens
all the time. Now, actually, interestingly enough, so you see this little like widget
here. Firefox 1.0 had tabs where you would happen to open more and more and more tabs.
They will just get smaller and smaller and smaller and smaller. And soon you couldn't
really read them but that was okay because you'd remember that your tab was some place
up and you're one and a half inches from the left side. You have this sort of mental mapping.
Firefox 2.0 came around and they introduced this little button in the left and right side
so that as your tabs got smaller, they would stop at some point and then you could scroll
left and right. This meant you never really knew where your tabs where because they'd
always be hidden off the screen. They'd introduced interaction into their system and it was bad.
And in fact, you look at the data, people open the same tab many more times with the
new system because it's much easier to open up a new tab type a new URL than just to find
the original tab, right? So, you know, this looks sexy and cool and it's animated. And
you know that it's a bad idea when you see it like this. But when it's just offset just
a little bit into the real world, you know, it becomes so easy to fall into that, yeah,
we'll just add this little interaction when you always need to be thinking about, "Hey,
how can I remove interaction, what's the other way?" So, actually, I started a design competition
and we got something like 160 entries into it. And I'll show you later one of the solutions
to that tab problem was, that I think is pretty cool. So what I'd like to say is this is,
you know, people call this RIA or Rich Internet Application. And I disagree. I really think
this is an MIA, meaning it's a Materialistic Internet Application. I also like to say it's
an MIA because I really wish it was, as in missing in action. And what we really want,
right, is the ZIA or a Zen Internet Application. And what's the thing about Zen it's act without
doing anybody, it uses Quicksilver rule. We'll see this sort of similarity popping and I
don't know if you guys know but the Quicksilver guy Nicholas is here at Google, so you can
go seek him out. He doesn't like it though. So, we want to act without doing, right? So
that when we come back here and look at Google and you can type into that little box and
there's so much functionality hidden in there, well, that's really cool. This is sort of
like an oasis of interaction, right. There's nothing to do. It's like you've been crawling
across the desert full of the hopes and like the rusting carcasses of Web 2.0 companies
with their Ajax frameworks. You are like, ah, just a textbox, how nice. Well, can we
simplify Google at all? Can we try to figure it how to take that interaction and make it
go away anymore? Well, it's going to be hard to do it for your actual search box, so you
could get rid of I'm feeling lucky that's like a cultural icon. It's great for April
fool's jokes. But what happens when we search? Well, we can go the other way. So, here's
a search. It looks nice. I like your colors. Is there anything we can do here? First, let's
give into the interaction seduction. Go the either way for a second. Here's a little mockup
I did. And did--you know, you have your like your related videos and you can search more.
You get a big nice image when you hover for detail. And, oh, yeah, if you don't like your
search results then you can go to previous or next. Not so good. Oh, I wonder if I'll
have time. How long is this talk supposed to be? One hour? Okay. I guess I'll do a brief
aside into random access interfaces. Everybody here knows what random access memory is? Rather,
people that don't, make some sort of noise. Who? Well, so there are sort of two ways of
deciding interfaces for things like spell check and search. Spell check, if you look
at how Word does it, when it's not doing the little red underline. It sort of pops up a
dialog box and moves you from one misspelled word to the next, to the next, to the next,
right? That's actually not all that nice because, you know, if you've ever tried to spell check
code, you know, that it's just going to highlight all the ones you don't want. In fact, you
can't jump over it. It's sort of it's pulling your locus of attention with it, right? And
there's the other kind, there's the kinds you have in Gmail where, you know, it just
highlights the words that are misspelled and you can go through and check them. Well, this
is the difference between sort of a linear search and random access. You can go anywhere.
So why do we hate voicemail so much? It's because you can't--like your ears aren't random
access, your eyes are. So your ears, you're forced to listen to the whole thing and you
can't change with your ear what you're listening to. With your eyes, when you're reading something
you can skip over the parts you're not interested in. So this is the difference between random
access and linear access interfaces and why this sort of previous and next is so gross
is because this is linear access, right? You're forced to go from one to the next to the next
to the next whereas when you can just sort of see all the list, you can jump through
them. Anyway, it's random aside. Right. So--oh, back to the hole. What would be better than
use current search results? Well, if you can just have the answer there already, right?
You typed it in. And actually, you guys do this. I was hoping to like fault you for something
but couldn't get there. If you typed in weather, it will be actually just sort of drop the
weather, right? So, that's cool. That's actually getting towards the--not giving you search
results but actually giving you the thing that you want in the first place. That's the
whole low interaction. So, we'll come back in just a second to exactly what you guys
can do to reduce interaction on Google homepage but first, why is reducing interaction good,
right? It's because when interaction goes up, information density goes down. And when
the information density goes down, content goes down. And why are you users at your sight
in the first place is the content, right? They're trying--they're going there to do
something. When I was talking about that boring versus annoying in that center that [INDISTINCT]
is because people were presenting content in ways that wasn't getting in your way, right?
That's why people spend so long on Facebook. So your content goes down and when your content
goes down, your users go away. This is why reducing interaction is a good thing because
it's fundamentally getting back to making your users able to do their product making
your interface invisible. Yeah, not a good thing if that happens. So we want the ZIA,
right, for that search result. So we come here and what's missing, right? We come down
to the bottom and now I have to do something. I've seen the 10 results and I have to click
on these little links. Right. And they're actually semantically meaningless. They just
mean go someplace further into the search history, right? And in fact I actually have
to do something. And if I'm looking for researchers--although I'd seen before and I know I had done a search
and it was just someplace in there, it's really hard to find. Most people, I'm guessing, here
have had the thing where they've search, found something and they couldn't find it again
without clicking a whole bunch. They're like, was it in seven, was it in four, was it in
three, right? So, maybe there's something we can do that's better there. Maybe we can
simplify it. So, you know, the thing about Zen interfaces is the, just act without doing
and so here's the maximum. Don't force users to ask for more content, just give it to them.
So it really couldn't be simpler than that. Yeah, hey. So, here's an example. Number of
years, I guess it was like two or three years ago and now I decided that our assess was
too hard like all those silly readers with like the lots and lots of pens on the side
and the idea that you're reading your--our assess as email I thought was silly because
I don't care if I've missed the whole bunch. I just want to sort of keep up to date generally.
And so I made this as our assess reader, as sort of an example of how you can design and
I was struggling with the sort of how do I go back in history problem. And this is now
called the river of new style though it wasn't named anything back then. And the basic idea
is that as you use this site, you're just reading along, reading along. Yeah. You see
what's new. You can't? Yeah. I think that you--see, it's interesting here you keep looking
back, right. There's more, more, more, right? Now, it certainly didn't load all this at
the beginning. It's just sort of--it's infinite page. I don't know if you can see this but
watch the scroll bars. It gets near the bottom. It just loads a little bit more. So, about
the time this came out, I spent a while trying to convince your blogger people that you might
want to implement something like this and Google Reader did something that's very similar
to this but I think it can be used in a lot more places. I just wish I had like patented
it before Google Reader started using it. Actually, this is a really old idea, right?
It's not something like I reinvented it but it's been used way back when, right? In fact,
one of the most depressing things about the interface design is that it's all been come
up with before. Everybody knew Graffiti like the thing that you use on a PalmPilot. Well,
that originally like if you go back and look at--like I think it was this 1500s, I can't
exactly remember, when the Spanish sailors used the shorthand for communicating and it
has something like an 85% overlap with Graffiti because they're just doing it really short.
So, it's like nothing you do is new. But that aside, a lot of stuff that people do is really
bad, so we can improve it. So this just keeps going, right. Because there's already a semantic
meaning with scroll down and that's going backwards through time, right? There's already
a semantic meaning if you're doing on slash dog going down. That means go backwards through
time, right? On Google, it's--the scrolling down means give me things that are less relevant,
right? And you never have to stop and ask for more content. So what do we see? We see
people looking at more and more things. In fact, I think on Google there is like a thing
where at the--the number of clicks people get per search results starts out with the
first result getting locked and sort of dips down and you get this sort of tailback at
the last result, number 10. Just gets rid of it nicely. It just actually flattens everything
out. So nobody who tries to get into the system will we get number ten. And actually I spent
a while talking to--I'll get to you in one second, talking to the New York Times people
to see if we can get something like this on their site. And--because right now, you know,
they sort of they're patenate the results. So when you're reading an article, you'll
get the first page, then the second page and the third page. And the reason why they do
this is twofold. One, is because that--it sort of makes the page load smaller. It's
not really a good reason since they're putting Flash in there now and lots of other big images.
And two, and the real ones because that way they can get more add lads. But here's the
thing, if you're doing via Ajax, you can just load and add new when you get a little bit
further doubt, so I think that's just a silly reason. And the thing is that they see a huge
drop, right? The number of people will look at page one. A number of people will look
at page two. I think that it it's just--there's a cognitive break. You have to think about
it. And what happens when you implement something like this? It looks like this, right? You
just get--as the article gets more boring, people leave but there's no huge break, so
you get a lot more users looking at your content. So, we're actually missing a lot of business
here. Sorry. So, you had a question? >> Yes. So what if searches like number 50
years old [INDISTINCT] before you remember the most [INDISTINCT] had the most of [INDISTINCT].
>> RASKIN: Well, here's the thing... >> [INDISTINCT]
>> RASKIN: We just--it's much faster to scan, right? You just sort of start scrolling down.
You're like, oh, I remember things that were near there because that's how people's brains
work. Like, ah, that's where it was. >> [INDISTINCT] you don't know where it was
then--well, then the left side of the... >> RASKIN: That's true. I mean, you have the
bar but also you can use in page search, right? You can just sort of command control F and
then start finding it. So, it's much faster in that sense. And if these were of more advance
system you'd have things where you can be like, hey, put a big star in the background
here, so I can have virtual landmarks to navigate, but we never got there. So--oops...
>> Can I ask the control F question? >> RASKIN: Sure.
>> So if you did control--so you're on the first page and you did control F but you knew
it was--sorry. So, if you've done a search before, now you're back there and you're on
the first page and you do control F but it has to scroll way, way down. Does it load
and find it? >> RASKIN: No, it doesn't, but that would
be pretty cool. >> That would be cool.
>> RASKIN: Good idea. Feel free to implement it. So a friend of mine--and so I wrote about
this and I said I was going to do this and I did it and people were complaining about
their scroll bar bouncing up and down and moving around and thought that people wouldn't
find this natural. And so a friend of mine, Pete [INDISTINCT] read on space did this but
he used it in project. I didn't tell him but he was doing it. And when he stopped taking
data, there had been 16,000 people that looked at his site and only one of them had noticed
and he blogged about it and said it was awesome. And so that's great, right? It's just--it
disappeared. One of the scary things is that I was giving a talk very similar to this at
the Ajax experience a little bit ago as a keynote and I got to this slide and somebody
raised their hand in audience. I was like, yes? He said I'm that guy. And it was scary
because in that moment I realized that people from the Internet were there. Right. So when
your interaction goes down, your content and users go up. This is cool. That's why I was
talking about with the New York Times. So good interface design, you know, like sometimes
it's hard to go convince the people above you that interface design really matters.
Well, when you're sort of--and we have tools like this. You can do that. You can go back
and say yes, we in fact are going to get more users looking at the content that you're spending
lots of money making. We get more people looking at the ads if that one doesn't work, right?
That's all about making me don't click. So this is sort of that one mantra that sort
of follows through. So what else can scroll simplify, right? We have this neat interaction.
What else can we use it for? So I talked about the tabs before. A guy named Bret Victor wrote
back. It was a little bit embarrassing for me since I've been a big fan of saying everything's
just be on one page. And he said, "Well, why don't just put tabs in one long big page?"
And who's exactly right? So, here is the solution, right? You come down here and you open up
a new tab. Oops, I did a wrong. I have to hold down a key. No. Other key. This is by
the way running in a virtual machine because Macs can't do full screen and I do--as I've
said I've done everything in Firefox and it--also and I was unable to do it. So the only way
that I could actually get Firefox to go full screen is to run the Firefox inside of the
virtual machine and full screen that. So anyway, now all the keys are messed up. So anyway,
right, here we go. We now--what happened when I open up a new tab? It just opened the tab
right below. So, that's really cool. This is sort of like the coveted read later feature.
Is--wrong key again. You just get all of your tabs in one long page and once again you get
that great ability of--let's see. We'll just move here, around, between them. And that
great ability of being able to do control F across everything that's currently open
on your system, right? It's much easier to find things. You don't actually have to teach
like your grandmother about a new tabs concept because it's just there, right? It's already--it's
sort of obvious. It's just below. There's now a physical thought process in like where
your pages are and even better it solves that whole obnoxious problem of not having enough
space to write out the tab name across the top because you're using that space wisely,
right? So you can actually now just right everything out. So this is pretty smart. Normally
around here people who ask me how does this fit with the thing I've shown before with
the page getting longer, longer and longer. And that's a good question. So, I don't know.
I think this is pretty cool. I'm actually right now working on getting an extension
to make this happen in Firefox and see what we can start doing about getting this out
in the real world because it's just--it's such a neat solution to the problem, right?
It's clever and it's using something you already know how to do. This is about reducing interactions.
We've actually gotten rid of a lot of interaction here. That's cool. Actually, the iPhone could
sort of take this example, right? You right now have to zoom out like press a special
button to see your tabs. Why can't you just--if you go keep going to the left, why doesn't
it just show you your other tabs, right? They already have this like awesome physical space
and then they break it in weird ways. They could make it actually much easier to use
if they sort of embraced the fact that they're working around in a physical space. So, take
your metaphors and run with them. That's if you want to go learn more about his stuff,
go there. The other point I want to bring up is that long interaction doesn't actually
have to mean that you're making your sidebar, right? I'm not talking about just having lots
and lots and lots of text that runs all the way to the edges of your screen. There's other
things you can do. So, I don't know how many people have seen this. I think it's pretty
cool. Let's find Chicago. And all it has is a zoom in and zoom out. It has--I mean, it's
clearly does let than your Google Maps but on the other hand it's much--the interface
is much similar. It's just a zoom in and a zoom out. That's all. Of course and annoyingly
enough you can't change the direction of the compass which rotates which I think is one
of the silliest features I've seen because you can go like this. I hope you all are enjoying
your lunch or work but I think that's cool, right? And this is the first example in my
sort of list. I think I have three here of sort of zooming interfaces. We're it just
uses this analogy of your zoom in and zoom out to get some place. Like where can we take
that analogy? It's very similar to scrolling but sort of in the third dimension, right?
And we simplify it. So, I lived in Chicago until very, very recently like four to five
days ago. And I would always commute from around here to up there near Belmont. And
I had used the trip planner on their website, the CTA website to find my bus or my train.
And it told me to take the red line. So I did and it would take me something like 45
minutes to get there because the red line was under construction and it wasn't so great.
I also got really cold. So I just would get on it and go and try not to shiver. Of course
here I guess like the definition of bad weather is the sun went behind the cloud for a little
bit. I have sympathized with you guys. It wasn't until I looked at a paper map that
I realized there was a bus that went right for my door, right to the door of my work
and it took 20 minutes, right? And I've been doing this for the last 10; you know, I don't
know, a month, month and a half. And so there's something missing, right? All that interaction
involved in striking my destination, my ending, it had just--it had actually destroyed my
ability to actually find the thing that I wanted. So, I was like, okay, well, I can
do better. I'm just going to take that physical map we had and translate it onto the computer,
right? And I'm trying to do it in the most dumb way possible. So, if I want to go see
more of Hyde Park, which is--where, you know, Chicago is. I just move my cursor over and
I get to see it. It zooms in and zooms out automatically, right? And actually, it's quite
nice. And if I want to come look downtown, I just move my cursor over here and I see
it. That's where I used to live. Move outside--oops. It's hard to control from this weird angle
and there we go, right? Just taking that really simple thing of I zoom in and zoom out, make
it a little bit automatic and I actually get a map which is much more useful than the thing
that they have created which if you look at it you have to like you get a little image
and you have to click up or click down and click in and zoom in and zoom out, right.
It's just making things less interactive. And yet, it's not really that boring. So what
else can we do with zooming? I'm going to come back to this because I'm going to hold
you guys for a task, for Calendar. I don't know who here is really responsible for it
but I think you might not want to be shortly. So here is a way of doing Calendar that uses
the same sort of zooming metaphor, right? So we can--we can come over here and say like,
hey, here's March. Here is February. I want to zoom in and see these particular things.
I can zoom out by doing this awesome little adjuster here. I can zoom in like that. And
all of a sudden, you know, I get to see as many things as I want per day. It's sort of
cool, right? And it's very clear what I want to do when I want to see more. I just zoom
out a little bit. Right? Here's 2008. Want to see a little bit more? I zoom out a little
bit more. Right? Now, if this was a full feature thing you could see everything. And now I
don't need those sort of today, next week, you know, next year. I don't need to click
on those little buttons left and right in Google Calendar that's like next year, next
year, next year, next year, next year, right? When I know it's far away, I can zoom out
and zoom in. It's a very simple metaphor that has a lot to it and to get back it's quite
fast. Right? So, anything on that calendar in the entire 21st Century could be accessed
almost instantaneously as fast as I just did back to get to the 29th of February 2008.
How cool is that, right? >> Excuse me. What is the signal for zooming?
>> RASKIN: What? >> What is the signal for zoom in?
>> RASKIN: I actually just clicked on the thing I wanted to zoom in on. This by the
way is made by a company called Social Helix and they're doing some really neat things
with the sort of zooming stuff. And I should have put it up on a slide with their--with
their addresses but it's socialhelix.com. And they have a whole inventory of neat features.
Like they have this sort of like counterclockwise spiral thing with your mouse which lets you
zoom out which I quite like. It works very well on the tablet PC in zooming. So, that's
pretty cool. And you know what's even cooler about it? When I make the screen smaller like
to fit on a mobile device, guess what? It works just as well. Actually, you can go pretty
far here. >> Why?
>> RASKIN: Not so useful. So I don't know. I think taking this sort of really simple
metaphor, just started showing you with zooming in and zooming out and sort of exploring where
you can go with it, you can get a lot. It's not boring but you've reduced a lot of interaction.
So keep this in mind. Let's see how much time I have as I sort of continue on into the Google
Calendar stuff. So these are Zen Internet Applications. What aren't ZIAs? And I'm actually
going to use I think my favorite UI insult. I have--I have two. One of them isn't so much
UI. It's just that, oh, yeah, we are not truly complete. But, my favorite UI one is your
personality is nothing but a thin veneer over your underlying implementation. How many people
here have ever worked in like Enterprise software at all? Right. So you probably remember seeing
that your--like your interface is a very small shim over your database, right? It sits pretty
much, it's just like they're forms in your database and then you have forms in your interface,
right. This is not a great way of designing, right? People do not think in forms, right?
If I asked one of you like, you know, like, what is your name? What is your birth date?
Where do you live? You know, it went down the [INDISTINCT]. What is your phone number?
Then, you know, that's not a great way of interacting. It's even worse when I like have
to ask you like to talk, you know, talk about your boyfriend or husband or your significant
other. You talk about them for I don't know; say 15 seconds without mentioning their gender
or anything that would like indicate their gender. Can you do it?
>> My significant other stays home with the kids. He--aah.
>> RASKIN: Oh, right. Okay. Well, a lot of our interfaces actually go through this sort
of process of entering forms, sort of making that assumption where they won't let you know
or talk about it. It's a very inhumane sort of dehumanizing way of interacting with people,
right? >> Yes.
>> RASKIN: So, I don't know. This is part of the--your thin--your personality is nothing
but a thin veneer over your underlying implementation. And we'll see that you get to use this right
here, right? This is not a very good way of entering data. Now you guys do, do better
with your like quick add box. Although there's another company that does it better which
is 30boxes. And I'll come back to that. But if you also stop and think about that sort
of like point of interaction seduction, well there's a lot of interaction that goes on
here, a whole bunch and not all of it, most of it in fact is stuff you don't care about,
right? One of my other favorite adages in the interface world is every time you ask
the user to make a decision they don't care about, you have failed as a designer. My favorite,
favorite example of this is Windows when you do a search, right? And the first time you
do a search on your Windows box, a dialog box comes up and says, hey, user, guess what,
you have to make a choice. Would you like--check this out. Would you like to do a search that
is slow but takes up lots of hard drive space or--or, right? That's one choice. You can
do it--wait, sorry. Slow but doesn't take up hard drive space or you can make it fast
but it will take up hard drive space. So, slow but use your--but slow or use your hard
drive space, which one? Choose right now. You're like, I am a user. I don't care just
work for me, right? Like don't make me choose between the worse of two evils because those
are your only choice. It's sort of like when you get those things it's like, would you
like to--oh, no. Restart, okay, canceling. Like, when Windows would use cancel do. So,
right. So this is--this is bad, right? This is a lot of interaction and it looks just
like your database. And there are better ways to represent forms. So the first one--well,
actually I think we'll come back to this as soon as--nah. So, one right here is that to
do almost everything in 30boxes, you type into this little box, right? And that's it.
You can just say, you know, the 7:00 PM dinner with A today. So that's similar to your guides.
But you can do something a lot more. You can then start typing some of these email address
and that will add them into the box, right. And then you can share that event with them.
And I'm trying to remember all the other really neat things you can do inside of here, you
know. And probably if you start typing about weather it will sure--or putting in a date
will tell you about the weather. It has a whole bunch of functionality that's all wrapped
up inside of this little search box, sound familiar? And even--so, one of the things
that I think is fundamentally wrong with the Google Calendar is besides the whole having
all those little buttons you have to click back and forth on is that I type in 7:00 PM
dinner with A and it misinterprets me because natural language processing is hard. That's
okay. What's not okay is that then to fix that mistake I have to go through that full
form, right? I have to not only click on the event and then click edit, then I get brought
to a new page which brings up the form. This is a lot interaction that doesn't need to
be there, right? Then I have to go figure it out. It's an entirely different form of
information than I had before which I just typed it out. Why can't they just edit that
original field that I had and it tells me what it thinks I've typed, right? That'd be
a much better way of doing it. It's just taking--it's essentially you're making a tight feedback
loop of what I typed in the box, what the computer thinks I'm doing so I can fix it,
right. Because natural language processing is in fact hard. And this is all a part of
a theme that I talked a lot about which is natural language interfaces or natural language
command lines and it's something that if you go to my site humanized.com you can see that
we have something which works across all your applications to let you do things like, you
know, adding maps or spellchecking or translating into German, in the same way that you just
do your Google thing. You type what you want to find. You type what you want to do. So
there's a lot to be explored here but in particular, right, it's always about producing interaction.
I guess there's just more example that I put in here before I get to this slide. And that
is, have you guys seen the BART planner, the BART trip planner, the website? Have you seen
the widget for a dashboard? Now that I'm on a Mac I really should have installed it but
I didn't think of that. So, the trip planner. You have to enter your information, start
time, dropdown list, end time, you know, dropdown list. If you don't know exactly what it's
called or you know it by different name, you can't find it. If you're new here, it's very
difficult to find. There's no sort of spatial precognition there. It's pretty inhumane.
But it's really easy to code in forms. So, what the BART widget does and this is another
thing by Bret Victor is that it gives you a map with a to and a from button and you
drop it on the ones you want to go to. Then it shows you a list of the trains that are
coming in a great sort of Tufte style way. And it's so easy, right? It feels like there's
nothing there. Again, there is almost always a better way to represent a form. So whenever
you see a form that's genuinely lazy design. So we're back here, the fundamental web tension,
the boring and annoying. We've figured out that the answer to this is like looking at
content, right? The answer to making this not boring, this not annoying, the answer
to making interfaces is by focusing on content and by focusing on content, getting rid of
interaction. So, do not make me click, right? Why is Google Search great? It doesn't make
me click. Why is Google Calendar bad? It makes me click all the time, right? It's a really
simple metric to determine how well you're doing. So here's my shameless plug. You can
come talk to me and that's it. So feel free to ask questions to badger me. Sure.
>> [INDISTINCT] first of all. I was sort of curious about the speech initially providing
input for anybody and I guess not INDISTINCT] for me to see what I want rather than scroll
through a long list of pages and find what I actually want. So [INDISTINCT] speech actually
evolved is one of the natural date of input and say designing more user interaction around
speech. >> RASKIN: So, let me see if I can understand
what you said. You're saying that speech isn't a good form of input or that you don't find
that natural? >> Oh, it's very, very natural.
>> RASKIN: Oh, that is very natural. >> But I don't see a lot of innovation around
it, isn't it? >> RASKIN: Certainly. And I think it's because
two things. One, it's hard. And newer technology is getting better and the speed is getting
better. And two, it's because people sort of lose their head when they start thinking
about speech as a form or interface. And they immediately jump to speech is a good form
of input and output. But we know that speech because it's--speech is output because it's
not random access isn't good. But for whatever reason people like to combine those two and
just sort of go that way and so all those attempts before to have speech based interfaces,
use it for something it's good at but also something it's really bad at. And nobody seems
to like realize that just input would be great, right? And that having output on a visual
display. That would work wonderfully. And that's actually one of the things that we've
been playing around with, that you can type and as soon as you have sort of a, I can type
to do something, it makes a lot of sense to then have a, I can say something to do the
exact same thing. And so I guess that's the answer to your question. Sure.
>> One of the sort of tenets that we're engrained with is that recognition is easier than recall.
>> RASKIN: Right. >> And that seems to be a direct contradiction
to the idea of a command line top interface and, you know, you listed what you can type
in at the Google search box and said, well, maybe I missed a couple. What can you do with
30boxes? You know, you sort of you have to think of them all offhand.
>> RASKIN: That's right. >> So the ones you do know and if you take
the time to learn you can fly through it. >> RASKIN: Right.
>> But if you come into it fresh, you don't know what you can do. You don't know if you're
using 90% of their features or 1%. You just don't--you don't know what you don't know
to paraphrase one of our great leaders. >> RASKIN: Right. No, that's a great point.
And definitely deserves to be talked about. So I guess there are three answers and we'll
see if I can remember all three by the time I'm done talking. One is that word, right?
Has--you know what, the top 10 requests--oh, I'm sorry. The top--what is this--90% of the
requested features for Word are features that are already in Word. Which says something,
which says that this problem even if you're going the full blown graphical route with
visual reminders is not easy. But it also says that perhaps the way we do our graphical
reminders right now are not very good. So that's number one. Number two is that when
you--is the sort of the myth of designing for beginner and expert, is that most people
think like you need to have one interface for beginner and one interface for experts.
And they're sort of like GUIs are for beginners, command lines are for experts. But I think
that that's sort of false, right? That if you design it really well, then you can have
the same interface for beginner or for expert. So in the case of Google or 30boxes, like
your beginner won't use all those features but they'll still be using the same interface.
And as they learned in the linear fashion how to do one thing at a time, then they become
experts in this system. But there's no, like, there's no distinction between I'm using a
menu and I'm using a keyboard shortcut, right? It's the exact same interface. So which is
to say that there will be a linear learning process for an interface of that functionality.
And the last one to answer your question quite directly is that you need to take advantage
of recall--sorry, of--wow, my brain has turned off.
>> Recognition? >> RASKIN: Recognition. Thank you. And so
you have to give people hints as they use the system. I wish I had ENZO running right
now so you could see it going. But you need to do things like autosuggest. So as you start
typing spell check, SP, it will list all of the command names that have to do with SP
like spell check, right. And as you start typing along in--oh, in the 30boxes Calendar--oh.
No. That, there we go. As you type along in the 30boxes, they do do things where they'll
give you hints, like you might want to do this thing now. And it doesn't get in your
way. It's not like click who's like I see you're making a low cut, let me help you,
right. This one instead is just sort of tacit, ambient help as you go along. So you need
to take advantage of both of those. So, I guess, the part answer is one is that yes,
there will be a learning curve, and nobody will--or somebody won't know everything at
the beginning. But two, that's okay because you can sort of step them along one thing
at a time, and there's always just one thing they have to learn, not a whole new mechanism.
Guido? Hi, Guido. >> GUIDO: You make it seem so easy. Excuse
me. You make it seem so easy. In my experience and maybe I'm just stupid when it comes to
graphics design, it's really hard to just implement all those various sensible suggestions
you're making. I'm wondering if there's--there isn't something you can do by providing libraries
or toolkits because the existing toolkits all sort of emulate the bad way of doing things.
>> RASKIN: That's unfortunately right and something I don't know exactly how to solve.
Because we have this sort of cycle, and we saw it on the Web, right. Where--originally,
we were doing our desktop stuff and we had these very large, very powerful toolkits that
made doing this thing you'd already done very easy, right? We had this sort of what I called
the toolkit straightjacket. And then we hit the Web and all of a sudden we didn't have
powerful tools to make websites. So we saw a whole bunch of people tying to do all sorts
of new things because it was as hard to make something new as it was to make something
that they had seen before. So people felt that they had the liberty to make it. This
is why we see that there are great interfaces in games because they have the liberty to
make new interfaces and to do the thing they want because it's just as hard--they have
to build it from scratch anyway. And sort of, my answer is yes we need better toolkits.
Yes, we need widget libraries like jQuery which makes doing things easy. But a lot of
these in the real world comes down to realizing that you have to do a lot of your UI development
really far upstream. That if you wait to the end to try to do visual design, if you're
not doing it during requirements gathering, you're--as a product, it's just not going
to happen. So unfortunately, the answer is no. It's not easy at the moment. It really
takes work and it really takes dedication but I think the rewards are clear and they
pay off well. And if you do it upstream enough, it becomes possible to do. To get a good designer
involved really early on, one who doesn't just choose color blue. So, no--I wish there's
a silver bullet but there isn't. Hopefully, I mean, actually, the Web is great because
it really does make--making all of these things much faster. And it's much easier to do all
the kinds of stuff--I have been here on the Web and not in the desktop world. So, we're
better than we used to me. >> So on the team of reducing interaction,
so on the search box when I'm looking for an answer to a question, we're in Mountain
View today. >> RASKIN: Yeah.
>> I totally agree with you, right. Provide the answer...
>> RASKIN: Right. >> ...and a link which gives you the answer.
But what about exploratory task, like traveling to London and I have so many different things
I want to look for. I want to look for a ticket. I want to look for a hotel, things to do.
I mean, even one of those, like things to do, it might be museum, it might be London,
it might so on and so forth, right. >> RASKIN: Right.
>> There's a hierarchy things and I want all of them. It's not like at this point I would
want. >> RASKIN: Sure.
>> So what's a good... >> RASKIN: Well, I think there are actually
two sort of fundamental modes to interacting, right? There are searching and then there's
browsing. Searching is I know exactly what I list that I want, right. So if I was redesigning
sort of the Expedias of the world I'd be like, "Oh, I just want a search box and type I'm
going from here to there on so and so date." Search, done, right, I don't want in to interact.
Browsing is different. Browsing means I don't really know what it is I want to do. So in
that case, you're going to be using lots of visuals or lots of sort of interactive things
and be like, "Hey." Well, by interactive, I mean, not lots of clicking but a lot more
sort of processing of information to get to where you want to be. So, I mean, ideally,
I guess, the thing you'd want to do is to have somebody just say, like, "Here's your
itinerary. What don't you like about it?" But it's--it's not going to happen.
>> And there are two choices right. You're could have a placard page of it, oh, okay.
Here are things to do and here are things--information of a ticket, information on the hotels blah,
blah, like six different boxes in there. >> RASKIN: Sure.
>> Or you have like six links. Did you mean you wanted to look for things to do or did
you mean you wanted to buy tickets? >> RASKIN: That's right.
>> And either of those--neither of those seem very optimal. It's like...
>> RASKIN: That's right. So no, I think that's exactly right. So you're going to have to
design for those two different things. You're going to get two different looking interfaces
to accommodate them. Just like you get a--well, essentially, the difference between moving
around in that zooming space and just typing to find where I wanted to be.
>> Hi. I have a question about scrolling versus clicking. So, I totally see your point about
offering content when it comes to maybe content that could be interesting, but say it's health
contents specifically and you're offering specifics, say, you have a fire--you use Firefox
or you use IE or whatever other browser. As a user, for example, I won't--I don't care
if, you know, what is the content about IE if I use Firefox, right? So I can see the
advantage of using the link there. So, you know, do you use IE, click here, go to the
IE information rather than scrolling through the whole page, you know, and read the whole
information, what's your take on that? >> RASKIN: Well, two. One, you should auto
detect it anyway. But, abstracting from your particulars, in general, I think it's better
to have it all in one page anyway. So you can find it faster, right, to have all those
questions highlighted so you can use Control F and then do clever hiding, like, just have
people--if you want to drop people into a--what do they call the--an anchor, right, to that
part of the page. Like, putting info--I mean, there's always a tension between hiding information
to make it easier. I mean, that's what wizards do but everybody just hits next, next, next,
next anyway versus giving people information overload. And a lot of that is sort of intensive
information architecture and figuring it out. So it's--I don't know if there is like an
answer I can just be like, "Is this the answer?" But I generally find that people skew far
too much towards the--you have to click to go someplace rather than the "I'm going to
give you enough information on one page." And so, that's more of the point that in the
interface design, it's always a exercise of compromise. But there's--that's the cue. So
I don't know if that make sense. >> I have a question about the Control F issue.
You're talking about that a lot as an answer that people can just use the Control F but
I don't think my grandparents know that that exist or whatever possibly learn that that
exist. I don't think my dad knows that exists. I mean other than kind of in this industry,
I'm not sure how people--how do you expect people to find that and use that an alternative
to scrolling. >> RASKIN: Right. Sure. So I guess I would
put it in two ways. One, I think that's a failure of the browsers, right? Like, we need
to do a better job of getting people to use and to make it easier to find ways of doing
in page search because it's such a powerful tool. The other thing I guess I'd say--sorry,
I had it in my mind a second ago. Oh. Is that just because it isn't like feasible or obvious,
right, and people are talking in this world a lot about affordances, right. It has to
be visually there; otherwise, people will miss it. That was in fact--yeah, it was. Well,
to take one really simple example, the iPhone. People sort of hail it as this awesome bit
of innovation, which is incredibly intuitive, i.e., familiar that nobody know--that everybody
knows how to use instinctively. You pick it up and you use it. But that's not really true.
Nobody would pick it up and do this sort of pings thing, that's not a natural thing. Why
does everybody know how to do that? Why does it feel familiar? It's because, guess what,
they spent millions and millions and millions of dollars running advertisements showing
people doing this. So that by the time you got one, of course, you knew how to do this.
So remember when they're testing the mouse originally, they sat somebody down in front
of the mouse. This is a story that my father would tell me. They sat somebody down in front
of the mouse. They'd been using--she'd been using the command line for years at that point
and asked her to use it, right. They didn't say anything. Just did the thing you do when
[INDISTINCT] which is you sit back and you try really hard not to tell your user that
they're dumb as they can't use your interface. And so what did you do? She--first, she picked
up the mouse and tried to move it around, right? And that didn't work. Then, she flipped
it over and she's like, "Oh, hey, look, it's a ball. I'll roll it." Of course, it had disconnected
from its sensor, so that didn't work. She tried putting it on the screen, that didn't
work. She even did the Scotty things where you're like, "Hello, computer." That didn't
work, right, and she gave up. She's like, "I can't use this." Then, all it took was
somebody moving the mouse a little bit for her and then she could use it, right. So perhaps
what we need to be doing in the browser side is a little bit of outreach, right. Where
you'll be doing that Apple thing, doing that thing that games do where we have tutorials,
right, that lead you through like this is how you do things. I think that's the answer.
That search is such a fundamental thing--preaching to the choir, is such a fundamental thing
that perhaps we need be teaching people how to do that in the page. And that's a worthwhile
thing to do. >> Okay. Thanks. And I can add something to
this? >> RASKIN: Please.
>> Yeah. As I remember from the Humane Interface Book, Jef describes the computer called Cat
or something like that in which to search something you just press a key on the keyboard
and then start to type in what you need to search. So it's like a kind of incremental
search implemented. >> RASKIN: That's exactly right. And so--he's
right. If I have my way, if Jef would have his way, this sort of that search would be
the intrinsic thing for getting around on the computer would be a fundamental action,
right. It's pretty cool, right? Like, if you do test, it takes 3.5 seconds to move your
cursor to a screen--like to a character on the screen and click and go there, right.
With something like this incremental search which he called leap, you just hold and key
type where you want to go. So I want to go to the VE and over you type V-E and it will
be there. That takes 1.5 seconds. That's for on screen. So if you multiply that actually
by the amount of time you save, by the number of people--or per hour, times the number of
hours in a day, times the number of people in the U.S., and then you calculate the average
cost of employing those people for that time, just by saving that little bit of time which
gets multiplied so much that would save the U.S., if you fixed it, more money than spam
cost us right now, right, because it's such a fundamental action. So, I think that's a
really good point. Thank you for reminding me that, you know, if we're smart about it
and we make search into a fundamental thing, then we don't have that problem anymore.
>> Just really quick, since you brought up Jef.
>> RASKIN: Sure. >> When I was coming here, I hadn't read the
synopsis and didn't know who you were and then I saw your name, I was like, "Oh, Raskin.
What if that's Jef's son?" And sure enough, I looked you up on Wikipedia. And he spoke
here in this very room almost four years ago. So it's really neat seeing you up here. You're
a brilliant speaker and did a great job. >> RASKIN: Thank you. Thank you. Yeah, it's--as
I was telling you before, like, when I was young, I got--like, most kids got carried
around in a stroller. I got carried around in the original Macintosh carry case. So it
was like not really a choice, sort of like my destiny to do something like this, I guess.
>> That's great. >> RASKIN: But thanks.