via UIE Brain Sparks http://ift.tt/1l0DT7B
June 2nd, 2014
Podcast: Play in new window | Download (Duration: 29:33 — 15.3MB)
“We have to go mobile”. It’s a prevalent phrase in many organizations these days. There’s a clear recognition that mobile is a “thing”. Oftentimes however, exactly what mobile is and the reasons for “going” there aren’t necessarily clear internally. Simply moving your current design to smaller screens or making it responsive without regard to content or context won’t cut it.
There’s no better person to talk about the trends and direction of mobile than Luke Wroblewski. He’s consistently been at the forefront of the mobile design discussion. Through his books and his various talks, he’s advocated a mobile first approach, focusing on what is absolutely necessary and letting that inform the desktop design.
Luke says it’s necessary to look at how your service or product is framed in the broader picture. Most are built upon tradition web structures, and then “mobilized” now that smartphone and tablet growth has exploded. He compares the difference between mobile and PC to that of television and radio. You wouldn’t just drop a radio program onto TV without optimizing it for that platform. The same should be considered for mobile as a medium.
Luke will be presenting one of 8 daylong workshops at the User Interface 19 conference October 27-29 in Boston. For more information, visit uiconf.com.
Recorded: May, 2014
[ Subscribe to our podcast via
←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]
[ Subscribe to our podcast via
←This link will launch the iTunes application.][ Subscribe with other podcast applications.]
Full Transcript.
Jared Spool: Welcome, everyone, to another episode of the SpoolCast. Today, we return to our old friend, who isn’t that old — he’s actually quite young — but he’s a friend, for sure. He has been on many of our SpoolCast episodes. He is, of course, the great Luke Wroblewski, who will be speaking at the User Interface 19 conference, coming up October 27-29 in Boston, Massachusetts, and he’s going to do a full-day workshop on mobile design.Luke, thank you very much for joining us today.
Luke Wroblewski: Thank you for having me.
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, and the way we’re going to go to mobile is we’re just going to take our desktop and we’re somehow going to just mobile-ify it, and we’re just going to move it over into mobile,” and 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, but maybe we should coin one. Maybe desktop-first thinking or something like that is appropriate.
Jared: Yeah, maybe. Or, legacy desktop-first or something…
Luke: Legacy-first. [laughs]
Jared: Legacy-first.
[laughter]
Luke: That’s excellent. I think the broader picture there isn’t just necessarily, let’s take our desktop site and mobilize it. It’s really that’s what people’s understanding of their service and their product is framed around. It’s 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 to be 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 a lot is a lot of people taking their PC experience and dropping it into mobile. It’s same kind of effects 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. [laughs] Right? 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, businesses, you name it, is going these days.
Jared: Right. What are some mistakes that people are making when they move from desktop over to mobile? What are some of the things that get them in trouble?
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 — and you find 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. What they’ve done is they’ve created a very bad experience on mobile.With the mobile, you can 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 — this is a device made for entering phone numbers. It turns something that should be natural, intuitive, and super-easy on that kind of device into something that’s 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 or you do that across your whole site or you do that across your whole app, and 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: For a long, long time, I’ve now been advocating treating mobile as a first-order citizen, if you will. The methodology around that, both from a design and development perspective, is to work through the mobile experience first and then start to treat the larger-screen PC experiences as enhancements. “Hey, we got more screen space. What can we do with that screen space?” “Hey, likely we’ve got a faster processor or network connection, or the battery life can last longer.” Those things are ways to take advantage of those capabilities when you get them, but they don’t force those kind of considerations onto the small-screen, low-network view, which is the mobile view.You start with the mobile experience. You make sure everything is great for that form factor, right, entering phone numbers and the like. What you’ll also find is, if you make it work good 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 you use a single input field, you don’t do any of this 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 doing on a tablet, 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, works great.Those kinds of enhancements you make from a usability perspective because of 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, if you will.
Jared: It’s reminiscent to me of, if you start living in a smaller apartment and then you move 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, and you have to prune it out and 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. What I see over and over again — you asked what mistakes people are making. I think the best way I could summarize that is, 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.Think about what life in that small apartment would be if you took all your stuff and you just shoved it all in a giant stack inside a closet. That’s the navigation design decisions people are making on mobile. They’re putting everything in the closet. If somebody tries to go use it, all of a sudden they’ve got to to open that closet door and browse through 50 gazillion options trying to figure out what’s there and how do they get to it.The way to really build an appropriate mobile experience is, look at that stuff that you have in that giant nav, figure out where it’s important, where it’s relevant, where it creates value. To come back to the apartment metaphor, maybe these two things really matter in the kitchen. Maybe these three things are very important for the living room. Maybe these five things are bathroom stuff, and when you get to the bathroom, it should be front and center, very visible, rather than sitting in the closet all day.
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, for when people need it. I don’t think it’s like, let’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.If you’re looking for easy solutions, like, “Oh, mobile equals menu off-screen in a hamburger nav,” or “Mobile equals one long scrolling page to fit all my content,” if those are the kinds of solutions you’re looking for, you’re never going to create a great mobile experience, because you’re not doing that hard work. That I think ultimately is what does create a good mobile experience.
Jared: The thing that I’m seeing now is people are looking at all of the content they have on their home page, let’s say, and they’re trying to figure out “How do I get all of that to line up so that people can find it.” And they’re just taking the content and they’re organizing it one box after another, and just coming up with an order and just putting it all there. The schedule, and the note from the CEO, and the press releases, and today’s news, and all of those boxes become this long, scrolling thing when you have a narrow screen. And that doesn’t feel like it works for me. Is that the right approach, or is there a better way to tackle this?
Luke: I think that’s the “Let’s stack everything in the closet” approach, right? Let’s take all our stuff and put it in one big tower. And if you actually do that, with most websites you’re going to create things that are thousands, if not tens of thousands of pixels tall. That’s how big the average web page is. On mobile, you’ve created 10,000, 20,000 pixels worth of scrolling. You tell me if that’s a good way of finding things and accessing it, To talk to some of the elements you’ve just laid out there, and in keeping with our apartment metaphor for a second because I think it’s a good one.Let’s say approach one is stack everything in your old house into one big tower, and some of the things that are in there are like the letter from the President, the latest news. The letter from the President probably makes sense near a greeting room, if you will. The news, perhaps makes sense on the couch, or at the kitchen table, if you will. There’s things that have a place, right? There’s a time and place for things that’s appropriate, and if you think about it either as the right environment, or you think about it as the right sequence, if you will, you get a lot more creative solutions about how to structure experiences.They don’t all have to be drill down, drill down, drill down, drill up, drill up, drill up to get access to information. In fact, some of their more interesting mobile patterns, I know you guys have probably done a Spincast with Rachel Hinman?
Jared: Oh, yeah.
Luke: OK, in her book Mobile Frontier, she has a couple of patterns of what she calls mobile unfolding. That would be just one way of getting people to dig deeper on mobile experiences. She has things like hub and spoke, she has things like bento box patterns, filter feed patterns, all these organizational patterns around getting through content and exploring content that work well on smaller screens. Getting into those, those give you options, right? If you want layouts for rooms, or maybe I’m extending this metaphor way too far with the apartment. It seems to hold up still, I guess.
Jared: Yeah, it’s working for me.
Luke: All right, good. Let’s keep beating it until it dies a terrible death.
Jared: I’m the one who brought it up, it’s my fault no matter what. It feels like that one of the things that’s happening is people are so stressed by their shift to the smaller screen, that they really are trying to cut corners in ways that in the long term, are just going to come back to bite them.
Luke: Yeah, that sounds right. And I wonder if it’s scared, or if they’re under pressure to come up with a mobile solution, or if it’s really just their framing of their business and their product. I really fundamentally see, over and over we get this starting point for what are we doing? Is that picture of the website that’s in their heads, has that picture just been there for 20 something years because that’s what the website has been for 20 something years? And it’s really hard to let go of that.
Jared: Well, I’m going to guess that a lot of websites evolve over time, and no one sat down and created the Walgreens home page, per se. Sure they laid out some general boxes, but in the years since that site has come up, people say “What if we just add this? What if we just add that? What if we add this and make it a carousel?” Over time, it’s become this series of things that someone politically fought for, and now, you have the dictum. They come to you and they say “OK, here’s what we need you do do. We need you to make this mobile.” And rule number one for making it mobile is you’re not allowed to try and take away anything because we don’t want to reopen those battles.
Luke: Yeah, we get right to this design. This is the design that’s working. But I think you just nailed it when you said “The Walgreens home page.” The way you started it out, talking about “What are you doing?” It’s the Walgreens home page, not the customer photo experience. And that’s a totally different thing, or the customer pharmacy experience. When you say the words “customer pharmacy experience” or “customer photo experience”, yeah, the website may play a role in that.But so will mobile, so will the store, so will the parking lot in the store. And mobile is really this bridge, if you will. This is why I started at the beginning, talking about it as a different medium. It’s a different form of interaction. Sure it’s digital, sure it has a screen. I don’t have my laptop in my pocket when I pull up at Walgreens to get my photos.
Jared: But is anybody really succeeding at this idea of splitting up mobile into multiple apps? I mean, I’ve seen folks do it. Facebook tried to put messages in a separate app, and now FourSquare has FourSquare and Swarm and I can never remember which one does what.
Luke: Sure. Let’s talk about that for a second. Multiple apps, coming from these single, giant, monolithic entities on the web. That’s another way they’re trying to solve the problem, but let’s look at apps that are massively successful. WhatsApp, all it does is messaging. It does it amazingly, half a billion people a month, active using it. All it does is messaging, right? Instagram, all it does is photo, and now these dinky little video sharings. They’re very, very focused and very, very simple, but they started that way. It didn’t come from the baggage of “We are this giant, monolithic website, how do we put it on mobile?”
Jared: But they didn’t have to come from that baggage, right? Nobody at Instagram said “We’re going to ignore the baggage of ten years of web evolution for us, and we’re just going to do this one thing on the mobile.”
Luke: But other companies have done that. eBay, when they did their first mobile app, and they’re very successful in mobile compared to other companies. When they did their first mobile app, the story I heard from folks on the team was a PM, a designer, and then they contracted out the development. And they made it very easy. There were three tabs out of the gate, “My eBay”, “Buy” and “Search.” And it was massively successful. In fact, Carla Neal, when she gave a talk about it not too long ago, she said in the next iteration they added two things, and people freaked out, and they were pissed, and they had to roll back to the simple version.Because they thought the app was getting too complicated, and trying to do so much. All their research, the thing that comes back about their mobile experience over and over again is people love the simplicity of it. They prefer it to the desktop. Even in a big organization with a lot of stuff, it’s possible to do this.But in fairness, that team was totally cordoned off by themselves, doing what they were doing, and they probably had a due date of an Apple Keynote or something, they’re under a gun. But it’s a big company that did start from scratch, if you will, and create a good mobile experience, at least back then.
Jared: Right. But they also did it at a time where mobile wasn’t so prevalent and wasn’t so under the microscope of the executive team. It could have come out under the context of well, let’s just experiment and see what happens if we put out this small thing. Whereas today a lot of folks who are just moving to mobile now are feeling like they’re way behind.
Luke: Yes, they need to learn a lot, right?
Jared: Yes.
Luke: They’re way behind, so they need to learn. How do you learn?
Jared: You learn by taking baby steps.
Luke: You learn by trying small things, experimenting, right? Getting your feet wet. You don’t learn by making this giant monolithic project of something you don’t know anything about yet. That seems like a formula for failure to me. We’ve never done this mobile thing before, so let’s create a huge project that’s going to take multiple years and pull all of our content over to it.
Jared: Yes. We need to move to the moon, let’s build a whole city up there.
Luke: Right. This is my thought. Send a little space probe [laughs] and try and find a place to actually put a brick or whatever.
Jared: That’s an interesting idea, right, to create — as much as I hate the phrase mobile strategy — but if you think about a strategy that’s going to get you onto mobile instead of thinking about well, how are we going to get everything over to mobile at once, we break it down into little things and we just try and get one important thing.Let’s say, we’re Walgreen’s. We get just something about photos, because photos is the most common thing people come to their website for. We just take that and we go and we create a little photo app. Maybe it’s an upload and share picture app. We just get our feet wet with that. We learn how to do the navigation. We learn how to do the layout. We learn what it like…and then we try and build on that.
Luke: Yes. I liked actually the Walgreen’s example because a lot of our — some folks that are talking about some of the things that they were doing. What they found that a customer that they get on multiple channels is worth I think it was either two or three x — I think their number was three x — more valuable than somebody that’s on just one channel. Somebody that just goes to a store is a third less valuable than somebody that goes to the website and goes to the store.
Jared: Right, yes. I heard them say that too.
Luke: I think it was three x, but even if it’s two x, it’s still good enough, right. The way they describe the process — this wasn’t for photo but for pharmacy, which I believe is probably their second biggest driver. The way they did pharmacy was you go in there to get your prescription and they ask you, “Hey, would you like us to text you when that prescription is ready?”And they get something like 20 percent opt-in rights, which is huge. How many businesses would you give your phone number to to text you? Zero, right? And here they get like 20 percent opt-in rights. That’s a very small mobile experience. What we’re going to do is SMS you when your prescription is ready and you’re browsing the store. But now they have contact with you.But that’s a very small baby-step mobile thing, very native mobile thing you can do right away. Nowو they’ve got your SMS and they text you when the thing is ready. You leave the store. You’ve got your prescription.Then what happens is it’s getting close to refill time. فhey’ll text you and say, “Hey, if you want to automagically refill this download our app that does a scan of the bar code. You don’t have to enter any information. We’ll just have that prescription ready for you. You can pick it up at any time.”Now, they get you to download an app for refilling prescriptions. Now, they’ve got you on three channels if you will. Then, when you scan that bar code, and I’ve heard a ridiculous amount of their on-line prescriptions now are refilled through bar code scanning, because it’s so easy, one of the managers on their tweeted me the actual number and then pulled away, because I guess he got in trouble. But it was something above 40 percent, to get him into further trouble.Jared: [laughs]
Luke: Now, you refill that prescription, and when you go to the store, there’s a special parking spot reserved for you right out front for people who have refilled their prescriptions online. You get this special parking spot. You walk in the store. Your prescription’s ready for you, and while you’re in the store you buy two or three things, and that’s how you become more valuable.When you break down the role of mobile in there, it’s not how do we make our website on mobile, it’s how does mobile fill in parts of the customer experience. And they’re very small baby steps, right. Send an SMS message. Send another SMS message to download the app. Have an app that just scans the barcode and refills. Put up a parking sign in the stores for those online customers.
Jared: It really is this process of thinking about it in baby steps and having the tools and the methods to be able to execute those baby steps quickly and iterate over them.
Luke: Let’s go back through that scenario and let’s say the only thing they did for mobile was put their website on mobile, right. Big loss, they’ve lost 20 pages. You check in at the counter. “Here’s my prescription.” “Oh, great, if you’d like us to notify you, please go fill in the form on our website. That’s walgreens.com.”And so, you pick up your phone, tap in walgreens.com. Up pops this giant scrolling web page. You’re like trying to get through their 40 levels of nav to find their “Notify me when done” thing. Then you tap on that. Then there’s a web form and you fill in the web form and you hit “Submit.” And then it emails you when it’s done.
Jared: In the meantime, it’s asking you about products and services that you, at that moment, are not going there to do, because most of their website is about talking to you about things that you didn’t come to this site to do at that moment.
Luke: That is — if you treated your quote unquote mobile strategy only as “Let’s make our website a mobile website”, that’s what you would end up with. But if you treat your mobile strategy as like hey, someone’s there, what kind of need do they have? Where are they in the customer life cycle? You know what’s a great solution there? SMS, and that’s a very native mobile experience that’s very lightweight for us to build.
Jared: Yes. That all makes perfect sense to me.
Luke: Too bad there’s bosses and clients who don’t think this way, right? This is the typical retort now. Makes sense to you and makes sense to me but how do I convince my boss that that’s the right thing to do?
Jared: Yes, actually, you’re telling people when they say that.
Luke: I try to arm people with as much data as humanly possible. Like I can tease a little bit of a workshop that’s happening at UI19. The way I organize that workshop is around what I call design considerations. They’re not design patterns. They’re not like design principles. They’re really things to think about while you’re in the process of design that will ultimately get you to a good answer.And that process of thinking it through also begins to build credibility for you in the organization. Because you go from a state of how shall I say, pushing pixels if you will, sometimes just to be sort of deliberately derogatory, to being the person who is like “Hey, you know, if this is what we’re trying to achieve, here’s some ways of solving this problem. And here’s some things that we can do to get this to go.”You expand your repertoire. You have the ability to not only help people solve their problems but explain to them the pros and cons and different ways that you can solve their problems. You become a resource. You become an informed contributor to that team.And this doesn’t happen instantly, right? You don’t just like all of a sudden become credible on the team. But the more and more you add value and the more and more you could show that your solutions to the problem are thought out and coherent and actually take advantage of the opportunities and limitations on mobile, the more people start to trust you, the more you get involved in those conversations and the more you can actually have influence on business like that.The fundamental problem I see with that question about how do I convince my boss people see is like a one-time thing. Like, “OK, here is the card you give to your boss.” Now, he is convinced. Human relationships do not work that way, right. Working relationships do not work like that. It’s a process and you build up credibility over time and you do it in work situations through the work you do.I think that’s the way I have been able to do that and that’s the way I think others have been able to do that, and so that’s the way I advocate it. Get informed, get educated, provide value as many times as possible over and over again. Soon, you won’t have to convince anybody of anything. They’re going to be coming to you asking what they should do.
Jared: I’m really excited about the workshop, because these little tidbits of both how to understand what’s happening with mobile in the world and how to go forward and apply them to the designs that we have to do, that’s what’s making change happen. Having had the opportunity to sit through a lot of your presentations, I feel like I learn something every time I come to it, and it’s really a lot of fun. I’m really looking forward to the fact that you’re coming back to the User Interface Conference this year.
Luke: Me, too. Thanks for the endorsement, Jared. [laughs]
Jared: There you go. Cool. Thanks for taking the time to talk to us today.
Luke: My pleasure as always.
Jared: And I want to thank our audience. You will have the opportunity to hear Luke talk about all of this at the User Interface Conference, which is happening October 27-29 in beautiful Boston, Massachusetts. Go to uiconf.com and you can learn all about Luke’s session and the other great presenters that we have doing full-day workshops there. We’ll hope we see you there. Luke, thank you very much.
Luke: My pleasure. Thanks, Jared.
Jared: I want to thank our audience for listening in and for encouraging our behavior. We’ll talk to you later. Take care.
In today’s ever-connected, increasingly social world, images and videos are fast becoming crucial elements of digital marketing. According to a recent
