Mobile Design: Native vs Web

Lea Alcantara: This episode is brought to you by Craft CMS, a content management system that doesn’t suck. Whether you’re a content strategist, developer or content author, Craft has your back with some amazing features like its powerful Matrix field, which makes modular content a breeze, or Live Preview, which shows you exactly how your entry will look on the front end while you’re editing it. Craft is free for personal use and only $199 for most client sites. To learn more about it or to get your own personalized demo site, head over to buildwithcraft.com.

[Music ends]

Emily Lewis: Mobile design is a hot topic these days, but it’s also complex. There is no one right way to approach mobile design. Today we’re going to explore the differences and commonalities between native and web mobile design with Wren Lanier. Wren is a designer with a passion for creating beautiful digital projects. Since she started working on the web over 12 years ago, she’s done a little bit of everything, from advising startups on UX best practices to pushing pixels for Fortune 500 companies. She currently leads design in UX at Highrise, the content manager originally created by 37signals. Welcome to the show, Wren.

Wren Lanier: Thank you for having me.

Lea Alcantara: So Wren, can you tell our listeners a bit more about yourself?

Wren Lanier: Well, I am sitting here in my home office in Durham, North Carolina. I get to work remotely, which is amazing.

Emily Lewis: [Agrees]

Wren Lanier: And I’m watching the rain fall and the leaves fall and I’m thinking about all of the Halloween candies. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: And the Halloween candy commercials that I keep hearing. I’m really susceptible to suggestions about things like Kit Kats and brownies.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: And I don’t know. I heard a commercial for Kit Kats earlier today and I can’t stop thinking about that, thinking crispy crunch. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: I can’t even keep Halloween candy in the house until Halloween day because it will be gone. [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: [Laughs]

Wren Lanier: Right.

Emily Lewis: Before we get into today’s topic, Wren, how did you make the transition to mobile? When did you start experimenting with mobile design?

Wren Lanier: You know a few years ago, and it’s probably five or six years ago, I was working for a digital agency that was doing a lot of mobile work early on, both mobile work for clients and developing some of our own products, so that gave me an opportunity to begin exploring the mobile space. I think before a lot of other people were able to, because they sort of saw that as the future and jumped on the technology relatively early.

Emily Lewis: How did you get started learning? What was your process?

Wren Lanier: I really immersed myself in it, and I remember in particular, Josh Clark’s book Tapworthy.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Wren Lanier: I remember spending just hours going through that. I remember even being a park once reading it. I used to have these strong memories of reading that book and taking in everything. I remember I also had an opportunity to see Sarah Parmenter speak right at the front-end conference, and again, she was somebody just talking about the design conventions and the size of tap targets and things like that, that really helped me get started thinking about designing for touch.

Lea Alcantara: So in regards to that, has the transition been different today, like what they were talking about in regards to techniques on how to get started with mobile design?

Wren Lanier: I think Tapworthy, in particular, still holds up even though the landscape has shifted a good deal. I believe Josh has another book that’s just been sent to the printers so I’m really excited to read that as well.

Lea Alcantara: Oh.

Wren Lanier: Yes, I saw him tweeting about it the other day. So yeah, I think it’s gotten more complex.

Lea Alcantara: Yeah.

Wren Lanier: And I think we’ve also started to revisit some of those early assumptions about just what is the “mobile” context.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Wren Lanier: And also I think some of the assumptions about how people hold their devices. Somewhere out there, I should have looked this up. There’s tumbler of people holding and touching and tapping on their mobile devices in all sort of different ways that you would never expect.

Lea Alcantara: Right.

Wren Lanier: So I think there is something to be said for trying to design for the thumb area, making things tappable.

Lea Alcantara: Right.

Wren Lanier: But at the same time, people hold their devices in so many different ways that the thumb area is maybe not as primary as we once thought it was.

Emily Lewis: [Agrees]

Lea Alcantara: Yeah, it’s funny because I remember on Twitter, I think it was Faruk [Ateş] actually. He just asked a question about, “Okay, do you text with one thumb or two thumbs, or do you use multiple fingers?” [Laughs]

Emily Lewis: [Laughs]

Wren Lanier: [Laughs]

Emily Lewis: I’m curious, Wren, when you started Tapworthy, so this is really focused on the iPhone. That was really your scope of mobile at the time, like just dealing with the iPhone and thinking about those interactions with regard to apps versus like a website on a phone or even other different phones. Was it really you started that narrowly?

Wren Lanier: I think Tapworthy has a focus on iOS conventions in particular, but I think that a lot of the general principles it outlines can also be applied to responsive web, mobile websites, just as easily.

Emily Lewis: So let’s sort of talk about that nuance between native versus web, and tell me if I’m correct here, because this is not my area of expertise, native refers to like an iOS app or an Android app, and then that’s mobile, and then mobile web would be like a website on a mobile device. Is that correct?

Wren Lanier: I would say that it’s correct. Yes, it’s something you would be viewing through the mobile browser.

Emily Lewis: So how are the two different? How are they the same? I guess that’s a huge question, I know. [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: [Laughs]

Emily Lewis: So maybe if you could give like a couple of fundamental examples that might be different in terms of assessing or even building for the two.

Wren Lanier: Well, so I thought about this a lot, and I think the best way to approach it is to rewind a little bit and to remember that mobile web pages are still constrained by the Document Object Model.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Wren Lanier: And they’re constrained by the limitations of browser-based technology, and the web is amazing, the web is powerful, and it’s also open which I think is the best thing about the web and I want the web to stay that way.

Emily Lewis: [Agrees]

Wren Lanier: But anyone who has ever tried reading through an opinion from a W3C committee understands how slowly the web moves in terms of adopting new standards.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: And how the web is going through this democratic process and still supporting the legacy choices and the legacy paths from just practically decades ago, whereas native platforms are walled gardens.

Emily Lewis: Right.

Wren Lanier: Apple, in particular, they make their own rules and they don’t have to worry about building consensus or supporting legacy choices. Apple just does what it wants and it sets the standards it wants and that’s the only way you get to play.

Emily Lewis: [Agrees]

Wren Lanier: So the native platforms can support more sophisticated design patterns than the mobile web, and it’s because the native platforms don’t have to be democratic and they don’t have to be open.

Lea Alcantara: Interesting.

Wren Lanier: And they don’t care about supporting the past the way the web does.

Emily Lewis: [Agrees]

Wren Lanier: So on the web, I should be able to pull up a website from 1998 and it should work.

Emily Lewis: Right.

Lea Alcantara: Right.

Wren Lanier: And it might look weird because it’s in tables and it is 640 pixels wide and it is 10pt Verdana, which was never really a readable type size.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: But it should work because the web has that legacy support. If you try to run a native app that’s even two or three years that hasn’t been maintained and hasn’t been updated or supported, God help you. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: Yeah, yeah. [Laughs]

Wren Lanier: So native gives you this ability to do a lot of cool stuff design-wise that the mobile web can’t support as well. So native can typically give you some better performance speeds, some better response to touch, and a lot of things that are desirable, but there is this tradeoff, and I’m not trying to slight the web for not having that.

Emily Lewis: I don’t perceive that as a slight to the web. I heard it more as like, “Oh, who would want to build apps?” [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: [Laughs]

Emily Lewis: It’s like anything you build, at some point, it becomes completely obsolete.

Wren Lanier: Very quickly.

Emily Lewis: That seems discouraging. Do you feel that? Is that accurate, or is that just an assumption on my part? [Laughs]

Wren Lanier: [Laughs] You know it certainly depends on the length of your cycle as a designer on a project.

Emily Lewis: [Agrees]

Wren Lanier: But if you’re staying on the same app or the same product for a long time, you are constantly going to be updating it, constantly rebuilding it. At the same time, our web standards are constantly changing as well.

Lea Alcantara: Right.

Emily Lewis: [Agrees]

Wren Lanier: I was complaining to someone the other day that I have learned at least five different “correct” ways to code a navigation menu in HTML and CSS. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: As you know, in every few years, there is a new more standards compliant way of doing it.

Emily Lewis: [Agrees]

Wren Lanier: So in that sense, all of our technologies are constantly changing, but the native platforms, and Apples in particular, does change particularly fast.

Timestamp: 00:10:03

Emily Lewis: Yeah, I think that’s probably – I don’t know – could be exciting. [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: Yes.

Emily Lewis: I like…

Lea Alcantara: I like the double-sword sword. [Laughs]

Wren Lanier: Yeah. [Laughs]

Emily Lewis: Yeah, I think either way, I think either way, because I’ve read a lot of posts recently about people feeling that the web is getting knocked because it has some issues with dealing with performance compared to apps or even like Facebook apparently is going to, when you click on a link to an article or resource or whatever, it’s going to open it within an application as opposed to opening it in your browser.

Lea Alcantara: [Agrees]

Wren Lanier: [Agrees]

Emily Lewis: And kind of the pros and cons of each, but I think either, they both have their challenges, they both have their benefits, and I think it depends on who you are as a designer on what you want to build.

Wren Lanier: And the other thing I will say is that in my experience as the designer, I typically have had very little influence on the decision of exactly what the technology stack looks like for any app that I work on.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Wren Lanier: The platform choice is typically made by engineers, maybe with some input from the product owner. I mean, oftentimes, the business, the stakeholders, they will want to be in the app store or whatever, but there are also so many technology constraints, staffing constraints, can we get a developer? How much does that developer cost? Who is available?

Emily Lewis: [Agrees]

Wren Lanier: And again, just this perception of the marketplace, do we want to launch on iOS first? Do we want to launch on Android first?

Lea Alcantara: Right.

Wren Lanier: So really, the decision has very little to do with what you, as a designer, think would be super cool. [Laughs]

Emily Lewis: [Agrees]

Wren Lanier: You typically just have to work with the constraints that you’re given.

Emily Lewis: Before we go on, Wren, you mentioned something there. I was hoping you could define it a little bit more, but you mentioned products.

Wren Lanier: [Agrees]

Emily Lewis: Can you explain what you’re talking about with products, because I think, is that an application, an app as a product, a website as a product?

Wren Lanier: Yeah. This is an interesting shift that I think is beginning to happen, and of course, there is no consensus here yet, but I have started calling myself a product designer.

Emily Lewis: [Agrees]

Wren Lanier: And there is this beginning of this shift into sort of defining ourselves as product designers versus web designers, and when I think of products I do, I think of an application. Cennydd Bowles had a great series of tweets from about a year ago where he started to try and break down this difference, and he tweeted something like, “Behavior is the design material of products versus maybe something like content.”

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Wren Lanier: And I think ecommerce is sort of an interesting overlap between the two because on ecommerce, you could just browse and browse and browse and sort of consume pictures and consume descriptions.

Emily Lewis: [Agrees]

Wren Lanier: But then eventually, it you’re going to add something to the cart and check out, now you’re doing something that’s more like a product.

Emily Lewis: [Agrees]

Wren Lanier: So if I think of the website from my local restaurant, I just want to see the menu, I just want to see their hours, I want to see their location, but if we get to something like chipotle, allowing me to order my burrito ahead of time… [Laughs]

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Wren Lanier: That’s becoming something more like a product.

Emily Lewis: Interesting.

Lea Alcantara: So I’m really curious about the kind of the overlapping aspect of designing for products versus mobile apps versus native versus web, because I feel like there is a lot of overlap, especially since you work for Highrise, you can access Highrise on your browser. I’m sure for Basecamp, there is a mobile website to actually interact with your Basecamp items, but Basecamp also has its own mobile app… [Laughs]

Wren Lanier: Yes.

Lea Alcantara: And I’m assuming that designers have to cater for different reasons, for different things, even though the task in and of itself, say, as a Basecamp user, I’m going to take a look at my to-do list or messages and interact with that, is this the same, like the purpose is the same, but the interaction and design between the mobile browser website versus the mobile app?

Wren Lanier: Yes.

Lea Alcantara: I want to talk about the design process and thinking of a difference between how you would approach the mobile website, and they’re both products.

Wren Lanier: Yes.

Lea Alcantara: But I would assume that the approach is different for the browser versus the native app.

Wren Lanier: It is. We have designed a somewhat limited mobile website version of Highrise, and you can also access the full Highrise from your browser, but it is not currently mobile optimized. But let me go back, I think one of the biggest challenges when designing for any small screen is dealing with the issue of your limited amount of real estate, and I think that’s one of the biggest, biggest differences between mobile design and what I think of as web design the way I practiced it five or six years ago.

Emily Lewis: [Agrees]

Wren Lanier: There was a time when we would often be trying to sort of fill up empty space, like we need something…

Emily Lewis: Yeah.

Wren Lanier: We need something to put in the third column so that the page balances. [Laughs]

Emily Lewis: [Laughs]

Wren Lanier: Or something to put in the footer to add some visual interest, and so suddenly, we’re like, “Is there a logo? Is there an image? Are there some social links?” Like we’re just looking around for content basically, and that never happens in mobile. Like in mobile, actually, it’s the opposite. You’re trying to remove things. You’re trying to figure out, “What can we hide? What can we put in the menu somewhere that’s not always visible? What does need to be always visible?” So when it comes to those sort of clever hiding solutions and menus and fly-outs and pop-overs, it becomes a little bit easier and more elegant to do that with native code, and you can do some of that on the mobile web and in a responsive way. It’s absolutely possible, and HTML5 makes a lot of that possible, but you don’t have quite as many options for hiding and revealing things on the mobile web.

Emily Lewis: Interesting. So when it comes to dealing with that small space, is there like a checklist, a rule of thumb that you follow when you’re deciding what to limit, what to show and hide? Does it kind of almost correlate when you’re dealing with content strategy for a traditional website, determining what the priorities are, determining what the actions you want to happen are?

Wren Lanier: Very much so. I would say that good mobile design begins with content-first design. So you have that limited real estate, and oftentimes, possibly a limited attention span as well. So you need to be clear about what is and isn’t critical to be experienced at hand and design for that. I think good mobile design is like any other good UX design, that it should provide exactly what the user needs when they need it without the clutter or the extraneous distractions. So yeah, I think there has to be more focus on the content than ever before.

Emily Lewis: Have you encountered a situation where that has been difficult to convey to the decision makers? Like, for example, having that kind of discussion with just the traditional website with a client can be a challenge because everyone thinks their content is the most important content, the different departments and things there are just most important, and just to get them to get to consensus when you have quite a bit of real estate compared to a smaller screen, how do you have those conversations with people who maybe don’t understand the need for focus?

Wren Lanier: I think it is hugely challenging, and oftentimes, when dealing with stakeholders, very senior stakeholders, it becomes a series of compromises.

Emily Lewis: [Agrees]

Wren Lanier: I think there is a period of time, I’m thinking across mobile, the hamburger menu is sort of wonderful. [Laughs]

Lea Alcantara: Right.

Wren Lanier: And that unlike the tabs at the bottom where you can sort of have four tabs and then a More, and nobody wants their sort of line of business to be shelved behind More.

Emily Lewis: [Laughs]

Wren Lanier: With the hamburger menu, [laughs], you could give so many more aspect equal visibility.

Emily Lewis: [Agrees]

Wren Lanier: But yeah, I wish I had a magic bullet for dealing with those sorts of stakeholder disputes. I think user testing, even getting early designs into the hands of users and showing users something that has too many menu items, too many things on the page, too many boxes and arrows can be a way to begin to let people know that some things are just going to have to be less visible.

Emily Lewis: Yeah, that was occurring to me when you’re talking about it, that that would be a really good case for something like we’ve had Travis Gertz on the show talking about Live Wires, which are web-based wireframes.

Wren Lanier: [Agrees]

Emily Lewis: And that’s a really good opportunity instead of a comp where we’re sending it to a client and they just see this tall, skinny image that they can look in their browser and just go through on their browser because they’re hardly ever looking at that on their phone, you give them something that’s interactive and all of a sudden, then they’re… Because right now, I literally three days ago had a conversation about it needs to be “above the fold,” and I was like, “Pick up your phone and hold it this way and then hold it this way. Where is the fold? Tell me where the fold is, you know?” [Laughs]

Lea Alcantara: Yeah, yeah.

Emily Lewis: And so getting it in their hands even sooner. Is that how your workflows are that you deal? Are you designing in the app or in the browser sooner?

Timestamp: 00:20:02

Wren Lanier: I absolutely, when designing for mobile, want to do prototypes that can be viewed on a mobile device.

Emily Lewis: [Agrees]

Wren Lanier: Typically, for the last year or so, I’ve been using InVision.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Wren Lanier: And InVision has a great way that you can enter in mobile numbers and it will just send a message to the person, like a text message, and they can just tap on the link and open the prototype like right there on their phone. Whatever sort of HTML5 technology that InVision is using, it’s nice because the fold is such a myth on mobile because everybody’s devices are different sizes.

Emily Lewis: [Agrees]

Wren Lanier: I mean, even with iPhones, there is such a variety among iPhone sizes now. So InVision does a good job of sort of appropriately scaling your mockups, so that potentially two stakeholders with two different sized phones could sit there and look at it and sort of see how it would look different on their actual devices.

Emily Lewis: [Agrees]

Lea Alcantara: Interesting. So I kind of want to take a step back and talk about a couple of things that you mentioned earlier. So you mentioned a fundamentally good mobile design is content-first design. I’m curious to know what you believe are other really good principles of good mobile design. What should designer always make sure when they’re designing for mobile?

Wren Lanier: Yeah, content-first design and clearly-prioritized design, and I think that’s one of the biggest challenges as a designer because, like you said, when working with stakeholders, they often have difficulties amongst themselves setting their priorities.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Wren Lanier: And so constantly pushing for that and pushing clients to make what I would call the “difficult choices.” I think that good mobile design has involved a lot of difficult choices in order to make those priorities really clear.

Emily Lewis: [Agrees]

Wren Lanier: And I remember seeing something at a movie once about writing, like writing a novel is about making choices and if you don’t make choices, you’d just end up with a novel that sort of has everything in the kitchen sink and then it goes all over the place.

Emily Lewis: [Agrees]

Wren Lanier: And the same thing happens to a mobile app. You see a mobile app that nobody was willing to make choices, nobody was willing to make compromises, everybody sort of got their way and it ends up just kind of being a mess, and as a designer, there’s only so much you can do to fix that. [Laughs]

Emily Lewis: [Agrees]

Wren Lanier: That good mobile design requires hard choices and it requires good engineering.

Emily Lewis: [Agrees]

Wren Lanier: I think all good UX requires good engineering, and again, if there’s an unwillingness to invest in the back-end technology to make the app work properly, there’s no clever UI that’s just going to like magic it all away and make it that seamless Apple experience that everybody wants. I can’t make a four-step process into a one-step process with the magic of UI design if you’re not willing to invest in the engineering for it to be a one-step process. [Laughs]

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Emily Lewis: So does that affect your role, either where you are now or where you have worked in the past? Have you had the opportunity to work with the engineers or the content strategists to either influence or inform or at least be aware of what was happening, or do you kind of worked in siloed fashion as the designer?

Wren Lanier: I think working in mobile I always work very closely with developers and with whoever is developing.

Emily Lewis: [Agrees]

Wren Lanier: We shipped a Highrise iOS app earlier this year, and our CTO and I were in a constant tight feedback loop as I was providing new designs and he was building things into the app and we were looking at them in alpha, so definitely you have to be able to work closely with developers. I have not had the opportunity to work with content strategists on an app. I would love to have the opportunity.

Emily Lewis: [Agrees]

Wren Lanier: Some of my best friends are content strategists. I think they’re doing the good work, but I think if that were possible, the content strategists could make the designer’s life so much easier.

Emily Lewis: [Agrees]

Wren Lanier: I often feel that some of the hardest parts about mobile projects are just me acting as an ad hock content strategist. [Laughs]

Lea Alcantara: [Agrees]

Emily Lewis: With you having to make the decisions when it gets in front of you and you have to find a way to deal with everything they gave you. [Laughs]

Wren Lanier: Yes. [Laughs] Yes.

Emily Lewis: So do you think that mobile requires a different skill set than traditional design?

Wren Lanier: That’s a good question, but I think back about it. I remember a time when in web design, you could almost get away with being something more like a traditional graphic designer.

Lea Alcantara: [Agrees]

Wren Lanier: And sort of laying out when pages were more are like posters or as magazine spreads. [Laughs]

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Wren Lanier: And as designers, we didn’t really care what the content was, and in fact, we often didn’t know what it was. We would get the content from the client like at the very last minute.

Lea Alcantara: Right. Lorem Ipsum it.

Wren Lanier: Right.

Lea Alcantara: Yeah.

Wren Lanier: You will just flow it in to replace all the Lorem Ipsum and you really can’t do that with any kind of mobile design, including responsive design. You have to be focused on content and priority. There was a great article in A List Apart last week about object-oriented UX that I think makes this point incredibly well about modeling the relationships between different content blocks for big responsive site.

Emily Lewis: [Agrees]

Wren Lanier: So in addition to the traditional focus on typography or colors, I think for mobile design, there has to be a focus on the UX and the user needs.

Emily Lewis: And I’d say just based on what you’ve described, it also seemed Lea working with our clients, and this could be the same as it’s always been, but I feel like there’s just a lot more communication and education involved when Lea hands over a mobile comp to a client. There is a lot more discussion of what’s going on, why the choices were being made, and so I feel like communicating and understanding user experience is even more important to mobile design than we’ve ever seen it before.

Wren Lanier: Absolutely, I think that’s absolutely true. I think it’s also true, and I don’t know if this is mitigated in the last few years, but I think that, in my experience, clients often had what seemed like unrealistic like expectations for maybe the business performance of their mobile apps.

Lea Alcantara: Right.

Wren Lanier: And it’s the sense of the Gold Rush.

Emily Lewis: [Laughs]

Wren Lanier: And I’m sure this was sort of true for the web maybe in 1998 or 1999, but there’s this sense everybody thinks they’re going to be the newt Twitter or Facebook if they just launch… [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: If they just get into the app store. [Laughs]

Emily Lewis: Right.

Wren Lanier: And so I think that sort of setting realistic expectations just around the marketing of apps and just how competitive the ecosystem can be is also important.

Lea Alcantara: Yeah, it’s interesting because you mentioned at how they just think, “Okay, if I have an app, I’m going to be rich, rich.” [Laughs]

Wren Lanier: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: But that brings the question over like, well, what if whatever they need is find in the browser versus like just investing in an entire app?

Wren Lanier: Yeah.

Lea Alcantara: How do you think they should make that decision, the native versus web decision?

Wren Lanier: Well, and there is also, I would say, if we’re talking about native or an app, let’s just say that’s something that they install on their phone versus bookmarking a website with their mobile browser.

Lea Alcantara: Yes.

Wren Lanier: So there are certainly different paths to getting an installed app on someone’s phone, but if you’re going to do that, then something in that app should be taking advantage of the native features of the device.

Lea Alcantara: Right.

Wren Lanier: So whether that’s the GPS or whether that’s the camera.

Emily Lewis: [Agrees]

Wren Lanier: There are so many content sites, and I’m thinking of new sites like Mashable, they want to be installed on your phones so that they can send you push notifications. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: And spam you with all of their breaking articles. [Laughs]

Emily Lewis: Right.

Wren Lanier: So yeah, if there is not truly a need to be taking advantage of the device hardware…

Lea Alcantara: Aha!

Wren Lanier: If you are the local restaurant and people just want to see your menu and your hours, then I always encourage these clients to have a really good responsive web page.

Emily Lewis: [Agrees]

Wren Lanier: And just make their mobile browser experience as good as possible. But again, so many people just they want what they feel is the marketing advantage of being in the app store and being installed on the device.

Emily Lewis: You say what they think is a marketing advantage. Is there any kind of analytics or statistics that get back to app developers that let’s say the client who doesn’t actually need the app, but insists on the app and then they want to know why it’s not working…

Lea Alcantara: [Laughs]

Emily Lewis: Does Apple give information back to app developers about who’s using it and what and how, or is that just a vacuum?

Wren Lanier: My understanding when, because again these things change so frequently, but when we did the Highrise app earlier this year, we sort of had to build in our own analytics in a really meaningful way.

Emily Lewis: [Agrees]

Lea Alcantara: Interesting.

Wren Lanier: I mean, I guess we can get something like the number of downloads from the Apple App Store.

Emily Lewis: Yeah, it’s probably like what they give us for the podcast, like nothing. [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: Right. [Laughs]

Emily Lewis: Just a general sense that some people are listening. [Laughs]

Lea Alcantara: Yeah, yeah, on iTunes, we have that bar. It doesn’t mean it would give you numbers. It just gives you a bar to show you if that episode was listened to a lot or not. [Laughs]

Timestamp: 00:30:00

Wren Lanier: Yeah, and so we use the analytics platform in our mobile app as we use in our regular web application. We use Heap Analytics.

Emily Lewis: [Agrees]

Wren Lanier: So in terms of measurability, I would not say that we can somehow necessarily measure all these amazing metrics in our native app that we can’t measure on the web. I would not say that’s true.

Lea Alcantara: Speaking of analytics, I know that a lot of web apps and websites really rely on analytics and data to drive some design choices. How much does data affect native mobile app design?

Wren Lanier: That’s a good question. I think a lot of it depends on whether you’re building a new product or whether you’re building an app for an existing product. So for example, when we built the Highrise iOS application, obviously, we already had tons of data about our users and what features they use the most.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Wren Lanier: And we could make assumptions and then we could go into beta and get feedback whereas if you’re developing a brand new application, especially if it’s something that you’re trying to open up a new market and application people don’t even know that they want it yet, then there’s not going to be a lot of data available to you about user behaviors.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Wren Lanier: But if you start with a sort of lean UX process, hopefully you can kind of get some validation along the way to understand what’s going to be the most important features and parts of your app.

Emily Lewis: I’m curious, you were describing when a native app really makes sense, which aside from marketing needs, it comes down to, “Do you really need to use the native device features?”

Wren Lanier: [Agrees]

Emily Lewis: But is there like a hybrid model where there is something that embraces both native and web?

Wren Lanier: A lot of applications that even appear to be native are using some, if not all of what we would call WebViews inside of them.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Wren Lanier: I think even Instagram is using a lot of WebViews. Evernote uses WebViews. Twitter uses WebViews, so even though there is an aspect of native development there, they’re also bringing things in, and it’s nice, it nice when you can use WebViews because the content on that page or those pages, you can update it from your own servers rather than having to resubmit to the app store and go through their approval process and all of that.

Lea Alcantara: Right.

Wren Lanier: And then sort of having to get new ratings on your new version and all of that stuff. So when you can build pieces of your app in WebViews, that’s often a wonderful benefit, but again, that’s usually a choice that’s going to be made by the developers, by the engineers based on what can our API handle and what’s going to give us the best performance benefit.

Emily Lewis: Yeah.

Lea Alcantara: So how does that affect you as the designer if some stuff has to be run through the native app and then some stuff is being pulled by the web? Does that affect anything really in your design process?

Wren Lanier: I have not encountered a lot of impact to that. I don’t even think there would be impact if you wanted to sort of slide some things around. I’m thinking of Google’s Inbox app where you have that nice sort of you can swipe left or swipe right to check something off or save it for later, and I bet there’s a big web component, even in that UI. So probably not, but again that’s something I would work through very closely with my development team.

Lea Alcantara: So I’m a little bit curious about that swipe left, swipe right, and that it’s seems like a very native mobile interaction. What I’m curious about as a designer is that we’re seeing a lot of mobile native design choices bleeding into websites. I guess this is actually like a multi-part question. First of all, do you think that is a good direction for desktop or even just generic web mobile experience to mimic like native app design, and why? Like why are we heading that way?

Wren Lanier: I’m starting to see a lot of desktop websites that have the hamburger menu with the hidden navigation, and I really don’t understand why. I mean, I think maybe it’s this grasp towards sort of minimalism, and again the popularity of like the huge hero images. It’s like, “Oh, we can just sort of have the hero image and not spoil it with a menu.” But as a user experience designer, I feel like you’re just making it harder for people to find your content. [Laughs]

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Wren Lanier: So yeah, I think a lot of desktop sites can take that too far in terms of borrowing sort of patterns from mobile design. But if I were to really sort of stand up on a soap box, I would say that I don’t think the web needs you to be using native design patterns, but I do think that the mobile web needs to stop damaging itself in an attempt to promote native apps.

Lea Alcantara: [Agrees]

Wren Lanier: So man, those banners that pop, “Download our app,” you have a new site and then sort of 18% of your screen is taken up with this banner to download the app, and then there are popover ads over everything below that.

Emily Lewis: Right.

Wren Lanier: On my iPod the other night, I was looking at some Yelp reviews and Yelp would only allow me to view a portion of reviews on the mobile web. They were forcing me to download the app in order to view the entire…

Lea Alcantara: Wow!

Wren Lanier: Man, it’s not the…

Lea Alcantara: Yeah.

Wren Lanier: It is not the hamburger menu that is ruining the mobile web, it is that crap.

Emily Lewis: [Agrees]

Lea Alcantara: Wow!

Wren Lanier: What is that, it’s hostile, and so that is what’s hurting the mobile web, not a lack of better UI design, but it’s this trying to force people in the walled gardens instead of allowing them to take advantage of the open nature of the web.

Emily Lewis: Or have them to have the choice.

Wren Lanier: Right.

Emily Lewis: I mean, I can think of a dozen different sites that I use on my desktop that I have apps for, that I might use the app on my phone, but I use the desktop on my desktop.

Lea Alcantara: [Laughs]

Wren Lanier: [Laughs]

Emily Lewis: Or I use the web on my desktop rather, and I think as a user, that’s the kind of stuff I couldn’t agree with you more, like five click on a link to a website and they’re like, “Would you like to view this on our app?” No. [Laughs]

Wren Lanier: No. No. [Laughs]

Emily Lewis: I couldn’t click on the link for a reason.

Wren Lanier: No, yeah.

Lea Alcantara: Yeah.

Emily Lewis: It’s like we talk about user experience all the time, that’s just fundamental taking away a user’s experience.

Lea Alcantara: Right.

Wren Lanier: Yeah.

Emily Lewis: It makes no sense.

Wren Lanier: And I’m usually in the middle of searching for something in many Google searches.

Emily Lewis: [Agrees]

Wren Lanier: And I’m trying to put the right keyword string in to find what I’m looking for, and like I’m going to have to download your app and then I’m just going to have to search again inside your app, it’s just a time waster. [Laughs]

Emily Lewis: Yeah, it’s almost like that somehow bells and whistles are trumping the fundamental delivery of information to people, you know?

Wren Lanier: Yes.

Emily Lewis: I don’t quite understand that, and it’s probably why I personally don’t have a huge amount of interest in apps because my nature goes towards that sort of more open nature of the web.

Wren Lanier: Absolutely.

Lea Alcantara: Well, what I’m curious about too is like, for example, it’s just top of mind because I’ve visited it recently, but SquareSpace’s site. It’s not a mobile app. Literally, the service is to give other people websites, but their entire design is borrowing a lot from the mobile app. As you mentioned, that hamburger thing, that’s exactly SquareSpace’s navigation.

Wren Lanier: [Agrees]

Lea Alcantara: They’ve got their main navigation that’s discoverable has Overview, Commerce, Cover Pages, Build it Beautiful.

Wren Lanier: [Agrees]

Lea Alcantara: Whatever that means.

Wren Lanier: [Laughs]

Lea Alcantara: And then you have to click on the hamburger icon to see Home, Tour, Customers, Template, and even the word Get Started.

Emily Lewis: And that’s the stuff that gets started.

Lea Alcantara: Exactly, exactly, so I just find it like really curious in terms of like who’s pushing for this? I understand that trends occur.

Wren Lanier: [Agrees]

Lea Alcantara: And clients sometime say, “I saw this thing and I want it.”

Emily Lewis: [Agrees]

Lea Alcantara: But it’s curious to me that a web service who’s primary customer is websites is pushing for more mobile patterns.

Wren Lanier: It’s not that difficult to build a responsive site that has a fully visible menu on larger screens.

Emily Lewis: Right.

Wren Lanier: But then minimizes down to a hamburger menu on smaller screens.

Emily Lewis: Right.

Wren Lanier: I can’t even say, “Oh, but it’s just so hard and they don’t want to put the work in.” It’s not that hard. [Laughs]

Emily Lewis: I think it’s got to be just the new pretty, you know?

Wren Lanier: Yeah.

Emily Lewis: Oh, I want to try this thing. I saw it’s cool.”

Lea Alcantara: Do you know what I feel like it is? It’s almost like that old school like 1990’s to 2000 thinking of like everything needs to look the same everywhere.

Wren Lanier: [Laughs]

Emily Lewis: [Agrees]

Lea Alcantara: Which is ironically an old-fashioned way of thinking, you know?

Emily Lewis: [Agrees]

Lea Alcantara: Because if we design mobile-first and then all the way to the desktop, it still looks like the mobile site, you know? [Laughs]

Wren Lanier: [Laughs]

Lea Alcantara: And it’s like taking it to the next level where it’s like, “Well, fine. I guess it looks nice, but is that really functionally the right approach?” I don’t know.

Timestamp: 00:39:48

Wren Lanier: Well, and I think one of the most interesting things I’ve seen recently, and I can’t remember if this was Kenneth Bowles or someone else. He had talked about this in a presentation. It was about when we talk about designing for different sized screens, what we usually mean is designing for small screens and how do we take this desktop design and then origami, fold it down into something for like a phone.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Wren Lanier: But there are not designers talking and taking advantage of the people with 2,400 pixel wide screens.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Wren Lanier: I mean, that’s a town of real estate.

Lea Alcantara: Right.

Wren Lanier: You could be doing really cool things for those people as well instead of presenting them with a hamburger menu which is optimized for a tiny little touch device. [Laughs]

Lea Alcantara: Right, right. It’s a different experience at the end of the day, right?

Wren Lanier: Yeah.

Emily Lewis: This is kind of like a discussion about where and how the web evolves and how we never figure it out right away. It takes years of you being like, “Oh, mobile is not just small screens.”

Lea Alcantara: [Laughs]

Emily Lewis: Like there are people saying that.

Wren Lanier: Yeah.

Emily Lewis: But not everyone is executing it that way, you know?

Wren Lanier: Exactly.

Emily Lewis: And that design, it’s not just like you said going from desktop to small. There is everything in between, and I think we’re always looking for like a single solution and we get fixated on something when it starts working and we stop looking for a period of time at what else is out there that we should be looking at. I think that’s just how we evolved.

Lea Alcantara: Yeah. And there was this excellent article by Luke Wroblewski about obvious always wins.

Wren Lanier: [Agrees]

Lea Alcantara: And speaking of that hamburger icon, it’s super controversial not just because what the hell is a hamburger icon to a normal human being, but the fact that people just got so enamored with it, that they started making all menus as the hamburger icon don’t even have the word menu on it anymore.

Emily Lewis: [Agrees]

Lea Alcantara: And then his statistics showed that just having the actual words in a rounded corner box was more interactive then the hamburger menu because it was obvious.

Emily Lewis: [Agrees]

Wren Lanier: Do you know what was ironic? I remember when even in native apps, the sort of slide over hamburger menu really became the popular design paradigm.

Emily Lewis: Totally.

Wren Lanier: Live overt tabs at the bottom.

Emily Lewis: Sure.

Wren Lanier: And it was really because of Facebook.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Wren Lanier: Facebook brought it in, and I remember, I know this. I was in one of these meetings. I might have been one of the people saying this. We would have these discussions about the usability of the hamburger menu, because again it gave us so many good options with many stakeholders, with many demands like, “Oh, this is going to make our lives so easy.” But people would say, “Are users going to open it? Are they going to know what to do? Are they going to be able to find these things?”

Lea Alcantara: Right.

Wren Lanier: And what we would say, what we said was, “Well, if Facebook is doing it, I’m sure it works because they’ve tested.”

Emily Lewis: [Laughs]

Lea Alcantara: Right.

Wren Lanier: Right? [Laughs]

Lea Alcantara: Right.

Wren Lanier: Like Facebook…

Emily Lewis: They must have tested it.

Wren Lanier: They must have tested it. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: And it turns out that they really didn’t have a good testing process in place at that time, and they hadn’t really tested it, and eventually, after looking at their analytics and seeing the effects of it, they went back to test and then all of us who were just sort of stupidly assuming that Facebook knew what they were doing, like they really didn’t. [Laughs]

Lea Alcantara: Well, not until you’ve put it out there and test it, right?

Wren Lanier: Right.

Lea Alcantara: Like you can only design and then test your assumptions, and then it doesn’t work, then you need to fix it. I find that’s also the same even in terms of just stylistically mobile design.

Wren Lanier: [Agrees]

Lea Alcantara: For example, flat design is “flat/Swiss design” traditionally, it’s everywhere now. Everyone doesn’t want to have any sort of gradient or shadows anymore, and I know that styles change the same way fashion changes over the years, but what I find fascinating speaking of Facebook is I’ve been noticing a lot of new interface tweaks in general where they’re moving slightly away from flat design now.

Wren Lanier: [Agrees]

Lea Alcantara: I’ve noticed that their checkboxes have gradients in them.

Wren Lanier: [Laughs]

Lea Alcantara: So it looks raised, and like their boxes now have more pronounced bottom borders, so it looks a lot more like shadows and their headlines have different background – what you call it – instead of just using like a single like #ccc line.

Wren Lanier: [Agrees]

Lea Alcantara: It’s now like the entire background is different now, so it’s more differentiated and so are their icons are having a lot more drop shadows, and I feel like that’s a response to the fact that 100% flat is not necessarily the right solution when you’re trying to emphasize something on the page and to indicate that it’s clickable.

Wren Lanier: Very yes.

Lea Alcantara: Yes, and that to me as a designer freaking pisses me off, you know?

Wren Lanier: [Laughs]

Lea Alcantara: Because when everyone started going towards flat design, there were some things that I really, really like about it, but other things for me like in terms of like interactivity to like, “Okay, is this clickable?” Well, if it all looks the same… [Laughs]

Wren Lanier: [Laughs] Yes, and the more recent versions of iOS since iOS 7 have definitely brought that flat aesthetic and just sort of lack of button styles, now everything is text, it can be very, very confusing at times.

Lea Alcantara: Right.

Emily Lewis: So let’s talk a little bit more about some of these patterns that we’re talking about or sort of bitching about right now. [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: [Laughs]

Emily Lewis: But do you think there are any native mobile patterns that you would like to see more in the web or vice versa, like specifics?

Wren Lanier: Mostly I would really just like to see the mobile web to be the best mobile web it can possibly be.

Emily Lewis: [Laughs]

Lea Alcantara: Right.

Wren Lanier: Instead of being a vector to tell you to download the native app. [Laughs]

Emily Lewis: Right.

Lea Alcantara: Right, right, right.

Wren Lanier: Because on the occasion that I see a really well-designed responsive website, I mean, it’s great. It’s fine. It’s awesome. I don’t even think about it.

Emily Lewis: [Agrees]

Wren Lanier: But that still feels like such a small percentage of the mobile web that’s out there, that so many sites are either not optimized for touch screens or smaller screens or if they are optimized, they’ll use some error codes there, then it’s really more about forcing you to download the app.

Emily Lewis: Right.

Lea Alcantara: Right.

Wren Lanier: So just for the mobile web to the best mobile web it could be would be a nice step forward. [Laughs]

Emily Lewis: Can you give me some examples of what some of those optimizations would be for a good mobile/touch experience?

Wren Lanier: I think for the touch experience, it’s really about large, obvious touch targets.

Emily Lewis: [Agrees]

Wren Lanier: It still frustrates me on some of my favorite ecommerce sites that when I go there on my iPod, there’s just this long text menu down the left side of all the different departments, and if I want to click on denim or dresses, I always end up tapping the wrong thing.

Emily Lewis: Yeah.

Lea Alcantara: Right.

Wren Lanier: Like there’s not enough space between, you know, and I’m literally zooming in to try and successfully tap on sweaters.

Lea Alcantara: Right.

Wren Lanier: And 2015, almost 2016, for big global brands, like that shouldn’t be happening.

Emily Lewis: [Agrees]

Wren Lanier: I should have an easy way without zooming in, to just tap on the menu selection that I wanted to make.

Emily Lewis: [Agrees]

Lea Alcantara: Yeah, and that’s you as a person who knows how to zoom.

Wren Lanier: Yeah. [Laughs]

Lea Alcantara: Most people have no clue.

Wren Lanier: No, no.

Emily Lewis: Yeah, I find that extremely frustrating about Amazon, and I even was like, “All right, screw this. I’m going to get the app and try and do it there,” and their app sucks. [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: [Laughs] Yeah.

Emily Lewis: It makes no sense, and you can’t use their website on a mobile device because of the tap targets, that’s my biggest beef with it, especially when you have to like tap twice to get the menu to expand and then I just wanted to look at my orders and then I click that and it ends up taking me somewhere else, and it’s so frustrating and their app isn’t much better.

Wren Lanier: Yeah, and again, this is one of those things that Josh Clark wrote about in Tapworthy about the importance of big, touchable tap targets.

Emily Lewis: [Agrees]

Wren Lanier: And so you would think by 2015 that we could like move on to something better than that, but there are still so many sites, big, well-funded sites that are getting this wrong. [Laughs]

Lea Alcantara: Because I think it’s that above the fold thinking about. Do you know what I’m saying?

Wren Lanier: Yes.

Lea Alcantara: Because it’s just like, “Let’s shove as much as we can into this small, small, small space because we need to fit every single like widget in that small area,” and that ends up squishing a lot of tap targets into areas that doesn’t make much sense.

Wren Lanier: [Agrees]

Emily Lewis: Now, when it comes to when you’re designing, Wren, do you create your own assets from scratch, or do you use like templates for icons or skins or anything?

Wren Lanier: I always create all of my own assets, and in terms of a lot of those UI kits that are available, I mean, I guess for someone, if you’re still sort of learning your tools, and back when skeuomorphism was more of the rage of the day, those things were sometimes nice just to sort of learn how do I create gradients like this? How do I layer, you know?

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Wren Lanier: It’s a good learning opportunity to get to know your tools better, but in terms of actually designing, I always design my own assets. I do almost all of my design in Sketch now.

Emily Lewis: [Agrees]

Lea Alcantara: Interesting.

Wren Lanier: And what was amazing when we launched the Highrise app this year, we’re serving all of our assets directly out of the vector Sketch file.

Timestamp: 00:50:04

Emily Lewis: Oh.

Lea Alcantara: Oh, interesting.

Wren Lanier: So that was a huge new innovation for me as a mobile designer because when I started out, I was generating at 2x image.

Emily Lewis: [Agrees]

Wren Lanier: And just generating and breaking out different assets for the different resolutions.

Lea Alcantara: [Agrees]

Wren Lanier: So to be able to take a vector file and just serve the icon as needed out of the vector file was pretty sweet.

Lea Alcantara: But is that specific to native app stuff? Because I don’t think we can necessarily do that for web, I mean, I guess as SVGs.

Wren Lanier: Yes.

Lea Alcantara: Yeah.

Wren Lanier: Yeah, that was native, so that was built in to the app that way.

Lea Alcantara: So do you have a gallery of mobile patterns that you refer to during your design process?

Wren Lanier: There are sample galleries that I will go to often if I’m stuck on a particular sort of, you know, like a list view or opening and closing an area or just wanting to see some of the fresher ideas that are out there. One that I really like is CAPPTIVATE.co.

Lea Alcantara: Okay.

Wren Lanier: That’s Alli Dryer site, and she also has an iOS app for CAPPTIVATE now as well, but she focuses a lot on transitions and animations as like within the UI.

Lea Alcantara: [Agrees]

Wren Lanier: So all of her examples move around and that’s really cool.

Emily Lewis: [Agrees]

Wren Lanier: I like mobile-patterns.com, and then there’s another site called patternspttrns.com, so there are plenty of good pattern libraries out there if you just sort of need something to help jog some inspiration.

Lea Alcantara: Are there actual apps that you always open that you think is like, “Okay, this is a great designed app. Let me like play around with this to just give me ideas.”

Wren Lanier: That’s a great question. I don’t know if I would universally say it’s a great designed app, but I often look at the native Twitter app.

Emily Lewis: [Agrees]

Lea Alcantara: Yeah.

Wren Lanier: They have a variety of different views, and they’ve got a good team that works on that product. They’re constantly pushing updates, so I always like to see how did Twitter do this in their app.

Emily Lewis: And to sort of jump forward after the design process, after you’ve gone through your inspiration, where do you fit testing in?

Wren Lanier: It definitely depends on the kind of testing, so if I’m working on what I would think of as a new product, like a startup, then hopefully we’ve been doing some sort of Lean UX validation testing early on, and trying to get something into the hands of people to get a sense of how they would use it, how they respond to it, but then usability testing typically happens much later in the process, and again sometimes I do sort of planned testing, like a more formalized testing. For Highrise, we had a beta program so we had several hundred users.

We were able to distribute beta builds of the app to them using TestFlight which was acquired by Apple a few years ago, and so again we could just collect feedback very organically that way, and I think for us, for Highrise, our UI changes are really only meaningful for people when they can see them in the context of their own data, like their own context, their own notes, their own emails.

So even if it was like very well crafted fake data, I think it would still be hard for people to really understand what this is going to look like if they’re not seeing their own stuff. So to be able to do live testing with a beta in TestFlight I think is hugely valuable.

Emily Lewis: And is that another thing where you’re working closely with the back end on resolving these things as each thing comes through that you guys want to attack, or does it start with you and then trickle?

Wren Lanier: Yeah, I mean, there’s definitely a lot of engineering support for setting up beta users and I forget what that whole process looks like, but that’s not something that I could have executed alone just as a designer.

Emily Lewis: [Agrees]

Wren Lanier: You usually need support from engineering to get actual alpha or beta builds of your app into users’ hands.

Emily Lewis: And then they would work with you as you have resolve issues and such?

Wren Lanier: Absolutely. We are in our own team would be using it, and then we would be getting feedback from our users and that would just sort of go into the bug queue or the development queue to resolve.

Emily Lewis: And then once the app is out there, you’re not in alpha or beta, what is alpha? Is alpha like just a small internal?

Wren Lanier: Yeah, alpha is what we would do for just our internal team.

Emily Lewis: And so once the app is out there, how do you approach when people report issues? Do they just go into a queue or how do you decide when a new update is coming out?

Wren Lanier: That’s a good question. For us, knock on wood, we’ve not had a huge number of technical issues with our app nor a huge number of usability issues. I was really, really impressed and sort of surprised. So what we get are feature requests because our iOS app is not feature complete on par with the desktop web application.

Emily Lewis: [Agrees]

Wren Lanier: So in that sense, it’s leaning more towards product management, and in terms of what additional features or additional enhancements do we want to build.

Lea Alcantara: Right, and you actually brought up a point as to like why I personally would prefer sometimes using their web mobile website versus their app because of the feature completeness. Sometimes the app still needs some time to catch up, and okay, I want to go to their website because it has all the stuff that I need.

Wren Lanier: Yeah, definitely, and I think that that’s something we’re hoping to change, and I think it’s more and more products launched with mobile first that is changing.

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Wren Lanier: I mean, if you look at something like Instagram, there are so much I can do with Instagram on my phone that I can’t do like from the desktop website.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Wren Lanier: So it definitely depends on where the product started out.

Emily Lewis: I think for me as a user, I find that to be my greatest frustration. Basically, like let’s take my Roku, for example. If I use a Netflix app on a Roku, it’s different than the Netflix app on the Xbox, which is different than the Netflix website.

Lea Alcantara: [Agrees]

Emily Lewis: And I find it so frustrating because there will be like a really great feature on one of them and it’s not available in any other.

Lea Alcantara: Yeah.

Wren Lanier: Yeah.

Emily Lewis: I know that’s a total different departure, but I feel like again somehow the user is getting lost in all these experimentation. [Laughs]

Lea Alcantara: Right.

Wren Lanier: [Laughs]

Lea Alcantara: Well, part of it is like the politics of the devices you’re using, right?

Wren Lanier: [Agrees]

Emily Lewis: [Agrees]

Lea Alcantara: Because there are certain things that you might be allowed to do or not allowed to do for Android that you can do in iPhone or there’s a convention that Android users are used to in terms of user experience that iPhone users aren’t used to, and vice versa.

Emily Lewis: [Agrees]

Lea Alcantara: And then there are also like legalities and their own walled ideas of what their interface guidelines are going to be, and I feel like some devices are like, “Yeah, just do whatever,” and other ones are like, “This must conform to Xbox tile app styling.” You know?

Wren Lanier: Yeah, I mean, you’ve just described the conundrum and the difficulties of that walled garden mindset, you know?

Lea Alcantara: Right.

Wren Lanier: That the same product will be slightly different or somewhat different inside each walled garden.

Emily Lewis: Right. Again, the user is not… [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: [Laughs]

Emily Lewis: It’s not the user who anyone’s paying attention to. Before we wrap up, I wanted to get your thoughts about what you think the biggest misconception about designing for the native mobile experience versus the web mobile experience.

Wren Lanier: I think the biggest misperception I think particularly still amongst stakeholders is this idea that everyone who’s on their phone is on the go or walking down the sidewalk or killing 90 seconds in line at the grocery store.

Lea Alcantara: [Agrees]

Wren Lanier: There are lots of people today who use their phone as the primary way of accessing the internet.

Emily Lewis: [Agrees]

Wren Lanier: And even for those of us with many devices and an ease of internet access, we still do stuff on our phone from the couch.

Emily Lewis: [Agrees]

Lea Alcantara: Oh, totally. Me too.

Wren Lanier: I’ve been stuck on my phone while I’m sitting in front of my computer. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: Yeah, right. [Laughs]

Wren Lanier: You know? [Laughs]

Lea Alcantara: Yeah. [Laughs]

Wren Lanier: Like I get a Facebook message or something from somebody and I just pick up my phone and start replying.

Lea Alcantara: It’s so true.

Wren Lanier: I do think that mobile experiences should be very clear and direct, but we really shouldn’t think that they need to be limited or exclusively designed for short attention spans.

Emily Lewis: [Agrees]

Wren Lanier: That people are doing everything on their phones, and this was a few years ago now that I read this that eBay’s car auctions, eBay Motors, were selling like Ferraris and Lamborghinis off of the eBay auctions on mobile.

Lea Alcantara: Wow!

Wren Lanier: Like there are people buying. People are buying Ferraris from their mobile phone. [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: There is nothing that people are not doing from mobile.

Emily Lewis: [Agrees]

Lea Alcantara: Wow! There is just so much to really dive into with the mobile web experience, but I wanted to leave our listeners with some advice. So what’s the best advice you have for those approaching mobile web design in general?

Wren Lanier: I think it’s to have an unwillingness to unlearn and throw away a lot of the design patterns that you’ve learned for the desktop web.

Emily Lewis: [Agrees]

Timestamp: 01:00:02

Wren Lanier: Just like I’ve had to throw away all those different ways of coding a navigation menu in HTML and CSS, you just have to be willing to let go of some of those, some of your darlings even.

Emily Lewis: [Agrees]

Wren Lanier: And there are things like hover, like hover just doesn’t really make sense in a touchscreen context.

Lea Alcantara: Right.

Wren Lanier: So Luke Wroblewski has talked about this, how we as designers are still unlearning these patterns that are ingrained in us from the desktop web, from the mouse-based web.

Emily Lewis: Right.

Wren Lanier: And so, yeah, it’s to really be open minded and to really be able to think of this as like a whole sort of new set of design principles.

Emily Lewis: [Agrees]

Lea Alcantara: Very cool, very cool, but before we finish up, we have our Rapid Fire Ten Questions, so our listeners can get to know you a bit better.

Wren Lanier: Oh. [Laughs]

Lea Alcantara: Are you ready, Wren?

Wren Lanier: I don’t know if I’ll ever be ready, but here we go. [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: Okay, first question, Android or iOS?

Wren Lanier: I personally use iOS.

Emily Lewis: If you are stranded on a desert island and you can only bring three things, what would you bring?

Wren Lanier: Oh, my gosh, my favorite pillow. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: And some snacks and a really good book. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: All the comforts.

Wren Lanier: Yes. [Laughs]

Lea Alcantara: What’s your favorite TV show?

Wren Lanier: Oh, that’s a good question. I don’t know about of all time, but lately I’ve just been watching everything British that’s on Netflix, you know?

Lea Alcantara: Nice.

Wren Lanier: So I go in for Sherlock.

Lea Alcantara: Yes.

Wren Lanier: Last night, I saw Miss Fisher’s Murder Mysteries, Australian.

Emily Lewis: Oh yeah.

Lea Alcantara: Yes.

Wren Lanier: It’s one of my favorites, and so yeah, that’s stuff. [Laughs]

Emily Lewis: What’s your favorite dessert?

Wren Lanier: Anything with a lot of chocolate in it. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: What profession other than your own would you like to attempt?

Wren Lanier: I’ve always said that if I ever leave tech, that I would want to become an urban planner, an urban designer.

Emily Lewis: Oh.

Lea Alcantara: Oh.

Wren Lanier: I think, to me, it feels like user experience on the grandest scale possible of sidewalks and bike lanes and parks and really designing the experience of the communities that people live in, I think, would be fascinating.

Emily Lewis: [Agrees]

Lea Alcantara: Sure

Emily Lewis: What profession would you not like to try?

Wren Lanier: I don’t want to do anything like accounting. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: Anything that involves attention to detail. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: What’s the latest article or blog post you read?

Wren Lanier: About tech or just in general?

Lea Alcantara: In general.

Wren Lanier: I read something about the woman whose Jeopardy response went viral. I think I’m always…

Lea Alcantara: [Laughs]

Wren Lanier: I think I’m always fascinated by what content goes viral and people who experience their 15 minutes of internet fame.

Lea Alcantara: Right.

Wren Lanier: Which I think is terrifying and I never want to have my 15 minutes of internet fame. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: I was just going to say I never want that to happen to me. [Laughs]

Wren Lanier: Yeah, I never want that to happen to me either. [Laughs]

Emily Lewis: If you could have a super power, what would it be?

Wren Lanier: To fly.

Lea Alcantara: What music do you like to work to?

Wren Lanier: I listen to a lot of the Chill stations on RDIO: Indie Chill, Chill Wave, Coffeehouse Chill.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: Just very…

Lea Alcantara: Relaxing.

Wren Lanier: It is. I’ve basically become the 2000 teens version of an easy listener…

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Wren Lanier: An easy listening person. I realize this now. It’s terrifying, but…

Emily Lewis: All right, last question: cats or dogs?

Wren Lanier: Cats.

Emily Lewis: [Laughs]

Lea Alcantara: Yehey.

Wren Lanier: I have two. [Laughs]

Lea Alcantara: So do I. We’re a cat people here.

Wren Lanier: [Laughs]

Lea Alcantara: So that’s all the time we have for today. Thanks for joining us.

Wren Lanier: Thank you so much. This has been wonderful.

Emily Lewis: In case our listeners want to follow up with you, where can they find you online?

Wren Lanier: You can find me at wrenlanier.com and you can find my occasional musings on Twitter @heywren.

Emily Lewis: Thanks again, it was so nice talking with you today.

Wren Lanier: Thank you so much.

[Music starts]

Lea Alcantara: CTRL+CLICK is produced by Bright Umbrella, a web services agency obsessed with happy clients. Today’s podcast would not be possible without the support of this episode’s sponsor! Thank you, Pixel & Tonic!

Emily Lewis: We’d also like to thank our partners: Arcustech, Devot:ee and EE Insider.

Lea Alcantara: And thanks to our listeners for tuning in! If you want to know more about CTRL+CLICK, make sure you follow us on Twitter @ctrlclickcast or visit our website, ctrlclickcast.com. And if you liked this episode, please give us a review on iTunes, Stitcher or both!

Emily Lewis: Don’t forget to tune in to our next episode when we’ll talk about CartThrob for ExpressionEngine ecommerce with Matt Weinberg. Be sure to check out our schedule on our site, ctrlclickcast.com/schedule for more upcoming topics.

Lea Alcantara: This is Lea Alcantara …

Emily Lewis: And Emily Lewis …

Lea Alcantara: Signing off for CTRL+CLICK CAST. See you next time!

Emily Lewis: Cheers!

[Music stops]

Timestamp: 01:04:50