Luke Wroblewski DrupalCon Keynote

 

There are my notes from Luke Wroblewski's @lukew talk at DrupalCon Denver 2012. [My other notes from DrupalCon Denver]

Thank you for welcoming me to Planet Drupal, and I appreciate you giving me the official hangover slot at 9am. I came here with a simple message:

Mobile First

Things on the web, we should start to do mobile first. For years, we have started with the desktop/laptop/notebook experience, and that was the web application baseline. Things are changing so quickly now, this is becoming a backward way of doing things. Let's start thinking about things for mobile first.

Before you say, "Why should we listen to this guy in the green shirt," there are a couple people that have a much higher pay scale than me who are taking a similar approach. Eric Schmidt says

Google programmers are doing mobile applications first, because they are better apps.

-Eric Schmidt

We really need to shift now to start thinking about building mobile first. This is an even bigger shift than the PC revolution
-Kevin Lynch, CTO Adobe

Designing the mobile app first forced us to strip down to essentials

-Bill DeRouchey, Creative Director, Simple

What changed to push mobile first?

  1. Network connectivity: We have the ability to get access to the internet anywhere and everywhere.
  2. The devices that we can connect to the internet everywhere are very rich in processing power.
  3. We have cloud based solutions for software running remotely and the ability to access our content through the network.

We're seeing astounding growth on mobile, which leads to new opportunities. The constraints that we need to absorb to make a mobile app force us to focus, and the capabilities of these devices take us well beyond desktops and laptops and allow us to innovate.

Let's talk about babies

371k babies are born in the world today. 378k iphones are sold per day. In the evening, in the bedroom, I don't know which device is winning these days. 700k android devices are activated per day. 200k Nokia smartphones per day, 143k Blackberry devices per day.

This is about 1.5 million mobile devices entering the world... per day. Okay, so we're shipping a lot of plastic growing rectangles around the world. How are they used?

They're being used in the way that personal computers are being used. If you look at the history of PCs, from 1975 on you see a lot of early entrants trying to figure out what the personal computer is and what it's going to be. Over time, a few stick around: Windows/Intel and Apple barely hanging on by a small thread.

From 2008 on, we see Android and Apple eating into the Windows/Intel market share, through mobile. This rate is astounding. These devices are being used as personal computers, and I think they are becoming the personal computer that we've been promised for so long. It's always with you, always connected, and has your stuff on it.

These devices are connected to the network: 6B connections today, 12B in 2016. 50% of new network connections are through mobile devices and that percentage is growing. In the UK, 20% of people never or infrequently use a desktop to get on the internet. In the US, it's 25%. Within the next couple years, we will have more mobile traffic than PC traffic in the United States.

We have a very hard time putting ourselves in the shoes of these people, because we have 30 years of graphical interfaces and 20 years of web-on-desktop experience that we have to get through. Yet countries without this experience are leapfrogging us into this new mobile world.

PayPal originally started life as a mobile payment solution. The ecosystem wasn't ready, so they moved to desktop payments, but in 2009 they did $141M in mobile payments; by 2011 that number was $4B in mobile payments. All these devices create a lot of opportunity.

Right now on Twitter, 55% are on mobile. On Pandora, 70% of users are on mobile. When you start to learn on mobile, you learn a lot and are able to apply that elsewhere. In Japan, mixi (a social network) has moved from 14% mobile traffic 4 years ago to 85% mobile traffic today.

If this is the world you live in, then a mobile approach to design and development makes a lot of sense.

40% of all Yelp searches happen on mobile devices, even though only 8% of their audience is on mobile. Just imagine the volume that happens there. Every second, somebody calls a local business through Yelp. People that use Facebook on their mobile devices are twice as active on Facebook in general than non-mobile users.

Mobile Web vs Native Apps

Facebook has 425M mobile users; that's a little more than half of their total user base. 50% of those are on the mobile web. 50% of them are on all their native apps... combined. This is the company with the #1 iOS app, #1 android app, and all of these apps together only match the number of users to their mobile web sites. Statistics like this really illuminate the power of the mobile web to reach people on these devices.

My goal was initially just to make a mobile companion, but I became convinced it was possible to create a version of Facebook that was actually better than the website.

-Joe Hewitt

Resolution

If you move from 1024x768 to a mobile browser, you're losing a ton of your screen space... which I think is great!

For example, let's look at the Southwest airlines website. You have to get rid of 80% of the screen space. What is left? You keep the things the customers want. Customers want to check into their flights and find their flight status. This is what customers want and it's good for business. Once you find your priorities with mobile, you can keep those priorities even when the screen gets bigger.

Let's look at Flickr. In their nav, they have 60+ options as they have grown. When it was time to transfer Flickr to mobile, they went from 60 options down to 6. They had to know their audience and see what people want to do and how they want to do it. What do people do? They check what people have commented on their photos, what their friends have done, and maybe kill some time looking at beautiful photos.

This is Expedia. This is the page on Expedia that tells me when my flight leaves [shows huge screen.] Let's compare that to the Mobile version [tiny screen with data centered] [applause]. The amazing thing is that they're using things here like a visual hierarchy, you can move through your itineraries, and the mobile app is even simpler. These experiences are coming from the same company. How are they so simple? The constraints of mobile force you to simplify.

The Network

Because the network can not always be there, or won't be as well as it could be, we have to focus on making things fast and performant. We can we a lot of tricks. But if you focus on using these tricks and making your site fast for mobile first, then when you move to the desktop, your site will scream. Study after study shows that a 100ms delay in your site can lead to a huge loss of business. Performance has a strong impact on overall user experience and the bottom line. Make it fast enough for mobile, and it will be fast enough for the desktop.

