{"id":21,"date":"2017-01-06T11:01:24","date_gmt":"2017-01-06T11:01:24","guid":{"rendered":"http:\/\/www.zombiesoftwares.com\/blog\/?p=21"},"modified":"2017-01-13T14:26:16","modified_gmt":"2017-01-13T14:26:16","slug":"deep-drive-into-zaras-unique-on-site-search","status":"publish","type":"post","link":"http:\/\/www.zombiesoftwares.com\/blog\/deep-drive-into-zaras-unique-on-site-search\/","title":{"rendered":"Deep Drive into Zara\u2019s unique on-site search"},"content":{"rendered":"

Zara is a Spanish fashion retailer with more than 2,000 stores worldwide, 66 of which are based in the UK.\u00a0<\/strong><\/p>\n

Zara\u2019s website also has one of the most idiosyncratic search tool<\/a>s I\u2019ve ever come across on an ecommerce site.<\/p>\n

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

Search box design<\/h3>\n

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.<\/em><\/p>\n

First of all, yes it\u2019s positioned away from any other text, and it occupies a space all of its own in the whiteness of the Zara homepage header.<\/p>\n

\"\"<\/p>\n

It also remains exactly where it is whether on search results pages or product pages.<\/p>\n

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

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.<\/p>\n

\"\"<\/p>\n

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.<\/p>\n

This is the least convenient feature of the search tool and leaves an unpleasant blankness on the page, as if something\u2019s gone wrong with the site. However there is a reason for this, as we\u2019ll see next.<\/p>\n

Auto-suggest<\/h3>\n

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.<\/em><\/p>\n

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.<\/p>\n

Text suggestions:<\/strong><\/p>\n

\"\"<\/p>\n

Image link suggestions:<\/strong><\/p>\n

\"\"<\/p>\n

The above images change dynamically on the page as you continue typing.<\/p>\n

The search tool also forgives even the most bizarre of wilful misspellings.<\/p>\n

\"\"<\/p>\n

There is a purposefully minimalist design here, possibly to the detriment of usability, after all I\u2019m offered no product information along with the images.<\/p>\n

However Zara has hidden the description and price within the result, you just have to hover your mouse over the image.<\/p>\n

\"\"<\/p>\n

Mobile-friendly design<\/h3>\n

The search box should adapt to work on any mobile device and screen size, and remain easily accessible throughout the journey.<\/em><\/p>\n

The desktop site isn\u2019t optimised for mobile, instead Zara operates a separate mobile site.<\/p>\n

Unfortunately the search tool is hidden behind the hamburger menu throughout the entire mobile site.<\/p>\n

\"\"<\/p>\n

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.<\/p>\n

Zara\u2019s mobile search tool is poor, with no automatic suggestions and poor sorting and filtering options.<\/p>\n

\"\"<\/p>\n

Effective synonym\/stem management<\/h3>\n

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).<\/em><\/p>\n

Zara\u2019s site has no problem handling plurals and it serves the same results for any synonym I tried.<\/p>\n

Presentation of search results<\/h3>\n

The total number of results are shown along with the search term and product images.<\/em><\/p>\n

The search term remains because essentially we haven\u2019t navigated away from this search-box\/product-page hybrid. The confusion comes from the number of products listed and the amount of images shown.<\/p>\n

\"\"<\/p>\n

There certainly aren\u2019t 173 products shown, neither is there any indication that more can be found by clicking through further pages. In fact there aren\u2019t any further pages of results.<\/p>\n

When you click on products with smaller amounts \u2013 Denim (10) \u2013 I\u2019m definitely served the correct number.<\/p>\n

\"\"<\/p>\n

So when I click on \u2018Trousers\u2019 above to reveal just 24 results, where are the remaining 141 products?<\/p>\n

The answer is below\u2026<\/p>\n

Filter search results<\/h3>\n

Search results can be sorted and filtered by category, product, price etc.<\/em><\/p>\n

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\u2019s no ability to filter by colour, price, size, availability.<\/p>\n

There is also no ability to sort the results on the page by the typical ranking orders of bestseller, alphabetical, relevance or price.<\/p>\n

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.<\/p>\n

\"\"<\/p>\n

If you choose the four items per page symbol, you\u2019re then treated to an infinitely scrolling page where you can see every single one of the 173 pairs of women\u2019s trousers available.<\/p>\n

There is absolute no indication that this is the case, and I stumbled upon this quite by accident.<\/p>\n

Search effectiveness<\/h3>\n

Although I definitely appreciate the uniqueness of Zara\u2019s search tool, it\u2019s just not user friendly enough.<\/p>\n

I\u2019m prepared to say that the sacrifice of a page\u2019s 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\u2019s onsite search needs a serious rethink.<\/p>\n

 <\/p>\n

<\/div>\n
“<\/b>For a free consultation<\/em> with a member of our team call us now on +971-544177921\u00a0 or\u00a0 send query via this link<\/a> \/ email<\/a> . \u201c<\/div>\n","protected":false},"excerpt":{"rendered":"

Zara is a Spanish fashion retailer with more than 2,000 stores worldwide, 66 of which are based in the UK.\u00a0 …<\/span><\/p>\n","protected":false},"author":1,"featured_media":474,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[24],"tags":[68,51,48,62],"class_list":["post-21","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-site-search","tag-autocomplete","tag-conversion","tag-customer-experience","tag-site-search"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.zombiesoftwares.com\/blog\/wp-content\/uploads\/2017\/01\/zara_site_search.png?fit=450%2C450","jetpack_shortlink":"https:\/\/wp.me\/p8i7fD-l","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":7,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"predecessor-version":[{"id":729,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/posts\/21\/revisions\/729"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/media\/474"}],"wp:attachment":[{"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.zombiesoftwares.com\/blog\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}