I have a filter and sort feature on a particular website, and the current layout is as follows:

Current style

Of course, I want to reduce elements to as few as possible, so my question is should a layout like this replace the 'Filter' and 'Sort' buttons with the 'Filter by' and 'Sort by' titles, styling them like buttons? My concern is that users will not know that they are clickable. Users for this application range anywhere from highly-technical, extremely well-versed users to very low-tech users.

This page filters and sorts several hundred items (currently 497) by the various fields provided, and displays changes live as you type/change values, which means the buttons should almost never need to be clicked.

The alternative layout I'm considering is:

Proposed layout

Assuming the 'live' changes don't work, and users are forced to click the 'Filter' or 'Sort' actions, would this confuse them? Am I better off with the current layout.

The idea is to reduce clutter when on smaller browsers, as the filter and sort bars simply shrink to fill available space. Less buttons/sections means more visibility on the parts that are available.

  • I think it is confusing. I would suggest you to use only a single button to perform the action. This button could be at the bottom or in the right of your layout with the common "search" text with the "magnify" icon. – digulino Apr 3 '17 at 17:57
  • If you're displaying your results as a table with columns, the sort functions can be assigned to the header cells. Click a header to sort by that column. Click again to sort in the opposite order. You've seen this pattern all over the place, I'm sure. – Ken Mohnkern Apr 3 '17 at 18:36
  • @KenMohnkern The results are a grid, not a table. Each element has some information in it, not a lot, but the 'box' for each element in the grid is clickable to navigate to a page that is more detailed on the element itself. – 410_Gone Apr 3 '17 at 18:45

I would never understand that the [Filter by] and [Sort by] elements are clickable if you did not write it. It is not a good approach.

However, even at the end they are a little bit confusing to me. What I would do would be using the top pattern but changing it a little bit, so that the button is separated from the row of fields:

enter image description here

  • 1
    Agreed. Make the buttons look like buttons. – Ken Mohnkern Apr 3 '17 at 18:34

Of the two options, the first makes more sense logically - it forms a clear flow from left to right (input -> input -> action).

In the second option, the user has to traverse to the right, then back again to the left to click the button and perform the action. (input -> input <- action). While you're correct in saying that this requires fewer elements, this comes at a higher interaction cost - the user must make more mouse movements and retrace their steps.

An issue with both options is that the labels (e.g. 'Filter by') look interactive (they look like secondary actions), when in fact they aren't. I would stick to a simple text only label for these fields, which could prevent some unnecessary clicks.

Finally, you could try condensing the sorting options into a single dropdown element, which could contain all the permutations you require. This would help save on space. For example:

Sort by... - name (A-Z) - name (Z-A) - other field 1 (low-high) - other field 1 (high-low)

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.