{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Why am I comparing two well-known fashion retailers and their ecommerce sites?

Well, though many conventions of web design are well-established, it still surprises me how different ecommerce sites can be, even in the nuts and bolts of basket and checkout.

So, I thought I'd look at two quite different fashion retailers, and see how they match up.

Search bar

Next search

The Next search bar is plain to see on the homepage. Functionality includes predictive search and, rather neatly, a search history.

search on next

search history on next

Topman search

Topman doesn't offer the same functionality, though the search bar is perfectly usable.

topman search 

Result

A clear win for Next. Next 1 : 0 Topman

Search results / filters

Next search results

The first thing that occurs to me is there are a large number of results.

This isn't completely surprising (Oxford shirts are firm Next territory), but confusion is created by the fact that although some of the shirt designs displayed include a dynamic range of colours that can be hovered over, these colours have their own independent listings, too.

That means that the same long sleeve Oxford shirt is presented 13 different times accompanied each time by 13 colour options (see below).

It's obvious that this should be an either/or decision. Either have 13 different listings in single colours, or one listing with 13 colours.

Choosing to do both of these things means I am scouring the search results to find which are actually different shirt designs, and which are merely different colours.

Another option could be to give products more distinctive or even more descriptive names (perhaps mention material and collar or fit type). This could help customers faced with such a scenario.

next search results

The next issue with Next filters is a bit of shoddy categorisation. Here are a few examples.

The 'fit' filter allows one to choose 'regular', 'slim' or 'other'. 'Other' sounds like quite an elusive category, and indeed when I clicked it, there were lots of shirts that could have easily been put into the other two categories.

Even worse was the 'sleeve' filter, which also had a pointless 'other' category, alongside 'short' and 'long', which seemed to contain only long sleeved shirts.

There's a 'size' filter which applies to collar size, though it doesn't say that, merely gives a list of neck sizes in inches. Confusing for those that come from metric lands?

Most arbitrarily, one can choose to sort by 'alphabetically' - I really can't see why that would ever be chosen.

next search results

It must be said, the Next search results and filters work well enough, but without features such as 'quick view' and hover states on product images, the little bugbears I've mentioned are harder to excuse.

Topman search results

Topman has much clearer search results. Colours are separated and there are fewer filter options.

The filters are a bit easier for Topman to get right, because it doesn't sell by collar size and has around 75 fewer products it needs to display, nevertheless - it's a lot less daunting for the user.

There's the ability to show 20 products at a time, or the whole lot in one go (Next only allows a scroll through every result).

Filters are easy to remove, as they are on the Next site, but Topman shades this round as it makes fewer mistakes and includes the extra touch of product rollovers (see GIF below).

topman search results

Result

Topman wins. Next 1 : 1 Topman

Product pages

Next product page

Next has a fairly unique product page.

I like the fact that it's uncluttered, with large product photography, great reviews, and UX basics such as a breadcrumb trail, back button and sizing guide, as well as 'recently viewed' items.

But there are some improvements that can be made.

  • Delivery information is missing.
  • There is no indication of the size of the shirt shown in the product photo, or the height of the model. This is increasingly become a must-have, to give an indication of fit.
  • The sizing of the Oxford shirt shown below is in the 'S, M, L, XL' style, yet the filters we've just used only allowed filter by collar size. Okay, it's difficult to allow users to filter both dress shirts and fashion shirts, but it feels like the filters issue has reared its head again here.

It's obvious (see below) that the main thing that sticks out is the reccomendations feature, which here has gone badly wrong.

I'm advised to style my short sleeve shirt with a matching long sleeve shirt. Perhaps the double collar look is in?

Reminds me of the tactic King Charles I used to prevent the crowds from seeing him shiver and appear scared at his execution (he wore two heavy shirts).

Though this feature must be algorithmic, these bugs should be weeded out by user testing.

In this case, the confusion between selected product and recommended product could easily lead to the wrong product being added to bag.

next product page

Topman product page

The Topman product page includes more best practice features.

I can check my local store for stock, there are smartly presented recommendations that don't get lost below the fold, product sizes are displayed outside of a dropdown (with clear indication of what is and isn't available).

