wizard - Material Design Steppers - Lists inside steps

I am a bit struggling regarding a multistep process to create an item where the user has to fill out different data inside a mobile android application.

1. Basic Data (e.g. a Location, a Date)


2. Select multiple data from a given list


3. A picture for the created item

So I looked up the material design approach/specification for steppers (Material Design Steppers).

Regarding the specification I have 2 possibilities that are suitable for mobile use cases as far as I see.

1. 
   

   The steppers presented under the Section "Types of Steppers/Mobile Steppers":

   
   


2. 
   

   The vertical stepper under the Section "Types of Steppers/Vertical Steppers":

   
   

So now to the actual problem:
As mentioned above, in step 2 the user has to select multiple items from a list of items that can vary and increase over time and potentially become large up to an undefined size.

From that point of view I think the steppers 1 would be better suited, as the items could be presented in an own screen with possibly additional filtering/sorting possibilities.

From a "Design"-Point of view I think the vertical stepper just looks nicer, but I can not imagine a solution to include such a list inside it (and somehow a list inside has a slight "smell" of not being the accurate method).

What do you think would be better suited from an UX Point of view?

Thank you already!

Answer

Beyond looking nice, there are other reasons why "steppers 2" can be good:

• Easy to keep track of progress


• Step titles tell you what information is required


• Greater sense of progress as you physically move down the form


• You can access other steps out of sequence (e.g. go from step 3 to step 1 immediately)

However, as you said, step 2 has a list of varying size. The viewable area left after trying to embed the list with the Continue and Cancel buttons will make it more difficult for users so scan the list. And if there are helpful filtering/sorting tools then you're going to have a harder time trying to include them on the screen (or not put them in there at all).

Therefore I would recommend "steppers 1", specifically the design that has "Step X of Y" at the top. If you include the step title (e.g. "Step 1 of 3: Basic data"), this design still benefits from:

• Easy to keep track of progress


• Step titles tell you what information is required

I tend to avoid the page dots since a greater number of users should immediately understand "Step X of Y". If you'd rather use the stepper version with page dots you should still title your steps. The Nielsen Norman Group also wrote some things to keep in mind (https://www.nngroup.com/articles/4-ios-rules-break/ (yes, the article is for iOS but same principles should apply for Android)).