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.

Select small objects

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.

3 Answers 3


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:

YouTube seeking

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).

  • Thanks, that is one thing I had thought of briefly before, but I'll check out how youtube has implemented it and see if there's anything I can use from them :) Apr 26, 2013 at 8:58
  • I would probably need to make the enlarged view stay on top since Youtube is only offering preview, no interaction in the enlarged area. Apr 26, 2013 at 9:48
  • 2
    @HenrikEkblom You are able to click on the grey box to seek. This feature is only available on long videos, try this one for example: youtube.com/watch?v=xwcumthbPnQ
    – Brendon
    Apr 26, 2013 at 9:56
  • Ok, I had missed that since I haven't watched long movies on youtube :) Apr 26, 2013 at 10:52

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.

get bigger

  • Yes, that is possible to do and should enhance the ability to hit the small objects, although the biggest problem is probably the tight x axis alignment of the objects. Apr 26, 2013 at 9:47
  • Little brooks make great rivers Apr 26, 2013 at 10:11

enter image description here

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.

  • Yes, that could be a good thing to implement using arrows and left/right buttons (it is hard to tell users that there are keyboard shortcuts, therefore it shouldn't be the only way to interact with the software). Apr 26, 2013 at 9:00
  • @Henrik Ekblom, mouse also can be used. See my edited answer
    – rags
    Apr 26, 2013 at 9:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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