10 ms·

Kando: The Cross-Platform Pie Menu

144 points by pyinstallwoes 3y ago

kevingadd 3y ago
I'm surprised to see that this whole thing seems to be implemented in typescript and css, even though it lists a bunch of specific platforms/desktop environments like Windows 11, KDE, etc. I guess it's for use in Electron or something? Grepping through the code I found no references to aria or roles or title, which makes me assume it's completely inaccessible to screen readers or other assistive tools. It would be cool if the README called that out at least a little bit. It also makes me wonder whether it can be used via keyboard or gamepad instead of just mouse, since pie menus are pretty analog-stick friendly and fairly keyboard-unfriendly. (Incidentally, Windows 11 has pretty comprehensive gamepad support, at least for apps using the UWP/WinUI stack. If you're on Win11 and have an xbox controller, try it sometime - the settings window is a good spot to mess with it.)
- schneegans 3y ago
  Hey, I am the developer of Kando. Currently, it is primarily designed for touch and mouse input. Adding gamepad support in the future would be pretty cool though! I have seen people using Kando on the Steam Deck, so this is definitely an interesting direction.
- lloeki 3y ago
  > and fairly keyboard-unfriendly Numpad (or numpad-like key arrangement) disagrees (8 directions + center to go back) Other input modes where it can shine+ are eye-only control (accessibility / hands-free) and hand/arm control (like Kinect) + with a properly designed implementation for this type of interaction.
robbiejs 3y ago
I have never seen a menu like this before, but seeing the video, I think I would like it. Looks like a very fast way to find whatever you're looking for.
- NamTaf 3y ago
  Counter Strike: Global Offensive used a similar concept for its round-start buy menu because of needing to support console controllers. You can see an example here: https://www.youtube.com/watch?v=ogVy0S_jVXU https://www.youtube.com/watch?v=ogVy0S_jVXU Interestingly, CS2 does not use the same menu, probably because they've moved away from trying to support consoles as a target.
  - ace2358 3y ago
    Not uncommon in video games (like hold left trigger to open menu, use right stick to select and then let go of left trigger to select). Also seen it in fusion360 (cad software), maybe blender and also a few other dsp/electronic design software. I love it!
    - NamTaf 3y ago
      That's true; now thinking about it I also remember it from very-desktop-based Anno 1800. The quick-shortcut menu for the mouse (to build a shortlist of buildings, etc.) is a pie menu.
    - viraptor 3y ago
      Baldur's gate 3 took it to the next level. It's multiple radial menus for the actions/items. I wish they also applied the same idea for the context menus rather than a list. It works really well in practice. https://images.pushsquare.com/70ee3def6aca7/baldurs-gate-3-how-to-level-up-guide-2.large.jpg https://images.pushsquare.com/70ee3def6aca7/baldurs-gate-3-h... https://static1.srcdn.com/wordpress/wp-content/uploads/2023/08/bg3-radial-menu.jpg https://static1.srcdn.com/wordpress/wp-content/uploads/2023/...
- starkparker 3y ago
  Radial menus are heavily associated with video games. The Sims in 2000 really used them extensively and IMO well in a mouse/keyboard environment, and they've become a common method to visually surface options in gamepad- and joystick-focused games. The One Laptop Per Child/Sugar UI also used them since they were accessible independent of language and input method, and also self-surfaced options in a way that allowed or encouraged exploration. (And then, full-circle as it were, Maxis/EA's Don Hopkins, who implemented The Sims' radial menus, reimplemented a radial menu for the OLPC port of SimCity.)[1] 1: https://web.archive.org/web/20171012100255/http://www.donhopkins.com/drupal/taxonomy_menu/4/49/63/65 https://web.archive.org/web/20171012100255/http://www.donhop... ; sadly his website relied on Drupal and broke. He moved to Medium, where his many pie menu posts have kind of scattered. See also https://donhopkins.medium.com/pie-menu-timeline-21bec9b21620 https://donhopkins.medium.com/pie-menu-timeline-21bec9b21620 where Don breaks down the timeline of radial/pie menu concepts back to the 1968 MOAD
