Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Creating a Radial Menu in CSS

stackoverflow.com

Post reply on HN
Print view View original

21–30 of 80 posts

Re: Creating a Radial Menu in CSS

#21

Post by Odin9 »

brudgers wrote: post #19

I remember an article in Dr. Dobbs hailing pie menus as the future of user interfaces. It was the early 90's. I have always thought they were a great idea. Currently Microsoft Office One Note uses them. Here's a list of references for pie menus (the Dr. Dobbs article is cited): http://www.cs.cornell.edu/boom/2001sp/bronevetsky/Circle%20M... In fairness to Dr. Dobbs, they also hailed hypertext as the future about that…

1993's Secret of Mana was well known for its ring menu. I don't think radial menus are practical with mice, they fit controllers and console games better (where interacting with menus is slower).

Re: Creating a Radial Menu in CSS

#22

Post by jared314 »

brudgers wrote: post #19

I remember an article in Dr. Dobbs hailing pie menus as the future of user interfaces. It was the early 90's. I have always thought they were a great idea. Currently Microsoft Office One Note uses them. Here's a list of references for pie menus (the Dr. Dobbs article is cited): http://www.cs.cornell.edu/boom/2001sp/bronevetsky/Circle%20M... In fairness to Dr. Dobbs, they also hailed hypertext as the future about that…

Every circular menu implementation i've seen still suffers from low command "density", lack of space for text, difficult to use sub-menus, maintaining predictable ordering, and, with touch UIs, commands hidden by the user's own finger.

I really want them, but squares are easier to work with.

Re: Creating a Radial Menu in CSS

#23

Post by pazimzadeh »

Odin9 wrote: post #21
brudgers wrote: post #19

I remember an article in Dr. Dobbs hailing pie menus as the future of user interfaces. It was the early 90's. I have always thought they were a great idea. Currently Microsoft Office One Note uses them. Here's a list of references for pie menus (the Dr. Dobbs article is cited): http://www.cs.cornell.edu/boom/2001sp/bronevetsky/Circle%20M... In fairness to Dr. Dobbs, they also hailed hypertext as the future about that…

1993's Secret of Mana was well known for its ring menu. I don't think radial menus are practical with mice, they fit controllers and console games better (where interacting with menus is slower).

Agreed, I think that radial menus are only really good for touch screens.

Re: Creating a Radial Menu in CSS

#26

Post by coldtea »

cwilson wrote: post #20
coldtea wrote: post #17

Earlier quoted context omitted.

> I think you'd find a majority of users would be confused by this, as cool as it sounds, the first time around. It doesn't matter if they are confused "the first time around" as long as they can do their job better and faster the second and nth time around. That's how UI progresses -- not just by self-evident things, but also by people learning new idioms. >I cannot think of a single instance of a popular web applic…

This is completely subjective, but I'd prefer to design interactions around what I know my users are already comfortable with. My goal is to enable my users to get to their end goal with the least amount of friction as possible. Why would I train a user to learn something new when the method in the OP achieves the exact same result, without a learning curve? All I can see improving with the click, hold, and release m…

>This is completely subjective, but I'd prefer to design interactions around what I know my users are already comfortable with. My goal is to enable my users to get to their end goal with the least amount of friction as possible.

Well, there's a compromise, though, between:

(a) "designing interactions around what I know my users are already comfortable with"

(b) "enabling users to get to their end goal with the least amount of friction as possible"

in all cases where an initial unfamiliarity with a new idiom lowers the friction for hundreds of subsequent uses.

As a crude example, consider "undo" in a painting application. Say the user wants to erase all he did up to this point. We could let the artists work the way they are "already familiar with" (paint on top to cover their mistakes, or use some eraser tool to delete the whole thing part by part).

But by having them learn the concept of "undo", they could achieve the same effect faster. And even better if the learned the concept of "history" (jumping to arbitrary undo states).

(Now in those cases, all the above options can also be present at all times -- so the users don't have to give up one for another. But there are other cases where this is not the case, and you have to decide upon the better but new way to design a control vs the old, clunkier, but familiar).

Re: Creating a Radial Menu in CSS

#27

Post by ecuzzillo »

antoinec wrote: post #10
drewda wrote: post #2

If you don't need all that glitz, here's a jQuery plug-in: http://zikes.github.io/circle-menu/ The best (semi)circular menus I've seen recently are in the iD editor for OpenStreetMap: http://ideditor.com/

The reason of the post is not the circular menu itself but the fact that it's entirely made in CSS. I think this is really impressive.

I'm genuinely curious: why is that exciting? I don't know a huge amount about the web stack.

Re: Creating a Radial Menu in CSS

#28

Post by cocoflunchy »

cwilson wrote: post #14
cookingrobot wrote: post #11

This is also known as a radial menu, and has some great properties that make it better (faster) than a normal context menu. You should be able to select an item from the menu in a single fast (distance insensitive) mouse gesture. Click down on the star, drag in the direction of an option, and release the mouse to select it. This way you can choose an option without having to stop after a certain distance of dragging,…

I think you'd find a majority of users would be confused by this, as cool as it sounds, the first time around. I cannot think of a single instance of a popular web application that uses a click and hold mechanic of any kind (not to be confused with dragging and dropping). People are used to clicking, not holding, meaning they might never see the required secondary action of moving the mouse over a new button. You cou…

The android camera app has this type of menu, you hold and then swipe to get the option that you want. (On the Nexus 4 at least)

Re: Creating a Radial Menu in CSS

#29

Post by ricardobeat »

cwilson wrote: post #14
cookingrobot wrote: post #11

This is also known as a radial menu, and has some great properties that make it better (faster) than a normal context menu. You should be able to select an item from the menu in a single fast (distance insensitive) mouse gesture. Click down on the star, drag in the direction of an option, and release the mouse to select it. This way you can choose an option without having to stop after a certain distance of dragging,…

I think you'd find a majority of users would be confused by this, as cool as it sounds, the first time around. I cannot think of a single instance of a popular web application that uses a click and hold mechanic of any kind (not to be confused with dragging and dropping). People are used to clicking, not holding, meaning they might never see the required secondary action of moving the mouse over a new button. You cou…

As long as it is discoverable and doesn't interfere with other actions, it's perfectly fine. Also have in mind that "click & hold" is the ubiquitous swipe in touch interfaces.

Example: the iOS keyboard. You can touch+swipe a key to type an accented letter in a single gesture.

Post reply on HN