1

I am designing a form to give music recommendations based on many possible inputs. Only 1 input is required (artists/song) and 15 are optional (mood, danceability, tempo, etc). I'm designing mobile first, which has been a challenge to expose all the options nicely with the small real estate. I have been confused as to how to tackle exposing all of the options gradually/optionally. I have made some wireframes that I hope capture my thought process/challenges. Another key detail is that search results will load instantaneously below the form, so there isn't really a "submit" button on the form.

My initial desire was to show the required input and a couple of optional inputs with the option to expand the form to see advanced options:

enter image description here

When expanded, I didn't want to overload the user with all ~12 other options because the screen is so small on mobile. Instead I wanted to show another set of options that seem like they would be more likely used (danceability, loudness, etc...), and save the super advanced features (tempo, key, time signature, etc...) hidden behind some sort of 3rd "Show All" button press:

enter image description here

My initial plan was that the "Show All" button would feel like it's in its own "page" so that the user would feel like they are being taken to a new form with all 16 options, instead of feeling like a 3rd expansion of the form. However, I was confused if giving that separate "page" feeling would be a bad experience. How would a user see the instant results? Would they have to go "back" to the simple form to see the results? In that case, should the super advanced options just be a 3rd expansion of the 1st form? How would one handle "double" expansions dropdowns in a single menu? What would be a way to deal with this issue that does not harm the user experience?

1

How would a user see the instant results?

In this context, I don't think it's possible in any way for the user to see instant results, since the mobile screen is such a small screen anyway. You'd have to focus on the filters (i.e. make them a page distinct from the results page) for this to work properly.

Taking a page from Tokopedia

Would they have to go "back" to the simple form to see the results? In that case, should the super advanced options just be a 3rd expansion of the 1st form? How would one handle "double" expansions dropdowns in a single menu? What would be a way to deal with this issue that does not harm the user experience?

Let's take a page from an e-commerce app from my country called Tokopedia. Here's how it filters your search results:

search results page containing lipstick items, and a filter button on the top right

There's a filter button on the top right of your search results page. If you click it, you'll open a small pop-up menu from the bottom of the screen:

pop-up menu from bottom of screen showing filters

Here you can filter your search results. The Indonesian term "Urutkan" means "Sort", "Bebas Ongkir" means "Free Delivery", "Lokasi" means "location". Now, you can expand this by swiping up (=scrolling down) and access more filters:

list of filters

I counted no less than 13 different filters in that Filters page alone.


For your app

For your app I'd suggest a slightly different approach since you said you'll need to use so many sliders – my suggestion is to:

  1. Identify which of your filters are the ones used most often
  2. Put them on top of the page (so it pops out from the bottom, like Tokopedia's second image above)
  3. As for the rest, hide using an accordion menu:

enter image description here

The purpose of this hiding is to reduce visual clutter. You're also relieving the user from being overwhelmed at so many options at one time (Hick's Law) and giving the user the choice to just show whichever parts they think they need. Summarization of changes also happen instantly. The trick, then, is in the labeling of the filters.

3
  • Thank you very much for your answer! This is an interesting perspective that I did not consider. Having a pop up at the bottom of the screen opens up the doors to some new possibilities. I need some time to think about how I would implement this in my app before possibly marking this as the answer. Do you happen to have any thoughts on the original menu system I showed in the mocks? It is very different from your idea, so I want to hear your thoughts on it.
    – frownyface
    Sep 22 '21 at 4:11
  • Another very interesting thing that I did not consider was to hide certain options in an accordion menu. That is a great way to reveal all the options in a single menu without the information overload.
    – frownyface
    Sep 22 '21 at 4:19
  • My own personal sense with what you're attempting to do in the question is that, it's going to create some sense of dis-junction between the search results and the filter. Going to another page as an action can also happen when there's a change in content, not just changing settings. It creates ambiguity. Tokopedia's solution keeps you in the (illusion of being in the) same page. Sep 28 '21 at 8:40

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.