Show Pie Menu quadrants #75821

New Issue

William Reynish · 2020-04-17T11:45:22+02:00

William Reynish commented

2020-04-17 11:45:22 +02:00

We have received a few bug reports like #59102 and #74880, in which users are confused by the current design of the pie menus.

The issue is that when the cursor is over or close to certain areas of titles, the item that is highlighted is not always what the user expects based on the current pie UI:

Even though the cursor is closer to Bottom,View Camera is highlighted, and will get executed when clicking or dismissing the pie menu.

This animated Gif also shows the issue very clearly:

This issue stems from poor visual design. The current UI doesn't communicate to users that pie menus are not a radial arrangement of buttons, but really they are a series of equal quadrants (pie pieces):

This is essential to make pie menus fast to operate, because then you can use then via a gesture to quickly execute commands.

We can solve this in a few ways. The simplest solution could be to highlight the currently active pie quadrant:

Then it becomes clear why View Camera is executed while the cursor is in this position.

We can also make changes to the pie menu centers, to help communicate how many pie pieces there are, and which quadrant the cursor is currently in.

Currently it looks like this:

It tells you very roughly where the cursor is, but not which quadrant it is in, nor how many quadrants there are.

With a few changes, it can be a lot more helpful:

More accurate display of where the cursor is
The number of quadrants are communicated via the tick marks, like on a watch face
You can see in which quadrant the cursor is

We have received a few bug reports like #59102 and #74880, in which users are confused by the current design of the pie menus. The issue is that when the cursor is over or close to certain areas of titles, the item that is highlighted is not always what the user expects based on the current pie UI: ![Screenshot 2020-04-17 at 11.25.04.png](https://archive.blender.org/developer/F8478365/Screenshot_2020-04-17_at_11.25.04.png) Even though the cursor is closer to *Bottom*,*View Camera* is highlighted, and will get executed when clicking or dismissing the pie menu. This animated Gif also shows the issue very clearly: ![YKq0rSm1y1.gif](https://archive.blender.org/developer/F8478401/YKq0rSm1y1.gif) This issue stems from poor visual design. The current UI doesn't communicate to users that pie menus are *not* a radial arrangement of buttons, but really they are a series of equal quadrants (pie pieces): ![Screenshot 2020-04-17 at 11.28.36.png](https://archive.blender.org/developer/F8478370/Screenshot_2020-04-17_at_11.28.36.png) This is essential to make pie menus fast to operate, because then you can use then via a gesture to quickly execute commands. We can solve this in a few ways. The simplest solution could be to highlight the currently active pie quadrant: ![Screenshot 2020-04-17 at 11.50.07.png](https://archive.blender.org/developer/F8478405/Screenshot_2020-04-17_at_11.50.07.png) Then it becomes clear why *View Camera* is executed while the cursor is in this position. We can also make changes to the pie menu centers, to help communicate how many pie pieces there are, and which quadrant the cursor is currently in. Currently it looks like this: ![Screenshot 2020-04-17 at 11.37.32.png](https://archive.blender.org/developer/F8478391/Screenshot_2020-04-17_at_11.37.32.png) It tells you very roughly where the cursor is, but not which quadrant it is in, nor how many quadrants there are. With a few changes, it can be a lot more helpful: ![Screenshot 2020-04-17 at 11.43.36.png](https://archive.blender.org/developer/F8478398/Screenshot_2020-04-17_at_11.43.36.png) - More accurate display of where the cursor is - The number of quadrants are communicated via the tick marks, like on a watch face - You can see in which quadrant the cursor is

William Reynish self-assigned this 2020-04-17 11:45:22 +02:00

William Reynish commented

2020-04-17 11:45:22 +02:00

Added subscriber: @WilliamReynish

Duarte Farrajota Ramos commented

2020-04-17 13:00:01 +02:00

Added subscriber: @DuarteRamos

Russell commented

2020-04-17 19:06:30 +02:00

Added subscriber: @Russ1642

Chris Kohl commented

2020-04-22 10:18:31 +02:00

Added subscriber: @ckohl_art

Chris Kohl commented

2020-04-22 10:18:31 +02:00

The blue dot is pretty small. If the segment itself lit up with a highlight color it might be easier to see at a glance.

(Probably not with that yellow color but it illustrates the idea.)

