The plugin follows the WordPress tradition of being extensible. It’s possible to change the look and functionality of the shopping cart. Plus, there’s a massive number of available extensions.

There are pros and cons to this, though. It’s great that you can make WooCommerce your own. But customization comes with risks.

So, how far should you go? Here are some tips for customizing WooCommerce. Along the way, we’ll explore the potential downsides of doing so.

Different Ways to Create a Custom Experience

First, let’s review the different options for customizing WooCommerce. There are three separate approaches, each with their pros and cons.

Think about the future before choosing a method. Be sure that you’ll be able to maintain any customizations you make. Otherwise, things can get messy down the road.

Overwrite the Plugin’s CSS

Style tweaks can be made by overwriting the plugin’s CSS. You can identify specific CSS classes by using your browser’s developer tools. Then, it’s a matter of changing the relevant styles and placing them in your theme.

This method works well for minor changes. For example, changing the color of the “Add to Cart” button.

Want to take things further? You can also disable the default stylesheet. This method is for those who want to rewrite styles from the ground up.

WooCommerce does change its CSS occasionally. Thus, you’ll want to keep up with any changes. You may need to adjust your custom styles accordingly.

Use Hooks & Filters to Modify WooCommerce’s Behavior

WooCommerce includes plenty of hooks and filters for developers. They allow you to modify the plugin output and add custom functions.

Hooks offer several possibilities. You could use them to make small tweaks. Or you might leverage them to create a fully-functioning extension.

This method is also easier to maintain. Updates to WooCommerce don’t impact hooks as often. And you can place code in a custom plugin to keep it organized.

Override the Plugin Templates

There are occasions when overriding a WooCommerce template is unavoidable. The plugin includes templates for every part of the front-end display. And they’re logically organized. It gives you fine-grain control over the process.

But it should probably be a last resort. WooCommerce updates templates frequently. As such, you’ll need to stay on top of changes.

The plugin will warn you if a template is outdated. In this case, you’ll have to grab a fresh copy and make the necessary changes.

Making Smart Woocommerce Design Decisions

Yes, it’s possible to rip apart the look of WooCommerce. But should you? That may be a more difficult decision than you think.

It may not be to everyone’s taste. But there’s nothing inherently wrong with the way WooCommerce looks. And its popularity has benefits.

Users may be familiar with Woo’s established design patterns. That could make the shopping experience more intuitive. There’s some risk in disrupting that flow.

With that, changes to colors, typography, and branding make sense. You’ll have a shopping cart that matches your aesthetic. And you’ll continue to provide customers with a time-tested UX.

It’s possible to create a custom look that maintains Woo’s strength. And it doesn’t have to look like a default installation.

Radical changes can still be a success. But starting from scratch should be carefully considered.

Adding Custom Functionality to Your Cart

There are a myriad of ways to add custom functionality to WooCommerce. An industrious developer can build an extension. Or you can choose from the array of free and commercial products.

This capability is what makes WooCommerce so powerful. It can sell pretty much anything. Expanding its functionality can be done with a few clicks.

It’s worth keeping a few things in mind, though. First and foremost, WooCommerce extensions are WordPress plugins. And they come with the same potential risks.

If a WooCommerce extension is essential to your store, choose wisely. Look for a plugin that is well-maintained and supported. The wrong choice could cost you dearly.

Also, think about why you want a particular extension. Does it provide key functionality? Will it improve the user experience?

Move on if you can’t answer “yes” to either of these questions. No one benefits from more technical debt.

Always Look to the Future

If you take one thing away from this article, let it be this: Keep the future in mind when customizing WooCommerce.

Everyone wants to have a successful online store. It starts with building a website that is stable and secure. From there, it’s about optimizing the user experience.

Therefore, any customizations should fit this mold. And not all tweaks are of equal value. Just because WooCommerce is extensible doesn’t mean you have to max out on changes.

You’ll also need a plan for any additions you make. They all require some level of maintenance. It should be a factor in your decision-making.

WooCommerce is every bit as flexible as WordPress. Make sure that you’re using it to your benefit!

The post The Pros & Cons of Customizing WooCommerce appeared first on Speckyboy Design Magazine.

These little gems are especially important on eCommerce websites. We can use them to reinforce user actions and remove any chance of confusion. When done right, they fit seamlessly into a design.

What do eCommerce microinteractions look like in practice? We’ve rounded up a collection of unique code snippets that serve as prime examples. They utilize CSS and JavaScript to add something extra to the online shopping experience. Let’s get started!

Animated SVG Icons by Joni Trythall

Icons are used on all manner of websites but have particular importance for eCommerce.

This set of animated SVG animated icons can serve as confirmation for adding products to a cart, wish list, and more. Even better is that each icon has three variations to choose from.

See the Pen Animated Shopping Cart Icons by Joni Trythall

Rolling Shopping Cart by Aaron Iker

The simplicity of this animated button is wonderful. One click and a shopping cart icon rolls in and “fills up” with color. There’s a lot of movement, yet it doesn’t feel the least bit overwhelming. It would fit in with virtually any type of online store.

See the Pen Add to cart animation by Aaron Iker

Add a Product with Text Confirmation by Lance Jernigan

Fans of Google’s Material Design will want to check out this snippet. The look adheres to the design language, while the microinteraction is slick and informative.

Clicking the “Add To Cart” button results in a spinning loader graphic. From there, a text confirmation ensures that shoppers will know that their item has been successfully added.

See the Pen Material Add To Cart Animation by Lance Jernigan

Docking Product Image by Filip Danisko

Looking for a unique microinteraction? This snippet sends a product thumbnail image to a sidebar dock when a user adds it to their cart. And it’s not just for show. Hover on the thumbnail and you can easily remove the product as well.

See the Pen Add to cart animation by Filip Danisko

Multi-Step Cart Process by Marcus Forsberg

Here’s an example that treats eCommerce as a step-by-step process. Adding a product to your cart brings up an attractive quantity UI. Select the amount you want, click on “GO,” and the fun really begins.

