Interact with small objects

Question

The objects (the small squares) can be selected/deselected. The small objects are contained in the larger container box. There can be several container boxes rowed up on the x axis.

I would appreciate suggestions on how to make the selection/deselection of the small squares as easy as possible, because when working on small objects like this it can really get fiddly and I feel that Fitt's law really isn't taken into consideration when it looks like my suggestion image.

The container box can be zoomed in horizontally so the dots get more space on the x axis, but the user shouldn't (in a perfect implementation) be forced to zoom in just to do the selection, and then zoom out to do other stuff that is easier in an zoomed out state.

I have been thinking of the OS X magnifying glass effect, but are there other ways of making the selection easier and less fiddly?

The design is for computers PC/Mac with mouse/mouse pad interaction.

Answer 1

One solution is to show a magnified version directly above where the user is currently hovering. Look at how YouTube deals with seeking long videos, for example:

This allows the user to select a rough time period they are interested in, then make a finer selection using the shorter-interval magnification.

The Music app on the iPhone/iPod has a feature which slows down 'scrubbing rate' by dragging your finger vertically down screen to make a finer selection. If you are designing for touch, perhaps moving the finger vertically could automatically zoom in/out the bar to make a finer selection (with some needle to select the item).

Answer 2

Do the objects have to be that small ?

For instance you can use lines instead of dots and show more information when hoover. The area of selection gets way bigger since it does not depend on Y and X axis but on X only.

Answer 3

Let the user select a container box. Then system should make the first object in that box as current object and highlight it (as we do highlight current list item). User should be able to move through the objects using left arrow and right arrow keys of keyboard or by clicking on the arrow buttons provided on either side of the selected container box. System should always highlight the current object as user goes through the objects using arrow keys and also, current object should be shown above the container box in a magnified manner. When user presses ENTER key, system treats it as selection of current object.