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

11–20 of 80 posts

Re: Creating a Radial Menu in CSS

#11

Post by cookingrobot »

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, and you can memorize the different directions of frequently used commands.

This demo doesn't implement that behavior yet though - so while it looks cool this version is still missing the big benefit of this type of ui.

Re: Creating a Radial Menu in CSS

#13

Post by state »

wubbfindel wrote: post #3

Very impressive how close the answerer gets to the questioners mock up. Good job that man! And yet, I bet the designer will still come back and say the curve isn't right, or the bar isn't think enough. I think that's some impressive CSS.

Interestingly, 'that man' is apparently a woman: http://stackoverflow.com/users/1397351/ana

Re: Creating a Radial Menu in CSS

#14

Post by cwilson »

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 could of course add some kind of time delay, but then they would simply be clicking a second time to interact, and this defeats the entire purpose of the click and hold mechanic.

This is not to say I don't think you could train users to get used to this mechanic, but from a first-time user perspective, this still falls under "bad UX" in my book.

Re: Creating a Radial Menu in CSS

#16

Post by robotresearcher »

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…

"I cannot think of a single instance of a popular web application that uses a click and hold mechanic of any kind."

* Scrollbar thumbs, Drag and drop (gmail attachments, google map streetview guy), Drag to reposition, Rubber band selection (everywhere)

* Drag blue dotas to modify text selection (iOS)

Re: Creating a Radial Menu in CSS

#17

Post by coldtea »

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…

>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 application that uses a click and hold mechanic of any kind.

The "kudos" button on Subtle is "hover and hold". I'm sure there are others.

Re: Creating a Radial Menu in CSS

#18

Post by cwilson »

robotresearcher wrote: post #16
cwilson wrote: post #14

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. 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…

"I cannot think of a single instance of a popular web application that uses a click and hold mechanic of any kind." * Scrollbar thumbs, Drag and drop (gmail attachments, google map streetview guy), Drag to reposition, Rubber band selection (everywhere) * Drag blue dotas to modify text selection (iOS)

Drag and drop implies you're dragging one thing to another and then releasing. This is not the same as clicking, holding, and having something else you then have to move your cursor to appearing.

I should have been more specific. I cannot think of a single instance of a popular web application or site that uses a click and hold mechanic to navigate or edit.

Re: Creating a Radial Menu in CSS

#19

Post by brudgers »

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 time, and that one they nailed.

Re: Creating a Radial Menu in CSS

#20

Post by cwilson »

coldtea wrote: post #17
cwilson wrote: post #14

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. 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…

> 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 method is enhanced "cool factor".

Post reply on HN