With the mobile explosion in full-force, it’s no surprise that companies are embracing mobile. In fact, your users expect your business to be optimized for mobile. This is especially true for an e-commerce site where a poor shopping experience can result in customers jumping ship to a competitor.To prevent that from happening, here are 15 tips on designing a mobile friendly ecommerce website
1. Be responsive
This is an absolute must these days. A Responsive design simply means that your content will look the same on a device, browser or operating system. That’s because a responsive web page can detect your visitor’s screen size and orientation so that the layout can change accordingly.
2. Deliver an omnichannel shopping experience
An omnichannel experience is simply a unified shopping experience. This means that if a customer received an email discount code and places items in their shopping cart while using their PC at work, they could complete the checkout process on their smartphone or tablet when they get home.
Right now, this is a popular trend among retailers. However, it could still be years before there’s a proper omnichannel experience for customers. In the meantime, it’s important that you’re at least aware of this trend and possibly starts tinkering around with omnichannel. Who knows? Maybe you’ll be a pioneer in the e-commerce world.
3. Think with your thumb
One of the most important design features of your site is that it’s navigable just by using your thumb, or index finger. If not, this means that users have to pinch to zoom — which means that either your content is too small or not optimized for mobile devices. Also, this could lead to more touch errors.
Smashing Magazine states that since the average width of the index finger is 1.6 to 2 cm (16-20 mm) for most adults, this would convert to 45-57 pixels. This would allow “the user’s finger to fit snugly inside the target.” For thumbs, you would want to go up to 72 pixels.
4. Position your CTAs properly
To increase engagement and revenue, your need to have clearly visible call-to-actions — especially a prominent ‘Add-to-Cart’ button. In most cases, these CTAs would be placed above the fold, aka front and center.
However, in a Kissmetrics article, that higher conversion rates occur when the button is below the right amount of copy.
Here’s what the article concludes:
- Pre-sold prospects who already want what you’re offering when they arrive. The specifics of your offering are irrelevant here — give prospects a call to action immediately so they can keep their momentum going!
- Uncertain prospects + an offering that is very easy to understand and immediately see the value of. These prospects will only need a small amount of strong, very clear copy to convince them to hit that CTA. Since not much copy is required, your button will be higher on the page — coincidentally above the fold.
- Uncertain prospects + an offering that requires some explanation to see the value of. These prospects will need a reasonable amount of copy that is not only clear but also very well-written to keep their interest from the headline all the way through to the CTA. Just how much copy you need will depend on how much your prospect already knows, how complicated your offering is, how much it costs, and so on — but it could easily be 500 words, or it could be 5,000 (there’s a reason you don’t see calls to action above the first third of long sales pages).
5. Keep content short and sweet
Obviously, the screens on mobile devices are smaller than PCs. Because of that, you don’t have a lot of real estates to get into lengthy product descriptions, wordy blog posts or hundreds of images cluttered on your home page.
Only provide essential content so that it’s clean and uncluttered for your visitors.
6. Simplify navigation
Unlike your website, you don’t have the space to include those menus that list all of your stores’ categories, sections and promotions. You’re going to have to condense your navigation to make it cleaner and easier for mobile users to use.
The most convenient way to do this is to include a single menu icon that opens a drop down menu whenever it’s tapped. Make sure that this consistently positioned throughout your site so that users always know where it’s at.
7. Include a viewport meta tag
W3 Schools describes the viewport as “the user’s visible area of a web page.” The site adds that the “viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.”
With the introduction of HTML5 website owners could now quickly scale down their existing web pages so that they would fit onto mobile devices.
It’s suggested that you include the following
viewport element in all your web pages:
8. Accept guest checkouts
This feature makes it possible for your visitors to make a purchase from your site without having to login or signup for an account. Remember, they don’t have the patience to complete multiple steps or fill-out a number of fields. They want to complete the checkout process as quickly and painless as possible.
9. Customers who bought this also bought
Upselling and cross-selling on your product pages, site searches, and shopping carts will introduce your customers to more of your amazing products, which in turn will increase your revenue. In fact, Amazon has reported that as much as 35 percent of their revenue is from cross-selling.
10. Optimize your images
Your customers want to be able to see crystal clear images of your products. They also expect these images to load quickly. To achieve both of those goals, make sure that you use high-resolution images that have been cropped and resized so that they fit onto the screen of the mobile device.
In most cases, image sizes range from 240 x 320 to 2560 x 1440. Here is a handy guide that provides a more detailed explanation of image size based on the size of your user’s mobile screen.
11. Link your logo to the home page
According to a study conducted by Google, “Users expect to go back to the homepage when they tap the logo in the top-left of a mobile page, and they become frustrated when it isn’t available, or doesn’t work.”
To avoid this problem, link your logo to your home page so that visitors can go back to the home page whenever they want with just one tap.
12. Avoid Flash and Pop-Ups
The iPhone and Android v4.1 and higher don’t support Flash. So, rely on HTML5 to display your content.
Also, stay from including pop-up signup forms or native app advertisements. They’re distracting and hide your awesome content.
13. Consider geolocation
Geolocation can be a powerful assist since it can personalize the shopping experience for your customers. For example, if a visitor is shopping your clothing site and they reside in Alaska, then your site would display products that were more winter friendly.
14. Make contact information easy to access
Users want to be able to contact a business — whether if it’s a phone number, business hours, or the closest location to them. The easier it is for visitors to access this information, the better experience that they have. Make sure all this information is secure.
15. Keep testing
Even after you’ve designed an incredible move mobile friendly e-commerce website, test it over and over. Test it on multiple devices, such as on iPhone, Android and Windows phones, as well as various tablets to make sure that your design is properly working on all mobile devices.
Source- https://goo.gl/9Pg4Xv