2

What is the best position of a 'save'-button in a content management system form?

I'm working on a project that's largely content-based. The users of my system will mainly be adding or editing content. Because of this, the position of the 'save'-button will be critical.

The CMS will be used on desktop computers.

I'm struggling to chose a position for the 'save'-button. There are two options;

  • On top of the form
  • At the bottom of the form

enter image description here

Both have pros and cons for me. The button on top is always visible, even when the user has to scroll because of form length. A con is that the user has to move his attention from the bottom of the form back to the button which increases cognitive load.

A pro for the button at the bottom of the form is that the flow is shorter. A con is that the button will not be visible if the form is longer than the screen size. See visual below.

A third option would be to have two buttons, both at the top and bottom of the screen.

What is the best position of a 'save'-button in a content management system form?

Form flow enter image description here

Form longer than screen size enter image description here

5

Use a fixed footer that is always visible at the bottom. The workflow of a form is usually from top to bottom and the save button should then be the last action within vision. With a fixed footer it is possible to edit a field and save the form without having to scroll all the way down.

enter image description here

  • Great idea! However, personally I would prefer a fixed header instead. – Florian Brucker May 17 '17 at 15:08
2

I would implement something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

It would have fixed position while scrolling and would match with this statement you mentioned:

even when the user has to scroll because of form length

also with this one:

A pro for the button at the bottom of the form is that the flow is shorter.

and would fix this issue you mentioned:

A con is that the button will not be visible if the form is longer than the screen size.

  • How would this look on desktop? – Nick Groeneveld May 17 '17 at 8:47
  • @NGAFD just updated the mockup to match with your initial wireframes – Joao Carvalho May 17 '17 at 8:52
2

@NGAFD : Agree with the responses above that a floating save button at the bottom will be a great solution. I was also curios to know if you have auto-save functionality on the form? If so, a period notification 'Form Saved', near the top right hand corner of visible viewport might be solution to consider.

  • I do have auto-save, yes. There's a difference is mainly between content being published or not. We do not have 'auto-publish'. – Nick Groeneveld May 17 '17 at 12:47
  • 1
    Just completed an update like this to a legacy app. Floating save was a god-sent, users were so happy. You could add delete or editing functionality here as well. – Destructo May 17 '17 at 13:58
  • @Destructo Can you share a visual of your update? – Nick Groeneveld May 18 '17 at 7:32
2

@NGAFD -- I can't share particulars, but here is a muted version.

The idea here is we have a fixed header, fixed left side and a fixed footer. Only the content (center area) scrolls. So at any point on the page the user can save.

Saving on demand, for us anyway, was a bigger tech project. The cost outweighed the benefit, especially since we are starting a re-design soon.

Being an admin platform, most pages are a view/edit hybrid state. so being able to save at any point is needed.

The only drawback to this setup, is if you are doing multiple things like adding items from a modal or some other level of UI, users most often forget to hit save thinking buy clicking "add" or "select" actually saves the page. To combat this, we added toast messages like "you have not saved your changes...etc etc."

Hope this helps!

App Example

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.