Improve discoverability of “Save Changes” button on AMP settings screen

[westonruter]

Feature description

Given a viewport sized as following when looking at the AMP settings screen:

Notice there is no Save button visible. This is even worse when a Reader theme is selected.

In the same way that there is a fixed bar at the bottom in the onboarding wizard, there may need to be something similar for the settings screen so that users can discover that they need to click “Save Changes”, without having to scroll all the way down the page.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[jwold]

So something like this?

In addition to our own onboarding, I found a few other examples from Yoast and WooCommerce that are similiar.

[westonruter]

Yes, like that.

[jwold]

Right now the gray Save changes button stays at the bottom of the screen. Users may miss it as they open the panels and interact with settings.

Before: https://d.pr/i/70O8mw

After: https://d.pr/i/ncOO9D

Similar to the onboarding wizard, this would make the gray button float along the footer, so that a user could see it at all times.

This follows patterns that other major plugins are using, and could simplify the settings page as users expand the larger panels.

cc @amedina

[westonruter]

Nice thing about this is the user can hit save, then switch to a different tab to see the result. If they don't like it, they can switch back to the first tab and change the selection and re-save, all without changing the vertical scroll position.

[amedina]

I love that approach.

When I was creating the video content, that trip to the basement of the page was painful.

[johnwatkins0]

@jwold How about the save success notice? Right now it flies in from the side. Should we instead work that information (and the rarer save failure notice) into this fixed bottom bar somehow?

[westonruter]

Yes +1

[jwold]

Ok, here's an idea I've been playing with.

1. The initial state is blue and just has the word Save
2. During the save process (similar to Gutenberg) it will switch to say Saving
3. When save is complete it will say Save, until changes are made on the page
4. If an error occurs it will say Save Error, and display text beside that describes the error

Figma: https://www.figma.com/file/SfMlDvHc5KHxJmAZN12PIM/AMP-Design?node-id=1089%3A13117

[westonruter]

@jwold I don't think the button should become the notice, as otherwise what will the user click to retry? Clicking “Save Error” seems to indicate that the error would be saved. I think the success and error notices should be floated to the right.

[jwold]

You're right! That makes more sense, and it follows with the pattern above with notices above the template modes.

[johnwatkins0]

👍 This will work. I can use the "Saved" state, which will revert back to "Save changes" once the user makes additional changes.

[jwold]

Confirmed in QA! Tested online and offline states.