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

[former_member217432]

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 

[former_member501093]

Hi Diana,

Cool design ! This will be very useful for users.

Regards,

Sauranil

[former_member217432]

Glad to hear that, Sauranil, thanks! 🙂

[kwarcaba]

Hi,

Sorry to say that but our client does not like the new look. Is it possible to somehow switch back to slider version for DateTimePicker?

Best Regards,

Kamil Warcaba

[former_member217432]

Hello Kamil,

Based on the user study we did and the good performance of the chosen concept, we decided that the new look will be the only one as of version 1.90 for the Time Picker and 1.97 for the Date Time Picker.
The old look is only available in the versions below.

Regards,
Diana

[kwarcaba]

Hello Diana,

Thanks for clarification.

Best Regards,

Kamil Warcaba

[ricardopr]

Hi Diana,

Can you publish some of these studies? I'm super keen to understand better the test process behind this decision resulting in better performance and efficiency.

We are running some usability tests, and the users got confused most of the time.

[david_fryda2]

Hi,

This Time Picker is hard to understand, not user friendly at all.

Clients thought that this was a bug and asked where the Time Picker disappeared.

So the only question that remains is why not leave the option to use the old one.

 

Thanks.

 

Regards.

 

 

[former_member217432]

Hello david.fryda2, ricardopr and warcabal,

Thank you for your feedback, we appreciate it!

While we understand that the new design can be challenging at first, we firmly believe that it provides a better user experience in the long run. It is designed to streamline processes, improve productivity, and incorporate the latest industry standards.

Unfortunately, we can't share the user testing results as they are connected with NDAs.

In order to ensure that your needs are taken into consideration, we would like to invite you to participate in our upcoming user research sessions that will start next week. If you are interested in participating, please let us know so we could provide you with further details. By sharing your vision and specific requirements, you can directly contribute to shaping future enhancements.

Thanks & Regards,
Diana