According to a recent report, Apple smartphones are responsible for 68 percent of mobile sales. Android smartphones made up an additional 31.4 percent of those sales.
According to research from eBay which was conducted by Conlumino, there was £373million spent on mobile devices during the Christmas period in the UK alone. With mobile devices acting more and more like stores in a pocket and 55% of consumers browsing the web on their devices. In comparison to the year previous, the future is bright.
In 2012, a Google study found that 96 percent of users came across a site that wasn't mobile-friendly and 72 percent thought it was important that brands should have a mobile-friendly site.
This is an article about helping mobile site viewers find what they're looking for more quickly and directly, removing barriers and hopefully making a better navigational experience for everyone (with a focus on e-commerce).
Types of Shoppers
There are generally two types of users when it comes to shoppers, the 'inclined-to-buy' and the 'not inclined-to-buy'. The latter you could call 'window shoppers'. Window shoppers generally take more time to look around and browse stores and products, they do so when they get some time to themselves and may even go as far to 'Add to wishlist ' or 'Add to cart'. However, an inclined-to-buy shopper is ready to make a purchase and are actively looking for a product. 67% of inclined-to-buy shoppers are more likely to make a purchase when they find a mobile-friendly site.
Enabled Mobile Shopping
In this article we'll look more at mobile navigation than other aspects of e-commerce mobile design, however let us first take a look at other areas which can enable more mobile sales for an online store.
Usual patterns for mobile store home pages are single column layouts. This is due to stores dedicating more space to promotions by using larger graphical elements. Secondary to the promotional space you will usually find a list menu of categories to navigate through.
Single product pages are where stores showcase their products in much greater detail than anywhere else on the site.
The importance of information on these pages is paramount and the general consensus is to show the products name, price and product image first and laterally focus on the product's information in a way which is well suited to the amount of content either in a list or tabbed formation.
Photo galleries for products on online stores are a critical need to 'show-off' products in their best views. More images are better when you're showcasing a product so providing thumbnails would be a good way to go. Swiping through the various product thumbnails and double tapping to zoom is a pattern seen on most larger brand stores.
Shopping carts are usually displayed in a table format. Displaying a thumbnail, short description, price, ability to change quantity and remove from cart options are 'normal', however, some carts provide further options like applying promotional codes or coupons and the ability to choose your own shipping method. These options are generally shown in a hierarchical format below the main product table.
As the checkout is the closing part of the purchase, this process has to be clean without any interruptions for the purchaser. A lot of e-commerce websites give the purchaser an option to checkout as a guest or with an existing account. The option to checkout as a guest removes a barrier for those that don't want or don't have an account to start with and reduces the amount of time they have to spend filling in forms.
Reducing the barriers to a user overall in this area of the design will reap you benefits and hopefully, sales.
If we look at e-commerce mobile sites being anywhere on the mobile web where there is a monetary transaction and not only shops but things like flight bookings and hotel reservations, the variation of navigation is quite great. I talked earlier about an 'inclined to buy' user being one of those who visits a website or mobile site with a purchase in mind but what happens when navigation is made difficult for those purchasers?
- It takes them longer to make a purchase
- They end up not making a purchase
- It reflects badly on your brand
I've been thinking about mobile navigation for a while now and after reading an article titled 'We need a standard show navigation icon for responsive web design' by Andy Clarke, I began to think that an icon for navigation is only part of the problem when it comes to mobile navigation.
Andy talks about the icon slowly becoming common place and it generally being used to show/hide a navigation, but surely the navigation is one of the things which should be shown as default? However, being shown as default could cause a challenge with e-commerce sites where their navigation is incredibly large.
Taking three large e-commerce sites as an example
You would expect one of the largest online retailers website to do well with mobile navigation and you're right. Amazon provide a search facility as well as a short category list as you scroll further down.
The Odeon mobile site doesn't showcase any kind of promotional content apart from advising you to download the free iPhone App. They cater to mobile users by showing a list of navigation items but with no search facility.
The MalMaison website leaves all navigation items closed, focusing on a promotional item which you still need to tap on to get to content you can explore.
As you can see, there is a wide variation of options given to mobile users across different types of e-commerce sites.
Mobile Navigation Proposal
I would propose that the icon became standard now so we can focus more on looking deeper at our statistical data to see which areas of our sites require to be in a categorised list on our mobile site homepage. There will be areas of your site which don't receive much traffic from the homepage and drilling in to the finer details of your analytics will help you find out more about why this is. It will enable you to provide your users with a shorter category/nav item listing on the homepage.
Having a shorter category list and search input at the top of your mobile site should become the norm, giving the ability for any user to search and find their item more quickly. From the 20 or so sites that I viewed researching for this article, only a handful used these in conjunction and only Amazon seemed to provide an excellent mobile user experience.
This is a call to make online browsing easier by providing a standardized navigational experience across the board for all types of users.
What do you think?