1. In this paper,
Date picker as a basic component of an important and indispensable member, we have been quickly accustomed to its invariable appearance, input box + date selection pop-up layer. But when it comes to business, can this conformist look really fit the business needs 100 percent? This article attempts to generalize best practices for date pickers, starting with date selection scenarios from multiple sites. This article does not touch on date selection on mobile, but on PC, enumerating common scenarios and design considerations for each type of date picker.
Designing The Perfect Date And Time Picker
Thanks to this issue’s reviewer @Huang Ziyi @manifold @Wang Liang @Zhao Yang @unknown petal engineer
2. Design principles
2.1 General Design
1) Clear requirements, is to achieve date selection, date interval selection, time selection
2) Does the next step need to be triggered automatically after the user selects the date? Especially in some fixed business processes
3) Is a date picker the best way to select dates? Wouldn’t it be faster to provide a predefined date selection button?
4) How to avoid showing unavailable dates?
5) Whether automatic positioning is required according to the context? Suitable for birthday selection scenarios.
2.2 Input box design
1) Can users customize the input date, or can only click to select the date given by the program? Sometimes direct input is more efficient than click and select, and custom input is provided in many bank statement query scenarios.
2) How to ensure the correctness of date format for user-defined input?
3) Do you need to provide preset scene input? Like yesterday, three days ago, seven days ago, 30 days ago? Like many data analysis scenarios, analysts look at data cycles, such as week-over-week, month-over-month, year-over-year traffic.
4) Do I need to include default values? If there is a default, what should it be? For example, Google Flight provides default values based on the user’s history data, and holidays are filled in by default near holidays. In some data scenarios, data is delayed. Therefore, t-1 /T-2 must be provided by default to avoid the need to select the date.
5) When the user activates the input box, do you keep the default value?
6) Is a reset button provided?
7) Whether to provide “previous”, “now” and “next” navigation? This design point I have seen for the first time, specially attached to the illustration.
2.3 Date pop-up layer design
1) Ideally, any date selection should be done in three steps
2) The trigger mode of date selection pop-up layer? Do you click on the input box or the date icon?
3) How many weeks, months and days are displayed by default?
4) Is week defined as Monday to Sunday or Sunday to Saturday?
5) How to prompt the current time and time?
6) Do you need to provide “previous”, “now” and “next” navigation? If provided, how to display it in the scenario of day, month and year?
7) Prompt users to care most about information, such as price, public holidays, can use background color, dot marking
8) Whether the user clicks on the non-pop-up layer to automatically close the pop-up layer? Do you need to provide a close button?
9) Can it be linked with the input box?
10) Can the user reset the selected date?
2.4 Date interval design
1) Ideally, any date range selection should be completed in six steps
2) Will the background color prompt be made immediately after the user selects it?
3) When the user selects, does the interval need to change with the user’s action? For example, the user hover dynamically changes the selection interval.
4) Whether to provide shortcut keys to switch the day, month and year?
5) Split into two date pickers or interval form?
6) How to remove some special time points? Such as Spring Festival, holidays.
2.5 Time selection design
1) The easiest way is to have a vertical date and a horizontal time selection
2) Is it more useful to offer dates or times first? Time selection can also be useful as a filter to remove dates that are not available.
3) Provide the most commonly used time segment, and provide shortcut key selection.
3. Design highlights in the article
3.1 google flight
This case provides the user with the minimum scope to find the best choice. Although I was stunned for a second when I first saw this method, on closer inspection I found that this presentation method presented all kinds of combinations perfectly.
3.2 Spring, summer, autumn and winter
This case takes a different approach by adding the concept of season, which is necessary in some travel, airline ticket business scenarios, to provide coarse-grained date range options beyond the month.
3.3 Enumerating selection time
Use a series of buttons instead of time pickers, such as our sleep and rest schedule. Most of the time is divided into regular periods for users to choose, solidifying user selection.
3.4 Conversational Interaction
If AI is applied in the future, will the simple date picker disappear? .
3.5 Special identification weekend
In the air ticket and travel scenes, weekend is the time when everyone is most likely to travel, so vertical lines are used to highlight reminders.
4. To summarize
In general, the date picker is a business component, although there are many component libraries that include it as a UI base component. But the presentation and interaction will be all different in each different business scenario and requirement. First of all, we must clearly determine the scene that needs the date picker, especially the business strongly associated with the date, such as air ticket pricing and schedule, which is more intuitive when combined with the date picker and improves the efficiency of information retrieval by users. Minimize user operation links while meeting user requirements.
See the last dot a praise bai, give you than careful heart ❤ ~~