1

I have a [mobile] app that already has a left navigation drawer. I was wondering if it is a good practice to use a right navigation for an advanced (filtered) search? I didn't find any particular rule in material design documentation by google.

Update: by this question I mean

First: if it is user friendly to have two navigation drawer (left and right) simultaneously in one app? Second: If the right Navigation is a good place to put all the search filters(almost 8 options; including date, type and some text fields) or should I design a new page for the advance search options?

Improve this question
3
  • 1
    What kind of app is this? What’s the context?
    – Mike M
    Commented Nov 11, 2017 at 14:13
  • This is a corporate app and the search area would be official correspondences.
    – Mandana B
    Commented Nov 11, 2017 at 14:24
  • You can search correspondences by sender, receiver, subject and, date and status filters.
    – Mandana B
    Commented Nov 11, 2017 at 14:33

3 Answers 3

Reset to default
2

You have all the power in the world to give 2 drawers (left and right), but why? We use drawers mainly for the purpose of navigation because they mostly contain one or two-word links to other pages. You will rarely find lengthy text in drawers.

Filers, on the other hand, can have variety, like checkboxes, radio buttons, range scales, text boxes (From - To) etc.

So why to show it in a right drawer and let that 10-20% space on the left get wasted and for what? Earlier apps were using popups to show filters which wasted 5% of the screen space on the edges but now understanding the importance of spacing, more and more apps are inclined to open a complete page for actions like filter or search.

So opening a right drawer for a filter will be taking you one step back.

Until you have a strong reason or restriction to do it that way, it's the option which you likely should avoid.

Improve this answer
2
  • I think that you are right. Having a separate page for the filters is going to be the best choice, considering the nature of my filter controls which include text boxes. How ever I still like to find some examples of more creative UI designs for advanced search option.
    – Mandana B
    Commented Nov 12, 2017 at 15:30
  • Yeah sure, do explore all sort of UIs which are clean and helpful for filters regarding your requirements. Just FYI actions like search and filter, UX has to be really simple, like keep your main focus on how a user can get his result in minimum touches.
    – Anupam Pareek
    Commented Nov 12, 2017 at 17:30
0

Updated Answer: You can use a right hand sliding tray, and keep a row below the search field persistent to indicate that users are viewing filtered resuts.

In response to your comment:

For a mobile app, you can wrap a horizontal filter bar into a sliding tray, as amazon does:

  • You still have a persistent search bar (the first type of 'filtering' a user usually does)
  • The row underneath could give some indicators that a filter is currently being applied
  • A 'Filter' button on the right can open the slide-in tray, with the results still partially visible beneath it
  • If you have room, you could also have a 'Clear' button so users can quickly clear the additional filters without opening the tray

Nielsen Norman refers to this pattern in their Faceted Search article.

enter image description here

Improve this answer
4
  • Thanks for your detailed answer. It works good on web apps but what I forgot to mention in my question (I only used a tag) was that this a mobile app, so there wont be enough horizontal space for the filters.
    – Mandana B
    Commented Nov 11, 2017 at 15:46
  • You actually still have room underneath a search field for an indicator that there's filtered results. You can select a filters link or icon, and reveal a tray like the amazon example. It's important for users to know that they're viewing scoped results, so some indicator is needed if you don't have room for all filters showing.
    – Mike M
    Commented Nov 11, 2017 at 15:56
  • Amazon example is a good one. Foursquare app also puts filters in the right navigation, but it doesn't have a left navigation drawer. One big problem that I have is that at least four of my filter controls are only text boxes. I think it is not a good practice to get user inputs from keyboard in the right navigation :/
    – Mandana B
    Commented Nov 12, 2017 at 15:27
  • about the filter indicator in the search result view I totally agree with you. It would be so helpful for the user.
    – Mandana B
    Commented Nov 12, 2017 at 15:28
0

Yes, you can. It's recommended practicing according to Google's material design. It's called Side Sheet.

Side sheets should be placed on the opposite side of a side navigation drawer to avoid obstructing the UI or causing confusion about the sheet’s functionality.

https://material.io/components/sheets-side#placement

enter image description here

With wider screen you can anchor it to the right.

enter image description here

Improve this answer

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.