Site Assembler - Sections Pattern Inserter, Categories, and Large Preview UX

[miksansegundo]

Related Prototype, #75521 (comment)

What

• Users feel frustrated when the sidebars cover the larger view on the right
• Users must do too many clicks to add section patterns

BEFORE	AFTER

Why

For a better UX, less clicks and easier to visualize the added patterns in the large preview

How

• When user clicks to start the process of adding section patterns
  • The "Sections" screen won't show if there aren't patterns added. User goes directly to the "Add patterns" screen
  • The "Add patterns" screen has the first category open by default (currently this would be Text patterns).
  • The large preview will not be partially hidden by side nav because the patterns panel won't float over it

[miksansegundo]

@autumnfjeld @davewhitley What are your thoughts? Let's move it to ready for development when ready.

[davewhitley]

I would like to try it out and see if it's a better experience. We'd need to zoom out the large preview though I think for it to work.

[lucasmendes-design]

Hi @miksansegundo, what is the latest on this? Is there anything I can help?

[miksansegundo]

We could try adding a quick CSS transition. We decided to not use it on the current version because it didn't perform well.

What if we open the first category automatically when we are on this screen "Add patterns"?

[autumnfjeld]

I think this issue has evolved a bit and could encompass the following criteria:

• Do not block the large preview with any sidebars. Large preview should fit the available area to the right of any open sidebars.
• When user clicks to start the process of adding section patterns then the categories list AND the first category should open showing the list of patterns (currently this would be Text patterns).
  • The empty list will NOT show
  • The large preview will not be hidden by side navs

If this makes sense to you @miksansegundo & @lucasmendes-design let's update the issue description to make that clear and start working on this. :)

For reference this is what I mean by "empty list".

When the user lands on the SA, then clicks "Add sections" we don't need to show this empty list, we can directly open the categories list.

[okmttdhr]

I'm just commenting here since I found another piece of feedback related to this issue.

As I clicked around here, I was frustrated that the sidebars covered the larger view on the right. I tried making the browser wider, but that doesn’t eliminate the overlap.
pciE2j-25t-p2

[miksansegundo]

Thanks @autumnfjeld. I'll update the description and start working on this.

[lucasmendes-design]

When the user lands on the SA, then clicks "Add sections" we don't need to show this empty list, we can directly open the categories list.

Plus one.

[autumnfjeld]

For reference, I'm adding this link to Dave's design https://user-images.githubusercontent.com/618551/232594883-357abbc9-5175-4838-b919-be450be63758.gif.

The animation however is unnecessary as we can just go with Miguel's suggestion above.

What if we open the first category automatically when we are on this screen "Add patterns"?