Work samples

Date-Time input component

As part of the UX standardization process at Ciena, I am responsible for creating design patterns and UI components that can be used by other product teams. Date Time Input is one such generic component that addresses different scenarios in which a user would choose to input Date, Time or a combination of both. Below is an example/reference of such documentation and specification. The purpose of this entry is to illineate the process of creating a component and documenting it for the development.


1. Description

A date/time input component is a collection of graphical user interface elements that should be used when users need to specify date, time or a combination of both in an application, as part of specific tasks. Example of such tasks include - creation of a new service or filtering on items listed in an object browser.

    1. Date only
    2. Time only


    3. Date + Time


    4. Range of Date + Time


2. Behavior

  • The date and time input boxes supports their respective formats
  • Input boxes inherit visual design and other attributes of a Text and Text field patterns
  • The input boxes should pick up the correct date/time format from what user inputs on the input boxes. For example, typing 20160229 in the date input box would result in the displaying of date as 2016-02-29. And like wise when user types 2 Feb 2016.
  • Time only input box is filled by keyboard input - typing in the box.
  • Date and time combined input boxes are filled by selecting a date from the dropdown (point no. 6) and then specifying a time by typing inside the time input box (point no. 5)
  • Range of date and time inputs behave as a single input unit that user can fill either by directly typing inside the respective input boxes or by clicking on the icon to bring out the calendar flyout. User enters both date and time for start and end on this calendar flyout without loosing focus.
  • By default, the start date and time display current date and time on the user's application.
  • User can choose to not select start date/time if he/she wants to perform an action 'NOW'. In this case, the respective input boxes would show live date and time.
  • 3. Usage guideline

    This component(s) should be used whenever a date, time or a combined input is required by the user to perform an action. For example filtering on an object browser, creating a new service or recording the performance data for a time period. Date and times should appear at the appropriate step of the process - according to the logical flow needed to complete the task.

    4. Specs

    Single time input inherits visual specs of the text input component. Recommended icon sizes is 25X25 px.


    5. Interactive mockup explorations

  • Mockup 1
  • Mockup 2
  • Mockup 3
  • Mockup 4