A visual confirmation appears, then floats over to the cart icon on the upper right of the screen. The overall functionality is great, and the animation successfully ties it all together.

See the Pen Add to cart animation by Marcus Forsberg

Going to Checkout by Richik SC

This animated checkout button sends users onto the next step in style. It utilizes a simple CSS animation to confirm their choice and show that the redirection is underway.

See the Pen Animated Checkout Button by Richik SC

Simple Add to Cart Button by Rune Sejer Hoffmann

Simplicity is the name of the game here. Add a product to the cart, and you’ll see a quick change in both the button background color and adjacent icon. This one gets the job done nicely and without any unnecessary theatrics.

See the Pen Ecommerce animations by Rune Sejer Hoffmann

Add and Remove Items by Amirtha Shankari

Here’s a snippet that focuses on the shopping cart icon itself. Adding a product unleashes an animated box icon. It ricochets off the cart as if it were a basketball hoop.

Remove an item and just the opposite happens. While it would be great to see some microinteractions on the buttons themselves, the cart effects are brilliant.

See the Pen Add to Cart Animation by AmirthaShankari

Improving eCommerce through Microinteractions

When it comes to improving the user experience of your online store, microinteractions are a great feature to consider. They’re an easy means to make an instant impact. And, because they often rely on CSS, you don’t have to sacrifice performance.

The post 8 CSS & JavaScript Snippets for Creating eCommerce Microinteractions appeared first on Speckyboy Design Magazine.

Secondly, they pay attention to the little details that make the user experience all the more enjoyable. Whether it’s the ability to configure a product in real time or even simple microinteractions, everything is designed to keep shoppers engaged.

In all, it’s about converting window shoppers into fully-fledged customers. And the most successful shops have this down to a science. Today, we’ll take a look at some of these concepts in action.

Build Your Own Office by Vincent Tang

People love visual experiences, and the ability to configure a product this way brings a great deal of flexibility. This desk configuration tool lets you pick and choose components and visually represents your choices on the screen.

It’s also a nice touch that it automatically shows various setups via a slideshow, which offers potential customers some possibilities before they even click.

See the Pen
Ecommerce Desk Configurator by Vincent Tang.

Pick a Card by Cosimo Marasciulo

Card layouts are extremely popular these days, as they are a great way to let each item have its own well-defined space. This product card example is unique in that, when you hover over it, purchasing options appear (size, color and an “Add to cart” button).

It could be a very efficient way to list a lot of products while allowing visitors to select options and add items without having to leave the page.

See the Pen
ecommerce card by Cosimo Marasciulo.

What a Vue by Dima

There’s something to be said for a shopping experience that provides all the relevant data in an easy-to-use format. Take this product listing, for example. Powered by Vue.js, it allows users to quickly add items to their cart.

But the real star of the show is the cart contents display at the bottom right. It instantly updates the cost and items ordered. Plus, it allows for quantity changes and clearing the cart. Very handy!

See the Pen
vue cart by Dima.

Stress-Free Checkout by Travis Williamson

The checkout process should be as simple as possible while allowing customers to complete it very quickly. This concept is a multistep panel that asks for only a few relevant pieces of information at a time.

While single-page checkouts are fashionable, they can sometimes bombard you with too many fields. However, this alternative makes for a less stressful experience.

See the Pen
Cart by Travis Williamson.

Make It Mobile by John Garcia

As more people use their mobile devices to make purchases, it’s vital that your shop serves up a great experience on small screens. Here we have a mobile product page that is reminiscent of the product card above.

It uses a scroll bar to allow users to view product details and features both a wish list and add to cart buttons. Everything you need is right there.

See the Pen
mobile shopping design #codevember_20 by John Garcia.

The Amazing Flying Product by Vladimir Gerasimenko

Animation can be an effective means of providing context to user actions. This is especially useful in eCommerce applications. For example, when you add a product to this cart, a copy of the item “flies” towards the cart icon (located on the upper right).

To add further confirmation, the cart tilts to affirm that it has received the item. The idea is to leave no doubt about what’s happening in the user’s mind.

See the Pen
Add to shoping cart process(fly animation) by Vladimir Gerasimenko.

Instant Cart by Robin Huy

A shopping cart contents page should be intuitive. Shoppers, for example, will need to know what the next steps are and how to make changes.

This React-powered cart page has a clean look and some killer features. It’s easy to change product quantities, and all of the totals update instantly.

See the Pen
ReactJS Shopping Cart by Robin Huy.

Size Me Up by John Aspinall

For items like clothing, size is an important consideration. You want to make sure that customers have easy access to this information. Here, we see a simple button. But click it, and you’ll find a handy size guide that is broken down into an accordion menu.

Go further, and you’ll see tabbed navigation as well. It’s a straightforward, no-nonsense, and mobile-friendly way to deliver this info.

See the Pen
Responsive size guide modal &accordian by John Aspinall.

Online Shopping with Users in Mind

When building an eCommerce website, there is no shortage of shopping cart applications available – not to mention the option of building your own. But, regardless of which path you take, it’s important to consider every feature’s user-friendliness.

The examples above could fit in nicely with any one of these solutions, from a WooCommerce site to a completely bespoke configuration. It’s proof that, while the platform is always a consideration, it’s the UI that affects customers most.

The post 8 CSS & JS Snippets for Creating eCommerce Components appeared first on Speckyboy Design Magazine.

This methodology can produce mixed results. In some cases, all of the fancy functionality and effects can be distracting. They take users away from the core functions of browsing and buying online. Indeed, sometimes you really can go a little too big.

What’s missing is a focus on the bare essentials. These are the features that shoppers need to easily get around your site and find what they’re looking for. If and when they do place an order, checking out and reviewing order status need to be dead simple.

So, let’s eschew all of the bloated features for a moment and turn our attention to the basics. Here are a few must-have features for your eCommerce website.

Product Filtering

