I've been struggling to come up with a filtering and navigation solution. Below is a screenshot of what I've sketched out so far. A quick background on my situation:

This part of the application displays information about one computer or many computers. Users are able to view information on over 4,000 computers. To keep things clean I've opted for a sidebar that can hide and reveal itself. Within the sidebar, the user is presented with 4 main interactions:

  1. Grouping the computers by operating system, network groups, etc.
  2. Search for a specific computer.
  3. Filter computers through options located within in the "Filter" tab in the sidebar.
  4. The sidebar is multi-level. For example, when the user selects "Windows XP", the sidebar will reveal all 2,000 computers with this option. They will then be able to select a specific computer to view further information.

As I mentioned previously, this is what I've come up with so far.

My Sidebar sketch so far

My reasons for placing the filters in a sidebar that hides and shows itself is that the the content area would not have enough space to accommodate a static sidebar.

Any advice, tips, or suggestions will be greatly appreciated!

  • Could you please describe in more detail how users will work with "selected computers"? May 15, 2014 at 12:56
  • The content area will display information about the selected computer(s), basically a dashboard overview with charts, tables, analytics, etc. May 15, 2014 at 12:58
  • So it's just for quick browsing of the status (or something) and then move on to another computer? May 15, 2014 at 13:03
  • Yes it's basically there for selecting the computer(s) you would like to get further information about. So if you want to look at the entire network you don't need to select any computers or filtering options from the sidebar.. the sidebar content is there to help refine what the user will view in the main content area and once they have filtered out the content to show what they want, they want have any use for the sidebar unless the want to make a change to the filtering. May 15, 2014 at 13:07
  • Ok, so there is an overview of the entire net or subnet is shown if there is no any selection in the sidebar? And how computers are searched? By the name? May 15, 2014 at 13:11

5 Answers 5


Have you considered a horizontal sidebar?


  1. Horizontal layout will allow you to show more data which could be very helpful.
  2. It could be adjusted like vertical sidebar to occupy more or less space, etc
  • Thank you @alexeypegov, i think this is the best option :) May 19, 2014 at 7:56

Given alexeypegov's comment above would a free text field not work? Obviously FT fields require development to ensure broad enough scope for user terms, but I've become a big fan of them, rather than forcing users down narrow channels.

I'm making an assumption that the filtering is dynamic rather than event lead?


How about something roughly like this:


download bmml source – Wireframes created with Balsamiq Mockups

The user can type to filter the results, and you use the tree view to display the groupings. Groupings are always displayed collapsed with the number of inner items in brackets. This way the user can keep typing to filter until the results per group look manageable enough to just open the group.


Selecting from 2000 options with a mouse is going to be a painful interface, no matter how many "group by" options you give them access to.

This problem is really crying out for some sort of free text search field and dynamic filtering.


Consider using faceted search with all categorical attributes, then you can save space by not repeating data in the results.

Faceted search can be useful when there is a lot of data and users might pick any attribute when finding what they need. It can be challenging to try and conceive every use case. Faceted search covers the ones you might not consider.

The below low-fidelity wireframe is based on the example above.

Example refactored to use faceted search

The discrete attributes have categories along with how many computers meet this criteria, like you see for Operating System and Network Group. The continuous attributes are covered by typing in the search box, like Name and IP Address. If users pick one operating system and sill have a large data set to sift though, the burden is still on them to scroll through many pages. By allowing the user to filter each attribute at the summary level, they can bring the data set down to something manageable.

Now we can consider what new information is presented as a result of the faceted search. The below low-fidelity wireframe has possible thoughts from a user added to illustrate.

Faceted search example illustrated with user thoughts

If there are a lot of attributes consider excluding the discrete attributes from the results to save space. If a user selects "Windows 8" they may not need to see "Windows 8" listed in each row of the table. At this point they may want to see what is different about each row, so the continuous attributes like Name and IP Address are more useful.

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.