2

I had to create the same thing twice in two different companies. A web page that is displaying some data (tabular or chart) and it needs to be filtered.

The filters are an important part of the page and this is why I place them on top of the page but it consumes allot of space since I have to place some filter title, filter description etc.

What would be a nice place/way to insert my filters without consuming allot of space but be visible and easy accessible?

--update--

The filters I usually use are:

  • Date from
  • Date until
  • a dropdown list with the status (enabled - deleted- disabled)
  • Country, city etc

And because a picture is a thousand words enter image description here

Improve this question
3
  • We need more specific information to be of any assistance I think. What kind of filters? How many? Are the text fields or drop-down menus or ... ?
    – Drew Beck
    Commented Apr 13, 2014 at 8:48
  • Also: look up "faceted search" (either here on ux.se or just google it) for examples of how some people use complex filters on search results. Is this the kind of thing you're looking for?
    – Drew Beck
    Commented Apr 13, 2014 at 8:50
  • Do you have a filter on every column or you have a filter that contains a drop down
    – Prasanna Aarthi
    Commented Apr 14, 2014 at 5:13

2 Answers 2

Reset to default
1

I also design many sorting, filtering, enlisting interactions for work. I believe that if your system / code / technicalities can handle it, instant filtering is the best option for lists that are not very very long. It is essential to see the criteria and fiddle with them at all times. Having a Filterind menu on the left usually is the best solution I went for. That is not very practical for sorting. sorting is better through the headline of each column. If the filtering is not a crucial function, I see that it is in here, then a tooltip is enough. It is important to give the user the feedback of how many results have returned, and how many you are seeing through filtering. If I were you, I would definitely try the left filtering menu.

Improve this answer
2
  • Thank you for your answer. I like the idea of placing the filters at the left part of the page, as I see now allot of sites are doing the same thing.
    – Menelaos Vergis
    Commented Apr 15, 2014 at 7:27
  • What layout should I choose to implement? Use some space from the grid to show the filters or show the filters at the most left part of the page? What should I do if the page width shrinks less than 500px? Collapse the filter and show it after a button click or send it to bottom?
    – Menelaos Vergis
    Commented Apr 15, 2014 at 7:30
1

It seems that your filter fields are unnecessarily wide. If you make them much smaller in width, you can easily fit the three inputs into one row (though you might need to move the label to be above each field), and you will save a large amount of space. If you look at modern dashboard designs, you will see this is usually how they are done.

See here as one example: http://dribbble.com/shots/461575-Home-Statistics-Dashboard/attachments/29305

Improve this answer
2
  • So do you propose that I drop the 'Order Filters' header and place all filters in one row? If so then will it be clear that these are filters and they will affect the following data?
    – Menelaos Vergis
    Commented Apr 14, 2014 at 9:30
  • You could keep the header if filtering is hugely important. In most applications/sites, it's a secondary function, but in your case you mentioned that it is important, so you may want to keep it. And yes, I think it will be obvious that it will affect the date below. It might add value to change the text on the header to 'Select Order Filters', that way it's the first thing a user sees, and it subtly tells them to fill this out.
    – Eamonn Burke
    Commented Apr 14, 2014 at 9:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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