More than half of all time spent shopping online is done via smartphones and tablets, propelling mobile commerce to grow three times faster than overall e-commerce. In addition to site search, site navigation is one of the most important aspects of the mobile experience.
Here are some tips to help make sure your site navigation is ready for the mobile-and-tablet holiday rush.
Mobile Navigation
The limited space on smartphones and tablets magnifies the importance of intuitive navigation.
To best orient users and guide them through a mobile site (without cluttering the screen), use a simple design. Here are some main best practices:
- Use drop-down menus with buttons or simple text so you can offer as many drill-down levels as needed while freeing up valuable real estate.
- Use subpages to expand using familiar icons such as +, – and >. This allows shoppers to easily navigate through categories to exactly the products they are looking for.
- Give category pages a look and feel similar to search results pages. This gives users a consistent experience across search and navigation.
- Include a thumbnail image, product title, brief description, price and additional information such as ratings and discounts.
Include Refinements
Just as on your desktop site, refinements make navigation easier for mobile visitors. Since mobile devices have a lot less space for navigation, using a drop-down menu can be a good design choice. Presenting refinements this way saves screen space by hiding them when they are not in use. This helps reduce visual clutter on the mobile site and allows visitors to view more products and content without needing to scroll down.
Offer Infinite Scrolling
You may find that shoppers spend more time on your mobile site if you provide infinite scrolling.
Instead of requiring shoppers to click to the next page, infinite scrolling automatically loads more search results as the user nears the bottom of the page.
Make Links and Buttons Touch-friendly
When designing for touch-enabled devices, keep in mind the size of the human finger and thumb. The touch target for an index finger is 57 pixels and for a thumb it is 72 pixels. Making touch targets smaller than that can lead to user frustration and incorrect clicks. Moreover, don’t require users to pinch and zoom in order to navigate pages as these actions also lead to a negative user experience.
Direct Mobile Users to Mobile Pages
If you have a separate mobile site with a different URL, make sure to automatically send your mobile users to the correct site. You also need to direct search engines to this alternate site in order for your mobile pages to rank well in mobile search results. If you’re using responsive design, this shouldn’t be an issue.
Don’t Assume Desktop Features Will Work on Mobile Devices
A common mistake in mobile development is attempting to port desktop features directly to a mobile device. With a touch-enabled device, the user is not navigating the page with a mouse cursor so functions like hover don’t translate into a positive customer experience. At best, the user will attempt to click the item multiple times to activate the link; at worst, the user will be unable to click through at all and may abandon the site in frustration. Instead, optimize your development for the unique features and uses of each device type. Smartphone users and tablet users may use your site differently so consider both types of users.
For more tips on how to improve your site navigation, download our Big Book of Navigation Tips.
