{{ 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.

Zara is a Spanish fashion retailer with more than 2,000 stores worldwide, 66 of which are based in the UK. 

Zara’s website also has one of the most idiosyncratic search tools I’ve ever come across on an ecommerce site.

Last month I took a look at how John Lewis, M&S and Debenhams handle on-site search using a specific set of criteria to gauge the effectiveness of each tool, here I’ll be doing the same with Zara to see if being different means sacrificing usability.

Search box design

The search box should be consistent across all pages of the site, avoiding significant usability problems and be positioned away from any other text-boxes.

First of all, yes it’s positioned away from any other text, and it occupies a space all of its own in the whiteness of the Zara homepage header.

It also remains exactly where it is whether on search results pages or product pages.

So despite it not looking like traditional ecommerce search boxes  (there’s no solid outlined box) and being positioned in a different place to user expectation (it’s far left, rather than central or on the right) it’s still obvious where it is and where you type.

The major break with tradition happens when you click in the search field. The content of the page (whether homepage or product page) completely disappears.

The user can then carry on typing to be served automatic search results, or if they wish to leave search, click the back button or navigate the menu options below.

This is the least convenient feature of the search tool and leaves an unpleasant blankness on the page, as if something’s gone wrong with the site. However there is a reason for this, as we’ll see next.

Auto-suggest

Automatic suggestions should appear after a visitor types several letters into a search box based on commonly searched key-phrases including common misspellings and abbreviations.

Zara automatically suggests products that not only appear as text when you type but also as actual product image links which populate the entire page, hence why the initial page content disappears.

Text suggestions:

Image link suggestions:

The above images change dynamically on the page as you continue typing.

The search tool also forgives even the most bizarre of wilful misspellings.

There is a purposefully minimalist design here, possibly to the detriment of usability, after all I’m offered no product information along with the images. 

However Zara has hidden the description and price within the result, you just have to hover your mouse over the image.

Mobile-friendly design

The search box should adapt to work on any mobile device and screen size, and remain easily accessible throughout the journey.

The desktop site isn’t optimised for mobile, instead Zara operates a separate mobile site.

Unfortunately the search tool is hidden behind the hamburger menu throughout the entire mobile site.

Search should be immediately available from every page, housed consistently across the top of the page as a text entry field or as the traditional magnifying glass icon.

Zara’s mobile search tool is poor, with no automatic suggestions and poor sorting and filtering options.

Effective synonym/stem management

Search boxes should have the ability to manage alternate terms so that several different keyphrases can trigger the same set of search results (for instance: singular & plurals, trousers/pants).

Zara’s site has no problem handling plurals and it serves the same results for any synonym I tried.

Presentation of search results

The total number of results are shown along with the search term and product images.

The search term remains because essentially we haven’t navigated away from this search-box/product-page hybrid. The confusion comes from the number of products listed and the amount of images shown.

There certainly aren’t 173 products shown, neither is there any indication that more can be found by clicking through further pages. In fact there aren’t any further pages of results.

When you click on products with smaller amounts – Denim (10) – I’m definitely served the correct number.

So when I click on ‘Trousers’ above to reveal just 24 results, where are the remaining 141 products?

The answer is below…

Filter search results

Search results can be sorted and filtered by category, product, price etc.

Ultimately Zara really falls down on its lack of filters and options to sort. On the left menu there is only the option to see different product types, there’s no ability to filter by colour, price, size, availability.

There is also no ability to sort the results on the page by the typical ranking orders of bestseller, alphabetical, relevance or price.

I have however solved the mystery of where my missing search results are. If you click the symbols on the right-hand side you can toggle between viewing with four items per page or up to 24.

If you choose the four items per page symbol, you’re then treated to an infinitely scrolling page where you can see every single one of the 173 pairs of women’s trousers available.

There is absolute no indication that this is the case, and I stumbled upon this quite by accident.

Search effectiveness

Although I definitely appreciate the uniqueness of Zara’s search tool, it’s just not user friendly enough. 

I’m prepared to say that the sacrifice of a page’s content is worth it to be served the large product image results, but with absolutely no filters available, a lack of consistency between ways to view results and a poor mobile experience, Zara’s onsite search needs a serious rethink.

For more on the blog about onsite search, check out how Walmart, Target and Costco handle on-site search.

Christopher Ratcliff

Published 11 March, 2015 by Christopher Ratcliff

Christopher Ratcliff is the editor of Methods Unsound. He was the Deputy Editor of Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

686 more posts from this author

Comments (19)

Comment
No-profile-pic
Save or Cancel
James Gurd

James Gurd, Owner at Digital JugglerSmall Business Multi-user

Thanks for sharing your views on the search tool.

I find it a truly odd UX. Some things are really good, like the typeahead results and dynamic population of products but the overall experience leaves me cold.

The big blank page did make me think the page hit an error and the lack of sort options is a major irritation - one of the first things i do as a customer to narrow results.

The other major fail is what happens when there are zero results - a truly awful page with no help.

I'd love to see some conversion data from them. Always dangerous to assume something is a fail until you've seen the evidence.

thanks
james

about 2 years ago

Stuart McMillan

Stuart McMillan, Deputy Head of Ecommerce at Schuh

I'd agree with James, some serious UX flaws, e.g. when you click out of the search when empty you still have an empty screen; and as James says, the big white screen makes you think it's broken. A simple touch like some easing would have made the users feel like this was a slicker experience.

about 2 years ago

Borja Santaolalla

Borja Santaolalla, Chief Customer Officer at Colbenson

Thanks Christopher for highlighting the unique search experience at Zara. I follow your articles on site search very closely, so it's been a pleasant surprise to see one of our customer's work reviewed.

I must admit that I've enjoyed reading your post very much, you've hit the nail on the head on most of the points from a UX point of view, and I couldn't resist sharing some of the inputs that went into the design criteria.

The search experience at Zara has been designed from a discovery perspective. That is, selling clothes is not a functional search, such as browsing a catalogue of electronics, search in fashion is about inspiration, it's about emotions and empathy. The full page instant autosuggest search experience has been designed taking this search pattern into account. Narrowing search results through the use of facet filters (colours, sizes, prices, etc..) was discarded as an option early on in the design phase, Zara wants their customers to easily search & browse though all their new trends and articles in a unique way. Search is proposed as a highly visual, entertaining and inspiring experience that results in an impressive increase in the use of search by all users (new and returning) and most importantly in bottom line results, i.e. revenue generated from search visits.

We have plenty of data that supports all of this. In fact, all of our new customers in fashion are turning into this new immersive search experience. You can follow our latest work at empathybroker.com.

Btw, I totally agree with you on the shock and blankness of the initial search page, what do you think about this new approach at Pullandbear.com?

Thanks again for your inspiring and thought provoking articles!

about 2 years ago

Christopher Ratcliff

Christopher Ratcliff, Editor at Methods Unsound / Search Engine WatchSmall Business Multi-user

@Borja - The Pull & Bear search tool is very interesting. Much more impressive and the simple addition of the X button makes it more user friendly.

Also, if you want to share any of your supportive data we could do a follow-up post... my email is christopher.ratcliff@econsultancy.com

about 2 years ago

James Gurd

James Gurd, Owner at Digital JugglerSmall Business Multi-user

@Borja Thanks for sharing your insights. I think the Pullandbear implementation is much smoother for the user - the flyout doesn't make the page look broken and a simple close takes you back to the page. I also like the ability to hide/show info like price.

Your comment about page filters/sort is intriguing - every fashion site i've worked on has good filter usage on search and list pages (probably more so on the list pages). By removing them completely, you remove a use case that would help a subset of the audience. Surely there's a better way to provide this to those who want it without compromising the core UX approach? Having filters doesn't preclude visual browsing but not having could annoy customers like me who want to refine quickly e.g. if i only have £100 to spend, then getting me excited visually for me to find that the pair I want is out of budget will just send me packing.

Did you AB test a version with filters against the default?

thanks
james

ps both sites really need to think more carefully about the zero results experience!

about 2 years ago

Avatar-blank-50x50

angel maldonado, founde ceo at colbenson

@Cristopher thanks once again for placing some light on Site Search. I think is such a fascinating subject, to me is the magical part of a Site.

I work with @Borja at Colbenson from were we develop EmpathyBroker. You guys have come to some very interesting observations, but let me be philosophical about Filters :)

What is the purpose of Filters? Increase precision and improve recall. So Filters are Good :)

