search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
466 stars 83 forks source link

Time-picker should both improve usability and appearance #7467

Open enver-haase opened 5 months ago

enver-haase commented 5 months ago

Description

The native Android time-picker is a circular clock, while the native iOS time-picker is a slot-machine-like widget that allows manipulating hours and minutes on wheels.

The Vaadin implementation is a drop-down box that at some point (well-documented) even stops offering such an overlay when too many choices would have to be presented in the one-dimensional drop-down format. Thus it then reverts to a simple TextField with a formatted string.

Expected outcome

For better utilization, we should allow the three dimensions of hour, minute, second to be separately manipulated, and not just in a TestField.

Minimal reproducible example

https://vaadin.com/docs/latest/components/time-picker

Look at the demos, especially on a mobile device. It does do its job, certainly, but can be improved upon in regards to both usability and appearance. The biggest concern is the use of a one-dimensional linear string of values where there are hours, minutes, seconds and maybe milliseconds to be taken care of. This calls for using as many components visibly as there are components in the mathematical vector comprising the time.

Steps to reproduce

Use the time-picker, try to set it to 04:49:48 (my 2023 net Berlin Marathon time). Do the same on Android's native time picker to get a feel of how that could be better.

Environment

Vaadin version(s): 24.4 OS: n/a

Browsers

n/a

enver-haase commented 5 months ago

Even Synology break up the one-dimensional time chooser dropdown-box into three for hours, minutes, seconds. Not nice to look at, but not that bad.

yuriy-fix commented 5 months ago

Dear @enver-haase,

Thank you for your feedback! We understand the need for an intuitive, user-friendly design, especially for mobile.

I'll mark this as an enhancement request, but it would be great if you could provide more specific details on the enhancements you have in mind. Specifically, how would you like users to interact with the time-picker, and are there any particular design features you suggest?

enver-haase commented 5 months ago

Hi, thanks for picking this up.

First of all, for usability, the 2-4 components (hours, minutes, seconds, millis) need to be split out from an only one-dimensional list of drop-down values. Like, having three drop-down boxes not one.

About a modern design, I am drawing a blank. I personally dislike the Apple slot-machine approach on iOS and do like the Android wall-clock. A Google image search for "time-pickers" may shed some light on the state-of-the-art. I am sure we can at least copy that or even better improve upon that.

enver-haase commented 5 months ago

Screenshot 2024-06-03 at 14 21 53 This is not bad, if stepping can be provided

tomivirkki commented 5 months ago

Related to https://github.com/vaadin/web-components/issues/1073 and https://github.com/vaadin/web-components/issues/1045

enver-haase commented 5 months ago

Changed my wording now that I failed to have it marked as a bug for BFP (which was what I was aiming at).

web-padawan commented 5 months ago

Please note that proper fix for this would require either implementing separate selector controls or by adding option to use <input type="time"> on mobile as suggested in #599. Both options are new features and in general I think this issue can't be considered a bug.