Category: UX

  • 8 Best WooCommerce Filter Plugins for Better Website User Experience

    8 Best WooCommerce Filter Plugins for Better Website User Experience

    As your WooCommerce store grows, it is common to add more items to your product list. However, letting your customers comb through it can be daunting for them. 

    According to Sytian IT Productions (web design philippines), making your user shopping experience as smooth as possible is key to success. This may include adding sorting and filtering functions to help customers find what they are looking for.

    You would not want to overwhelm your customers to the point that they would want to leave your online store. As such, you need to add filtering options.

    Luckily, you can add this feature through WooCommerce filter plugins.

    YITH WooCommerce Ajax Product Filter

    Image source: https://wordpress.org/plugins/yith-woocommerce-ajax-navigation/

    The YITH Ajax Product Filter is probably one of the most installed WooCommerce product filter plugins in the market. That’s because this plugin allows your customers to quickly sort through products to find what they’re searching for. 

    Customers can easily filter through products based on categories, color, size, and more. 

    This plugin also allows you to develop a variety of filter presets that display them on a page built by Gutenberg Blocks or Elementor. 

    Features:

    • An option to filter through products based on color, label, tags, etc. 
    • Filter-based price range.
    • Ajax-powered filtering system. (Premium)
    • Ajax-powered sorting that’s based on price, popularity, ratings, and recently added. (Premium)
    • Customized filtering table that can match your website’s aesthetics. (Premium)

    WOOF – Products Filter for WooCommerce

    Image source: https://wordpress.org/plugins/woocommerce-products-filter/

    The WOOF WooCommerce plugin gives customers a more convenient way to search for products based on attributes. This includes categories, tags, price, and more. 

    It has both shortcode and widget support that lets you insert product filters anywhere on the site. It also comes with infinite scrolling support. That way, users can quickly scroll through all of the products without jumping between various pages. 

    Features:

    • Various filtering options based on color, image, price, etc. 
    • Option in filtering WooCommerce products by metadata.
    • Ajax-powered product searching.
    • Infinite scrolling. 
    • Detailed stats that lets you analyze and understand search data. 
    • Shortcode and widget support. 

    Advanced AJAX Product Filters

    Image source: https://wordpress.org/plugins/woocommerce-ajax-filters/

    This can be an excellent choice if you’re looking for a WooCommerce product filter plugin. That’s because it lets you filter products by attributes, prices, taxes, taxonomies, etc.

    This ajax based plugin lets you immediately show the search results without refreshing the page. It also boasts an intuitive drag and drop builder that lets beginners place the filter anywhere on the site. You can also place unlimited filter options on a single widget.

    It also provides you pagination, which visitors can easily navigate on the next or previous page. You can also use this plugin on multilingual online store, both on WPML and Polylang.

    It also comes with several widget options such as radio buttons, dropdown menus, checkboxes, range sliders, tag clouds, and more. This can be customized further by placing a custom CSS via the admin page and manually setting values for the price slider.

    Features:

    • Ajax-based search result
    • Various layout options for filters.
    • Many filter combinations.
    • Pagination and sorting without page reloading.
    • Filter by product tags
    • Color and image type filters
    • Drag and drop filter building
    • Search box widget (for pro)
    • The slider can utilize strings as a value (pro)
    • Price as a checkbox with minimum and maximum values (pro)

    Themify WooCommerce Product Filter

    Image source: https://wordpress.org/plugins/themify-wc-product-filter/

    Another great WooCommerce product filter on our list, Themify, is pretty much the same as the other tools we’ve mentioned. It allows you to come up with filters for price, attributes, brand, color, range, etc. 

    It also comes with attractive filters that complement the overall look of your site. 

    The plugin has a drag and drop builder that allows you to create new filters and immediately apply them without reloading the page. The filters can also be used both on horizontal and vertical layouts and a live search results feature. 

    Customers can also choose queries and then check their search results on a new page. This filter plugin works well with Divi and Elementor, an excellent option for those who use it as a famous page builder. 

    What’s awesome about this plugin is free. Therefore, one can enjoy all of its features for no cost. 

    Features: 

    • Great drag and drop builder
    • Horizontal and vertical filters layout
    • Search widget to give live results
    • Compatible with Divi, Elementor, and Themify builders. 
    • Stunning design and excellent customizability. 

    WooCommerce Grid Display AJAX Filter

    Image source: https://codecanyon.net/item/woocommerce-grid-display-product-ajax-filter/9936306

    This filter is free and works well with WooCommerce. You can easily organize filters according to color, size, brand, style, and any other filter that you want to use. You can also use product tags to make sure customers can easily find what they’re looking for. 

    If you like to change the background’s color or style, you can change it anytime. You can also use the filter plugin to help your customers easily find what they’re looking for. 

    There’s also an autocomplete option for particular product tags. The autocomplete also lets customers choose a specific type of search that they usually use. With just a couple of automatic searches, customers can easily find popular products. 

    Filter Everything

    Image source: https://codecanyon.net/item/filter-everything-wordpress-woocommerce-filter/

    This premium filter plugin comes with a lot of advanced features. For instance, it allows users to sort through the stock list using colors, price, tags, and more. 

    It also takes a couple of seconds to find the products they want in just a few clicks. This makes searching for products as straightforward as can be for your customers. 

    Features: 

    • Works well with page builders like Divi and Elementor.
    • SEO features that make pages ready for indexing by search engines. 
    • Sort out things by images, sale prices, views, etc. 

    Jet Smart Filters

    This is a great tool that works exceptionally well with the Elementor page builder and the Butterberg editor. It comes with 17 different filter types and a couple of additional widgets to showcase active filters, apply button, reset button, and a lot more. 

    You can also build and modify filters and show them anywhere on your site. It’s also highly customizable, letting you create elegant filters that match your site’s overall look and feel. 

    Features: 

    • Compatible with Elementor and Guttenberg page builders. 
    • Indexer that shows the number of results against every filter
    • Hierarchical filter system
    • Dynamic search system
    • Extremely customizable

    Product Filter by XforWooCommerce

    Image source: https://codecanyon.net/item/woocommerce-product-filter/8514038

    If you’re looking for a great all-in-one filtering plugin, then Product Filter by XforWooCommerce is an excellent choice. Its advanced customization feature lets you easily position and optimizes your product filter widget experience. It provides seamless navigation and a smooth experience to shoppers.

    Features:

    • Lets shoppers filter through products based on price, attribute, rating, etc.
    • Filter analytics that lets you know what your customers are checking
    • Ajax-powered filtering system
    • Great customization features

    To sum it up, product filters allow you to enhance your ecommerce website’s customer experience. By using filters, customers can easily get rid of unwanted product search results and quickly find what they want to buy. Doing so can also help boost your online store’s conversion.

  • Is Your Mobile Site Now More Important Than Desktop?

    Is Your Mobile Site Now More Important Than Desktop?

    As the number of people using their phones to browse the web and view sites continues to increase, it’s more important than ever to have a properly optimised, mobile-friendly website. We take a look at why mobile is so important, and whether it should take over from desktop as a priority when it comes to updating your site.

    What does a mobile-friendly site mean?

    Mobile-friendly doesn’t just mean that you can access a website via a mobile, it means that it offers a good user experience when it’s viewed on a smaller screen. If you have to zoom in and out to read the site, links and buttons don’t work, or it just doesn’t load properly on phone or tablet, then it’s not mobile-friendly.

    Responsive design is generally considered the best way to go about making your website mobile-friendly. This means that your site and all the elements in it adapt to the screen size of whatever device is being used. 

    For this reason, many sites are now focusing on mobile-first web design, which means designing your website for a mobile or smaller screen first, and then scaling up the design for larger screens. Instead of adapting the desktop version and making it usable on smaller screens, mobile design becomes the priority.

    Why is mobile so important?

    Let’s take a look at three of the main reasons:

    Mobile vs desktop traffic

    The number of people using smartphones and other devices to access the internet is rising year on year — in 2018, 52.2% of all website traffic around the world was generated through mobile phones. This means that potentially over half of the visitors to your website are using a smartphone instead of a desktop computer or laptop.

    SEO benefits

    The mobile version of your website is an important ranking factor when it comes to where you appear in search engine results. Google prioritises your mobile site above your desktop site with mobile-first indexing

    If you don’t have a mobile-friendly site this will negatively affect your rankings, and sites that provide a good mobile experience will, as a general rule, rank above it. Furthermore, if someone views your site on their phone and it doesn’t load properly or it’s difficult to navigate then they’re unlikely to stay for very long, which will also have a negative impact on your rankings. 

    Mobile conversions

    Conversions are still higher on desktop compared with mobile, but the gap is closing rapidly. More people are using their phone to complete purchases, and they’re also likely to use their phone to do research and then convert at a later point using a desktop. 

    Bearing this in mind, if your website doesn’t function properly on a mobile then you’ll miss out on people that are starting their search for a product or service. Your competitors are going to be prioritising their mobile site so it’s important that you do too.  

    Where to start with mobile-friendly website design

    Most website building platforms will make it simple to create a mobile-friendly website, but these are a few key things to consider when looking to improve your website when it’s viewed on smaller screens:

    • Increase your font size to at least 16px so visitors don’t have to zoom in to read anything.
    • Reduce the page load time — use fewer images and videos for mobile sites so that it doesn’t take a long time to load the page when someone’s using mobile internet. 
    • Large images can take up too much of the page when viewed on a mobile.
    • Minimise the website navigation — a mobile site doesn’t need an extensive navigation menu to take up half the screen. Instead, consider using a hamburger menu or just including the most important links.
    • Make the call to actions and links bigger so they’re easy to click on for mobile users.
    • Avoid pop-up windows as much as possible — they can be distracting and annoying for users on a small screen because they’re harder to close. 
    • Don’t make your pages too long so that mobile visitors have to keep scrolling and scrolling. Put the important information at the top of each page so it gets key details across without them needing to go further down. 

    Mobile websites vs mobile apps 

    If you’re going to focus on mobile traffic then you might be wondering if you need an app. Apps can often provide a better user experience than a mobile website as they’re developed specifically for smaller screens and can offer a more personalised experience. 

    Developing an app means you will also be able to take advantage of a mobile device’s unique functionality, for example by sending push-notifications that reach your customer as soon as they check their phone.  

    However, a successful app that functions well can take a lot of money to develop, especially as you need to create and keep up to date two versions for iOS and Android. And it’s still essential to have a mobile-friendly website as well — if people are searching for your business or products on their phone they’re going to find your website so it needs to work well on mobile. 

    If you’ve got the resources and a growing customer base then it’s definitely worth considering developing a mobile app, but you should prioritise creating a mobile-friendly website first. 

    Overall, having a mobile-friendly website is essential for all businesses — not only will a poor mobile website damage your search engine rankings, but it’ll also put off potential customers and you’ll lose out on a growing number of conversions.

  • 7 Visual Trust Indicators That Enhance Ecommerce UX Design

    7 Visual Trust Indicators That Enhance Ecommerce UX Design

    How many online businesses do you trust? There’s an enormous difference between carefully and occasionally choosing to buy from a particular site and purchasing from one on impulse. The former is easy for a merchant to achieve (it’s mainly down to having the right price at the right time), but the latter is challenging — as well as incredibly valuable.

    Think about how many sales Amazon picks up every day purely because people know they can trust it to deliver quickly and conveniently. It doesn’t always have the best price, or the largest selection options, or the most generous guarantee, but it’s carved out a niche as the default option. You don’t need to second-guess an Amazon order.

    In the case of Amazon, this is largely down to name recognition, something that small brands can’t dictate (and thus can’t count on). But they can dictate the quality of their websites, improving them until they provide exceptional user experiences. Key to this is taking every opportunity to show trustworthiness — and that calls for great visual elements.

    This is because visuals catch attention far more quickly and consistently than text can. Trust indicators in text can be missed by those who gloss over the content, so imagery is the best bet for getting a message across. So how can you best deploy visuals to encourage your website’s visitors to place their trust in your brand? Let’s look at 7 visual trust indicators you can (and should) add to your site to enhance your UX and win more conversions:

    An aggregate review rating

    There’s a basic impact to a strong out-of-5-stars rating that can’t be denied. Assuming you’ve done a good of catering to customer demand and encouraging happy customers to leave reviews, you should at the very least be able to boast a rating above 4 out of 5. If so, including your aggregate review rating in a prominent position above the fold (along with a caption clarifying the number of ratings involved) — and ensuring it’ll show up in the SERPs — will go a long way to assert the value of your brand.

    Be mindful when you do this that your aggregate review must be fully believable. If it’s a flat 5 out of 5, it will seem shady: too few ratings will sap the significance, and a healthy number of ratings will make the perfect rating seem implausible (you’ll never satisfy every customer). Don’t waste any time trying to curate your reviews. Leaving in the negative reviews will show that you’re not afraid to admit that you’re not perfect, after all.

    Trust badges

    By trust badges, I’m talking about any kind of badge intended to make the site visitor feel more confident about proceeding. A trust badge could relate to a brand accreditation, adherence to a particular standard, or an award (or similar incident of recognition). Common examples include the PayPal verification badge, the VISA verification badge, and an SSL certification badge (this will vary depending on the SSL provider being used).

    The reason that trust badges matter so much is that they neatly communicate elements that are utterly vital to the online buying experience. Much ado has been made about securing personal data, with customer data leaks getting a lot of public attention, so it’s understandable that shoppers would be wary about providing their details (financial and otherwise). Having trust badges for payment gateway services will reassure visitors that their information will be safe.

    And if your business operates in a more specific industry niche (or if you want to make a broader commitment to some kind of social cause, perhaps through supporting a specific charity or environmental standard), there will presumably be various schemes and partnerships you can join to attest to your expertise, quality, and responsibility. If you’ve gone to the trouble of joining a particular scheme, you might as well make mention of it on your site.

    Social sharing buttons

    Social media dominates the internet these days, and shoppers often take cues on where to buy (and what to make of particular brands) from what they see on social media channels. More significant for brands, though, is the potential of social media coverage to destroy reputations.

    Look at it this way: back before social media hit it big, a customer who had a negative experience could complain about it to their friends, but it wouldn’t affect the business much. Now, though, that negative experience can be shared on social media within minutes — and though it’s more likely than not to be overlooked, there’s a solid possibility that it’ll get some attention and spark a trend specifically around how bad your brand is.

    Fearing the power of social media, plenty of brands that aren’t overly confident in their ability to impress will choose to avoid it entirely, not creating social media accounts and not pushing people to post about them. Consequently, if you scatter social sharing buttons throughout your site (ShareThis will give you the code you need), encouraging people to talk openly about your brand on social media, it will suggest that you have nothing to hide and are willing to be placed under public scrutiny.

    High-quality product images

    When you’re selling physical products online, you face a difficult situation relative to traditional brick-and-mortar retailers. The higher the asking price, the more important material quality and specific dimensions tend to become, and the more eager a prospective customer will be to physically inspect the item they’re considering — something that can’t be done over the internet (the closest you can come is with a try-before-you-commit system).

    You can tell them that your product is made with premium ingredients, but they might not believe you, and for good reason. Plenty of sketchy retailers make inaccurate claims about their products to tempt unwary shoppers, particularly through marketplaces like eBay, and returning a mis-sold item isn’t straightforward even when the financial side is covered.

    Because of this, you should make every effort to provide high-quality product images. They should be high-resolution, well-lit, and spanning all relevant angles — if possible, you should throw in 360-degree views that can be manually rotated (services like WebRotate360 can make this relatively simple). It’ll never replicate the in-store experience, but it’ll show that you care about helping the shopper make an informed decision.

    What if you offer an electronic product? In that situation, what you should try to offer is a visual essentially consisting of a vertical slice of regular use: a composite screenshot that neatly displays all the relevant elements in limited space.

    Lastly, there’s the possibility that you don’t sell any products at all. Perhaps you offer a service, for instance. If so, you want to focus on images of your team, your office, and — to whatever extent possible — your business in action. Show what you do, because it will hit home far harder than simply describing it ever would.

    User-provided media

    Supposing you do sell products, showing a photo of a member of your staff holding a product and beaming with happiness isn’t going to prove very convincing. You have a vested interest in encouraging people to buy whatever you’re selling, regardless of its actual quality, and shoppers are going to be keenly aware of that bias.

    User-provided media, however, is much more compelling. If someone purchases your product, takes a photo of the product in use, and sends that photo to you, you can add it to the product page to significantly increase the perceived quality of the product. As with the aggregate review rating we began with, it’s all about the power of social proof.

    And if you can encourage people to submit video, that’ll be even better. You can see this with Amazon (it can only skate on brand recognition because it set the benchmark for service), which routinely fleshes out its review sections with customer-submitted photos and videos. The most helpful reviews are generally those with videos that either review the items or provide instructions to help new buyers use them. Do what you can to drive feedback, and it will greatly benefit you in the long term.

    A location map

    Getting a physical location for an online business is very reassuring for a lot of shoppers, because they don’t trust enigmatic online entities. What happens if you place an order, the payment is taken, and the website goes down? Whom do you contact to pursue an explanation? If there’s just an email address, you’ll have no way to escalate the matter if it goes wrong.

    When you know that a business has physical premises, it feels infinitely more stable. You can feel confident that it won’t simply disappear overnight, and isn’t some contrived throwaway brand created to exploit trusting shoppers for short-term profit. Since a visual map is extremely easy to provide through Google Maps (there’s even a site that will give you the HTML embed code for your chosen location), there’s really no reason not to offer this.

    A live chat icon

    When I arrive at a store site from which I’m considering buying something large, expensive, or both, a live chat icon is one of the first things I look for. Why? Because I have to anticipate the worst-case scenario of placing an order, which is that I need to get in touch with the store to deal with some kind of problem, whether involving the payment, the delivery, or a potential return. And if that happens, the last thing I want to do is deal with a sluggish ticketing system, or need to find a good time during the day to make a phone call and be left on hold for hours.

    Live chat systems aren’t ideal, of course — you can still have to wait for someone to be available, it can be challenging to get certain things across in text alone, and you can’t be sure when you’ll get a person or a chatbot. In general, though, it’s great to know that a site has a live chat system, because it means there’s a commitment to maintaining a certain level of service.

    Ideally, a live chat icon should be visible in some form at all times (on all types of device) without being overly intrusive, and should fit with the broad aesthetic of the site. If you don’t already have a live chat system, or you do but it’s only accessible through a dedicated support page, it would definitely be worth your time to make a change.

    Used well, each of these 7 visual trust indicators can make a significant difference, helping the site visitor to have a better experience and consequently view your site and your brand as trustworthy. If you don’t feel that your brand is performing as it should, perhaps you’re coming across as untrustworthy. If so, it’s time to fix that.

    For more information on starting your own ecommerce business, don’t forget to check out my guides or blog for the latest news, tips and advice.