xnx 3y ago
Pie menus are great on consoles where items can be selected with muscle-memory alone using thumbsticks. For computer interfaces the tradeoffs (unfamiliary, don't fit text well, hard to navigate by keyboard) have outweighed their benefits (fixed distance to target).
- wk_end 3y ago
  Pie menus are often used in 3D modelling programs (Maya, I think Blender and SolidWorks). The situation seems to be: "I'm a professional in a kind of flow state, I frequently need extremely quick access to a fairly small subset of context-sensitive commands, I'd ideally not like to move my mouse too much away from the thing I'm focused on, much of my work is mouse-driven because it involves making fine visually-directed adjustments by dragging the mouse."
  - schneegans 3y ago
    Exactly this. And in addition, I think there's lots of potential for touch screen users. As soon as you do not have easy access to a physical keyboard, pie menus can provide a great alternative to keyboard shortcuts.
    - staplers 3y ago
      Confused how this would be implemented on phones where real estate is small. A giant button in the middle of all apps?
      - schneegans 3y ago
        I am more thinking about tablets and convertibles. But even on a phone a similar concept could work: You summon the menu with some kind of gesture (for instance dragging over a screen edge). The menu pops up in the center of the screen and you can select an item with just a single directional swipe. If the selected item is a submenu and contains some child items, it will slide to the center of the screen and you can do another swipe to select one of the children. So you could select an item extremely quickly with just two swipes. And there are already quite a few items at level two! If your top-level menu has eight submenu items and each submenu again contains seven items (+one to go back to the root) you have already 56 possible items in this menu. And you could select one of them in well beyond a second, even without looking at the screen!
crazygringo 3y ago
I've never understood the benefits of a pie menu in regular computing. They've always seemed difficult to read (my eyes travel linearly easily, but following around a circle is non-intuitive), and similarly difficult to click. Even using a gamepad joystick, I often find myself accidentally selecting a neighbor of what I meant to pick, because I wasn't getting the angle exactly right, or inadvertently relaxed the joystick as I clicked the button to confirm. Keyboard shortcuts, or just regular linear context menus, have always seemed a lot faster and easier to use, respectively, on the desktop. On game consoles I can understand that they're more useful because you don't have a keyboard or mouse... but even then it's more a question of being the least-bad alternative when you really need to instantly select between 8 alternatives. Am I missing a context where the usability of a pie menu is superior?
- SnooSux 3y ago
  Keyboard shortcuts don't have the discoverability of a menu interface but are good for power users. Ideally they would complement each other. I really like the ergonomics of pie menus, though my experience is limited to Blender. Navigating linear menus require more fine movements than flicking the mouse in one of 8 or fewer directions. And the direction of mouse movement becomes muscle memory the way a keyboard shortcut does. I find a pie menu works well in a mouse-heavy workflow like 3D modelling. But there are definitely applications where it wouldn't be the right fit.
  - crazygringo 3y ago
    > I find a pie menu works well in a mouse-heavy workflow like 3D modelling. Ah thank you, that's very helpful. I can see how you wouldn't want to move your hand from mouse to keyboard for keyboard shortcuts that aren't one-handed, but the pie menu would allow you to develop a spatial/directional muscle memory (like keyboard shortcuts have) that linear context menus don't have. Exactly the context I was missing -- I've never done any 3D modeling!
- ramses0 3y ago
  It's "point free" (can be initiated from anywhere), and can be "regular" (same motions results in the same actions), making it navigable without looking or requiring precise selection. Close cousin to "gesture" interfaces. eg: Up/Right/Up => something, Up/Left/Down => something else. With three gestures you get ~4x3x3 => 36 actions => a whole alnum-keyboard of 26+10 digits! (assuming you only allow four gestures and remove the "reverse" after choosing any direction, eg: Left/Right/Left would be equivalent to Left/... with pending input). Even better if you throw in an 8-way selector minimally in the first position.
WhereIsTheTruth 3y ago
100+mb for a pie menu, we are reaching new levels of bloat never seen before..
- schneegans 3y ago
  I thought a lot about this. The reasons for choosing Electron are outlined here: https://github.com/orgs/kando-menu/discussions/58 https://github.com/orgs/kando-menu/discussions/58
  - deleted 3y ago
    [deleted]
eviks 3y ago
Awesome interface idea, much faster and easier to select vs regular menus, wish it were a standard, but meanwhile hopefully this vision will bloom!
dbrueck 3y ago
I wonder if it would make more sense for the previously-traversed UI to move off to the side, rather than having the user move to follow it, as a way to reduce the amount of mouse travel required from the user. They'd always need to move some, especially when the new options would otherwise move off the screen, but in general this would require less movement.
T3RMINATED 3y ago
[dead]
baerrie 3y ago
Interfaces are meant to have friction, that’s what guides the user more than the “happy path”. This radial menu is all happy path. Having a list in a menu, with the most used selections higher up in the list, give the user context like “this is higher so it is more likely to be what I next” meaning they usually don't traverse the whole list to get to the lower and less used options.
- pyinstallwoes 3y ago
  Interfaces aren’t meant to have friction in as much carpets aren’t meant to give you rug burns. Friction is a by product of user experience that hasn’t successfully automated what the user needed. The ultimate form of software is one that functions on its own without user input, the second is “wish” based, as you say it does. Caveat emperor.
- maxbond 3y ago
  I like this a lot, this is a good analysis, but to be fair, they did show a hierarchical pie menu. So there is still friction and prioritization.
dfex 3y ago
Great to see someone still experimenting with alternative UI paradigms - the video looks amazing! Sadly it doesn't seem to launch on an M1 Macbook Pro - the process(es) start but no application/interface appears
- tln 3y ago
  Check your menu bar - it added a status menu for me on the right. ^space is the hotkey.
  - dfex 3y ago
    groan thank you - completely missed this
RealCodingOtaku 3y ago
Reminds me of “The GUI should be better. A lot better” by Ross Scott[0]. Edit: looks like this project is already submitted to Ross Scott's forum post[1]. [0] https://www.youtube.com/watch?v=AItTqnTsVjA https://www.youtube.com/watch?v=AItTqnTsVjA [1] https://www.accursedfarms.com/forums/topic/5784-the-gui-should-be-better/?do=findComment&comment=254741 https://www.accursedfarms.com/forums/topic/5784-the-gui-shou...
cyberax 3y ago
[flagged]
bkyan 3y ago
Is there a web version of this menu system?
danr4 3y ago
looks great. currently using Charmstone on my mac, can't imagine life without it.

144 points by pyinstallwoes 3y ago

I'm surprised to see that this whole thing seems to be implemented in typescript and css, even though it lists a bunch of specific platforms/desktop environments like Windows 11, KDE, etc. I guess it's for use in Electron or something? Grepping through the code I found no references to aria or roles or title, which makes me assume it's completely inaccessible to screen readers or other assistive tools. It would be cool if the README called that out at least a little bit. It also makes me wonder whether it can be used via keyboard or gamepad instead of just mouse, since pie menus are pretty analog-stick friendly and fairly keyboard-unfriendly. (Incidentally, Windows 11 has pretty comprehensive gamepad support, at least for apps using the UWP/WinUI stack. If you're on Win11 and have an xbox controller, try it sometime - the settings window is a good spot to mess with it.)

