Two dimensional selection widget

Question

I am working on 2d selection widget that should be optimal for touch and mouse modality equally.

The widget goal is to change two different properties of a primitive(can be any shape - a circle or square). The selection along each axis would directly effect the appearance of primitive signifying the current result of selection from both axises.

Option 1:

Go with buttons and change property along each axis when button is clicked, e.g. button up/down changes available colours of shape and button left right changes border style.

Pros:

1. Better usage in terms of Fitts law: bigger selection areas and at distance are good for touch devices.
2. Can handle any resolution of selections

Cons:

1. No drag support and selecting between long lists might be tedious

Option 2

Go with sliders and change selection based on drag of each selection.

Pros:

1. Drag is faster for quick selections when resolution of selection list is higher
2. Acceptable usability in terms Fitts law.

Cons:

1. Selection might be too sensitive when selection list is long i.e. high resolution of selection list.

Which approach is better for this task? Also if there is a better way of doing it please feel free to suggest.

Answer 1

Either of your solutions are workable, and you can combine them by adding arrow buttons to the ends of the sliders. Now the user can slide the slider for gross adjustments, and tap the buttons for fine/incremental adjustments. However, neither solution is a true 2-D control -they each have separate 1-D controls.

What about allowing the user to click/tap directly on a map of the possible combinations of values for the two properties? MS Paint does this for selecting combined hue and saturation for a color.

In your case, the map can popup beside the primitive, like a context menu.

This allows the user to set the two values with one click --no awkward dragging or tedious repeated clicking/tapping. In addition to click-to-select, the user can also drag the crosshair to see the changes in real time, so it has that advantage of sliders too. This is especially good for touch so the user can drop the finger on the map to get the approximate value, then "rock" the finger it adjust it a bit.

A selectable map works well if the properties are integral and visual (like color), but this can also be done with abstract quantities by putting a graticule on the map with the grid lines numerically labeled. Like sliders, it is best when the user is only after sufficing “looks about right” values. For precision you can have redundant controls:

• You can add pointers on the axes and make the axes selectable/draggable in case the user wants to adjust one property while keeping the other perfectly constant.

• Arrow buttons at the end of the axes (like suggested above for your sliders) can provide incremental adjustment.

• Text boxes (like MS Paint has), perhaps with spinners, allow entry of exact values the user wants and fine adjustment of the values if there are a lot of possibilities. It also supports accessibility.

If the properties are reflected in the size, shape, or orientation of the primitive on the screen, then make the primitive a map of itself: Add "handles" the user can drag to change it:

Answer 2

You can use in-place panel with the set of options. Panel hosts a set of controls, so the solution is more scalable, compared to yours.

Original image on Dribble