The blue dot is pretty small. If the segment itself lit up with a highlight color it might be easier to see at a glance. ![image.png](https://archive.blender.org/developer/F8488867/image.png) (Probably not with that yellow color but it illustrates the idea.)

William Reynish commented

2020-04-22 15:17:45 +02:00

Alternative design, with different tradeoffs:

This leans even more into the pie/pie piece concept, but is a much bigger change:

Alternative design, with different tradeoffs: This leans even more into the pie/pie piece concept, but is a much bigger change: ![Screenshot 2020-04-22 at 13.49.23-2.png](https://archive.blender.org/developer/F8489269/Screenshot_2020-04-22_at_13.49.23-2.png)

Matjaž Lamut commented

2020-04-22 23:58:58 +02:00

Added subscriber: @lamoot

Hadrien Brissaud commented

2020-05-06 17:36:55 +02:00

Added subscriber: @hadrien

Hadrien Brissaud commented

2020-05-06 17:36:55 +02:00

In #75821#915530, @WilliamReynish wrote:
Alternative design, with different tradeoffs:

This leans even more into the pie/pie piece concept, but is a much bigger change:

It's definitely clearer but also obstructs the view quite a bit. Maybe the quadrant overlay can keep the gradient as in your previous mockups, and have the separators as an additional hint. I don't think it's necessary to keep the small "cursor" indicator, it seems redundant to me (I usually know where my cursor is relative to the pie menu). Yes I did leave it in this mockup.

Also some pie menu entries can be verbose enough to overflow into the next quadrant, your mockup does not show how it would look in such a situation without the usual buttons : would text wrap so as to stay contained inside the quadrant ?

> In #75821#915530, @WilliamReynish wrote: > Alternative design, with different tradeoffs: > > This leans even more into the pie/pie piece concept, but is a much bigger change: > > ![Screenshot 2020-04-22 at 13.49.23-2.png](https://archive.blender.org/developer/F8489269/Screenshot_2020-04-22_at_13.49.23-2.png) It's definitely clearer but also obstructs the view quite a bit. Maybe the quadrant overlay can keep the gradient as in your previous mockups, and have the separators as an additional hint. I don't think it's necessary to keep the small "cursor" indicator, it seems redundant to me (I usually know where my cursor is relative to the pie menu). Yes I did leave it in this mockup. ![mockup_pie_menu_quadrants.png](https://archive.blender.org/developer/F8516343/mockup_pie_menu_quadrants.png) Also some pie menu entries can be verbose enough to overflow into the next quadrant, your mockup does not show how it would look in such a situation without the usual buttons : would text wrap so as to stay contained inside the quadrant ?

Philipp Oeser commented

2020-06-22 13:44:53 +02:00

Added subscriber: @lichtwerk

Philipp Oeser commented

2020-06-22 13:44:53 +02:00

Changed status from 'Needs Triage' to: 'Confirmed'

Philipp Oeser commented

2020-06-22 13:44:53 +02:00

Since we are far into the discussion, I think we can confirm this?
(not completely sure about the meaning of Status of Design tasks, but Needs Triage seems to be the wrong status here...)

Since we are far into the discussion, I think we can confirm this? (not completely sure about the meaning of `Status` of `Design` tasks, but Needs Triage seems to be the wrong status here...)

Albert commented

2020-07-03 09:38:40 +02:00

Added subscriber: @wevon-2

Albert commented

2020-07-03 09:38:40 +02:00

When the radius is small they are more compact and the visual effort is less, but they are misaligned. I have made a simulation with Constraints so that you can check a new alignment.
{F8661186}
Incidentally I think that although it does not solve, but it slightly improves the problem of quadrants, if their proportion varies.
On the left the proposal, on the right the current one.
Scale the octagon to modify the radius.
PieAligned.blend

Regarding the issue of visual fatigue, I have proven that playing pairs games with cards, I win my children when they are grouped, but I lose when they are separated, since the route is longer and they are faster.

When the radius is small they are more compact and the visual effort is less, but they are misaligned. I have made a simulation with Constraints so that you can check a new alignment. {[F8661186](https://archive.blender.org/developer/F8661186/PieAligned.png)}![PieQuadrant.png](https://archive.blender.org/developer/F8661188/PieQuadrant.png) Incidentally I think that although it does not solve, but it slightly improves the problem of quadrants, if their proportion varies. On the left the proposal, on the right the current one. Scale the octagon to modify the radius. [PieAligned.blend](https://archive.blender.org/developer/F8661195/PieAligned.blend) Regarding the issue of visual fatigue, I have proven that playing pairs games with cards, I win my children when they are grouped, but I lose when they are separated, since the route is longer and they are faster.

Philipp Oeser removed the

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

Show Pie Menu quadrants #75821