[pickers] UX design review v6.3.0 TimePicker component

oliviertassinari commented 1 year ago

This is a design review on #7958, reporting all the design issues that I can spot cc @gerdadesign

Same as #7440, I think that these could be great items that Nora could work on.

1. Input blur

On https://mui.com/x/react-date-pickers/time-picker/#basic-usage, the input is blurred when reaching for the icon to open the panel and focused back again. It's distracting & confusing:

https://github.com/mui/mui-x/assets/3165635/69c32009-2723-4b7f-bdf7-64cee4e9b382

To compare the UX with https://mui.com/material-ui/react-autocomplete/#combo-box feels better, it doesn't blur:

https://github.com/mui/mui-x/assets/3165635/2982808f-590d-40d2-850b-1a977f3b1e5f

2. AM/PM early exit

https://mui.com/x/react-date-pickers/time-picker/#basic-usage I don't understand why selecting AM or PM validates the value, I didn't press the OK button yet.

https://github.com/mui/mui-x/assets/3165635/251f4f71-2cee-48cb-a222-90df323a072d

3. OK button & Autovaliation

https://mui.com/x/react-date-pickers/time-picker/#basic-usage I don't understand what the OK button is for.

When I blur or press Enter the value is still persisted.

If the value would be cleared, I would understand, but it's not the case, it's not like with Ant Design: https://ant.design/components/date-picker#components-date-picker-demo-switchable.

I think that it would be great to have two modes:

a. the current one but without the OK button, it's sets a wrong expectation b. the Ant Design like UX (a tradeoff that reduce end-user mistakes).

4. Laggy keyboard interaction

Open https://mui.com/x/react-date-pickers/time-picker/#basic-usage and start using the keyboard, it feels like it lags behind

https://github.com/mui/mui-x/assets/3165635/20c98e73-7a36-4bb7-9a59-5fce9c0a3adf

when you press a bit too much the button, the list doesn't move. I would expect no animations and an instant handling of the keyboard events.

I understand the use case for the mouse though, since you can't spam clicks, it makes sense to have this smooth animation.

5. Time slot spacing

I feel like there could be a bit more right spacing for the scrollbar:

maybe a few more pixels (1? 2? 3?) like in Ant Design, this feels better:

https://ant.design/components/date-picker#components-date-picker-demo-switchable

But overall, I think that the design direction taken by the Ant Design and the native time picker feels better:

A smaller height (to see more options at once), a larger width (to still have enough space to click/tap on it).

oliviertassinari commented 1 year ago

I have found another important design issue:

6. Handle touch start

On https://mui.com/x/react-date-pickers/time-picker/#basic-usage the clock only responds on "touch move" and "touch end". It should respond on "touch start" too, this is wrong:

https://github.com/mui/mui-x/assets/3165635/5034257d-ef2a-4cfc-9d27-e17a1576c5b9

You can compare the UX on a native Android time picker, this feels good:

https://github.com/mui/mui-x/assets/3165635/68ed42c1-1196-4440-84a0-b795b936987f

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time

It also feels correct in http://react-toolbox.io/#/components/time_picker too.

gerdadesign commented 1 year ago

@oliviertassinari Can you elaborate on 1? I'm not seeing any blurriness.

2 & 3. These should be two methods:

If no action bar, selecting the final column should accept the input & close
If action bar is present, selecting OK should accept the input & close

I think this has been fixed? I don't experience the same thing now.
Our current pickers and ant design are same width (48px). However, I am exploring updates for small / large sizes, primarily to adjust for desktop / mobile. Here's a preview with the scrollbars (Mac: on hover + on focus)

oliviertassinari commented 12 months ago

Can you elaborate on 1? I'm not seeing any blurriness.

@gerdadesign I'm referring to https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event

2 & 3. These should be two methods:

I was thinking of something in this line:

If no action bar, any value selected is instantly propagated
If action bar is present, selecting OK should accept the input & close

The close of selecting the final value feels really strange to me. I'm not picking the value in the order they are shown. I think that it would be great to test this with end-users, but alternatively, is there any other date picker that behaves like this end users would have been taught on? I can't remember any.

I think this has been fixed? I don't experience the same thing now.

I can reproduce it on the latest version. It might be because of my setting:

oliviertassinari commented 10 months ago

I have found a few other design issues, that are probably not important in the context of a time picker, since they are keyboard related, and using the popular to use the keyboard is strange, why are you not using the input in the first place?

However, they feel noticeable in a date time picker https://mui.com/x/react-date-pickers/date-time-picker/ or range #9528.