Graham Charlton gives the skinny on simplified navigation, brutalism, the death of flat design and more!

Ecommerce is constantly evolving and from a UX perspective, I think we’ve generally been moving in a positive direction.

Yes, there are still plenty of areas for improvement, but more online retailers now understand the importance of designing great user experiences, and the result is sites that are generally easier to use than they were five years ago.

In this post, I’ll pick out a few UX trends I’ve noticed on ecommerce sites over the past year, and some things to watch out for in 2018.

Simplified primary navigation

Many sites have now simplified their main navigation options shown in the header, something pointed out by Ben Davis last year.

This means people landing on the site have fewer options from which to start, this in theory simplifies the customer’s decision making process and helps them begin their journey more quickly.

You can see this on Amazon for example. The first screenshot is from 2016, and it shows lots of navigation options including the category list on the left of the page.

Now, it’s simpler. Amazon’s site is always busy around the rest of the page, but the top navigation options have been trimmed down and simplified.

One effect of this is that more options need to be presented in the secondary navigation, as users are not narrowing product selections by selecting a specific category.

This means quite a lot of options are shown via drop-down menus. Whether this is a good or bad trend is unclear, but I’ve seen this on quite a few sites.

Shortcuts to faster payments

With checkout UX being a clear source of friction in ecommerce, it’s natural that retailers are looking to try and make checkout completion as easy as possible through easy payment options.

Aside from standard ways to make the payment process smoother, such as guest checkout options, better form design and address entry tools, more payment options are now available which simplify the whole process.

From a user perspective, this simplifies the whole checkout process and removes the need to enter lots of data.

If shoppers have already created an account with a service like Visa Checkout, there’s no need to enter address or payment details at all, just a username and password and they’re done. It uses their pre-entered data and card to complete the transaction.

This works especially well for retailers looking to simplify mobile checkout, a key area for improvement on many sites.

Address and card entry is that much harder on a smaller screen, so any shortcuts make it more likely that shoppers will complete payment.

Digital wallet options like Apple Pay can make checkout even easier on mobile – as simple as a fingerprint scan.

For retailers looking to reduce checkout abandonment, these are useful options to self checkout. The drawback is that skipping large parts of the checkout process means retailers aren’t able to offer easier repeat purchases through stored address and payment details.

No more hamburger menus?

Hamburger menus were all the rage as a way to save some valuable screen space, especially for mobile sites. They’re still to be seen on many retailer’s mobile sites, Tesco and ASOS being just two examples.

However, there are some clear flaws with the use of hamburgers, pointed out by our own Lee Duddell and proved by user research back in 2016.

Essentially, they hide key elements and make tasks more difficult for users. It seems some sites are now heeding these lessons, but there are still lots of hamburger menus out there.

The tide seems to be turning though. Spotify dropped its hamburger menu last year, as did Next when it redesigned its site.

As the message spreads I think we’ll see more sites ditching their hamburger menus in 2018.

More animation

Micro UX and animations are nothing new – Christopher Ratcliff picked out some examples back in 2015 – but I’m seeing them used more frequently now.

They can just be about bringing pages to life and making them a bit more fun. For example, the cinemagraphs used by Chopard help to showcase and display some of their luxury watches.

Other ideas include showing different product views on mouseover, or animations which conform user actions, such as adding items to shopping baskets.

I love these product pages from Simply Chocolate, which animate the bars as users scroll. It’s fun, but it also helps to sell the bars by showing the ingredients and how good they look.

Less flat design

Flat design has been popular since around 2013, but there are usability problems. Indeed, a recent NN/g study found significant issues with it.

Basically, flat design elements are weaker signifiers on a page which means they attract less attention and require more effort from shoppers.

Example from NN/g featuring two modified versions of a detail page for a hotel room. The strong version (left) included slightly 3D style buttons, and the light purple colour was used only on interactive elements; The weak version (right) had flat ghost buttons instead.

If retailers’ own experiences bear out the results of tests like this, we can expect to see more visual cues used on elements like calls-to-action.

More brutalism 

Minimalism has been a positive trend in many ways, as the amount of clutter on websites has been reduced, making it easier for customers to focus on key elements.

That’s why we see lots of white space on sites like Burberry, it allows shoppers to focus on the product and any key information the retailer wants them to absorb.

The proponents of brutalist website design point out the benefits gained through such minimal design – faster sites, similar navigation and fewer distractions for shoppers.  

These, when applied to sites like Balenciaga’s, should in theory translate into higher conversion rates.

If brutalism does indeed mean more sales, we can expect more sites to copy, but I suspect this is not a UX trend for everyone.

Main image by Clark Street Mercantile