Online stores come in all shapes and sizes. But it stands to reason that, the more products you sell, the harder it can be for visitors to sift through your offerings. The risk is that they’ll either expend a lot of effort to find what they need or, even worse, they won’t find it at all.

That’s why product filtering functionality is so crucial. It provides a logical path to narrow down products to those that fit a customer’s specific requirements.

Filtering can be implemented in a number of different ways. The most basic being the ability to view products by their assigned categories and tags. For shops that have a low-to-moderate number of products, this may be all you need – so long as you provide navigation for them.

Of course, it can be scaled all the way up to dedicated UIs where users select from a range of options. Details such as pricing, brand, color, size, etc. make finding the right match that much easier.

Related and Recently Viewed Products

Once a customer finds what they’re looking for, it doesn’t necessarily mean they’re ready to buy. They may want to do a little more research or simply come back another time.

Therefore, you’ll want to provide them with alternative options and a way to get back to where they were. Offering lists of related and recently viewed products will do the trick.

Related Products

Related products can be a great way for customers to learn about other items within the same category. For example, someone may want to compare several televisions before making a decision. It could even compel them to go for the more expensive option (everybody wants that big screen, right?).

It could also be utilized as an invitation to purchase accessories. With the aforementioned TV shopper, they might see the perfect stand or soundbar. There are any number of possibilities here.

Recently Viewed Products

When it comes to recently viewed products, this feature makes it easy for a shopper to pick up where they left off. At the very least, it saves them the trouble of having to search through your store again.

While this doesn’t have to be prominently displayed, it should be added to an area where shoppers will see it. That could be at the bottom of the page or maybe even within a sidebar. Either way, it’s a nice little convenience.

The Ability to Create an Account or Shop as a Guest

Every shopper that comes to your website has their own preferences regarding user accounts. Some want the convenience of having their own login, while others would rather keep things a bit more casual.

It’s important to meet customers where they’re most comfortable. Forcing a particular action – even with good intentions – will likely be a turnoff. With that, allowing them to easily create an account or shop as a guest provides them with choice.

User Accounts

User accounts are an attractive feature for both shoppers and store owners. Shoppers get the convenience of having a single place to manage orders, billing information and shipping addresses. Those that are frequent buyers will appreciate not having to re-enter this data every time they place an order.

For store owners, the account dashboard is a great place to offer customers extra perks or get in touch with them regarding an order. Package tracking numbers, for instance, can be added here – allowing customers to reference them anytime.

Account creation can be made available through various avenues. Placing a link in the navigation and via call-to-actions are advisable. Enabling registration during checkout is also an effective means of encouraging customers to sign up.

Guest Shopping

Unless your eCommerce store is members-only, it makes sense to allow customers to check out as guests. This enables them to shop without having to make a commitment.

Besides, this doesn’t mean you have to give up all hope. There’s still an opportunity to tout the advantages of registering for an account. Who knows? Some people may eventually take you up on the offer.

Master the Basic Features of eCommerce, Then Add On

In the design process, it’s easy to overlook the tried-and-true features of an eCommerce website. They tend to get lost in the pursuit of more flashy bells and whistles. Yet, it’s those basics that lay the foundation for a great user experience.

Much as designers tend to focus on a mobile-first philosophy, perhaps eCommerce should be approached with an eye towards basics-first. Once those are established, it’s time to think about adding a little bling to the mix.

This will ensure that a website is user-friendly and reinforces the primary goal of making conversions.

The post A Focus on the Basics: Must-Have Features for Your eCommerce Website appeared first on Speckyboy Design Magazine.

Data shows that as of 2023, 6.8 billion people own a smartphone, and that by 2027, that number will rise to 7.7 billion.

These numbers only prove that mobile devices have crossed the border from being a luxury to becoming a basic necessity. If, in the past, our phones were only mere instruments for communication, today, we rely on them when we’re working, entertaining, and shopping.

Optimizing Forms for Mobile Devices

The rise of smartphones, for instance, did not only make shopping easy for consumers. It was also a welcome addition to the already growing online shopping industry.

Over time, not only were business owners busy tending to their brick-and-mortar and/or online stores, they began realizing the importance of mobile devices alongside other channels in reaching their customers.

Forms play a massive part in online shopping, and they have become a staple element in the mobile platform as well. We usually find them when we’re ready to checkout, and the site asks us to provide certain details such as shipping name, address, telephone number, and credit card information.

However, many shoppers find filling in forms tedious, and this can cause the customers’ interest to wane. In addition, online shoppers are usually faced with time pressure and the possibility of an erratic internet connection, and both of these can affect your mobile conversion rate.

Listed below are ten ways you can speed up the performance of your customers’ mobile transactions and make their online shopping experience satisfactory.

1. Include Only the Important Details in Your Forms

If you don’t have the patience to fill a whole web page worth of forms when shopping online, your customers probably feel the same. There’s a difference between answering a full-on membership form and filling in a simple one and buying something from an online store.

Compared to the latter, the former option can be dragging, and you risk losing your customer when they get bored once they find out they have to provide three different phone numbers.

Make mobile shopping convenient by giving your customers a simple yet complete order form. Do this by asking only the important details such as their full name, email address, phone number, shipping details, and credit card information.

You can also include a dropdown menu of the states or countries you deliver to, or better yet, allow your mobile app to ask the customers to use their location. This way, getting their address will be faster and more accurate.

2. Use Top-Aligned Labels & Fields

Smartphones have a limited view compared to computers, so it’s important that you design a form that can maximize this constraint. One way to do this is by using vertical alignment for the fields of your form.

You see when you use a horizontally-aligned form, there is a tendency that not everything will fit in a smartphone’s view, and it’s either the label or the input field that will be compromised. Such a case can be cumbersome to shoppers and can diminish their interest.

On the other hand, if a form’s labels and input fields are arranged vertically, then it will be easier for your customers to view the information being requested and the ones they’re typing in.

This will help them feel secure about the transaction. It will also minimize them missing a field or, even worse, having to do it all over again.

In addition, minimize visual clutter from your forms. Your ‘What Is This’ and ‘Learn More’ buttons can be placed on the mobile version of your site. If you must have it on the form, place it somewhere on the page where it will not distract your customers from shopping.

3. Make Use of Collapsible Menus & Dropdown Lists

Another constraint caused by the limited view of mobile devices is that we have to do a lot of scrolling to see an entire page or fill up a form. While scrolling through screens is normal when using smartphones, many shoppers would prefer a speedy means of buying items online.

Using collapsible menus and dropdown lists can help you reduce the time spent by your customers in accomplishing mobile forms. Instead of making your customers scan until they find their choice in a pool of multiple options, you can group specific items into categories.

Collapsible menus are also useful for tying up the details of several major products that you want to put on a single page. Just remember not to start the details as collapsed.

4. Utilize Appropriate List Selections

In cases where dropdown lists or collapsible menus are not ideal for your mobile forms, you have two other options in open predictive search fields and locked dropped down lists.

An open predictive search field allows your customers to input keywords of the item or service they are looking for and lists the closest possible results. This kind of form is ideal for long searches or for products that do not follow any specific arrangements.

Locked dropdown lists, on the other hand, is ideal for listing specific items in the menu and in following a particular order, say alphabetical or chronological.

5. Opt for Single Input Entities

You’re probably familiar with input fields found in forms both in the desktop and mobile versions of websites. In some cases, these input fields are split into two to three sections, such as names, addresses, and phone numbers.

While this has a valid purpose in desktop versions of sites, it may not be as effective as when used in forms for mobile devices.

More often than not, split input entities require mobile shoppers to tap into all three (or two) fields just to answer one label. If you’re going to do this a lot on one form, your customers might lose interest in proceeding to checkout.

In other cases, split entities can also be ambiguous and may confuse customers. When designing forms for mobile platforms, use simpler fields instead of splitting them.

For instance, instead of putting up two separate fields for a first name and a last name, use one field instead for a full name. This will help your customers accomplish the form faster.

6. Format Your Form’s Buttons

The ‘submit’ button is the final step to online shopping and also happens to be the most important button on your form. As such, you need to make it stand out so that your customers remain engaged until the end of the transaction.

Make the button in your form appealing by making its width about 1/3 of your form and by assigning it a bright color. Also, instead of simply using the words ‘submit’ or ‘send,’ use more energetic calls to action such as ‘Register Now’ or ‘Submit Application.’

However, avoid using colors that are too bright or make your buttons move too much because these may distract your customers from clicking.

You can use a subtle change in color or hover over the button when it’s clicked so that your customers would know that they’re finished with the transaction.

7. Set Scale with Viewport Meta Tag

The view a mobile device can provide customers may compel them to zoom the page, but accidentally doing so may make the shoppers lose focus on the page. You can control this by using a viewport meta tag on your forms.

This will prevent your customers from inadvertently zooming the page or, worse, losing track of the form altogether.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

8. Exploit Data Persistence

Shopping via mobile phones can be daunting for some customers because there are more risks in clicking back to the previous page and reloading until your customer decides to abandon their cart after losing their data.

Mitigate this potential problem by giving your customers the option to open a new tab when they click any link that is not on the form.

Also, in cases where they can’t go back to previous pages, give them warning signs such as ‘Agree,’ ‘OK,’ or ‘Cancel.’ By doing this, you’ll be able to tell your customers whether the data was stored in your site or the browser and help them decide to proceed to checkout.

9. Help customers track their progress

Not all shoppers are keen on filling out forms. It would help if you could provide them with a way to tell how close they are to being done.

You can do this by showing a progress bar on top of the form and determining which step they are – say, by percentage or just a simple chronology. Keep in mind to limit the steps as much as you possibly can to save your customers time.

10. Make the Form Load Fast

Another factor you shouldn’t forget is the rate your mobile form loads. If the page takes a while to complete, your customer might not convert. The fact that your customers have reached the form tells you that they’re ready to buy.

Don’t disappoint them with slow-loading pages. The speed of your forms will also rely on the elements you put on the page, so be wary of big images.

As Always, Test Across Systems And Setups

These days, the variety of mobile devices and their interfaces can make tailoring your forms for each one a bit tough.

As such, make sure that you conduct tests of your forms on different types of mobile devices and take into account operating systems, sizes, and browsers. Through testing, you’ll be able to cover each base and make sure that your form works on every available device.

The post 10 Methods for Optimizing Your Forms for Mobile appeared first on Speckyboy Design Magazine.

When you shop online, there’s very little effort involved in anything you do, including abandoning your cart. Simply close the tab, and that’s it. When you’re on the other side of the cart, however, it means that all that effort and time you spent to get them to that point is flushed down the drain.

Some Shocking Statistics

The fact is shopping cart abandonment is the most difficult roadblock for online retailers to get past. According to the digital marketing platform Listrak, an average of 81% of shopping carts are abandoned. Others report the number as 73% for desktop users, on tablet 80%, and 85% on mobile.

This article reports that 68% of all eCommerce sales were via a mobile device, which means that the percentage would be even higher if more mobile users actually went all the way to checkout.

Think about those numbers for a second. At best, it means that for almost every seven people out of ten that shop on your online store do not go through with the purchase. It’s enough to make you weep, isn’t it?

Of course, that is the average, which means there are retailers that get much better results than others do, and your goal is to be on the winning team. To do that, you should learn from the mistakes of others before you also become part of a sad statistic.

These proven tactics can help you avoid shopping cart abandonment on your eCommerce site as much as possible,

Use Familiar Trust Signals in Your Transaction Form

Remember that song “Trust In Me” from the Jungle Book, where the treacherous python Kaa tries to lure Mowgli into his coils? That is essentially what you are doing with a transaction form without familiar trust signals. You’re telling your buyers to trust you blindly with sensitive personal and financial information.

That’s fine if they do, but unfortunately for you, 61% of shoppers say they will abandon their cart because there were no security logos, and 75% will do the same because they didn’t recognize the trust signal you put on your trust form. Surrender to the inevitable; place a recognizable security logo on your transaction form.

