6

I'm currently working on designing a setup flow where the user will create a study in 6 steps. I've decided to split the different steps into tabs based on what the user will have to do in them, i.e :

  • Step 1: Form with 7 fields where the user enters some study info.
  • Step 2: Creating a form that people will have to fill out to participate in the study.
  • Step 3: Manage locations and users involved in the study.

    etc..

I've decided for tabs (instead of a wizard) due to the fact that the user might not fill it all out in one go, but rather re-visit and edit it from time to time. Also, the order is not necessarily sequential, but it is the order I found most of our users currently work in.

To my question!

I'm not quite sure how to help the user through the process and conveying/making them feel that their progress is being saved. (I've seen a similar question in the forums here but it's more related to how/when information is sent to the database).

What I'm choosing between is:

  1. A save button in each tab. (Feels bothering to ask them to save 6 times)
  2. A next button in each tab. (Feels weird because it's tabs, not a wizard)
  3. Autosaving and a finish/save button in the last step. (Lack of feedback while filling in previous steps)

What to do?

8

You say:

I've decided for tabs (instead of a wizard) due to the fact that the user might not fill it all out in one go, but rather re-visit and edit it from time to time.

So you have a hefty task where more will need to go into a handholding experience than even the typical wizard. In other words, you'll need to build in more prompts and explanations than usual in order to have people understand the process.

To your question, the answer is definitely autosave – and I suggest the label Pdxd suggests visible near any exit action. (the circled #2 solution)

HOWEVER, since your goal is how to help the user through the process and conveying/making them feel that their progress is being saved, your solutions go beyond save buttons vs. autosave. Consider:

  • 7 tabs running across the top is overwhelming (5 is about what the average brain can take in) - can any pieces be combined to get that number of tabs down to 5?
  • You need not present these pages as tabs. They could look like bullets:

Tabs as bullets

  • Progress could be shown on each of these tabs so the user knows how complete each section is (these are bigger than would be displayed):

pie progress

  • You may want to prompt the user upon exiting, or while working on it, that they are X% complete with the entire process - even showing this at the top of the UI.
  • +1 for the progress bar integration. That helps immensely with managing user expectations. – Pdxd Jun 12 '14 at 15:43
  • Thank you for the awesome (and thorough!) answer! I've tried to combine it into fewer steps but the actions the user has to take in each step are so distinct it would feel weird to group some of them. +1 for the vertical 'wizard' with bullets, I'll try it out! I agree that a tab structure is not optimal for that many tabs, but this web application will also be running on mobile devices (tablets), so I'll have to see how putting a vertical wizard on the side will affect the screen space for content in the each step. (As it is now, 7 tabs fit just barely) Again, thank you for your reply! :-) – Mumas Jun 13 '14 at 6:36
2

Autosave! :)

I recommend Autosave with a big save / submit button at the end, though there's no reason why you can't give feedback as the user is progressing.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In my mock sketch above:

  1. You can provide hint text on hover (yes that arrow is intended to be a mouse).

  2. Or to be more frank, just include the help text below the button.

Ensure that when the next screen loads, at the top you need to include a message that says something like "You changes have been saved."

This would save a step for the user rather than push save. Google uses this in their Google Docs predominantly.

Example:

Changes saved.

As for it being "Wizard-like", that next button can't really be helped if it's a linear process. The tabs essentially form the Breadcrumb. If it's non-linear, you can still provide an alert before they switch that says something like:

mockup

download bmml source

Note: I'm not a copywriter so maybe the examples can be reworded but that's basically the flow that I recommend.

  • Thanks for the reply! The hover tip is a nice idea, though it might be hard to show when running on a tablet, so the tip under the button would probably be a better solution in my case. :-) +1 for providing feedback at the top in the next step, (like in google docs) had totally forgotten about using that paradigm. I'm not so keen on showing an alert when the user switches tabs (feels obtrusive since there are so many steps), but it is definitely an option when the user tries to leave the flow. Thanks! :-) – Mumas Jun 13 '14 at 6:49

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.