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.
The Next search bar is plain to see on the homepage. Functionality includes predictive search and, rather neatly, a search history.
Topman doesn’t offer the same functionality, though the search bar is perfectly usable.
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.
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.
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 wins. Next 1 : 1 Topman
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.
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 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.
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.
Let’s call it a draw.
Next 2 : 3 Topman
Registration and 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.
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
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.
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.
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.
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.
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
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?