Be Upfront About Added Costs

Your promotion or sales pitch was successful, and you get your shoppers to click on the ‘Buy Now’ button. Lo and behold, you hit them with shipping costs and other fees, and they abandon the cart. A whopping 44% will not go through with a purchase when they perceive the shipping and handling costs to be too high.

More importantly, unexpected shipping costs at checkout is the number one reason for shopping cart abandonment. Shoppers don’t like nasty surprises.

If you can’t afford free shipping, then at least be upfront about it. Let your customers know how much they should expect to pay before they add the item to the cart. If they add it to the cart anyway, they are less likely to abandon it.

Go for Free Shipping

According to a report from UPS, 38% of shoppers state that they have purchased from a site because of a shipping offer, and 39% are willing to purchase enough to qualify for free shipping.

It is obvious that going for free shipping for your eCommerce site is a great way to get people to go complete the checkout process, so it is worth considering.

If you will incur considerable costs to offer free shipping, crunch the numbers so that your customers will buy enough to make it worth your while. It works for Amazon, why not you?

Have a Retargeting Strategy

While your goal is to have 0% shopping cart abandonment, that just isn’t going to happen. There will always be people that will abandon their carts even if you do everything right.

The good news is about 72% of people that abandon their carts have some intention of coming back. Your best reaction is to retarget those customers by sending them an email reminding them that they haven’t completed their purchase and maybe offering them a freebie or other incentive.

Have a Cart Icon Visible at All Times

Sometimes, people abandon their carts because they were distracted by a burning smell in the kitchen or they had to go to a meeting.

It is important to remind them about it the next time they visit your site by having a cart icon clearly visible that displays the number of unbought items, or they’ll simply forget.

Make It Easy for Them to Buy More

Shopping navigation has to be a seamless experience to encourage people to buy more. If they click on a product, which brings them to the cart, you should have buttons on that window that allows them to “Continue Shopping” or “Proceed to Checkout.”

If you make it hard for them to get back to the product pages, you might frustrate them, leading to just the one purchase, or worse, cart abandonment.

Offer Several Payment Options

Online shopping is convenient in many ways, but it has its downside. One of them is the availability of the preferred payment method. Some people prefer PayPal or similar, others want to pay with a credit card, while still others prefer mobile payment systems like Apple Pay.

If you don’t offer the payment option they want, they will go elsewhere. Sure, it’s a hassle, but you want their money, so make an effort to give them what they want. Have as many payment options as you can manage to capture more sales.

Accommodate Guests

Registering an account to buy a $2 item is a pain, and most people simply won’t bother. Don’t force your buyers to create an account to buy. You can make account creation optional, so it is easy for them to make a purchase anonymously through a guest checkout.

Maybe later on, when they are regular customers, they won’t mind doing so, especially if you offer them an incentive to do so, such as a discount code for their next purchase.

Streamline the Checkout Process

If you are playing an online game, going through several stages to get to the Big Boss is a good idea. Not so much when you’re trying to sell something. For that, you want the checkout process to be ridiculously fast and effortless.

Reduce the number of pages your customer has to go through to get to the checkout to as few as possible. Remember that each click they have to make increases the chances of abandonment, so keep the count low.

Activate Exit Pop-up Reminders

You’ve probably seen these several times when you’re about to leave a site. A window pops up that asks you if you’re sure you want to leave the page.

On eCommerce sites, these pop-up windows usually come with some incentive for you to keep on browsing, such as a reminder that you still have items in your cart or a discount offer for concluding the purchase. It is very effective, and easy to implement

Offer Them Their Money Back

Finally, convince the fence-sitters to take the plunge by offering them a no-questions-asked money back guarantee. It reassures the customer that if they change their mind later on, or they’re not satisfied with the product or service, they don’t risk anything by giving it a try now.

It also makes them trust your site more, because you stand by your product or service.

Don’t be under any illusions; you will still have some cart abandonment on your site. However, if you follow the foregoing suggestions, you reduce the risk considerably. Any decrease in your cart abandonment is well worth the effort in the long run.

The post Proven Tactics to Avoiding Shopping Cart Abandonment appeared first on Speckyboy Design Magazine.

For web designers, the priorities are more likely to be buried in the details. Sure, our client wants feature x, y, and z – but how do we make it happen? It’s about finding the tools and customizations to get the job done.

Either way, one of the keys to putting a successful eCommerce website together is the payment gateway. Pick the wrong one, and it could be costly or even outright disastrous.

This is among the most important decisions to be made during a project. Yet, it doesn’t always get the level of attention it deserves. Let’s change that!

Here are some tips for helping your clients choose the right eCommerce payment gateway.

Determine Project Requirements First

The payment gateway should not be the first component chosen in an eCommerce project. Even if your client already has a preference, there’s no guarantee it will be compatible with everything on their wish list.

Before seriously considering gateway providers, you’ll want an outline of project requirements. Discuss the features and functionality the website will need to satisfy your client’s goals.

For example, knowing which shopping cart software will be used is vital. The preferred gateway may not simply plug and play with the cart. In those cases, custom code may need to be written or add-on software purchased.

The same goes for recurring subscription payments, like those on membership websites. Some providers are built to handle this out-of-the-box, while others may require more effort.

And it’s not just a matter of basic compatibility. All of the little details need to be figured out ahead of time. Otherwise, you run the risk of having to go back to the drawing board when something doesn’t work as expected.

It’s better to gain an understanding of a project’s needs before committing to a payment gateway.

Consider the Money Management Workflow

Not only do your clients want to make money from their website, but they’ll also want to manage that cash in an efficient way. When it comes to payment gateways, one size does not fit all.

Some of this does have an impact on the website itself. The ability to provide customer refunds is an area that could see a lot of use. Therefore, a gateway that simplifies the process is worth its weight in gold. You may even find one that allows refunds to be created directly within the shopping cart’s back end.

