Focus the user on save screen, or still show preview?

Question

In my 3 screens below, I've shown the edit, review and save screens. These screens are part of a 4 stage process.

On the final screen (save), instead of the interface having a new screen, a sidebar slide animates in on the right. Is there any downside to breaking the paradigm and making the last screen a sidebar? Should the save screen be displayed on it's own?

My 2 concerns are that the user is not being focussed as hard on the task at hand by leaving the review on the screen, and also that if the user wants to go back to edit screen, and then skips back to save, is it disorienting for them?

Edit Screen

Review Screen

Save Screen

Answer 1

I recommend deleting the “Save” Step.

Move “Template Name”, “Category”, “Description” in a new step without the “Save”, “Save as” and “Cancel” buttons. The new step should be placed before the “Template” step.

Add a “Cancel” button at the top, that will be visible for all steps, add also a “Finish” button.

When the users clicks on “Finish” the template is saved and the wizard is closed.

The only function left out is the “Save as”. If you really need it then this is my suggestion :

I assume that you have a list with all the created templates. If you do, then you can add buttons “Copy” and “Edit”. The “Copy” button will create an exact copy of the selected template, the “Edit” button will invoke the wizard with the selected template.

Answer 2

If its possible and you have time - my suggestion is , you should have steps 1. Template - I am assuming users can select the type of template they can work with. Once they select the template go to Step 2: Edit - Edit is actually Edit in left panel, Review in right panel (kind of like a split screen or up-down). You can choose to have an explicit Save button/action or auto save (like Google docs, Evernote etc). This way, you can have changes/edits made and 'seen' immediately in the right panel. You have cut down a 4 step to 2 step process. And I think having preview window right next to Edit window is more user friendly for making changes. And "Save Template" information is horizontal instead of vertical in the same page..Sorry if this is completely off track of what you are looking for..

Answer 3

The flow seems pretty ok, user just need to get used to the "slide in saving" as oppose to a new page for saving the changes. I don't think it will cause much problem in the long run. Having said that, you could conduct some user testing to see how you could streamline the process with minor tweaks.

My 2 concerns are that the user is not being focussed as hard on the task at hand by leaving the review on the screen, and also that if the user wants to go back to edit screen, and then skips back to save, is it disorienting for them?

I will throw in some suggestions for you to consider but this is based on my own opinion and probably does not represent the general users. You made a valid observation when you said users might want to make some changes and skip back to save. Having a review process in the middle might disrupt the flow. You might want to empower the user to perform their task quickly and easily by streamlining your edit and review process.

Streamline Edit and Review Process

---

^{download bmml source – Wireframes created with Balsamiq Mockups}

I hope the above give give some ideas on how to improve your UI.