Interface to prioritize multiple criteria of results when searching

Question

I would like to present a user multiple aspects to prioritize, e.g. do you want a hotel room to be close to your location, cheap, comfortable, ….

I’m thinking about making three buttons, [Close][Cheap][Comfortable]. When you click on one button, it means that it’s important to you, and the button grows bigger and the others get smaller, showing that you have to make a trade-off and choose to prioritize one or two aspects. I did a proof of concept in CodePen:

Live example on CodePen

What do you think of this design? Are there good alternatives?

Answer 1

When designing filters or options, for results or data always one thing comes to my mind is it has to support even if some more features added or removed later on. It must not hurt the design i am going for.

I will like to share my experience and views on same as below:

1. Following Your Design

Your design has nothing wrong, but could be more attractive, if you do not make it grow and do instead something else. You could always have colors to make things stand out from others.

You could fill the selected button or option by filling it with color or can say adding background color to it based on your theme. Something like this:

Why?

• It helps user to understand what they are having as results along with that not disturbing their eyes with growing up button, which may take their huge attention. Also if the results are not going to be same screen, you can make the selected button color brighter and more attention seeker.
• Above point was present, let's talk about future. If thinking from development point of view, if later you are enabling to have two buttons to be selected at same time. Growing two buttons is again less acceptable than having it colored.

2. Not Following Your Design

There are many options, and this answer could get more long than anyone can think of. So sticking to your point and requirement let's see below two examples:

Google Images: When search for Hotel Rooms, like any other image search results it has many filters or options to show and let you select, but they let you select also multiple. Which even if you have in your case, it would work.

Link Here to above View

You can select those filter buttons to get what you want. What happens after selecting is important and is not bad.

Link Here to above View

Using colors what they did is something opposite, made the selection more simple. But it still stands out among other colorful buttons.

Airbnb Website

If you go through Airbnb Website they have more options and filters but at some point they are using colors or had to use colors to make it happen.

Check "Home" being highlighted also "Room Type" being highlighted.

Conclusion:

Summing up with showing too many images, is that the best option would be using colors in your case too and if you even change your design it remains same. I am not asking you to copy these designs, but to understand the meaning of doing it and the reason behind it.

I hope my answer helps you in any possible way. Cheers!

---

Answer 2

Apple uses something like you're describing when you first sign up for Apple Music. You can click once to like and twice to love. The bubbles grow based on your clicks.

This is a nice thing for something you're going to do once. It works because music is something personal and emotional. I don't think it will work for search aspects. It will be annoying to build your button/bubble system for every search task.

Keep it simple. Use something like toggle switches or a checklist.

Keep in mind that users also use other websites where they can search. Search in an important feature in website navigation so you want to make it look familiar to what users know from other experiences.

Answer 3

The tried-and-true solution to this and similar problems is a dropdown with sell-the-benefits wording like "closest", "best value", or "top rated."

The dropdown is a good solution because it emphasizes the benefits of the current search, rather than the drawbacks.

It's also good because it requires two touches to use. This may seem counterintuitive, but it has a purpose. When you can re-run a search with a single touch, you can expect a lot of users to do so -- accidentally and on purpose. This is a high-overhead request which sends the user backwards within the context of his scenario. If repeated several times, actually serves to undermine user confidence and increase decision-making anxiety. So the two-touch input means it will primarily be used by those who are fairly confident in their priorities, and/or know that their original search did not contain what they were looking for.

Answer 4

You could use weighted sliders. The Humble Indie Bundle does this; it lets you divvy up your paid price in different amounts/percentages.

Answer 5

Having a multi-click or slider option for this would be overwhelming for most users. Think about the users that utilize the client site. What are their demographics? You need to speak their language and work within their expectations first and foremost. Don't try to get fancy.

Simple solution: Have three options they can prioritize by drag and drop sorting vertically with clear labeling (1. ---- 2. ---- 3. ---- ) to set the experience up front. A brief label "Prioritize your needs".

