gutenberg icon indicating copy to clipboard operation
gutenberg copied to clipboard

Iterate zoom out shuffle into a more visual control

Open richtabor opened this issue 1 year ago • 4 comments

Currently, the shuffle control in Gutenberg allows users to iterate through like patterns to pick from. This proposal aims to improve the feature by transforming it into a more visual selecting experience, enhancing usability and providing a more intuitive interface.

Current

Image

Proposed

Replace the existing shuffle control with more visual picker that displays thumbnail previews of patterns in a grid within a popover, instead of iterating to the next pattern. I suggest a max rendering of six, to keep scope minimal here.

Image

richtabor avatar Oct 14 '24 18:10 richtabor

It's worth noting that we have other similar patterns lists like:

  1. Quick inserter previews
  2. Replace in blocks like Query Loop (bigger dialog)

This issue suggests yet another design. Should we proceed with the new design and see if can consolidate designs or this is considered the best one for this specific functionality?

--cc @jasmussen

ntsekouras avatar Oct 17 '24 06:10 ntsekouras

I think shuffle can coexist with this, somehow. But the motivation for making it a visual control is also valid. What might that look like? "Change Design" is perhaps not the best label, in part we should use sentence case, in part I wonder if there's a shorter/simpler label.

jasmussen avatar Oct 17 '24 09:10 jasmussen

I think shuffle can coexist with this, somehow. But the motivation for making it a visual control is also valid.

To me shuffle is like the I'm Feeling Lucky from Google, which I don't find useful at all (if it still exists). Having said that, if we want to preserve both, we can do it.

ntsekouras avatar Oct 17 '24 09:10 ntsekouras

Yea, I don't think we need both shuffle and this change design (maybe change layout) control.

richtabor avatar Oct 18 '24 13:10 richtabor

with more visual picker that displays thumbnail previews of patterns in a grid

The pattern previews in the popover need to be accessible. As such they need a title and a description to provide (in a succint way) information on their basic appearance and purpose. Note thaat this information should preferably be in visible text_ and tooltips can't be used for descriptions.

afercia avatar Oct 22 '24 07:10 afercia

It's worth noting that we have other similar patterns lists like:

  1. Quick inserter previews
  2. Replace in blocks like Query Loop (bigger dialog)

This issue suggests yet another design.

I tend to share @ntsekouras concern as this would be yet another UI to select patterns. I'd suggest to strive for a more holistic approach and ideally provide just one UI to select patterns. The editor is already complex. I'd think design should aim to drastically simplify rather than introducing new UIs and cognitive load.

This unique UI may include randomizing the list of presented patterns, which would be a little more useful than a 'shuffle'.

Also, I'd think the visual previews would need way more space to provide some useful preview. I'm not sure previewing a pattern in a relatively small 'box' would allow to see all the details of a pattern.

afercia avatar Oct 22 '24 07:10 afercia

A note on the current shuffle feature: to my understanding, isn't a real 'shuffle'. It mainly picks up the next pattern in the same category and when it reaches the last one, it starts again from the first one. Not arguing about this mechanism but maybe the name 'Shuffle' isn't tbe best one as it doesn't really communicate how this feature works.

afercia avatar Oct 22 '24 08:10 afercia

Created #66465 related to this.

jasmussen avatar Oct 25 '24 11:10 jasmussen

A note on the current shuffle feature: to my understanding, isn't a real 'shuffle'. It mainly picks up the next pattern in the same category and when it reaches the last one, it starts again from the first one. Not arguing about this mechanism but maybe the name 'Shuffle' isn't tbe best one as it doesn't really communicate how this feature works.

Yes, that's why I proposed "Change design".

richtabor avatar Oct 25 '24 11:10 richtabor

. As such they need a title and a description to provide (in a succint way) information on their basic appearance and purpose.

In the same fashion as the pattern lists in the inspector/inserter, without visible title or description.

richtabor avatar Oct 25 '24 11:10 richtabor

It's worth noting that we have other similar patterns lists

Yes, we can consolidate a bit. I think we should land on one toolbar implementation (this) and one inspector implementation (the "Design" panel).

richtabor avatar Oct 25 '24 11:10 richtabor