How to display save/cancel actions in an accordion

Question

I'm in the middle of designing a setup flow and have decided to go for an accordion paradigm (due to the large amount of steps, using tabs would result in tab overflow in mobile devices). Upon entering the setup flow, the user is presented with the the first step open.

However, I'm not sure how to present users with the action of saving or discarding the changes they've made.

• One of the options is to re-use the 'edit' button that opens an accordion, and morph it into a save button.

• The other alternative is a bit more straightforward and simply placing a save and cancel button inside the expanded item.

Are there any ad/disadvantages of going for any of the alternatives? Is there any other way to do this?

Answer 1

For me, your interaction is too heavy for a mobile: a lot of steps and actions. And Saving action shifts the responsibility from System to User. This makes interaction more complex, exhaustive, and fallible.

My suggestions are:

• Use auto-save for saving the data. This is the way modern apps behave.
• Display the changed accordion items to improve navigation, as Accordion pattern provides random access to the items and user could lost himself and interaction will be broken.
• Use Discard changes feature rather than Save if you really need returning to old values.
• Try to place labels to the left to reduce vertical size.
• Don't use Edit button as content of the accordion item is hidden, so user have no idea if he should edit it. Instead he opens it and then takes decision.

UPDATE
I treat Save and Discard as dichotomy, so having Discard and auto-save allows you to minimize users' actions in the interaction; I've pictured what I meant:

Answer 2

if you want to let user focus on one button, i think there is a way to do it. like below, when you click edit, the button will turn to "cancel". If you don't want to save your input, you can click cancel. but if you want to save it, the save button is right below the content(click it ,the item will draw back and open next), you won't miss it if you finish entering info. in the two situations, you only have to focus on one button.

Answer 3

I would choose to keep the save, cancel and edit buttons together. To keep track of what is saved and what not, you can keep the save button visible for unsaved closed items. In my example you can see that the edit button is re-used but changes into the cancel button:

Obviously you can show all three buttons if the item titles don't get too long:

---

Another idea is, if you want the user to focus on one task at a time, you can also hide the edit buttons when an item is being edited. You can change the name cancel to close after the item is saved.

Then the cancel/close button closes the item and the edit buttons appear on all items:

Answer 4

I'm working on this issue currently and after some thought I came to the conclusion that an edit button whether it's on the title bar or inside the accordion is an unnecessary interaction. When a user clicks on the title bar and opens the accordion, you could make the assumption that they are clicking with the intention of editing the content hidden inside and therefore an open accordion should always been in "edit mode".

Save and cancel options go together, always. It's never good practice to split them up becuase it forces users to hunt around the page for the proper action.

Using the paradigm of open = edit for accordions, you could display the save/cancel actions from the onset inside the accordion but disabled. Once an action is taken, they become active. If you allow users to close an accordion that has edited values, then a label similar to "unsaved changes" could be displayed in the title bar. If they try to navigate away from the page then you can flash an incomplete form alert.

If no action is taken, then closing the accordion simply returns everything to its original state. The caveat of this approach is that you are combining the "edit mode" and "summary mode" which depending on your content could be impractical.