[pickers] UX design review v6.0.0-alpha.14

[oliviertassinari]

I found https://twitter.com/simonw/status/1611856336396128256 by chance, which inspired me to have a deep dive into the UX with the latest version of the date picker. The goal is to surface all the frustration points I had as an end-user. This issue can be considered a design review, with confidence levels:

Remaining

EDIT by @flaviendelangle: Some of those might need discussion before.

0. Collision edge 100%

Moved to mui/material-ui#10009

1. Vertical height sync 90%

Open https://next.mui.com/x/react-date-pickers/date-picker/ on Android, and go to the year view, the active year isn't in the viewport:

5. Dark mode background color 90%

Moved to mui/material-ui#8306

6. Design density 80%

The date picker feels too big. It's currently 320px in width. The mouse has to travel more distance than it needs, hence it's more effort than necessary. For example, I think that 32px for the days would already be enough:

An older thread: mui/material-ui-pickers#1648 (comment).

7. Error feedback 70%

Moved to mui/material-ui#7468

8. Year grid 70%

The grid for the year doesn't feel that great. I never know where to look to find my year, it's disorienting.

I think that it's simpler to scan one vertical line. It's what a native input and https://retool.com/components/date have.

9. Year and month dropdown 70%

I have seen many implementations that split the year and month with dropdowns:

• https://m3.material.io/components/date-pickers/guidelines
• https://elastic.github.io/eui/#/forms/date-picker
• https://blueprintjs.com/docs/#datetime/datepicker
• https://retool.com/components/date

I think that it could be an improvement to do this. To be fair, these dropdowns/views feel overkill when the date picker is used with an input. We don't have them for the range pickers and it's OK. I think that it's really for static use cases (static as without an input).

Example of date pickers that don't have it and it feel just fine: https://reactdatepicker.com/, https://jqueryui.com/datepicker/, https://react-spectrum.adobe.com/react-spectrum/DatePicker.html, https://react-day-picker.js.org/start#example, https://react-dates.github.io/react-dates/?path=/story/daypicker--single-month.

10. Blank line 90%

The height of the date picker doesn't match the height of the calendar. It feels like there is something that should be shown but it isn't, as if there was bug. It doesn't give confidence in the interface. https://next.mui.com/x/react-date-pickers/date-picker/#basic-usage

Instead, I think that it would feel significantly better if the height was to match the container:

11. Edit input on mobile 50%

https://m3.material.io/components/date-pickers/accessibility suggests adding an edit icon and a text field as a fallback for those that struggle:

12. Interaction time

Moved to mui/material-ui#4602

13. No open animation 50%

Moved to mui/material-ui#10006

Done

2. Month edit with date field doesn't work 90% (#7444)

Open https://next.mui.com/x/react-date-pickers/date-field/#customize-the-date-format try to use the Microsoft SwiftKey keyboard. It doesn't work in any way. The extension has 1B+ downloads (to be compared with the most used app on Android, YouTube 10B downloads). I suspect it's not specific to this keyboard extension. I have seen the same issue with Grammarly's keyboard.

3. Popup alignment 90% (#7445)

When I open https://next.mui.com/x/react-date-pickers/date-picker/#basic-usage, the popup feels misaligned:

I would expect:

See https://m3.material.io/components/date-pickers/specs and all the others date pickers built, e.g. native ones or massively popular ones like https://jqueryui.com/datepicker/.

4. View reset 90% (#7484)

When I switch to the year view, close the popup, and open it again. I would expect to see the month view, not:

It's hard to get back to the initial calendar view. It took me a couple of trials and errors to figure out that I needed to click back on the year + month button.

---

I guess this issue could be split into smaller ones. But at least, I wanted to share these opportunities.

[flaviendelangle]

2. Month edit with date field doesn't work 90%

I think this one comes from a clash between the RTL implementation and the Android custom behaviors.
I'll do a fix

mui/material-ui#7444

[flaviendelangle]

3. Popup alignment 90%

In v5 I have

But for me it's aligned purely out of luck.
The alignment is centered on the input in both v5 and v6.
Just in v5 the view has just the right size so that (viewWidth - inputWidth) / 2 === endAdornmentWidth.

We can explicitly add a bottom-start alignment on the popper for non-range picker and change the anchor to be the whole TextField instead of the input (unless you see a reason not to).

#7445

[flaviendelangle]

10. Blank line 90%

Same behavior as in v5.
We are matching the height of the month with the most weeks.
The alternative being to change the height when switching month.
The topic has been discussed before, I can look for it if you want.

[flaviendelangle]

7. Error feedback 70%

We have the same problem in v5:

Screencast.2023-01-09.11.41.19.mp4

Solving it will probably be easier in v6.
We would need to define what is the exact expected behavior though:
If I have a valid date and I press Backspace, should it be invalid ?
If so, then the rule is probably "only show error when all sections are filled", if not then the rule is probably "only show error when all sections have been filled".

This one requires a standalone issue.

[flaviendelangle]

9. Year and month dropdown 70%

We are starting exploring how to render the month and year view in range pickers.

I don't agree with We don't have them for the range pickers and it's OK.
We had people complaining that moving to far away date way a massive pain on range pickers (see mui/material-ui#4546 for example).
But as your image shows, those information could be filled in the day view instead of require a standalone view, both for range and non-range pickers.

[oliviertassinari]

2. Month edit with date field doesn't work

Great, I left a few comments in mui/material-ui#7444. There is room for the mobile version to work better.

3. Popup alignment

Great, I left a few comments in #7445.

7. Error feedback

The idea for me is that the best default would be to hide the error as long as the field is in a "pristine" state. I would define pristine as: "true until the field is modified and blurred at least once, then it becomes false". It's subjective. Happy to open an issue. I definitely think that the developers should be able to implement this behavior. I suspect it should be the default but not sure.

9. Year and month dropdown

My assumption is that the people who are asking for a year select in the date range picker are using it in a "static" mode (without an input). I don't see why people would need a year select if they have an input to change the year.

10. Blank line

I should have probably tried to prioritize the different frustrations. I can't give you a definitive value for having this one fixed. I think that it will be part of the solution to move from good to great.

[oliviertassinari]

On "12. Interaction time". From mui/material-ui#35946 (comment), I suspect that removing the "in" transition while keeping the "out" transition could feel great.

[Vansh-Baghel]

I wish to contribute in this issue, couldn't figure out on what to work, could you suggest any specific bug to work on in this particular issue? @oliviertassinari

[flaviendelangle]

We need to extract the points not resolved yet to standalone issues.
5. is probably the easiest to work on and if you want to do a fix feel free !

[Vansh-Baghel]

We need to extract the points not resolved yet to standalone issues. 5. is probably the easiest to work on and if you want to do a fix feel free !

Got it!