Other aspects are more about interacting directly with the gateway provider. Among the bigger issues here is how funds are transferred to your client’s bank account. There are some gateways that famously require the account holder to make transfers manually. However, others have a more automated approach.

It’s also worth looking into how quickly funds become available. If sales don’t show up within the account for several days, that may not fit your client’s needs.

Dig Deep into Transaction Fees and Future Growth

Every payment gateway has an associated cost. Most take a percentage of each sale and put it in their pocket. This can sometimes be combined with a flat per-sale fee as well.

Shopping around will give your client a good idea of cost-effective providers. However, there’s often more to the story.

In some cases, those per-sale transaction fees can scale. The bigger your revenue, the more money the provider keeps for themselves. Thus, it’s important to look at projections and determine the potential costs if sales take off.

Is your client selling to a global audience? Fees for international transactions and currency conversion could be applicable.

Beyond sales, there are other fees to watch out for. Some providers will charge a fee for “priority” transfers to a bank account. These can become significant if your client is moving a lot of money around.

Monthly or yearly subscription fees might also apply. Providers that offer tiered accounts may require these fees in order to unlock advanced features.

So, while a gateway provider may advertise attractive rates – be careful. The real costs are often spelled out in the fine print.

Help Your Clients Help Themselves

Choosing the right eCommerce payment gateway isn’t easy. It’s much more than just signing on with the biggest name or the shiniest transaction rate. A lot goes into ensuring that it’s the right option for your project.

That said, it’s not necessarily a web designer’s job to make the final decision. That’s up to our clients. All we can do is guide them along and show them what to look for.

On the technical side, we do need to know whether a specific provider will meet the project’s functionality needs. But when it comes to rates and managing cashflow, clients really need to take the lead. They’re the ones who’ll have to live with the choice. Thus, they should know the subject inside and out.

Hopefully, this guide will help you fill them in on the details. Good luck!

The post How to Help Your Clients Choose the Right eCommerce Payment Gateway appeared first on Speckyboy Design Magazine.

According to Statista, M-Commerce sales are predicted to make up 44.7% of total US e-Commerce sales in 2019, up from 39.6% in 2018. On the charts below, you can see that the mobile commerce tendency is expected to grow in the upcoming years.

It’s becoming more challenging to make an e-Commerce mobile application stand out of the crowd and catch the customer’s attention. People don’t just want to buy anymore, they are now seeking for a visually engaging online shopping experience.

“One of my insights is that design can be a huge weapon to make your company look cool and build brand loyalty.” – Ted Chung, CEO of Hyundai.

This is especially true when it comes to e-Commerce design directly related to sales. In order to create a fresh and memorable shopping experience and help a brand to build customer loyalty, many designers should rethink their approach to M-Commerce UI/UX.

After long hours of researching and interviewing mobile app design and development companies, we defined 6 essential tips that will help you create a better mobile shopping experience.

1. Simple, but crucial truth: think mobile-first

Due to the poor mobile user experience which usually results in high bounce rate and short web sessions, you can lose a lot of mobile traffic. Google reported that almost 50% of mobile shoppers never come back after one negative user experience.

How to avoid M-Commerce pitfalls? The first thing is to make design decisions driven by data, not by your design instincts. Explore the M-Commerce design analytics created by other UX designer. This will definitely help you save time when creating a smooth shopping experience.

Another thing to keep this in mind: a mobile app user is not a desktop website user, learn how to convert a website into a mobile app. Don’t try to fit all the information from your desktop website into a mobile app.

People usually scan a web page to get an idea of what the website offers. This psychology works with mobile apps too. Let the user see at a glance what your mobile app is about. You can use a simple layout with a central image followed by a list of categories below it. One shining example is Jimmy Choo’s mobile app, a famous luxury shoes and bags brand.

The world is moving rapidly and we don’t want to spend the time on unnecessary things. Taking the above-mentioned approach, you will simply save your mobile app users’ time and let them easily understand what kind of products they can expect to find on a website.

2. Be touch-friendly and use in-app gestures

It’s better not to irritate users with insufficient space between the different touch elements within your content. It’s advisable to keep elements nearly 7×7 mm size while making the separators between them at 2×2 mm visually. It makes it easier for users to tap.

Mobile eCommerce concept by Alex Khoroshok.

The masterful use of in-app gestures in the mobile shopping experience is paramount too. All people are familiar with gestures like double tapping and pinching in order to zoom in to images on mobile.

These gestures play a great role in your e-Commerce success. When people are going to spend their money, they become even more attentive than usual. They are concerned with the smallest details and want to thoroughly inspect the product. And if there is no opportunity to zoom…Oops! Just be ready to miss a prospective customer.

That’s true, he or she was interested in purchasing your product, but, sadly to say, they just went to another store where they can explore a similar product by zooming.

3. Make, but don’t break, your UX with the micro-interactions

People like to “like”, give the assessment, and leave feedback. And they also like to investigate how others react to a certain product. Simply give your users the opportunity to do it with the micro-interactions in your app. Follow human nature, and it will make your e-Commerce app more successive.

Product color selection micro-interaction. Design by Mykolas Puodziunas.

You can use micro-interactions to guide a user through the app in a more intuitive way. Another thing is that smoother and more natural interactions can help reduce shopper anxiety and boost overall psychological comfort.

Micro-interactions can be used for preventing future errors and providing immediate feedback to users based on the activities they’ve completed.

4. Make the mobile app user’s life easier with Auto-Suggestion

The designer’s main mission is to make things convenient, intuitively understood and beautiful. So a simple thing such as an auto-suggestion can help your customers find the products on your store more easily.

Search with auto-suggestion in Etsy’s and Toys R Us applications.

There is one thing all of us hate – filling forms, especially when it comes to long credit card numbers. You can improve your app’s usability by using card-type auto-detection. This will help to streamline the purchasing process providing immediate feedback for supported card types. Try to automate as many data entry processes as possible. It’ll reflect positively on your conversion rate.

