Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Principles Of Effective Search In E-Commerce Design

While product findability is a key factor of success in e-commerce, it is predominantly enabled by simple search alone. And while simple search usually doesn’t fulfill complex needs among users, website developers and owners still regard advanced search as just another boring to-do item during development. Owners won’t go so far as to leave it out, because every e-commerce website has some kind of advanced search functionality, but they probably do not believe it brings in much revenue.

On the contrary, well-devised advanced search offers several benefits and can be more than just a clumsy, complicated tool. First of all, effective search can accelerate the sales process. And faster sales can increase conversions, because you will not be losing customers who give up trying to find products. Furthermore, fast, precise and successful searches increase your customers’ trust.

In this article, we will review how to build an interface that offers users the power of advanced search while preserving the clarity of simple search.

Also consider our previous articles:

1. Dismantling Barriers Link

Although almost every e-commerce website has advanced search, visitors do not use it. First of all, people only use tools that they see. Advanced search is usually hard to detect. The link is usually too small and ugly, and so the flashy simple search button nearby overwhelms it. So even if the user was inclined to perform an advanced search, they have no motivation to do it.

The word itself is scary: “advanced.” It suggests we are about to encounter something complicated. And very often, we do. But even if we notice the advanced search link and are not intimidated by it, we don’t use it because we don’t see the benefit. The few who do use it see that once they perform the search, all “advanced-ness” is lost. So, to help our users exploit the power of advanced search, we have to fix usability problems, implement new approaches and improve our search terminology.

2. Approaches Link

There are several ways to enhance search. The classic approach for advanced search is parameter search. The user sets parameters using text boxes, operators and drop-down menus. When usability gurus tell you not to use advanced search4, they are generally referring to this type. It usually has a complicated interface but can be very simple and effective if only the most important fields are shown and you stick to the basic guidelines of form design. parameter search interface5
Momondo6 elegantly and effectively sticks to the most important input fields, making parameter search user-friendly. parameter search interface7
Trulia8‘s parameter search is a bit more complicated but thoughtfully supported by input hints and prompts. Even more options are hidden under the “More search options” link for advanced users.

A good way to avoid intimidating people is to disguise the complexity of the parameter search. Show only snippets of the interface by using the responsive disclosure9/responsive enabling pattern10. When the user sets a parameter, they move along, and then the next filter is shown. This solution can be useful for guiding novice users, but it can bore and irritate advanced users. responsive disclosure pattern11
On MyBankTracker4812, users have to select “Yes” for the “Compare your bank APY” option for the “What is your current APY?” question to be displayed.

Faceted search is becoming the de facto standard for e-commerce website. The user performs a simple search first, but then on the results page, they can narrow the search through a drill-down link (for a single choice) or a checkbox selection (for multiple non-overlapping choices).

This can be faster than the progressive disclosure/enabling pattern and easier to use than plain advanced search. Amazon1513 takes a similar but slightly modified approach: when a user begins a search, they can set some narrowing filters like “Only books” at the very start. filtered search14
Filtering on Amazon1513. filtered search16
The search filtering on Plus+17 is a bit more complex but still easy to use. Again, it is supported by input hints and prompts.

From here Link filtered search18
Kontain19 emphasizes the most important filtering options with different colors. parameter search20 faceted search21
Travelers begin with a parameter search on Cleartrip22 but then find the best deal with faceted search.

Website maintainers may choose to tag products, or even let users tag them themselves. Tagging gives a website an overlapping taxonomy so that users have different ways to reach products. tagging23
After a user performs a keyword search, Issuu24 shows related tags to help the user narrow down the results. Note that the tags that are semantically closer to the search term have brighter colors.

Faceted search is the easiest and now safest method by which developers can offer users advanced search functionality. But how to implement it?

Before undertaking something as time-consuming as that, make sure your website conforms to basic search usability principles. Is the search box in the right place? Does it work as expected?

The structure of the search results page must also be crystal clear. The results must be ranked in a logical order (i.e. for the user, not for you) by relevance. Users should be able to scan and comprehend the results easily. Queries should be easy to refine and resubmit, and the search results page should show the query itself.

