Jared Spool: Welcome everyone for another episode of the SpoolCast. I am Jared Spool and we are here today with the great, the awesome Luke Wroblewski, formerly of Yahoo!, currently of Bagcheck. Luke how are you doing?
Luke Wroblewski: I am doing quite well Jared, thank you.
Jared: Now you're speaking at our upcoming Web App Masters Tour. And you are talking about something that you've been talking a lot lately, which is mobile design.
And I think a lot of people think of you as a guy who talks a lot about everything that has to do with web-based forms. But this mobile stuff, this is really important stuff right now.
Luke: Yes it is. Well, I would like to think people think of me as the guy who takes things that usually suck and tries to make them better.
Jared: Yes, yes, which is...
Luke: Just a little more broad.
Jared: It is a little broader. It's sort of the exact opposite of what I do.
Jared: But yes, this is really interesting to me, because all of a sudden everybody is focused on mobile. Mobile, mobile, mobile. But a lot of it to me is sort of lip service.
But you've been like one of the first people who's been out there, who's really talked about what it's like to design in the mobile space. Where is your interest in this coming from?
Luke: Well, to actually pull it back to the forms things, the reason I got interested in forms was because forms run any kind of interaction on the Internet that's important, shopping carts, registration, people talking amongst themselves, people balancing their accounts and their banks.
And nobody was really giving forms the attention they deserve from a design perspective.
Jared: Yeah not to mention signing up for stuff, and getting on our mailing list, and becoming a solid sales lead, and all those business things.
Luke: All those wonderful "contact us" forms that are out there. And I think mobile to me at least when I started getting into it, which was probably around three years ago, three and half years ago, now during my time at Yahoo! Actually, shoot it's 2011, it might be even further than that, maybe four years ago. Time certainly flies.
At the time the web on mobile devices was really crappy. But at the same time we always had this promise, oh the mobile was going to revolutionize everything because everybody has a mobile device.
There's going to be more mobile devices than people in the world. And it was always this next big thing, next big thing, next big thing, but the experience sucked.
Just like web forms enable all the stuff on the web, but the experience sucks, the same thing was true with mobile. Then in June of 2007 or so Mr. Steve Jobs got up there and put out a device on which using the web actually didn't suck.
And all of a sudden my eyes lit up and my ears perked up and I said, "Holy crap, this is going to be interesting."
Generally anytime you see something go from really darn slow and ugly to fast and cool a lot of people start using it. I saw that same transition between Gopher and Mosaic. I got my start on the web back in NCSA.
And NCSA Mosaic came out, which was the first widely distributed graphical web browser. All of a sudden it opened up a whole new audience of use to the web.
And I think the same thing is happening with these more capable browsers and devices on mobile. You're seeing all kinds of used cases emerge that just weren't there before, because things were painfully slow, painfully designed, and just an awful experience from the most counts.
That was primarily true in US and other markets. Japan always did pretty good with mobile always. over the past years they've done quite well with mobile because they had different implementations out there.
But for the western world to a large extent mobile was wait, wait, wait, and then get a bunch of text links that you can click through to see an icon. And that's it, right. So it was really, really bad.
Jared: I think for me the moment became crystal clear when I was sitting in a restaurant, and I'm talking to one of my oldest friends who's like been my mentor for years. And he's been this guy who just is always giving me this great advice. And he is telling me this book I should read.
Instead of doing what I'd always done in the past, which was just take out a little piece of paper, a napkin and write down the name of the book and go check it out later, I actually brought it up on my phone from the Amazon website.
While we're talking, barely being distracted from the conversation, saw that the book was there, pressed the buy now button and boom, the book was ordered and on its way to me. And it barely made a dent in our conversation. It just changed how I looked at mobile from that point on.
Luke: You know I think we're still really in the beginning stages of this stuff. I personally have this philosophy that what we call the personal computer isn't really the personal computer, the laptop, desktop that you have attached to your messenger bag or your desk at home.
The real personal computer is the thing that's with you all the time. That increasingly is our smartphone levelish mobile phone. And it's much more personal than your laptop or desktop can ever be, because with a single click you can talk to anybody you know. The address book is sort of embedded in it.
And not only can you talk to them, you can text message them, you get instant messages, and you can now do video calls with them. You can as you said buy anything you want using the services you're interested in. And you can look up any information you want.
You can play god and say I'm stuck in traffic right now, show me an over head view of the map with real time traffic, and give me a satellite view to see if there's a short cut I can take half this road somewhere else, right. And all that happens from the palm of your hand literally.
Jared: Wow it sounds so sci-fi when you express it that way.
Luke: Well it is, right. It's the old William Gibson, "The future is here, is not just evenly distributed yet." So yeah, I think these devices are much more personal. They can be used anywhere and everywhere because of the high portability factor.
And they're connected to a network through pretty decent speeds, and increasingly getting better. And now we have all of our assets in the cloud. This is triumvirate that Google CEO, Eric Schmidt talks about.
He says, because these devices have better processors, there are faster networks, and because more and more of our stuff is up in the cloud, then the mobile phone is sort of this high volume end point of what we can do with computers right now.
And I think this is why Google is super excited about this idea of doing mobile first stuff as well. I think of all their major initiatives this year are sort of mobile oriented, at least if you believe what they tell us in the press.
Jared: So their first initiative to be evil was going to be mobile?
Luke: [laughs] That's right. Be evil on mobile first.
Jared: [laughs] Excellent, excellent.
Luke: I'd like to see that.
Jared: It's something they're trying. They're going to see how it works and then...
Luke: Right, exactly.
Jared: That probably won't work so well, so they'll go back to not being evil. So this is really, really interesting, particularly because there is all this shift.
And I was just talking with Mike Lee who's going also be at the Web App Masters Tour from AARP. And he's talking about how at AARP all the executives now walk around with iPads under their arms.
And I'm seeing this at other companies too. We have other clients. They take their iPads with them everywhere they go. And that's their sort of new notepad, status symbol thing.
I think that the iPad and the tablet in general, though it's still mostly the iPad as far as I can tell, the Galaxy tab I see some people with that. I don't see many other tablets right yet.
Those shift the dynamic again a little more, because all of a sudden you have a bigger screen to play with. But you still have this touch and this very flat interaction model that doesn't let you Alt Shift to get to some other application very easily.
Luke: Although they do have now the double tap on the "Home" button to let you toggle around. And this is why the people that take to these devices like the iPad very, very quickly are the young and the old if I can generalize.
My 18 month old son was just all over the iPad, almost instantly. And the only time he gets tripped up it's when some graphical user interface menu pops up at him with some choices, then he comes over like, ugh, ugh, ugh, get this thing off the screen, right.
My grandmother is the same way. The computer just baffles her. All the windows icons, menus, pointer things, but something like an iPad where the entire surface is a direct manipulation device, touch a photo, make the photo bend or want the photo away, just push the photo away.
That's a little bit more approachable when you don't come from this hard core baggage that we tend to have on the desktop.
Jared: You mean the little "x" button and the little green zoom button that works some of the time the way you expect, but not all the time?
Luke: You might actually have some data on this. Once I saw a study and I tried to find it recently, which it did a time-map of how much time is spent manipulating interface elements on the desktop versus actually getting work done.
Jared: Oh yeah, we have something from years ago where we did this. Because we have this whole idea of what we call tool time versus goal time, where goal time is the time, where you're actually working on whatever it is.
So if you're trying to write a book there's the time when you're thinking about the book, and actually putting the words about the book on the thing. And then tool time is the time when you're trying to format that bullet list, and for whatever reason Word just will not let you format it the way you want to format it.
And spending twice as much time getting that formatted it isn't going to be like the book twice as better. Yeah, we've got data. Oh boy do we have data. [laughs]
Luke: You're spending all your time moving around the windows, clicking on the little buttons and all that sort of stuff. And when you get into a world where direct manipulation is the modus operandi, you ideally start to interact with the actual content. The content becomes the UI, not all the chrome around it.
When I go and talk about mobile first and I give teams some advice about where to get started, one of the things I like to encourage people to do is imagine you're on a device like the iPad where there are no hardware buttons to rely on.
There isn't places that you can drop menu items like you can on an Android device, or hardware controls for things like search and back, like on a Windows 7 phone.
Because when everything has to be on the screen you are forced to think about these natural user interface principles. You're forced to think about, OK, well is there a way for somebody to actually interact with the content we have here, rather than a scroll bar, or a button, or an x, or all these little interface chrome elements.
And this is why I say we're early in this. Because we've done them a disservice by forcing them to use all these WIMP stuff for so long that that's what their expectation is. And so they don't expect that they could just take some text and pinch it to make it bigger, right. That's like a foreign concept, directly manipulating something.
Jared: Right, right. And by WIMP stuff you don't mean just sort of wilts when it's faced with a challenge. You're talking about windows icons, mice and...
Jared: Pointers, yeah.
Luke: Menus. I think it's windows icons, and menus, and pointers.
Jared: Yes you're right; you're right, windows icons, menus, and pointers.
Luke: Yeah, exactly. That's the model I'm talking about. This is where I like starting with a blank, the whole screen is the interface model. Because that pushes you toward those principles, which I think are very good.
And overtime hopefully we get rid of all these layers and abstraction that keep us from the content if you want. Early computers you sort of had the punch card stuff.
You'd go and get the punch card, put it together in a punch card machine, you'd go feed it into the computer, it would get printed out, get put in your mailbox, you can take it out and then you see what you learned.
Jared: Dude that was my teenage years.
Luke: There were a lot of layers of abstraction there, right. You had the punch card machine, you had the cards, you had the mailbox, you had the insertion.
Jared: I worked on this program that played chess on this IBM 1620. And we had to code the program. Now this was a personal computer. So this wasn't a big mainframe that we were working on. Well that was in some other room. I worked on those too, but this was a personal computer. I was sitting right in front of the machine.
But the way it worked was you went to the punch card machine, which was a separate device and you punched up cards. And we have maybe a thousand cards in this card deck. Each one had an instruction.
And you would then feed this through the machine. And it would punch a new deck of cards which was the object deck. And you would take that with your subroutine libraries, and you'd feed all those object decks together, and it would create and executable deck.
And then you could feed that in. And then you had to feed in the cards that actually had the moves for your chess game in them.
And it would print out the next move after you gave it that, and then you would feed the back through it and it would print out the right through. And that was how you played chess with this computer. And it took thousands of cards to do this, and hours just to execute.
Luke: Right. And then we had the command line where you could type in, move in some abstract language, move a thing there, and it would respond with some text. Again, little less layers of abstraction of the punch card system, but still a lot of abstraction keeping you from what you're actually doing.
Then you get into GUI where you're clicking with the mouse on a representation of the thing, and then you're clicking to the next play, so maybe using a scroll bar, or a button to pick which thing you're going to move.
And now you're on this NUI interface like the iPad where OK, you want to move your rook, you just drag the rook to where you want to put it.
So each time successfully we've removed all these layers of abstraction got people closer and closer and closer to the things that they actually want to interact with, which I think it's great.
Jared: I think that getting on that path and getting closer there is really core to what's happening now. But I think for a lot of organizations it's a hard mindset to switch over.
This idea of moving away, and plus, you've got what Tamara Adlin refers to as the corporate underpants. You go to something like United.com. You can see all the different departments at United fighting for that home page space.
Because there are the people that want to sell you the vacation packages. And, there are the people that want you to sign up for the Mileage Plus program, the loyalty program.
And, of course, there are the people who want you to check-in online, so that you don't eat up the number of gate attendants they need, or ticketing agents that they need. So they can reduce that demand at the airport.
There are all these different business aspects that are fighting for that home page. If you go and you make that home page smaller, how are they all going to get their piece?
Luke: Oh, they can't. That's the beautiful thing about it. Frankly, you have to make some hard choices. Right? I think a lot of those hard choices actually become good for business and good for customers.
The kind of numerical model that I use when I talk about designing for mobile versus designing for the desktop. On the desktop, we've all sort of agreed, you've got 1024 by 768 pixels, roughly, to work with. Obviously, it changes per resolution, or whatever, but that's where everybody has at least put a beach head.
When you move to mobile, you're little beach there becomes little more than a sandbox. If you go to a standard mobile viewport on the smart phone size, 320 by 480, or so, you've lost 80% of your space. So, that means 80% of the departments, or functions, or features that were on the page have to go.
That really gets you to say, "OK. Well, what's important here? Not just for us as a company, but for our users." Because, if you only put the things that are as important for you, as a company, on there, guess what, you won't have any users.
If you only put things on there that users want on there, because you have so little space, then you won't have a company, because you might not be making money off of that. What you have to do is align what people actually want to do, and how you make money, and prioritize that in this tiny little space.
It's a great focusing exercise. Rather than the, "Oh, we'll just add another module over here. Oh, let's just throw this there. Oh, I need to be above the fold." Those are the kinds of conversations we have about websites.
Jared: Now, you've left Yahoo, and you're off doing your own thing. You're creating this cool, new, amazing app thing. This thing is designed to work mobile, right? So, you are actually having to apply a lot of this thinking that you've had, right to the work.
Luke: Yeah, our first product was a mobile product. It was sort of an alpha product. The reason why we did it on mobile was exactly that, to force us to focus on what are the core essential things that we need in each piece of the experience.
Then, also, it gave us the added benefit that we had it in our pockets throughout the day. So, we could interact with it in different scenarios, and learn throughout the day, throughout different situations, what was interesting about it, and what wasn't interesting about it.
We ended up dropping a bunch of features that we tried, and we're still doing that, to be clear. We're very, very early with our product. It's been out live for six or seven weeks, or so. I would characterize it more as an experiment, than a really cool, awesome application.
Jared: Right. Well, but I'm interested in this. I'm reminded of the Palm Pilot, right? So, the Palm Pilot, when it came out, back in the nineties, was this completely revolutionized, pocket based, digital assistant.
By today's standards it was a simple little device. It had an address book and a calendar and a to-do list, and very simple types of things you could do with it.
But, the first version of it, when it came out, the designers of it, they actually walked around with a block of wood in their pocket.
During the day, they would pull out the block of wood and the little toothpick stylus that they created for this thing, and would pretend to take notes right on this block of wood, so that they could see how it felt in their hand, and how it worked.
It feels to me like what you're describing is sort of a modern day version of that type of prototype. You built this thing. The original version was actually a web-based app, right? So, you didn't even have the baggage of having to create a downloaded native app.
Luke: Yeah, and that's actually a nice topic transition to the things that are going to be happening at the Web App Masters Tour. Josh is going to be talking about the native app versus mobile app kind of debate.
Jared: Josh Clark, yeah.
Luke: Josh Clark. And, exactly what you said, is one of the reasons why I think it's not really an either/or kind of thing. It's a both kind of thing. We did the mobile web version because we were able to put that on a number of capable devices very, very quickly.
And, we could change things on the fly, in a matter of minutes, if not hours, to try something out.
So, we were able to update things instantaneously. As soon as there's a change on the server, it's a change on the site. We could try on multiple devices. There wasn't this compiled and released different places.
You can very quickly realize what a decent experience is on mobile through HTML and the browser, I think much faster than you can doing that natively.
Luke: That's just one of the advantages you get. The other advantages you get, you know, it's currently very hard, I think, for any individual shop, even big company, to have somebody that can do a Silverlight app, a Java app for android, and Objective C app for IOS.
Now, RIM has these things where you can actually use Air or Webworks to go build applications for the new Blackberry things.
Nokia previously had their own dev environments. Now I think their moving over to the Silverlight thing. Then, if you want to be on Palm's OS, that's back to HTML, CSS, and Java scripts. You need these six different development skills just to get on, say, the five major platforms, however you characterize them.
Jared: Right. And each of them is majorly idiosyncratic, right? So, it's not like you can just be a good programmer and switch from one to the other. To get anything to run other these things, you need to know the subtleties and nuances of each one.
Somebody was saying that there are 100 different android platforms out there. To get something that runs across each of those, in a meaningful way, takes, really, a lifetime of learning, just to figure that part out.
Luke: Well, then there's the maintenance, right? It's not just building the stuff out, if it was only putting it out there, then you're probably OK.
It's putting it out there, and then going through, and every time you do a feature update, you know, launch a new feature, OK, guess what? You're updating that on five platforms, and QAing it on five platforms, and then compiling it, and releasing it into the app stores, and pushing an update.
It's just hard, and I'm not saying it's not worth it. There are definitely cases where you want to get closer to the mettle, because you need some of the capabilities that these devices have. Browser is much more limited. You can't get into the app store, so you can't necessarily have this one click make money button.
Jared: [laughs] Right.
Luke: But, if you're trying to figure out what you're doing, and you're just trying to prototype very quickly, then the mobile web, I think, is a fantastic solution for that. You can change things really fast. You can roll it out instantaneously. You can try it on a bunch of devices just about anywhere you are, which is invaluable sort of testing.
Jared: Well, it seems to me that this gives teams a real way to try things out, experiment, really get the feel of what that smaller screen's going to be like. Really get the sense as to what those touch-based interactions are.
There are things that I notice that are different the way these smaller screen apps have evolved, in that you have a lot of your data, just right there, upfront, instead of having this massive menu command structure that's ever present.
Everything's about the data in the forefront, which is, interestingly enough, something we talked about a long time ago, when we first started moving to GUI applications, and then, over time.
The first paint and word-processing applications, there were hardly any menu options on the screen. It was all this big window of your data, and your stuff. Then, over time, it became more and more features and clutter and stuff. Now, we're back to putting that data right upfront, and then operating on it.
Luke: Yeah, one of the design principles that I'll be talking on the tour about, for mobile, is content first, navigation second; which is just really putting something up right away that somebody can engage with, and saving the pivoting and the navigating for later.
There's, basically, UI patterns that you can use to make that happen. I'm still surprised at how many, both mobile websites and applications, the first thing they give you is a menu of choices, instead of content.
Don't get me wrong, the menu's important, and you can get to it, but it's actually the content that the immediacy of mobile, and the fact that you're probably on a slower network, and in some cases you're even paying for your data transfers, right? Giving you a list of choices as your first time experience tends not to work so well.
I'll be talking about that. And, I have a couple solutions, literally, of things that you can do to have that navigation immediately available, but still get people actual content or data right up front on that small screen.
Jared: I think that understanding how to get to that data first is a key piece of that mobile experience. Of course, that transfers way nicely back to your bigger app, so I can see that migration path of once you've nailed it for the smaller screen, bringing it back to the larger screen, and making it work there, makes for that experience to be so much better.
I think that's why we're seeing so many mobile design patterns move back to the larger screens in really new and novel ways. I'm very excited, because I think this is really a good time for us to go back and revisit what we thought were hard and fast, "This is how it should be done," rules.
I think now that's going to change. And, even with the newest operating systems that are coming, both out of Microsoft and Apple, you see a lot of those mobile things popping up. They feel much better.
Luke: Apple's pretty literal about it, right? They're like, "This is what we learned making the iPad, now it's in your OS." That's kind of the marketing scheme around their new operating system, which is pretty surprising that they're: a) so candid about it, and b) that they think it's a strong enough message to resonate with consumers.
If they're right, it actually mirrors a lot of observational data that I've gathered. Which is, I encounter people very frequently saying, when they use the mobile version of something, saying, "Oh, I wish the desktop version was this simple." Right? "If only the desktop version was as good as this mobile version."
Jared: I've seen that myself. I remember the first time I used Facebook on my phone. I'm like, "Oh. This is what I'm supposed to be doing with Facebook. I couldn't figure it out from the desktop version.
Luke: I think when you hear somebody say that, like when you're doing your design work on mobile, and you hear somebody say, "Oh, I wish the desktop version was like this," that's when you're doing mobile right. That's your barometer and benchmark. If you hit that point of feedback, then you're good to go.
Jared: As the desktop version goes, it's like Steve Jobs says, "You're holding it wrong."
Luke: Well, hopefully people take this stuff and take it back to the desktop. That was the whole idea behind Mobile First, when I started talking about it two years ago. Mobile is growing really, really fast, and it continues to grow exponentially fast, right now.
So, you probably want to do something with it, if you don't want to end up in a world, where people are mostly using the web on mobile devices, and you're not on mobile devices. Probably a bad state to be in.
And, then too, there are all these tight constraints that force you to prioritize, because you have limited screen space. You have to throw out things that aren't important.
Because you're on slow networks, you have to make things very, very fast and performant. Because people are on the go throughout the day, you have to make things really clear and obvious, and easily interactable.
So, if you do all those things first, then hopefully, you can trickle those things back to the desktop. Make it fast enough for mobile. Guess what? It's going to be blazingly fast on the desktop.
Make it clear and focused enough to use with a single eyeball and a single thumb, when you're at home trying to do things in between tasks, or when you're out on the go, trying to find some information.
If it's easy enough for that, it's going to be easy enough on the desktop. Hopefully these lessons transfer back to these other platforms, rather than just staying on mobile.
Jared: Right. Well, that makes perfect sense to me. Well Luke, this has been a blast. I'm really looking forward to your Web App Masters Tour discussion. You'll be joining us in Philadelphia, Minneapolis, and Seattle.
It's going to be great fun to learn what you've learned in terms of how you build out these mobile applications and make them really great experiences. I'm looking forward to that.
Luke: Thank you, and I'm really looking forward to the tour. It's got a pretty strong mobile emphasis.
Jared: It does, it does.
Luke: That's a pretty good thing these days.
Jared: It really is.
Luke: Should be great.
Jared: Yep, looking forward to it. I want to thank everyone for spending this time listening to us one more time. Hope you enjoyed it.
And, as always, if you want to learn more about what we're doing, with the UIE Web App Master's Tour, go to UIETour.com. If you have any thoughts and comments about this podcast, go and leave something on our Brain Sparks blog at UIE.com.
Thanks for taking the time to listen to us, and, as always, thank you very much for encouraging our behavior. We'll talk to you soon. Want to learn more on mobile design?