Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Takeaways From Mobile Web Behavior

According to Ian Carrington, Google’s mobile and social advertising sales director, speaking at Mobile Marketing Live back in 2012, more people in the world have access to a smartphone1 than a toothbrush.

Further reading on Smashing: Link

With that in mind, it’s perhaps not very surprising that there’s no shortage of information about how people interact with websites on mobile. From specific usability testing and scrutiny of Google Analytics data to more generalized but larger-scale projects, we can quite easily gain access to statistics that illustrate how users interact with our websites.

This vast array of knowledge is beneficial only if we analyze, utilize and capitalize on the information to specifically improve user experience. In particular, by looking at the ways in which users interact with websites on mobile, we will have a basis for learning that becomes mutually beneficial.

Below are six ways we can learn from this information.

Mobile Users Check Their Device Frequently Link

Research carried out by Salesforce for its “2014 Mobile Behavior Report7” (PDF) indicates that the average mobile user checks their phone over 1,500 times a week and uses their device for 3 hours 16 minutes every day. Their main tasks, in order of occurrence, are:

  1. accessing email (91%),
  2. text messaging (90%),
  3. searching the internet (76%),
  4. social networking (75%),
  5. while watching TV (70%),
  6. keeping up to date with the news (62%),
  7. playing games (57%),
  8. listening to music (46%),
  9. reading (43%),
  10. watching videos (30%),
  11. getting directions (24%).

Takeaway 1: Content Length Link

It’s clear that “mobile” users are constantly active, and we can use the list of habits above to our advantage and really optimize our website’s content for mobile visitors.

Based on research by Medium8, articles that take the user around 7 minutes to read are ideal. Although this is the peak of the trend, a great article can be of almost any length. Google will judge the value of your information with a “time to long click” metric. This means that when a visitor stays on your page for a long time, they are telling the search engine that your content has provided real value to them.

A technique you may want to consider to hold visitors on your website is “pageless” (endless) scrolling. This can be a good format to achieve a low bounce rate, but without proper implementation, it could harm search results and become counterproductive. (We highly encourage you to read our article on Infinite Scrolling: Let’s Get To The Bottom Of This9 first to avoid faulty implementations and annoyoing user experience when using the “infinite scrolling” pattern. —Ed.)

The key is to break up content into sections so that crawlers can better replicate user behavior. An infinitely scrolling page is made SEO-friendly when it’s converted to paginated sections, all with similar title tags and rel="next" and rel="prev" values in the template’s head section.

See the demo10 created by Google webmaster trends analyst John Mueller, for example. With the usual infinite scroll, content displayed after the initial page load isn’t indexed, rendering it unsearchable. With the SEO-friendly method, all content is accessible, thus maximizing search potential while maintaining the ability to hold visitors with your carefully crafted content.

Full details on paginating an infinite page can be found on the Webmaster Central Blog11.

They Use Their Device As A Second Screen Link

According to a 2014 Statistica report12, up to 71% of tablet owners use their devices as a second screen or engage in activity on their device while carrying out other tasks.

People will use their tablets when watching television, use both smartphones and tablets simultaneously, and listen to music through their device as they carry out other unrelated activities.

Second screen13
You’re unlikely to have 100% of a visitor’s attention, so don’t make them think! (View large version14)

Takeaway 2: Visitor Involvement Link

Understanding that a visitor’s attention might be focused elsewhere helps us appreciate the importance of maintaining both interest and ease of use.

Your website’s structure can play a huge part in this. When a page lacks visual hierarchy or defined sections or is just plain confusing, the visitor’s brain goes into overdrive to understand what’s happening.

Injecting character and unique elements into the design will help to separate your brand from others, but do this while ensuring that users can navigate your website intuitively.

One way to capture attention the right way is with original design elements15 and graphics and by making sure the content you serve is presented in a manner that is out of the ordinary and that, therefore, triggers visitor involvement without being intimidating.

The layout for Eat And Think16 meal plans is an example of how we attempted to turn information that might be deemed difficult to digest into something that holds the visitor’s attention — in this case, for all 11,000 pixels of the page.

By breaking content down into distinct sections with the use of bold headings and graphics, we achieved a bounce rate of under 19% for the plan across mobile devices. Repeat visits were also high, with users returning to view their plan twice a week within the first month of purchase on average.

Eat And Think meal plan17
Novelty elements and graphics can trigger visitor involvement. (View large version18)

People subconsciously pay attention to individuality and switch off if anything becomes repetitive. In this way, the novelty factor needs to remain throughout the visitor’s journey on your website. A mundane and unimaginative layout could sap attention within seconds.

