This is a great lesson. When you compliment others, good things happen to you. So be very
gracious and give things and you will get things like a display. Okay, here we go. That
was a joke. Thank you for joining me on this journey to the future by looking at the clunky
awkwardness of technologies past. Topic I'm going to talk about is how do we take some
of the things that we're doing with mobile devices today and actually use them as a
way of looking forward with what we're doing with the internet, software and the web. If
I talk about things, we don't have time to ask questions around or you want to follow
along with some of these topics, I am on what Jared Spoole affection refers to as the Twitter's
and that is the way to locate me there on the Twitter's. Now, before we go and start
talking about mobile in the future, I want to talk about something else which is this
concept called mass media. And mass media is an interesting phenomenon. It's basically
using technology to broadcast to a massive audience, trying to get a message out to way
more people than will ever fit in this room. And the first mass media that hit our planet
was print. You guys are probably all familiar with this. Magazines, pamphlets, newspapers,
books and the like. Print as a form of mass media stuck around for a really long time.
You can basically print things, send them off to anybody, get your message to wherever
you want it to. And so there's a couple hundred years or several hundred years rather sort
of dry spell before the next form of mass media came up. And so around 1890 or so, you
had recordings. Nowadays, these are digital Blu-ray discs and DVDs and things like this.
But earlier, it was other forms of recordings that allowed us to back then share audio,
nowadays share video. Again, you could sort of distribute these things out at mass scale
and communicate to people. Following that, about ten years later, we had cinema. So here
we added audio, now we're adding movie pictures. Ten years later, we had radio. So after several
hundred years of nothing really happening in mass media, all of a sudden we get, you
know, every ten years something new and earth shaking coming out. And we think we live in
these, you know, really fast-paced changing times. Imagine being in a world where all
your head is print and all of a sudden you get movies and all of a sudden you get recordings
and all of a sudden you get radio. It must have been sort of mind-blowing. Radio actually
had a pretty good run, too. It hung out for 30 or 40 years or so until television. And
following television, again, a couple of years, a couple of decades here, we had the internet.
Many people won't dispute that the internet is sort of a very powerful form of mass media.
There's a very interesting fellow who used to be an exec over at Nokia named Tomi Achenin
who proposed a theory several years back where he said, well, the seventh form of mass media
to hit our planet is actually the mobile device. And, you know, this may seem a little presumptuous
to a certain extent, but let's dig into it for a second and see if we can actually do
this. Because if mobile actually is a form of mass media, I think it really changes our
perception of how we design and build for it. It's not just a smaller screen version of
the stuff we have on our web pages and our software. It's a whole different way of communicating
with the world at a mass scale. So I think it's worth digging in and seeing as Tomi
right, is this really the seventh form of mass media to hit our planet? So the first
thing we have to determine is, is it massive, right? Mass media? Got to be big. In order
to do that, I want to look at how many babies we make per day in the world, which is around
371,000. So we've gotten pretty good at this, I think. Fortunately, this is how many iPhones
enter the world per day. So our late night, evening hours seem to have shifted a little
bit from one form of activity to another. It's even worse for Android users because
there's 900,000 Android devices activated per day. Now, if you look at the total number
of iOS devices, that is, you add iPod touches and you add iPads to this, then you look at
the Nokia smartphones, the BlackBerry smartphones, which are dwindling, but are still a lot.
In aggregate, that adds up to about 1.8 million mobile devices entering the world per day.
1.8 million compared to 371,000 children. Some of you may be familiar with the Terminator
trilogy TV series. I believe this is how that whole thing sort of kicked off, right, where
the machines started to take over. And it's not just the fact that there's tons of these
things coming up. They're coming up and hitting us very quickly. So if we look at the rate
at which new technologies in the United States sort of hit this mass market, mass market,
in this case, is defined by 40% of the population got one, right? So telephone, it's off my
chart, took about 40 years or so for 40% of the US population to have a telephone. Electricity
and computer, which is things you think people would want really damn quickly, right? Roughly
about 15 years, radio, mobile phone, internet, getting down around five years, and hands
down the fastest technology to reach mass market adoption right now is the smartphone.
So not only are there tons of these devices, the rate at which people are adopting them
is sort of unprecedented. And this is why you start to see huge swings in like three
to four years. You know, Facebook, who several years ago had, I don't know, maybe 20, 30
million mobile users, now has over 500 million mobile users, and more people use it on mobile
than use it on the desktop in the US. So lots of black plastic glowing rectangles entering
our planet very quickly is interesting, but how are they being used? This is the other
piece of the puzzle. And for this, you have to look at what is going on in the personal
computing market. And if you look sort of further back to the start of the personal
computing market, you can see a number of companies trying to figure out what is the
personal computer. Names you might not have seen in a while, Atari, Commodore, Amiga,
right, they're trying to put this thing together. And what usually happens is a lot of them
get shaken out and two, maybe three guys stick around. In the case of the personal computer
market, if you're on one side of Redmond or the other, the next 15 years are either glorious
or a little bit grim. There's our friends at Apple barely hanging on. But if we fast
forward to the president, and we sort of look at the past three slash four years-ish, zoom
in on that, some really interesting things are happening. And if you look at what Android
and Apple are doing, they're taking a huge chunk out of the personal computing market.
Because the devices we have with us, these aren't just phones, they're portable computers,
right? And in fact, I think they are the actual personal computer we've been promised for
a long time. The big plastic box that sits under your desk, your mom does her taxes on
it, you spray it with an air can, right? We used to call this thing the personal computer.
But the personal computer is actually the thing you have with you always and everywhere.
Now, in order, so there's lots of these things, right, people are getting pretty quick. So
far we're doing pretty good on mass media. The next thing we need is connections. Can
we actually broadcast to these devices? Right now, we've got about six billion mobile connections.
Cisco, which sees all the internet traffic going through the entire network, says we're
going to hit 10 billion, which is more than there are people in the world. Believe it
or not, people have more than one internet connected thing. Some of you probably on you
right now, some of you using more than one internet connected thing right now. And these
things are growing really fast. So hopefully we buy into the massive part of this, right?
We buy into the ability to broadcast. The next thing that sort of tells us whether or not
mobile is the next form of mass media is can it do all the things the previous forms of
mass media could that came before it? And sure enough, you got print, you have recordings,
you have movies, you have radio, you have television, you have the internet all inside
of these little devices. Just like the internet eight television radio cinema recordings and
television eight radio cinema recordings, the mobile device can do everything that the
six forms of previous media that came before it can do. And it can do more. This is from
Tommy's list. It says not only can mobile do all this stuff that we had previously,
but it has unique characteristics. It's always with you. It's always on. It's always connected.
You can use it to interface with reality as you're currently experiencing it. It can
capture social context. So it can do everything that came before and more and new stuff.
Yet when we make these transitions, when we go from say radio to TV, remember radio had
a good period of time to incubate, when we make one of these transitions, all the stuff
we were doing before kind of comes with it. So sponsorship of radio programs, if you've
ever watched a TV show, you may see something called an ad, which comes from this business
model. Spokesmen were literally people who spoke for products. And if you look at all
the old time radio shows that have made their way to television, the list is really telling.
Here's all this stuff that was on old time radio that then made its way to TV. And when
these programs first transitioned the radio, they sort of, or from radio to TV, they sort
of looked like this. Took a camera, pointed at what was going on in radio shows. The big
innovation was putting a poster next to this person for a visual element. It took us many
years to realize the true potential of television. And to realize that, hey, maybe we can do
something different with this TV thing. Radio is not TV. Similarly, print was around for
several hundred years and all the principles that came from it still stick with us on the
web today. You hear a lot of people talking about pages, canvas, grid layouts, typography.
Not that these things aren't important, but a lot of these concepts have stuck with us
because we've been so ingrained as a culture in what makes print go around. And especially
things like graphical ads, I would challenge that medium that has eaten television, radio,
cinema, recordings, and print that the best way we can advertise there was with a fixed
size graphical ad. It seems almost insane when you put it into those terms. So naturally,
the web is not print even though we often treat it as such. We're constantly trying
to make it be print. And perhaps the best evidence of this is every newspaper that
just took print and put it on the internet is essentially bleeding to death in front
of us. And here we are again, desktop to mobile. And once again, I believe the mobile is not
a desktop PC and we need to think about it differently. This is a different form of mass
media. It's not a smaller version of the screen we had before. So we'll talk about the implications
of that. But I do want to point out that this is a natural process. So I have natural imagery
to convey that. And my friend Scott Jensen, really sharp guy. He was on the original Apple
Newton team. He headed up a lot of Google's mobile efforts. He's over at Frog right now.
He just nails this when he says, copy what we were doing before, then extend it a little
bit until you finally figure out what works. That's the process we go through through each
of these transitions. And so it's okay to be in this mode. We have to realize that we're
in this mode and know what we're doing. Because when you move from copy to extend to finally
realizing something that works in this new format, great things can happen. If you look
at mobile payments at PayPal, right here, they're kind of copying maybe what they're
doing, maybe they're extending it a little bit and then boom, all of a sudden something
happens. That allows them to take advantage of this.
And of course, companies that have put in the effort have actually been able to make
mobile work better for them, more likely to buy, more likely to subscribe, more engagement.
Twitter recently released numbers that I believe they're 400 million or something, tweets
a day. I don't know what ridiculous number it is. The majority of them are created on
mobile devices. The majority of them are viewed on mobile devices and increasingly they have
days where they make more money on mobile than they do on the other platforms.
And companies like Twitter and Pandora are sort of getting pushed to treating mobile
as a serious thing because they see their traffic skew in favor of mobile, right? The
majority of their use shifts from what we previously called the personal computer to
what we have today. Other companies are seeing tremendous growth and when they see that growth,
they realize, oh my gosh, we can actually learn something from this mobile stuff that
maybe we can go use to make our other experiences better.
So with that theme in mind, I want to kind of look at where we've been, right? What do
we know from working on the, for lack of a better term, desktop web, right? Desktops,
laptops, sort of the web we've been building for all these years. And I want to see how
can we take that stuff and adapt and optimize for the world we live in today? All the stuff
I just sort of walked you through on mobile. Because I think there's a lot of things that
we can do that change, that extend and push forward what we do. And then last but not
least, trying to look at tomorrow. What the heck is coming and how else can we really
think about these problems? So to do that, I'm going to look at the most boring stuff
you ever encounter in your daily life. Boring stuff like a login page. Does everybody design
a login page? You know how to do it, right? Username, password, forgot password link, submit
button, right? Boom, you spit it out. You probably have like a, Scott Gell probably wrote like
a JavaScript polyfill. Login forms, concatenated on the server, right? I know you did, Scott.
But login forms are actually a problem. And what kind of problem? Well, people do this
a lot of times a day. Some data I found was 15 times per day. I think it's much higher
than this. 82% of people have forgotten a site password. Not me, I've never forgotten
a password for any website. I'm sure all of you have not either, right? A lot of the times
that people try to authenticate into a site, looking at Yahoo's data, it was between 5%
and 10% of all sessions trying to log in resulted in people requesting a password. You think
about the scale of users they have there, that's insane. Of the people that go and request
a password, if it's in e-commerce, checkout flow, 75% of them won't end up buying what
they put in the cart. The number one request to internet help desks is please help me with
my damn password. So this is a broken system, right? I would argue. Yet, when it comes time
to think about mobile devices, we're going to take what we got on our Windows Live sign-in
page and make sure it fits on the small screen. Let's make sure the layout fits. Let's make
sure it sort of looks good. And along with it come all the problems we had from before.
And actually, the situation is a little bit worse. In some situations when we make this
sort of layout transition, this is eBay's desktop sign-in page and their mobile sign-in
page. And on mobile, you may notice a little thing missing, which is this. I forgot my
user ID or password. And when you try to log in, you're hosed. Now, a major internet retailer
who shall remain nameless had a mobile experience that excluded the ability to get help trying
to sign in. I'm going to pose you guys a question. What percent of the total customer service
calls that they got was related to problem signing in? What percent? Just throw out our
number. 80. 90. 95. 90 percent. Right? So, people might actually need that feature.
This is LinkedIn. If you think it's, you know, eBay's this old and crafty thing. LinkedIn's
this Web 2.0 social network deal, and they have a really nice touch-enabled interface
that happens to be missing a link labeled forgot password. So, if you try to log in
on LinkedIn, sorry, please try signing in again. Because logging in on a tiny little
phone is so much easier than a desktop, right? You're much more likely to remember your password
when you're out and about. It's even worse. This is like, this is several times a day
in my life because I keep forgetting this sucks so bad. This is what happens to me.
I get an email, which, of course, I get on my phone, as many of us do these days, and
it says, this person would like to join your network. I say, okay, I would like to join
this person's network. Then I get the spinning LinkedIn loader of doom because they're doing
some crazy client-side templating dust.js, load everything into the body, and spit it
out. So, you wait for at least 10 seconds for this to load, and then you get a login
screen that you can't log into because you don't remember your password. So, it's like
this compounding effect of pain. Why did they bother making this whole touch experience
on the web browser? If you can't even get to it, darn it. And by the way, they sent
you an email. They know your email address, right? Sorry. This is one of the largest internet
retailers, Walmart.com. And Walmart, being smart in their website, they have this feature
that says, if you do not have a Walmart account, you can click Continue to Register. Studies
that Jared has done show that having a guest checkout can significantly boost e-commerce
checkout rates, unlike 30 or 40% in some cases. So, naturally, it makes sense that when they
made sure this first step of checkout laid out on mobile appropriately, they included
a message that says, if you do not have an account, please go to Walmart.com to make
one. Which is like, screw you, mobile dude, right? We're not selling the year a small device.
I think they come from Texas. They're very anti-small things, right? They are computer
too small. Sorry. So, I like what Stephen Hooper says. He wrote this book, Designing
Mobile Interferences, and he has this really nice quote, mobile should not be a dumb down
limited experience. For many of us, we're willing to do all kinds of things on our
mobile devices, and there's a whole generation of people that mobile is the only way they
go online. Literally this morning, I saw data, and again, I'm going to cite Facebook here.
They are, 30% of their audience in India is mobile only. 30% of new people registering
for their service do so on mobile devices. And they do it in the circumstances that Scott
sort of showed in some of his images, right? And by the way, looking at Facebook data,
I think is interesting because they're getting pretty damn close to proxying the Internet.
There are about 910 million or so users. There's 1.2 billion folks on the Internet. So, there's
as close as you get in many cases, and some of the trends that are happening on there are
really informative. So, first things first, don't remove critical
features, but what else can we do? And again, we're talking a little bit about optimizing
for today. I'm going to go through this a little quick, but like our friends at LinkedIn
can use HTML input types, HTML input attributes, like auto-capitalize off and auto-complete
off. Have you ever tried to log in to one of these things and somebody doesn't turn
off auto-capitalize or auto-complete, but their form is cap sensitive? It's a real joy.
If you set input type of email, then you get these nice little keyboards and browsers that
support them that allow you to provide your input faster. You get a little at, you get
a little dot, and we can do similar things on password, turn off auto-complete, turn
off auto-correct. Perhaps more controversially, this is a problem.
So a decent mobile browser, when you start entering a password, it'll show you the letter
you enter and then change it to a dot. So during the time at which it takes you to look
from the keyboard up, you conveniently get to see the dot instead of the letter you entered,
which makes it a little hard to see what you put in there.
As Jacob Nielsen has said, masking passwords doesn't increase security, but it does cost
you business. And this is actually a real problem. The login form is a big issue for
people not being able to go in there and complete transactions like checkout registration.
And as Jacob says, it's even worse on mobile because mobile is a big magnifying lens for
your usability problems. The constraints of the small screen, the environments in which
people use them, the fact that we have big, fat French writing fingers on these devices
really brings a lot of problems that we have in other places front and center.
So I advocate, and this makes a lot of people nervous, instead of default having this password,
this is box.net, and on mobile they give you this little checkbox to show your password
so you can see what you enter in there. I think they should flip this, show the password
by default and allow you to hide it because smart defaults stick.
Our friends over at the big Facebook have realized this is a problem, especially on
mobile. If you log in there and you mess up, they give you a message that says, hey, your
password was incorrect. We're going to show it to you in plain text so you can actually
see what you're doing. Or alternatively, we'll send you a message. Just tell us your email
or phone number. We'll send you a message. You hit that link and you log in.
So little things like this, which may seem sort of trivial, but ultimately I think they
add up to a lot. And mobile sort of forces the conversation to get you to care about
these little details and put them front and center. And ultimately I think that's better
for user experience in general. Twitter, on their mobile, actually I don't think I can
call them Twitter anymore. Sort of like prints. Now they're just a symbol. So like bird floating.
Is that how you say it now? Anyway, on their mobile sign in page, they use this thing called
an input mask. The way you log in is with an at symbol. So you need this little at in
front of your username. And they just put it in there for you. And as you start typing
your username, it sticks. You don't have to worry about it. You have to hit shift, find
that at, move through it. Apple's mobile me does a similar thing. When you tap in here,
you have to log in with an at me.com address. And so it keeps it visible for you. If you're
hitting at, it just ignores it. So input masks can be used to make this process faster
and easier. This is Quora. And that's sort of helping manage errors as they occur. This
is avoiding errors. So what they do is if you try to sign in with an email address they
don't know, up front they tell you, hey, we don't know who you are. Maybe you need to
create an account. And you can either say, oh, I might not have an account here or perhaps
I entered my email address wrong. Quora does something else which I like even more in that
they have this default check box that says let me log in to this browser without a password.
This is set by default. So you log in the first time, lets in. Next time you show up,
this is all you get. And in order to enter the site, all you have to do is tap on your
picture and you're in. Now if it's not you or you want to sort of clear that out, you
can. But from an instant login perspective, now we're down to just touch the screen in
a certain place and you're in. Which is why you see so many sites adopting these single
sign-on solutions. Sign in using Facebook, sign in using Twitter option. Hey, there's
a lot of people that for example are on Facebook and are logged in right now to get 450 million
people who can just tap a button and log in and they increasingly use the service on
other sites. So while you get this sort of one click tap through these third party solutions,
you insert or you introduce new problems that you might have had before. Which is before
you're like, which email address did I use to sign up for the site? Now you're like,
uh, so did I sign up with Twitter or Facebook or an email address? You don't even know
that. So what are ways to get around that? And what we did a while back when we sort
of rethought the sign experience on our little startup was you enter your name or email address.
We'll show you a picture, give you your name. And now here's how you can sign in. You can
sign in with your face, both Twitter or whatever, depending on which options you have set up.
Vote is in, which is Jason Petori's little, little, not little new startup. He was the
lead designer over at Mint, implemented this pattern recently. And so if you're trying
to sign in the vote is in, you again enter your name, get a set of information of who's
in there, keep typing, narrow it down yourself. And then you can see this is the way to log
in. This is sort of cool on a big screen interaction. Unfortunately, on the voters inside,
this is what it looks like when you hit mobile. And then so yes, naturally you can zoom in,
but now this interface totally starts to break down as you can see. So in the case of these
smaller screens, it's actually sort of easier to deal with just a single button access in
some cases. And this is what we chose to do. And then set a cookie to try and be as aggressive
about remembering which service they use last time to pop them in with one click. So let's
look at some of this stuff in aggregate and then we'll move towards the future. But I
think this is, again, lots of little things that we can add up together today to create
a better overall way to deal with the fact that these mobile devices tend to have more
extreme conditions of use than us sitting comfortably in our big tables plugged into
power sources. So one thing we can do is make sure we don't remove critical features like
I can't remember how to sign in. Another thing we can do is use input types and attributes.
We can also show the password by default, but let people hide it if they want. We can
be saving people's passwords so they can get down to one click. We can be flexible in what
we accept in terms of email or full name. And the experience sort of looks like this. Tap
that, get the email address in. If we don't recognize you, we can tell you right there,
prevent an error. If we do recognize you, we can give you a little indication that you're
on your way. Show the password by default. If you want to make life hard for yourself
or there's a mysterious stranger behind you, you can hide it. And then when you log in,
next time you show up, it's a one tap operation. Notice I sort of change the size of the touch
targets here so that you don't have these tiny little touch target problems that you
have on the Quora site. If that's not you, you can switch a login. You can get help or
have your butt. Basically one click access into a site. And so now what we've done is
we've taken this sort of painful nasty thing called the login form and we've gotten it
down to hit it with your finger on a mobile device. And hopefully this makes some of you
nervous and you're thinking I can't do that on my site because XYZ reasons, I have a long
one. I have a long list, rather. But, you know, ask yourselves, somebody else was talking
about this. I think Scott mentioned Nicholas Gallagher's post. Ask yourself why, right?
We're having this huge dynamic shift in how people use the internet and the web and the
devices they use. Why can't we revisit some stuff that obviously sucks? You know, why
can't we push this stuff forward? Why are we so afraid to try something different? Because
while I showed this stuff working well on mobile devices, there's no reason you couldn't
do similar things on desktops and laptops and tablets and God knows what's coming next.
Speaking of God knows what's coming next, let's look at some ways we can sort of push
login to the future, if you will. So one of the things that we could do is because mobile
devices are essentially phones and they can send text messages, we could, when somebody
hits sign in, we could just send a text message in the background to our server and then subscribe
to messages coming back from that server to authenticate them as, hey, they have possession
of this phone right now. Which is actually probably more secure than the email verification
step we go through in a lot of registration forms. It's harder to fake a phone number
than an email address. Unfortunately, we could do this seven years ago with WAP, but today
there's competing standards from the W3C and previously Bondi stuff, so this one's sort
of out. Hopefully, as I'll show later, there is some hope. Josh mentioned what's going
on with Windows, and this is the Windows phone running Windows 7.5, but Windows 8 clearly
inherited a lot from the mobile interface. It's one of these examples where mobile sort
of led everything that they're doing with the desktop. And both of these are touch-based
interfaces, so what they've done with login on Windows 8 is they've took the capabilities
of these devices front and center. So in order to log in on Windows, what you can do is set
up a gesture password on a photo you upload. So you can make a circle, you can do a line,
you can set a tap if you like, and you've just created your own password of gestures
on your photo. Then the login, all you're going to do is go to the home screen, flip
that up, and in order to log into your computer, you're basically just going to go in here
and circle the father-in-law, connect the two sisters, and tap the mother-in-law in
the nose, and boom, you're in. Now, I feel kind of awkward saying this because this
is Microsoft, but this is really a humanizing interface. I think it's insanely inhumane
to make you use only capital letters, the birth date of a French king, and underscore
in two lowercase characters, which we'll show you as dots to log into our service, right?
That's the word. That's so inhumane. It's like slapping you in the face. Whereas what's
going on here? Put a picture of your own up and draw some marks on it. Like, ooh, I'm
drawing on my family. Boom, I'm in. It sort of changes the equation, it goes from something
which is extremely technical and computer-ish to something which is immediately approachable,
touchable, right? Familiar. And again, people will say, well, this isn't secure. We can't
possibly do this. Well, here's how secure your bank account is with a four or five-digit
pin from a brute force attack. It's a combinatorial attack on all the possible permutations of
your pin. Here's how safe it is if you use letters instead. Here's how safe it is if
you use a complex password like many websites do. And here's how many permutations you have
from Microsoft's multi-gesture system. So just because something feels simplistic and
human on the front doesn't mean it can't have serious technology or security or whatever
it is we happen to need behind the scenes. So this isn't to use Scott's phrase. Rather
than optimizing for developer convenience, let's push that complexity to the back end
and try and focus on the experience instead. And you say, well, can I do this in the web
browser? What do you need? You need the ability to do touch gestures, which most browsers
as Josh pointed out to us can do on a decent mobile device. You need the ability to upload
images, which unfortunately many mobile browsers can't. But as of iOS 6, we got this so we
can take a photo from Safari mobile browser. Android's had it since 3.0. So we're getting
kind of close to actually being able to do that in the web browser. Speaking of Android,
they have an interesting take on the login screen. So they have this sort of facial recognition
feature. And what happens with an Android device running 4.0, you have to smile at the
device for a period of time so it discerns that you're friendly. It'll map that friendliness
onto a facial recognition pattern. And then if somebody else comes to it pretending to
be a friend, note the smile, it'll say no. If the original owner goes to it and tries
to log in, it happily lets them in instantly. Having lived with one of these devices for
quite a while now, I actually feel like when I go back to my iPhone, I have to enter a
four-digit pin. It feels like I've stepped backwards in time five to ten years. Like,
you don't recognize me? They're in my pocket all day, damn you. What am I to you? If you
doubt the security of this feature, rest assured this man's phone was not able to be infiltrated
by an extreme lookalike. And you say, what about the browser? Can I do this facial recognition
stuff in the web browser? Well, what we need is the GetUserMedia API, which is sort of
up for debate. But theoretically, there are ways to start getting access to media streams
inside of web browsers, which can enable this sort of stuff and more, which is awesome.
And when they had the tsunami, a lot of people were left without any kind of identification
or cards or anything on them. And they needed to get money. So one of the things that came
from that is this little innovation on cache machines, where you are essentially the cache
card. And what it does is sort of uses biometrics to authenticate you as the owner of a card
and let you in. That's pretty neat for accessing an ATM. Apple has some patents where not only
can they read fingerprints off of a mobile device, they can determine which fingers are
down and where. So you imagine, like, the particular kind of hold you have for your
phone can be the way you access it, depending on which fingers you put where or how you
place them down. Sort of like gang signs to enter your phone. And this is sort of what
I mean with the future. We can take something like login and something that's been unchanged
for, what, 20 years of the web, 30 years of graphical user interfaces. Nobody's thought
deep and hard about this. Everybody just regurgitates the same stuff. And I think, given this transition,
given the new capabilities we have and the sort of opportunity we have with these devices,
we can take it further. On the web, we need to get some new device APIs in there. I'll
talk a bit more about that, but it's possible. So login. We can basically make sure things
layout fine, which is okay. We can put in the effort to really optimize them. And I think
this is worth it because these things are always with you, always on. Or we can really
look beyond just optimizing and adapting to today and trying to figure out, you know,
what other opportunities do we have? I think if all we do is spend our time worried about
layout solutions, we're never going to really hit bigger, much bigger opportunities, right?
We're still living in the paradigm of the past and copying what we had before ourselves.
So that's one boring thing. I'm going to look at one more boring thing to just sort of hammer
home this point, but it's something that you probably have encountered multiple times over
the course of your web career, which is a checkout form. Again, I don't know what a
checkout form Luke is. You're killing me here. What's wrong with checkout? Is anything wrong
with checkout? Like the internet, e-commerce, digital business, right? It's huge. It's making
billions a year. There's no problem. We know how to do this stuff. I'll just show one statistic,
which is last year, 75% of all shopping carts that got filled were abandoned. You think
that's bad? We're getting worse. How is it? We're getting worse at one of the most fundamental
things on the internet that drives business when we've been doing this for 20-plus years.
We should be doing way better, right? We certainly should be above 75% abandonment. It seems
pretty bleak. So I would say checkout is also broken in lots of ways. And why could that
possibly be, right? Well, here's checkout on Dell's site. And once again, what they've
done is they start from the desktop and they make sure everything fits over there. We're
really going to get that layout, right? And all the stuff that was on the checkout for
on the desktop has now made its way over to mobile, including the need for an extension
on your mobile number. I know you guys all have that, right? I'm just sure you entered
in here. And of course, you have a daytime fax number also with an extension. Then when
you get to the bottom of the screen, after filling in all that information, naturally
we need to take up half the screen with it. I do not agree to buy here button. Because
yes, I fill in all this info without the intention of purchasing from you.
Step one here is, okay, maybe these guys are asking us to do a little bit too much. And
here I'm not talking about removing critical functionality like I was talking about before,
things that we actually need to get stuff done. But study after study shows that things
which are not required shouldn't get in people's way, especially in things like checkout. So
Expedia had this optional field called company under name. They removed it. They got 12 million
more overnight. They found 50 to 60 of these things in their checkout form. Do the math,
right? So taking the time to care about these details actually matters. So let's look at
some of the details on checkout and let's try and learn some lessons about how we can
again optimize and adapt for today's world of mobile devices. First thing we can look
at is here's three fields asking us for our name. What if we just did that? A, we remove
optional fields so people don't have to worry about them. And B, when somebody taps on this
field and the keyboard comes up, they stay on the keys. They don't have to keep moving
between the screen and doing stuff. They just enter their name right then and there. Right?
We can be somewhat smart about discerning if there's a space in between two words in
a field. Maybe that's first name, last name. There's two spaces. Maybe there's a middle
initial thing in there. And this principle of staying on the keys is an important one
which I'll come back to in a bit. Now let's look at phone number. They have four times
four. They have 16 fields being asked for you to enter a phone number. This is a telephone.
It has a dial pad on it. It's made for entering phone numbers. There's no need to use four
separate fields to ask for a phone number. We can just do this. I just took 16 fields
down to one. And I removed the relevant controls. Now, maybe Dell has a lot of business customers
right who have extensions on their numbers. Okay, we'll give a little touch tap sized
target right there so they can add an extension if they need to. And if you really twist my
arm, beat me up and call me a bad designer, maybe I'll allow you to add another phone
number thing here. That's optional. But frankly, all we need is order the computer. We want
to call you if there's a problem. Please give us a phone number. You don't need 16 fields
for phone number. You need one. The rest can be optional. The other thing we can do, remember
this good old input type stuff. If we set input type of tell, then we're going to get
this big fat dial pad right here on the iOS device. Large, fat fingers trying to do touch.
Ta-da, works well. This works pretty good on an Android device, too. Tell is actually
really well supported across the board. So you've got tell here. Here we are on our Kindle
fire running the Amazon silk browser. We got a little bit of a different keyboard. But
again, really nice little usability enhancements just from saying this is a telephone number.
Now if we want to go to the extra mile, not only can we condense these 16 fields to one,
use the input type of tell, but we can also apply our friend the input mask. So we could
instead represent phone number like this, which can also come in handy for internationalization
because you can sort of set the format you need up front. And if somebody enters anything
other than a number here, we just ignore it. And they just go, oh, they hit a space. Skip
it. Who cares? They hit a dash. Who cares? All we're collecting is numbers. It sort of
enforces that format the whole time somebody's putting it in. So we can go pretty far with
making phone numbers. Great. I just showed you three or four little techniques there
that when they add up, they really make a difference. Now what about address? Look at
all the stuff we're asking people for their address. Well, one of the things we can do
here, remove optional fields. If this four digit extension is optional for the zip code,
maybe we can just condense it down to one and allow people to add a dash with the four
numbers in our regex if they happen to need that to get shipped to their place. Most people
don't, but there are a couple of addresses around the U.S. where they need that additional
format. So we can support it. We don't have to ask for it explicitly. State's a little
gnarly one, right? This is pretty much how everybody does state. You've got to drop
down 50 fields on it. You hit it on a desktop computer. It's this long thing you're trying
to navigate through or type around. That's not fun. It sucks on a mobile device, too.
So you tap it. You get this big scroll wheel. Now you're scrolling through this wheel. You
tap the one you want. You tap done. It's at least a four-tap operation if you happen
to live in Alaska or Arkansas. Probably more if you're not in one of those two states.
So maybe the better option here is to take state and make it a text-based input. Well,
now you tap it. You see the K-pad. You enter two characters. You hit done. It's still a
four-tap operation. So I don't know if we've necessarily saved that much there. Another
thing we could try and do is, hey, well, why don't we only focus on zip code and that deal
of city and state? Because if somebody tells us there's zip code, we can get back a list
of places they might be, right? So based on that zip code, we know you're in San Jose,
California or one other place. Instead of using a dropdown here, I would actually use
a stepper control. Once again, for touch, you know, just hit these things up down to
move between the selection. You probably only have top three results here. It's much easier
just to hit up down. In many cases, you'll only get one result back. You won't even need
that dropdown. So maybe we can do this. Maybe we can even do that. This one makes me really
nervous. Though it will keep people on the keys, I fear people are going to enter their
whole address in there, not get down to the zip code and realize city and state are going
to come from there. So maybe just here we're even making me a little nervous. But I'm open-minded,
right? I'm willing to revisit things. Because traditionally, when people did this zip code
thing on the desktop, there were some problems. This is Weber's checkout. If you don't know
how to do design, I'm going to teach you in under a minute here. If you see a lot of text
in a form, that's a usability problem. If you see a lot of red text in a form, that's
a bigger usability problem. If you see bold red text, that's a really big usability problem.
Okay, done. Design education over. Let's put it to use. After entering your zip code above,
you must select click to highlight your city-state combination from the display on the left.
After selection, the city-state will auto-fill in the appropriate category. What? This to
me says, okay, problem here. People aren't grokking this. They probably know the structure
of an address, and this is tripping them up. But I'm open-minded, so I say, well, let's
see how Weber does this on mobile. Maybe on mobile devices. It's different. So I go to
the Weber mobile experience, and they've got the layout, right? But something seems to
be missing. I couldn't put my finger on it. Oh, yeah. You can't buy anything on it. Because
it's not like anybody would ever purchase anything on a mobile device, right? And if
they did, they wouldn't nearly buy as many things as they could on the desktop. That
would never happen. Like any company out there makes any money from people buying things
on mobile devices. Right? If they did, they're probably not buying a lot. 2,600 cars sold
per week on eBay mobile devices. So, yeah, naturally, people won't buy grills. I agree.
If they were to sell grills, they'd have to figure out how to get paid for those grills.
And so we turn back to Dell, and we look at how they're doing credit cards. And step one
here is pick your credit card, type, and then fill in all this information. So, again, we're
dealing with one, two, three, four, five, six, seven fields. I think this can all be one field.
How does this work, you say? Well, we set input type of number, which would give us this
keypad. But I don't like this because I only want to collect numbers. What I really want
is what I do when I set input type to telephone. I get this big, fat, numerical keypad, right?
Just collect the numbers for a credit card. But it's not a telephone, so that feels awkward.
Well, it turns out you can actually do type text pattern zero to nine, which will give
you this dial pat. But that's not very well supported, so what a lot of people are doing
is setting input type number and then running through it with JavaScript and switching it
out to tell. Kind of nasty. But this shows an example of where semantics are actually
in conflict with usability. You want this dial pad, but it's not a phone number. What
do you do? You go hack your JavaScripts. Anyway, how does this work? A, keep in mind
we're keeping people on keys, in particular these big, fat, numerical keys. So somebody
taps on here. And what we're going to do is as soon as they start entering credit card,
we'll highlight which type of credit card they have. We can discern this from the pattern
of the credit card number. Not a big deal. So when they tap in here, they go do, do,
do, five, one, two, three. Okay, it's a master card. As soon as they're done entering a complete
and valid number, we'll throw an error if this isn't a valid credit card number so they never
get to the next step. As soon as it's a valid credit card number, just going to slide it
over, show them the last four digits, and now we're collecting month, month, year, year
in the security code. People are still on these big, fat, numerical keys. They enter
the month, now we switch to show them where the CVV is on their credit card code, and
they're still on the big, fat, numerical keys, and ta-da, they're done. So reduce the number
of inputs controls, keep people on the keys, and if you want to see this pattern in action,
get an iPhone and look at the square app. It's up and running there. If this makes you
nervous and you say, Luke, I can't do that, it's too far away from what my users are used
to, they're used to me penalizing them with lots of form fields and drop-downs. They would
see this as a negative if I all of a sudden made things easier for them. I have to bludgeon
them with form elements until they bleed money. That's how my business runs. If you happen
to be in a company or situation like that, or bludgeoning users with form elements as
your business model, you may instead do something like this. Well, so we got this expiration
date we're trying to collect. Instead of doing two drop-downs, if a browser supports
the input type of month, it could turn into this, which when you tap that, then you get
this nice little touch-enabled dual-scroll pad, dual-spinner, which is kind of cool.
If you don't have support for that, then maybe you want to default to an input mask where
you just enter the numbers and ignore the other stuff, which by the way sort of matches
up to the way credit cards do this stuff anyway. So if you're looking at your credit card and
you see it, it's visually how it looks. And this could be part of a nice little progressive
enhancement workflow. If you have input type of month, you do that. If you have JavaScript,
you do that. Otherwise, you set this default menu here. Problem is desktop browsers do
something a little weird with type month, so you could ignore them for a little bit and
move on. Now, this is a problem. It could just be that. But the bigger challenge here
when we deal with a touch-based world is touch target sizes. In particular, continue down
here. In Dell's case, this is the most egregious example I found of touch targets not really
lining up. The checkout button, the thing that gets the money, that gets their customers
what they want, is buried in between apply coupon and click to call sales. Right? How
many of us accidentally tap the wrong thing and start calling a salesperson versus applying
a coupon and actually buying stuff? Now, to put all this together, I think we can get
our checkout forms down to three, maybe two fields. I think I can get our checkout forms
down to three, maybe two fields. Wow, tough crowd. That technical stuff in the beginning
really soured you to me. Let's say we're selling a digital book or something digital. Everything
these days is going digital. We don't need to figure out where to ship it. What do we
need to do? We need to figure out where we're going to send your receipts or download links
so we need your email address. We'll use type email there. We'll use this payment pattern
for credit card. Depending on what kind of liability you want for credit card payment,
you can remove the name or you can put it all in one field. And then we streamline the
terms of service that I showed you before and we're down to three input fields for somebody
to buy something. And you may say once again, why should I bother doing all this crazy design
and engineering? Because everybody's got their phone with them all the time. It's available
at the point of inspiration. Somebody tells you about a book. You can go right then and
there. Buy it. Versus logging your way through five pages of checkout forms. And if you doubt
the ability of reduced efforts to drive key metrics, look no further than Amazon who has
a patent on this one-click buying thing. People that turn on Amazon Prime, which is one-click
buying with two-day shipping, they go from spending $400 a year with Amazon to spending
$900 a year from Amazon. If any of you have ever become an Amazon Prime customer, you
know this is true. You're all of a sudden, oh, I'll just buy this toothpaste on Amazon.
We're out of toilet paper. I got it. Dead serious. Like, reducing the friction down
to almost nothing accelerates convergence in a huge way. The more you can reduce it,
you know who the biggest licensee of Amazon's one-click patent is? Apple and their 400 million
credit card numbers in the iOS store. How many of you are like, oh, an app, $199? Done.
So this can go a long way. But while Amazon has this patent here, they also have a really
cool feature on their mobile web experience, which is when I buy a digital book, I can
go send it to whatever device I want. I can send it to my iPhone, my iPad, my Kindle.
That's awesome. And it's awesome because the Kindle app, the Amazon app in iOS and
App Store, I can't do that. In fact, I can't even browse books. I can't even buy a book
in there because it's in this locked native thing. And this, to me, illustrates why we
should still keep caring about the web in many ways. Because on the web, like, whatever
device you want, send it wherever you want, right? Here, you can't even buy it. So there's
lots of advantages to native apps as well. But I do believe we should push for capabilities
making their way to the browser so that we can at least get some parity and have the
openness that makes the web great. All the stuff I showed on checkout, though I showed
it on mobile, there's no reason you can't do it on desktop, laptop, tablet, anything
that comes after. Speaking of things that come after, let's look towards the future
for a second. Check out in the future. Well, inside of a native application, I can tap
into the address book now with permission, not on Android, but on iOS, now it's permission.
And I can say, give me the contact info with this owner so I can just fill in all this
shipping name, that kind of stuff. It'd be really great if we had that standard on the
web. They're working on it. Speaking of Apple, they also have this really cool feature inside
of their native app called personal pickup. The way this works is if you buy a product,
you can choose to pick it up in the store, which will give you a list of Apple stores
nearby. That comes from the geolocation API. You pick one. That's not the magic. The magic
is when you buy it and you walk into an Apple store, somebody walks up to you and says,
hey, here is your iPad, Luke. And you say, how did they do this mind-bending Jedi nonsense
on me? How did you know that was me? And that's my iPad. So here's what they do. They have
a geofencing perimeter on the free Wi-Fi that auto connects to any iOS device that enters
the store. And they get a blip on their little store app that says, hey, Luke's here. Here's
where he is. Go give him his iPad. If you have not toured an Apple retail store with
an Apple employee who actually knows what's going on underneath all of the tables and
all of this stuff, I highly encourage you to try and get that tour. Can we do this on
the web? Well, maybe we could spin up a web worker in the background. That's sort of tracking
location. I don't know if web workers right now have access to geolocation or not. It
would be freaking sweet if they did, because we could start doing background location processes.
Continuing on the thread of rethinking checkout. This is Tesco. They are the second largest
grocery store in Korea. They want to be first largest, but they want to do that without
building additional stores. So what they've done is they've gone into places where people
are frequently, such as subway stations, and they put up these lighted posters that look
like grocery store shelves. I don't know how they decide, you know, three of this orange
thing, two of this white thing. That's a fascinating design exercise for me. But what you do is
you take your mobile device and you point at the things you want, milk, milk, egg, cheese,
fish, fish, hit by, take the subway home. Two hours later, a truck shows up with your
groceries. In a city where most people don't have a car, we're carrying plastic bags around
of groceries on the subway, could result in some nasty accidents with all that fish you
bought. This is amazing. Can we do it on the web browser? In the web browser, well, once
again, we need get user media to parse these things in real time. Continuing this sort
of self-checkout theme, if you go into an Apple store, there's this feature called easy
pay. What you do is you take your phone, you point it at a device, you scan the barcode,
it tells you how much it costs, you buy it, and then you enter your password, click sign
in, and you walk out of the store. You can do this on any priced item as long as it doesn't
have a serial number, like a Macbook, so you can do this on up to $500 items, scan it,
hit a button, walk out. If you don't think people will scan stuff, Walgreens, which is
this pharmacy chain, thank you guys, have them over here, 40% of their online prescriptions
are done through barcode scanning on mobile devices today, and that's a freaking pharmacy
chain. So once again, we see some really interesting things. We can start doing a checkout, but
on the web, we kind of need these device API things, hold that thought, but let's draw
the comparison. This is the process of buying something, buying a computer accessory on
Dell.com's mobile experience. I'm going to go fill in that information, I'm going to
tell you the type of credit card I'm using, I'm going to make my way through this next
series of questions, and I'm going to kind of continue on, almost finished, bastards,
submit. This is desktop experience put onto small screen thinking, right? That's how
we've always done it. This is what checkout is. What are we going to do? Let's make checkout
smaller versus this is a mobile mindset. Scan it with your phone. It's got a camera.
We got one click buying, boom, walk out. Now granted, the Apple example, you have to be
in the Apple store to buy that mouse on the Dell one you bought on the web, but it's the
same thing. It's buying a mouse from a computer manufacturer, right? I just look at how different
these two experiences are. So for me to sort of summarize this whole mobile thing in a
nutshell, mobile is a massive new medium. When you start to think of it beyond just
another screen in your life, you realize that it's chock full of crazy opportunities. If
it really, truly, we believe in Tomy's theory, which I actually am a big proponent of these
days, I do think this is the next form of mass media based on how many of these devices
there are, how fast they're spreading, and how connected they are to the Internet. Dealing
with mobile forces us to adapt and optimize our solutions, but just because we made it
work good on a mobile device doesn't mean you can't take that to all the other devices
you have to live with. Mobile is a fantastic forcing function. It has constraints. It has
capabilities that allow you to look at things like log in and check out differently if you
only will, right? If you only will allow yourself that. And I do believe it moves us towards
the future for which on the web we need these device APIs. And I've mentioned them a few
times, so I just want to lay out some of these. These are the ones that are in the device
API working group from the W3C. Many of them are landing in things like WebKit Nightly
Build, so vibration detection, battery status. You can see these are pretty recent dates.
If you want to keep up with this, you can look at it now on that URL. But through this
whole presentation, I've kind of been lying to you because I've kept saying the future,
the future. You can actually do this stuff right now. If you use a little tool called
PhoneGap, I don't look at PhoneGap as a tool for building native applications. I look at
it as a web browser that supports a bunch of standards that are being debated right now.
So in PhoneGap, you can use web technology to access all these things on these devices,
accelerometer, camera, compass, contact, file, geolocation, and the ones that have any kind
of standard in place, that's how you do it. You do it with the standard. Browsers might
not support it, but you can get in there and code it up with your JavaScripts and your
HTMLs and your CSS, and as soon as a browser supports that standard, what's working in the
PhoneGap browser will work in those browsers. So there you can start coding the stuff right
away. But, you know, that's not all there is to the future, and I'm going to sort of
leave you with this thought. If we accept that mobile has eaten print, recording, cinema,
radio, television, and internet, and this is one of the signs that we're onto a new form
of mass media, the question that should be on everybody's minds is what's going to eat
mobile? What's next? If you're in the workshop tomorrow, we'll talk about it a little bit,
otherwise I'm just going to leave you hanging.
