Tag: conversion

4 Things Shaping the Future of Online Shopping

Ola Oreiba Leave a comment


future_shopping

Looking back at the last 10 years, tracking the evolution of the different technologies has become quite challenging of a task; one reason why is the speed of said evolution, another could be the immense number of new tools, practices and technologies surfacing in a single month let alone a year or two. However, if this has to tell you anything, it’s the fact that the current generations are aiming at surpassing themselves in terms of achieving the impossible and in return leveraging the experience of living from the tiniest detail to the greatest.

When it comes to one thing that has definitely evolved in the past few years in human lives, it’s definitely the shopping experience. Since we’re now almost always online, our mere day-to-day interactions online produce an incredible amount of big data which, with the increasing power of computing, is used to make our experience, as customers, richer, more seamless, more entertaining and of course more fulfilling to our needs.

Imagining what the future could be like could appear to be easy from afar yet remains difficult because you never know what the next breakthrough is or where it is coming from. However, if the future is anywhere, it’s lying right in the palm of our hands, the smartphone. Think of all the things made easy by having your smartphone on you, countless, right?! Consumers are now engaging with brands on various channels through their mobile phones, be it social media with the brand itself or finding inspirations from influencers or with the brands’ e-commerce platform.  The sheer number of clicks and actions a customer has to go through to go from engagement to purchase is still hindering. Brands have been reinventing the customer experience through mobile by distributing their online presence between e-commerce and mobile apps for more reach, all you have to do is scroll, but it is not yet enough, carts are still abandoned and needs are yet to be fulfilled in a better way.

We imagine a future with less friction and an even more seamless experience and we think the next 4 things are what will be taking our shopping experiences up a notch or a few in the next few years.

AI2

Machine Learning and AI

With the help of machine learning and AI, your desired product will find you not the opposite, since a unique experience is all about being personal, an experience tailored just for you, right? If you think online shopping still lacks the presence of someone there to turn to for inquiries and questions, chatbots are now developed and equipped with all the information anyone would need, ready to answer all your questions and might even take over the whole customer support as we know it.

Augmented & Virtual Realities

You will be able to find all the info and reviews you’d be searching for to determine whether you should purchase X or Y as you point your phone towards the product using AR experiences online or in-store. The lack of the sensory element in online shopping will be a thing of the past, overcome by creating engaging buying experiences using VR though which you can see the product, place it where it fits, try it on and customize it to your taste.

stock-photo-fingerprint-landscape-created-in-a-graphical-fashion-with-hard-shadows-d-illustration-447676723 copy

Digital Fingerprinting

You won’t be afraid to share your personal information to make a purchase online because you won’t have to when you can present your unique digital fingerprint for authentication, reducing the number of steps needed to checkout and leading to higher conversion. Digital fingerprints will also be of great help in avoiding fraud in online transactions protecting both retailers and customers.

online-shopping

Personalized Payments

Online payment is still such a hurdle to many, right? Personalizing payments should come as a natural evolution to personalizing the whole shopping experience. Retailers will be providing means for customers to decide when and how much they’re willing to pay, gaining not only their loyalty but also the certainty to come back for more.

As a retailer, are you ready for the future? Are you ready to engage the customer on more than meets the eye? The survival in this game will be not only for the smartest, but also for the first and not necessarily the best anymore. Hop onto the train of the new first and you’re guaranteed a notice from a customer overwhelmed by choices yet holds the upper hand all the way and is always looking for only what calls their name.

On Finding The Perfect “Add to Cart” Button

Ahmad Alfy Leave a comment

Recently I participated in a code camp at Al-Makinah where we introduce participants to the fundamentals of the front-end component of the web. I was asked to review the model answer to one of the exercises given to the students. It was simple; they take a web page written in HTML, CSS and JavaScript and improve it in a way that shows what they’ve learnt that reflects what they were taught. The exercise addressed several aspects like user experience improvement, semantics, validation of the markup … etc. It was a simple shopping cart with several products cards laid out in a grid.

I spend a lot of time writing HTML. It’s been a part of what I am doing every day for more than a decade. For me, HTML is more than just a few elements that you throw here and there; I invest a lot in picking the elements that I use. While I was reviewing the exercise, I stopped in front of the “Add to Cart” button. It was an <a> tag with a link. I started questioning myself; part of me hates the fact that this is a link not a button inside a form. It makes perfect sense to be a button. Of course it can be made anything. Simply attaching a listener that fires an ajax request updating the cart will work. But it doesn’t feel right. This isn’t semantically correct. Before I decide what the “Add to Cart” element should be, I decided I should write down the criteria addressing how this element should behave given all the possible circumstances.

Criteria:

  1. It must have the same behavior in presence or absence of JavaScript.
  2. If there are other fields like “amount,” pressing enter (submitting the form) should behave like clicking the button.

