Designing for m-Commerce
Everyone is talking about mobile. Some e-commerce websites are venturing into it. Mobile commerce (also known as “m-commerce”) has immense potential, exhibiting a 86% growth rate and hitting $25 billion in 2012 (set to reach $86 billion by 2016, according to eMarketer).
This is an extension of a presentation I've done at eCommerce Now and Beyond organised by Netstarter Sri Lanka.
What is mCommerce?
Short for mobile e-commerce, is the term used to describe the growing trend of using devices, such as laptops, handheld computers or mobile phones to initiate or complete online electronic commerce transactions.
Today we are relying on advanced handheld communication devices more that ever in the human history, more commercial opportunities are being created in this particular space enabling businesses to reach their end users directly and the users send feedback to the business directly,
That enabled space is called m-Commerce.
Three ways to deliver a mCommerce Experience
- Native App — Such as an iPhone or Android App stored on the local storage interacting with a cloud based product catelogue.
2. Separate Mobile Theme — If you've already got a functioning eCommerce website working on desktops then you could make a separate website specifically targeted at a certain mobile device width such as the example here: https://www.dicksmith.com.au/?___store=dsau_mobile
3. Responsive Solution— Responsive design eliminates the need for multiple versions of your site, or expensive app development and maintenance. As well as gives good SEO Support.
Many worries about the security of their personal and financial details might be preventing many from embracing m-commerce fully.
More than 60% of both of smartphone and tablet owners said they believe it is not safe to share those details on their mobile devices, underlining a need for education about security issues.
Thermomix Recipe Platform — on behance
Why Responsive?
Mobile responsive design is all about automatically delivering your audience the content they want, within the context that they’re viewing it.
Since it is one website, you get the maximum security and maintainability as well as you get to deliver the similar shopping experience across a variety of different devices.
Responsive e-commerce websites are probably those that deserve the most attention and effort because they directly affect the revenue and success of the store. Undoubtedly, mobile e-commerce is an opportunity no store or retailer would like to miss, considering that users have spent as much as $14 billion in 2013.
There are several techniques which are highly specific to e-commerce responsive web design, as the mobile shopper is the different from the usual internet buyer. Here are a few things to consider:
- Impact purchases are specific to mobile e-commerce, given the nature of the process. Purchases out of impulse are more likely to occur on a small screen than a traditional desktop which is a way for sellers to profit and users to feel happy about their purchases.
- Casual Shopping is no more casual when it comes to mobiles. A smooth and easy-to-use platform allows the user to checkout an item with a few clicks while enjoying a relaxing activity implies that there is no more casual strolling around various shops and is more likely to lead in an increase of sales. There is no place or time for comparing items or prices when you are about to buy from a 5-inch screen.
- User decisions is what you breathe. You may implement the best marketing plans, apply great psychological tricks that would induce your buyer into purchasing items but keep in mind that all you do is breathe and live with your user’s decisions. You analyze, you decide, you implement but you never forget that all decisions should be taken with user’s experience and behavior in mind.
The 4 Ingredients to make a successful responsive design
- Define device groups by grouping screens with similar widths together resulting in a manageable number of groups.
- Create a default reference design that will adapt to smaller and larger screens.
- Define rules for content and design adaptation for it to display well across different viewpoints
- Opt for Web standards and a flexible layout and frameworks in our case “Foundation” created by Zurb Media.
The Recipe
SIMPLIFY NAVIGATION
Without a mouse to point and click, mobile users have to rely on tiny keypads, trackballs and touch to navigate mobile websites. Add in the small screen with the need to complete tasks quickly and efficiently, and clear and intuitive navigation becomes crucial.
A common approach that works for the start pages of most sites is a list of links to main features and content, prioritized based on user needs.
Reduce the number of categories and levels of navigation, Make links obvious, Use clear, concise and consistent labels
PRIORITIZE CONTENT
Smaller screen sizes require even more careful attention to the content displayed to the user. We put our editor’s hat and cut unnecessary content, then we cut some more. When we’re done, we prioritize the content and display the most important content first.
MINIMIZE USER INPUT
- Keep your URL as short as possible.
- Use alternative input mechanisms where possible.
- Limit input to essential fields.
- Select the best mobile input option (e.g. allowing users to select from a list of options is often faster than typing).
Setting up Breakpoints
Breakpoints are the point a which your sites content will respond to provide the user with the best possible layout to consume the information.
Approaching the design mobile first is the best approach for a responsive design. It allows you to layout the content that is most important to your customers in a clear and logical way on the smallest screen real-estate. This will force you to really identify what is the most important information on your site.
The Wire-frames and Designs
What is wireframing?
Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to layout content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.
Once the wire-frames are approved we usually designers produce a set of visual designs and develops a Style Guide and the project is shipped to Front-end developers as a series of PSD files.
The Style Guide
Do you need a style guide?
It’s a simple question: And it has a simple answer: Yes. Any brand, company, blog or webpage that wants to create and maintain consistency and a professional feel should have a style guide.
Style guides are a must for any publisher with multiple employees. This is especially important if more than one person will work on any brand elements (from the website to printed materials), and to ensure that transitions between employees are seamless in the eyes of users.
In order to get a comprehensive understanding of a style guide have a look through MailChimp’s Style Guide
Content Style Guide — http://mailchimp.com/about/style-guide/
Brand Assets — http://mailchimp.com/about/brand-assets/
Designing for mCommerce is all about delivering a comforting and faster user experience to a customer who is willing to initiate or complete an online transaction on any mobile device.
In-order to complete this experience not only designers but front-end developers too play a major role, if you juggle with html5, CSS3 Media Queries and jQuery here are some of the things you may need to consider when developing your mCommerce experiences.
Here are few things we’ve learnt while we developed our first responsive eCommerce website http://www.activeskin.com.au which had won Magento site of the year finalist award in 2013
- Creating many style sheets and jQuery calls for a massive 7 breakpoints website was time consuming and not practical.
- It took horrendous 4 moths to complete the project.
- IE was our worst enemy. and Testers were after us like wolves.
When we completed the web site, we knew that this was not going to be the last responsive web site that we’d build; with time we may build more.
So, we had a discussion, how are we going to build a responsive web site more efficiently.
Then we have decided to use a Responsive CSS framework. After a lengthy discussion we had decided to use Bootstrap and Foundation.
And we decided to use SASS and LESS as they've got bigger community and support features.
Few things to remember when developing for mobile
1. Battery Life
Unlike desktop PC, mobile devices have limited power source, if your site drains users battery, you tend to lose your visitors. So every byte counts. You should optimize your web site.
2. Speed
If your site takes longer to load, features are too complicated to use, simply your user will get bored and abandon his browsing. Now we don’t need that.
So, You should optimize your web site.
3. Bandwidth
If your site has unwanted content, too heavy images and banners? Duplicate content. It will bite into user’s GSM data allocation and mobile internet is costly thus making the user to lose interest of visiting your site.
So, you should optimize your web site.
Optimize, Optimize, Optimize
To perform a proper optimization you can use Chrome page insights or YSLOW to generate a report about your web sites performance.
If you run the YSlow you will get this kind of report and developer can act according to it.
As you can see YSlow suggests reducing the number of HTTP requests made. you can achieve this by minifying CSS and jQuery Files as well as creating image sprites.
Using Fontawesome to replace your image icons is quite popular too these days.
If you pay attention to detail and work with the instructions discussed on this article you would be able to create pleasant and engaging user experiences for mobile ecommerce sites.
To add further, consider using interaction design guidelines recently released by Google for enhanced experience and meaningful design.
Related Links
eCommerce Now and Beyond — Official Event Page
Keynote — on SlideShare
Frontend development content credit goes to Niranga Rajapaksha
Find me on twitter — @shiran_sanjeewa
