4

I'm faced with the problem to design a concept how to reduce the amount of certain elements seen on the screen. The problem arise from too many elements on some web pages, which hinder the navigation experience of the user.

The obviously easy solution would be to use a button or link to change states from initial to expanded and vice versa. I made a mockup for this. EDIT: updated+english version of all mockups

enter image description here enter image description here when you click on the 'Show more filters...' button, all other filter elements become visible.

A second, but for my taste a little cumbersome and design unfriendly, solution could be to use a slider to limit the amount of elements in precise steps. see the next mockups:

enter image description here enter image description here

EDIT2: please consider for my use case, that solutions à la amazon facets sidebar are not applicable due to an already existing and fixed Layout.

Can anyone imagine better or more modern ways to solve this problem?

Has anyone seen such solutions implemented in some software or website?

I would be glad to hear your opinion or maybe some links to possible solutions.

migrated from stackoverflow.com Mar 29 '17 at 11:41

This question came from our site for professional and enthusiast programmers.

  • How many options do each dropdown have? To make sure that a dropdown is a good solution for each field. – Juan Ferreras Mar 29 '17 at 9:57
  • Another comment on the dropdowns: As soon as the user selects something in e. g. "Größe", the label "Größe" isn't visible any more. Not ideal. So as reduced as your mock-up is, I could use some reconsideration. – Marian Mar 29 '17 at 15:31
  • these are not normal dropdown, on click the just open up to show up to 6 options as checkboxes, or if more than 6 options exist, then a slider ist shown. But that's not too important to consider in my opinion. – Konstantin Steinmiller Mar 30 '17 at 13:23
2

A common approach for faceted search UIs, which you can consider, is this:

  • The N most important facet filters are displayed directly, where N is a number depending on your UI
  • Below these, a button like "Add search criteria..." or "Add filter" gives access to some selection (dialog, panel, you name it) where the user selects one additional facet or even several additional ones at a time
  • As soon as selected, the additional facet filter widget is added to the other visible facets and the user can set a filter value/range.
  • your proposed approach assumes, that the user has knowledge about the types of facet filters, which he can search for. Adding filters by search seems elegant at first and it is for a few filter elements, but becomes a pain in the ass when ure faced with e.g. 100 or 150 elements to search and select upon. Nonetheless this solution may be very suitable for other use cases – Konstantin Steinmiller Mar 30 '17 at 12:41
  • The approach I describe does not assume prior knowledge about the facets. Of course it's up to the user to actively open that additional menu and look for additional facets to further narrow down a search. And your UI should support that of course. – Marian Mar 30 '17 at 14:16
2

The English version of wireframes is better!

Thinking about filters - I think you should reconsider your thought of allocating entire page for them. The current patterns of filters on e-commerce websites are to position them in left sidebar. This pattern will help in your example as well:

  • you can use the main area for the real content and then show filters in a sidebar
  • place the frequently used filters in expanded state and least used in collapsed state
  • this will help you maintain your scroll solution, and users won't have trouble in scrolling a sizable vertical space.

Examples:

enter image description here

------------------------------------------------------------------------------

Group together related fields

Improve the layout of your online forms by placing form labels near the associated text field and by grouping similar fields.

enter image description here


enter image description here

  • my description is not extensive enough i guess. The problem was not to solve where an how to display the given elements. But more of how to handle way to many elements of the same type, like in my updated posting, I have many dropdown elements which work as facet filters. I dont want to spoil like 100 different filters to the users screen unless he really needs them. – Konstantin Steinmiller Mar 30 '17 at 11:16
  • @KonstantinSteinmiller I've updated the post - do read. Hope that helps. – DPS Mar 30 '17 at 11:53
0

Depending on the expected result:

  • If User has to choose value(s) from all the fields, e.g. to later generate a document - you could split the fields logically into steps (like in the shopping carts). This will reduce cognitive load for the User and save you some space.
  • If User can choose value(s) in some of the fields of her interest, e.g. to see filtered list, I'd suggest checking the data about fields usage frequency (if no data, assume something) and prioritize them. Select top X fields. Provide User with a search for all the cases for when first X fields didn't help to find the relevant item on the list.
  • If all filters are necessary to be presented, show them all vertically like e-commerce sites (Amazon etc.)
0

Your reservations are well placed. A bank of combo boxes will put off any user from using the interface. By the look of it, I can think of two approaches,

Grid and filters

Another approach can be grid and filters. If your data is in the form of grids, then you can reduce the number of filters at the top and introduce them as a part of column headers.

This will help reduce the clutter on the screen and aid the user to only apply the filters on the columns which they are particularly interested about.

enter image description here

E-commerce/Amazon way

Amazon to the rescue. The left-hand bar is basically many filters which help you refine the results. Sorry for the long picture, but the idea is also to highlight how each category is listed with extra information of a number of items that belong in each. Also, the See More selection navigates you to a more advanced find zone. Based on your business understanding 80% of filtration criteria will be fulfilled by easily available choices. For remaining 20% the see more will help.

It is not necessary to use only checkboxes as amazon is doing. You can use different visualization techniques to handle different types of information which will help users to quickly associate with the data that represents.

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.