With mobile devices becoming more and more prevalent in our lives, it’s no wonder that mobile e-commerce volumes are predicted to rise at a 25.5% compound annual growth rate by 2024. That said, if your WooComerce store isn’t yet optimized to provide a great mobile user experience, you are guaranteed to be missing out on traffic and sales.
Mobile devices are now used by an average of 80% of all website visitors, so design for mobile should be your top priority. To give your WooCommerce site a boost – as well as set your business up for success in the future – now is the time to make sure it’s optimized for mobile. To help you get started, we’ve come up with some helpful tips for building a great mobile experience for your WooCommerce website.
Design for How People Use Mobile Devices
One first stapes to creating a great mobile experience is to design for responsiveness. Typically, most premium themes available today are designed to be mobile-ready or responsive. However, to create a seamless experience on mobile, you also need to truly consider the differences between how people browse for and interact with websites on a smartphone or tablet versus how one would do the same on a desktop.
For instance, a header image that may look striking on a desktop screen might lose all of its impact on mobile due to the size and scale of the format. Or you might find that mobile responsiveness is squashing elements into cumbersome columns that are disorientating for visitors. To create a truly mobile-friendly online store, keep these things in mind during your WooCommerce website design, even if you are leveraging a pre-made theme.
In general, people tend to type and read less when browsing on mobile and instead rely more heavily on images, visual cues, and video. On-page content needs to be succinct and easy to digest as you can’t expect users to read large blocks of text. Instead, think of displaying content that is similar to an infographic. Allow the images or video to tell the story as much as possible, and back up that imagery with concise bullet points or short, impactful copy.
Also, people tend to hold and operate their phones with one hand. This means you need to be cognizant of the size of images and text, as well as the placement of calls to action (CTAs).
Minimize as much as possible the need for your users to pinch and zoom their way around web pages. You’ll want your website’s text and images to be big enough for people, so it’s easy for them to see all of your information without squinting or zooming in too much.
Similarly, you want to create and place CTAs – especially ones that lead to a purchase – in prominent and intuitive places to the everyday web visitor. In general, the top left and bottom right corners of a mobile screen are the hardest to access, so avoid placing navigational elements in these areas. Instead, keep navigation central and towards the bottom left and top right areas.
Increase Site Speed
Higher overall website speed can directly translate into increased revenue for your company. Why? According to a study by Google, 53% of mobile users will leave a site if it takes longer than 3 seconds to load. In other words, you could be losing more than half of your traffic thanks to a delay as small as 3 seconds.
There are some factors on smartphones and tablets – such as processor speed and mobile connection quality – that you cannot possibly control. But, as a developer or designer, it’s essential to look for ways to increase your WooCommerce site speed and prevent visitors from leaving out of impatience.
Here is a quick list of things you can do to maximize mobile load speeds:
-
Cleaning up scripts and stylesheets that don’t need to load with every page
-
Configuring your WooCommerce site to work with HTTP/2
As the site manager, you’ll also need to do a quarterly spring cleaning of your database and regularly check your code and remove any instances of redundancies, broken lines, and other issues that might prevent your site from loading quickly.
Scale Up Buttons, Forms, and Font Sizes
Have you ever had the frustrating experience of trying to click on a link or button while browsing on mobile—only to touch the wrong thing by accident and navigate away from what you want?
There’s nothing quite as irritating as hitting cancel when you meant to hit save, purely because the buttons are too small and close together!
Mobile screens have a lot less real estate than desktops. Our thumbs and figures are also less precise than a mouse. Because of this, website developers need to take extra care to scale up the size of buttons, forms, and fonts. Small buttons can be very hard to click, and smalls fonts challenging to read.
When it comes to forms, nobody likes having to fill out a never-ending list of online form fields. Retail experiences a 75.8% form abandonment rate. One of the top reasons consumers list for failing to fill out online forms is length. By reducing the size of your forms, you can create a great mobile experience and decrease form abandonment rates on desktop. If these fields are too small to click on easily, those will just add extra frustration to the process. One of the best ways to structure forms for mobile is to use ultra-large form fields and restrict fields to a maximum of 3-5 per page. If you need to have additional fields, create a second page for these. This will break up the number of fields and be less daunting for visitors.
What’s more, typing is generally a lot more time-consuming and awkward on mobile devices. If visitors have to type out endless amounts of information – just to complete a purchase or create an account—they might abandon the process altogether.
Eliminate White Space
White space can be a crucial part of website design, especially for desktop display. However, when optimizing a retail business website design for mobile, too much white space isn’t a good idea.
Because of the reduced screen size, white space can eat up valuable area. Area the visitor needs to access content, media, navigation features, etc. Too much white space can make pages difficult to navigate and consume.
For instance, if your visitor is on a product page, they want to see the product image clearly and access the other information and elements, such as sizes, color options, etc. If there is a bunch of white space, this will make for a frustrating experience, as users will need to scroll around and possibly even zoom in and out, to access what they need.
Ditch the Navigation Bar
You should also look at getting rid of the navigation bar in your mobile WooCommerce website design. Why? Because navigation bars don’t typically work that well on mobile.
Unless the visitor is on a supersized tablet, the size of the navigation bar is usually so reduced that clicking on any of the menu items becomes a feat of fingertip dexterity.
If your menu bar is responsive and scales vertically, the menus tabs might still be accessible. However, depending on how many menu tabs you have, this can make the top of your pages cluttered and confusing.
Instead, most mobile-friendly website designs do away with the navigation bar altogether and replace it with a hamburger menu. This can then expand when tapped into a submenu with large and accessible tabs.
Not convinced this is necessary? Think about it. What is the point of investing money into marketing WooCommerce sites if leads can’t easily navigate to the products they want once they land on the site?
Make Use Of Collapsible Sections
Another step to creating a great mobile experience is making use of collapsable sections. Also known as website accordions, collapsable sections make pages easier to scan and navigate for mobile users.
For example, Q&A pages often have this structure. When you land on the page, you can quickly scan through the frequently asked questions. This makes it easy to find the one that’s similar to your own, at which point you can then expand that section to view the answer.
Website accordions aren’t just good for mobile. They are also a staple part of good WooCommerce website design.
Most great product pages have some expandable sections. This makes pages easier to visually digest, while still keep all the relevant info accessible for shoppers.
Fine-Tune Your Search Feature
No matter how much you focus on creating a great mobile experience, navigating on mobile will probably always be less convenient. Scanning pages of products is also more difficult, as only a limited amount can display at a time.
Because of this, it’s essential that you fine-tune search functions in e-commerce business website design.
Here are some of the ways you can improve search features:
-
Make search icons easily visible
-
Activate predictive auto-fill (with suggested filtering options)
-
Enable “Did you mean” suggestions for misspelled searches
-
Implement faceted search
Besides the above tips, it’s also essential that your search criteria cater to like terms. For instance, if a shopper searches for “blow dryer,” you want the search results to include those for “hairdryer.”
Streamline the Checkout Process
Lastly, if you want to create a great mobile experience (and increase sales) streamline your checkout process. According to statistics, 20% of shoppers will abandon their cart if the checkout process is too long.
This applies to both desktop and mobile visitors. However, long checkout processes can be even more laborious for mobile users—simply because they are working with a small screen. The fewer steps a mobile shopper has to take to make their purchase, the better.
Therefore, do away with unnecessary steps or forms. Provide time-saving features such as the option to tick for using one’s shipping address as the billing address.
Create a Great Mobile Experience With the Right Hosting Provider
Creating a great mobile experience is imperative in today’s age, where mobile accounts for up to 70% of web traffic.
And one of the first steps to a mobile-friendly website is finding the right hosting. Excellent hosting is vital for achieving site speed that will retain visitors and provide an enjoyable mobile shopping experience.
Pressable specializes in providing premium managed web hosting for WooCommerce websites. Our solutions are powerful enough for the most advantaged developer and simple enough that beginners can create, launch and maintain amazing WooCommerce sites.
Curious to see how it works? Schedule a free demo today
Jessica Frick
Jessica serves as the Director of Operations for Pressable and is dedicated to creating the best managed WordPress hosting experience possible. She’s been using WordPress since 2008, has been in WordPress-focused roles since 2010, and currently serves as one of the Make WordPress Hosting team reps. When she’s not working, you can find her spending time with her family, serving in her community, watching hilarious dog videos online, or brewing a pitcher of iced tea.
