3

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.

enter image description here

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.

enter image description here

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.

  • Any graphics drawing software solved these tasks. Why are you trying to invent different system model? How is your approach aligned with users' mental model? – Alexey Kolchenko Apr 8 '17 at 18:36
  • @AlexeyKolchenko I need these tasks for implementing a link-node diagram editor. The problem is that most graphics drawing softwares do not account for touch devices and the conventional way is to provide a separate panel(far away from primitive) where user can change primitive properties which in my opinion fails for large touch devices when evaluated against GOMS. I think providing controls close to primitives fit the user mental model of "things that are close are related" – salman mazhar Apr 9 '17 at 14:33
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.

"Rainbow" map, hue on x, saturation on y

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:

Rectangle with small draggable squares on side and vertices

0

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.

enter image description here
Original image on Dribble

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.