4

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": enter image description here enter image description here

  2. The vertical stepper under the Section "Types of Steppers/Vertical Steppers": enter image description here

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!

  • tbh from a design point of view I don't think the vertical steppers look nice. They just don't work for me on mobile screens. – Summer Aug 23 '16 at 11:10
  • If you really would like to use the vertical steppers the first question would be: Do you really need a list view? Can it be replaced by other type of widget? Does the user know the items or does it need to seem them first? Can the items be organized into a tree? (collapse and expanding mechanisms tend to occupy only what the user request; although personally I'm not a fan of the system). – armatita Aug 23 '16 at 13:57
2

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)).

  • 1
    Thank you very much for the answer, this confirmed what I thought. – JDC Aug 26 '16 at 7:48
0

You could go with design 2, but delegate the picking from the list to a dialog. After completing the dialog, the stepper shows only the selected items.

It's a compromise, but one that should not significantly impact the usability of the wizard (unless performed very often, in which case the two additional clicks for opening and closing the list will be annoying for your users).

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.