5. Create a feeling of security in your mobile e-Commerce application

Security is a number one thing customers are concerned with when providing their credit card details. Even if your mobile app is super-secure but your UI design doesn’t reflect it somehow, your customers will still feel uncomfortable and insecure.

Make your design convey a feeling of security using lock symbols. They communicate the assurance to customers that their transactions are secure. 

When designing the UI of transaction processes use words like “proceed”, “secure”, and “encrypted” to reduce user anxiety.

Don’t forget about the power of color psychology! We are visual creatures. Color is the first thing we perceive and our subconsciousness translates it into some feeling, positive or negative. You can evoke a feeling of trust and security applying the right combination of audience-oriented and gender-specific colors.

6. Build a simple, smooth, and speedy mobile checkout

28% of lost sales happen because of unfriendly checkout processes. A person is ready and willing to pay – don’t make him/her abandon just because the checkout process in your mobile application is too long and complicated.

Let’s consider an example of Zalora’s mobile checkout. There are just three simple steps:

The next most important thing in a mobile checkout is not to ask a user to create an account before purchasing. You can significantly reduce cart abandonment rates by designing a fast checkout process and not asking users to register first.

To provide psychological comfort for a user, use visual representations like progress bars and let users see their progress in the checkout process.

Conclusion

M-Commerce is fastly growing and it’s important to stay ahead with the renovated UI/UX design strategy for your e-Commerce mobile application. The proof is in the numbers: online store owners can’t afford to neglect mobile commerce in 2019.

Optimizing your online store for mobile you will be able to offer to your prospective customers a better omnichannel shopping experience that will positively impact the conversion rates.

When rethinking your mobile commerce, keep security and user experience top of mind.

We hope these design practices will help you see how your M-Commerce is growing in the shortest time.

The post 6 M-Commerce Design Practices to Help Improve Your Sales in 2019 appeared first on Speckyboy Design Magazine.

This all comes together into what’s called user experience, or UX for short. It has become a whole new field onto itself, and eCommerce takes a lot from good UX design. A big part of that design is a well-made product detail page that shows just about everything you need to know about a product without being too boring or too complicated. The customer must be able to understand the major details of a product with a quick scan of the page, then be able to access additional details when desired.

As you most likely can tell by now, it’s not as easy as it looks. Designing a proper product page is an endeavor onto its own, requiring a good bit of thought and consideration to come up with a good one. For those who want to dive deeper into the user experience of a product page, here are the some crucial UX elements you need to look closely at in order to make an eCommerce website that people would actually want to buy from.

Product Name

The name must be readable at first sight. It’s pretty much the first thing the customer should see, along with the product image. The standard format of the product name should contain the brand name, model number, the kind of product it is, and any other designation it may have, and not much else.

Source: Sayl Chair in White with Bubblegum Seat – Living Edge.

That’s pretty much what they have to go on when they browse or search for whatever they’re looking for, so they have to be descriptive while being brief enough at the same time.

Product Image

Simple and up front, the product image should feature the product in the clearest and highest quality possible. If you can have its picture taken against a neutral background, that’s even better. The disadvantage of shopping online is that you don’t get to view the product physically up close when browsing, so the next best thing is to see detailed image of it that gives you a good idea of what it looks like.

Source: Snapback Caps – Unique Apparel Clothing.

Also make sure that the image shows off the product’s most defining features as that can be a factor in making people understand what the product is and even make them want to buy it.

Gallery / Further Photos

Having a gallery of images that show it in front, side, and rear view, as well as other accessories if that applies, is pretty much the standard these days. Many people would think that one photo isn’t enough anymore since you’d like to see what it looks like from other angles. Therefore, if you really want to provide a good user experience with your eCommerce website, then you’d put in the extra effort and have a gallery for product images so they can see it as thoroughly as possible. If you’re able to show its scale, that would be great as well.

Source: Suede Petrol – Satorisan Shoes.

Specification

This is the most detailed part of the product page as it contains most of the in-depth information about the product.

There are many ways to go about it, like having the details in table form as the best way to go about it, as well as a paragraph or two about the product. Details like model number, dimensions, weight, color, and other physical and technical details should be listed clearly in table form for best effect.

Examples of Well Detailed Specification Element for Your Product Page:

Source: Amazon – Fuji Camera.

Source: Zappos – Skagen Watch.

Source: YouPrint – Business Card.

Price

This is a very important part of the product page since the customer needs to know how much the product is. The selling price has to be highlighted and easily visible, so it should be sufficiently enlarged and put somewhere near the product name and image.

Source: Beton Deckenlampe Kaufen.

For eCommerce websites that ship internationally, you’d want to give the option of showing the price in different currencies, as well as have a system that calculates shipping and handling costs. If there are promos or discounts included, the price must indicate it in order to inform customers of it.

Buy / Add to Cart or Basket Button

Of course, this is the one thing you can never make a mistake with in an eCommerce website. The button should be clearly visible and in a place where it doesn’t get in the way of the other elements. The customer need only click it when he/she is sure about buying, or at least putting it in the cart. Also make sure that the button does what it’s supposed to do and put the desired item in the cart since there’s nothing worse for user experience than things that don’t work.

Source: Scrambler Denim Steel – Zanerobe.

Conclusion

The most important thing here is how all these small, yet critical elements work together to help customers buy whatever they want to buy. Building and maintaining an eCommerce website is hard work, and it’s even harder work to have customers buying your stuff by making the website as usable and approachable as possible.

When you have it all together, then you’ll definitely have an eCommerce website that will get good business. All that’s left after that is selling products that people actually want and having people know that you exist in the first place.

The post Key UX Considerations for Optimizing eCommerce Product Pages appeared first on Speckyboy Design Magazine.

There’s a lot more to creating an ecommerce site that sells than a fast loading, mobile-responsive design. When it comes to converting traffic into money, UX matters. While there are hundreds of potential best practices to follow, there are also common UX mistakes that kill customer confidence.

1. Complex, Over Designed Navigation Menus

