vaadin-date-picker UI design

[jouni]

A component for selecting a date or multiple dates/a range of dates.

UI Design

• End user feature design: features for 1.0 and a few minor further
• Prototype selected designs or parts of a design
  • Implementation
  • User testing

Attachments (prior ideation)

• Prototype
• Touch interface mockup
• Desktop mockup

[cwayfinder]

Probably you can borrow ideas from this http://www.materialup.com/collections/calendars-in-material-design

[tuomasnironen]

Should the suggested element name be vaadin-datepicker? You see both versions used but with a quick googling "datepicker" appears to be written as one word in top search results.

[tuomasnironen]

Should the element include also time picker or just the dates for now? Ping @JouniK

[jouni]

Just dates now.

[jouni]

Forgot to comment about the element name. That’s not really that important right now, but I would personally go with vaadin-date-picker since the correct English wording is “date picker” (even though many widgets still use “datepicker”).

[tuomasnironen]

Attaching an initial version (for mobile screens) with some variations in the UI. Please take a look and let me know your likes/dislikes/other comments @JouniK .

[Saulis]

🏆

[tuomasnironen]

Latest iterations of UI layout here:

[jouni]

For inspiration, here’s the same component from Angular Material: https://material.angularjs.org/latest/#/demo/material.components.datepicker

[jouni]

Some questions that came up when looking at the designs:

• How does keyboard navigation work inside the popups?
• How do you move between the month and year lists in the infinite scrollable popup?
• What are the “…” in the month list?
• Does the large screen popup always open centered on the screen, or where?

Intuitively I would prefer the infinite scrolling list, with the option for toggling the granularity from days to months to years (i.e. show the full day calendars or only a list of month names or a list of year numbers in the scrolling list).

[jouni]

Moved the feature list to the main description, and copied the use case descriptions into a Google Doc.

[jouni]

Idea for the month/year navigation. Both infinite list views, the other one has a “shortcut” sidebar to quickly jump to a certain year (similar to iOS contacts list alphabet links):

[tuomasnironen]

Good ideas. I will include them in the next design iteration. In the meantime, here is the updated UI layout for what I was working on:

[tuomasnironen]

Graphical design status update: The designs include patterns for 1.0 features. Later version features will be added in the future design updates, as well as 1.0 designs will be revised according to feedback from proto user testing.