It is also important that first-time mobile visitors be able to complete tasks without being overwhelmed. By combining novelty elements with ease of navigation and a practical interface, you can create a fantastic experience, even if visitors are not giving 100% of their attention.

They Use Geolocation And Push Notification Link

An increasing number of people like the concept of geolocation19, which opens a gamut of opportunities for web designers and marketers. For example, Groupon presents local offers20 to customers and Google tailors search results21 according to where you are.

Geolocation22
The combination of geolocation and push notifications opens a host of marketing options. (View large version23)

When geolocation is combined with push notification, marketing can really come into play. For example, Starbucks sends potential customers24 a push notification when they walk within a geofence around a branch. A geofence is a virtual fence with a geographical radius that triggers a tailored update notification, offer or coupon to any customer who passes through the area. This might be annoying if you push it over the edge, but sending an update once and again with user’s consent might be worth considering.

Takeaway 3: Brand Trust Link

In order for people to sign up for a geolocation-based service, they must trust the brand and the quality of the app and believe that something is in it for them.

Your website can go a long way to instilling confidence through tone, consistency and branding. As with newsletter registrations, always make clear the benefits users will get from registering with you, and help users understand that their data will be protected and that they will be able to opt out at any time.

As a developer, always bear in mind factors that could cause app abandonment. Some of the most common reasons25 for one- and two-star ratings in Apple’s App Store are bugs and overuse of a device’s bandwidth or power. For example, a previous version of Staples’ app continually used GPS26 actively and, therefore, quickly drained the battery, ultimately discouraging people from using the application.

Obvious but worth mentioning: start by going through Apple’s “App Programming Guide for iOS” (PDF) to avoid making similar mistakes and to ensure that your app delivers a fantastic experience without these common pitfalls.

They Avoid Typing Link

You’ve no doubt experienced the frustration of mistyping or forgetting the context of an online form due to a phone’s small screen. Because of the difficulty of submitting information, around 50% of mobile web users27 choose to log in via social networks in order to avoid having to type in text and remember countless passwords.

Well, it doesn’t mean that it will automatically work for every website, but you could compare the conversion rate with both and see what works best. One thing to keep in mind though is that sometimes users might not remember how they logged in or signed up last time, so they might end up with a few duplicate accounts and start wondering where their data has gone.

Takeaway 4: Orientation-Specific Formatting Link

When tweaking a website for mobile, first consider the necessity of information having to be typed in. When information is absolutely necessary, prepopulate the form as much as possible.

Even the simplest things, like placeholder labels, can cause issues. Despite looking clean and saving space, the context of a field can be lost as soon as the user starts typing. With just the smallest of distractions, visitors can forget whether you have just asked for their first name or full name, their county or country.

Although this format works well when one or two fields are being completed, it becomes an issue when you’re asking for a lot of specific information. The visitor will then receive an abundance of errors upon submission due to incomplete or incorrect data, which is highly frustrating.

One solution is to left-align labels, but this leaves little space for the fields themselves on a screen in portrait orientation. The other option is to position labels above the fields, but again, this restricts users with screens in landscape orientation; iPhone 6 users would see only about one third of the screen, meaning that the form’s context would be lost again.

Avoid typing28
Tailor your form’s labels to the device’s orientation. (View large version29)

So, what can you do? The key is to use both variations and to dynamically change the labels’ position and the font size of inputted text according to the orientation. This will give users an optimal view in both situations, thereby improving accessibility and reducing the chance of input error.

An even better option would be to use the floating label pattern30 or display input fields differently altogether. Very much like Typeform does31, you could let the user focus on typing alone. So instead of using the mouse, for example, the user is focusing only on one input field at a time. Virgin America Airlines32 follows the same pattern in their flight booking process.

They Watch Videos Link

Online video is still a huge growth area, and the number of users is expected to reach 1.5 billion in 2016. YouTube’s own research33 indicates that 50% of its users watch videos on their smartphones, with YouTube alone accounting for approximately 18% of all mobile data traffic34. According to Invodo, mobile and tablet users are also three times as likely to view a video on these devices as they are on laptop and desktop computers.

All of these statistics quite clearly indicate that including video on your website promises a good return on investment and is something you ought to be doing to increase traffic. Nevertheless, a surprising number of websites have been slow to implement this.

Takeaway 5: User Journey Videos Link

If you’re not already creating video content, perhaps now is the time to start. Great results can be achieved even with low-cost options, such as vlogging or a short educational series. You can then begin to build your YouTube channel and embed videos appropriately across your website.

Vlogging35
Vlogging is a low-cost way to regularly reach subscribers. (View large version36)

