Six Essential Elements of Mobile UX Design

Effective mobile design is critical for connecting with today’s on-the-go consumers, who are increasingly using their smartphones and other mobile devices throughout every step of the buying process - from research to discovery and from exploration to purchase.  

Just how important is mobile in 2015?

• Mobile now comprises more than half of all Google search traffic (www.clickz.com)
• 31% of all traffic to the top 10 digital properties were mobile-only visits (ComScore)
• By the end of 2015 more than half of all social networking will occur on smartphones and tablets (eMarketer)
• In the U.S., 25% of mobile Web users are mobile-only (mobiforge.com)

With billions of dollars being generated from shopping on mobile devices each year, it’s more important than ever these days to offer consumers a seamless mobile experience.

Over the course of the last few years, we have seen what works when creating mobile experiences that are usable, compelling, and drive results. We have found that designing for mobile is like designing for ultimate usability. Mobile users are often on the go and need quick and seamless experiences.

Here are some guiding principles that our marketing, design and tech teams utilize for effective mobile design:

1. Think Utility First
Mobile users spend only about one-third the amount of time as a desktop visit, according to average page view times. Since mobile users are usually on the go, they are looking for utility more than style. In general, they spend more time scanning rather than reading, and want information presented in a way that is quickly digestible and easy to find.

Mobile users are usually on the go and therefore have shorter attention spans and more distraction. Keep your content predominately visual. Text must be punchy and broken into bite-sized morsels of content.  

Case Study: We recently developed a mobile responsive experience for a premium footwear brand. When designing the homepage, we focused on having effective brand visuals quickly followed by free shipping messaging, top-selling category links, and email signup. By making it easier for motivated mobile consumers to drill down to the products they were looking for, we saw a significant boost in the mobile conversion rate.

2. Location Location Location
The number one search intent on mobile devices is location based. If you are a brand, make it easy for the user to find a store location quickly and easily.

At the same time, forcing locations via IP make for a confusing and frustrating experience for people looking for services or products outside of their current location. Allow users to choose whether they want their current location enabled.

Case Study: We were tasked with building a mobile site for a brick-and-mortar retail client that had the combined objective of selling through both digital and brick-and-mortar channels. For mobile visitors, we prioritized the accessibility of finding their locations to optimize for a common use-case. The end result was a boost in foot traffic as well as digital sales.

3. Encourage Scrolling
Mobile has shifted the old rule that called for minimal scrolling since it’s easier for smartphone users to scroll through a page rather than having to constantly click to find information. That said, users still want to find the information they’re looking for quickly and easily.

Utilize content hierarchies where the most important, relevant content is further up the page so that users can scroll, but aren’t forced to do so. Encourage scrolling by providing clear visual cues or signposts that let users know that more information will be provided as they move down the page.

Case Study: We recently created a responsive campaign web experience for a natural pet food client. The campaign was created to introduce a new product, give away free samples, and encourage users to share animated GIFs of special pet moments. We created a campaign landing page that opened with a compelling video, but had clear indications to the user to scroll down the page to consume and engage with the social content further down the page. The result was a highly successful campaign that generated 11,000 free sample redemptions in less than 24 hours.

4. Optimize Site Search
Due to the limited space on a mobile screen, navigating through pages of information is inherently difficult. When mobile users are looking for specific information, they often turn to the site search functionality instead of the navigation. Make your site search easily visible at the top of the site to enable a better mobile search experience.

To improve the site search functionality further, use helpful features like autocomplete and point out possible misspellings, or provided corrected ones. Mobile searchers have little patience to scroll through multiple pages of search results, so make sure that your first page of results are the strongest and most relevant.

Case Study: One of our eCommerce clients has a large, diverse catalog of over 40,000 SKUs. The mobile experience was crucial, and finding products quickly and effectively was a major concern. In addition to tuning the search results, we added a search bar to the top of the mobile navigation, making it a prioritized part of the experience. The result was significant engagement with search on mobile devices, reducing the steps to a conversion.

5. Improve Load Times
Successful mobile sites are fast. In the era of Mobilegeddon, it is clear that Google is paying particular attention to load times. Consumers are too - a majority of mobile users will leave a site after four seconds if it hasn’t loaded fully. Make sure that your images are optimized and that inaccessible content like Flash is avoided altogether.

Although it’s tempting to provide dazzling effects and impressive multi-media to your mobile users, tread carefully. Bells and whistles can seriously slow down the site speed - If the functionality doesn’t improve or enhance the user experience, remove it.

Case Study: We recently helped optimize a long standing client’s homepage by focusing on tuning their image sizes, prioritizing loading of above the fold content, and optimizing page javascript and css assets. These efforts, in combination with tuning the site caching, improved load times by around 80%, leading to higher mobile conversions.

6. Design - Keep it Simple (and Elegant!)
Size restrictions on a mobile device mean that real estate is at a premium, so non-essential design elements should be avoided. This goes especially for critical conversion functions like forms and shopping carts. Keep forms simple by including only the most important form fields and utilize helpful functionality like autofill and real-time validation when possible.

When you’re designing your buttons, links, and navigation, ensure that you keep a minimum of a 40px radius - otherwise users may tap on the wrong button which always detracts from the user experience. Avoid making users pinch-to-zoom where “fat fingers” can create even more frustration.

Case Study: Many of our recent mobile responsive brand websites feature a dealer-locator experience. For brands who don’t do direct eCommerce sales, or who have a strong relationship with dealers, this is a critical point in the path to purchase. We worked with the location capabilities of modern mobile browsers to ensure that if available, the user can just approve location awareness to get an immediate list of the dealers around them, rather than having to type in an address or zip code. We have seen the impact of this feature across the board with increased engagement on mobile devices.

Conclusion

Last year’s holiday season was a major tipping point in the evolution of mobile as consumers shopped more on smartphones than any other device. This year’s holiday season promises to be even more dominant for mobile.

Brands simply can’t afford to postpone optimizing their mobile experience any longer. A mobile responsive, fully mobile-optimized website is the most effective way to ensure your customers can reach your site at any time and on any device.

We have seen over and over again that structuring our user experiences around empowering mobile users to quickly understand the message, find information, and proceed to a conversion is essential to driving results.