1

I'm working on a website that uses a search bar to allow users to find training courses. There are mainly 3 types of courses in the database, and only one of these types can be booked online.

At the minute we are searching through all the different types at the same time and bringing back a mixed result set of course types with no options to filter the results. Each result is "labelled" with the type that it is.

The client says that the feedback they're getting is that users are finding it difficult to find courses that can be booked online.

I'm thinking of adding a checkbox next to the search bar with a label "Bookable Online Only", that is set to on by default - but something's telling me this isn't the best solution, and also that I don't think it will make as much sense to the user as it does to me and the developers building it.

I basically need to add something that says "Only show me courses that can be booked through the website"

Another idea I have had is to add "filters" to the results set and allow users the ability to reduce the result set based on their options.

So I'm wondering if anyone can share there opinion on this - and maybe come up with another idea that will work better from a User Experience point of view.

[UPDATE]

After finding out that there will be the possibility of more options for filtering, the idea of having a checkbox is out of the question - and as explained by 0NLY777 and Mattynabib probably not the best idea in this situation anyway.

Anton Mircea's suggestion of taking a similar approach to Amazon is the route I have decided to take. At least for the initial search, and it's going to look a little bit like this...

Search bar with dropdown closed

Search bar with dropdown open

I'll then be adding clear labels to the result list on whether a course is bookable online or not. As well as adding a sidebar with filter options on the results page.

Improve this question

6 Answers 6

Reset to default
0

I see two ways of approaching this.

  1. Use a filter in the search bar. Same principle as amazon is using in their search bar.

Filter for search

Filter triggerd enter image description here

  1. Use a grouping system within the results, i.e., show the results in 3 different hierarchical lists, with the one that has the most importance at the top.

enter image description here

Hope this helps.

Improve this answer
1
  • 1
    I like this idea and after finding out that there will be a few other options to filter results by, I think this makes more sense as apposed to having a single checkbox.
    – Neil Carpenter
    Commented Feb 18, 2019 at 12:26
1

To have a filter from the outset that is switched on may not be the best approach as you will alienate other users who may not want that. I would always allow a full search based on keywords and then allow the user to filter the list based on that result set. That would allow the the user to switch between all courses and just the online ones at the click of a button without having to perform another search.

To also have the 'online only' ones have some sort of indicator or perhaps display them in a different colour to highlight them probably wouldn't hurt either.

Improve this answer
2
  • That's a good point about have an option set by default - Full search on all courses by a phrase initially and then options to reduce the courses to only courses that can be book online. There are already labels on each result in the result set but the UI could be better to make the online bookable courses more distinct. Thanks for your insight
    – Neil Carpenter
    Commented Feb 14, 2019 at 14:42
  • ABSOLUTELY do not have a filter option set by default that limits the full set of results unless you are certain that is the core goal for most of your user. Also don't arbitrarily restrict what they can filter on - this sort of results "scoping" can really confuse people and frustrate them (I have first hand experience with this on both sides of the UI). Use the full keyword filtering, as mentioned above, and visually distinguish the online only ones.
    – Mattynabib
    Commented Feb 14, 2019 at 17:09
0

I would recomend a way simular to how StackExchange manages searches. Allow users to search but limit the search to only Show courses that are available to book online.

Edited Photo of StackExchange Search

You could even add to this by providing numbers besides the filters with the amount of results / filter, show additional buttons within the search results to prompt the user to view courses bookable via other methods etc.

Improve this answer
1
  • 1
    I assume those options would only be visible once the initial search has happened, and then used to filter the results? I think this is a similar approach to what 0NLY777 describes and probably the way forward
    – Neil Carpenter
    Commented Feb 14, 2019 at 14:39
0

I mostly agreee with 0NLY777, as you can see from my comment above.

However if you know that the primary way in which people want to filter that list is between bookable-online courses and everything else, then using a check box to immediately filter out everything else is not a bad idea; I've used it myself in some complex situations and people respond well to it (at least in my deeply technical enterprise domain with UIs for networking folks).

As noted above, however, you probably don't want that box checked by default unless you are certain that it is the primary goal of your users when searching. And make sure that it is very clear, well labeled, and designed to be prominent enough that there's no ambiguity as to when people are seeing ONLY those results.

Improve this answer
0

I recently designed a search bar that included additional options into it. Search bar with filter

This allowed most users to just use the search function as they were used to. But those who wanted to ass additional options to use the filter. We did user testing with this and this was the preferred solution over separate search and filters.

We did filters but for your case renaming filters to "additional options" or something similar might work. You can put a lot of options into that dropdown bar.

This is what it looks like with the filter option open:

Filter open

In this case it was for a user overview page, this allowed several filters to be added while still keeping the "searching a name" as the main base functionality

Improve this answer
2
  • 1
    Is there a separate 'search' button they can use too, perhaps outside of the search field? I know that 'Enter' usually triggers search, but that Filter option is in the same position as many 'go' buttons are for search fields, so I'd expect people click it in error when they're just trying to launch the search. Did you see that happening in testing?
    – JonW ♦
    Commented Feb 15, 2019 at 10:32
  • 1
    There is an auto fill in when you start typing a name. We originally had a button there. But users either just clicked the name they needed after typing only a part of the name or hit enter.
    – Azarko
    Commented Feb 18, 2019 at 12:04
0

First of all, welcome to stackexchange. As far as your question is concerned, my suggestion is to add a switch button labeled "buy online" before the search bar, and this button will be by default enabled.

In this way while any user searching a book will only shows the book which are available to buy, and we can drop the idea of prompt filter select box or so.

Also user and the client will be equally satisfied, as its already enabled it doesn't make much chaos in the whole UI experience.

In any case user wants to check whole books, one can normally switch off the "buy online" button.

A rough idea:

enter image description here

I hope this will help you.

Many Thanks, Srija Nair

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.