Consider basic user needs and behavior when planning search. You could frame it as adopting an “incremental construction” pattern. Let users create their own search, step by step. People may not comprehend the whole system at once, but if you guide them gently, searching will be made easier. Make their exploration of search functionality safe: users should be reassured that they can undo any option and not lose their results or settings. incremental construction pattern25
MyFonts26 allows users to control the complexity of their queries by using the and + buttons to add and remove filters.

Your imagination may be a good start in defining which features deserve facets, but it is far from enough. Examine the traffic from your website and the search terms that users have typed into the simple search interface. Analyzing search query logs helps you handle spelling issues more effectively. Based on your analysis, you can also refine your auto-suggest system27. What words, categories or taxonomy would describe these searches best? Use the most popular words in your search logs to label your facets and options.

Don’t forget to check your competitors’ categories either. Perhaps you would sort your products differently, but you may get good ideas from them. When you have sorted out your facets, test them with real users. Don’t just test the interface during the final phase; let users play with earlier versions as well.

4. Categorizing Products Link

Let users choose from among only the features that might influence their purchase. Omit features that are not important to users, even if you think they are. Features rarely chosen by customers should be put at the end of the list or hidden under a “More options” link. wine categories28
PriceGrabber29 allows users to control the complexity of their queries by using the and + buttons to add and remove filters.

For your facets to work perfectly, you need a good taxonomy (categories). If users don’t understand your system, you lose. Don’t make users have to guess your system. Figure out their mental model of your product range first. The categories in your taxonomy should cover all products without overlap. For example, if a user can filter by color, do not omit colorless items in the results, or items for which color is irrelevant. Avoid vague words like “Other” and “More.” The category hierarchy should be shallow, so that users do not have to drill too deep to find a product.

Although faceted search is much easier to use than the classic advanced search, it can become complex if too many facets are shown. Based on George A. Miller’s research, humans can deal adequately with 7 items, plus or minus 230. This short-term memory constraint also informs the popular recommendation of the number of items to include in a navigation menu. Don’t have more than 10 facets. Any more will confuse users, and the results will be about as helpful as the Dewey Decimal system.

Hide extra facets under a “More filters” link, even if you think they’re all important. Everything cannot be equally important. If you think certain facets will be important for one user group and other facets important for another, then create a drag-and-drop interface, and allow users to close facets. Letting them save results or facet settings is useful, too, but make sure unregistered users can do it as well. closable panels31
Globrix32 has many facets, but the interface can be cleaned up easily by closing unused ones.

Order facets by importance. Most users will use only a few. Display only filter values that apply to the inventory you have available. If a facet has more than seven or eight options, put the extra options under a “More options” link or a different panel. facets33
The Perfume Shop34 gives priority to age and price. Note that it also indicates what is available in a given price range. facets on panels35
Rate My Area36 offers an unconventional combo input box to begin a search, but its role is communicated clearly. After performing a search, the user can access various facets in different panels.

Faceted search is still keyword-driven. If products would be easier to find by referring to categories or if users will have problems identifying their needs, then use filtered search or a well-designed parameter search. Faceted search is cool but not a cure-all. map search37
You do not have to type in your flight destination at Wizz Air38. Simply select it from a map.

Whatever method you choose, you have several means of enhancing search. Do not automatically order the results page of the most frequent queries. Prioritize what you think best matches the search (i.e. the best bets). Add popular queries to the ones you’ve verified, and review the most popular results from time to time. best bets39
Apple40 puts what most users look for front and center. These best bets are supported with pictures.

Cluster results based on your or your users’ tags, or get clustering algorithms to do the job. Clustering groups search results into categories but must be implemented with a powerful algorithm that can compete (or at least cooperate) with human tagging.

flickr clustering41
Tag clusters on Flickr42 group results.

