Common-voice: SAVED confirmation

[KBPsystem777]

I tried to update my profile here: https://voice.mozilla.org/profile
after making the changes, there should be an interactive notification/pop-up which says my info is updated

[jdittrich]

Indeed – currently, the button is used both for doing the action (do a "save")

and the confirmation (settings were "saved").

This is non-standard (at least I know no other systems doing this) and would be better done by deactivating the button if nothing is to be saved and a separate "saved" indicator as suggested above

[KBPsystem777]

Agreed on disabling save button when there's no info change. But still need to enhance this for color blind users

[SimonHFrost]

I disabled the save button when there are no changes. Is that sufficient?

[Gregoor]

I think it's not too uncommon for buttons to be also indicators of a form's state, combining progress meters and submit buttons would probably be a more classical example of this (which we also do in the recording screen). I personally like it the way it currently is, but would also be willing to change it.
@m-branson, do you have a quick-take on this?

[mbransn]

Thanks for looping me in @Gregoor, great conversation happening here!

I believe the current states of the save button are preferable, though agree, an additional notification would be helpful when save is pressed and becomes saved. Recommend utilizing the banner styling that occurs when a profile is saved in the record flow, see below. Also note, banner copy should update depending on whether this is a profile creation ("...profile created!") or profile update ("...profile saved!").

RE: disabled state use, I don't feel it's needed. The current button transitions between filled and outlined states and this transition occurs concurrently with any form interaction. Also, as these are black & white, optimal contrast is achieved for accessibility. @Gregoor perhaps we can improve the text as save and saved are so similar in appearance to one another? I recommend utilizing save profile and saved. This should prove more legible and provide better visual feedback to users (especially in combination with the banner).

Appreciate the feedback and input @KBPsystem777 @jdittrich @SimonHFrost -- really great to see UX conversations happening on this repo. Keep them coming! 👍

cc @mikehenrty

[SimonHFrost]

:+1: I updated my PR so that it now only changes the button text on the pending save state: https://github.com/mozilla/voice-web/pull/766

[Fjoerfoks]

I think this is still confusing for the not so tech-savvy people, which are just the people you want to attract to the website to donate their voice, and who visit the website for the first time. In my opinion this button should be built as what is commonly being used and as lowly accessible as possible.
It is also unclear to a user what happens with the information, is it written into a cookie and reused after a revisit? When one deletes his cookies, or works in private mode, it has to be reentered, which might become a hurdle. Can't say that creating an account is a solution though.
Maybe something to reconsider.

[Gregoor]

A new profile experience (with login) is coming in one of the next months and we'll make sure that the saving indicator and the overall experience is less confusing.

Thanks everybody for your thoughts, they're informing how we move forward! 🚀