Once your videos are in place and fully responsive, the next step is to evaluate their position in the layout. For example, marketing- or sales-related material would best be used early in the m-commerce journey to increase interest in and curiosity about your brand and products, enticing the customer to delve further and, ultimately, creating the intent to purchase. As the visitor reaches more specific category levels, videos that help them make a decision, describing what sets product A apart from product B, would be highly useful.

Finally, more specific videos should be embedded within product-level pages to close sales and increase conversions. According to Econsultancy37, visitors are 64 to 85% more likely to make a purchase after watching a video, making it a very worthwhile exercise for both you and the customer.

They Shop Link

Google Mobile Planet38 states that 20% of smartphone users in the US make a purchase on their device daily and 14% weekly. Tablet users spend over 50% more per purchase with online retailers than smartphone visitors and 20% more than laptop and desktop visitors. At the top of the list of product categories are items such as event tickets, gift cards, food and electronics.

Takeaway 6: Cart Streamlining Link

To ensure that you’re making the most of your m-commerce website, make sure the navigation and filtering are easy, the loading time quick, the methods of payment trustworthy and the checkout straightforward.

Always provide guest checkout as a default option, and set shipping address the same as an invoice address by default. Avoid email verification input fields (a vast majority of users consistently copy-pastes the email address from one input field to another) and avoid any optional fields — it might be better to display them on toggle if necessary.

Always be very clear and transparent about pricing and shipping costs, and provide both the time and the price in local currency as soon as possible. Make use of free shipping thresholds and pre-fill as many input fields as you can, e.g. the “State” and “City” by asking for a ZIP code first. Make guest customers feel secure in using your checkout and in manoeuvring easily from choosing products to selecting a delivery method, with just a few taps of the screen.

They buy things39
Top purchases include event tickets, gift cards, food and electronics. (View large version40)

It’s worth repeating: by reducing the amount of effort that goes into buying on your site, you will automatically increase conversion rate, and make your customers more likely to return.

Summary Link

While such straightforward guidelines are emerging as we move forward in the mobile age, they are not the only behaviors that website visitors exhibit on mobile. Mobile users also use social media extensively, play games and download scanned coupons.

Of course, the guidelines will vary from website to website, so think about how users interact with your website on mobile and how you can translate these guidelines to your own case. When you look closely at the behavior of mobile users, it’s very surprising how much you learn.

(da, al, ml)

