0

This question already has an answer here:

I am working on the Hotel Search App (33hotels.com), where I let the user filter Hotels by facilities.

Most filters are "AND-filters" but some have to be "OR". For instance, someone may want "wifi" and someone specifically "wired internet". But if I click on both, I am most likely looking at one of those options (the "OR-filter"). Another example is "ocean view" and "mountain view" - I am more likely to look for one of those options than both at the same time.

My question is - how present these "OR-filters" inside "AND-filter categories" in the UI as clear as possible, without confusing the user? Or should they be avoided? Or hidden?

Here is a screenshot of how it is currently done:

enter image description here

My worry is that the small "OR" between the buttons can be easily missed or misunderstood.

Many thanks!

marked as duplicate by Vitaly Mijiritsky, Benny Skogberg, greenforest, Matt Obee, Graham Herrli Aug 18 '14 at 14:09

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • @VitalyMijiritsky Thanks, it looks similar, but unfortunately, the answers there are not very useful, 3 years old, with missing or broken links. For instance, the top answer just gives Apple Itunes as example, which is (a) confusing, (b) meanwhile hidden by Apple (they must have realised how confusing it was) - see the comments there. The next voted answer mentions 2 scientific papers with generic titles and no links (!). The following answer suggests list of 4 items "for inspiration", 2 are not links, the last link is broken, and the only working one is Yahoo, which solves different problem. – Dmitri Zaitsev Aug 17 '14 at 12:42
4

(consider this more user feedback than UX professional feedback)

The and and or filters are too complicated. Use and only. The user is smart enough to know that city and mountain and sea view will have few to no results. This simplifies the design (Look at View and Internet, my paint skills are limited): Painted

It works out very well with Internet since you can choose Free Internet, Free WiFi Internet, (Charged) Wired Internet and so on. I would further consider dropping Free since Charged Internet is the same as Free Internet with a slightly higher room price. If you are concerned that there will be no results for a lot of options consider adding a weight to missed requirements instead of dismissing the result and displaying the buttons in red in the results list that were missed for that room.

The blue buttons stand out too much whereas the gray on gray buttons are almost invisible. It feels counter intuitive since I want to look through the options that are not checked (assuming everything is unchecked in the beginning) and already read the checked options, yet the checked options are highlighted and the unchecked options blend in. It would be better if the checked options blend in and the unchecked options stood out. When I started my GUI I also made those blue buttons with gradients in them. I was very proud of myself except nobody liked them. Consider dropping them for more standard looking buttons.

It would be useful to get a visual clue when you click on a button, say Courtyard, that the Courtyard-button moves to the left into the little box and jumps back when you uncheck it. Likewise you should be able to remove options by clicking them on the left. Food ordering websites sometimes have that feature where clicking on a menu (the eating kind) will move it to the bill on the side. Do no waste time on making a pixel perfect movement of the button with a transition/acceleration function, some shadow moving quickly(!) to the side is enough for the user to get it.

Maybe a general advice for a site/app like this: Do not design it for people on holidays who are relaxed and now play with your app to find a hotel. People already are annoyed before they use your app/site because they failed to find what they wanted on google. They do not want to see a complicated filter with and and or, they click Ocean Italy Cheap GO! and decent results must appear fast. Only after they see that they quickly find what they search for are they willing to be a bit more specific and deal with filter logic.

  • +1 (would give more if I had :) Really helpful feedback! Your painting skills are impressive - did you use something like photoshop? Great point about Internet! However, I don't quite understand the reason to blend the user's selection. Those are fields the user care about, and as user, don't I want to see my selection very clearly at all times? About "jumping buttons" - not quite sure I get the point - any specific site using it? – Dmitri Zaitsev Aug 17 '14 at 14:42
  • Displaying missed buttons in red - I did exactly that :) but a user confused these absent preferences for present. Here were the responses discouraging doing that: graphicdesign.stackexchange.com/questions/36599/… – Dmitri Zaitsev Aug 17 '14 at 14:42
  • @DmitriZaitsev I just used mspaint. About the "jumping buttons" see this site as an example. Just click some food and watch it move to the cart. Blending the users selection was not what I wanted to say. You already see the selection on the left so in the middle the unchecked buttons could maybe be light blue, something other than gray to stick out more. The selection does not need to blend in. Making the unavailable red button with a strike-through font could work. – nwp Aug 20 '14 at 19:15
  • Unfortunately the link does not load properly - the stylesheets are missing :( – Dmitri Zaitsev Aug 21 '14 at 9:42
  • @DmitriZaitsev Guess it is a bug in the site, it loads correctly when entering through the main site. You can use 12347 as the post code. – nwp Aug 21 '14 at 10:26

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