Improving High - Traffic, poor user - Experience mobile pages

Hi. I'm Maile Ohye. I'm a developer programs tech lead on Google's Webmaster support team. In past videos published on our Google Webmasters YouTube channel, we've talked a lot about website improvement. But mostly, it was by default of reference to desktop websites. In this video, we'll focus entirely on the mobile web and how to improve high-traffic, poor user experience mobile pages. To put things in perspective, in what users want most from mobile sites today, the Google Mobile Ads blog cites that 50% of people said that even if they like a business, they'll use them less often if the website isn't mobile-friendly. In our Webmaster Central blog post, changes in rankings of smartphone search results, my colleagues, Pierre Far and Yoshikiyo Kato, provided advanced notice about smartphone rankings demotions for web pages that offer a poor searcher experience. Commonly, those poor experiences are caused by undesirable redirects to a 404 page, the homepage instead of a corresponding mobile page, or an infinite loop. Today, it's less about just building a smartphone site-- since many of you have already done that-- and it's more about facilitating a great user experience. To improve your site, helpful prerequisites include website analytics installed-- I'll will use Google Analytics-- and also Webmaster Tools verified ownership of your desktop and mobile sites. If you're using responsive web design, then you only need to verify ownership of one site. If you have separate URLs for desktop and mobile pages, like www and m., you'll need to verify two sites. Our process begins by identifying the problem, first checking for high-level issues with our mobile site, then looking to flag individual pages that show high traffic with a poor user experience. The last half of the video focuses on making improvements to those problematic pages. For the purpose of this video, I'm going to pretend that I manage the Google Store, an e-commerce site that sells Google goodies, like YouTube t-shirts and Android figurines, at www.googlestore.com. Using this site, we'll begin with identifying the problem. Let's segment our analytics data between desktop and mobile traffic. I might even segment tablet if I feel ambitious. In Google Analytics, select Create New Segment. Create a desktop traffic segment by selecting Technology and filtering when the device category contains Desktop. The mobile traffic segment can be created by using an available preset. Now, when I look at my analytics data, I can see behavior differences between mobile and desktop visitors. Before looking for page-level issues, let's investigate potential high-level issues affecting all of our mobile traffic. In the audience overview, with the desktop and mobile traffic segments set to a date range of several months, we'll look for anomalies. Anomalies may be significantly lower mobile traffic than desktop traffic when compared to my customers' countries average breakdown by device. We can see that the mobile traffic of 155K visitors is about 22% of the overall traffic to my site. Because it's at 22%, that's one good sign that my mobile site isn't experiencing any catastrophic issues. My visitors come from countries where the mobile traffic ranges from about 1/5 to 1/3 of the desktop traffic. So 22% is about right. Still in Audience Overview, we can check if our site is receiving significantly fewer return visits from mobile users than desktop, since that would also signal a high-level issue. The two pie charts show the breakdown of new visitors versus returning visitors from mobile and desktop. Our site looks relatively OK, because the mobile distribution of new versus returning is about the same as the desktop distribution. If we had, say, only 5% of our mobile visitors returning to this site while desktop had doubled that percentage, that could have signaled a problem. Another method for checking high-level issues with our mobile site is to compare desktop and mobile visitor flow. In desktop, a majority of our user's initial landing page is our home page. And then 20% visit the main shopping page at /shop.axd/home, while 53% of our visitors drop off. The mobile visitor flow shows proportionally similar, though somewhat lower, statistics. 12% of our mobile visitors continue to the main shopping page, compared with 20% on desktop, while 59% of the mobile visitors, compared with 53% on desktop, completely drop off. While the home page drop-off statistic isn't that healthy from an engagement perspective-- and we'll talk more about that in another video-- it also doesn't signal any major issues specific to our mobile site. Thus far, we performed a high-level investigation of our mobile site. The next action is to flag individual pages with high traffic, but a poor user experience. To do so, let's go to the Landing Page section of Google Analytics. Landing pages are pages where visitors first enter the site, whether they come from Search, a link on the web, or an address typed in a browser. Landing pages can be sorted by page views, helping us to find high-traffic issues. First, find the average mobile bounce rate and the average delta between desktop and mobile bounce rate, which, in our case, is about 7%. We'll flag high-traffic pages that show a significantly higher than average mobile bounce rate or higher than average delta between mobile and desktop bounce rate. Turns out that the second most popular landing page to my mobile users is the YouTube category page at /You+Tube. This popular page, visited by over 9,000 people in the last few months, sadly also doubles the average mobile bounce rate. Let's flag this page for later improvement. A few rows down in my landing pages, we see that /Accessories/Google+Watch+Set.axd shows four times the average mobile bounce rate at 87%. We'll also flag this page for later improvement. Even worse, a few rows lower shows that /Google+Redesign/Wearables/Men+s+T+Shirts/page with three times a higher mobile bounce rate than desktop. The average mobile bounce rate is about 8% higher than desktop. But for this men's t-shirts category page, it's three times that. We'll flag this page as well. In addition to Google Analytics Landing Pages, we can use Events to track mobile user behavior. For instance, here's the code I used to test whether the full site link was clicked on a mobile page. Tracking clicks to the full site likely signals that the page has less than the desired usability or functionality for the mobile user. With Events, you can have an aggregate view of the frequency of an event for a given page. As you become more advanced, tracking microconversion events, like contact us, phone, or email clicks, may also be helpful. Thus far, we identified several high-traffic, poor user experience mobile pages. In the second half of this video, we'll focus on different approaches to making improvements. We'll attempt to improve the three pages flagged earlier-- the YouTube category page, the Google+Redesign Wearables Men's T-shirts category page, and the Accessories Google Watch Set individual product page. Especially when it comes to mobile, a great place to look for improvements is within behavior site speed. In this Site Speed Page Timing section, we can see whether a page loads slower or faster relative to the site's average. There's a default sort by page views. So it's really clear what high-traffic pages are also annoyingly slow for visitors. Just last week, I was with my friend and colleague, Nick Mihailovski, who's worked a lot with Google Analytics. And we were both fairly astounded that the third most popular page in terms of overall page views, the YouTube Category Page, required nearly 20 seconds to load, or was 350% slower than my site's mobile average. Poor performance is likely the cause of this page's higher than average bounce rate. It's hard to imagine mobile users being patient enough to wait 20 seconds. To improve this page, we obviously need to speed things up. Site Speed Suggestions list nine suggestions for the YouTube Category Page. Page speed is often a cause of mobile users poor experience. Another cause is poor usability. To get a strong sense of usability issues for mobile pages, if at all possible, try viewing and interacting with your site using the same devices as your visitors. However, if you can't obtain customer's devices, a convenient way to get a very basic sense of what the mobile user sees it through Chrome Developer Tools. At Settings then Overrides, you can select different mobile user agents to view the page. I entered the URL of our second page to investigate-- /Google+Redesign/Wearables/Men+s+T+shirts. This category page had three times the average delta of desktop and mobile bounce rate. To find usability issues, I'll check for things like unwanted redirects, frustrating pop-up windows, fonts or buttons that are too small, and numerous other difficult experiences. It doesn't take long before we notice that when clicking on an individual product, the page launches a wide, difficult to focus and close pop-up window. Additionally, the fonts and buttons are too small for a mobile device. But we can assume that creating large, hard to focus and close pop-up windows for every item on a category page is a significant contributor to this mobile page's high bounce rate. And since this poor usability experience exists on all my category pages, it's something I'll want to improve sitewide. So far, we've investigated speed and usability. Now, let's talk about improving content. The last high-traffic, poor user experience mobile page that we flagged is /Accessories/Google+Watch+Set.axd. This product page sells a simple water-resistant wristwatch with a Google logo. We flagged it because it had four times the average mobile bounce rate. Viewing this page through a mobile user agent shows nothing unusual to warrant the high bounce rate. For instance, the page has similar small fonts and buttons like the rest of the site. And while they should be improved, it's too prolific an issue to be the cause. Also, there are no frustrating pop-up windows, so that can't be the cause. To better understand why the mobile bounce rate is so high, let's try to determine the user's intent for coming to that /Accessories/Google+Watch+Set page. In Traffic Sources, segmented by Mobile, we can add the secondary dimension source. Then if I click on the pie chart view, it looks like 82% of the audience that come to this page comes on their mobile phone from Search. Since search queries are intent-driven, let's go to our Webmaster Tools account for our verified mobile site. Select Top Pages and filter by mobile searches. The /Accessories/Google+Watch+Set page is listed in Top Pages with the dominant query being Google Watch. When we perform this query on a smartphone, we notice that the top search result is about a rumored Google smart watch. Aha. So there seems to be a mismatch in the average searcher's expectation when they click through to our product page. Most want to see the rumored Google watch smart device, not our water-resistant rubber watch with a Google logo. On mobile, it's likely that unsatisfied searchers immediately exit the site. Whereas on desktop, they may try additional pages to find the smart device. To improve the mobile experience of the page, I could bring more qualified traffic. Some options include adjusting the title or meta description so the search result appearance is more indicative of the product. I could also try renaming the item, perhaps to Google Logo Wristwatch, so that the distinction is more obvious to the searcher. And with that, all of our individual flagged pages have now been addressed. Here are additional resources for building and improving your mobile website for happier, less frustrated customers. Thanks for watching.