Navigation is a central aspect of user experience. Moving people through category, product and checkout pages requires a well thought out information architecture and clear click path.

The goal with menus is to help people find what they are looking for, not show off your creative design skills. Some common mistakes with navigation are:

• Going overboard with icons
• Pushing promotional products in mega menus
• Not including bread crumbs
• Too many top level items

How to get it right: keep it simple. When it comes to navigation, I am a bit old school. Hamburger menus shouldn’t be the default menu on large desktop screens. Make sure that your category hierarchy makes sense and that products are tagged with multiple categories. Someone looking for “snow boots”, might look under “shoes” or “winter apparel.” Use a multi-column drop down if you have a large number of subcategories.

2. Shotty Site Search

Depending on who you ask, 30% – 83% of ecommerce site visitors use site search as their primary way to navigate. Either way, you want to make it easy for visitors to use your search function, some studies show that site search users are twice as likely to convert.

Despite all this, eCommerce site search are plagued with problems. Functions like filtering are helpful, but not always necessary if you don’t have a large inventory. What is critical though is support for fuzzy and exact product search. 34% do not support users’ searches by product name.

If someone knows the exact product name or model number, buyer intent is high. If someone knows exactly what they want to buy, chances are they will use site search to find it. If your site search is broken, you’ll crush buyer confidence.

How to get it right: a high converting site search starts with design. Basic principles like contrast and proportion can go a long way here. Check out how Walmart’s search function has evolved in size and contrast.

Walmart’s Header 2012

Walmart’s Header 2014

Walmart’s Header 2016

According to Ecommerce Illustrated, when Alinc Technologies tested a bolder border to its search box (right), it increased site search use by 13.2%.

Once you get the design right, make sure fuzzy, misspelled and exact searches for product names or model numbers give relevant results.

3. Cluttered Hero Design

One of the most common mistakes I see with ecommerce sites is the use of a slider on the home page. What a waste of premium real-estate! Pretty much every template I see for sale boasts sliders as a premium feature. I don’t know if the designers are pushing it or if they are just meeting customer demand. Either way, test after test reveal how problematic sliders can be.

Usability guru, Jakob Nielsen calls them “deadly.” Here’s why:

• Auto-advancing sliders increase cognitive load and disrupts the thought process
• Users see them as ads and them don’t click on them
• Content is rarely relevant or focused
• Sliders are rarely implemented well on mobile
• They can cause SEO issues

How to get it right: sliders are often a byproduct of indecisiveness. Stakeholders want to promote too many things and display different messaging. Focus on creating a static hero image with a value proposition that speaks to your ideal customer. Use a call to action that entices them to click one more time.

4. Overly Complex Forms

On average, it takes 4.5 interactions before a user converts. Someone discovering your site and brand for the first time is probably not going to whip out their credit card. If you want visitors to return, capturing their email address or creating a new account is a surefire tactic. The problem, though, is poorly designed, overly complicated forms.

Yikes!

How to get it right: simple forms, with fewer fields tend to work better. Highlighting the active form field helps orient users. Form buttons are super important. Make sure the color stands out against the background. Avoid generic button call to actions like “Submit.” Button copy should clearly state the benefits of completing the form “Send Me My $10 Coupon.” A simple change of button copy can have a dramatic effect on conversions.

5. Mishandling Out-Of-Stock Products

Don’t let your out-of-stock products run-a-muck on your UX. Remember, the goal is to build user confidence with each click. Seeing a product that they like only to find out that it’s not available is a confidence killer. If you’re planning on getting more stock, you can have a back in stock notification app on your product page.

How to get it right: apologize and let them know when it will be back in stock. You can incentivize them to come back by offering a promo code or free shipping. You should also consider removing out-of-stock products from your category pages or labeling them “More on the way soon.”

6. Hidden Money Button

Speaking of buttons, I’m not sure why any eCommerce site would want to hide their “Add To Cart” button. Many WooCommerce themes even hide the button for the default setting. Can someone explain why?

Someone may end up on your page, not see the button and assume its out of stock or not available. Yes, I understand that you might have to select a size first, but there are better ways to handle this. How would you feel if you were all excited about buying a product online, but wasn’t sure if was in stock.

Uncertainty = lost confidence.

How to get it right: don’t hide the first button you need people to click on to make money. If users need to select a variation first, you can:

• Grey out the Add To Cart Button and add bold colored copy near the button that states “Please Select an Option”
• Have a button state that says “Please Select an Option” with an arrow on the option that needs to be selected. When the option is selected, change the button state to say “Add To Cart”

7. Skimpy Product Photos

When it comes to UX on ecommerce product pages, product photos are right up there. People cant’ touch your products, so photos are main way they can experience them. Large, clear photos can increase conversion rates.

How to get it right: Use large, clear photos on white backgrounds. Show your product in multiple angles and include a zoom feature.

8. Tiny Tap Targets

Tiny tap targets are a prime example of a desktop-first mobile responsive design. Just because something is easy to click with a mouse, doesn’t mean it will be easy to tap on mobile.

This graphic sums it up [Illustration by Stéphanie Walter, licensed under a CC BY-SA 4.0]

How to get it right: with more and more sales coming from mobile designs, you better make sure your tap targets are finger friendly. Google recommends that tap targets/mobile buttons are at least 48px tall/wide.

9. Invisible Customer Service

When it comes to eCommerce, customer service and UX make up the entire customer experience (CX). An eCommerce site without clear links to customer service policies, a phone number or live chat is like walking into a retail store with no employees.

How to get it right: have clear links to customer service policies (like shipping and returns). Understand that CX and UX can work together to give you a competitive advantage. In fact, most customers (85%) have said that they would pay up to 25% more for a superior experience. If your selling to millennials, consider adding live chat. Over 60% of millennials prefer live chat over other contact methods when wanting to ask a question.

What other ecommerce UX mistakes drive you nuts?

The post The eCommerce UX Mistakes That Drive Us Nuts appeared first on Speckyboy Design Magazine.