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?

enter image description here

  • Why not have Save occur when the user opens up a new accordion section? – Fractional Jun 23 '14 at 12:22

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.

enter image description here

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:

enter image description here

  • Hi and thanks for your reply. 1. I would like to use auto-save, but that is not something our database can handle in an elegant way at the moment (and going that way is not within the scope for this project) 2. Good point, might be useful to show where the user has started entering data. 3. Not sure what you mean with discard changes feature. I'm thinking of having both 'save' and 'discard'. 4. I've considered labels on left but I'm afraid I've got less horizontal than vertical space to work with. 5. Good point, thanks! – Mumas Jun 23 '14 at 11:20
  • @Mumas please watch Update on 3rd point. – Alexey Kolchenko Jun 23 '14 at 12:46

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.

enter image description here

  • Thanks for your reply! Nice idea, I've tried it out but people seemed to scroll past the cancel button if the expanded accordions content was long, so I've decided to put both the save and cancel buttons below the input forms. Once again, +1 for your reply! :-) – Mumas Jun 24 '14 at 6:19

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:

enter image description here

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

enter image description here

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.

enter image description here

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

enter image description here

  • Hi. I've thought of this as well, and it would be a nice way to do it. However, I would prefer that the user has to either save or cancel one item at a time (focusing on one task at a time). The problem I discovered if doing it the above mentioned way is that it's not quite clear how the user would have to do to cancel/discard changes made. Clicking 'edit' to reveal the cancel button (while the save button is visible) does not feel intuitive. Do you have any other ideas? :-) – Mumas Jun 23 '14 at 8:07
  • If focus on one item is important you can force users to take action on the edited item before moving to another item. See the idea I added. – jazZRo Jun 23 '14 at 8:52
  • The idea with three buttons is nice, but I'm afraid there will be cases where the titles will be long. +1 for the other concept! :-) – Mumas Jun 23 '14 at 9:51

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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