At this point I was convinced that this should be a submit button not a link. I quickly realized that this will require each product card to have a form tag with more elements like hidden input with product id for example. In big shops, the home page sometimes hosts a lot of product cards. It even uses sliders to save the space for “Newly arrived,” “Hot offers,” “Hot in category X” and the list can go on. A single page can contain more than a hundred of product cards. All this increase the amount of the HTML tags we serve to the user and increase the page size (comparing to serving a single <a> tag per card).

There is also another problem the submit button doesn’t address and it is very common. It’s the products that need you to select attributes before adding it to your cart (like shirt size or color). It’s common that these product cards redirect the user to the full details page of the product asking him to pick the required attributes in order to add the proper item to the cart. Now I changed my mind; I don’t think it’s a problem using a link for this functionality. I decided to change the first rule I mentioned earlier; it shouldn’t have the same behavior. It just should work in a way.

Before discussing the possible scenarios, I want to clarify something before getting into the argument of whether we should support users with no JavaScript or not. I believe both sides of the argument have valid points; however, there are reasons that you don’t want to lose even the smallest fraction of the users without JavaScript. We’re talking about e-commerce where conversion is translated directly into money. The solution is also pretty simple whether you decided to go with progressive enhancement or graceful degradation as you will see later on.

The available scenarios

Using button

If the product can be added directly to the cart, use button inside a form tag. It can use ajax when JavaScript is available or submit to the server directly when it isn’t (embracing progressive enhancement).

Pros:

  • Semantically, it is more accurate.
  • The behavior is similar in presence or absence of JavaScript.

Cons:

 

  • Require more code for form tag and other elements that identify the product.

 

If the product cannot be added without selecting attributes, use an anchor tag linking to the full product details page.

Using link

Use links in all cases. When JavaScript is available, hijack the click event and add the product to the cart using ajax (embracing graceful degradation). If it isn’t, direct the user to the full details page.

Pros:

 

  • Requires less HTML, just a link with data attribute for product id.

 

Cons:

 

  • The experience is different based on the presence or absence of JavaScript.
  • In absence of JavaScript, the link that says “Add to Cart” will do something completely different. It should then say “Show product details.” This might cause confusion for people using assistive technologies like screen readers.

 

How other e-commerce platforms address this issue?

I decided to review how the other popular e-commerce platforms address this issue. At robusta, we have success stories building successful big e-commerce platforms in Egypt using popular platforms like WooCommerce and Magento Enterprise Edition. I picked the popular open source e-commerce platforms available which provided a demo and a default theme. Now, bear in mind that the result of this analysis is highly based on the used theme. If you are using a different theme it is very likely that your theme uses a different markup than what I am about to show you. The default theme is important because developers use it as a boilerplate for their themes. Some platforms like Magento allow defining a parent theme and extend it to override some of its parts instead of writing everything from scratch.

Magento 2

Magento comes with a theme called Luma. It uses a button tag without a form. The button itself has some additional data attributes related to the product. As you might guess, this implementation doesn’t work except when JavaScript is available. It’s worth mentioning that Magento 2 utilizes RequireJS to split JavaScript into modules. Luma theme by default loads 119 JavaScript file in the homepage alone. With Magento, JavaScript bundler merely seems to function properly; there is a big chance for failure at any point (by network timeout, server failure, slow internet connection,…etc.). It’s disappointing to see the e-commerce giant uses an inaccessible solution that only works with JavaScript.

WooCommerce

The number 1 WordPress plugin for e-commerce really shines with its implementation. It uses a link that directs to the current page with the query string “?add-to-cart=id”. When JavaScript is available, the product is added to the cart using ajax. When it’s absent, WooCommerce handles it in a way different than the scenarios I mentioned before. The product is added to the cart and the user is redirected to the same page again with a success message on top. WooCommerce says “Add to cart” and it delivers what it says exactly with no confusion. When the product requires picking attributes, it redirects the user to the product details page.

OpenCart

OpenCart uses a button without a form that has an onclick attribute. It requires JavaScript to work. When JavaScript is available the product is added to the cart. If the product requires selection of attribute the same button redirects the user to the full details page.

VirtueMart

Perhaps this is one of the least known e-commerce platforms but it is well known across Joomla community. VirtueMart uses a classic form with a button. If JavaScript is available, the experience is enhanced with ajax. If not, the form is submitted and the user is redirected to the cart page. If the product requires selection of additional attributes the button is disabled and the options are displayed to pick from inside the cart. VirtueMart embraces progressive enhancement and provides a solution that works smoothly.

osCommerce

This is an obligatory mention to the e-commerce dinosaur. From the minute you check the demo you get the feeling that you stepped back in time into PhpNuke. osCommerce doesn’t include an add to cart button in the listing. Adding the product to the cart is only available inside the full product details.

Conclusion

There are several methods to mark down the “Add to Cart” button. We should always embrace a method that guarantees the button will work then improve the experience using JavaScript.