Showing a full screen dialog to view a full list of radio button selection

Question

I'm designing a sort of step by step process for mobile web using a stepper to get a bunch of information from a user. One of the steps requires a user to select from a list of (about 20) pre-defined locations or enter their own address (entering their own is not high priority).

Since the stepper and the list of locations can get really long, I am having the user launch a modal to view all the choices in a full screen dialog so that they don't have to scroll the stepper to select a location.

The problem however is that after selecting a location (with a radio button) on the modal and closing it, how to show in the wizard what they have selected in the modal after the modal is closed.

Does anybody have an idea? Is launching the modal even a good idea?

Answer 1

Answer for first question - How to show after selecting.

You just show selected item and an option to change with a link.

Second question - modal view use

Use of List view in modal view can be used, however you need to be caution of vertical space. Try to reduce the number of rows in each Item. For example instead of using a lable for verified you can replace it with an check icon.

I assume the screens which are shown are wireframes, and visual design team will take care of how the wizard design. Few suggestions 1. Use of radio button - You can take advantage of touch to highlight the selected row in a mobile. So you can get rid of radio button. 2. If you want to use radio button, then they should be on to the left. And still you should provide touch selection for the entire row. 3. In the modal view, the search should be on the top if the list will be longer.

I also suggest that the best approach is to test with the users, you will find the best answer, the quick on could be A/B testing after you have few good options