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:
- Better usage in terms of Fitts law: bigger selection areas and at distance are good for touch devices.
- Can handle any resolution of selections
Cons:
- 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:
- Drag is faster for quick selections when resolution of selection list is higher
- Acceptable usability in terms Fitts law.
Cons:
- 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.