The Fresh New Design of the UI5 Time Picker for improved User Experience
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:
- 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 (:)
- 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
- 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.
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