Usability Improvements

Keep Your Mobile Design Toned-Down, Clear, and Concise

Jaunty colors and intricate design features might impress your desktop visitors but will likely be discouraging for mobile users. All shades of black, white, and gray mixed with gentle touches of other colors will keep your visitors focused on the content and products you’re selling.

Have a Fixed Search Option

How fast do you get irritated whenever you can’t find something on a particular mobile website and have to scroll back up to the top to find the search option? That’s why having a fixed search option is so important—whenever your customers want to look up something else on your site, give them a chance to do it in a quick and convenient way. You can set the search option to appear only when a user scrolls the page up, for example, and otherwise make it invisible.

…and a Smart Navigation

While a fixed search option is already a useful way to help your customers find what they need, you can also consider combining it with a fixed navigation menu. An interactive fixed navigation menu appearing on the bottom of the page gives your users instant and convenient access to the most important parts of your website. You can configure the navigation panel so that it’s unobtrusive and appears only after user’s interaction (scrolling, tapping, etc.).

Set Proper Keyboard Types

A study made by Baymard Institute revealed that as many as 54% of eCommerce retailers fail to properly define touch keyboard for specific input fields. Instead, the majority of mobile websites always initiate the standard keyboard regardless of the type of information required for the input field. To fix it, set the numeric keyboard as the default keyboard type for the phone number field and the credit card field. Optimizing keyboard type decreases the number of mistakes customers make when entering a string of digits, and also provides your customers with a more convenient way of filling out these fields.

But with the credit card field you can also do something else to improve your mobile UX.

Implement a Credit Card Scanning App

Instead of requiring your customers to enter the tedious credit card number along with a slew of other information, you can implement a card-scanning feature. The card-scanning feature uses a customer’s mobile phone camera to take a picture of a credit card and then automatically fill in all of the information necessary to finalize the payment.

Add an Auto-Detect Feature

Auto-detect feature is a useful way to spare your customers from having to enter information that the script can deduct on its own. Let’s say a customer types in a ZIP code, and for the customer’s convenience, a script should then fill in the respective city and state.

Make Your Product Images Zoomable

Allowing your customers to enlarge product pictures with the commonly recognizable gestures (pinching, tapping, etc.) gives them a chance to learn more about the product’s visual details. Surprisingly, however, 40% of all eCommerce stores don’t have that function at all.

Pro tip: Giving your customers an option to zoom in and out of an image alone is only one part of the solution. The other one is ensuring the enlarged picture still maintains high quality.

Simplify the Checkout Process

A complicated checkout process or subscription form is already a significant problem on desktop eCommerce websites. On mobile websites, it is even more pronounced with cart abandonment rate of 78% compared to 63% on desktops. Always require only the absolute minimum for the checkout, subscription, or quote forms.

Allow Your Customers to Save Their Shopping Cart for Later

Some customers will visit your site with the intention to “hunt” for products. Giving them an option to save for later what they like to purchase might lower your cart abandonment rate. Implementing this extension is also useful when your customers are sure of one product but would like to add more to their carts later, after browsing your stock further.

Make Your Mobile Design Easy for the Thumbs

While designing a mobile website, one of the most important things to consider is the manner in which mobile users browse websites. Every interactive element of the site should be positioned around the reachable area of a thumb. This seems obvious enough but online stores often neglect that particular design imperative. Below you can find a useful graph showing “hot” areas on a mobile screen that can be comfortably reached by mobile users.

Performance Improvements

Before you proceed with the following improvements, you should test the speed of your mobile site to know where your starting point is. Page load time is one of the most important features of a site, and as many as 53% of mobile pages get abandoned when they load longer than three seconds.

Increase Server Speed and Lower the Response Time

With eCommerce websites, it never hurts to spend a few extra dollars on a decent server. The optimum response time for a server should be under 200 milliseconds, as per Google’s advice. Keep in mind that response time is also influenced by the resources your mobile website demands.

Avoid Redundant Background Videos

Videos take up precious bandwidth speed, heavily affecting your mobile website’s performance. If you have something important to communicate through your video, say, a tutorial on how to use your product, don’t set the video to play automatically. Instead, give your visitors a chance to play the video when they want to, and after every crucial element of your website has been loaded and viewed.

Minify Your Code

Cluttered code full of duplicate parts and lines irrelevant to the viewing experience makes your site perform poorly and significantly impacts your load-time. Minification helps your mobile website load faster and keeps your code cleaner and leaner.

Google recommends using the following for code minification:

• To minify HTML, try HTMLMinifier
• To minify CSS, try CSSNano and csso.

To minify JavaScript, try UglifyJS or the Closure Compiler.

Format and Compress Your Images Right

Even though you should keep your design toned-down, it doesn’t mean your mobile site has to be completely deprived of colors or images. But images considerably affect the load-time of every website, be it mobile or desktop. To cut down on precious load-time seconds and still have images, be sure to optimize all of your images and store them in a proper format that best suits a particular image’s purpose. Also, you should ensure your images are responsive—they automatically adjust to the screen of the user’s device. This guarantees that the viewing experience is distributed equally among your visitors.

When you have a lot of pictures, you can also use LazyLoad script that feeds the images only to the area that is currently being viewed by the user.

Following the tips above should improve your mobile conversion rates and increase your mobile UX. But there’s one tip that should guide all of your efforts when improving mobile UX—if browsing and buying on your site is easy and convenient for you, then it should be for your customers. And of course, before and after you introduce any changes, test, and test, and test them again to ensure a positive mobile UX.