Should the 'show more/less' button in facets stay in position

Question

It's good (and common) practice that when you have a show more/less button that it should stay in position. This lets the user see the extra options, examine the content or state and collapse them again without having to move the mouse or finger position.

However, it also seems very common practice that in faceted navigation, these types of controls do not stay in the same position.

There are some arguments for the latter, such as lack of horizontal space, and list continuity of appearance, but it's not that difficult to find a way to implement a more/less button that could stay static.

One consideration might be that if the user scrolls a long set of facets up and down, it might be easier to re-find the more/less option at the end of the list rather than somewhere in the middle.

Show all/hide all is quite different to the case when you have some options and want to show more/less (or fewer!)

I've yet to find a facet that keeps the more/less in place, so facets do seem to be a special case that overrides the best practice of keeping the more/less buttons in the same place.

The examples below show screenshots from Kayak. On the left, the more/less options move. On the right, more/less filters stays static.

Shouldn't the more/less buttons of facets be done in a way that means they stay in position?

Answer 1

The question is whether you shall place the button 1. At the same place. 2. Above the input fields or 3. After those fields.

The solution would be to place the button at a location where the user expects to find the button WHEN (s)he needs to use it.

From my point of view, there are basically two ways to go:

A: Place a toggle above the fields, next to the "Neighborhood"-header.

B: Keep the current position of the "Show more"-button, but place the corresponding "Show less"-button below all the input fields.

As you probably can tell already, you have to do some A/B-testing.

One thing that make thinks a bit complicated is the two-column grid of the input fields, but that's perhaps out of the scope of your question.

Hope this helped you out.