I also really like the box offering me discounts on various basket sizes. I have been browsing Topman a fair bit by this point, adding items to my basket, and Topman clearly wants to encourage me to check out.

Product photography is more copious and more varied than Next - for the consumer this is probably the most noticeable difference.

topman product page 

Result

Topman forges ahead. Next 1 : 2 Topman

Add to bag

Next 'add to bag'

I personally think the 'add to bag' button could be larger, though it is clear in green. It's also partly confused by a second 'add to bag' button on the page (for another recommended product).

When I finally add the product, it's a nice experience, clearly telling me what I've done, with a little product thumbnail, and highlighting the checkout option at the top right of the page.

Pretty much best practice.

next add to bag

Topman 'add to bag'

Topman's approach to the 'add to bag' is very similar to Next's. The call to action is bigger and there's an extra CTA that appears for 'go to checkout'.

The green is a little more noticeable, too.

topman add to bag

Result

Let's call it a draw.

Next 2 : 3 Topman

Registration and checkout

Next checkout

I registered as a new user and the signup form is nice and dynamic with plenty of instructions (see GIF below).

I'm also childishly delighted by the inclusion of 'Reverend' in the title field.

reverend

next registration 

I had a fairly big gripe with the Next registration process. I was unable to manually enter my address.

As I'm in a new build house which Royal Mail is being torturously slow to add to 'the system', I can't actually give Next my address here.

Providing just a postcode lookup facility and no address field is a surefire way to lose customers.

I've previously been prevented from buying insurance online because of this very UX mistake, and went straight to a competitor.

No manual address entry

registration - next

Next gripe, the retailer does not comply with the Privacy and Electronic Communications Regulations, because it includes a check box with the wording 'tick this box if you DO NOT wish to receive...'.

This should plainly be opt in, not opt out, and is disappointing to see.

Even worse, once I use this opt out, I'm then giving a popout window asking me this question again, but from an opt in perspective. It's pretty confusing (see below).

I have to decide not to click anything this time.

PECR CONTRAVENTION

next registration

However, there are some good points once we get to the checkout.

Next highlights secure checkout wherever it can. Delivery is next day, though I can name a different day if I wish, and can also pick a timed slot.

The checkout has also automatically used my postcode to suggest a store I might like to collect my purchase from instead.

The UX here is particularly clear and there are nice touches, such as a dropdown of collection notes, should I be in a hurry, so I can select 'leave with porter', for example.

Green is used very well on this page to make everything of importance stand out.

Payment again uses a dynamic form with no added fuss. Apart from the slight issues with registering my address and opting out of communication, the Next checkout is slick and difficult to mess up.

next checkout

Topman checkout

There's a subtle difference when I register at Topman. With Next, I clicked to register, then entered all of my details, including address.

With Topman, I enter my email address and set a password on the first page, before then being asked for further details (such as address) once I have submitted.

This is a smarter approach as it will capture users more quickly, meaning those that abandon at the address stage can be followed up with.

topman registration

Once I get through to the checkout, Topman offers similar clarity, though can perhaps be commended for showing a clearer order summary (complete with product photo).

With Next this detail is presented (without photo), but is folded down and needs to be clicked to be viewed.

Topman loses out to Next on delivery options. They are clearly presented but I pay more for standard delivery than I do for Next's next or named day delivery.

Despite this, payment is simple with Topman, and I can manually enter my address, too.

topman checkout

Result

Again, there is little to divide the two retailers, the errors identified with Next (no manual address entry and confusing opt outs) are balanced by the costlier delivery from Topman. It's notable that neither offers guest checkout.

On the basis that price is less of a UX issue and because of Topman's inclusion of photography in the checkout, Topman wins this one.

Next 2 : 4 Topman 

Post-fight presser

