2

Background:

A picture is worth a thousand words:

enter image description here

Well, but now that thousand words... What you can see on the above image is the time line control I'm working on. There is a line graph with some values shown for a certain time range, a few time markers, and the most important part for my question - the blue rectangle, which is the time range selector used for different purposes (depending how the application implements it).

It is a desktop control used to be controlled mostly by the mouse (an ordinary mouse, I'm not going to support touchscreen, gestures or something). It can be controlled by the keyboard (and a few actions already are), but for my problem I don't find the keyboard a good choice (tell me if you feel it different :)

Controlling the control:

1. Left click drag - move the time range

If you are not hovering the range selector's left or right edge (see point 2), then you can move the time range by dragging with the left button down. This dragging moves also the selector (that blue rectangle). I believe the effect itself might be self-explained by the used cursor shown in this image:

enter image description here

2. Left click drag - resize the selector's range

If you hover the time range selector's (the blue rectangle) left or right edge, the horizontal split cursor is displayed (since I don't like resizing cursor), and the control is ready to start resizing the selector range by dragging. This selection can be resized behind the client rectangle of the control so the selector may cover the whole visible area of the control:

enter image description here

3. Right click drag - immediate selector's range selection

Whenever you are over the time line, you can press the right mouse button and drag to directly select a range of the selector (that blue rectangle). The previous selection is cleared and you are starting a new one. I do not have designed a cursor for this selection yet, so let's pretend this right click drag selection is indicated by the shown drag cursor:

enter image description here

4. Others

Except the above, there is a mouse wheel handler to zoom in and out and a few keyboard shortcuts, but nothing worth to mention. Just to admit, I'm free to implement any keyboard shortcut or standard mouse action (not a gesture though).

Problem:

I would like (and I feel that I should) implement clearing of that selector (that blue rectangle) in some way. With the right mouse drag you can select a range, you can refine it by resizing, but how to clear it when you need ? There are few things I've considered:

  • the selector may, and many times will, cover the whole control's area
  • I cannot use left mouse click since it is fully utilized
  • I would like to avoid using keyboard shortcut or some external button for this clearing
  • right click to an empty space (a space without the selector) might not always be possible since the selector can fully cover the client rectangle of the control
  • as a good candidate looks to me just the right click; the problem is that I would have to implement a selection mouse drag threshold (to prevent triggering a new selection described in point 3)

    • on the other hand, I would like to avoid using a selection mouse drag threshold because I wanted to keep this selector precise - even for small selections (from 1 pixel in width) and with threshold it would be difficult to select e.g. 1 pixel in width

Question:

Assuming that I would like to keep points 1-3 as they are (but it's not that strict requirement, if you come with some user friendly controlling concept), how would you implement clearing of that selector ?

Or, in general words, how would you clear selection (created by mouse) that can fully cover the control's area ?

1

I see two options, unless I read your text too quickly.

  • One click (left or right). Just click on any place and that would clean.
  • An external button just for that purpose.

The one click is common behaviour for those not so common interfaces.

You can implement the single click either inside or outside the control area. You can even implement that behaviour inside and outside, although is much better if it's only inside and clicking outside the control area does nothing to the selection.

  • Thank you! I like this way. I will finally use a right mouse drag with a few pixels wide threshold. That threshold I have to use there because I need to have a clear selection state and without a threshold, the user may accidentaly select a range of one pixel e.g. But I'll keep that configurable. I realized that this "click behavior" have e.g. Windows common controls with multiselect. For instance list box. If you'd have a list box with items covering the whole client area and have selected all of them, without click, there wouldn't be any other chance to unselect them by mouse. – TLama Feb 28 '14 at 14:28

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.