microsoft / microsoft-ui-xaml

Windows UI Library: the latest Windows 10 native controls and Fluent styles for your applications
MIT License
6.27k stars 674 forks source link

Proposal: New ClockTimePicker Control #3605

Open robloo opened 3 years ago

robloo commented 3 years ago

Proposal: New ClockTimePicker Control

Summary

Date and time pickers have some gaps in functionality illustrated as below:

Rationale

A ClockTimePicker-type control is available on several other platforms and allows fast selection of times in a visual way -- whether that be 24H or 12H clocks. This should be added to WinUI to nicely round out the feature set:

Scope

Capability Priority
Show a visual analog clock allowing for both hours/minutes to be selected by moving the clock hands Must
Support switching between 12H and 24H times Should
Support second selection Could
Support time-zone selection Could

Important Notes

Open Questions

prayaas-a commented 3 years ago

Only if done right. I know many people find the analog time picker control on Android to be clunky and confusing.

mdtauk commented 3 years ago

I don't think displaying an analog clock is a great idea, but some kind of circular time picker, similar to Android is not out of the question.

Back in the Windows Phone days, I designed an app called MetroTime, and we included a circular picker, before the same kind of control showed up in Windows 8.

image WP7 MetroTime App

image Win8 Alarms App

image Unused design for Win10 Mobile version of MetroTime

image Android "analog" Time Picker control

robloo commented 3 years ago

It certainly doesn't have to look like the analog clock on Android. The main point is hours/minutes can be selected quickly because all values are visible at once due to the circular arrangement being more efficient with available space. @mdtauk Has some good pictures there. My only suggestion would be to find a way to show the other numerical values all around the circle at least during selection.

mdtauk commented 3 years ago

It certainly doesn't have to look like the analog clock on Android. The main point is hours/minutes can be selected quickly because all values are visible at once due to the circular arrangement being more efficient with available space. @mdtauk Has some good pictures there. My only suggestion would be to find a way to show the other numerical values all around the circle at least during selection.

A lot of thought will need to go into this control.

robloo commented 3 years ago

How will it work with HoloLens?

No experience with HoloLens so have no idea.

How does it work on Xbox?

Those XBox control analog sticks with 360-degree input would actually be quite useful to quickly choose a position on a circle.

How would Compact density impact this control? (This one may require WinUI 3 as flyouts can not currently change based on density)

Should do what the CalendarDatePicker does, if anything. These controls are more physicalized and should probably be desiged for touch from the start.

How does it adapt between Touch and Pointer invocation? Some ContextMenus currently increase touch targets when invoked by a touch gesture.

Don't think there is really a need to differentiate the two on such a proposed control. The hours/minutes circles will be wide enough for touch and pointer input most likely. Depends on the "final" design though.

How do you differentiate with guidance, when to use this control, versus the current Time Picker, or the proposed more keyboard friendly Time and Date Pickers?

Even the CalendarDatePicker is stretching things to try to come up with guidance. It comes down to your particular use case and if visual input is useful for the end-user. For form-entry data oriented apps, use the TimePicker. For event planning apps, use a visual clock-picker.

mdtauk commented 3 years ago

How does it work on Xbox?

Those XBox control analog sticks with 360-degree input would actually be quite useful to quickly choose a position on a circle.

Good Call, wonder if you should switch between hours, and minutes with a button, or allow the two analog sticks to control each separately?

How does it adapt between Touch and Pointer invocation? Some ContextMenus currently increase touch targets when invoked by a touch gesture.

Don't think there is really a need to differentiate the two on such a proposed control. The hours/minutes circles will be wide enough for touch and pointer input most likely. Depends on the "final" design though.

The Radius of the radial selections needs to be large enough in touch so you can drag outside of the circle, and have finer precision picking. Then you need to consider how that would work with Light Dismiss behaviours on the flyout containing the control.

With a mouse, it will need to be small enough to not feel "obnoxious" but still large enough to enable fine tuned "ticks" around the diameter,

How do you differentiate with guidance, when to use this control, versus the current Time Picker, or the proposed more keyboard friendly Time and Date Pickers?

Even the CalendarDatePicker is stretching things to try to come up with guidance. It comes down to your particular use case and if visual input is useful for the end-user. For form-entry data oriented apps, use the TimePicker. For event planning apps, use a visual clock-picker.

This question will need the most attention if you are to persuade the teams that not only is there a need for this kind of control, but also that it would feel familiar from other platforms - fit in among other controls - and identify examples of current app, inbox, or shell experiences, that would benefit greatly from the addition of this control.


Finally, does this become part of the existing (or changed) Time Picker, or should it be it's own discrete control?

robloo commented 3 years ago

@mdtauk Yes, there is definitely more that needs to be planned, discovered and discussed, I was just hoping to start the discussion here. For this one unfortunately I don't have a clear design in my head -- yet.

Finally, does this become part of the existing (or changed) Time Picker, or should it be it's own discrete control?

My proposal is for a new control. Just as the DatePicker and CalendarDatePicker exist for different reasons, the TimePicker and ClockTimePicker would exist for similar use cases.

Good Call, wonder if you should switch between hours, and minutes with a button, or allow the two analog sticks to control each separately?

I also had a though about that. I'm not sure the existing XBox convention but it might actually be more intuitive to use a single analog stick (or actually both analog sticks -- either one you want) to move hours. Then press 'A' or a button to move to minutes and use the same analog stick again (either left or right, doesn't matter). Above the input circles you could see whether Hours or Minutes is selected as there should be a digital representation of the time as well (like Android).

R3voA3 commented 3 years ago

https://user-images.githubusercontent.com/7389110/99042299-67a96e80-2584-11eb-9b5c-55805d2ccd1f.png

This is one of the best designs. The main advantage over the current time picker we have is, that I can select any value for hours and minutes without scrolling. It's just so much faster and easier to use.

robloo commented 1 year ago

Still valuable IMO