Circular context menu on hover

Question

I'm working on a mouse-centric user interface in a desktop application. The target audience are people savvy with computers.

The main element of the user interface is a circular button that doubles as status indicator. Pressing it brings up a control with tabs. I want to remove the tabs and let the user make a choice immediately via the initial click.

Keeping the UI minimal and unobtrusive is the first priority, and reducing mouse clicks is the second priority.

In the planned design, we will add specialized buttons that launch specific interactions (so that there are no tabs in the next step). These buttons are hidden unless the mouse cursor is in vicinity:

In light of most UX guidelines calling for disabling buttons instead of hiding them, I would like you to critique my thought process that justifies hiding buttons:

Affordance

• The extra buttons appear when the mouse gets within ~1 inch of the main button
• If the user wants to do anything using the tool, they need to either use keyboard shortcut or move their mouse over the main icon (where they will discover the extra buttons)
• While the main icon remains a status indicator, hovering over it reveals a default interaction (available via one of the extra buttons). Clicking invokes this interaction

Muscle memory

• The extra buttons are always in the same positions relative to the main icon

Touch

• The first touch acts like mouse hover. The second touch like a mouse click
• The icons increase in size when touch interaction is detected

Am I correct thinking that the affordance is not inhibited since the extra buttons appear at every interaction?

Is there anything else I should be mindful of?

Answer 1

Affordance

In the most simple terms, affordance can be seen as:

The perception of something hints possible interactions.

Neither in the original (affordance) nor in the corrected (perceived affordance) sense this has much to do with Don Norman's affordance.

Progressive disclosure

What you suggest here is a form of progressive disclosure (Lidwell, W., Holden, K., Butler, J., 2010. Universal Principles of Design. Rockport, Beverly, Mass.):

A strategy for managing information complexity in which only necessary or requested information is displayed at any given time.

And is little different from a sub-menu or a dropdown:

Google Inbox has the same pattern to that you have suggested, with the options above the red button only showing on hover:

So with regards to the fact the buttons only show when you click on the play button - I fail to see any issues, specifically not ones relating to affordance.

Answer 2

You could have options that appear with a 'right-click'. Much quicker to click than move the mouse across the screen to a specific area, hence why lots of software has controls both in the menu and under a right-click:

Another example would be MS Word whereby there are certain controls that only appear after a certain action e.g. copying things into a document:

You could take that same logic and offer controls only when controllable items are highlighted (as per your example in the question) and they could appear near where the cursor is at any given time.

In summary: Controls on hover are okay (as Izhaki has mentioned) but there are other alternatives that require less prior knowledge of the hidden menu e.g. controls like the MS Word ones that appear when required/available in situ. Otherwise various right-click menus that save you have to target an area of the screen - although you need to know about them in the first place (as with your example or with Google Inbox)