Subtitles section Play video Print subtitles [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]
B1 password login da luke checkout screen Mobile to the Future 165 9 richardwang posted on 2014/03/23 More Share Save Report Video vocabulary