Spell-check is also crucial. Many products have names that are hard to remember or type correctly. Users might think to correct their misspelling when they find poor results, but they will be annoyed at having to do that… or worse, they might think that the website either doesn’t work properly or does not have their product. spell checker43
eBay44 helps users type complicated words.

Auto-suggestions can decrease the problems caused by mistyping or not knowing the proper terminology. Queries usually start with words, so unambiguous character inputting is crucial. autosuggestion45
Get Satisfaction46 offers auto-suggestion that is easily scannable and structured.

If your results are somehow able to be localized in the real world, always show them on a map. results on the map47
MyBankTracker4812 shows its results on Google’s well-known map. The pins are fairly big so that users can see what’s on them, while the transparency maintains visual consistency.

7. Communication And Language Link

The success of your search depends heavily on your users’ understanding of what facets, filters and parameters do. Label them in easily understood language. Think about non-native English speakers as well. Communicate the benefits of advanced search clearly and concisely, and show visitors that advanced search helps them be more effective. Change the terrifying phrase “Advanced search” to something friendlier, like “Better search” or “Smart search.” If your advanced search functionality is integrated in the simple search area, just name the whole tool “Search.” unambiguous labeling49
OfficeMax50 names labels facets in simple and unambiguous language.

8. Grouping And Alignment Link

Group similar items and separate different items clearly. Indicate what is selected or not selected. Use a “Select” button that turns into an “Unselect” button when the user selects something, rather than a “Select all” checkbox (after checking “Select all,” the user might want to check other boxes, in which case the system might not behave consistently). When you arrange items in a facet, think of what would be the most common workflow for using the facet. checkboxes51
Your Web Job52 provides checkboxes for narrowing a search. The page has no search button; when the user finishes typing, the search begins. Although this way of handling search is unconventional, it works because the feature is fast.

Several interface patterns are available to make search more usable. Titled sections can effectively separate facets. Use bigger font for titles, and position them close to the content. Allow panels to be closed and moved. Align labels flush with input fields to make them more scannable, even when they vary in length. If you have a lot of facets or if the filters on the search results page have many options, you can arrange them using card stacks. But beware, information that users manipulate in one card won’t be visible when they manipulate another. They may forget their settings or assume that search results will be based on the last-manipulated facet and that earlier filtering has been undone. closable facets
Comet lets users narrow their searches by clicking on facet links. Users can close and add facets, and the groupings show unambiguously what belongs to which facet. Note that Comet shows the number of items in a category beside each link.

Diagonal balance and a liquid layout make a search interface more usable. If users are able to change the size of the search interface, be aware of what happens to labels and values in drop-down lists when the size is set very small. Beautiful interfaces can fall apart if their behavior is not tested at many screen resolutions. And don’t forget about mobile users, even if you don’t have a mobile version yet.

Buttons play an important role in a search interface. Have as few as possible, but anything that triggers an action should be a button. Do not disguise such functionality with a non-button-like element. Label meaningfully; avoid vague words like “Okay” and “Done.” Make buttons stand out on the page so that users see them when they’ve finished what they’re doing. Place buttons at the end of workflows. Do not put anything that can modify the results of a button-triggered action after the button.

9. Forms And Controls Link

The design of facets is up to you. Text boxes and drop-down lists are usually more than enough, but you might want to use other things that can make forms and controls more usable.

Choose sensible defaults for radio buttons and drop-down lists. Also, illustrations often convey information much better than words. For example, illustrating types of mobile phones is much less clumsier than describing them. Forgiving formats and structured formats help users input useful queries. Forgiving formats give users flexibility in entering data, while structured formats help them enter data more precisely. illustrated choices53
Vodafone54 uses simple yet attractive icons to help users choose quickly.

Input prompts tell users what to do or type in a field, whereas input hints explain to users what they are expected to input in a field. Use them wisely: input prompts can be deleted, and too many input hints will annoy users. Also, the visual clutter might make them simply ignore important information. illustrated choices55
TripAdvisor56 uses input hints, illustrated options and sensible defaults to enhance the usability of its parameter search.

10. Handling Results Link