Topman is the winner! Which, given its current reputation as an innovator in digital, is no surprise.

This isn't an exercise in showing up Next. I think its website is perfectly agreeable and it didn't present major barriers to purchase.

However, it's often easier to highlight possible improvements to an ecommerce experience by contrasting with another website that's a little further along the optimisation journey.

Though these websites have very similar appearances in the screenshots above (particularly product pages), they perform quite differently.

Of course, the caveat here is testing - who's to say that those elements I have suggested would make a difference for the better?

Ben Davis

Published 9 March, 2016 by Ben Davis @ Econsultancy

Ben Davis is a senior writer at Econsultancy. He lives in Manchester. You can contact him at ben.davis@econsultancy.com, follow at @herrhuld or connect via LinkedIn.

781 more posts from this author

Comments (8)

Comment
No-profile-pic
Save or Cancel
Frank Welsch-Lehmann

Frank Welsch-Lehmann, Digital Marketing Consultant at Welsch-Lehmann COMMUNICATION

Thank you for this profound analysis. Very helpful insights.
Ben, have you done similar reviews on sites who sell tickets online?
Or have you seen any UX research on that?

5 months ago

Avatar-blank-50x50

Sam Rehman, Creative Web Dev at Thomas Cook Group PLCEnterprise

Although you point out some valid best practice throughout, it doesn't seem like a good illustration to compare Next and Topman. Oxford shirts was a good comparison, but it ends there really, as Topman only has menswear to categorise -it would of been better to have compared to Debenhams or M&S, as they not only have the same types of categories but more importantly a similar customer profile.

I must say to declare Topman the winner as an innovator with an optimised journey doesn't seem right when I personally feel they have copied quite a lot of the look and feel of next.co.uk in their last re-design.

The checkout funnel was insightful and clearly shows Topman putting the customer first with manual address enter and no dark patterns around opt in/out.

All being said, it was a great read, and points out some interesting UX details. Thank you

5 months ago

Ben Davis

Ben Davis, Senior Writer at EconsultancyStaff

@Frank Not personally, I'll bear it in mind!

@Sam Thanks, I hear what you're saying, Next has bigger challenges on categorisation. Picking these two retailers was more of a hook, comparing shops that stereotypically serve different generations. I'll do some more in future and try to compare apples with apples a bit more.

5 months ago

Avatar-blank-50x50

Kyle Altringham, Digital Designer at Topman

Nice analysis

From Topman Digital

5 months ago

Avatar-blank-50x50

Clare Brace,

There seems to be a mix of personal preference and best practice throughout your article.
I think the key point out of this article should be, both sites should test it’s experiences to ensure it meets their customer’s needs, goals and expectations.
I would hazard a guess that TopMan has a very different demographic to that of Next.

Here is a great article on UX is not UI which you might like: http://www.helloerik.com/ux-is-not-ui

5 months ago

Allan Vincentz

Allan Vincentz, Head of Digital at COCOMI

I wonder why you did not choose to focus on the mobile experience?

5 months ago

Gary Wiles

Gary Wiles, Content Executive at Rapid Electronics

I assume Ben you did your comparison on a desktop, because Next are still losing out by not having a responsive site. Yes, they do have a mobile site but you are not redirected to m.next. Their demographic may be different and older but surely that's no excuse for a retailer of their size. Even BHS are ahead of them in this respect.

5 months ago

Avatar-blank-50x50

Kevin Paiser, Head of EMEA at Nosto

Some valuable points there around the customer journey UX and agree with Gary that mobile should be the focus as I'm sure over 50% of their traffic is on mobile these days, but for Next is definitely not a converting channel I'm sure.
I would emphasise the importance of the product pages, which are also called "home pages" as they act in most cases as the first page a lot of users end up coming to from Google and other traffic sources (retargeting, FB). So having a strong performing product page could be a game changer...here a short article on high performing product pages cases...http://blog.nosto.com/how-to-create-the-perfect-ecommerce-product-page any other good ones or thoughts?

5 months ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.