Tuesday, June 19, 2018

gui design - Adding paging, sorting and filtering toolbars to a table


I have a bunch of report views, which essentially are tables. They should enable the user with sorting, paging and filtering capabilities.


My idea is to add those features via menu-bars.


Paging would go at the bottom:


mockup


download bmml source – Wireframes created with Balsamiq Mockups


Sorting and Filtering should go on top.


But they're displayed differently because if paging is needed is determined at opening time, but filtering and sorting are optional.


In the case, that everything is needed, it would look like this:



mockup


download bmml source


It's sorted by multiple columns and has a bunch of expert filters.


The question is, how should I handle the visibility? I don't want to show GUI elements that aren't needed every time, but I also don't want to let the user miss them.


Maybe my menu-bar idea isn't that good at all and I should use external dialogs or something.



Answer



The best implementation of this that I have seen is from OkCupid. When searching for matches, there are a number of filters that can be added (via the advanced tab), which you only see once you have chosen them.


enter image description here


The two bottom ones are examples of advanced filters, and can be removed by selecting the 'x'.


This has been tried and tested on millions of users, and has proven to be flexible, and easy to use. I would suggest modelling your filtering on theirs. I would however consider changing the 'advanced' tab to something like 'add filter'.



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...