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 eCommerce site where a poor shopping experience can result in customers jumping ship to a competitor.
To prevent that from happening, here 15 tips on designing a mobile-friendly eCommerce site.
1. Be responsive.
This is an absolute must these days. A responsive design, simply means that your content will look the same device, browser, or operating system. That’s because a responsive web page is able to detect your visitor’s screen size and orientation so that the layout can change accordingly.
Thanks to responsive design, the days of creating a separate mobile-friendly site are over. This means that there’s less work for developers and you won’t risk getting penalized by Google for having duplicate content since you won’t have the same content on two different sites.
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 can 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 start tinkering around with omnichannel. Who knows? Maybe you’ll be a pioneer in the eCommerce site world.
3. Think with your thumb.
One of the most important design features for 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, you 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 former Kissmetrics article, that higher conversation 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.
Next on our list of ecommerce site tips is to keep things short and sweet. Obviously, the screens on mobile devices are smaller than PCs. Because of that, you don’t have a lot of real estate 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 lists 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 <meta> viewport element in all your web pages:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
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 quick 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.
User’s 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 friendly eCommerce site, 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.
