Mobile as a Medium: an Interview with Luke Wroblewski

Thanks to Marco Dini for providing an Italian translation of this article. This article is based on a podcast with Jared Spool and Luke Wroblewski. Listen to the podcast or read the full transcript.

Jared: These days, in order to be efficient, I see a lot of teams out there saying, “OK, we’re going to go to mobile. We’ll take our desktop and we’re somehow just mobilify it.” The resulting experience is often less than optimal. Have you seen this?

Luke: I have seen this. I don’t know if I have a name for the phenomenon. Maybe desktop-first thinking or something like that is appropriate.

Jared: Yeah, maybe. Or, legacy desktop-first or something…

Luke: That’s excellent. I think the broader picture there isn’t just taking your desktop site and mobilize it. The people’s understanding of their service and their product is framed around this desktop and laptop experience. The way they think about it, the way they design it, the way they interact with it, it all comes through that lens. I think it really spills over into the decision-making they make in other forms, in other screen sizes, in other forms of media, if you will, because I actually believe mobile is a unique medium.

The difference between radio and TV is ultimately the difference between mobile and the PC. You don’t just take a radio program and drop it into a TV set, right? You work on it differently. What we’re seeing is a lot of people taking their PC experience and dropping it into mobile. It’s the same kind of effect that you get if you took a radio show and dropped it onto a TV set—not optimized, as you said, and even worse than that, just, frankly, bad. It’s not even a question of optimization. It’s a question of creating a worse experience on mobile, which is where more and more of audiences, money, and businesses are going these days.

Jared: Right. What are some mistakes that people are making when they move from desktop over to mobile?

Luke: I think one way to answer that question is, what are the telltale signs somebody started from their PC experience and ported over to mobile? There’s small things that you can look at. For example, if you’re on your phone and you find a form—everybody’s got a form—where the phone-number field is split up into three inputs, and you get auto-tabbed through them, that is a telltale sign that somebody’s just taken their desktop experience and moved it over to mobile. They’ve created a very bad experience on mobile.

Picture this in your head. There’s three text fields and they auto-tab you. You tap on the first one to enter your area code. Up pops a virtual keyboard. Then, you have to tap the number key to bring it over to number mode, and you tap in the first three numbers, and as soon as that happens, the auto-tab features kicks in, which hides the keyboard from you. Now, you have to tap on the next field for the first part of the phone number, brings up the virtual keyboard, you shift it over to number mode, enter the three numbers, it auto-tabs and hides your keyboard for you again.

All these things just start to add up, but it turns the process of entering a phone number into a phone that should be natural, intuitive, and super-easy into one that is arduous and painful. That’s a very small example, but you can see how these things start to add up, right? You look for these telltale signs, and you do that across your whole form, site or app. It’s just one thing on top of another, where the mobile experience very much suffers as a result of it.

Jared: When that happens, is there a way to get around it that seems to be popping up that’s working really well?

Luke: You start with the mobile experience. You make sure everything is great for that form factor, entering phone numbers and the like. What you’ll also find is, if you make it work well in the more constrained mobile environment, then it’s actually going to be a benefit on the bigger screen as well. The phone-number example is a perfect use case there.

The way to make phone-number entry great on a phone is to use a single input field and eliminate the auto-tabbing. You set an input type of “tel,” which brings up a nice dial pad with big, fat keys. You create some semantics around what kind of information you’re collecting, make it fast and easy to collect it. Then, if somebody’s on a tablet, it works great, even though the screen is bigger. If somebody’s doing it on a hybrid tablet-laptop thing, works great, right? Somebody’s doing it on their keyboard, they don’t have any of this auto-tabbing or weirdness from before and they’re just typing in a number.

Those kinds of enhancements you make from a usability perspective, due to the constraints on mobile, ultimately, I think, pay dividends on the whole-screen ecosystem. But if you do the inverse, then you pay the price on mobile, which now, given the amount of use of mobile, is an exponential price to pay.

Jared: It’s reminiscent to me of, living in a smaller apartment and then moving to a bigger house. You have some rooms that have way too much space, maybe a couple empty rooms because you don’t have furniture to put in them. But it’s not a hard problem and you can solve it over time. Whereas if you lived in a big house and suddenly you have to move to a small apartment, you’ve got all this extra stuff. You have to prune it out. You have to really figure out what’s critically important, and that’s a much more difficult problem.

Luke: That is the crux of it. Let’s take the apartment example for a second. I’ve got a website. It has a deep and complex nav, right? There’s 10 levels of nav, and each has 10 sub-levels, and there’s 5 sub-levels under that. You know the website I’m talking about. Everybody has this website.

That’s the big house. Now, you say, “Oh, I’m going to move to a small apartment. What do I do with all this nav? Oh, I’ll just put it behind this little menu icon, this little hamburger icon, and shove it all over there. Oh, I’m done. Mobile design.” Right? Whereas, what you really should do is figure out what of that stuff do you need, which room should it be in, how do I make it accessible in each room, rather than cramming it all in one closet.

The way to really build an appropriate mobile experience is to review the nav on what’s important, where it’s important, where it’s relevant, where it creates value.

Jared: The process of deciding what things to cut, that, to me, feels like that could be just a political minefield for some folks.

Luke: That is absolutely a political minefield. The word “cut” is harsh, right? Say the word “cut,” “remove,” people get really antsy, because that means the things that they’re adding to the home page have no value. Nobody wants to feel like that. Nobody wants to feel like their thing is not valuable, even though it may not be. Let’s leave that aside for a second.

I don’t necessarily say just remove 60 percent of stuff. That’s a forced metric for no reason. Instead, you’re not removing things for the sake of removing things. Simplification isn’t a process of dumbing things down. Simplification is a process of figuring out the right place and time for things. When should this information be surfaced, how, where, to people? That’s what makes things feel easy, or at least doable.

If you remove too much, you may remove some of the power or the value of your service. I don’t think it’s just arbitrarily cut 60 percent of things. Instead, let’s do the hard work to figure out what matters, where, when, and how—and to be totally blunt, that is hard work, right? You’ve got to not only prioritize the stakeholders, as you said, but you’ve actually got to think through interaction design, and then you’ve got to think through the visual design and have hierarchy.