How to handle multiple levels of advanced/optional inputs in form

Question

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:

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:

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?

Answer 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:

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:

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:

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:

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.