INBOUND 2015 I&E: Tim Ash "Mobile Conversion Strategies"

Tim Ash argues mobile sites should strip down to essential tasks, not shrink the desktop version. He lists the top mistakes: cramming desktop features, hidden location info, oversized images, long content. The fixes: prioritize speed, reduce features, use big tappable buttons, and test on real devices.
Chapters
My name is Tim Ash and I'm the CEO of Site Tuners. And I'm going to test out to see how good this speaker is. Looks pretty solid. I don't like being behind a podium, so I'm just going to hang out here if that's right, with you guys. I'm going to talk to you today about mobile. Does anybody think that next year is the year of mobile? No, that was three years ago. Okay, so if you're not on the mobile bandwagon, it's kind of too late. You're getting a late start. So what I'm gonna do is try to give you some quick tips to catch you up and give you the perspective from a conversion rate optimization and a view of the world. In other words, how do you make it easier for people to take action on the mobile web? Okay, now before I do, I wanna tell you a couple of quick things about sitetuner so you understand our perspective. I run an agency based out of San Diego. We have offices also in Tampa and work with clients all over the world. And we're ess, a strategic conversion rate optimization agency. So of course we can do landing page testing for you, of course we can redesign your website for higher conversion. But we also, one of our biggest practice areas is what we call conversion management or enabling companies to do conversion rate optimization in house. We don't think you should outsource conversion rate optimization. We think it's too critical to all of the online marketing you're doing. For some of you, you're probably asking, what is conversion rate optimization? Well, it's the getting your visitors to act once they're on your website. So I don't care about driving traffic. I don't care about your email follow up after the fact. I care about that zero moment of truth. When they're on your website, do they take action? Do they buy? Do they fill out your form, do they call you? Whatever that response mechanism is? We want to influence more people to do that. As I mentioned, we work with a lot of big companies. Whatever my vice president of business development said, I had to put that up. All right, now this talk is structured into two parts. The first is I'm going to give you just some wider perspective on mobile and what the mobile experience is all about. And then I'm going to give you 10 things to do and 10 things not to do. Is that fair? How many things total? 20. 20. All right, we got some math whizzes out there. Good. All right. They told me actually not to use this picture because it would gross you out. Who's grossed out? A couple of people. Good. Ok, this is intentional. How many of you have heard this band aid about your office? Raise your hand really high. Yeah, we need a responsive website. Right. Well, I'm gonna go back a little ways. How many of you remember Netscape? Okay. Old timers like me, right? Okay. I like this Streamline haircut, sir. Also very nice. Okay, this was the world of yesterday. And it was easy. There was Netscape, and actually Internet Explorer came along and made things really, really bad. How many of you suffered through the Internet Explorer 6.0 days? Yeah, everything worked except on Internet Explorer 6.0. So we had to make these little hacks to our web pages in order to make them work for Internet Explorer 6. May it a violent death. Right? But then things got a lot harder. Now we're starting with smartphones, we're talking about tablets, we're talking about desktop. Oh, by the way. Yeah. It has to work on your 60 inch LED display as well. So how do you do this? This has turned into a regular Tower of Babel. And things get worse too. Well, the solution, apparently. Everybody ready? Draw pretty boxes. Say it with me. Draw pretty boxes. Okay. They're gonna work the same everywhere. You're gonna have a mobile experience and a tablet experience and a desktop experience. Isn't it wonderful? And we'll just. They'll kind of just move around and stuff. So here's a kind of a archetypical website that looks like that. A one page responsive website. So what you have is the top of the page, I'm showing you the bottom, and in between there's a bunch of zebra stripe sections. Because of course photorealistic background images and color changes are required if you want to do these kind of pages. Well, your reality check just bounced. That is a shit ass stupid thing to do. Can you say that with me? Shit, ass, stupid. Say it with me. Thank you. Okay. How many of you have done that? Okay. It's like a therapy group for. Okay, I'm going to tell you why it's a bad idea as we go along here, but as I mentioned, I run the conversion conference event series. We had one here in Boston a couple years ago, right at the seaport. And Richard Banfield, one of our keynotes. And I quote him, I'm not the only one that swears. Most responsive websites are infinitely scrolling pieces of crap. Can I get a hallelujah? Hallelujah. Okay. That's what they are. You've destroyed the whole paradigm of the web, just in order to make it easier for the thumb flippers on their phones. Right. What we need to be responsive to is not the website design, it's to the context. Do you see how each of these is a very, very different mindset? What's my context? Am I board in front of my desk? Am I on the beach with a laptop or tablet? Is my dog chewing on my leg? And I'm at home checking something on my phone? You know, I was in the urinal here, true story, about half an hour ago. And there's a little thing in the, you know, like for guys, we have those splash things in the urinal so we don't mess up ourselves. And there was a one in there about inside sales. Are your conversions pissing you off? Right. Okay, that's really targeted. But I also want you to think about how we see these things in context. You women have not seen this unless you know you've been going in the men's bathrooms. Don't ask, don't tell. That's my policy. Okay? Nothing wrong with that. But it's about the context. It's not about the technology we're trying to reach them with. It's about what their mindset is. And this is numbers from Google from just a couple of years ago. I'm sure it's kind of increased even since then. A lot of us are doing multi device. How many of you are doing multi device stuff? You're watching tv, checking your email, or you're doing something on your laptop and you're doing something on your smartphone. Probably a lot of you doing that right now. Stop checking your email, sir. Okay. Multi screening, it's bad. Okay. By the way, we heard the talk in here. Who was in here for the previous talk about the brain? We can't multitask. Anybody think we can multitask? We can't. We can switch faster, but every time we switch, it costs us this context switching time. So nobody can multitask. If you think you're doing something more efficient by doing that, you're wrong. You're spending more time context switching. So devote longer blocks of uninterrupted attention. That's the way to go. But having said that, we don't do that. But all of you are doing this responsive website and I'm gonna tell you what it does is it kind of breaks the whole paradigm of the web, which is hypertext, right? We can click on things and go to other places. Now what we've done is just turned everything into one long linear experience. And so the only brilliant marketing things that you can do are decide what order to put those silly little blocks on the page in. That's it. That's what your marketing is now reduced to. If you think that's a really good idea, okay. It makes your job easier and it makes Google happy because they say you can't have M mobile sites anymore. You need to have everything responsive. It's really horrible for your visitors. So I'm here crying in the wilderness in order to address the needs of your visitors. So let's talk about what makes mobile unique just for a little more background. So one of the things you have to understand is that we're multitasking. Like I said, bad idea. We're doing it with one hand, we're doing it outside. We usually have pretty shitty contrast on our screens and we're interrupted. This cannot be underestimated by the way, those of you snapping screenshots. I am going to make my deck available. So I forget where you guys need to download those, but wherever you get your presentations, this is all available. I have a lot of text, very different from most of my other presentations. It's meant to be read afterwards. All these little tips are going to be in there. Okay. One of the things I expect you to know is where I am. I expect you also to correct any mistakes I made and I expect you to do it hands free, essentially. So let's take a look at some of the how we do this or what we do online. We're touching our phones 130 times a day. How many of you are doing more than 130? Okay, honesty. Okay. We might look up something that's timely. Oh, there's a game going on. What are the scores? Time sensitive. Where's the nearest gas station or restaurant? Hungry? Location specific. What's nearby? A lot of the social networking is built on having our friends and who's close to me now that's what I want to know. Hey, you want to meet up at a bar? That's kind of the context. And it's like I said, switching between devices is also very, very common. So what you want to do is kind of create an end to end experience that's going to be similar or with enough framework that's common across all of these devices. So this is tough for us because here's the stuff we have to deal with. Small targets for hitting things on the screen. Okay, they're jiggling. You don't have the focus to do long forms. We're lower bandwidth. I'm Going to come back to that one. And interruptions and a lot of touching, which we don't like to do on the screen. So that leads me perfectly into things you guys are doing that you need to stop doing. These are my top 10 things to avoid. You ready? Number one, like I said, your mobile site should not be everything on your desktop site just crammed into a single column. That's a bad idea. How many of you have any kind of like E commerce component or anything to do with physical stores and brands offline? Can you raise your hand? Okay, so I bet you like. Let's use Best Buy as an example. I bet you if I go to Best Buy's mobile website, I can predict the number one task that you'll be doing on that site. Anybody want to guess? Search engine. No, that's not it. Anybody else research? Research? Nope, we're not doing research on our phones. Most popular? Nope. Find a store. Thank you. Location. Someone said over here, find a store. If you have physical stores and I'm with my phone, which is with me everywhere, I'm probably looking for your store. That's the number one use. If you have kind of brick and click businesses. Was that hard to predict? No. I mean, do you think I'd want to do research or look for Most popular or any of those other things that people mention on my tiny little phone like this? No. I want to do it on my desktop or at least my tablet whenever I can. I'm not doing it with the phone. With the phone I'm looking for. Where is your nearest store? See, what do you need to do in order to do that? Is you have to rethink, not your desktop experience. You need to start with mobile. Who's heard of mobile first? Kind of as a design philosophy. Good. It means most of your people are now viewing your stuff on mobile. You need to start with that context. But mobile first doesn't mean have mobile and then have everything on your main site as well. It means think about the tiny subset. We're talking about 20% of your website functionality that's going to be necessary on the web. The greatest good for the greatest number. What are you doing to squish everything and really essentially think about. I forget who this is a quote from. I believe it's Einstein, but if I'm misquoting, let me know. He said something like, elegance is not when you, you know, the ability to add more things. It's when nothing else can be taken away. How many of you use Apple products in the room? Yeah, of Course you do. Okay. Are you proud? Are you tribal about it? I use a Samsung phone because, you know, I like to get work done on my phone. But hey, that's another story. Oh, Woo. Yeah, okay. No, not going to start a jihad here. Sorry, folks. Okay, I take all that back. No, but one of the things that Apple is known for is its elegance of design, right? I mean, most laptop keyboards have two buttons next to the trackpad. Well, Apple doesn't have any. What is the minimum? And I saw my kids when they were two or three be able to figure out Apple devices. So the essential thing is when is it at the point when nothing can be taken away. That's how I want you to think about your mobile experiences. What's really essential? Don't think. But oh, 2% of people might want to do this. Oh, 3% of people might want to do that. Pretty soon you're back to your full website. Have the discipline to really, really start with nothing and add only essential things. That's how you design your mobile experience. Your desktop site can still be the horse designed by committee. You know, that's what a camel is incidentally, a horse designed by committee. Because everyone's got their hands in it, that's fine. For the mobile experience, you have to be really, really disciplined. Okay, all right. Mistake number two is making it hard to find your location. I already talked about that. If there's any physical component to your business, how many of you have a physical component to your business? Either coverage areas or locations or anything like that, Raise your hand up high. Okay, Definitely make it easy to find location because that's one of the first things people are looking for. And again, I'm not going to read all this text. You're probably thinking, thank God, Tim, this is for you to read afterwards. Okay? Number three, using non standard buttons and control. One time I was on a. I use this as an example. In my book, there was a website for a pet company, kind of like pet meds or something like that. And they had this little box at the top of the screen and next to it was a little bone, okay? And it said the word fetch on it. You guys get it, it's their search button. But I'm going through all these mental gymnastics going, okay, a bone, is that a button? Fetch, is that the same as search? You see how much effort that took? So if you do anything non standard, you're really pissing into the wind. I mean, you're gonna get blowback piggyback. Did I say that out loud? Sorry, That's Tourette's. Okay, Piggyback on well known conventions. What do buttons look like? What do press areas look like? How big should things be? Where are they on the screen? Don't go against convention. You should really take advantage of that. If you're doing anything cutesy on mobile, you're gonna kill yourself. All right, don't forget that I have add. How many of you have been officially diagnosed like me? All right, okay. There's Ritalin for that, right? No, but it's amazing. Back in my day, they're just like, he's a spaz and he gets to go to detention and now all the kids are getting riddling. Same difference. But one of the things you have to realize is that on the web we have the attention span of a lit match. Think about it. And mobile, it's even worse because of all of the distractions. And so the most price, kind of priceful. No, sorry. The most valuable commodity that you have for mobile user experience is attention. Tweet that shit inbound 15. Most limited commodity you have is somebody else's attention. Don't forget that. Okay, this goes along with. It's even worse. Like you have some of my attention, but if you actually expect me to remember something. How many of you have had this experience on the web? Oh, I need to type in a number into a field and I don't remember the number. So what I'm going to do is I'm going to go and I'm going to go to this other application where I have it, I'm going to cut and paste it and then I'm going to put it into a form. How many of you have ever done that? Yeah, isn't that a horrible experience? Think about that. What's even worse is making me remember it because I'm not even going to do that. So we're willing to go through all of those hoops just to avoid remembering something. So if anything you expect people to do in a mobile experience requires memory, you lose. It's a non starter. Don't expect me to remember anything. That's the default position. So you know, if it's your Social Security number, maybe you know that if it's your credit card number. Nah, not so much. Let's talk about using your screen for things it's not meant to be used for. Okay, so in a desktop scenario, Williams Sonoma, this would be just fine, right? On a larger screen we'd see the nav, the sub nav. But in mobile, where is it all going? What do we Do. Sorry. So this is kind of a sort of go back. Where is the navigation? It's all under that little hamburger menu, right? Then there's an ad, then there's another ad, then there's another ad, then there's another ad, then there's another ad. You with me? What did we forget to do? Navigation is. We've replaced it all with promotional crap. Really, really bad idea. So often a lot of your sites should not be pictures, not be pretty pictures we don't have. It's not a billboard, folks. The screen of your phone is really tiny. I don't care if you have a Retina display or whatever. More pixel density doesn't make any more screen real estate because it still has to fit in my back pocket. Okay? So when you have that, you have to use it for useful stuff, getting me to the information I want instead of advertising to me. So leave room for navigation on your page. Contact information. This is another thing. Believe me when I tell you your mobile experience sucks. So at some point somebody might get frustrated and want an alternative experience. Now you can send them back to your main site. Probably not a good idea. You could have them chat with someone, you could have them call you. Okay, Making contact us or alternative response mechanisms really, really clear is something that's critical. Large images, one of my favorites. I said about something about this already. Now think about it. How many of you are managing creative people as part of your mobile web design or something like that? Raise your hand. How many of you are creative people? How many of you completely non creative and that's why you went into marketing. Okay, all right, that's the rest of us. Okay, no, but think about it. When we use giant images, there's less stuff to see. In desktop, it's fine. In mobile, it's not. One of the things that the problem is, is that there's going to be lower engagement with content because they can't see the content. The content is getting pushed down the page by the giant images. And a lot of times we resize things and go, well, yeah, my images are only giant on a 30 inch monitor, but they get really small on text. But still there's a minimum size. How many of you have a minimum image size that you won't go below? Right? When you're doing this kind of stuff, you should, right? So it's inevitably pushing things down the page. So be really, really careful about that. Now, how many of you can click on the text link inside of that text block you're seeing there's actually a Text link in there. I challenge you to find. It won't be easy. Too small, right? The text is too small, buttons are too small, links are too small. And again, what works on your desktop won't work here. It's okay to prioritize visually on your desktop. You'll often say button lower right. Do this secondary action text, underlying text right next to the button. That's my backup. Things you don't do as frequently. Well, that text effectively disappears on a mobile device. You can't do anything with it because you can't click it. It's too small. Now, I do have some guidelines for how to fix that in the second part of the session here. Mistake number 10, the last one. Using long winded content. No one reads even looking at a webpage on a desktop. Why do you expect them to read on mobile? I mean, all thousand pages of Tolstoy's War and Peace book. Go ahead, read it. Seriously, this is the San Diego Criminal Attorneys or something like that. They expect you to read all this. You know where they got this text from? Their print brochure which ended up on their website, which ended up on their mobile site. It's a direct lineage. They haven't changed it at all. They still think this amount of text is actually okay for the web and for your add short attention spans. All right, so I told you things not to do. Here's how to fix the problem. I'm in practical mode today. Top 10 things you must do. And these are going to be. Some of them are going to be kind of the converse of what I told you not to do and how to address it. Number one, this is a new one. How many of you have looked at your page load speed? Honestly? Raise your hand high. I want to see. Okay, not most of you. Okay, good for you guys. Good for you. Page load speed is critical. Do you know that Google is on a mission to speed up the web? You know why? They found out that a half a second delay in the perceived load time of a page when it actually is fully drawn results in 20% lower conversion on average across all industries and activities. Half a second is costing you 20% of your business. On mobile, it's even worse. Okay, here's the stats on mobile. When do people bail out of the experience on mobile? So if your page is taking some number of seconds to load and remember, let's say how many of you are here inside the convention center and Boston's a pretty wired city, right? Or wireless. How many of you have only 3G coverage in here right now, it's pretty crappy, especially a lot of places. We're doing it inside of buildings and basements, you know, surrounded by giant concrete structures and things like that. Remember, they don't have cable, modem or your work network speed. They only have their little wireless connection. And that wireless connection can be really, really slow. And they have even less patience. So you really have to make sure your site's optimized for speed. That's critical. And there are all kinds of free tools out there. Sosta is one that comes to mind. S O S O A S T A that will measure page load times on mobile and on web, make sure that you don't have people leaving just because they're not willing to stick around to even see your page. And if you do okay, you say, well, Tim, it's inevitable. We have to have some amount of load time or we're calculating something behind this scenes, and it takes a while to get results back. Well, then how do you kind of make me delay? How do you make the delay tolerable for me? So if it's two to four seconds, you know, you can have a spinner. If it's four to eight seconds, you might want to have one of those sliders loading. If it's longer than that, then what you want to do is have some kind of little messaging. How many of you have, like, loaded Microsoft software before and it's like, oh, yeah, we're loading. And oh, by the way, did you know that you could do this totally useless thing when it finally loads? Like, they have little informational screens, and you're going, that's stupid. But at least you were distracted by reading it and thinking about it. So you can have these little messages go along for longer experiences. And at least you know, just even if you're annoying them, you're distracting them, and distraction is good because then they're not focusing on the waste of time that you've just forced them to be to sit through. All right, let me show you an example too, of page load speed. So when you have Alaska Airlines, I just flew them here from San Diego. Look at how simple their site is. You know what they have? They have a little house symbol. They have the Alaska logo, which is actually against the color background block. So it's just the actual Alaska logo. And the rest is, guess what? Text. Straight lines. There's no graphics here. There's nothing to load. How long does it take to load text? Well, it's just text. The font you're using, the size of the font, you know, it's the styling and that's it. So this kind of stuff, minimal graphics, blue links for color to make it real clear what's clickable and what's not. This is the kind of like zen like simplicity that you should be going for in your mobile apps. Okay. Oh, incidentally, like the number of travelers here, I don't know if you can see this, but they have little plus and minus arrows on mobile. You also want to change a lot of your controls. So pull downs, really, really bad because they're long, they're going to scroll off the screen on the mobile device, you won't even see them. But having something that's just like an up and down arrow to change quantities or to go to the next option is a lot better than pull downs. Okay, this is a trick from Luke or Blinsky. This works really well. There's a little URL by the LukeW logo that you see over there. Check it out. Which image is clearer? Anybody tell? No, that's because actually the one on the right is clear. And guess what? The one on the right is half the size of the one on the left. So you can do this two step trick. You basically take it down to 50% size with zero image quality and that's what what the algorithm will do. And if you're interested in that, again, the little bitly link is right there on the screen when you get the slide deck. So you can take all your images and make them half the size with slightly better quality. Is anyone okay with that trade off? Okay, just checking. Now one other thing you should do is be really careful. A lot of responsive websites load images by default in the highest resolution possible. And that's really high. Like we're talking about 3,000 pixels wide kind of stuff for large screens or high density screens. So you have to make sure that you're not doing that behind the scenes. You have to get a little technical and go ask, or at least go ask if you don't have to do it yourself. But find out whether you're preloading Giganto images without knowing it. Go. Well, no, looks fine. Well, yeah, except it's taking three seconds to download that file. Just that background image you decided to stick in there. Right. So if you're going to do mobile, pull only the mobile images and scrunch those using a number of different tricks like this one, to make them as small as possible. Okay, Number two, I've already talked about kind of in a glancing way, reduce the features and content on your site. This is really important because, you know, I'll give you the analogy of an ATM versus going into a bank branch. 90% of people walking up to a bank branch want to deposit or take out money. That's what ATMs are for. Originally they were a labor saving device for the bank because they didn't want you to talk to a live teller and that custom money. Right. And so they made ATMs free. Then they saw that people really liked the convenience of that and they started charging us for ATMs and made the bank branch free. Okay, that makes no sense. But we're dumb enough to go along with it. But if the bench branch is open, doesn't cost you anything to take out money there. But why are we paying for it? Convenience. And it's because the one thing we want to do, it's in and out. The task is put a check in or money in or take money out. That's it. Do we need the whole bank branch? No. They just shoved literally 80 to 90% depending on the bank branch location of their business, onto an automated kiosk outside. Because that's all people wanted. And in the same way in the mobile experience, you have to think what's the essential task that people are there to do? What are they not going to do instead? Really? You expect them to apply for a mortgage on your bank website? No, you'd walk into the bank branch for that. Would you expect them to do that on your mobile phone? It's ridiculous. It's a non starter. So what are you putting in there just for the sake of completeness that won't ever get used? So here's the Chase. You know, I've gotten this banking example. Here's Chase's regular website. You can see that. So there's login for customers, a mortgage rate banner and open a checking account. Find free credit cards. Actually open a checking account and find free credit cards. They found were the two most useful tasks that people actually tried to do on their mobile site. There's their mobile site. See how radically different that is. Big fat buttons. What do you want to do? Login. Contact us, Find a branch. Notice that location part or browse credit cards. When you go to the credit card part, it has tiles. Big, simple, easy to push tiles for subcategories, by the way, tile everything. Don't use other kinds of controls. Even if you have a multiple choice option. Don't use radio buttons. Use two tiles. Pick one. Okay. Pull downs. You have a tile for plus, a tile for minus to control those with the little number changing in between. Use tiles for everything. All right. Adapt the experience to your most used devices. Okay, so I was making a joke about the Apple folks earlier. Guess what? You guys are responsible. Raise your hand if you're an Apple person. Don't be shy. Okay. You guys are responsible for 80% of mobile e commerce. Good job, ma'. Am. Well done. Okay, apparently us Android people are cheapskates. Could have told you that before. Why is that important? Because if you look at your web analytics, not all of your devices matter. There's quickly kind of a fragmentation and a point of diminishing returns. So you should be looking at what device type specifically are using my mobile site, what's my demographic? And optimize for those. How many of you use products like CrossBrownerTesting.com? okay, just a couple. Okay, jot this down. You can basically time rent any kind of operating system or any environment you want to check your. You don't have a usability lab. You don't have all these devices sitting around. Just go see what it looks like on other devices. Desktop, they think they're increasingly having more and more mobile options. There's all. Don't use the cheapo simulators just because you can. You know what I'm talking about? Like Google's got, oh, it's like, preview this on an iPhone 5. Well, all it does is just like, shrink the screen so you can only see fewer pixels. Right. It doesn't really simulate the device or how it works. So test this on the real devices, either by getting a good simulator or by actually getting the device and trying it out. See what it's like. Okay, so at some point, though, there's a corollary to this. When you get to the point of diminishing returns, stop. Don't optimize for the 2% case or the 5% case or maybe even the 10% case. Give them your average experience for that one. Now, what I said was evil was what I call responsive light websites. But I am a big fan of progressive enhancement where you actually put more thought into your site changing. It's not just the number of columns, it's how it's presented and the functionality that goes into it. Even just navigation. Here's a great example. So how many of you are PBS or NPR watchers or listeners? We've got some smart folks in the room. All right, now let's take a look at their navigation. You have their logo. In the upper left, you have the main navigation bar, and then in the upper right we have their kind of supporting navigation bar. That's the desktop experience. Now check this out. Now we're looking at their mobile experience and their tablet experience. The header got smaller. All the information's there, but not as many choices. On the main Navbar, we had 1, 2, 3, 4, 5, 6, 7 on the desk or in the laptop version, sorry, tablet version, we only have five. On the mobile experience, everything's collapsed on the hamburger menu. There are no other navigation options. Okay, that's progressive enhancement. Okay. That you want to decide what are those important breakpoints, points and then again rethink fundamentally different experiences for tablet users and mobile users. Okay, number four, must do make calls to action and navigation easy to use. Make it really, really simple. One touch giant buttons, giant clickable areas. What you want to do is. And again, I'm not going to. This is just for additional information. Basically we have fat fingers and thumbs. Don't make things too small or too close spaced. Read all this later. Okay, here's an example of U.S. soccer. Now, one of the things they have is, here's their screen. They have three articles you can read on their website. Each picture is a giant thumb clickable area. Now if you are going to have giant pictures and that's all you want to display on your homepage, it's all clickable. There shouldn't be little fine distinctions I have to make and places I have to wiggle into on your website just in order to take action. Number five is leverage the user's location. Think about it. What can you do with information about the user's location? How many of you visited like giant international brand websites before that have websites for all over the world. Sir, did you get to a screen that said pick your country. Right. Usa, Uganda, you know, Right. They're usually like user together, right? Seriously, you can tell with 95% accuracy and geotarget me know exactly where I am. Why are you telling me to pick a country? Why don't you default me to the correct location or country or whatever kind of your unit of geographic measurement is and then say, hey, change location here with the little text link in the unlikely event that you got it wrong or that they actually want to look at the French site for Nestle or something like that? That's okay, they can have the option. But don't make people jump through hoops. Where are you? Well, you certainly know that on a mobile phone. You know where they are. You know exactly where they are. Now here's an example of kind of how Starbucks do this. They you know, they take you to their website but they ask you immediately can we use your location? And then from then on it activates the, you know, you get affirmative consent to turn on location on the phone and they're tracking you. And then all of their site experiences, you know, they don't have to do the seven touch, you know, type in your zip code or five touch, type in your zip code stuff to find a location. They say, can you tell us where you are? Okay, here's our nearest locations. Another thing you want to do is simplify your contact form. How many of you have optional questions on your contact form? Okay, get rid of those today, at least on the mobile site. Okay? This is really important. Remember, the attention is leaking, the people are leaving, they're not going to stick around. So what do you really need to know on the contact us page? Phone numbers. How many of you have clicked to call on your mobile contact page? That's sad ass. Can I say that a few of you, there's maybe 10 hands that went up, they're on a phone. If they want to contact you, how do you think they're going to want to contact you? You think calling you might be in one of the response mechanisms. You should have no, fill out our contact us form and someone will call you later. Do you see how much sense that makes? So don't do that to people. Have not just your phone number out there, that's not even good enough. Have a big fat click to call button because there's a good chance that that's what they want to do. Not going to go through that example. Minimize or maximize your content to navigation ratio. Now what do I mean by that? People are looking to find something. They're not looking to understand your whole menu structure, your information architecture. It's just way too complicated and a huge investment of their, you know, kind of, how would you say conscious brain power to decipher what you mean by labels and what those sub menus are. So what do you want to do is have. Just like Chase did. Remember they had these big fat button areas on their, on their first page on their mobile site. They gave you the four top tasks, get people off of that homepage as quickly as possible. And it's just the rule of 80, 20, 80% of people are going to benefit from 20% even on the mobile site of the mobile features that you have. So make those front and center. Don't take up your whole room of your site on your mobile site with navigation. So you see how, for example, on ESPN people want to get to the articles. Great. They have a hamburger menu. When that slides open, the navigation takes over more of the screen experience. That's fine, but don't take up with static navigation. Too much room on your mobile page. Pretty much everybody at this point understands the hamburger menu, by the way. Maybe not. Let me make no assumptions. You know what the hamburger menu. Do you not know what the hamburger menu is? Let's try that. Okay, sir, the hamburger menu is that little thing in the green section, the three horizontal lines. It looks like a piece of meat with the buns around it. That means menu. If you want to make it clearer, if you have an older demographic, then put the word menu under the hamburger symbol. Okay? But everybody knows that, or most people know at this point that that's where the navigation is hidden. You can't afford to have permanent navigation on your page. It's too expensive. The screen real estate is too valuable. Okay, popovers, Those are annoying enough on a website. On a desktop experience, you can't have any layering. On a mobile experience, layering is horrible. It doesn't work the same on all devices. It might kind of jog or, you know, that nice sight you designed to make sure it flexes and resizes to the screen. Guess what? Chances are your popover code doesn't do that. So you might see only 2/3 of the popover box with the right third of it being off the screen. Have you ever seen that? Who's seen popovers that are larger than the screen width all the time? Right? Don't use them, they're just evil. That was a quick tip. Should be easier. Okay, return visitors. Remember we said people have short attention span, they're easily interrupted and they're busy. If they do happen to stumble their way back to your mobile site, can you at least recognize the fact, hey, last time you were here, this is what you were looking at. Welcome back. Do you need to land them on the homepage if they've already drilled two or three steps deeper into your mobile experience? Or can you say, hey, would this be helpful for you to reinsert them into that same context, into that same workflow? Even if it's a multi step form, God forbid on a mobile experience. But say, oh, you already did these things you want to pick up on step four, Give them the option. So how many of you are cooking people on mobile and serving up a different return visitor experience? Nobody. This is like a free. Give me. This is like picking up gold nuggets on the ground. Think of what state what information do you want to save about what people did on your site on their last visit? How can you make their lives easier if they had the courtesy to return? By the way, there's much higher engagement. The more repeat visits there are to your site, the much higher the likelihood of conversion. It basically goes up exponentially with the number of visits to the site. So you want to encourage them to return, but if they do, help them, be helpful. All right, so let's wrap on this, and I think we'll have a little time for Q and A. Test your mobile on many devices. Just because it looks okay on your phone is not quality assurance testing.
More from Patrick

A NEW BREED OF PARTNER: The Partnership Ecosystem Model Journey of Patrick Biddiscombe, Part 1

Customer Success Workspace: Never Lose Sight Of What Matters Most | HubSpot Spotlight