Use dynamic filtering where possible. Users want immediate results, so don’t disappoint. If dynamic filtering would make your architecture too slow, consider reprogramming the page or narrowing the number of options. It might be worth it.

Show the number of actual results as well as the number of results the user would get if they were to filter by some other options. “List” and “tiled” are the basic views, but alternative views could help users scan results more easily.

11. Conclusion Link

Contrary to widespread belief, advanced search is not an old lumbering monster of the past. If usability is taken into account and key structural and conceptual modifications are made, it can be an effective tool for increasing conversions and helping your users access more products. Of course, not every e-commerce website needs advanced search. You may have too few products or your products may be unique and hard to categorize. Advanced or faceted search is more useful when you have a wide variety of products.

Showcase of Effective Search Interfaces Link faceted search
Topsy implements just one facet, but the visual accents are effective. illustrated choices57
Collabfinder58 helps users with input hints in the parameter search. combined faceted and advanced search59
Firefox60 combines parameter search with faceted search in a complex but easy-to-use interface. check box selection61
Delicious62 allows filtering by tags and auto-suggests during searches. filtered search63
Rofo64 implements a slider and drop-down menu in its filtered search. Users can refine their search results with facets, too. filtered search
Grooveshark filters by tabs. It could have used a drop-down menu, but this solution lets users see all of their options at once. illustrated choices, good defaults65
FanSnap66 uses illustrations and good defaults to handle complex data. Putting the search results on the left is a bit unusual, but good visual highlighting helps users understand the role of each tool. filtered search
A simple yet elegant implementation of filtered search by The Dubai Mall67. colour chooser includes a color-picker panel as part of its filtering options. The visual samples help, because color names have different meanings for different people.

Further Resources Link


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30,_Plus_or_Minus_Two
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73

↑ Back to top Tweet itShare on Facebook