Footnotes Link

  1. 1 http://www.mobilerecruitmentnews.com/mobile-phone-access-toothbrushes-says-google/
  2. 2 https://www.smashingmagazine.com/2013/05/infinite-scrolling-lets-get-to-the-bottom-of-this/
  3. 3 https://www.smashingmagazine.com/2014/10/providing-a-native-experience-with-web-technologies/#get-the-scrolling-right
  4. 4 https://www.smashingmagazine.com/2012/02/redefining-hicks-law/
  5. 5 https://www.smashingmagazine.com/2015/08/from-russia-with-love-behind-the-scenes-of-the-kremlin-ru-responsive-redesign/#two-independent-columns-generate-a-lot-of-interesting-new-ways-to-interact-with-the-content
  6. 6 https://www.smashingmagazine.com/2014/08/how-i-built-the-one-page-scroll-plugin/
  7. 7 http://www.exacttarget.com/sites/exacttarget/files/deliverables/etmc-2014mobilebehaviorreport.pdf
  8. 8 https://medium.com/data-lab/the-optimal-post-is-7-minutes-74b9f41509b
  9. 9 https://www.smashingmagazine.com/2013/05/infinite-scrolling-lets-get-to-the-bottom-of-this/
  10. 10 http://scrollsample.appspot.com/items
  11. 11 http://googlewebmastercentral.blogspot.ca/2014/02/infinite-scroll-search-friendly.html
  12. 12 http://www.statista.com/statistics/301187/second-screen-usage-worldwide
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2015/05/01-second-screen-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2015/05/01-second-screen-opt.png
  15. 15 https://www.smashingmagazine.com/2015/07/hunt-for-the-webs-lost-soul/
  16. 16 http://www.eatandthink.co.uk/customised-passports/sample-passport
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2015/05/02-passport-opt.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/05/02-passport-opt.png
  19. 19 http://www.statista.com/statistics/294314/share-of-mobile-subscribers-using-location-based-services
  20. 20 http://www.mobilecommercepress.com/geolocation-technology-focus-taken-latest-groupon-app/859403
  21. 21 http://searchenginewatch.com/sew/study/2198253/geolocation-changes-google-keyword-rankings-69-of-time-report
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2015/05/03-geolocation-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/05/03-geolocation-opt.png
  24. 24 http://mashable.com/2012/04/10/marketing-location-networks/#QVcGlzYBkOqW
  25. 25 http://appurify.com/blog/avoid-bad-reviews
  26. 26 https://www.smashingmagazine.com/2013/11/28/lessons-from-an-app-graveyard/
  27. 27 http://janrain.com/resources/industry-research/2014-consumer-research-social-login-personalization/
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2015/05/04-avoid-typing-opt.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2015/05/04-avoid-typing-opt.png
  30. 30 http://bradfrost.com/blog/post/float-label-pattern/
  31. 31 http://www.typeform.com
  32. 32 http://virginamerica.com
  33. 33 https://www.youtube.com/yt/press/en-GB/statistics.html
  34. 34 http://uk.businessinsider.com/facebook-and-youtube-account-for-almost-40-of-all-mobile-internet-traffic-2014-12
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2015/05/05-vlogging-opt.png
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2015/05/05-vlogging-opt.png
  37. 37 https://econsultancy.com/blog/65387-how-to-boost-conversion-rates-and-kick-cart-abandonment-to-the-curb
  38. 38 http://services.google.com/fh/files/blogs/final_global_smartphone_user_study_2012.pdf
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2015/05/06-buy-things-opt.png
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2015/05/06-buy-things-opt.png
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Richard Howe is a front-end web designer at Colour Rich in Oxford where he's focused on the user experience, CSS and responsive interfaces. See what Richard is currently crafting, enjoying or writing about on Facebook and Twitter.

  1. 1

    good one! thanks for sharing ur findings.

    1
  2. 2

    Dmitri Tcherbadji

    October 6, 2015 2:11 pm

    I would also like to add deep linking. It’s kind of transparent but it seems to become a trend now. For example, your google search will open Quora app if a result from it comes on your iPhone. Twitter will launch an app on link click (this could be iOS 9 specific, not sure), app store results in search as well etc.

    It would be smart keeping this in mind when designing social CTAs on the website or linking to any property that might launch an app by default (like YouTube).

    With that in mind it seems like the web is in competition with apps nowadays and it’s even more important to create design and code that’s as fast (or as close as possible) to a native app and as responsive (think mousedown/touchhold events, loading indicators).

    3
  3. 3

    Ramakrishna Rao MV

    October 14, 2015 3:16 am

    Good contents. Thanks for sharing. I request that, more simple pages be designed to facilitate an average ‘general user’ (I mean not much verse with net knowledge) by all, including Google.

    0
  4. 4

    Informative and interesting data. This is a great post, nowadays people are more into responsive mode, this information is significant to improve the way you design a website for your mobile users and delight the users.

    0
  5. 5

    Adrian Roselli

    October 16, 2015 3:39 am

    You lost me at the first takeaway about content length by making the assertion that somehow it justifies infinite scroll. Your editor wisely noted that the technique has issues, but should have removed the assertion altogether.

    After I witnessed a particularly ill-advised attempt at making an infinite scroll, I created a quick checklist (with feedback from other UX and accessibility experts) that a developer should be able to meet before ever diving in, which I hope others may find useful:

    1. Can the user hit “back” and return to the exact same place?
    2. Is there paging for when the JavaScript breaks (fails to fully load over a wonky 3G connection)?
    3. Does the page have a footer (because the use can’t get to it)?
    4. Can a keyboard user access all other content on the page?
    5. Can you share a URL to a specific place on the page?
    6. Can a user easily jump ahead a few “pages” to quickly get to content much further down the list?
    7. Does the memory footprint of the page dramatically increase after just a couple new “pages?”
    8. Is there a way to disable automatic infinite scrolling and lean on standard paging?
    9. Have you conducted any user tests?
    10. Are you satisfying a use case that has come from research or user request?
    11. Do you have any analytics/tracking to measure success?

    Most of the time the argument is for keeping a user on the page to reduce bounce rates. That reduction is a vanity stat (a lie).

    I wrote about the issues in more detail: http://adrianroselli.com/2014/05/so-you-think-you-built-good-infinite.html
    I also write about the vanity stats: http://adrianroselli.com/2015/05/for-infinite-scroll-bounce-rate-is.html

    1
    • 6

      Thanks for the infinite scroll checklist, that’s a useful addition.

      As you mention, raw data doesn’t always equal more engagement, and stats can be skewed on an infinite page by the change in URL not counting as a “bounce”. But the technique should still be considered on a site-by-site basis. Infinite scroll is something which may enhance websites which are particularly text-heavy, but prove to be ineffective in scenarios where the visitor has an end goal in mind – user motivation is the key.

      0

↑ Back to top