iTunes Overcast Spotify Stitcher
Episode Overview
Efficiency and discoverability are two main goals for mobile UX design. Today, marketers are being challenged to develop content for the native app, mobile web, and desktop. Meet Andrew Lassetter, product designer at Udemy, and learn about:
- Mobile literacy and how the relationship with our devices is changing
- How principles of design and gestalt should shape your content and CTA
- Content optimization for the Apple App Store, Google Play, and multimedia content
- Strategies for long and short form content
- Setting expectations and instructing the user on their next nav step
GUESTS & RESOURCES:
- Schedule your free consultation
- Andrew Lassetter: LinkedIn
- Benjamin Shapiro: Bio // Podcast Network // Twitter // LinkedIn
Episode Transcript
Ben: Welcome to Mobile Month on the Voices of Search podcast. I’m your host, Benjamin Shapiro, and today we’re going to take a closer look at the small screen and discuss what SEOs need to know about optimizing their strategies, content and technology for max impact on mobile devices.
Ben: Joining us today is Andrew Lassetter who is a Product Design Manager at Udemy, which is an online learning destination that’s helped over 30 million students, companies, and governments gain the skills they need to compete in today’s economy through over 100,000 courses taught in 50 different languages.
Ben: Today Andrew is going to talk to us about his perspective on Mobile First Design. Before we get started, I want to remind you that this podcast is bought to you by the marketing team at Searchmetrics. We are an SEO and content marketing platform that helps enterprise scale businesses monitor their online presence and make data driven decisions. To support you, our loyal podcast listeners, we’re offering a complimentary consultation. A member of our Digital Strategies group will provide you with a consultation that reviews how your website, content and SEO strategies can all be optimized.
Ben: To schedule your free consultation, go to Searchmetrics.com/request-free-consultation. Okay, here is our interview with Andrew Lassetter, Product Design Manager at Udemy. Andrew, welcome to the Voices of Search podcast.
Andrew: Awesome. I’m excited to be here.
Ben: It’s great to have you here. I understand this is your first podcast, so as your old buddy from our days working on a mobile app, I will try to take it easy for you, but no promises.
Andrew: Sounds good, man.
Ben: Let’s start off by just talking a little bit about your background. You and I worked together at a company called, but give us the full picture. Tell us a little bit about your experience, and how did you get into mobile design?
Andrew: Yeah, mobile design, I think I kind of came up through design around the time that smartphones were first being launched. Like 2007/2008, you got your first iPhone launching, the App Store kind of kicks off, and this sort of emerging excitement around having mobile apps, having a mobile presence, starts growing. On the mobile website, a lot of the work that I would do at the time, the clients wanted to have a mobile website as well, so you need to figure out how can we make this cool marketing site, also scale down and work for the mobile web users.
Andrew: This is also like the era of design when unfortunately the expectation around being a designer was like, “Oh, what code languages do you also know as well?” The job descriptions were like, “Yes, you know how to be a designer, but you also need to know how to write code.” Fortunately, we’re well past that, but that was kind of the era of we need to figure out how to make this CSS breakpoint work, get all this content shrunk down for this mobile screen. That kind of set me on a path, I think, toward really being interested in what mobile devices can do, and I think just leaning into that you just … obviously, what we know about mobile devices, they’re with us all the time.
Andrew: I use mine as my alarm clock. It’s literally like the first thing when I wake up in the morning, I’m looking at my phone.
Ben: Sadly, checking my email is like the first thing I do. Partially, it’s just a mechanism to wake up in the morning.
Andrew: Right, yeah. I think we’re working on beginning to be more literate about how we can define our relationships with our devices now, like 10 years later we have to sort of create boundaries with our phones. Like, “All right phone, I’m going to put you face down on the tabletop because I will tell you when I’m going to give you attention, rather than you telling me when to look at you.” We’re kind of getting to that chapter of our relationship with our devices now.
Ben: It’s definitely getting more complex. Going back to your experience, I know that from working together that your background was more as an artist than as a developer. Your perspective on design comes more from putting the pixels in the right places, than necessarily writing the code to make sure that the website or mobile app is functioning the way that it should.
Andrew: Yeah. I would say that that’s true. My background is, I have two art degrees. I definitely sort of approach the longer tail of my history with design, as approaching it from like the visual communications side, learning the fundamentals of graphic design, figuring out how to use principles of Gestalt to group things appropriately so you can quickly understand pieces of information as you’re navigating the page.
Ben: I’m going to go out on a limb and say that the vast majority of SEOs don’t know what Gestalt is. Give us a definition of what you mean by that.
Andrew: Sure, yeah. I mean so is a piece of graphic design terms. One of the important ones that I think about all the time is the Principle of Proximity, which is kind of to say when you make certain things on a page close together, your brain kind of just likes groups them as an object. If you want, for example, a CTA to be tied to a description, you should make those things closer together than they are to other things on the page. Then suddenly you start to have like a hierarchy form, where your brain can quickly scan and see what action you are meant to take on a screen, or something like that.
Ben: So that’s Gestalt?
Andrew: That’s one of the principles, yeah. There’s some people who have a collection of those, but it’s in the Google search.
Ben: Good to know. That is something that all SEOs do know about conducting the Google search to figure out how to do something new. Talk to me a little bit about the process for design. You mentioned that you basically started working in the technology design and development right around the rise of the smartphone. Tell me about the difference between designing for desktop and designing for mobile.
Andrew: Right, I mean the first and most obvious one is just a difference in screen size and how much content you can fit on that in a meaningful way. If you take a desktop screen that’s loaded with content and try to squeeze it into a mobile screen, it’s not going to be.
Ben: You’ve just got a bunch of really small fonts and small buttons.
Andrew: Right, right. So yeah, there’s certain things. For designers, you can’t take advantage of things. On a website you have maybe hover states that surface tool tips that help provide context and things like that. On a mobile screen you need to do a better job of setting the expectation of what is going to happen when you tap on this thing. We’re emerging into more ubiquitous and more subtle interactions like tap and hold, or like has Apple has 3D touch, and these kinds of things that are a little bit more hidden, and a little bit more clever.
Andrew: But in general, a good principle I think is to think that the screen needs to be pretty explicit in kind of instructing the user about what they need to do, and what’s going to happen when they tap on something on the screen.
Ben: It’s interesting to hear you talk about the different states, and that the mobile screen has to be simplified not only terms of the design, but also in the explanation of what the page can do. When you’re thinking about pairing down the various types of content, one of the things that on desktop experiences I see often is things like a right rail, or a left rail, or ads that are different spaces as opposed to everything being structured linearly.
Ben: One of the rules of thumb for actually organizing your content in a way to prioritize it and help people continue to see longer form content, or basically scroll down whatever page you’re building.
Andrew: Yeah, I think one of the tools that I try to give a user is in the form of what I could call “Explicit Input”. So if you have a ton of content and you want to fit it onto a small screen, unless you have a really high fidelity understanding of why the user is on that screen, and what exactly they want, if there’s like a variety of things that you can be choosing from, maybe you need to start figuring out intelligent ways to truncate that content but still give the user clear ways to tell you, “I want to see more of this.”
Andrew: Essentially, that could be like you have a product with a description, and the description is quite long but truncate it to like four lines of text and give them a button that says, “Expand to show more,” or something like that. Then they can tap on that, and then from there you can either expand that content so they can dive into that, or you could push them to a new screen where that screen is dedicated to serving that content but just trying to make it approachable and navigable for them. And then, also helping them maintain a sense of space, like where am I at the larger sort of architecture of this site or this app? What happens if I want to go back? Or, what if want to move laterally? Or if I want to narrow in on something? And sort of helping them understand how they can move.
Ben: So truncating copy and allowing the users to be able to basically expand and read more is a tip that makes a lot of sense for mostly when you have longer form content. You’re getting up to talking about navigation. What are some of the things that you consider with navigation when you’re moving from a desktop experience to a mobile? Are you actually parrying or simplifying the navigation? Or are there just different methodologies to be able to sort of cram everything in from mobile-specific nav?
Andrew: That’s a good question. There’s pretty distinct differences, I think, that the patterns that I sort of see for what you might find in a native mobile app like an app that you would download from the App Store or the Google Play Store. What you might find if you get to a mobile web version of the site, you’ll likely find a well established pattern, for example a native app, is that you’ll have what I would call a primary navigation or this row of buttons at the bottom of the screen in the form of a tab bar or a nav bar that tells you what are the screens that you can then sort of engage with here.
Andrew: On mobile websites you might see something more like a hamburger menu, which is like the three lines that’s sort of the like the menu icon that you might expect to tap on that and see a drawer push out from the screen, or of like a list of menu items that you might be able to kind of navigate and dive deeper that way. Those tend to, I think, kind of map much more closely to a large web architecture than a native app might, if that makes sense.
Ben: What’s the reason that the navigation is different between a native app and a mobile web experience? Why isn’t it just tabs at the bottom for everything? Or the hamburger in the top left for everything?
Andrew: You know, I think with hamburger menus they’re typically … stuff isn’t as accessible as if you have a primary navigation with the most important screens ready with one tap. Usually you can make a lot of content accessible really quickly. Really, it’s going to depend on what the purpose of that screen is, what role maybe the mobile site plays in the larger product or marketplace strategy you have, and those kinds of things. It’s going to really depend on the greater context there.
Andrew: There might be a product where you need to sort of have some flushed out omni channel experience for like, “We want mobile web to play this role.” Maybe it’s a new user acquisition play, but then for a retention you push users into a native apps experience where there’s so much more performance and polished experience, or something like that. It’s really going to depend, I think, on what makes sense for the user experience and how they’re engaging with your product. Also, what you want them to be doing.
Andrew: In certain products you may find that they’re very similar, and in others it might be a distinct but intentional differentiation, if that makes sense.
Ben: Absolutely, it makes sense. Getting from Point A to Point B, whether it’s on mobile or whether it’s on a native app, or whether it’s on a mobile web exactly, is something that SEOs aren’t always responsible for. What is included in the navigation and what content is presented, is something that falls under the purview of a lot of SEO and content teams. I think the biggest question for the SEO community, is how to handle long form and multimedia content.
Ben: For people that are publishing what would be blog posts that are thousands of words, that experience lends itself easily to a desktop experience because you can get a lot of words on the page at one time, but when you’re sitting there with a long piece of content that has videos and imagery, what’s the way to sort of format that content? Or what do you suggest SEOs do? Do they truncate and pair the content down? Or are there ways that they can build long form content pieces that are still highly engaging?
Andrew: Yeah, I think that there’s a number of tips and tricks that you can use. I think one big one is just figuring out meaningful ways to kind of break up content. On one screen you might just have a long lists of text, your like 2000 word long blog post. But maybe if you look at a site like Medium, you might find this layout where they’re finding meaningful pull quotes, and maybe that pull quote ties really closely to a topic area that you want to rank higher in for SEO purposes or something. Or maybe there are ways in which you can sort of inject related topics or related articles. That could be a way to sort of break up paragraphs in that content.
Andrew: Another thing that I can think of is do you want this content to be navigable with sort of pagination? By what I mean is say for example if you a Google search, you scroll to the bottom of the page. There’s always like a Page 2, Page 3, et cetera. So, do you want break your content with pagination? Or do you want to have an infinite scroll experience where the user, as they scroll down the screen, more content is loading lower and lower. In pages like that, I’ve seen sites that will actually load like a footer with a bunch of content that’s actually not really meant to be engaged with a ton. But it’s still on the screen for SEO purposes, and isn’t entirely out of place.
Andrew: I think that the balance you want to strike is, can I put SEO-related content on the screen in a way that’s also beneficial for the user and maybe helps them find more meaningful content that they want to engage with, and that kind of thing.
Ben: With the understanding that the best practice is to break up the large word blocks with things like pull quotes that you mentioned, or imagery. Do you find that pagination or endless scroll tends to be more performant?
Andrew: You know, that’s a good question. My thinking would be that it should be probably be first and foremost evaluated for performance and load time. I think that it’s easy for us to think about what it’s like to look at a mobile website while you have great WiFi connection while you’re at home, and on your couch and looking a site on your phone. But of course, even in a city like San Francisco, if you’re on the bus and you’re getting around town there’s all kinds of dead zones, or suddenly your reception drops off.
Andrew: Then outside of the US and all kinds of other countries, emerging markets and these things, the connectivity you have is going to be way worse than what we have access to here. I think first and foremost it’s like what loads the content fastest for the user? It’s like any other user experience thing. You’re not even going to get to it if the screen doesn’t load, right? Like if your content isn’t loading correctly, or if when it does load, it loads in this kind of broken way because some bug happens. The rest of it is sort of irrelevant if your users are going to bounce before they even get the content to load.
Ben: Right.
Andrew: So if you could make it. I think the navigation patterns on mobile would tell you that if you could make it performant, like infinite scroll is great because people will load more and more content. We’re used to looking at our Facebook feed, and our Instagram feed, and our Twitter feed, and just want to load more, and more, and more where pagination requires you to sort of make this explicit choice. Tap, and you wait for another screen to load. That would be the kind of way I’d think about it.
Ben: It sounds like in a perfect world, infinite scroll is superior. But, the caveat is if your website or your backend technology doesn’t necessarily perform or doesn’t have the capability of loading the content after the click as the person scrolls down the page, pagination might actually be better just to preserve the initial page load time.
Andrew: Mm-hmm (affirmative). The other thing I was going to add with pagination is that it can be good for … if you have a ton of content, for example if you’re like a marketplace and you’re displaying search results for a huge catalog, you may want for some reason to show, “Oh in fact we have hundreds of pages of results.” So you might see a pagination pattern that says Page 1, Page 2, and then it shows the last page that is like Page 500, “Because we have X number of thousands of results based off of the search that you’ve entered.” So that may also be a consideration. You may want that as some kind of evidence to the user that you have a lot of what they’re looking for. That’s another way to think about it from the user’s perspective.
Ben: Last question for you. As you’re thinking about the relationship between desktop, between the mobile web and mobile apps, what advice do you have for SEOs in terms of what they should be thinking about, and what might not they be thinking about?
Andrew: Right. I think a good point, and a lot of SEOs probably know this, and as far as I know, for native apps there’s not really much to do for SEO. Native apps are a whole separate thing.
Ben: Yeah, they’re not crawlable.
Andrew: Right. But what you can do is what you call “Optimization”, which is to say you may want to be thoughtful about how you write the content that represents your app, often the Apple App Store and the Google Play Store. So this might be things like how you write your description, are you duplicating content in text and in an image, if your icon is shown do you need to also have your logo in one of the screenshots, or can you use a different image in that screenshot? So there’s those types of things.
Andrew: Whereas, with your website and your mobile website you want to optimize those based off of hopefully mapping well to where your users are coming from, and what entry point they have into those things. Where a native app, it’s quite likely that your user has at least seen a few images and a brief description of what your product does, or what that app does that you’re downloading, and you have a more linear path to kind of getting into that. Where with like a lot of pages that you might land on in a mobile website, you may have skipped the part where you’re kind of getting the explanation of what value your user is going to get from this.
Ben: Yeah, I think one of the common threads that I’ve heard from conducting these mobile interviews whether it’s somebody with a technical background, whether it’s somebody like you who’s a designer, but understanding the mindset of the user when you’re developing the experience is something that’s critical. I think it’s something that SEOs need to take into more consideration in that with your mobile experience, if it’s the mobile web like you’re saying, you need some sort of introduction and some sort of onboarding experience that you might not need in your mobile app.
Ben: Desktop, you have more real estate but you also want to take cues from your mobile design to A, make sure everything is consistent, but also you don’t just want to fill every pixel on your desktop because it’s available. You want to keep your designs as simplified as you can and help articulate what the purpose of the page is without having clutter.
Andrew: Right, that’s a great way to put it.
Ben: Okay. All right, well Andrew I appreciate you coming on the show. I appreciate you telling us a little bit about what the designer’s perspective is. That wraps up this episode of the Voices of Search podcast. Thanks for listening to my conversation with Andrew Lassetter, the Product Design Manager at Udemy. We’d love to continue this conversation with you, so if you’re interested in contacting Andrew you can find a link to his LinkedIn profile in our show notes. You can contact him on Twitter where his hand is @CivilanDesign. Or you can visit his company website, which is Udemy.com.
Ben: Also, if you’re interested in a finding a new gig, Udemy is hiring. You can go to Udemy.com/Careers.
Ben: If you have general marketing questions or if you’d like to talk about this podcast, you could find my contact information in our show notes, or you can shoot me a Tweet @BenJShap.
Ben: If you’re interested in learning more about how to use search data to boost your organic traffic, online visibility, or to gain competitive insights, head over to Searchmetrics.com/request-free-consultation for your complimentary advisory session with our Digital Strategies team.
Ben: If you liked this podcast and you want a regular stream of SEO and content marketing insights in your podcast feed, hit the subscribe button in your podcast app and we’ll be back in your feed next week.
Ben: Lastly, if you’ve enjoyed this podcast and you’re feeling generous, we’d love for you to leave us a review in the Apple iTunes Store, or wherever you listen to your podcasts.
Ben: Okay, that’s it for today. Until next time, remember the answers are always in the data.