13 Tips to Help Your Online Customers Shop With Ease
A bad website design costs you viewers. If you’re an e-commerce company, it costs you sales, too.
Here at Webspec, our web design and development team has years of experience building e-commerce websites of all sizes. We know your website is your livelihood, and we’ve seen the many issues and pain points that our clients face.
That’s why we’ve compiled this list of common do’s and don’ts for e-commerce website design. Whether you have 10 products or more than 10,000, these tips will help you create the best experience for your users. Whether you’re looking to build a new website or simply refine your old one, let this guide simplify your process.
1. Choosing an E-Commerce Platform
Don’t: Choose a Restrictive or Outdated Platform
Your choice of e-commerce platform is a key first step that will affect your business for years to come. You want a system that won’t become outdated within a year or two of your launch — or a glitchy one that will cause you issues later down the line. It’s also important to be sure you’re using a platform that isn’t too restrictive in what it can do, which could limit your ability to grow.
Do: Choose a Flexible, Well-Supported Platform
There are many reputable platforms on the market today to choose from. Here at Webspec, we build e-commerce websites in WordPress using the WooCommerce plugin. WooCommerce is a powerful, scalable e-commerce platform that’s at the forefront of the market. It’s continuously maintained and updated, making it a secure platform that many developers (not just a select few) are experienced and able to work with. WooCommerce also has an expansive list of plugins and product add-ons that allow you to fine-tune your e-commerce store to fit your exact needs.
2. Mobile Friendliness
Don’t: Prioritize Desktop Design Over Mobile
Mobile devices have surpassed desktop devices as the primary driver of sales for e-commerce websites. Even though most new websites are responsive on mobile, that doesn’t mean everything that looks great on a large monitor works well on a small phone screen. If your site is clunky to use on a smartphone, you’re likely to lose users.
Do: Prioritize Mobile-First Design
As the number of people purchasing on their handheld devices increases, it’s important to make mobile your priority. A good experience there will ensure you’re serving your customers well. That means you need to focus on fast site speeds, finger-friendly buttons, and a navigation menu that isn’t overwhelming on a small screen. Don’t neglect your desktop design, but make sure it doesn’t come at the expense of a user-friendly mobile experience.
Website Navigation Design
Don’t: Overwhelm Your Users
If you sell a large variety of items on your website, the number of product categories can add up quickly. Some websites will attempt to crowd all of these categories in their main navigation or in a huge dropdown menu. This can be overwhelming for your users, who expect to be able to find what they’re looking for in seconds.
Do: Simplify Your Website Navigation Menu
Don’t give your customers a novel of categories to search through up-front. Give them a guided process to quickly find what they’re looking for. That may look like clicking on a main shop page or broad product category page first, then filtering down to the specific subcategory they need. This type of user flow will make the experience much more intuitive.
4. Product Search Bar
Don’t: Rely on a Generic Search Plugin
No matter how optimized your navigation menu is, a large percentage of your users will still depend on your website search bar to find the right product. That means a bad on-site search experience can cost you sales. Generic on-site search bars can be frustratingly inaccurate, so it’s essential to make sure you’re using one that is easily able to match your user with the product they are searching for.
Do: Offer a Robust, Intuitive Product Search
Here at Webspec, we equip our sites with a WordPress plugin called Relevanssi. This plugin provides advanced search bar functionality that matches results based on the relevance of your user’s query. It also allows you to set “search synonyms” to make the search experience more intuitive. For example, if the product on your site is called a “controller,” a customer could search the term “remote” and still be shown the correct product. Additionally, Relevanssi lets you adjust the weighting of your post types on your site, so that you can have your product post types rank first in the search. Using this or a similar plugin will ensure your users are finding the product they’re looking for without having to dig for them.
5. Product Organization & Filtering
Don’t: Confuse Categories & Tags
Breaking products down into categories and subcategories is essential to letting your users quickly find what they need. But the use of categories and tags can easily get out of hand. If you are creating new categories for every item, or mixing up when to use categories and when to use tags, it creates a confusing experience for your users — and a mess that’s hard to untangle down the road.
Do: Use the Right Taxonomies
Here’s the rule of thumb for proper organization:
- Categories create a hierarchy of your products by grouping them together (for example: shirts, pants, shoes, and hats on a clothing e-commerce site).
- Tags are attributes of your products that can apply across categories (for example, “most popular” or “most featured”).
Some e-commerce websites have multiple ways to filter their online products, such as by brand, type, color, etc. Using tags and categories correctly as you divide them will help make your website flow logically for your customers.
6. Calls to Action
Don’t: Overdo Popups
Website calls to action (CTAs), such as a “buy now” button or a banner touting a promotion, need to be prominent. But they shouldn’t be overly intrusive. Multiple, in-your-face popups can feel spammy and overwhelming, especially on mobile devices.
Do: Feature Non-Intrusive CTAs
The main call to action on your website should be the products and shopping functionality. Before you put up a banner or pop-up, consider how it may affect the user’s experience and whether there is a better way to get the information across.
7. Product Image Selection
Don’t: Use Low-Quality Images
Images drive buyer decisions. Touching and holding the product isn’t an option online. Photos help people see and trust what they’re buying. If your product image is too blurry to make out important information, or if it’s not an appealing photo, that can deter buyers from purchasing your product.
Do: Use High-Quality, Optimized Images
It’s important to have clear, high-quality images on your website that provide users with visuals from all applicable angles of your product. Your images also don’t need to be huge. Large, unwieldy file sizes can slow your site, hurting your mobile performance.
8. Your Checkout & Cart Page
Don’t: Force Customers to Register When They Check Out
The more hoops your users must jump through to make a purchase, the more likely they are to abandon their cart. One of these hoops is forcing buyers to fully register as a user on your website before buying a product. That’s a significant up-front commitment for a buyer to make when they’re simply looking to make a quick purchase.
Do: Allow Guest Checkout
Making the checkout experience as simple as possible is the way to go. This can include adding a “checkout as a guest” option for new users so that they don’t have to complete a lengthy signup process before converting on your site.
9. Payment & Card Processing
Don’t: Use a Sketchy or Off-Site Payment Processor
When customers make a payment on your site, they need to know that their information is secure. That’s why it’s important to avoid glitchy or error-prone card payment processors.
Another trust consideration is whether to use a processor that takes them to a screen that’s not on your website. For example, PayPal, which comes out of the box on WooCommerce, redirects users to a PayPal screen. This could make users wary.
Do: Use a Reputable Processor
There are many well-respected, frequently updated card payment processors that integrate well with the WooCommerce platform, such as authorize.net, Stripe, and Square. Your web design company can help you select the best one for your needs.
10. Product Shipping Setup
Don’t: Default to Universal Flat Rates
The setup of your website’s shipping plugin can make a large impact on your profit. We advise against automatically selecting flat-rate shipping, which keeps the customer’s shipping cost the same no matter how large of an item they purchase. If it’s not a conscious choice, this could result in your company losing money on shipping.
Do: Set Up Dynamic Shipping
Dynamic shipping configurations allow your plugin to automatically change shipping costs for customers prior to their purchase, based on specific criteria. This helps you ensure they pay a shipping cost that’s much closer to the amount that you will pay. WooCommerce has UPS and USPS shipping plugins that allow you to offer better rates for customers. Other plugins like Shipment Tracking let you send customers shipping codes directly to customers so they can track their orders.
11. Security
Don’t: Neglect Due Diligence
Security is vital for an e-commerce website. If you use unverified, seldom-updated plugins that are vulnerable to hacks, you can jeopardize the security of your website and your users’ confidential information.
Do: Follow Best Practices for Security
At Webspec, we ensure our clients use vetted plugins and include security features like reCAPTCHA on forms and checkouts. Simple security precautions can save a wealth of headache down the line.
12. Stock & Inventory Levels
Don’t: Put Inventory Levels on Autopilot
Not all e-commerce websites need to track stock. But for those that do, it’s important to make sure you’re monitoring how much product you have available so that you can make the experience as simple as possible for your users.
Do: Set Up Inventory Notifications
You can set up automatic notifications to alert you when a certain product reaches a specific threshold (such as “five items remaining”). When a product goes out of stock, you can designate it as permanently out of stock or on backorder, which means customers can still purchase it and you’ll ship it once it’s in stock.
13. Contact Information
Don’t: Make Customers Search for Your Email
A smooth website experience should eliminate many of the things that prompt customers to pick up the phone or shoot you an email. But some will still have questions. That’s why it’s important to make sure you have contact information prominently displayed. If it’s hidden or hard to find, this can reflect poorly on your customer service.
Do: Add a Contact Form to Make It Easy
Being easily accessible to your customers is a sign of trust. Having a simple contact form on your website that directs emails to a dedicated person is a low-barrier way to make sure your customers can get the help they need. A phone number is good, too, but not everyone likes to pick up the phone.
Avoid These & Other Mistakes By Working With Our Web Design Experts
Webspec’s web design and development team is here to do more than help you avoid the major pitfalls of building an e-commerce website. We’re here to help you create an engaging online presence that’s a strong driver of sales for years to come. Have questions? Let’s talk about your project
