8

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:

What are your priorities? (cheap) (close) (comfortable)

Live example on CodePen

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

|improve this question
  • Do you have a mock up of your idea so far? – Mike M Jul 17 '17 at 10:52
  • see link in updated question – JulienFr Jul 21 '17 at 15:07
  • looks good to me - simple and clear :) – cheersphilip Jul 27 '17 at 12:09
  • Cheap and close I get, what makes a hotel "comfortable" or otherwise? – DarrylGodden Jul 27 '17 at 21:41
  • @JulienFr what is it you are trying to achieve? Do you want to highlight the option i.e is selected? – NB4 Jul 28 '17 at 6:35

11 Answers 11

1
+100

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:

enter image description here

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.

enter image description here

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.

enter image description here

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.

enter image description here

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!

|improve this answer
7

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.

enter image description here

|improve this answer
  • 3
    I don't think OP wants just a selection of aspects, but different weightings. – PixelSnader Jul 17 '17 at 16:21
  • @PixelSnader different weighting is present on this example since the user gives different weights depending if it gives a single or a double tap – Joao Carvalho Jul 27 '17 at 10:22
  • 2
    @JoaoCarvalho The bubbles, yes. They're basically round versions of what OP is already doing/wanting to do with his buttons. But "something like toggles or a checklist" doesn't give weights. – PixelSnader Jul 28 '17 at 0:47
6

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.

|improve this answer
  • VERY good point on user anxiety. – JulienFr Jul 18 '17 at 9:28
  • Dropdowns are a good default, I agree, but it won't let you customize multiple things. OP is explicitly asking for a multiple prioritizations. We also don't know the target audience - someone working at a travel agency will prefer depth/customization over simple learning curve due to how often they use it. – PixelSnader Jul 22 '17 at 9:35
  • Yes, I didn't realize buttons had more than 2 states (big or small). That was clarified by his edit. I would maintain that expedience still serves most experts best. For those users who care to compare, you might include a little radar chart or bar graph with each search result, so they can quickly scan down the list for the shape they want. If the user has a serious, demonstrable need to have such finely-tuned control over his search parameters, I would agree then with your own answer (dualing sliders). – Nathan Christie Jul 22 '17 at 15:05
5

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

|improve this answer
  • 1
    I think you'll find that casual users looking for travel solutions will be immediately overwhelmed by this level of customization, especially since search weight is a lot less tangible than cash (which is already pretty abstract). The process of booking travel is complicated enough to begin with -- adding additional complexity is all but guaranteed to increase fatigue and reduce success. The Humble solution works (?) for a very specific audience (mid-to-hardcore indie gamers); it probably should not be thought of as a general-use pattern. – Nathan Christie Jul 17 '17 at 19:24
  • link is there : humblebundle.com/telltale-bundle-2017#contribute – JulienFr Jul 21 '17 at 15:04
3

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.

|improve this answer
  • Good input, but what if some people, for example, does not care at all for price, and some other have a little preference for other things, but still care for price ? – JulienFr Jul 21 '17 at 19:59
  • That's exactly where the weighting option of 1, 2, and 3 come in to play. 1 = Price 2 = Rating 3 = Location If one user relies on Price over Location, they would put Price at the top. If they don't care about price they could put it last. – Joshua Garity Jul 24 '17 at 18:24
3

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.

|improve this answer
  • RAW CRITIQUE: Absolute focus on commercialism isn't the objective of UX – Confused Jul 31 '17 at 9:59
  • @Confused yes and no. Its hard to argue untill we know the objective of OP :) – ADOConnection Jul 31 '17 at 14:53
  • "I would like to present a user multiple aspect to prioritize", don't confuse yourself with the rest of the question, focus in on this, I'd suppose. – Confused Aug 1 '17 at 10:35
1

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.

|improve this answer
0

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.

|improve this answer
  • I agree with your questions here. The labels Comfortable and Cheap may be mutually exclusive. What would cheap and comfortable lodging mean? It seems to me that means it would be far away. However, i had to do a lot of thinking to come to terms with that idea. Also consider the labels being used for the buttons. – mrmac Jul 31 '17 at 17:20
0

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

|improve this answer
0

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.

|improve this answer
  • OP's example interface isn't about just selecting one of the three options. It lets you click each button multiple times to prioritize that button even more. For example, you can click one button three times, another button once, and leave the last one alone. So "What are your priorities?" makes sense for that interface. – Rory O'Kane Aug 1 '17 at 15:02
0

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.

Search Priority

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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