Assembler: better feedback/confirmation when user moves a pattern via large preview action bar

[autumnfjeld]

Description

See slack convo: p1681158070673829-slack-CRWCHQGUB
When user is in pattern selection mode, and cannot see the list view, and they move a pattern via the large preview action bar, then the user may not realize the pattern has moved. In most cases, there is no visual feedback that the pattern has moved because the view size of the large preview is such that normally user can only see one pattern. The video below demonstrates this.

Screen.Capture.on.2023-04-11.at.16-10-30.mp4

Note that if the user is able to see the list view, they can see their pattern moving in the list, so there is visual feedback in that scenario.

Needs Design and a decision

How can we give the user visual feedback that the pattern has been moved? Some ideas (using T-shirt sizing for estimating difficulty):

• Show a snackbar confirmation [XS]
• Animate the move motion, similar to the Editor however my tests show the Editor has similar problems sometimes [M, but fun for dev]
• Remove the arrows and only allow delete functionality when user is in "pattern selection mode" and can't see the list view. [XS]. (Not a great option IMO, just throwing all ideas on the table.)
• Any other ideas?

Dev Tasks

• Spike or discussion on animation feasability
• TBD once a decision is made o

[autumnfjeld]

In the assembler:
https://user-images.githubusercontent.com/5665959/231072109-9fbe2d69-82e3-4f26-8f14-c0fa10762ff0.mov

In the editor:
https://user-images.githubusercontent.com/5665959/231074800-bff95516-fbfa-4fdb-924e-c464a170359f.mov

[autumnfjeld]

@Automattic/lego What are your thoughts on creating an animation for visual feedback for the "move" action?

[davewhitley]

Another idea is zooming the preview out, so it would be less likely that a pattern would be tall enough to cause problems. I didn't realize the editor had the same problem, but I think the animation might help a bit for patterns not quite as tall?

[autumnfjeld]

I'll plug my idea for the thumbnail list view again here. LOL. Because that is a zoomed out view. But it really doesn't solve the problem of when the user is in active pattern select mode (where the list view is not visible). Would need to understand better how/when you think zoom would happen.

To be honest the idea of move doesn't make a whole lot of sense at the scale of the large preview windown. It's just not possible for the user to see their whole layout, so move isn't really helpful until they get to a view where they can see multiple patterns at once. It might be worth considering only have delete in the large preview. And only allow provide move when the user is in the list view.

[davewhitley]

Here's a gif of a zoom effect with the pattern sidebar open. It reduces the width of the preview but also zooms out. It would also be great to have a zoom button at the top next to the mobile toggles that allow a user to zoom out to ~50% at any time. Basically, the iframe preview scaling would be 50% instead of 100%.

[autumnfjeld]

Look for issue on zoom feature. Then close this.

[autumnfjeld]

@miksansegundo I think I misunderstood you that there is another issue that covers the same concept as this issue.

This issue #74833 is about zooming a pattern preview, not about zooming the homepage preview

[miksansegundo]

I meant this other issue #75327

[lucasmendes-design]

I like the animation that @davewhitley did previously but my only concern is for small screens. I suspect that we need to have breakpoints here. Otherwise, the site preview will be squeezed on the right side.

• I like the animation as the Editor does.
• We use the snackbar to remove, add and replace. We could also use it to show the changing order. But I'm not sure if this would be strange, I believe is going to be all right. Something like that is below:

[lucasmendes-design]

I put in my list the feature Zoom in and out. It's beneficial to offer that for SA so users see the look-and-feel of their websites. Do we have that already in our plan?

[lucasmendes-design]

Just remember about this metric here

Data shows that most people (~90%) choose six patterns or less. This is a valuable data point for design constraints.

So, I don't think we'll have the problem of multiple snackbar.

[autumnfjeld]

I'm going to close this since we now have the zoom feature: #83034