schneegans 3y ago
Hey, I am the developer of Kando. Currently, it is primarily designed for touch and mouse input. Adding gamepad support in the future would be pretty cool though! I have seen people using Kando on the Steam Deck, so this is definitely an interesting direction.
lloeki 3y ago
> and fairly keyboard-unfriendly Numpad (or numpad-like key arrangement) disagrees (8 directions + center to go back) Other input modes where it can shine+ are eye-only control (accessibility / hands-free) and hand/arm control (like Kinect) + with a properly designed implementation for this type of interaction.

robbiejs 3y ago

I have never seen a menu like this before, but seeing the video, I think I would like it. Looks like a very fast way to find whatever you're looking for.

NamTaf 3y ago
Counter Strike: Global Offensive used a similar concept for its round-start buy menu because of needing to support console controllers. You can see an example here: https://www.youtube.com/watch?v=ogVy0S_jVXU https://www.youtube.com/watch?v=ogVy0S_jVXU Interestingly, CS2 does not use the same menu, probably because they've moved away from trying to support consoles as a target.
- ace2358 3y ago
  Not uncommon in video games (like hold left trigger to open menu, use right stick to select and then let go of left trigger to select). Also seen it in fusion360 (cad software), maybe blender and also a few other dsp/electronic design software. I love it!
  - NamTaf 3y ago
    That's true; now thinking about it I also remember it from very-desktop-based Anno 1800. The quick-shortcut menu for the mouse (to build a shortlist of buildings, etc.) is a pie menu.
  - viraptor 3y ago
    Baldur's gate 3 took it to the next level. It's multiple radial menus for the actions/items. I wish they also applied the same idea for the context menus rather than a list. It works really well in practice. https://images.pushsquare.com/70ee3def6aca7/baldurs-gate-3-how-to-level-up-guide-2.large.jpg https://images.pushsquare.com/70ee3def6aca7/baldurs-gate-3-h... https://static1.srcdn.com/wordpress/wp-content/uploads/2023/08/bg3-radial-menu.jpg https://static1.srcdn.com/wordpress/wp-content/uploads/2023/...
