Multiple forms on a page with individual Save/Submit buttons

Question

I have a number of forms on one page.

As some brief background it is for a CMS, when a user can manage a slideshow. Each form represents one slide. They can edit each image, the title that is displayed and the text below it. They use a twirl down - so they are hidden until a user clicks show, that one expands.

At the moment, they all have their own save button. If you edited "Slide A", twirled it up, then edited "Slide B", and saved it, the system would only save "Slide B" (the save button is on a per form basis).

How would a UX pro manage the saving process for multiple different units (slides in my case) managed on the same page?

Answer 1

What is a user task you solving? Are users limited on bandwidth? Are they work from mobile device or from PC?

Imagine if power point (windows) or keynote (Mac) would ask you to save each slide by itself — disaster! Why would it not just save all and keep history?

This multiple forms approach and partial edits is something that was made due to technical restrictions in the past, in that days it was just easier and cheaper to make several forms.

In our days of fast internet and modern browsers with dozens of UI frameworks (like angular Js) it's no longer a technical problem. Finally you can make things work right and clear.

Single save button is a clear and transparent decision. Partial save is not. Saving with a page refresh so other changes are lost in our days is just unprofessional, because it can be easily avoided.

Have a look at google docs (slides editor for instance) it even don't have save button! Why? Because it has History, and autosave. Every change since first word can be reverted. Simple, intuitive and error proof. That's how pro would do it.

Answer 2

'Edit All' button that expands every slide for the user. 'Save All' button that saves every edit and contracts all slides when the user is done. Success message that tells the user 'All edits saved'.

Answer 3

I'm not a UX Pro, but I think you're off to a fair start with the SAVE button on each slide. What you need to do is inform the user in some way that their changes for each slide aren't saved until they hit each individual save button. You can explicitly state it somewhere, but that seems needlessly wordy and once they figure it out, they won't need the notification.

I've got a couple suggestions:

1) You could display an overlay banner at the bottom of the screen that says "Changes to Slide 3 discarded."

2) When you slide up the first slide you could temporarily (5-10s) put an overlay on top of the now collapsed slide that with some text that says "Changes Discarded." Be aware that this could be missed if the original slide is off the screen.

3) You could get fancy and change the Save button of the first slide to be a bright red "Discarded" button as it slides away. This has the same limitations as #2 and also is much more temporary... but it ought to look cool.

You can mix and match all three if you wanted.