Mobile Design Strategy: Home Page Tips

This post launches a 6-part series of mobile website design strategy from home to checkout. You may remember we ran a similar series in 2009 on mobile usability. A lot has happened since -- only a brave few retailers had dipped their toes in mobile commerce, and the iPad had yet to make its big splash. Though the principles covered in our first series remain, our current run focuses on design strategy based on goal completion, with some ideas for A/B testing. *Please note, we're considering mobile web sites in this series, not mobile apps.

Naturally, we're kicking off with the home page.

To get started, let's look at the potential conversion goals of a mobile website's home page:

1. User clicks through deeper into the mobile site (user does not bounce, clicks on navigation menu item or merchandizing zone)
2. User finds customer service options easily (e.g. order status, store locator)
3. User downloads a mobile application
4. User subscribes to something (email, Facebook, Twitter, etc)

The role of the mobile home page is not to convert a sale, but to win a click on that takes the user towards one of the above goals, and move the user toward taking action on your site. The page's layout, merchandising and navigation are key to keeping the visitor on-site.

Layout

Your design should reflect your mobile strategy -- namely, what is the purpose of your mobile site, and how do you deliver value to your customer? Not every mobile site is "transactional." Some businesses use a mobile site to support research-online-purchase-offline behavior like click-to-call or reserve in-store. Others focus on customer service features, including building a shopping list to take in-store or looking up an order on-the-go.

The meat of your home page should be calls-to-action (CTAs) that support the home page conversion goals. These CTAs may be menu items, buttons or merchandising slots (clickable banners, etc). Before you design, you must list which are the most important (primary) calls-to-action, and which are secondary. On mobile, these may be different than on your www site.

Notice Walgreens' mobile CTAs are different than its web site's. Secondary links to store locator and weekly ad are given equal visual weight as shopping options on the mobile site. The menu's organization tells you what Walgreens expects customers to use the site for.

Lowe's includes a service value proposition prominently on its mobile home page, which supports the goal of keeping the user on the site (promise of convenience and guaranteed service - so stick around!) Its CTAs also are clearly arranged as primary, secondary and tertiary importance.

The fold!

Remember the fold, and the (somewhat) dated usability concern that nothing important should slip below the magical bottom of the page? We know in web design that the fold matters less than it did a decade ago. People are comfortable with scrolling, and the variety of screen sizes makes it impossible to control for this variable. For mobile web sites, the fold may still be important. "Splash screens" are so common on web applications, users may be conditioned to not scroll below the main screen on smartphones.

Splash screens are common in mobile apps

When calls to action slip below the fold, you risk visitors not discovering them and abandoning your site. One idea is to design your mobile site to "cut" into content, to suggest there is more below the first screen. ASOS (right) has more content below, but it may look like it all fits into one screen.

Like the web, it's difficult to design for each and every possible screen size, but testing for the most common devices can help. Because you can't control the fold on all devices, make sure your main calls to action are prominent in the first screen (up high in your design), and test how your mobile site appears when the device is held both vertically and horizontally.

Merchandising

Though many mobile sites present category navigation front-and-center, others take advantage of HTML5 and get quite creative with home pages.

Crutchfield replicates its web site look with a rotating image banner. While this is an advanced move for a mobile site, it comes with a usability hiccup -- it is accidentally activated when you try to scroll down the screen.

Use graphics carefully. Hero shots that work on the web may not have the same effect scaled down for mobile. Graphic elements also push down your navigation menus, and leave you less room for calls-to-action (unless the image is the call-to-action). Also keep in mind graphic elements can add to your page load time, a major factor in bounce rate!

Navigation Menu Design

Your menu design is key to keeping customers on your mobile site. The customer is asking "what can I do on this mobile site?" "How difficult is it to find what I came here for?" "Should I stay?"

Menu organization

Your mobile site navigation does not have to mirror your www site, so think carefully what is the best way to arrange links in a vertical stack. Most important links first, or alphabetical order?

eBags appears to use a mixture of alphabetical order and most-popular-on-top. This may be more effective if you have a handful of anchor categories, but also want to present the rest of the categories in a user-friendly way. A customer can recognize the remaining options are sorted A-Z.

Barnes and Noble understands it's large number of categories will not reasonably fit in one navigation menu, and that mobile shoppers likely have a title in mind that they are looking for. It has made search most prominent, allowing the user to "scope" within categories/product formats for better search results. Its vertical menu features digital content (application, NOOK products, gift cards) as well as no-brainer "best seller" content to browse.

In the Lowe's example above (waaaay above), category and customer service links are visually distinct from each other.

It's worth user testing your menu organization to understand what is most effective for your customer. (Be sure to include a variety of task scenarios, not just one "find product X".)

Menu usability

For touch screens, it should come as no surprise that larger link targets are better. But on small screens, we know the larger the links, the less content you can show above the fold. Usability tests will show you if your targets are large enough.

Navigation markers (the little up, down and right pointing cones) also indicate whether the menu is expand/collapse or loads a new page.

I recommend expand/collapse whenever possible. It's much faster as it does not require a new page load.

A/B Testing for Mobile Home Pages

Because mobile design is relatively a new discipline, there is much learning to be had, and A/B testing your layout and placement of calls to action is the best way to verify that your design decisions are the right ones. Keep in mind, mobile traffic is lower than the web which increases the time necessary to complete A/B tests. You may only have enough traffic to support a control and one treatment version, so be selective and test the "big ideas" (radical redesigns) rather than the minutiae (red button vs. blue button). Don't forget user testing, which only requires a handful of testers, which can also be helpful in nailing down what design is most user-friendly and achieves clicks on your main calls to action.

Next post we'll look at category pages, including refinement/sort tools, subcategory navigation and category page results. Stay tuned!

Looking for help with mobile commerce strategy? Contact the Elastic Path consulting team at consulting@elasticpath.com to learn how our ecommerce strategy and mobile strategy services can improve your business results.