Suggested UX improvement - clarify which elements control instructions and how (visibility vs content change)

[stephanietuerk]

Wanted to highlight a small UX anti-pattern for you all that I imagine others may find confusing.

Currently there are technically two different interactive elements on the site that change, in some way, what is shown below the top mat-card that is displayed on page load:

1. the "Show me how to update!" button, which makes instructions visible once
2. the "Angular versions" controls, which, on change a. make instructions visible if not already visible and b. change what is shown if instructions are already visible

I understand that you likely don't want to display the instructions on page load because that amount of info is a bit overwhelming on first load, and maybe the default is not what the user wants.

However, I find the persistence of the "Show me how to update" button once instructions are revealed confusing, given that that button has no effect once the instructions have been revealed. To make things worse, because the instructions are long and offscreen, as a naïve user, I can't be 100% sure/visually confirm that if pushing that button doesn't actually change anything.

(This was a problem for me when trying to update between v15 and v16, as there is an issue there where the actual ng update commands are not shown and I couldn't figure out if I was correctly using the interface or not.)

One solution to this could be to remove the "show me how to update" button and put the instructions in a mat-expansion panel below the initial mat-card that is initially toggled closed and can be opened by the user, and that would then remain open as the instructions change by version, unless closed by the user.