starkparker 3y ago
Radial menus are heavily associated with video games. The Sims in 2000 really used them extensively and IMO well in a mouse/keyboard environment, and they've become a common method to visually surface options in gamepad- and joystick-focused games. The One Laptop Per Child/Sugar UI also used them since they were accessible independent of language and input method, and also self-surfaced options in a way that allowed or encouraged exploration. (And then, full-circle as it were, Maxis/EA's Don Hopkins, who implemented The Sims' radial menus, reimplemented a radial menu for the OLPC port of SimCity.)[1] 1: https://web.archive.org/web/20171012100255/http://www.donhopkins.com/drupal/taxonomy_menu/4/49/63/65 https://web.archive.org/web/20171012100255/http://www.donhop... ; sadly his website relied on Drupal and broke. He moved to Medium, where his many pie menu posts have kind of scattered. See also https://donhopkins.medium.com/pie-menu-timeline-21bec9b21620 https://donhopkins.medium.com/pie-menu-timeline-21bec9b21620 where Don breaks down the timeline of radial/pie menu concepts back to the 1968 MOAD

xnx 3y ago

Pie menus are great on consoles where items can be selected with muscle-memory alone using thumbsticks. For computer interfaces the tradeoffs (unfamiliary, don't fit text well, hard to navigate by keyboard) have outweighed their benefits (fixed distance to target).

wk_end 3y ago
Pie menus are often used in 3D modelling programs (Maya, I think Blender and SolidWorks). The situation seems to be: "I'm a professional in a kind of flow state, I frequently need extremely quick access to a fairly small subset of context-sensitive commands, I'd ideally not like to move my mouse too much away from the thing I'm focused on, much of my work is mouse-driven because it involves making fine visually-directed adjustments by dragging the mouse."
- schneegans 3y ago
  Exactly this. And in addition, I think there's lots of potential for touch screen users. As soon as you do not have easy access to a physical keyboard, pie menus can provide a great alternative to keyboard shortcuts.
  - staplers 3y ago
    Confused how this would be implemented on phones where real estate is small. A giant button in the middle of all apps?
    - schneegans 3y ago
      I am more thinking about tablets and convertibles. But even on a phone a similar concept could work: You summon the menu with some kind of gesture (for instance dragging over a screen edge). The menu pops up in the center of the screen and you can select an item with just a single directional swipe. If the selected item is a submenu and contains some child items, it will slide to the center of the screen and you can do another swipe to select one of the children. So you could select an item extremely quickly with just two swipes. And there are already quite a few items at level two! If your top-level menu has eight submenu items and each submenu again contains seven items (+one to go back to the root) you have already 56 possible items in this menu. And you could select one of them in well beyond a second, even without looking at the screen!

crazygringo 3y ago

I've never understood the benefits of a pie menu in regular computing. They've always seemed difficult to read (my eyes travel linearly easily, but following around a circle is non-intuitive), and similarly difficult to click. Even using a gamepad joystick, I often find myself accidentally selecting a neighbor of what I meant to pick, because I wasn't getting the angle exactly right, or inadvertently relaxed the joystick as I clicked the button to confirm. Keyboard shortcuts, or just regular linear context menus, have always seemed a lot faster and easier to use, respectively, on the desktop. On game consoles I can understand that they're more useful because you don't have a keyboard or mouse... but even then it's more a question of being the least-bad alternative when you really need to instantly select between 8 alternatives. Am I missing a context where the usability of a pie menu is superior?

SnooSux 3y ago
Keyboard shortcuts don't have the discoverability of a menu interface but are good for power users. Ideally they would complement each other. I really like the ergonomics of pie menus, though my experience is limited to Blender. Navigating linear menus require more fine movements than flicking the mouse in one of 8 or fewer directions. And the direction of mouse movement becomes muscle memory the way a keyboard shortcut does. I find a pie menu works well in a mouse-heavy workflow like 3D modelling. But there are definitely applications where it wouldn't be the right fit.
- crazygringo 3y ago
  > I find a pie menu works well in a mouse-heavy workflow like 3D modelling. Ah thank you, that's very helpful. I can see how you wouldn't want to move your hand from mouse to keyboard for keyboard shortcuts that aren't one-handed, but the pie menu would allow you to develop a spatial/directional muscle memory (like keyboard shortcuts have) that linear context menus don't have. Exactly the context I was missing -- I've never done any 3D modeling!
ramses0 3y ago
It's "point free" (can be initiated from anywhere), and can be "regular" (same motions results in the same actions), making it navigable without looking or requiring precise selection. Close cousin to "gesture" interfaces. eg: Up/Right/Up => something, Up/Left/Down => something else. With three gestures you get ~4x3x3 => 36 actions => a whole alnum-keyboard of 26+10 digits! (assuming you only allow four gestures and remove the "reverse" after choosing any direction, eg: Left/Right/Left would be equivalent to Left/... with pending input). Even better if you throw in an 8-way selector minimally in the first position.

WhereIsTheTruth 3y ago

100+mb for a pie menu, we are reaching new levels of bloat never seen before..

schneegans 3y ago
I thought a lot about this. The reasons for choosing Electron are outlined here: https://github.com/orgs/kando-menu/discussions/58 https://github.com/orgs/kando-menu/discussions/58
- deleted 3y ago
  [deleted]

eviks 3y ago

Awesome interface idea, much faster and easier to select vs regular menus, wish it were a standard, but meanwhile hopefully this vision will bloom!

dbrueck 3y ago

I wonder if it would make more sense for the previously-traversed UI to move off to the side, rather than having the user move to follow it, as a way to reduce the amount of mouse travel required from the user. They'd always need to move some, especially when the new options would otherwise move off the screen, but in general this would require less movement.

T3RMINATED 3y ago

[dead]

baerrie 3y ago

Interfaces are meant to have friction, that’s what guides the user more than the “happy path”. This radial menu is all happy path. Having a list in a menu, with the most used selections higher up in the list, give the user context like “this is higher so it is more likely to be what I next” meaning they usually don't traverse the whole list to get to the lower and less used options.

pyinstallwoes 3y ago
Interfaces aren’t meant to have friction in as much carpets aren’t meant to give you rug burns. Friction is a by product of user experience that hasn’t successfully automated what the user needed. The ultimate form of software is one that functions on its own without user input, the second is “wish” based, as you say it does. Caveat emperor.
maxbond 3y ago
I like this a lot, this is a good analysis, but to be fair, they did show a hierarchical pie menu. So there is still friction and prioritization.

dfex 3y ago

Great to see someone still experimenting with alternative UI paradigms - the video looks amazing! Sadly it doesn't seem to launch on an M1 Macbook Pro - the process(es) start but no application/interface appears

tln 3y ago
Check your menu bar - it added a status menu for me on the right. ^space is the hotkey.
- dfex 3y ago
  groan thank you - completely missed this

RealCodingOtaku 3y ago

Reminds me of “The GUI should be better. A lot better” by Ross Scott[0]. Edit: looks like this project is already submitted to Ross Scott's forum post[1]. [0] https://www.youtube.com/watch?v=AItTqnTsVjA https://www.youtube.com/watch?v=AItTqnTsVjA [1] https://www.accursedfarms.com/forums/topic/5784-the-gui-should-be-better/?do=findComment&comment=254741 https://www.accursedfarms.com/forums/topic/5784-the-gui-shou...

cyberax 3y ago

[flagged]

bkyan 3y ago

Is there a web version of this menu system?

danr4 3y ago

looks great. currently using Charmstone on my mac, can't imagine life without it.