2

I am designing a mobile (and desktop) web app that allows a user to create shareable forms. The "advanced process" is broken down into five steps at the moment, laid out like this (Numbers will be replaced with icons eventually):

Mobile Screenshot

I am wondering it would be better to have a Table of Contents-like page where the user can see a list of all five steps, the user taps on the one that they want to edit, which brings to the appropriate editor. Clicking "save changes" brings them back to that TOC page where they can tap on the next step.

Benefits of this allow more steps to be added in the future and better descriptors of each step, and potentially better lends itself to being responsive. Downside is that there are more taps required to navigate between steps. Thoughts?

4 Answers 4

2

I think a step system makes for better navigation as it always on the screen and the user can clearly see where they are as well as having a summary of the steps to help them go directly to the step they want to edit.

Remember, your user will almost certainly use the stepped form to edit as well as create and the route through the process will be different in each case.

You could load up the first step on select create or edit and let the user use the step links as they please. With a stepped system you can also put the user directly onto a usable page with the first click rather than guiding them through a table of contents.

I would use next and previous buttons too if possible (maybe just on desktop) but ensure that any click, step, next, previous, back etc. saves what the user has done so they can return to it.

In the case of complexity, perhaps give the user a TOC that they can access too which might include more information on the step as well as maybe a summary of their behaviour so far on that step.

Also, consider carefully whether you need a cancel button on every page and if you do, position it carefully so it can't be accidentally clicked or what the result of clicking it is (do they or should they lose their work? - I'd say no, make cancel harder).

Finally, bread crumb isn't quite the right term. Bread crumbs lead to a point in a navigation system and show the user the route back to home (like dropping bread crumbs while exploring). Steps are different in their nature.

2
  • I agree with all of your reasoning for this layout. The "cancel" button used to be a "back" button, but we changed it so that users could easily leave (autosaved) and come back to edit it later. I'm leaning away form this now, though. Jul 31, 2013 at 22:30
  • The solution I'm thinking about trying now will have a button in the header that says "Step x/5" which, when clicked, opens a dropdown TOC with all the steps. This way, a user can see where they are in the process, skip a step or go back, or advance forward as suggested. The nav bar with all the steps might get removed entirely. Jul 31, 2013 at 22:33
2

TOC and Wizard pattern (step navigation) provide totally different interactoions. This aspect is more important than just tap counting.

  • TOC suggests arbitrary access to items and doesn't guarantee visiting each item. So other side of TOC's flexibility is loosing certainty.
  • TOC breaks smooth flow and creates "jumpy" interaction.
  • TOC forces user to think and make decisions on which item to visit. Such mental load decrease flow speed significantly.
  • TOC doesn't provide progress feedback.

Thoroughly developed steps will provide smooth user flow and eliminate all the TOC's drawbacks.

1
  • Thanks for the breakdown. Some of the steps are optional, so that actually fits. Not a fan of breaking the user flow, however... Aug 2, 2013 at 2:35
1

The extra clicking in between each step seems unnecessary. Also, I'm assuming that the steps go in chronological order.

Why not have a simple "Step 1/5" text for mobile and a larger wizard or progress tracker for web? This will allow you to add multiple steps in the future without adding clicks.

The "better description" part is confusing me. Why can't you have a title and description on the top of the page during that step? I don't see the benefits of putting that info on a separate page.

4
  • I didn't make this clear, but you can click on each breadcrumb and be brought right to that step. I want to avoid the possibility of the user feeling trapped in step. I could make the "1/5" be a dropdown, which shows the full list of steps...That might work really well. Jul 31, 2013 at 22:19
  • Oh, and the "better description" means rather than saying "Step 5" or just an icon, I could use the full word ""Security". This also fits with the dropdown idea I explained above. Jul 31, 2013 at 22:21
  • I see, so it's not a progress tracker. It's a multi-step navigation. I agree with the dropdown for mobile and perhaps a more visual graphic for web. There's no reason not to utilize the extra space. I find icons alone quite vague. UX wise, it's much easier to understand the full word. I can imagine a scenario where a user may want to go back to change something, in which you're assuming they remember what 5+ icons stand for.
    – Chris N.
    Jul 31, 2013 at 22:28
  • Yea, "multi-step navigational progress tracker" is a mouthful, but a more accurate description of that bar. haha Jul 31, 2013 at 22:36
0

If you really want users to be able to do the steps in any order, then the TOC option is fine (though you probably want to help them keep track of which steps they have completed by marking them as such).

Otherwise, instead of choosing between breadcrumbs and the flexibility and better descriptors that come with the TOC approach, go for both.

You can keep the breadcrumbs, and list your intended TOC text at the top of each step, with clear highlighting on the descriptor for the current step. This way users can see some description of all of the other steps at any time, and get a better sense of where they are.

(If you want to save a bit of space on mobile devices (and at the same time increase the highlighting of the current step) you could pare down the descriptors for all steps other that the current one. This could mean using the full descriptor text for the current step while using just a shorter title for the others.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.