Do people use Filters in single brand fashion? Rarely. Less than 2% in our experience. From this small group 80% filter by Gender (when there is gender :) and nearly 20% colour/pattern/composition.

Do people find better when Filters are used? Yes, Click-through rises 20-40%.

How can we apply Filters when users do not use Filters (again on single-brand fashion)?

Lets think of Filters as Query context, it does not have to be provided through an explicit click, it can be implicitly calculated or motivated and this is what we have to pursue when innovating on Site Search; to know more with less.

In our experience, when the interface responds to every character (token-token sample as Zara) Average Words increase providing larger queries and therefore query context (or Filters) within the query text ("leather jacket" rather than just "leather", "bikini top" rather than just "bikini" or "white shirt kids" rather than just "white shirt".

Other techniques head in the same direction of implicit query context interpretation (beyond single brand fashion). Some of these are:

Gender intention calculation (based on navigation),
Preferred color (based on previous purchases)
Intended category/product type (based on SM/Blogs as you touched very interestingly on a recent article on the awareness of Toys Sites)
etc

As a final thought, we got to be contra-intuitive and to certain extent a bit irrational when experimenting innovations on Findability, there is no other alternative and future well designed UX experiences depend on today's out of the box patterns, this is why we work on site search, to create new ways that build upon each other.

Having said this we shall not forget about the basics and defaults as a sound no-results set of elements that as you guys pointed out is a must.

Thanks

about 2 years ago

Avatar-blank-50x50

Melissa Eggleston, Content Strategist at Independent

"Zara wants their customers to easily search & browse though all their new trends and articles in a unique way. " - Borja Santaolalla, Chief Customer Officer at Colbenson

Is that what the Zara customers want? Why would I want to learn a unique way to search? I just want to buy clothes.

about 2 years ago

Borja Santaolalla

Borja Santaolalla, Chief Customer Officer at Colbenson

@stuart, you’re right. This feeling that something is broken is being addressed. Besides that, I’d love to know your thoughts on the search experience at Zara once you start typing. Did you enjoy it?

@Christopher, thanks, unfortunately we cannot share customer data, but we’ve got some market site search insights in fashion that we’ll love to share with you. Will follow up on mail.

@James, I’m with you, I love the search features you highlight at pullandbear.com (i.e. typing flyout, show/hide product info layouts (name + price), etc… This is the natural evolution of the search experience interface proposed in zara.

WRT facets (search & filtering) you’re right, there is a user case that requires filtering through price or colour that needs to be addressed, but in this particular case, a “monobrand” trendsetting fashion retailer, the use of facets is minimal. This wouldn’t be the case in let’s say Schuh, a multibrand shoe retailer, where users will always be tempted to filter through their favourite brands. Following your example, what happens if I only have 100£ to spend? Well, what if you miss out on the dress of your life because it’s 110€? Also, if you want to filter through colour, why don’t you just type it? (i.e. type ”red dress”). Again the design priority here is to propose a search experience based on typing, browsing, and getting inspired in the process. The average keyword per visit has dramatically gone up, hand in hand with search driven sales.

No one has brought this up yet, but the challenge we face in site search is being relevant with results, this requires taking the retailer’s merchandising criteria (i.e. sales, shares, “freshness” (date of launch), etc…) and personalization (i.e. shopping and browsing history, SM, etc..) into account in product ranking . The idea is to match results based on the user’s style. This is the bulk of the work we currently do, helping retailers adapt their catalogue to their merchandising and customer preferences through site search.

Re: no results pages. Work has been done integrating the store locator (i.e. type “store”), as well as shopping help (i.e. type “returns”) in the results page, however, I’m with you, the design of these pages has to be improved, it’s quite poor at the moment.

@Melissa, do you really think that search users in zara need to learn something new? Don’t misunderstand the way we use “unique”. You just need to type and browse.

about 2 years ago

Stuart McMillan

Stuart McMillan, Deputy Head of Ecommerce at Schuh

@Borja, actually, yes, I love it's presentation, I think it's good for product discovery, which is a tricky thing! I also really like the big font. However I think it would be a lot better with a few small interface tweaks.

about 2 years ago

James Gurd

James Gurd, Owner at Digital JugglerSmall Business Multi-user

@Borja Thanks for the information and sharing your thoughts/insights.

I completely get the desire to make search more immersive and enjoyable and for users who are flexible in their needs (e.g. price) and want to be excited, then the free flow is a great way to give them the visual clues.

However, what if I really want to find a dress that's under £100 - why are you forcing me to do it the hard way? It goes against everything i've learned optimising websites. The two experiences can co-exist, why do you have to force people to behave in a particular way? Just seems very odd to me. Sure, make the default experience the immersive search the client wants and the research shows is a valid use case but also make sure you provide the tools that satisfy other user types. The red dress example is a good one - some people start off general browsing (e.g. cocktail dress) and then refine based on the on-page clues. So if then a user wants specifically to look at red dresses, they can only do so by typing a new search. Sure many will do that but some are trained to use filters - so you're expecting them to retrain themselves specifically to suit how you want them to behave. That seems like the old days of build it and they will come, not user centred design.

I completely get the benefits of innovation and doing things differently, after all 'best practice' is a dangerous game to follow for so many reasons. However, going against known learned behaviours seems risky.

That's just my take and as you say the data is what drives the best decisions.

Interesting conversation so thank you.
James

about 2 years ago

Avatar-blank-50x50

angel maldonado, founde ceo at colbenson

You so very right @James, price is important, but not for Zara, it is for most Sites but not in this one.

Price range in Zara is already known for its users. Zara should not have the same Filtering experience than a computer related, toy store or multi-branded catalogue.

Only gift related queries do demand price Filter, but this is handled at gift page only.

Finally, is not about forcing People to behave in a particle way, to the contrary, is about not forcing them to reach results through a laborious process. Cashpoints use to have a way of getting us to the cash with x number of clicks, now there is a shortcut, I don't feel forced by this shortcut, I feel grateful.

about 2 years ago

Avatar-blank-50x50

angel maldonado, founde ceo at colbenson

You so very right @James, price is important, but not for Zara, it is for most Sites but not in this one.

Price range in Zara is already known for its users. Zara should not have the same Filtering experience than a computer related, toy store or multi-branded catalogue.

Finally, is not about forcing People to behave in a particle way, to the contrary, is about not forcing them to reach results through a laborious process. Cashpoints use to have a way of getting us to the cash with x number of clicks, now there is a shortcut, I don't feel forced by this shortcut, I feel grateful.

about 2 years ago

Borja Santaolalla

Borja Santaolalla, Chief Customer Officer at Colbenson

@James, I get your point, regardless of providing an immersive "free flow" (i'm gonna coin your term now onwards :)) search experience, some sort of filtering should be provided to satisfy all user cases. We're actually also innovating in this field , experimenting with some dynamic filtering right from the search box.

Btw, what's your take on faceting at jcrew.com?

Thanks to all for sharing your thoughts, I think we're gonna see a real breakthrough in the use of site search in ecommerce. Exciting days!

about 2 years ago

Mark Selwyn

Mark Selwyn, eCommerce and Multi-Channel Retail Consultant

Some great comments and some interesting replies.

@borja @angel - http://googleresearch.blogspot.co.uk/2012/08/users-love-simple-and-familiar-designs.html ........... I could pick out various quotes such as "Designs that contradict what users typically expect of a website may hurt users’ first impression and damage their expectations. "

Any thoughts on this as you appear to be swimming against the tide on this one?

about 2 years ago

Avatar-blank-50x50

Simon Persse, Company Director at EasyAsk Europe Limited

I really like the auto suggest feature looks really good, a simple to use, clear visual method of showing product options, certainly will be attractive for many consumers, but zero results searches are not good, its always important to show something relevant even where an exact match might not exist. Search & Navigation is a key capability to drive conversion & delight consumers, but the rapid adoption of mobile commerce makes it more challenging for retailers to deliver a consistent, high quality UX. Since we humans are all different, the search function needs to allow a consumer to search and or navigate a site in their own way & deliver a consistent UX to those who might use both desktop & mobile to access a site.

Navigation facets play an important role in desktop UX, but simply offering price, colour, brand options severely limits the opportunity to engage the customer. Far more effective to deliver dynamic facets which are relevant to either a specific product category or user journey.

TheNorthFace do this really well for example with their ‘jackets’ category presenting all the standard refinement options such as size, colour etc but also presenting options to refine a search by ‘Activity’ (hiking, climbing etc) or what they call ‘Technology’ which is fabric, where they have taken numerical product data and transformed it into something meaningful to help the consumer find what they need. These facets are not hard coded into their data structures, therefore making it easy for the business to create new options as required. The possibilities should not be limited by technology, brands know their customers & should be able to present new, imaginative options to maintain conversion focus.

The key point regarding the whole search topic is that consumers habits are changing fast and traditional search tools often don’t have the flexibility to empower retailers to be able to create new and exciting ways to shop, as well as limiting the ability of a consumer to use more advanced search techniques be that long-tail, conversational or even voice searches via smartphone.

Great piece Christopher, a really interesting topic & I have to confess to a vested interest as TheNorthFace are one of my customers but deliver a great UX so I thought worthy of mention.

about 2 years ago

Avatar-blank-50x50

Deri Jones, CEO at SciVisum Ltd

Let's start with some praise:
Its nice to see some 'radical thinking' technology bolted on to what looks like a mainstream (old school even) WebSphere platform - it's often the 'latest/greatest' platforms that innovate more.

That said: aside from the usability comments already made:

There are some search quirks - typing 'belts' gets a screenful of mostly not belts.

Thinking of James' budget conscious shopper: the search seems to ignore £20 when I entered it, got results above and below that price.

It could become a game - trying out weird search results!

Why does 'underwear' come back with so many shoes?

Why does typing 'me' from 'men' show a screenful of women's clothes, same as typing 'wo' from 'women' does?

<thinks - I must get out more>

about 2 years ago

Borja Santaolalla

Borja Santaolalla, Chief Customer Officer at Colbenson

@James Yes! I'm going to coin your "free flow" search term, I like it ;)

You're right, even though data shows in this particular case faceting is not highly used, the user case should be addressed somehow. We're actually exploring new ways of providing dynamic filtering right from the search box, making typing and filtering as seamless as possible. Stay tuned.

I think a good approach to faceting is the one at jcrew.com. What's your take on it?

Well, thanks for sharing all these ideas James, I think we're gonna see a major breakthrough in site search very soon among leading retailers, the search box is getting bigger and bigger and more visible than ever! :)))

about 2 years ago

Avatar-blank-50x50

Kevin Sparks, Commercial Director at FACT-Finder (UK) Ltd.

Being a search and navigation provider ourselves I find it difficult to digest that leading brands are more focused on the softer metrics or a unique tool rather than clear measurable value such as revenue which is achieved from a good multifunctioning search solution and UX experience. That said, I’m not here to critique another providers solution because there are many elements of the search on Zara I like but I genuinely believe strong UX, error tolerant search, continually dynamic navigation and user generated ranking are a winning formula.

I have to agree that hiding results when search is being used is a brave move and it would interesting to know how this compared to the mainstream approach. The approach you have adopted on Pull & Bear is a lot better.

Good article nonetheless.

about 2 years ago

Avatar-blank-50x50

Damien Acheson, VP Marketing at Klink

@Simon - I checked out The North Face on my droid - very impressed by the search experience, particularly the voice search option. Very cool. It's as if they added a "Siri" to their webstore. Is there an SDK we could take a look at?

about 2 years 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.