4

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

enter image description here

Review Screen

enter image description here

Save Screen

enter image description here

7
  • few things need to make clear: (i) user can Save template anytime while Editing or Reviewing, right? so will each time this sidebar opens and information needs to view/edit? (ii) shouldn't a simple Save be a separate operation? and the third image scenario be a Done operation?
    – SSuad
    Aug 19, 2014 at 5:46
  • when the user is done, displaying the information and completing/saving his work on the same screen seems fine.
    – SSuad
    Aug 19, 2014 at 5:48
  • What does "Cancel" do? Does it cancel the dialog but my work is still there or will my work be destroyed? As always, I advocate to get rid of save in general. Aug 19, 2014 at 6:51
  • @SSuad Actually you can only save is it's own state, if you see the top bar actually has 4 states, save is it's own state. However the save state is not a new screen, but the save sidebar slides in from the side. over the top of the review screen.
    – Rich
    Aug 19, 2014 at 12:40
  • @AlexejFroehlich Cancel will take you back to the 3rd state, "review". Sorry I didn't make clear but you can see the 4 states in the top bar, and they actively highlighted in each screen. Could you explain your reasoning for getting rid of save in general?
    – Rich
    Aug 19, 2014 at 12:42

3 Answers 3

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.

1

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

enter image description here

1

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


mockup

download bmml source – Wireframes created with Balsamiq Mockups

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

Your Answer

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

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