Ultimate Design Guidelines For Mobile E-commerce

Delightful user experience, like never before, has taken paramount importance in terms of successful mobile e-commerce’. In order to keep users rabidly engaged with site’s content, design aesthetics coupled with effortless usability and accessibility are uncompromising.

Rapturous technological commotion in smartphone mania has led to unprecedented smartphone user base. Interestingly, these users are getting more and more interested in buying and shopping with their swipe, tap and pinch gestures. This newly found buying behavior of smartphone users has brought new adventures for E-sellers and with some wise and well planned user experience techniques, they can really take their sales to the top.

Success of any e-commerce project hinges upon how well e-seller intuits what consumers want.

Latest research reports rolled out by various institutions, authenticate too by Google’s head of global mobile sales and strategy, Jason Spero, show that frustrated mobile experience lets users tear down their pre-conceived brand notions, only to take their wallets out at some other seller. On the other hand, if a brand successfully manages to stoke customers’ aesthetic lust and triggers delightful user experience, consumers happily engage themselves into business with those brands. Nevertheless, creating such a delightful user experience is not an easy task for designers.

Note: This article specifically has been written in context of design approach relating only to mobile sites and apps.

Keeping consumers’ behavior in account, we can try out the design rules that have now been raised to the standards of web & mobile scriptures, and following them would at the least, if not resounding success,  help you avoid utter failures.

Let’s first start with design approach relating to mobile E-commerce usability and accessibility to be fine-tuned into Home Page, Interface Navigation Modeling, Product Displays, Shopping Carts and Checkout Process.

Home Pages

In mobiles’ perspective, home pages have to stand for different purpose other than clipping bits of entire web pages. They are rather about providing users up front what they are looking for. For this reason, home pages must only carry the most important bits of information such as search products, product categories, links to featured site area and promotional stuff etc.  Generating strong yet balanced visual impact is strongly recommended in portraying desired information on home pages.

Tiled Layout, commonly referred as single column display can help in showing ‘site information’ elegantly without running the risk of being cluttered and littered. From this tiled interface, users would move any way they desire and see what they are looking for. Following examples reflect some nice Home Page design trends.
Tiled Links Listing extending downwards acts as central hub for moving onto important site areas. Similarly, visual marketing propagation puts makes home page rather close to perfection.

Global Navigation Modeling

Though Home Page often acts as seamless hub for remaining site areas yet separate navigation space model is required to fine tune users’ site experience. The key here is simplifying the things as ‘Simplicity equates usability’ where as complexity leads to perplexity. Applying too much pagination and information ramification would terribly play down at whole site/app structure.  So, while designing, it is core responsibility of designers to figure out interface which could imbue all paradigm shifting features at the surface and nothing important is buried under mazy layout. Side Bar Navigation lets users quickly move back and forth in all site areas fearlessly. For large E-commerce stores, such an interface helps categorizing informational architecture.Though all information is categorized yet end impact is 'cluttered'. Navigation Interface should be harmonic; either single columned or double columned There are different design approaches in which main site navigation can be steered up. Most commonly seen navigation is normally header/footer based but trend of ‘Side Bar navigation’ has been rising lately. Facebook iOS app is prime example of this latest roll in/roll out navigation. Unlike sticky navigation, this navigation menu shows up only when thumb is rolled from the sides of screen. Hover controls, Symbolical icons and in page modal windows don’t only help simplifying things, they also empower users to control information the way they want to see. ‘Aesthetics’ is still powerful key to trigger the emotions which may increase consumers’ buying probability.

Product Displays

Single Page Scrollable Product Display Categorical product management with strong visual displays and sufficient ‘unique selling points’ can never be more important than they are now. Initially products can be shown either in table displays or even in grid display. Particular product can also be shown through two different ways, first ‘single page product display’ and other ‘tab format’ allowing chunked product display with relevant marketing mix details as shown in the Accordion/Tab oriented product display applied by Samsung Samsung's product display . ‘You only see what your eyes want to see’ and you would see what your mind wants to see’. Contrary to tab/accordions display, Single Page Product Display urges users to do lot of scrolling but it finally liberates users from working with accordions or tabs carrying detailed product information.Office Depot rolls out such a product display as can be seen in figure here. How much products could be and should be shown in product pages? You can sell only those products to consumers which you can have shown them, particularly in mobile environs. But at the same time, large number of products shown collectively also betray to bafflement. So, for large retailers, it’s challenging to choose which products to show and which to not. I may have not any data to support which products would score best on your front lines, but we can surely have ample anecdotal data to learn ‘how’ any products on the site floor can get more and more customers.

Shopping Carts

Even the best products would fail when shopping cart layout is quirky and flashy. Shopping cart must only carry the information that is highly requisite and indispensible such as save order, add to favorites, delete order, update order shipping information and checkout etc.

Any frustration or dead end at this ending phase of purchase could ultimately lead to shopping cart abandonment which is a total nightmare for any e-seller. Nevertheless, keeping things intuitively aligned and available on page would substantially increase conversion rates. In order to ensure information accessibility, like on product pages, here on shopping cart, you can again employ ‘tabs/accordion’ display pattern which will allow users to see their order details rather in intelligible chunks.

Checkout

‘Seal the Deal’. It’s more of a process than any pattern, so usability and functionality are crucial for maintaining efficient conversion rate. Checkout process inherently involves number of steps, at the least 4 to 5, initiating from shopping cart to confirm order. Established brands can use as many steps as they like because consumers are pretty much sure in their purchase with them. On the other hand, newer brands or small retailers must have to be strictly specific about the information that they want for moving their products to the consumers. Well, regardless of number of steps involved in a checkout process, most important thing is to design this checkout process in uni-dimension; i-e, linear. Unlike non-linear checkout process which is intimidating and frustrating for users due to its randomly propelling steps into steps layout, linear checkout process is end-destined, never to incur back and forth engagements. So, secret to ensure usability is to make checkout ‘linear’ and ‘smart’.

Quick Recap

With exponential increase of smart phone users, e-commerce are seeing highly attractive marketplace to sell their products. Now it’s designers who are key players of running their mobile storefronts successfully. We have seen above that

• Home pages must seamlessly show up as hub of important site areas. Strong visual identity is rather crucial for initially impressing consumers and keeping them rabidly engaged with site content.
• Global Navigation must be ubiquitous, even when being rolled out through user 'gestures'. Making use of gestures is quite interesting but don't abuse them.
• Product pages are content nucleus and must be designed in way to stoke customer's lust so as to demand desired prices from consumers. These products can be shown through various design approaches including single page product display and accordions/tabs format.
• Shopping Cart act as product carriers that consumers have opted to buy, either in time or in future. Shopping cart abandonment must be ensured through setting accessibility features upfront in design interface.
• Checkout process must be uni-directional as back and forth shifts around various site areas would ultimately trigger confusion and intimidation among consumers.

About Red Signal

Since 2005, Red Signal has been continuously providing quality end-to-end IT solutions for a range of key vertical industries and horizontal competencies, ecommerce solutions in particular. From idea consultation to product execution, Red Signal is poised to deliver new generation of products and services and help our clients in competing successfully in continually shifting IT marketplace.