Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a table of data that can be filtered by name, location or status.

Table of data for Filtering

The data of each of these columns will be obvious to the administrators of the Portal (i.e that the first column is child's name, the second their location).

I therefore added filter options in place of the headings. The field placeholders act as a label in themselves as they allude to the column name e.g 'filter by location'.

One of the most useful filters will be Child Status, I have therefore repeated this filter in the right hand column, giving numbers for total children of each status. The status filter may be overlooked at the top of the table, therefore I have given it clear prominence to the right, and also reduced the filter to a single click.

Questions

  • Is it appropriate replacing table headings with the filter options as shown in the screenshot?

  • What do you think of repeating the status filter on the right hand side. (Note this is likely to take the form of simple links rather than checkboxes).

share|improve this question
    
Possibly duplicate question Column headers in a table functioning as input boxes for filtering –  alexeypegov Jan 9 '13 at 18:05
add comment

2 Answers 2

up vote 4 down vote accepted

The filter method you suggest usually works pretty well. We're using a variant of it in one of our products:

Filtering of data table example

This way we still have a heading row at the top which you can use for ordering data. This also ensures that you know which column contains what even if a value has been filled in the filter.

Disclaimer: this is a web-app for which the users are thoroughly trained. I would recommend adding some visual clues to explain these fields are used for filtering (a label or icon). Also a submit button could be considered (we are only doing live filtering at the moment).

One other thing: when you have a table with a lot of data (and column names/values that the user isn't very familiair with) it could make sense to make the heading row stick to the top of the viewport when scrolling down or repeat the heading row every X rows.

share|improve this answer
1  
good point on keeping headers to allow ordering of data –  slawrence10 Jan 10 '13 at 17:44
    
Thanks for mentioning icons - I have a filter box that needed a little extra something besides a label. A filter icon will do nicely. –  Surreal Dreams Apr 23 at 22:28
add comment

I think the filtering links at the top of the table work well.

At first I couldn't make sense of your Right hand filtering table - but I realise its similar to the Amazon filtering system. So perhaps better to put the filtering table on the left hand side?

enter image description here

I've also seen it done above the table with WordPress, which seems more noticeable than your right hand table (I know you said that you put it on the RHS to give it more prominence but it seems to be less prominent and certainly further away from where the user will be looking):

enter image description here

share|improve this answer
1  
Appreciate the thoughts on change the Status filter position and like the examples. Will definitely be implementing something along the lines of these. –  slawrence10 Jan 14 '13 at 18:41
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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