Opened 11 years ago

Closed 7 years ago

Last modified 4 years ago

#7631 closed task (fixed)

TimeTextBox: numerous usability issues

Reported by: David Schwartz Owned by: bill
Priority: high Milestone: 1.9
Component: Dijit - LnF Version: 1.2beta
Keywords: ibm time selector Cc:
Blocked By: Blocking:

Description

  • Non-standard scrolling mechanism; should use standard scroll bars.
  • Keyboard navigation is very jerky and disorienting.
  • Scrolling should be continuous
  • There isn't a field-level button adjacent to the date field.
  • Off-hour increments unreadable
  • ALT+Dn doesn't reveal the drop-down


Employ the new design as specified below:

The main interaction is through the tick marks which are actually buttons. The user moves the min and hour hands independently by clicking on the tick mark of interest. The inner black ticks set the hour (indicated by the black hand) while the outer gray ticks set the minute (indicated by the gray hand).

The currently selected hour and minute values are highlighted (and reflected in the text field). The main interaction technique is through the tick mark buttons although direct manipulation is possible (see below).

The AM | PM is a value set control.

Given that multiple values are being set, there are also submit/cancel choices. The widget is closed when saved/cancelled and the field value updated upon save.

Client-set Resolution

Allow the client to specify the desired resolution (5, 10 15, 30? min). If 5-min resolution isn't required, the tick marks wouldn't be there.

Visual Design

This visual design is only suggested. No doubt there are better ideas. However, the critical features of the visual design are as follows:

  • the minute and hour hands can be differentiated even when they overlap
  • the min and hour hands are visually associated with their respective tick marks
  • currently selected values are clearly marked
  • currently selected values and min/hour hand/tick formatting can be determined by color blind users
  • to save space, graphical labels are most appropriate for the save and cancel buttons

Keyboard Navigation

  • ALT+Dn opens the widget and places the keyboard focus on the hour hand.
  • TAB while on the hour hand moves the focus to the minute hand and Shift+TAB moves it back to the hour hand from the minute hand
  • TAB stops: hour > minute > AM/PM > Submit (save) > next widget (and closes the time selector without saving).
  • Up/Dn? moves the focus to the next greater or lesser number in the order and wraps so that Up while on '12' moves the focus to '1' as well as the reverse.

Direct Manipulation

The hands could potentially be directly manipulated as well (snapping to the ticks) by dragging the hour hand or the outer portion of the minute hand.

Advantages of this Design

The principal benefits of this approach:

  • all the possible values are in view, no scrolling required.
  • employs a real-world metaphor and so is highly recognizable
  • easily learned and fast once learned
  • scales to different resolutions very well

Attachments (3)

new-time-selector.gif (3.4 KB) - added by David Schwartz 11 years ago.
drop-down-picker04.gif (2.4 KB) - added by David Schwartz 11 years ago.
check.gif (1.7 KB) - added by David Schwartz 11 years ago.

Download all attachments as: .zip

Change History (15)

Changed 11 years ago by David Schwartz

Attachment: new-time-selector.gif added

comment:1 Changed 11 years ago by David Schwartz

Correction regarding these points:

  • ALT+Dn opens the widget and places the keyboard focus on the hour hand.
  • TAB while on the hour hand moves the focus to the minute hand and Shift+TAB moves it back to the hour hand from the minute hand
  • TAB stops: hour > minute > AM/PM > Submit (save) > next widget (and closes the time selector without saving).

When hour or minute HAND is mentioned above, it's really the associated tick marks that were intended.

comment:2 Changed 11 years ago by Adam Peller

sounds like a possible dojox widget to me, but too complex for Dijit and probably dependent on dojox.gfx.

Some concerns about the design, aside from the complexity of implementation

  • Are there non-graphical designs which are just as powerful?
  • Minute hand overlap with tickmarks is awkward
  • Is AM/PM specific to some cultures?

comment:3 Changed 11 years ago by Adam Peller

also, the new design, while interesting, does not seem to be necessary to correct most of the deficiencies noted above. Also, the scrollbar in the new design appears to be unnecessary, and the save/cancel buttons add complexity and contradict the way our form drop-downs work (a separate issue)

comment:4 Changed 11 years ago by David Schwartz

  1. The scroll bar is not necessary and can be eliminated just fine.
  2. I think the hand overlap issue can be effectively addressed by a good visual design.
  3. I'm open to other simpler designs that can be used as effectively; if any had come to mind, I would have suggested them.
  4. The save button (again, I'd stress the need for a graphic label, e.g. ) will be necessary whenever there is more than one value to be specified within the control (see the example below).


  1. As with many UI designs, it's hard to evaluate with static images; only through interaction does the model reveal itself fully. I think this is one such design.
  2. AM/PM is used throughout the world (albeit not exclusively).

Changed 11 years ago by David Schwartz

Attachment: drop-down-picker04.gif added

Changed 11 years ago by David Schwartz

Attachment: check.gif added

comment:5 Changed 11 years ago by bill

Milestone: tbdfuture
Summary: Dojo TimeTextBox has numerous usability issuesTimeTextBox: numerous usability issues
Type: defecttask

So, when we talked about TimeTextBox in the usability meeting I thought we agreed to have a forum discussion about it, in http://dojotoolkit.org/forums/forums/developer-forums/dijit-development

Last year when we talked about this we were heading towards a more typical drop down list solution, see http://dojotoolkit.org/forum/dijit-dijit-0-9/dijit-development-discussion/time-picker

In any case, marking this ticket for "future" until we have a volunteer to implement a redesign.

Note that the "field-level button" issue is addressed in #5151.

comment:6 Changed 7 years ago by bill

Milestone: future1.9
Owner: set to bill
Status: newassigned

As mentioned above, version 1.6 added a drop down arrow to open the drop down. The claro theme also solved the issue with off-hour increments being unreadable. And the down arrow key opens the drop down.

So, the main issue left seems to be the non-standard scrolling feature. I'm working on a conversion to using the standard scrolling mechanism (with a scrollbar) for 1.9.

comment:7 Changed 7 years ago by bill

Resolution: fixed
Status: assignedclosed

In [30661]:

Refactor TimePicker to be a traditional drop down list with a scrollbar, like ComboBox. Fixes #7631, #14719 !strict, and refs #8387, #16730 tangentially. Note that the visibleRange option is no longer supported, as it no longer makes sense. If specified, it will be ignored.

comment:8 Changed 7 years ago by bill

In [31153]:

Don't change border on hovering item in TimePicker drop down; it changes the width of the dropdown and on Chrome/win gives the dropdown a horizontal scrollbar. Refs #7631, #10718.

comment:9 Changed 7 years ago by bill

In [31154]:

Simplify CSS for tundra, nihilo, soria, and nihilo TimePicker. In particular, don't change border/font/etc. on hovering items since it jiggles around the rest of the items. Refs #7631, and fixes #10718.

comment:10 Changed 6 years ago by Bill Keese <bill@…>

In 02c09eea73e459e3c43d9a80bc81fb2b70200fae/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:11 Changed 6 years ago by Bill Keese <bill@…>

In 235573f889813a237cf8a016d897ed22a95cfb5c/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:12 Changed 4 years ago by Bill Keese <bill@…>

In 50278e40c6b4c549f7ca1041e17890df521617af/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 
Note: See TracTickets for help on using tickets.