From #16821:
Use existing block patterns whenever possible (ie. the block toolbar).
Exploring the problem
Problem:
Introducing a new pattern just for the navigation menu item block controls forces users to learn a new pattern that isn't reusable elsewhere, potentially leading to confusion.
How we determine if the solution has succeeded:
@mtias @mapk @karmatosed How did you want to select the best solution here? Ideas:
- A/B compare usability tests with original designs
- Take a group consensus / dot voting
- Determine a decider responsible for selecting the best path forward
Potential roadblocks:
Whatever we land on needs to allow for vertical and horizontal rearranging in a relatively small space. (This will be explored in more depth next, but it's worth keeping in mind here since it will impact things here.)
We also don't want to lose all the work we did in the accessibility walkthroughs. How do we allow keyboard and screen reader users to easily move elements without drag-and-drop?
Original controls
A refresher on the original designs we landed on. These tested well with users but represent a new pattern for users to learn, since they use custom controls.
Gallery style controls
Following the inner-block pattern used here by the gallery block allows us to keep things a bit more visually simple whilst still avoiding introduction of a new pattern.
This allows us to also extend these changes to the gallery block, should galleries need more advanced controls. We can use a custom ellipsis dropdown for advanced move controls, and move the simple (back/forward) move controls directly into the block controls, keeping things more streamlined.
Technically, the gallery isn't a good example to copy—we aren't providing controls for a block, but rather an item inside a block. But this is a technical distinction. Do users know or care about this distinction? Is it important to their understanding and mental model of how the system works?
The Block Toolbar
This was modelled after the columns block, which uses blocks inside blocks. The columns block is sort of notoriously hard to use (I keep getting the + icon jumping all around and all over the place whilst trying to use it.) I'm a bit concerned this may become extremely difficult to work with when we'll have a whole lot of pretty small blocks closely aligned.
Can we add anything to the ellipsis menu if we follow this approach? Do we need an extra flyout to represent advanced move controls? Do we need to drop advanced move controls, or move them to a sidebar, neither of which feels like a super accessible solution.
From #16821:
Exploring the problem
Problem:
Introducing a new pattern just for the navigation menu item block controls forces users to learn a new pattern that isn't reusable elsewhere, potentially leading to confusion.
How we determine if the solution has succeeded:
@mtias @mapk @karmatosed How did you want to select the best solution here? Ideas:
Potential roadblocks:
Whatever we land on needs to allow for vertical and horizontal rearranging in a relatively small space. (This will be explored in more depth next, but it's worth keeping in mind here since it will impact things here.)
We also don't want to lose all the work we did in the accessibility walkthroughs. How do we allow keyboard and screen reader users to easily move elements without drag-and-drop?
Original controls
A refresher on the original designs we landed on. These tested well with users but represent a new pattern for users to learn, since they use custom controls.
Gallery style controls
Following the inner-block pattern used here by the gallery block allows us to keep things a bit more visually simple whilst still avoiding introduction of a new pattern.
This allows us to also extend these changes to the gallery block, should galleries need more advanced controls. We can use a custom ellipsis dropdown for advanced move controls, and move the simple (back/forward) move controls directly into the block controls, keeping things more streamlined.
Technically, the gallery isn't a good example to copy—we aren't providing controls for a block, but rather an item inside a block. But this is a technical distinction. Do users know or care about this distinction? Is it important to their understanding and mental model of how the system works?
The Block Toolbar
This was modelled after the columns block, which uses blocks inside blocks. The columns block is sort of notoriously hard to use (I keep getting the + icon jumping all around and all over the place whilst trying to use it.) I'm a bit concerned this may become extremely difficult to work with when we'll have a whole lot of pretty small blocks closely aligned.
Can we add anything to the ellipsis menu if we follow this approach? Do we need an extra flyout to represent advanced move controls? Do we need to drop advanced move controls, or move them to a sidebar, neither of which feels like a super accessible solution.