Placeholder Image

Subtitles section Play video

  • [GONG]

  • LUKE WROBLEWSKI: Sorry.

  • It's not that often you find a gong behind you somewhere.

  • Like how often does that happen?

  • So you sort of have to take advantage of it.

  • Usually the sound I make when I start a presentation is a

  • little bit more like this.

  • [WHOOSHING SOUND]

  • LUKE WROBLEWSKI: That's a sound of the future, in case

  • you guys aren't familiar.

  • You may think the synthesizer is the sound of the future,

  • but that was the sound of the future in the '60s.

  • So today, that's what the future sounds like.

  • And what the future looks like these days is it

  • looks pretty small.

  • Oooh, foreshadowing.

  • But when you start talking about small things like

  • mobile, I actually think these things have a really, really

  • big impact, which is what I want to dive into today and

  • kind of talk about some of the ways we can manage what's

  • going on with mobile.

  • Look towards making great

  • experiences for mobile devices.

  • But at the same time, instead of using these things as they

  • exist today, really look towards what's possible going

  • forward through some of these experiences.

  • So I mentioned mobile is sort of a small thing.

  • But to kick off, I want to talk about a very big thing,

  • which is this idea of mass media.

  • So what's mass media?

  • It's any technology you can use to communicate with lots

  • and lots of people.

  • And you guys should be familiar with

  • these sorts of things.

  • The first form of mass media to hit our planet was print.

  • There's a bunch of different pieces around you.

  • There's some on the walls.

  • There's posters in here.

  • There's books, magazines.

  • This was the first way that our planet was able to take a

  • message and get it to many, many people across the world.

  • And print was around for a long, long time.

  • That was like around 1500.

  • It wasn't around until 1890 that the next form of mass

  • media came out, which is recordings.

  • So LaserDiscs, you guys probably have

  • a LaserDisc, right?

  • MiniDisc?

  • One MiniDisc player?

  • DAT tapes?

  • Wow, I'm dating myself.

  • After recording, cinema.

  • So we went to being able to share audio to now we can

  • actually share moving pictures.

  • Ten years after that, radio.

  • Now we can actually broadcast those audio signals.

  • So after this couple hundred year period of all we had was

  • print, all we had was print, every 10 years or so,

  • something new is coming out and really changing things.

  • And we think we live in exciting times now with the

  • internet and with self-driving cars and laser planes that

  • create 3D models of buildings.

  • Imagine if you were alive here and all of a sudden

  • recordings came out.

  • And all of a sudden, cinema came out.

  • And then radio, like audio moving through the air.

  • I don't know what the equivalent of the 1800s--

  • your brain popped or whatever.

  • What is it?

  • Blew my mind.

  • I don't know what they said back then, but they probably

  • thought it a lot.

  • Radio stuck around a long time.

  • That was around 1910.

  • It was about 40, maybe 45, years until the next form of

  • mass media came out, which is television.

  • And television also had a decent run, because it was

  • around 1990 or so that the internet really came out and

  • became the sixth form of mass media.

  • And nobody will really argue that the internet is a form of

  • mass media, a means to communicate with

  • lots and lots of people.

  • But there's a theory that came out from an ex-Nokia executive

  • called Tomi Ahonen, and he said mobile is the seventh

  • form of mass media to hit our planet.

  • And to me, this has really profound implications.

  • Because when we start to think about doing things like

  • designing for mobile or designing for the small

  • screen, this is sort of the association we have.

  • How do we take our internet-y things, our software-y things

  • and fit them onto these smaller devices, if you will,

  • these portable devices?

  • Now that's one way we could look at the issue.

  • But if we look at it at the scale of a transition from

  • something like radio to TV or transition like something from

  • TV to the internet, I think it's fundamentally a much,

  • much bigger deal and has a lot more implications.

  • As a result, it's worth looking at, is mobile really

  • the seventh form of mass media?

  • Or is Tomi smoking Nokia crack, which there's very

  • precious little of left these days, if you guys follow the

  • stock price?

  • So to understand if something is really the next form of

  • mass media-- is it really that big and important--

  • let's look at something small like babies.

  • This is how many babies come out every day on the planet.

  • So we figured out that algorithm.

  • I think it was a Google Project that

  • figured out that algorithm.

  • Aagh.

  • [LAUGHTER]

  • LUKE WROBLEWSKI: Unfortunately, this is how

  • many iPhones come out per day.

  • And I blame you guys for this one, but this is how many

  • Android devices are activated per day.

  • Add in the total number of iPod Touches and iPads, add in

  • the dwindling number of Nokias and the uber-dwindling number

  • of BlackBerry devices--

  • I feel so bad.

  • I feel like I still have to include them.

  • But every time you look at one of these charts, they're just

  • getting squeezed by iOS and Android.

  • So let's do the math.

  • How many is that?

  • It's like three million plus mobile devices entering the

  • planet per day.

  • When I started doing this sort of bit

  • around kids versus devices--

  • a year ago, I sort of put together a blog post comparing

  • how many kids are born per day to the amount of mobile

  • devices entering the planet-- it was about a million.

  • Over the course of the year, that number has gone up by

  • another two million.

  • So now it's an order of magnitude difference.

  • 300,000 children entering the planet per day compared to

  • three million devices entering the planet per day.

  • And because there's so many of these things coming out, the

  • rate at which they're spreading is tremendous.

  • The way that they hit mass market

  • penetration, if you will--

  • how long it takes for 40% of the US audience to have one.

  • Telephone took about 40 years.

  • Electricity and the computer, which you would think

  • everybody would want to electricity as soon as

  • possible, took about 15 years.

  • Radio, mobile phone, internet, again, some of these really

  • transformative things, took about five years.

  • But the fastest growing technology ever to hit mass

  • market penetration in the United States has been the

  • smartphone.

  • Took roughly three and a half years.

  • Right now, it's at 58% of the addressable audience in the

  • United States has a smartphone.

  • And it continues to grow.

  • It'll probably continue to grow until you hit saturation,

  • where every feature phone turns into a smartphone.

  • And that's not a lot of time to figure out

  • what to do with mobile.

  • Three and a half years is not the kind of opportunity the

  • telegraph companies had to figure out the telephone.

  • They had 40 years.

  • And the impact of this is if you look at what used to

  • happen in the personal computing market, this is what

  • personal computing market share looked like in

  • the first 15 years.

  • Anybody remember the TRS-80?

  • It had a tape deck.

  • So you guys remember TRS-80, but you

  • don't remember MiniDiscs?

  • Come on.

  • Talking to geeks here.

  • Eight-track?

  • Anybody remember an eight-track?

  • OK.

  • Thank you.

  • Geez.

  • Commodore Amiga, Atari.

  • Typical for a new technology.

  • A couple companies trying to figure out what is it.

  • What's the personal computer going to be?

  • To use the language of today, WTF PC is what I think we can

  • call this first 15 years.

  • The next 15 years is basically all Microsoft and Intel kind

  • of taking over the personal computing market.

  • But the past three to four years is where it really

  • starts to get interesting.

  • And here's the Androids, here's the Apples just ripping

  • into the personal computing space.

  • Because what people are doing on mobile devices is what they

  • used to be doing on their laptops, their desktops, their

  • PCs, when they got home or when they were at the office.

  • And so big.

  • Mobile is big.

  • That fits part of our definition.

  • The next piece is, can you communicate to it?

  • In order to be a form of mass media, you have to be able to

  • broadcast out to it.

  • And right now, there's six billion connections.

  • There's going to be 10 billion connections.

  • I suspect this will happen faster.

  • Pretty much every outlandish prediction they make about

  • mobile tends to come true a year or two

  • earlier than they thought.

  • And in this case, they is Cisco seeing like a 26X

  • worldwide traffic growth in mobile right now.

  • So they're saying in about two years, we'll have 10 billion

  • connections.

  • I think that'll happen sooner.

  • But we'll find out.

  • So there's lots of these devices.

  • You can broadcast to lots of people.

  • And frankly, this is the stuff that I think gets the most

  • interesting to me.

  • The little device that we carry in our pockets can do

  • everything all six forms of mass media that came

  • before it can do.

  • Can you browse the web?

  • Yes.

  • Can you watch TV shows?

  • Yes.

  • Can you listen to the radio?

  • Yes.

  • Can you watch movies?

  • Yes.

  • Can you listen to recordings?

  • Can you read your--

  • right?

  • So this little thing has essentially swallowed all six

  • forms of mass media that came before it.

  • Just like the internet can do what TV did, what radio did,

  • what cinema did.

  • So on and so forth.

  • So that's another indicator that this is actually a new

  • form of mass media.

  • Plus, it could do all this stuff that none of these other

  • forms of mass media can do.

  • Mobile is always with you, always on.

  • It can be used immediately at the point of inspiration.

  • It can be used sort of in a--

  • if you want to use the term, "augmented reality

  • context," you can.

  • But you're doing something in the real world, all of a

  • sudden you're networked.

  • You have your services and information, and you can

  • access them through this always on interaction.

  • So not only can it do everything all these other

  • forms of mass media could do, but it can do more.

  • Yet another indicator that we actually are dealing with

  • something very transformative, something very different than

  • just a smaller laptop, than just a smaller PC.

  • Yet whenever we make this transition, whenever we go

  • from something like radio to TV, what do we do?

  • We copy over all the things that we were doing before.

  • Sponsorships, the idea that somebody sponsors a program,

  • was a business model that was literally created for radio.

  • They went and iterated a whole bunch of different ideas, and

  • they couldn't figure out how to make money off of radio.

  • And then they came upon this sponsorship idea, which is

  • still on TV today, if you've ever seen an ad in front of

  • Hulu Plus paid subscription channel that you're already

  • paying for and they still give you ads on.

  • So that's still around.

  • Spokesmen are literally people who spoke for a product--

  • spokesman.

  • And these are the old time radio shows that made their

  • way over to TV.

  • I don't know how "Candid Camera" worked.

  • It was like "Candid Microphone" back then.

  • But there it is.

  • And when these things made the transition over to TV, this is

  • what they looked like.

  • What did they do?

  • They pointed a camera at people reading radio shows.

  • It took years before we realized the true magic of

  • television and what it could actually

  • do as a unique medium.

  • So it wasn't immediately clear that TV was not radio.

  • Similarly, print was around for hundreds of hundreds of

  • years, and those things that we see around us all the time

  • inside of print and we kind of consume on a daily basis are

  • still stuck with us, even when we go and design for the

  • internet today.

  • Many people will talk about how the web is not print, but

  • yet, we still have these conversations about pages,

  • about layouts, about typography, about graphical

  • ads, and things like that.

  • Stuff that's really inherent from the print world.

  • But the web is not print.

  • And similarly--

  • guess where I'm going with this--

  • mobile is not a desktop PC.

  • But this is a very common transition.

  • So common, in fact, that I think it's totally

  • understandable why we're trying to adapt what we

  • already know and try to fit it into this new thing.

  • Scott Jenson, who some of you may know, used to work over

  • here on some of the mobile things.

  • Before that, he was over at the Newton

  • team, of all places.

  • But he lays it out as, it's very common for us to copy

  • what we were doing before, gradually extend it, and then

  • finally figure out something new.

  • It takes a while for us to figure out what sticks inside

  • of something different, because

  • it's a natural process.

  • As long as we're sort of cognizant of this natural

  • process that we're going through, I think it's OK.

  • It's when we aren't aware that what we're actually doing is

  • importing our ideas from somewhere else and trying to

  • fit them into something different

  • that we run into issues.

  • And this is the thing that I still struggle with very much

  • on a personal basis.

  • I oftentimes find myself putting something into a

  • mobile experience that is just stuck in my head from 20 plus

  • years of the internet or 20 plus years of desktop software

  • or GUI metaphors and things like this.

  • And I put it in there, and we make it out.

  • And then we actually start using it and see what happens,

  • we're like augh.

  • It wasn't the right thing to do.

  • So what does this process look like?

  • I don't think I need to convince you guys that mobile

  • is a big deal.

  • You get it, right?

  • But Paypal numbers sort of illuminate the story.

  • Yeah, OK, mobile payments, sure--

  • $4 billion, last year, $14 billion.

  • This is the kind of thing-a-ma-who

  • we're talking about.

  • What do you call those-- hockey stick curve--

  • in the venture world?

  • And the other interesting thing about this.

  • Remember, I said every time there's a number that comes

  • out, it ends up becoming bigger.

  • So Paypal was predicting they'd hit $8 billion when

  • they were in the beginning of 2012.

  • Then they said it's going to be $10 million.

  • And then they said it was going to be $12 billion.

  • And they ended up with $14 billion over

  • the course of 2012.

  • The other really common thing you get is you hear people

  • saying, oh, well, conversion's lower on mobile.

  • Or people won't do X, Y or Z on mobile because the

  • screen's too small.

  • It's a different kind of thing.

  • And it's actually very common in the e-commerce world to

  • talk about conversion being lower on mobile.

  • But I think a lot of that has to do with them not really

  • designing uniquely for the medium.

  • Because when you do, you can actually have higher

  • likelihood to buy.

  • You can have higher likelihood to subscribe.

  • You can actually end up with more engagement.

  • And it boils down to, are you actually thinking about it as

  • a unique thing, or are you porting over what you were

  • doing before?

  • And other companies are going to sort of be forced to figure

  • this out, even if they don't take the time to invest.

  • Actually, this just happened recently to my knowledge with

  • one of the Google products, which is Chrome.

  • So now Chrome has seen mobile grow like crazy, so all of a

  • sudden Chrome for Mobile becomes a much bigger deal

  • than Chrome for the desktop.

  • And I'm sure that's happening in other products as well.

  • But 60% of Twitter users are now on mobile.

  • 70% of Pandora users are now on mobile.

  • Other companies, huge mobile growth.

  • And I think it's worth looking at this at a big level.

  • So let's look at a very large website.

  • No, not Google, but Facebook.

  • And this is the past two years of monthly

  • active users on Facebook.

  • Anybody notice anything wrong with this curve?

  • PS, by the way, they had an IPO right around here.

  • It's flat.

  • Who thinks Facebook is growing?

  • OK, like one guy.

  • They actually are, but this is what's happening right here.

  • So all their non-mobile use is essentially

  • flat for two years.

  • And all of the growth is happening in mobile.

  • And this moment where these two lines intersect I think is

  • really, really interesting.

  • So I've given it a name, because I think it's so

  • interesting, which is when your monthly active use or

  • whatever key metric you're focusing on switches bits.

  • When you cross this mobile line, all of a sudden,

  • everything sort of changes pretty fundamentally.

  • And I'll talk about that in a second.

  • The other really interesting line on Facebook's chart is

  • this one, which is the mobile only audience.

  • This is people who only access Facebook

  • through mobile devices.

  • And that has been the fastest growing population on there

  • end for quite a while.

  • In fact, there's entire countries where a huge chunk

  • of their audience is a mobile only audience.

  • And what we're starting to see across the world is that many

  • people's first time internet experience is

  • through a mobile device.

  • They're sort of bypassing the desktop, laptop internet and

  • coming online with a mobile device in hand as the first

  • time thing.

  • And this quote from Mark I think really summarizes it.

  • It's sort of the second part that intrigues me. "We are now

  • a mobile company." Because previously, Facebook always

  • ran around and said they're a web company.

  • And again, here we are at Google.

  • Google is a web company.

  • Was.

  • Maybe is shifting now.

  • But think about the transformative nature of going

  • from "we are a web company" to "we are a mobile company." And

  • talking with lots of companies around the valley, you hear

  • this story over and over again right now.

  • So I don't know if you guys saw the

  • news from Zynga yesterday.

  • They essentially laid off 520 people, and they're dead.

  • They're now a mobile company.

  • Kind of late to figure that out.

  • God bless them, let's hope they can do it.

  • But they just hit this moment where they said we are now a

  • mobile company.

  • It's the only thing that matters to us.

  • But crap, we had to lay off half the company

  • to figure that out.

  • And there's other companies who shall remain nameless that

  • are seeing this same sort of transition.

  • And I think it's really hard to do, honestly.

  • I can tell you that in the Facebook world, this was not

  • an easy step.

  • Because what happens organizationally, at least

  • from my outside perspective now, thank God--

  • from my outside perspective is people hear it, but

  • they don't do it.

  • OK, mobile [INAUDIBLE], uh huh.

  • Da, da, da.

  • No, we really got to do it.

  • Uh huh, OK.

  • No, no, no.

  • Da, da, da.

  • And it's not until something really dramatic happens that

  • people really take a very large shift.

  • So yeah, it's a big transition, and it's

  • a really big deal.

  • So if we start to think about mobile at the scale of a new

  • form of mass media, I think that gives it enormous weight.

  • If we look at it as this transformative force that's

  • changing some of the largest internet companies in the

  • world to mobile companies, this is the scale we're

  • talking about here.

  • I don't think it makes sense to really think about this as

  • a small screen anymore.

  • I think it has to really fundamentally change the way

  • you think about a lot of things.

  • And that includes design.

  • That includes development.

  • That includes all kinds of stuff.

  • And the other scary thing about that is a lot of our

  • instincts that we've honed and learned over the years are

  • just flat out wrong.

  • They seem like it'll work.

  • Oh, it's kind of the same.

  • Oh, I know all this stuff.

  • And we put it in there and try to make it work, and we

  • ultimately turn out to be wrong, especially the early

  • stuff we were doing for mobile.

  • So with that kind of in mind, what I want to do is take a

  • look at what is some of the stuff we've been doing?

  • What are the things that are sort of inherent in our

  • mindsets and our approaches?

  • How do we take that and adapt it and optimize it for this

  • sort of mobile world today?

  • And last, but not least, what does that give us in terms of

  • ways to look towards the future?

  • What are ways that we can look forward?

  • And I propose the Luke W helmet instead

  • of the Google Glass.

  • Its actually a little bit more immersive.

  • [LAUGHTER]

  • LUKE WROBLEWSKI: And people won't look at you funny when

  • you wear it.

  • So what do we know, what have we been doing, how do we adapt

  • and optimize it, and what does it tell us about the future?

  • And I want to look at this transition in places that

  • often get overlooked.

  • I have this fascination with things that I consider to be a

  • linchpin of web experiences.

  • Things that are enormously critical to like foundational

  • elements on the internet, but often get ignored and

  • bastardized and not thought of.

  • Because people don't really think about them, because

  • they're not interesting.

  • They're not like these super fascinating challenges.

  • Instead, they're really boring, lame and we think

  • we've solved it.

  • But there's huge opportunities there.

  • So what kinds of things am I talking about?

  • I think things that are critical

  • to conversion funnels.

  • Things that are critical to the point where actually

  • something happens that creates value for both your customers,

  • your users, and your service.

  • And one of those things that's enormously overlooked is this

  • login thing.

  • And you could say, Luke, what's wrong with the login?

  • Does anybody know what a login screen looks like?

  • It's two input fields, a check box that I swear does nothing.

  • Says it'll keep me logged in.

  • It's totally put there as like a little decoy to

  • mess with your head.

  • Because you check it, and it doesn't keep logged in.

  • And then it has a button.

  • So it's like two input fields, a check box, and a box.

  • What is there to talk about with this?

  • Well first of all, this is a very, very broken system.

  • Lots of authentications per day.

  • I think something like 95% of US companies use username or

  • email and password as an authentication mechanism for

  • their service.

  • Like everybody is doing this.

  • And that means we are logging in all the friggin' time.

  • And some of us-- probably no one who works at Google,

  • because you have to pass like 17 tests to get hired here--

  • you guys have probably never forgotten a password.

  • But other people do.

  • Other people do.

  • In fact, when I was at Yahoo, we didn't have

  • tests to work there.

  • That explains lots of things.

  • [LAUGHTER]

  • LUKE WROBLEWSKI: Maybe Marissa added the test now.

  • I don't know.

  • You definitely can't take the test at home.

  • You have to take it in the office.

  • I know that part.

  • [LAUGHTER]

  • LUKE WROBLEWSKI: No take home tests.

  • So when I was at Yahoo, 5% to 10% of the people that went to

  • try and sign in to Yahoo actually failed to

  • log into the site.

  • And the time, back then-- this was like seven and eight years

  • ago during the days of LaserDiscs and MiniDiscs and

  • eight-tracks and TRS-80s--

  • back then, Yahoo was 15% of internet time.

  • It was the largest site out there.

  • And 5% to 10% of the sessions for the largest site on the

  • entire internet resulted in password errors.

  • If you're doing anything with internet services, this is the

  • number one issue that people have.

  • So I personally contend that login screens are

  • fundamentally broken.

  • And I was trying to scratch my head and understand why.

  • Why do people have problems with these things?

  • It doesn't make any sense to me.

  • It's so clear.

  • Everybody knows that the way you do usability is you write

  • things out for people.

  • You sort of like explain it in text.

  • That's how you make things usable.

  • So they've done that for this login screen.

  • And you have to use one letter, one number, one

  • special character.

  • But not these characters, because

  • they're not special enough.

  • If it's special, it can't be first or last.

  • That's OK.

  • You can't have what are called sets.

  • So like if two character sit next to each other and they're

  • the same, that's a set.

  • And that is not good.

  • You can't have that.

  • Also, be aware that characters in the first, second, and

  • third positions cannot be identical, neither can the

  • second, third, or fourth positions be identical, nor

  • the sixth, seventh and eighth positions be identical.

  • And you can't use Texas, child or the months of the year,

  • because that's the first thing hackers try.

  • Have you seen these guys?

  • So all the guys, they're like hacking these things.

  • The first thing, they're like Texas child, and boom, they're

  • in 80% of the time.

  • So do not do that.

  • And if you ever make it through this, realize that the

  • past eight times you solved this puzzle, you can't use

  • that answer again.

  • Again, Google employees, no problem.

  • But the rest of us, I can see how maybe we'd struggle with

  • some of these challenges.

  • And so it's disheartening to me when I see people going

  • from the desktop laptop side of the coin to making a mobile

  • experience, and what do they do?

  • OK, let's make sure the login screen fits

  • on the smaller screen.

  • This is what I mean by approaching this as a small

  • screen problem.

  • You see this over and over again with like every single

  • design pattern that's out there.

  • It's like, how do we make our login screen fit

  • on a smaller screen?

  • And all those problems that I just walked you through now

  • are on a smaller screen.

  • Congratulations.

  • The mobile revolution is here.

  • But it's actually worse than that.

  • So here's our friends over at eBay.

  • And they have taken the time to create a mobile web

  • experience.

  • You can go buy, browser, and shop on things.

  • In fact, as I mentioned earlier, they're doing like

  • $14 billion in Paypal and $14 billion in global

  • merchandising volume on mobile.

  • So they're doing really well.

  • But when they created their mobile web experience, they

  • left something off the sign in screen, which is this, I

  • forgot my user ID or password.

  • And even if you try to login, it says na, na, na.

  • No, guess again.

  • So I observed this, and I went and talked to a very large

  • e-commerce company that's doing really well in mobile

  • who shall remain nameless.

  • And I pointed out to them, I said, hey, you guys don't

  • have-- they're in the same situation--

  • you don't have this get back my username

  • and password thing.

  • Are you seeing any issues with that?

  • I would expect you'd see issues.

  • They're like, oh, yeah, we actually get a lot of customer

  • support volume for that.

  • A lot.

  • I'm look, oh, well, how much?

  • So I will ask you, what percent of their customer

  • service calls do you think were related to login issues?

  • What percent?

  • AUDIENCE: 50.

  • LUKE WROBLEWSKI: 50?

  • AUDIENCE: 70.

  • LUKE WROBLEWSKI: 70.

  • AUDIENCE: 90.

  • LUKE WROBLEWSKI: 90.

  • 90% of their customer service inquiries.

  • This is the thing I'm talking about.

  • Who thinks about the login screen?

  • Nobody thinks about it.

  • You know who thinks about it?

  • Your poor customer service department that every single

  • time you get on the phone.

  • Yes, OK, I understand you can't get your password.

  • No, no.

  • Do you have a desktop computer?

  • Yeah, OK, so get your desktop computer.

  • OK, now take the Coke out of this holder.

  • No, that's not a drink holder.

  • That's a CD drive.

  • OK.

  • So recently, eBay put in this I forgot my user ID or

  • password thing.

  • And we could say, oh yeah, eBay, weren't they made in

  • like the '90s?

  • Isn't this just like crufty old stuff?

  • How can we expect them to figure things out?

  • What about our Web 2.0?

  • Was Web 2.0 a thing anymore?

  • I don't think so.

  • It's like the eight-track of the web world is Web 2.0.

  • People make jokes about it.

  • But LinkedIn used to be a Web 2.0 thing.

  • And they have this touch.linkedin.com experience

  • where you can go and access LinkedIn on mobile devices.

  • And again, they have a really nice feature here called

  • forgot password, which when you try to log in to LinkedIn

  • on the mobile device, [BUZZ]

  • please try again.

  • Now let me ask you guys a question.

  • When do you go to LinkedIn?

  • What takes you to LinkedIn?

  • AUDIENCE: Email.

  • LUKE WROBLEWSKI: Email.

  • AUDIENCE: You're looking for a job.

  • LUKE WROBLEWSKI: If this guy needs a job, I got a couple

  • things for you later.

  • [LAUGHTER]

  • LUKE WROBLEWSKI: Everybody else,

  • hopefully happily employed.

  • But does anybody go to LinkedIn

  • when they get an email?

  • Yes.

  • Is that the primary way you go to LinkedIn?

  • Somebody sends you an email?

  • Do you check your email on your phone?

  • Yes?

  • One of you?

  • Everybody else checks it on Glass.

  • Oh, yeah.

  • Hold on.

  • Uh huh.

  • OK.

  • So this happens to me all the time.

  • This is the only way I go to LinkedIn.

  • So I get an email.

  • It's like Tim wants to connect with you.

  • All right.

  • I love Tim.

  • I want to connect the hell out of Tim.

  • So here I am.

  • Me and Tim are going to connect.

  • It's going to be awesome.

  • So I click Accept.

  • I have the app.

  • [LAUGHTER]

  • LUKE WROBLEWSKI: I have the app.

  • What do I do?

  • This is a legitimate question?

  • What do I do?

  • I say no thanks, and I lie.

  • And they set a cookie that says he doesn't have the app.

  • So next time I go to this link, they bring up the thing,

  • get the app.

  • So this happens, and I say no thanks.

  • So I lie.

  • And then I get this spinning little thing, because they

  • actually are loading a dust.js template where they serve an

  • empty body tag and automatically inject through

  • JavaScript the entire HTML page.

  • So it's like a 30, 45 second process while the thing spins.

  • And then I get the login screen.

  • And I'm like, I have no friggin' clue.

  • So I try and try and try.

  • And then this happens.

  • [LAUGHTER]

  • LUKE WROBLEWSKI: It's not that it's hard to read [MUMBLES].

  • It's that it doesn't even fit!

  • I can't even solve it if I wanted to.

  • Nobody looked at this on an Android device.

  • Nobody went to actually see that you can't physically see

  • to CAPTCHA that you're trying to just solve in your mind.

  • And so this is frustrating.

  • And I think it's especially frustrating when you think

  • about what's the number one way you go to LinkedIn?

  • Through an email.

  • Where are we checking our email?

  • On our phones.

  • You'd think this would be an important critical flow to

  • those guys.

  • And I've been on their butts a while about this.

  • Lovely people over there.

  • Many of them I used to work with in the past.

  • And they added a little forgot password

  • link, which is fantastic.

  • So what's the moral of some of these stories here?

  • The moral of the story is what Steven Hoober says in his

  • little book, "Mobile Interfaces." "Mobile should

  • not be a dumbed-down, limited experience."

  • Because what happens in a lot of these situations, people

  • are like, oh, nobody's going to try to recover their

  • password on mobile.

  • It's too hard.

  • Oh, we'll just leave that feature out.

  • Why do they want it on this small screen?

  • They're not thinking of it as a complete experience.

  • They're not thinking of it part of this holistic thing.

  • And so what they do is they just end up removing things

  • that they think aren't important.

  • And if it's critical on a seven-inch screen, if it's

  • critical in a 15-inch screen, if it's critical on a 30-inch

  • screen, it's probably critical on a four-inch screen too.

  • So that's one thing.

  • Now to give LinkedIn some credit, they've built this

  • touch.linkedin.com experience, and they've

  • done some cool things.

  • So small stuff like when they're collecting an email,

  • they'll use type email, which will give you this nice little

  • keypad, saving you some steps with an at and a dot.

  • If you do fun things like turn auto capitalize and auto

  • complete off, which takes half a second in code, you will

  • make people's lives awesome.

  • Similarly for password.

  • But password's actually a bigger problem.

  • So password here, this is what happens with password.

  • You're going to type in this password, and you're looking

  • down at this little keyboard.

  • This little virtual keyboard.

  • And you type in a letter, and then you look up right after

  • you type it, and it turns into a dot.

  • And then you go down and you type it, and it

  • turns into a dot.

  • You go down and type it, and it turns into a dot.

  • And I think this is an issue, because frankly, when you

  • can't see what you're typing, it's really hard to know if

  • it's right or not.

  • And many studies now have shown is that masking

  • passwords--

  • there's no data that supports masking passwords actually

  • increases security.

  • There's no study that says, hey, by putting the dots

  • there, you've increased security by like 75%.

  • But there are lots and lots of studies that say people fail

  • to login, and that costs you money.

  • 75% of the time, when somebody goes into a recover password

  • flow in e-commerce, when they have a shopping cart full,

  • they fail to buy.

  • And as our friend Jakob Nielsen says,

  • it's worse on mobile.

  • Because "mobile is a magnifying lens for your

  • usability problems." And by the way, you cannot do this to

  • just any man.

  • Look at how smooth his skin is.

  • [LAUGHTER]

  • LUKE WROBLEWSKI: It is just like perfect.

  • If somebody did this to me on a slide, I'd be like oh, God!

  • Get it off there!

  • But this man, his complexion is as rich as his mind.

  • [LAUGHTER]

  • LUKE WROBLEWSKI: So "mobile is a magnifying lens for your

  • usability problems." If it's a problem on a big screen where

  • you're seeing it comfortably--

  • you got a precise mouse cursor, a full keyboard.

  • You got your, I don't know, whatever the

  • hell else you have--

  • 30-inch giant monitors, cables.

  • If it's a problem there, it's going to be a much bigger

  • problem when all you've got is a little

  • thumb and a tiny screen.

  • And this is what I mean.

  • That "mobile is a magnifying lens for your usability

  • problems."

  • Companies that have been doing mobile stuff for a while have

  • figured out this login thing is a problem.

  • So here's Facebook.

  • If you try to log in on mobile on Facebook, they say, hey,

  • that was wrong.

  • We're going to show you your password in plain text.

  • Don't worry.

  • It's still secure.

  • It's cool.

  • Or we can send you message.

  • So you if you hit Send a Message, they

  • collect an email or phone.

  • And then you get a link, and you just log in

  • right then and there.

  • Box.net has gone a little bit further, and they actually

  • include a button that says Show the Password, so you can

  • literally see what you're typing in there.

  • Personally, I think they should flip the bit and make

  • it high password, because of this idea of smart defaults.

  • That is the defaults that are set in place are the things

  • people use most of the time anyway.

  • And the rationale for this is like let's focus on creating a

  • good experience here rather than this

  • arbitrary pseudo security.

  • And when I say pseudo security, if there is a man

  • with a mysterious handlebar mustache, trench coat behind

  • me as I'm logging into my phone, you know what I can do?

  • Works.

  • You know the other thing?

  • There's a virtual keyboard right there that I'm typing

  • into that makes the letters big when I tap on them.

  • So if somebody has a camera pointed at my phone-- this is

  • the scenario hear all the time.

  • So if someone has a camera pointed at your phone, they

  • can get your password.

  • Yeah, well they can see you typing on the keyboard and get

  • the same thing.

  • So it literally is doing nothing to a certain extent.

  • You could argue about it.

  • But I personally believe this is an opportunity to create a

  • better experience, again, because mobile's different.

  • It's not like a PC that's sitting in front of your desk.

  • It something that's in your hand.

  • You can move it around.

  • You can put it wherever you want.

  • You can pivot your body, what have you.

  • So it has different things.

  • So my current startup has a little product called Polar.

  • And what we did when we created our login screen is I

  • sort of put my money where my mouth is.

  • And what we have is by default,

  • your password is visible.

  • You can always hit hide if you feel compromised and you want

  • to get rid of it.

  • And so we launched this.

  • I wrote a little article about it.

  • And frankly, I was really, really nervous, because I

  • thought I was going to get skewered.

  • I expected people to be like, Luke, you showed a password?

  • Dummy.

  • Don't you know the dots?

  • Don't you know about the dots, you dummy?

  • It's totally what I thought was going to happen.

  • And I was really surprised that a lot of people started

  • coming out of the--

  • what do we want to call this-- the web security closet, if

  • you will, and started saying, hey, we did this.

  • And we didn't have any negative security

  • implications.

  • We rolled it out for our large clients.

  • Steven, who I reference earlier, "20 million users for

  • Sprint removed masking and duplication of password.

  • No issues.

  • Tested.

  • Well measured." And then I had my mind blown, because it

  • turns out somehow Yahoo did this.

  • Maybe while I was there.

  • I have no idea.

  • But Yahoo eliminated the second password field,

  • displayed full password upon form submission.

  • And not only was there no security issues, but they

  • actually had very significant improvements

  • to the overall flow.

  • There's other things going on there, but double digit

  • improvements is not a small thing.

  • And to go back to our friends over at LinkedIn, they just

  • launched a new mobile app right here.

  • And what you'll note is you can go in

  • here and see password.

  • But they have this funny little eye here, which if you

  • tab, you can see your password.

  • And then you can hide it if you want as well.

  • Progress, in my humble opinion.

  • And the big picture here is rather than blindly copying

  • what we've been doing on the desktop, in the laptop world,

  • let's literally think through what makes

  • sense for these devices.

  • They're different.

  • Different things apply.

  • Other nice things we can do on login forms to sort of deal

  • with some of these issues is that we can use input masks.

  • So if you have to log in with an @me.com email address or an

  • @gmail.com email address, we just create an

  • input mask for @me.com.

  • And then as you type your letters, if you hit an at or

  • something like that, it will just ignore it, and you don't

  • even have to bother with shifting over the keys and

  • doing it here.

  • Twitter uses this on their sign in screen.

  • The way you sign in with Twitter is an at handle.

  • So they put the at in an input mask.

  • And as you start typing your characters, they take care of

  • that for you.

  • So input masks are another little trick that we can use.

  • So we've got input types.

  • We've got input masks.

  • Another little thing-- and I keep saying little things, but

  • together, they add up to a big package, which

  • we'll see in a second.

  • Small little things that you can do to make this experience

  • better in aggregate actually can make the

  • experience a lot better.

  • So Quora has this thing if you try to log in with an email

  • address that it doesn't know, it says, hey,

  • no account for this.

  • If you want to create one, sign up right now.

  • So the spare you entering a password and hitting the

  • Submit button, and then getting an error back and

  • going through that whole flow again.

  • The other thing they do, which is a little bit more

  • aggressive but also very interesting, which is let me

  • log in without a password on this browser.

  • And that is checked by default.

  • Remember, the smart defaults ideas that I

  • talked about earlier?

  • So by default, the first time you log in, this is checked.

  • And the second time you come in, you're going to have just

  • a little picture to tap.

  • No username.

  • No password.

  • No button.

  • All you do is tap your picture, and you log in.

  • And you can always exit out of this, or you can go exit out

  • of this on another browser, what have you.

  • But they've basically taken the login form and turned it

  • into a picture, which is pretty neat.

  • Especially on a personal device like your phone.

  • And one of things that I hear from a lot of people is, oh,

  • OK, well this makes sense for a social little Q&A app like

  • Quora, but it doesn't make sense for blank.

  • Because I work on insert big hairy thing I think is complex

  • problem here.

  • I work on finance.

  • I work on health care.

  • I work on whatever.

  • But here is a company that's trying to reinvent

  • what your bank is.

  • This is Simple.

  • And here, where you create the credentials to go and access

  • your bank account, what do we see?

  • There's the Show Password button.

  • And in fact, they've even gone further, because they say

  • password needs a passphrase instead of a password, because

  • passphrases are easier to remember and more secure than

  • traditional passwords, da, da, da, da.

  • So here is a financial institution--

  • big hairy complex whatever thing you want to call it--

  • actually acknowledging this is a problem and working to

  • resolve it.

  • Now if we pull all these things together, remember I

  • said a couple of small little things.

  • But together, they actually create a pretty interesting

  • way to optimize and adapt something as simple as the

  • login form.

  • So A, we're not going to remove critical features like

  • I can't figure out how to sign in.

  • We're going to use input types and attributes, types equals

  • email, type equals password.

  • We'll show the password by default, but we'll

  • let people hide it.

  • We will be flexible in what we accept.

  • So you can sign in with an email or full name here or

  • email or username within different situations.

  • We'll save passwords, if possible.

  • And when you actually go to log in on a screen like this

  • here on our little Nexus S or whatever

  • this phone is called--

  • Nexus S?

  • The Spring one?

  • What was the Sprint one?

  • The S?

  • All right, if you guys don't no, I don't what to tell you.

  • [LAUGHTER]

  • LUKE WROBLEWSKI: OK.

  • This is an iPhone.

  • [LAUGHTER]

  • LUKE WROBLEWSKI: So we're on our iPhone here.

  • And you enter your email.

  • Immediately can tell you we don't know who you are.

  • Save you the problem of entering your password and

  • hitting Submit

  • If you enter a valid one, great.

  • We can sort of show you you're on track.

  • Luke, come on in.

  • You enter your password.

  • We're going to show it to you by default.

  • But if there's a mysterious guy behind you,

  • you just hit Hide.

  • And depending on your security tolerance, maybe you have it

  • Show versus Hide as the button.

  • I personally say, here's this giant keyboard, which is much

  • easier to read, especially when it illuminates letter,

  • but whatever.

  • Remember Me is checked by default, so the next time you

  • log in, this is what the interface looks like.

  • And notice I've created this X out to be much bigger because

  • frankly, people have much larger fingers than Quora

  • thinks they do.

  • So we have to design for that when we create these mobile

  • experiences.

  • And here, login is essentially just a single tap, and ta da,

  • you're in the experience.

  • So they've taken this whole thing of logins, usernames,

  • passwords, down to a single tap.

  • And these ideas, I've been showing

  • them for mobile devices.

  • But there's absolutely no reason we can't do this on

  • desktops, on laptops, on tablets, and God knows what's

  • coming next.

  • And speaking of God knows what's coming next, we can

  • really think about this authentication experience

  • differently in mobile because we have different

  • capabilities.

  • We're not limited to the sorts of things we can do on the web

  • and on a desktop or laptop computer.

  • For instance, the mobile device is a phone.

  • Phones can send text messages.

  • We often use phone numbers as authentication, as

  • identification for people.

  • So what you can do is hit the button to sign in, and it will

  • actually send an SMS message in the background-- subscribe

  • to SMS notifications.

  • And if we have that record in our database and we can

  • confirm you're in possession of the phone, we'll

  • just let you in.

  • You could do this seven years ago in WAP.

  • Now there's competing standards on this, so it's a

  • little mucked up.

  • Another interesting approach to login.

  • This is the Windows phone, which has very heavily

  • influenced what Microsoft has done with

  • Windows 8, in general.

  • And this is fascinating to me, because it's sort of like a

  • mobile first operating system design, which I don't know if

  • we've necessarily seen.

  • But one of the things these two devices have in common or

  • these two systems have in common is they're both touch

  • interfaces.

  • And so the way you log into a Windows 8 machine, they have

  • this feature called picture password.

  • And the way picture password works is you upload a photo,

  • maybe of your family, and then you make a couple of gestures,

  • like circle or a line or another gesture you

  • can make is a tap.

  • And now you've created a picture password.

  • So this is your computer.

  • Remember, this isn't logging into one website.

  • It's logging into your entire computer.

  • If you want to switch the password, you can.

  • Or if you want to, what you can do is use your gesture.

  • So what you do is you circle the father-in-law, you connect

  • the two sisters, and you tap the mother-in-law on the nose

  • and ta da, you're in.

  • You've just logged into your computer.

  • And I keep using this phrase, and I'll use it again with you

  • guys, is I think this is Microsoft taking every humane

  • approach to login.

  • Because what's more human?

  • Like (SINGS0 drawing a picture of my family, punch the

  • mother-in-law in the nose.

  • I'm in!

  • [LAUGHTER]

  • LUKE WROBLEWSKI: Or cannot use Texas, child, special

  • characters, front, back, second third fourth character

  • cannot match, sets, two characters can't be the same.

  • [BUZZ]

  • That feels very robot to me.

  • And this feels very human.

  • And again, at this point, people will be like, well

  • dummy, that's like kindergarten security.

  • And let's look at that for a second, because I don't like

  • to be called dummy that often.

  • Especially when it sounds like that.

  • What movie is that from, by the way?

  • I've turned that into a thing I say, and I have no idea.

  • It sounds like it's from some movie.

  • Anyway.

  • So do you have a bank account?

  • Four digit, five digit pin?

  • Here's how many permutations if you have a four-digit pin

  • and for a five-digit pin to get into your bank.

  • So from a brute force attack, here's how many combinations

  • people have to try until they can get to it.

  • If we change that to an alpha character, an A to Z character

  • instead of numerical character, we drastically

  • increase the number of permutations somebody has to

  • go through.

  • Typical complex character password you find on the web.

  • They have enforced the number of character limit, so you

  • can't go below three here.

  • And you can use numbers or alpha characters, which really

  • increases the number of permutations against a brute

  • force attack.

  • Here's how many permutations you get with a Microsoft multi

  • gesture password.

  • And I think this is a nice example of usability and

  • security are not at odds with each other.

  • It's not like this trade off you have to make where you can

  • either be secure or you can be usable.

  • Pick.

  • That's all you get-- one or the other.

  • I think you can actually do things that create a better

  • experience and increase security at the same time.

  • You just got to sort of work together instead of clinging

  • to these old systems.

  • And can you do this on the web browser, since we talk about

  • web things?

  • Sure.

  • You need Touch Gestures, which you can get through a Touch

  • Events API, that Chrome, and Android WebKit and all these

  • other guys have, and now Chrome on the desktop too.

  • You got image upload, which is available in iOS 6.0 and above

  • and Android 3.0 and above where you can actually grab an

  • image from the camera or from the gallery and ta da, you've

  • actually created this picture password

  • thing on the web browser.

  • And speaking of Android, your OS has a similarly interesting

  • thing for login.

  • It's called Face Unlock.

  • And what you basically do is you smile at the phone, and so

  • it discerns that you're friendly.

  • So it uses these dots to make sure you're actually friendly.

  • And once it determines that you are, you have now created

  • a facial recognition unlock screen.

  • So if someone else pretends to be friendly to this computer,

  • it can knock it out and say no.

  • But then if you go and look at it--

  • here we go--

  • instantly in.

  • And it should say it works.

  • Now if you doubt the security of this approach, rest assured

  • this man's phone was not able to be

  • foiled by a clever lookalike.

  • But again, this is a really interesting way

  • to think about login.

  • Just look at the phone.

  • You're in.

  • Where is the username?

  • Where's the password?

  • Where's the alphanumeric pin?

  • Where's the swipe-y gesture weird thingy that Android

  • devices have?

  • Just look at it, and you're in.

  • Could you do this in the web browser?

  • Well, for that, you need Getusermedia API, which is

  • actually in Chrome 25.

  • I think they're putting it into Chrome 18 for Android,

  • and it's in Firefox Nightly, and it's in Opera.

  • And one other little example.

  • ATMs in Japan have this really interesting thing where you

  • are the cash card.

  • So instead of bringing around an ATM, you can use biometrics

  • to get into your bank.

  • And there are techniques which you can actually scan

  • fingerprints when you touch a smartphone.

  • And you can also do things where you detect which finger

  • is down and when.

  • So theoretically, you could have some sort of like gang

  • sign log in.

  • Da, da, da, da, and you're in.

  • Again, another way to really rethink login.

  • And that's sort of the theme here, which is yeah, we can

  • spend all this time optimizing those forms and getting them

  • down to one tap.

  • That's cool, but look at all the potential we have through

  • things like touch.

  • Through things like instant access to cameras.

  • Through things like being able to send SMS

  • messages back and forth.

  • This gives us the opportunity to use mobile as a way to

  • totally change what login is versus spending our time

  • dwiddling around with forms.

  • And I think it's worth dwiddling around on forms,

  • just to be clear.

  • The alternative is let's copy what we have right now and

  • just make it fit on a small screen.

  • OK, that's one way to approach mobile design.

  • The other way to approach mobile design is let's do a

  • whole bunch of things and sort of challenge our assumptions.

  • Let's show passwords.

  • Let's eliminate usernames and passwords.

  • Make it one tap to login.

  • Let's really push it forward and not just be stuck with the

  • shackles that we created for ourselves before.

  • And you may say, why bother?

  • Well remember, the mobile device is always

  • with you, always on.

  • You can use it anywhere.

  • So wouldn't you want to make getting into a service as

  • instantaneous and fast as humanly possible?

  • Wouldn't you want to remove all these barriers so somebody

  • can take that high powered device, connect to the cloud,

  • and do whatever they want instantly?

  • And frankly, if all we're doing is focusing on these

  • sort of layout adjustments, we're going to leave a lot of

  • bigger opportunities behind.

  • And I'm not saying face unlock or picture password is the

  • future of login.

  • But they don't look anything like a login screen.

  • They're totally different experiences that accomplish

  • the same goal, but they've been rethought using the

  • capabilities of mobile.

  • And I think that's sort of the bigger picture story to move

  • these things towards the future.

  • One more example, and I'll shut up.

  • Another one of these linchpin critical things on the

  • internet that just gets no love ever, and you guys have

  • probably seen one of these.

  • It's called a checkout screen.

  • Have you ever bought anything on the internet?

  • Yeah.

  • So I'm only going to show one stat for checkout.

  • In 2011, 3/4 of shopping carts were abandoned.

  • 3/4 of the time somebody put something into a shopping

  • cart, they didn't ultimately buy it, which is

  • disconcerting.

  • But what's more disconcerting is it's getting worse.

  • How is it after 20 something years of designing for the web

  • and making e-commerce things, how are we getting worse?

  • And again, I'm scratching my head here.

  • Because a company like Dell, although they're private now,

  • they've taken the time to create this mobile shopping

  • experience.

  • In fact, they've taken their checkout form-- all of it--

  • and put it onto mobile, including the ability to

  • provide an extension for your mobile number and the ability

  • to provide your daytime fax number and extension for it.

  • Then if you happen to make it through this entire screen,

  • they conveniently tell you that you have the opportunity

  • not to agree to their terms of sales.

  • That's why you've completed that entire form-- to not buy

  • something here.

  • So the first message here is let's think about ways we can

  • reduce effort.

  • When I say reduce effort, I don't mean

  • remove critical things.

  • I mean do the due diligence to figure out what's the minimum

  • effort necessary to get something done.

  • There's so many examples of this stuff.

  • Expedia, in their checkout flow, they had an optional

  • form field titled Company.

  • They removed it, because they saw on usability testing

  • people were confused.

  • They got $12 million bucks a year overnight.

  • They found 50 to 60 of these kinds of things.

  • If you're the guy who gave them $12 million more of

  • profit a year overnight because you removed an

  • optional field, they're naming an addition to the

  • cafeteria after you.

  • It's like Bob's conversion meatloaf is now on the menu.

  • So we can remove unnecessary questions.

  • We can also do other kinds of things.

  • Again, sort of rethinking and not bringing over what we know

  • for the desktop.

  • What is wrong with this on a mobile device?

  • What is wrong with 16 input fields to collect a phone

  • number on a phone?

  • You could just do that.

  • It's a phone.

  • It's meant for entering phone numbers.

  • And you may say, oh, no, no, no.

  • But we need all these options.

  • No, you don't.

  • You just need to be able to call somebody if there's

  • something wrong with their order.

  • When we deal with businesses, fine, OK, maybe they can add

  • an extension, if they still have one.

  • OK, maybe we'll do that.

  • If you're really bending my arm and smashing me against

  • the ground, maybe I'll add another add an option thing.

  • But that's only like OK, you really hurt me, and I'm not

  • going to go willingly.

  • But we just took 16 input fields down to one.

  • And in the things where we have options,

  • we make them options.

  • We don't expose these things by default to people so they

  • don't have to consider it.

  • The other thing we did.

  • Remember, it's a phone.

  • So you can say, I'm collecting a phone number, and

  • look what pops up.

  • It's a dial pad with these big fat numbers for

  • entering phone numbers.

  • And guess what?

  • The same thing works on Android, which apparently none

  • of you know.

  • But there it is.

  • The same thing works on the Kindle, which is running this

  • really weird web browser called Amazon Silk, which I

  • don't know why they may.

  • But here it is.

  • Input type tell.

  • If you want to really be nice to people, let's go set up an

  • input mask where we show them the formatting.

  • And as they start typing it in, we're just going to keep

  • that formatting, and all we'll do is accept numbers here.

  • If they enter any other format, character, or

  • anything, we'll just ignore it through our input mask.

  • And away we go.

  • So that's one way to be really nice to people.

  • We can sort of condense these inputs and bring things down.

  • Other things that we can do.

  • What about the address?

  • Could we remove optional fields like

  • this four digit extension?

  • Not necessarily in the US, because some people require

  • the nine plus four zip code.

  • But we can make this thing flexible and sort of

  • combine those two.

  • But here's another issue.

  • Select a state as drop down thing.

  • What happens when you tap that?

  • This is the only reason it's awesome to live in Alabama.

  • [LAUGHTER]

  • LUKE WROBLEWSKI: If you live in Alabama, every state drop

  • down for you is like one tap.

  • You're like, I'm living the dream.

  • Boom, state Alabama.

  • Every other reason, probably not so good.

  • But for everybody else, it's like tap, scroll, scroll,

  • scroll, scroll, scroll.

  • Whether it's an iPhone thing or Android little dial.

  • Scroll, scroll, scroll, scroll.

  • Tap the one you want.

  • Tap and you're done.

  • It's a multi tap operation.

  • So what we could do instead is maybe turn that into a text

  • field, where now, for a text field, you're going to enter

  • two characters.

  • And again, that's still a four-tap operation.

  • Now we've inserted some potential for errors, because

  • maybe people will mistype in and we have issues.

  • The drop down sort of constrains you and prevents

  • you from making errors, although it makes you swipe

  • around forever.

  • So what about a technique like this where we can say OK,

  • enter your street address, building, apartment number,

  • and then enter a zip through which we'll

  • get city and state.

  • And if you enter city and state, again, remember we're

  • using our big numerical dial pad, so we'll enter city and

  • state, and now we get San Jose.

  • Because there's actually two options that come with the zip

  • code, but we don't want to use this drop down thing again,

  • because that's sort of a pain in the butt.

  • So instead what we'll use is stepper.

  • Since there could only be up to three of these things, you

  • just use a stepper and you go bop, bop, bop.

  • It's a little bit of a friendlier touch control.

  • So all kinds of things that we can start doing to make

  • address more manageable.

  • And when people see this, they say well, Luke, what if we

  • could do-- ready for magic PowerPoint transition--

  • whoop!

  • What if we do that?

  • This actually makes me really nervous, because I think

  • people are just going to start entering their entire address

  • in here and flail.

  • And they won't ever get to this.

  • So maybe that's not necessarily the way we want to

  • go with addresses.

  • Next thing, got to pay for it.

  • Credit cards.

  • So how does Dell do this?

  • So on Dell, you select the credit card.

  • You select Go.

  • You enter all this information.

  • You make your way through.

  • And I think we can get away with doing something a little

  • bit more like this.

  • So what we're going to do is collect the credit card, your

  • entire payment information here, and we'll set this to

  • type of number, because we want to collect

  • a credit card number.

  • But what happens when we set it to input type number?

  • We get all these little--

  • I don't want that.

  • Look at that.

  • That's ripe for touch errors.

  • What I want is this thing that I did when I hit telephone.

  • I want these big fat number keys.

  • But this isn't a telephone number, so now semantics are

  • fighting with usability.

  • So what you could do instead is set an input type pattern

  • where we'll get this big numeric dial pad.

  • So now that you've got this pattern up, and what we're

  • going to do is as you start entering a credit card, we'll

  • tell you the type of credit card you have, because we can

  • discern that from the pattern.

  • If it's an invalid credit card number, we'll throw an error.

  • And if it's valid, what we'll do is just slide it over.

  • Slide it over.

  • And now we're going to collect month, month, year, year,

  • because it's still numbers.

  • And we have this big numerical dial pad.

  • So now we enter that.

  • And based on the type of credit card you have, we show

  • you where that CVV code is.

  • And again, you're still on the numbers, so you enter your CVV

  • code using that numerical dial pad.

  • And we just captured all the information you need to

  • collect a payment in one input field.

  • So you've never come off the key pad.

  • You're not jumping between a bunch of input fields.

  • It's all numerical.

  • So we've used these input masks to reduce the potential

  • for errors, because all we'll ever accept is numbers.

  • And you're off to the races collecting payment info.

  • And if you combine all these things together, this is sort

  • of the uber message I want to get across to you guys.

  • Let's look at what a checkout form could be.

  • If you're dealing with digital content like a book, a movie,

  • music, whatever, a game-- everything is

  • digital these days.

  • If you're dealing with digital content, like a little book

  • here, we need to be able to send it to you.

  • So here's your receipt, and here's where you

  • can download it.

  • We can use our payment mask pattern.

  • We can collect your credit card name in one field.

  • And then we just have a button to buy it, and that is our

  • three-field checkout form.

  • For comparison, Dell's checkout form

  • had 42 input fields.

  • 42 input fields compared to three.

  • And you say, again, why bother doing all this work?

  • Well, if you've got your phone with you, it's always on,

  • available at the point of inspiration.

  • If somebody tells you about a book, you could just buy it.

  • And if you doubt the impact of lowering these barriers to

  • entry, I point you to Amazon Prime, which is one-click

  • purchasing, two-day shipping.

  • People that use Amazon Prime go from spending $400 a year

  • on Amazon to spending $900 a year on Amazon.

  • They're responsible for like 20% of US sales, because it's

  • so damn easy.

  • You're like, oh, book, book, oh, toothpaste, toothpaste,

  • toothpaste, toothpaste.

  • They make it so darn easy that you just go buy, buy, buy.

  • And this is sort of the model.

  • The more you can reduce these barriers to entry, the better

  • off you are.

  • So if we can take a 42-field checkout form down to three,

  • this is a really, really, really big deal.

  • And again, I've been talking about doing this on mobile,

  • but there's no reason you can't do this on desktops,

  • laptops, tablets, and God knows what's coming next.

  • And speaking of God knows what's coming next, let's look

  • at a couple ways to sort of look towards the future of a

  • checkout experience, again, using the same kinds of

  • capabilities we talked about before.

  • So these mobile devices know where they're at.

  • They have cameras on them.

  • They can process images.

  • They can do all kinds of things.

  • So inside of the Apple Store App in the Apple App Store,

  • there's a feature called Personal Pickup.

  • And they way that works is you shop around, you find

  • something you want to buy, you say you want to

  • pick it up in a store.

  • You tell them the store you want to pick it up in.

  • That's not the interesting part, the fact that they can

  • find stores near you.

  • The interesting part is when you walk inside that store,

  • somebody comes up to you and says, Luke, here's your iPad.

  • And how do they do that?

  • Well they do that because they have a Wi-Fi parameter, and

  • you know they know you bought the thing on your phone.

  • You have your phone with you, because who doesn't walk

  • around with their phone?

  • And as soon as you walk in, it connects the Apple network.

  • And their little the iPad or iPhone comes up and says, hey,

  • here's the guy that bought the iPad.

  • Go give it to him.

  • That is a very interesting checkout experience to me

  • using mobile and sort of rethinking what mobile can do.

  • Another example, here in Korea, this is a Tesco.

  • They're a grocery store chain.

  • They're number two.

  • They want to be number one.

  • But they don't want to build giant buildings

  • all over the place.

  • So what they did is they go to places where people spend a

  • lot of time, and they put these illuminated placards

  • that look like grocery store shelves.

  • And what you do is you can go milk, milk,

  • milk, egg, egg, cheese.

  • You scan their QR codes.

  • You hit buy.

  • You go on the train.

  • You come home.

  • Two hours later, a truck shows up with your groceries.

  • In a city where most people don't have cars, where

  • carrying bags of smelly fish on the subway might not be so

  • great, this is awesome.

  • And can we do this on the web?

  • Sure, we can do this on the web through Getusermedia.

  • Card.io is sort of the inverse of this, which is instead of

  • spending money using your mobile device, you can collect

  • money just by taking a video of a credit card.

  • It'll process all that info, input the expiration date, the

  • number for you.

  • And through this, they get actually 2X faster

  • registration and conversion.

  • And last but not least, and I'll sort of wrap this up, one

  • more example back at Apple.

  • The same Apple Store App in the Apple App Store, which is

  • a tongue twister, by the way, has this

  • feature called EasyPay.

  • And what EasyPay is if you're in a store, you can scan any

  • barcode on something that doesn't have a serial number--

  • so a non-Apple serial number product.

  • It doesn't matter how much it costs.

  • It can cost like $900.

  • Doesn't matter.

  • You scan it.

  • It tells you what you're looking at.

  • You say pay.

  • You enter your password.

  • You sign in.

  • And you just bought.

  • You walk out.

  • That's all you do.

  • Point the camera at the thing you want to, enter your

  • password, and walk out.

  • And if you don't think people will use barcodes to scan

  • things, they actually do do it a lot.

  • So let's compare this stuff for a second to sort

  • of round this out.

  • And let's stick with the checkout example.

  • So let's say I want to buy a mouse.

  • I would like to buy a mouse from a computer manufacturer.

  • A computer manufacturer that could sell me a mouse is Dell.

  • And they have created a mobile commerce experience.

  • This is the Dell mobile commerce experience.

  • I'm buying this mouse.

  • OK, da, da, da, da, da.

  • Mmm mmm.

  • Continue.

  • Ba, ba, ba, ba, ba.

  • Go.

  • Da, da, da, da, da, da.

  • Mmm mmm.

  • Da, da, da.

  • Continue.

  • Almost finished.

  • I dare you.

  • Da, da, da, da, da,.

  • Ta da.

  • You just bought a mouse on your phone.

  • The future of technology is here.

  • Contrast that to the Apple example.

  • Point your phone at a barcode, enter your passport, walk out.

  • Now granted, the Apple example is inside the store, so they

  • don't have to collect shipping info.

  • But that's kind of the point here, which is this is a

  • mobile first take on checkout.

  • People have their phone with them.

  • Oh, they'll have their phone in the store.

  • Or the phone has a camera.

  • Oh, it's got one-click shopping.

  • What can we do to rethink what the checkout experience is?

  • Very much a mobile first check out thinking mindset.

  • This is a desktop first checkout mindset.

  • What did they do?

  • They took their desktop form, and they fit it

  • onto the small screen.

  • And all the issues that you had on the big screen are now

  • magnified like Jakob's nose.

  • That's how you'll remember this.

  • Just picture that nose.

  • Are now magnified on the small screen.

  • So mobile first checkout, desktop first checkout.

  • And I'll leave you to think about what does

  • the future look like?

  • Which direction should we be going?

  • So to summarize this, I think mobile is

  • a massive new medium.

  • I don't think it's a smaller screen.

  • I think just treating it that way really leaves a lot of

  • opportunities on the table.

  • We looked at login screens and checkout screens, but you

  • could go through the same process for anything.

  • I deliberately picked these boring lame sort of things

  • that everybody's familiar with just to show you how there's

  • opportunity in every little thing that's out there,

  • regardless of how much we think it's

  • already been solved.

  • And if you start treating it as a unique thing, if you

  • start treating it as its own thing instead of this smaller

  • screen to fit stuff on, I think that gives you this

  • opportunity to really adapt and optimize stuff that

  • frankly is a problem now.

  • And those optimizations, those adaptations you do, while

  • mobile forces you to figure that out, it's actually good

  • for all devices.

  • Is a faster checkout experience good

  • for a laptop user?

  • Sure.

  • Is an instant login experience good for desktop user?

  • Sure.

  • I don't think this is restricted to mobile.

  • Mobile sort of has these constraints and these

  • opportunities that force you to rethink

  • things, which is great.

  • And when you do that, I think there are opportunities to

  • really think differently about this stuff.

  • To look towards what the future of checkout or login or

  • whatever it is we're dealing with on a day-to-day basis,

  • even on the web.

  • And I tried to show some examples of native

  • applications and how you can actually do that stuff inside

  • of websites as well, because I don't think we want to leave

  • the web behind.

  • And as we look at the future, I think the future is going to

  • be even more complicated than it is right now.

  • We've got to deal with these mobile devices, these tablets,

  • all kinds of things.

  • What about the Apple Slap Bracelet

  • that's coming out soon?

  • What about the Google Glass?

  • I notice somebody's looks a little different than mine.

  • This is the model they sent me.

  • I don't know if I'm like in the alpha explorer program

  • instead of the early explorer program.

  • But yeah.

  • Thank you.

  • [APPLAUSE]

[GONG]

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it