Mobile experiences fill the gaps while we wait. Nobody wants to wait while they wait.

-Mike Kreiger, Co-founder Instagram

Where do we use them?

Our stereotypical use case is a business guy who is late for a meeting, but 84% of people use their smartphones at home. You all do it, sitting on the couch and farting around on Twitter. 74% use them while waiting in line. 64% of people use them at work. In aggregate, this tells us that people use them anywhere and everywhere.

Because of that, we run into situations where we get distracted. I think of this as one thumb, one eyeball which is a level of attention that forces us to simplify our design.

When do we use them?

You see that people are asleep, they wake up, they read, they eat dinner, they read stuff, and then they go to bed. When you contrast mobile to computer use, you see short, burst-ey spikes throughout the day. This mirrors how you use the device. iPad users, contrasted to the desktop, people really read in the evening hours on their tablets. You see the same sort of behavior from ComScore... the tablet is a couch/bedtime device, and also a morning/breakfast device. This may change as the tablet becomes more of a business device.

The Financial Times shows a huge spike of smartphone usage in the morning. LinkedIn shows a huge spike in mobile traffic after work, contrasted to the general peak during the day.

If you abstract out the service and just look at when devices are on 3G networks, you see that smartphones have very short connectivity cycles, as opposed to the longer cycles of laptops.

Innovation

Mobile gives us a new palette of tools to design experiences for the internet. One of them is the orientation change for smartphones. For example, when you flip an Android phone to landscape using Gmail, you get a bigger keyboard and a bigger input field.

In Instapaper, you can tilt a device slowly to scroll up and down, instead of using your thumb to scroll. Scrolling has been stagnant for years, and mobile allows us to innovate on top of that. Moving the phone is a very different experience than scrolling or thumbing through photos.

The important thing is to apply these capabilities to a use case.

For example, location detection can work for a simple use case like "find a hotel near me." For years, on a desktop we could only tell with some certainty that you were in the United States. Now, you get locate people within 10m. Two thirds of the time, smartphones find themselves using WiFi beacons. The ability for you to send your location through space to another human being is incredibly useful. Drag to refresh is another popular application.

Touch

Touch is permeating mobile devices; Nokia has moved from a tiny sliver of touch-sensitive devices in 2008 to the vast majority of devices in 2010. Touch allows to scrap a ton of the debris of a standard GUI and get straight to the content. I can actually interact with the content, instead of widgets, icons, or other UI debris that we've come to live with.

The width of a human finger makes you simplify your UI elements so you can make them bigger. A 5mm-large UI element will still cause 3% of misplaced touch events.

The real magic starts happening when you combine the unique capabilities of the mobile device. For example, using mobile, you can find a tube station near you using augmented reality, as opposed to visiting a website and downloading a map. Both of these approaches have big usability issues, but you have to admit the experience is markedly different.

As people of the web, I urge you to advocate for better device APIs inside the web browser. As somebody who really believes in the benefits of the web, I believe the web should get some of this good stuff. Vibrations and battery status have just popped up on Feb 20 and March 15, respectively.

Tesco is putting up posters in subways in South Korea which lets you shop by QR code.

One of my favorites is that you can point a camera at a check to deposit it; there's about 9 or 10 banks that do this now.

WordLens lets you point your phone at text and it translates the text, in situ, in video, on the fly.

The problem with pointing your camera at things is that it's kind of awkward. We have things instead like RFID tags to avoid the awkward interactions where we use a photo or video to identify an object; we can identify it just by putting the phone near it. We recently got a thermostat with a smartphone processor in it, with sensors and WiFi capability... and it's a thermostat!

Many of us with established companies rooted in the desktop web are primed for disruption by companies that embrace this technique. Take Flickr vs Instagram, where we see an opportunity for disruption given a mobile interface. Of course we have these constraints, which really makes us focus on what matters. In this world, mobile is the priority bit, because that's the screen that's with you everywhere and anywhere. Giving it the priority that it deserves is a good idea.

Q: What about larger screens?
A: You don't see as many people using tablets in Starbucks. The abandonment of people on things that have sloppy network connections: 40% of peole are going to abandon your site after 3 seconds. That's very real. That's in conflict with some of this retina stuff.

Q: Most of the stats you referenced are from service-based content. What about surfing the web on mobile?
A: 78% of browser users also used apps. 82% of app users also used browsers. In general, the browser usually amounts to all the other app traffic put together.

Q: Do you see long-form content creation becoming popular on mobile?
A: If you look at all the top-selling apps on iOS, content creation apps are the top three. I think the popular assumption is to assume tablets and smartphones are focused on content consumption, but in reality content creation is a huge piece of it. I think if you have something that's important to your business, not letting people do it because they're on a small screen is a missed opportunity.

Q: In what circumstances is a combined interface for mobile and desktop not the right answer?
A: There's a number of cases where it makes sense to split things up. If you are really interested in optimization, having the same content in an adaptable interface for every device is probably not the best solution for you. There are a number of companies who will build a custom-tailored experience for each device because they want to optimize the heck out of it. What you lose is broad access. The web has always had a tension between rich and reach. If you put up a plain HTML page, it will work everywhere; as soon as you add CSS or JS you are making a trade-off.

Q: At what age are people starting to use mobile devices?
A: My son? 13 months. My daughter, 11 months. Younger and younger these days.

Did you enjoy this post? Please spread the word.