Consistent position of Save button in multiple layouts

Question

I'm currently working on a system aimed primarily at desktop users that has a wide range of layouts: some grids, some forms, and a variety of custom interactive interfaces with different designs.

There is currently some debate as to where a 'Save' button should be.

For instance, on a form-based layout, it might make sense for the button to be fixed to the bottom right, as it may follow the user's reading pattern as they complete the form. However, on other interfaces, it's hard to know exactly what the reading pattern would be (e.g. in a grid, or an interactive editor where the controls are already at the top).

Rather than have Save buttons in different places for each of these layouts, we feel that it would be more usable for them to always be in the same place, regardless of layout design.

To begin with, it seems most sensible to have the Save button fixed at the top of the page, rather than the bottom, as it's presumably easier to notice here.

The debate is now whether the button should be in the top left or right. If it's in the top left, I feel that it's most likely that all users would at least notice it. If it's in the top right, the argument is that it would be more intuitive for users, as it would likely follow their reading pattern of the page, regardless of the layout. It also appears that a lot of other systems do this.

I'm just wondering if anyone may have any suggestions on this: principally, what is the 'best' position for a Save button within a system that has these many layouts?

Thanks for reading!

Answer 1

Think about the workflow to find the best position

Back to first principles:

• There is no "canonical" best place for a save button. Rather...
• ...the best position for 'Save' depends on when and where users are going to use it.
• This in turn depends on how the user is utilising the layouts

---

How to think through the design...

Some questions you may want to ask:

• Are users going to save periodically and unpredictably?

  • e.g. for long forms, users sometimes have to save so they can continue later
  • e.g. for interactive forms users may want to save a state so they can experiment with different inputs
  • In these cases it can be helpful to place the save button in a consistent and sticky location because users will hunt for it unpredictably so you want to be sure it can be found (or the consequences are data loss and/or angry users)

• Do you want users to finish a work flow or complete reading the page before saving?

  • This pattern is often used for surveys or compliance forms where it's important
  • In this case, the save button is often placed at the end of the page to compel users to work through the page before seeing the save button.

• Are you doing data validation before saving?

  • Sometimes data validation can be done field-by-field. Sometimes it needs the whole page to be filled out, in which case it can be frustrating to have the save button in a prominent spot only for the user to find out she needs to finish the page before saving.

• Is it too difficult to implement partial/incomplete save?

  • With older systems it can be difficult to implement an interim save: the user needs to finish the form before saving. Here, it may be better to place the save button at the end of the workflow to avoid frustration.

---

Dealing with different layouts and workflows

Once you think through the approach above for the different layouts, you may realise it's best to put the save button in a sticky place (e.g. because most of your layouts have interim save). Or you may realise it's best to put it on the bottom.

BUT you may also find that there is no commonality, because some forms can be saved halfway and others need linear flow. Here are some approaches to dealing with this situation:

• Put the save button in different places (sometimes sticky, sometimes end of form)

  • This is done for expert interfaces where performance and flow really matters, so the button is placed in the best place to save expert user time or to ensure best clarity
  • It can help to use bright colours or shapes to identify the save button if the placement changes between layouts....this way users can hunt for it more effectively.

• Put the save button in a sticky place, and disable or hide it when it's not permitted

  • This is done in situations where layouts are truly diverse (e.g. business analytics dashboards) where you want to put orientation "anchors" to help users feel more comfortable that they are in control and know how to navigate a page. e.g. "that sticky topbar is reassuring because i know it's always there even if the layouts and charts are changing all the time".

Hope that helps

Answer 2

I personally think it's completely okay to have the save button in different places depending on the specific layout. To me, the most important is a consistent "feel". For instance, the save button could be green, and if it's the only green button on all screens/layouts the user will intuitively know to look for the green button.

If you're looking for the save button to be in the exact same position for all layouts, I generally find that right aligned buttons are best for that. Whether it's top or bottom of the page is up to you and the design you're going for, but right sided is my go-to for creating intuitive designs.

Hope that's helpful. Best of luck!