Skip to content
By Ildikó Tuck

Search, sort and filter UX tips

It’s often said that there are two types of internet user: the ‘browser’ and the ‘searcher’. While I’m not a fan of reducing the wonderfully unique human nature of each one of us to these two categories, the usability tests that I have conducted lead me to think that there’s some truth in this statement. Browsing is an application-driven action meaning that we, the development team control the outcome while as searching is a user-driven action, meaning we have no control over what the keyword is.

We’ll just have a search box there… and it’ll do what search boxes do.

With limited budgets and timelines it’s often necessary to reduce the scope of the interaction design effort to the key functionality the new system will offer. This means there usually isn’t enough time to fully scope out the search unless it’s critical to the user journey. This also means that the internet is full of wonderfully crafted sites where you can browse to your heart’s content but as soon as you hit ‘search’ the whole thing turns into a flashback of the web in the ’90s. Basic styling, links and excerpts of the found content and not much else. We do this because we think the taxonomy of the website is so self-explaining that no human in their right mind would ever be using the search anyway. We have categories there, we have a clearly-worded navigation here, there’s no way anyone would ever be lost on our site… right? Maybe not, but we’re forgetting something: searching is something many people do before they even bother reading the category titles. They’re in a hurry and they’re used to searching. That doesn’t make them any less important.

So, what can we do to improve the UX of searching on applications where searching isn’t part of the key user journey?

1) Don’t make it too complicated. Start with the very basics - a searchbox that suggests something as you start typing. Most people will only want that. Please, no category drop-downs, no complicated radio buttons or checkboxes. Keep it simple. That’s what search engines have taught us for the past few decades.

2) If you have more than one type of content, it’s a good idea to offer some separation in the results. Let’s say I search for “apple”… products with apple in their name, people named apple, apple showing up anywhere else on the website. This simple separation makes the whole results page a lot more readable.

3) Allow sorting and filtering of results. This is essentially taking the first point a step forward - let people narrow down the search results after the initial search query. For example, If you’re a clothes retail site and someone searches for "sneakers", it’s a good idea to offer some filters such as “men’s sneakers”, “women’s sneakers”, “sneakers under $50”, “blue sneakers” so on. Just remember one thing - make the filters narrow down the actual content, don’t display categories. There are only a few things more frustrating than clicking on “filters" and having “no results found” appear. Displaying the number of results found immediately after the filter label is a handy addition as well.

4) Don’t make people have to follow complicated instructions on how to use your search. As much as possible, avoid having instructions like “put multiple search strings in quotes to have the system search for them appearing together, use AND/OR in capital letters to combine multiple keywords in a single search, type -keyword to omit those results” so on. If your system requires you to do this, then have an advanced search somewhere and allow access to a graphical interface that does the job without requiring a wall of text that explains all the possibilities. This isn’t to say that you should not support the standard conventions in advanced searching - just that there should be another way of using it without having to read and follow complicated instructions.

5) Be forgiving to mistakes and support plurals of the same word. This is probably standard practice by now, or at least I would hope so but I will mention it regardless, because it’s such a frustrating experience when it’s not in place. If a user types “ctaegories" then it’s okay to have a “Did you mean categories? Here are the results found:” section just below the “No results found for 'ctaegories' " message. Also, if a user types “blueberry” then you will definitely want to include results that have “blueberries” in them as well, at least in simple search mode and allow them to filter the results instead. If you are supporting an advanced search mode: when the settings performed by the user lead to no results, it is similarly a good idea to add a "We've found these in results for the keyword in other categories" section just below the results message.

6) Don't make people have to remember what they searched for. The easiest way to do this of course is to keep the word/sentence in the search box itself after the results have been displayed. But if the query is performed via advanced search, this can get tricky. Offering a simple recap, saying something like "You have searched for blue shoes in the 'All clothes and accessories' section" will help avoid repeated queries for the same keyword, in the same sub-category. This is especially important when no, or very few results appear. The first instinct of most of us would be "oh, I must have made a typo", instead of "let me double check those settings to make sure I haven't ruled out the categories where this search query makes sense".

No matter how well thought-out and logical your application’s information architecture seems, I strongly recommend keeping these above tips in mind when designing and building your product. Paying a bit more attention to the search path as a possible user journey goes a long way in keeping the “searcher” type of your users happy.

Latest Articles by Our Team

Our expert team of designers and developers love what the do and enjoy sharing their knowledge with the world.

We Hire Only the Best

reinteractive is Australia’s largest dedicated Ruby on Rails development company. We don’t cut corners and we know what we are doing.

We are an organisation made up of amazing individuals and we take pride in our team. We are 100% remote work enabling us to choose the best talent no matter which part of the country they live in. reinteractive is dedicated to making it a great place for any developer to work.

Free Community Workshops

We created the Ruby on Rails InstallFest and Ruby on Rails Development Hub to help introduce new people to software development and to help existing developers hone their skills. These workshops provide invaluable mentorship to train developers, addressing key skills shortages in the industry. Software development is a great career choice for all ages and these events help you get started and skilled up.

  • Webinars

    Webinars

    Webinars are our online portal for tips, tricks and lessons learned in everything we do. Make the most of this free resource to help you become a better developer.

    Learn more about webinars

  • Installfest

    Installfest

    The Ruby on Rails Installfest includes a full setup of your development environment and step-by-step instructions on how to build your first app hosted on Heroku. Over 1,800 attendees to date and counting.

    Learn more about Installfest

  • Development Hub

    Development Hub

    The Ruby on Rails Development Hub is a monthly event where you will get the chance to spend time with our team and others in the community to improve and hone your Ruby on Rails skills.

    Learn more about Development Hub

Get the “reinteractive Review” Monthly Email