Tabbed "wizard": next vs save?

Question

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?

Answer 1

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:

• 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):

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

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

^{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:

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:

^{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.