Halo

This design was inspired by the “Halo” found in the Morphic GUI system. Every element in Morphic can be right clicked to bring up a surrounding menu of actions. When learning Fusion360 recently, I discovered they had implemented their own halo. The approach is slightly different. Rather than being per element it surrounds the cursor, so is more akin to the common contextual menu.

I think of this as the "Tennis Principle", where recovering back to (near) the middle of the court puts you in a good position to get the next ball.

A feature of the Halo that I found appealing was that menu items appear wherever your focus is and all elements are equidistant from your cursor/finger. I thought taking this approach would be most useful in a touch screen scenario, where you usually have to move your hand to a keypad when editing a number box. With a Halo design, the inputs could appear around the input box when selected. An additional benefit is that the usability is the same regardless of way the device is being held.

I think of this as the "Tennis Principle", where recovering back to (near) the middle of the court puts you in a good position to get the next ball.

After implementing the halo around the input box, it was clear that long numbers would soon collide with the halo buttons, especially on touchscreens. It also meant that on a touchscreen, using the top half of the halo would cover the input box with your thumb. For these reasons I moved the halo below the input box, which is still close enough to keep the hand in the same place.

Issues

Thinking about it now, I imagine it could be useful to have be able to bring up a few different widget types, e.g. a slider and stepper buttons.

This ended up being my least favourite design of the project, but it is worth including as it documents why some ideas don’t work. Let it serve as a warning to other designers, or as a challenge to create a better design using the same paradigm.

Thinking about it now, I imagine it could be useful to have be able to bring up a few different widget types, e.g. a slider and stepper buttons.

The biggest problem is that it limits the screen positions of number entry boxes. Too close to the edge of the screen and the digits will either go off the edge, or need to be re-arranged.

Demo

Source Code