Andras Rung is a Hungarian usability expert who has worked for various institutions and companies since 2002. He is the co-author of the first Hungarian usability book and author of the usability blog Ergomania.

  1. 1

    I really like this Article.
    It’s allways interessting how improve those Interactions.

    • 2

      Maison Parfum

      August 30, 2010 1:37 am

      This a well written article, how can you create your own online store. Wow amazing..

  2. 3

    Ha! I’ll forward this article to the guy who is responsible for our internal portal website (I call it the data grave). I hope he gets some inspiration how a search can look like. Nice article, thanks!

  3. 8

    It is amazing how you always manage to present topic information so well organized and quality-driven. I really enjoyed reading your article and learned crucials on e-commerce and sophisticated methods of THE “search” making one’s life much more better. :)

  4. 9

    Dayne Shuda | HBM

    December 8, 2009 11:24 am

    Very thorough article, Rung.

    The examples really provide visual backing to the arguments you make. I like the tabbed approach. It seems like it could work well for most in e-commerce to provide better results and increased conversions.

  5. 10

    William Stevens

    December 8, 2009 11:40 am

    I have been writing about this very topic on

    It appears that most large ecommerce websites do not seem to care that the search facility does not work or is very poor at displaying the results. If people are searching for a particular product they are on the site with every intent to purchase however due to poor navigation and usability users need to resort to using search.

    Some great examples from Smashing Mag yet again!

  6. 11

    Great article! I wrote about facet-based navigation and why it’s import on our corporate blog here:

    I believe facet-base navigation needs to be used in addition to “advanced search” capabilities due to the SEO benefit.

    • 12

      I read your article. The benefits you describe are really interesting. Thank you.

  7. 13

    Dushyant Arora

    December 9, 2009 12:09 am

    I must say this is an interesting read for UX/UI Pro’s with the live examples they can refer to!!!

  8. 14

    Very Interesting article!! I like these kind of articles. Always designers & developers thinking how to do implement the search architecture. Anyway its a right article at the right time for me.
    Thank you, Andras Rung.

  9. 15

    Really useful article, thank you.

  10. 16

    WO WO WO!!! I found a HOTTEST interracial club__M i x e d C o n e c t *.* _c_0_M___for black Women and white Men, or black Men and white Women, to interact with each other. Interracial is not a problem here, but a great merit to cherish!

    • 17

      Deven CK September 17th, 2011 9:20 am Thank you, its a good gnudeliies to follow for e commerce social site, will surely follow this to spread the e commerce site..

  11. 18

    Adam Hermsdorfer

    December 9, 2009 8:44 am

    Rung, this was a very thought out article. Effective search can make or break the user experience. Do you know if any of the sites listed use any of the same 3rd party internal search engines? Or, are they all custom?

    • 19

      Adam, unfortunately I do not know but I think that they are custom at least partially.

  12. 20

    Thank so much ! That is good solutions . I like it very much

  13. 21

    Visible Ecommerce

    December 11, 2009 9:11 am

    Ecommerce website search functions are so underrated. I’m glad to see a post like this with so much detail. Great work. The images make it so easy to see what others are doing that works or doesnt work. I personally love Amazon’s search, but they do so much right it’s to be expected. I wish more of the smaller ecommerce sites would clean up their search features. Thanks for sharing this valuable information, I’m sure it will be more than welcomed by many.

    • 22

      You are absolutely right. I always use amazon as a starting point when I want to design a new interface.

  14. 23

    Well done.. thanks

    • 24

      I can’t see why the Commission sulohd care about the views of an American company, why players as Google or Microsoft are relevant who only reside in Europe to benefit from Irish tax dumping.

  15. 25

    Thank you for all of your comments and thoughts. I am happy that you like my post.

  16. 26

    Very usable information, I really like the let them build their own as they go. I am a big fan of this type and I will look forward to using it on my e-commerce site.


  17. 27


    March 22, 2010 11:39 am

    great information thanks

  18. 28

    Office Chiar

    April 3, 2010 3:30 pm

    This is nice article superb information.

  19. 29

    Great article on the ins and outs of eCommerce search. Regarding the Advanced Search Interface, these are often a chore for Merchant to do themselves. Often, the more time spent designing an advanced search UI, the deeper it gets and more time is then needed to complete designs and then code and implement the solution. The Daily Telegraph UK Political Database chose to outsource their advanced search to Jemms (UK) and iBlick (Sweden) and the project was delivered against extremely tight deadlines.

    See the most Advanced Database User Interface in media at The Daily Telegraph UK Political Database

  20. 30

    Terri L. Leeson

    June 7, 2010 6:06 pm

    It appears that most large ecommerce websites do not seem to care that the search facility does not work or is very poor at displaying the results. If people are searching for a particular product they are on the site with every intent to purchase however due to poor navigation and usability users need to resort to using search.

  21. 31

    It’s very important for any E-Commerce site to make the search very user friendly. Also, user should be able to reach the product page with few clicks. We did some research on this and customized our site

  22. 32

    Very Interesting article!! I like these kind of articles. Always designers & developers thinking how to do implement the search architecture. Anyway its a right article at the right time for me.

  23. 33

    Very good article indeed! Infact, I wanted a hosted / cloud application which could provide faceted results, with spell check and grouping. Came across this solution – which sounds pretty good.

  24. 34

    Good Night Messages

    April 7, 2011 8:01 am

    I liked the posts and cool layout you have here! I would like to thank you for sharing your experience and the time it took to post!! Two Thumbs up!

  25. 35

    Nice article … we tried and implemented a few things from here on the website

  26. 36

    Hi, my native language is not English, so I have some questions. Am I right with the following summary:

    – a facet has a well chosen name, this name you call a label or taxonomie (for example “Color”);
    – a facet has different options, which is the same as categories (“red”, “blue” etc.);
    – I should have a maximum of 10 facets;
    – Each facet should have a maximum options/categories of 7.

    So to me it looks like every facet is on it’s own, but in the article you also talk about category hierarchy. Can you explain that?

    And what is the differece between faceted and filtered search? Because to me it looks like that because of the facets you are filtering the results? Later on you mention facets, filters and parameters. So I’m a little bit lost here. ..

    Kind regards,



↑ Back to top