Then you're all set.

Answer 6

There is only one key thing that matters: conversion rate. Especially for hotel booking.

It will sound strange, but better UX may lead to lower conversion rate somehow. Say you did a great job, everything works well, but conversion rate became lower. This is a fact that you may face a month later.

What will you do if conversion became lower? Right. You rollback to previous UI.

---

1. Only A/B test may show ACTUAL outcome of your design change. There is no other way to get validated knowledge. Thats why it is wrong to ask this question here. No matter what replies do you get or what UX you will come up with.

---

2. Clients do change over time. If your A/B test fails today it does not mean your UX is bad. It mean it is not suitable right now for this particular set of clients. It may become more suitable over time. Only regular A/B tests, over and over again will show you the truth.

---

Raw critics:

I see a major drawback in "Cheap" and "Comfortable" terms: boundaries of what is cheap and comfortable is different for different people depending of their wealth.

If I usually stay at 3 star hotels, then 4 stars hotels are comfortable for me and probably expensive.

If I usually stay at 5 star hotels, then 4 stars hotels are NOT comfortable for me, and probably cheap.

So, you may show this type of filters only for existing customers, and range what is cheap / comfortable based on their previous bookings.

Im not sure about weights. I have no idea how 1/3 comfortable and 2/3 close hotel would look like.

Answer 7

This is a good question.

I've been thinking about it for a bit... and have an idea, imagine:

On the right, a pool of keywords the user can choose from as filters. On the left, a scale of significance, from 0 to 10. The user can drag keywords across, from right to left, and place them anywhere on this scale-of-significance to adjust the filtering balance.

This way they can see and understand their balancing quotients, and click "Filter/Activate" once they're done setting this up, or it can live update if you've got enough processing power and suitably skilled/familiar users.

Keywords they don't want to have included, they can drag below the 0 point, to have those excluded from the search, if you want this kind of feature.

Answer 8

I agree with the others above that mention that the wording of these categories may need some altering.

In theory, I would assume that "comfortable" are the more expensive hotels, making it unnecessary to list both "comfortable" and "cheap" as options since they are actually opposites..

As far as being "close" or not, I would assume someone is searching for a hotel room because they are staying in a certain location and need a hotel that's nearby.

I don't mean to rip apart your question, maybe I'm just not clear on what exactly you're asking.

Answer 9

Adding to the other answers, I think you should let them provide more detail (price between _ and _, rating between _ and _, distance between _ and _, etc.)

Answer 10

The wording of the question and the intended behaviour/action you want from the user seems to be a bit contradictory.

My first impression is that "What are your priorities?" would be asking them to rank which of the three are first, second and third most important, whereas "What is your priority?" would be asking them to pick only one out of the three so you need to rephrase the question to start with.

If you only wanted the user to select one from the three options, I am curious as to why you didn't simply go with a radio button group pattern that would be most familiar with users. Even if you wanted to keep the design to the style of buttons, you can still go with a button selection group and simply highlight the button that is selected.

If you wanted the user to rank the selections, I would probably look at ordering from top to bottom rather than left to right to show priorities (and maybe provide labels) as per Josh Garity's answer.

Alternatively, if as you suggested it is about making clear to users that there are trade-offs, I would provide three sliders that show a range between not important to very important and allow the user to drag the slider and provide a value for each of the three values similar to PixelSnader's solution.

And I would definitely test with the users to make sure they understand how it works. So basically if you take a bit of everyone's advice here you should be able to come up with the optimal solution.

Answer 11

My idea would be to add parameters to the search and give them a weighting by moving them up and down.

I've displayed three, it could be limited to two, to match your high, very high, off status in your post.

Also a list to add or remove parameters to the list. The beauty of this, like tags, is that the list can be populated from the parameters stored with the hotel listing, so should real-world reflect what people want v's what is stored against the hotel.