TransWikia.com

Integrate combobox/dropdown in smartphone app?

User Experience Asked on October 31, 2021

I’m working on a smartphone app for searching prices. This is what the menu looks like. In the app, I can switch between the results of "CHEAPEST" and "CLOSEST" without moving away from the main page:

enter image description here

The issue is with the "Filter" to the left (where it says "PREMIUM"): By tapping on "PREMIUM" I can select between "PREMIUM" or "REGULAR". On a website, a regular dropdown (with some CSS to blend) would be the solution. But I don’t know if comboboxes exist in smartphone apps.

My question: what native control can I use that will let me select between two values when I tap on something without leaving the current screen? Are there any apps that use this type of control?

IN all the apps I’ve seen, the filter takes the user to another screen where the selection is made. The problem is that this solution takes me away from the main screen.

3 Answers

If you wish to allow users to manipulate your filters in a way that they remain on the page, one prospective solution would be to use modal views in iOS and Bottom Sheets in Android.

You can create a state of the modal view/bottom sheet that is persistent on the screen when collapsed and upon interacting with it, it can expand to reveal the filters, keeping the user clearly aware that they won't be navigated to another page upon clicking the elements.

Further, if you want to ensure that the user sets/verifies the active filters before interacting with the results on your page, you can leave the filters modal/bottom sheet expanded when the user lands on the page.

Here's how you can achieve it:

iOS Modal View for Filters

While there is no one application that does all of this in a single go, the iOS Maps and Stocks apps have their primary flows built around a similar modal view concept.

Answered by ikartik90 on October 31, 2021

It strikes me that these are both binary options. In that you can have closest OR cheapest as a sort and premium OR regular as a filter.

Maybe you could find some sort of UI device that would allow the user just to tap the sort or the filter to switch each option to its binary opposite. "Premium would switch to "Regular" when touched once and switch back to "Premium" when touched a second time and the same would happen for "Closest" and "Cheapest" with the sort. This would reduce the controls you have in that area to two possibly freeing up space for something else.

Something like this: Toolbar with filter setting and sort setting. The filter shows "Premium" set and the sort is set to "Closest"

Answered by Andrew Martin on October 31, 2021

I believe there is a solution that won't require the user to leave the main page. When the users tap on premium, you can pop a model with two options: PREMIUM and REGULAR and a save button. After they make their selection, they can choose between CLOSEST and CHEAPEST directly on the screen.

Answered by Mihnea Patrascu on October 31, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP