Insufficient affordance for the user that a new form has been loaded into the tray [#2786197]

Problem/Motivation

When the user is in edit mode and clicks around different editable on the page, on the first click the tray opens providing visual feedback that there are editing options available. However on the next click on a new item the form in the tray changes instantaneously. Since the form is outside the users area of focus and often the form is quite similar to the form that preceded it the change is barely perceptible.

Proposed resolution

On the load of each new form into the tray, fade and slide out the current form and fade and slide in the new form with a delay of at least one second. Both the fade and the motion should provide enough affordance to the user that a change has taken place.

Remaining tasks

Add the animation
Usability test
Cross-browser test

User interface changes

New forms animate in to the tray

API changes

None

Data model changes

None

Comments

Comment #1

18 August 2016 at 13:10

tkoleary created an issue. See original summary.

Comment #2

Bojhan CreditAttribution: Bojhan as a volunteer and commented 23 August 2016 at 10:08

I would assume it slides in? Fading works, but feels more adapt to a modal not a right-side slider.

Comment #3

tkoleary CreditAttribution: tkoleary at Acquia commented 23 August 2016 at 13:37

@bojhan

I would assume it slides in? Fading works, but feels more adapt to a modal not a right-side slider.

It slides in the first time. The issue is that once the tray is open and you click to a *different* block the tray does not close and open again, only the form changes and it changes without animation. So for example if I go from the search form block to any custom block, the only visual change is the block description, so the transition is very easy to miss.

We could close and open the tray again every time the user clicks on a new block, but I think that's overkill, so what I'm suggesting is keeping the tray in place but sliding out the first form and sliding in the second, which I think should be enough movement to catch the user's eye.

The fade-out is just an additional effect to add emphasis.