Multilayered form with multiple options in smartphone

Question

I want to ask about multilayered options from the view of UI and UX. I need to make a form in Android about coverage area in which contains states, city and districts. User can choose multiple states and cities and districts. Does anyone have ideas of how I display the form in a simple way to make user understand they can choose multiple states, multiple cities and multiple districts. Here is my current form with dropdown, when user clicked "Add Area" the whole form will be multiplied.

P.s. if this is question is duplicated please let me know so I can do something about it

Answer 1

I made two iterations, one is with dropdown and another without it. This kind of interaction generally we see in mails, so it is familiar one.

Answer 2

I wonder if you could use hint text? Good copywriting might help here.

For example: Coverage area (select all that applies)

Another method might be to use the customers location data and prefill the dropdown with 2-3 selections.

Answer 3

Search all the areas

My favourite option would be to collapse the types of areas and make them searchable in one go. The UI I have in mind is Bootstrap Tags Input (https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/) for lists without many duplicate names, or more elaborate ‘search results’ if you need to provide more information with each item.

Add by area type

Another option is to use three Add-buttons, one for each type of area. That way, you provide the user with the same clear separation of types of areas that you have in mind.

To avoid confusion you might want to avoid sticking the area types to each other, because then it may look like you have to choose all three types together, as I suspect DarrylGodden’s comment is referring to.

Answer 4

IMO:

• You should make main heading, something similar like "Enter your coverage areas" (plural is more appropriate as there is possibility for more entries)
• When someone adds new one, you need to place proper margin or horizontal line in between and offer also option to delete it. Button "Add new area" could be bit bigger
• If State, City and District are single fields you dont need Accordeon here, just show input fields. If you have more inputs under State / City / District having Edit icon that opens overlay or pop up looks still better then Accordion with chevron down. That was user entry will always be disclosed