The Fresh New Design of the UI5 Time Picker for improved User Experience

Motivation 

The feedback we received showed clearly that our users desire faster and easier time picker, especially on mobile. To improve the usability of the control, we have conducted a user study, testing different time picker and type input concepts. The newly presented “Clock Dial” time picker derived from this study with the highest ranking and good performance. In this blog post, as a member of the team, responsible for this control, I want to share with you some special insights about the change in the appearance and behavior of the Time Picker.

Components and their new behavior 

The Time Picker control is composed of a time input field and a time picker button and you can pick a time via the input field or alternatively using the button on the right. At first glance nothing has changed, but when clicking on the button the brand-new time picker clock-dial dropdown appears!

     The TimePicker before UI5 1.90                 The new “Clock Dial” Time Picker

On desktop devices 

Using the clock-dial interface on desktop you can select a time in various ways: 

via keyboard: 

• Arrow Up/Down to increase or decrease the numbers.  
• Directly typing the numbers 
• AM/PM can be changed with pressing A or P keys 
• Switch between the clock dials (hours to minutes, or minutes to seconds) can be done by pressing Tab, Space or Colon sign (:) 

via mouse:

• Clicking on a specific number in the dial selects the value, and the picker automatically switches to the next available clock dial 
• Using the mouse wheel to increase/decrease the value 
• Mouse down, drag and then mouse up selects the value, and the picker switches to the next available clock dial 

via touch:

• Touch on a specific number in the dial selects it, and the picker switches to the next available clock dial 
• Touch down, drag and then release the touch selects the value, and the picker switches to the next available clock dial
  

On mobile devices 

On mobile – users get the new clock-dial interface when touching the time picker button. The usage is the same as described above via touch. 

Alternatively, if you prefer to enter the time directly using the time picker input field, a new popover with numeric inputs and a numeric keyboard appears that allows to enter the time quick and easily. 

If the mobile device is connected to an external keyboard, the options to use it are the same as on desktop.

What does this mean to me as a developer?  

The change in the control does not require any additional configuration. The API of the control stays untouched, so this new visual appearance and behavior comes without further configuration when upgrading an existing application to a UI5 version 1.90 or higher. Otherwise the control behaves as supplied before.

Conclusion 

That’s how a customer feedback leads to improvement! We hope that you share your thoughts about the new design, and we’re open for other optimization ideas regarding our framework!

More information about the Time Picker 

• API documentation:https://sapui5.hana.ondemand.com/1.90.0/#/api/sap.m.TimePicker  
• Examples: https://sapui5.hana.ondemand.com/1.90.0/#/entity/sap.m.TimePicker 
  

For more information on UI5 

• Exchange knowledge: SAP Community | Q&A | Blog Post | Slack 
• Learn more: SAPUI5 Demo Kit | openSAP | UI5 NewsCast | UI5ers live 
• Try UI5 for free:  SAPUI5 | OpenUI5 | OpenUI5 on NPM | SAPUI5 on NPM 
• Follow us: Twitter | YouTube