The ecommerce UX trends you need to be aware of
Some of these ecommerce UX trends may appear obvious at first glance and it’s likely you apply them already, but maybe you haven’t thought about why they’re so crucial.
Mobile-first
This has been the approach to all websites for a few years now, but it’s growing increasingly more important. With each year, the percentage of users viewing websites on mobile devices, as opposed to desktop, is exponentially growing.
As stated by Outerbox on the 10th of January 2021 – “79% of smartphone users have made a purchase online using their mobile device in the last 6 months”.
Mobile vs. Desktop ecommerce UX trends has reversed over the past 10 years; meeting in the middle, then crossing over, in November 2016. As stated by Stat Counter, in March 2011 desktop vs. mobile website users were 95.3% to 4.7%, respectively. Whereas in March 2021, 44.2% compared to 55.8% of the desktop to mobile users. See this chart for reference:
We’ve started to see Mobile vs. Desktop trends change over the past 10 years
Whilst there is a higher percentage of users viewing websites on mobile, the average time they spend on a website is decreasing each year. The average time in 2018 was 767 seconds, whereas in 2020 it was 624: As this trend continues, so does the importance of engaging the users of your website, in a more effective manner. You essentially need to ensure your mobile website grabs the attention of your users, gives them a reason to stay and then converts their visit into a sale.
Cross-selling & Up-selling
It’s easy to confuse the two. Both are very effective but have slight differences in what they’re used for and where they’re placed in your online store.
Cross-sells
Cross-selling is suggesting other products that pair well with your chosen product, e.g Kettle and Mugs
Cross-sell items are placed within the cart page, usually in the form of “you will also like” or for fashion retailers, “complete the look”, which might be offering a hat that goes well with the current product you are viewing. For comparison, an example of cross-selling away from ecommerce could be mortgage providers offering life insurance policies when someone takes out a mortgage.
Example on Wayfair, with items that go well with the current product in the basket.
Up-sells
Upselling is suggesting products of a higher price and spec that your current chosen product
Up-sells are usually located within the single product page. The upsell product(s) are higher-end, more premium versions of the current product. Ideally, you’d like each customer to increase their average order value. To achieve this, you should encourage them to purchase the more expensive products, which will result in the average order value going up. It’s not as straightforward as that, though. You have to give them a reason why they should choose the more expensive version of the product; what benefits will they get from ordering the more premium alternative.
Wayfair offers a great example here too. They allow you to compare the current product with similar ones, offering more premium ones and potentially increasing the average order value.
Both are highly important methods of selling, both with an array of benefits.
One benefit is that it improves customer loyalty and experience. The single product and cart page shouldn’t be a dead-end for adding products to the basket. The user may not even know about the product(s) you are upselling or cross-selling, so without these products being displayed here, they could easily be forgotten or ignored. Similarly with this point, cross/up-selling provides convenience and flexibility.
According to Econsultancy, up-selling is 20 times better than cross-selling. To summarise, cross-sells go with the current product, up-sells are instead of.
Minimalistic Approach
A minimalistic approach to design enables the most important factor, the product, to stand out. I’m sure you’ve heard the saying “less is more” – well, an ecommerce website can still be visually appealing when the design is minimal. With a conservative approach to the layout, you can more comfortably cater the website for everyone, no matter the users’ abilities. You want to make the product structure, layout, search and checkout process as intuitive as possible. The last thing you want is for the user to get frustrated and go elsewhere.
eCommerce sites can still be visually appealing and functional with a minimalistic design
With a minimalistic approach, white space, large fonts and easy to use navigation is your friend. A great example of this is Finisterre.
- They use clear & easy to read font, with a strong brand.
- Only black and white elements, unless it’s a product image (which maintains focus on the product itself). Consistent imagery style too.
- Large, easy to use the navigation
Dark mode
Swapping to dark mode on digital devices can prolong your batteries life
The dark mode is more than just a cool feature. It might be easier on the user’s eyes and it could enable important elements to be focused onto more. As stated on Bootcamp for iPhone users, the bright white light of the OLED screen uses more battery life than if the screen was black. Although it’s been a feature of some social media apps and operating systems for a while now, dark mode in designs is relatively new.
Bootcamp have also presented a comparison between the two colour palettes for a dark/light mode website.
Initially, it would be fairly challenging to ensure all elements, like CTA’s, were still clearly visible in both modes.
Here’s an example of the two, in both modes.
Dark:
Light:
UX Writing
User Experience writing is quickly becoming a thing of the future, optimising text to encourage conversions is something to consider on your ecommerce site
Previously it was just UX Development and UX Design, but now UX Writing cannot be overlooked.
UX Writing can be subjective, which is why thorough research and user testing must be conducted. An example of this is hotel booking systems. User’s don’t like to purchase something expensive straight away, so instead of the button text being “Book a room now” it would say something like “See availability”, like on Booking.com:
Adding a personal touch goes a long way. For example, in a rewards/points section of your account on an ecommerce site, addressing the user by name feels far more welcoming and avoids mixing up first and third-person references. As you can see here:
In the account area, a profile image and name is visible on the account area
Animations
There is a fine line between using animation on your site, keep this smooth and sleek to avoid any glitches
Animating elements in ecommerce sites have often been avoided, but that’s changing, it’s becoming more popular. It adds personality. Animations are not only to make the page look smoother; they can enable users to see when things are updating, e.g. when something is added to the cart. You could argue these animations are more like interactions.
There’s a fine line between using animation as a guide for the user, as opposed to a distraction. Building an ecommerce store can be challenging, largely because of the amount of competition. This is then highly crucial for you to try and obtain the user’s attention.
As stated on Ecommerce Platforms, a user can form an opinion within 50 milliseconds and an impression of the website within 10 seconds. That doesn’t give a lot of time. They could lose interest for a number of reasons; poor image quality, lack of information, inability to use or navigate. Using animation is a good way to draw attention to important areas of the site, key information that shouldn’t be overlooked.
Here’s a good “add to cart” animation example on The Cool Club: