A brief introduction : Lets say in this web app the user is asked to upload an image. The resultant page will contain the image with a row of dropdown menu's to select from and a final submit button that will apply all the changes from the dropdown menu to the Image.Please refer to the image below :

enter image description here

My question : What will be the best way to show the dropdown row on mobile ? I am considering stacking them one after the other(See image below) But that pushes the "Apply" button downward. I am not sure if this is the right way to go?

enter image description here

What would be the best way to go about this?


Are you stuck on dropdowns, or are you open to other alternatives?

You could lay it out as shown below, scroll vertically through filters if they don't all fit (similar to Instagram filters), and then show options for each filter below.

Using this approach, the "Apply" button would not be pushed off screen until a filter is selected, so at least the user would see that it's there first. (Or you could 'sticky' the "Apply" button as suggested by 'nightning'.)

enter image description here

  • What if there is no default name to the filters? The text in the dropdown is nothing but the first/default/random selection. The idea looks good but, how can we accomodate them in mobile. – Nodnin Jul 28 '15 at 6:33
  • Hi Nodnin, sorry but I'm having a hard time following. How is it that the filter would not have a default name? How are the names of the filters generated? Perhaps you could also walk us through the process of selecting filters and options for each filter if you want some more guidance. – Nick Todd Jul 29 '15 at 15:47

This is the pivotal question.

Are the dropdown "filters" important controls where majority of the users will select one or more options before clicking "Apply"?

If these dropdown items are important

You would want the user to scroll pass the dropdown list to confirm they have selected the correct options before hitting "Apply".

If these dropdown items are optional

Consider sticky-ing the "Apply" button to the bottom of the screen to make it easy to tap on. Additional dropdown items can be scrolled into view.

  • Thank you for your answer. Maybe I did not word myself correctly here. The web element "Dropdown" is not necessarily important, however, the items in each of those filters are. So if, you could suggest an alternative, this option, that would be great. Since these items are important, I am afraid stacking them one after the other would take up some serious real-estate and push the "Apply" button way down. I have a feeling most stakeholders will not agree to that. But your answer definitely pointed me in the right direction – Nodnin Jul 28 '15 at 5:01
  • Okay it'll be nice to have a bit more info here with regards to the filters. Nick Todd's solution is good if the user picks from one of those filters and don't need to select multiple filters. Are these like photo filters to apply special effects on the X mark content above? Or are they for something else? – nightning Jul 28 '15 at 16:11

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.