If you’re running an e-commerce website, you already know by now that the mobile experience is an important one. Four out of five people in the United States shop online, and of those online shoppers, at least half say they make purchases from their phone.
Mobile e-commerce sales are reaching billions of dollars of sales worldwide and that number is only increasing with more technological innovations available. Make sure your website is prepared for growth and optimized for those mobile customers.
These mobile design tips will help improve your e-commerce website and make it easier than ever for your customers to make purchases – that means more money, client satisfaction, and a good brand reputation.
Spacing And Sizing Are Key
You need to think about the mobile experience for what it is: shopping with thumbs. Good spacing makes it easier for people to scroll through your products, navigate different areas of your site, and eventually complete a purchase. The last thing you want is for your audience to have to pinch and zoom in on things to see the information or click a certain area. Keep buttons in the middle of the page instead of at the top or bottom, and make them big enough so even larger thumbs can click.
Most mobile phone developers recommend a width of between 28 pixels and 44 pixels. However, researchers at MIT found that the average adult thumb is approximately 1.6 to 2 cm wide. That converts to about 45-57 pixels. It’s not practical for every single element on your page to be that wide, but it’s a good idea to keep buttons and images within that size range.
Allow Social Sign-Ins And Guest Checkouts
When people are buying things on their smartphones, they don’t always want to go through all of the steps of creating an account, getting a verification email, and filling out forms. Give people the opportunity to complete their purchase as a guest to save them time. Sure, you might be missing out on gaining them as a contact for your email list, but if they have a good experience this way, they’re more likely to come back and make another purchase. If you try to make them go through the steps of creating their account, they might just abandon the purchase altogether.
Innovate Your Search Functionality
People who are specifically searching for something are more likely to make a purchase because they have a particular product in mind. Make it easy for people to search your site and find exactly what they’re looking for, especially for bigger sites with tons of products. A smart search function is a good technique for this. When clicked, a search icon will switch over to a larger search box that fills the screen so people can easily type in their search terms. It also helps if your search function includes a predictive search system so people don’t have to type out the whole word.
Take Advantage Of The Footer
Use Pop-Ups Sparingly
Pop-ups can be very annoying on mobile, and they don’t always render properly when they show up. That means it’s harder for people to exit them, which could lead to people giving up and exiting your site completely. Many websites use pop-ups to get guests to sign up for their email newsletters or to view current promotions, but it’s best to keep these to desktop only.
Focus on Visuals Over Content
Yes, content is very important for users to learn enough about your product to make a purchase, but a mobile screen is only so big. For the mobile experience, keep product descriptions short and sweet, with enough details about the product to sell it. Let your product images speak for themselves to keep the page clean and uncluttered. If they really want to scroll through content, they’ll read your blog.
Simplify Menu Navigation
Sometimes the menu in the header or at the side of the page can cause unnecessary clutter and force the rest of the content to shrink so it still fits on the screen. This can be a big pain for people who just want to browse and shop. Using an icon for the menu is a great way to provide a better user experience for online shoppers. This is what designers call a hamburger menu. Whenever the user taps it, they will find more links in a dropdown menu, but it won’t get in the way of their experience as they browse your pages.
Use Big, Easy To Read Fonts
Lastly, you need to be conscious about the way people are reading your content. Small, delicate fonts may look pretty, but they aren’t practical for mobile users. Stick to big fonts that are clean and easy to read, even if it feels a little generic. If people can’t read your content, it doesn’t matter how nice it looks.