Lessons from Thorgate Design Lead: How to Build New Experiences using Two-Dimensional Sliders
The screen of any device with touch input is, essentially, an object from the two-dimensional world in terms of the virtual space it provides for use. It has both length and width, but no depth. Paradoxically, most of the UI controllers on the screens of our gadgets are one-dimensional objects. Take, for example, a slider: depending on its purpose and orientation on the plane, sliders have either width or length. That, it would seem, is logical, since sliders, like most other interface elements, usually are responsible for numerical increment of only one parameter. However, as it turns out in practice, this is not always the case.
Selection of the experiment subject
There are quite a few composite numerical values that users would use every day. The simplest and the most common of them, which, most likely, have already come to your mind are the date and the time in numerical designation. Thus, 11:45 time consists of two parameters: the hour and the minute, whereas the date January 15, 2013, already consists of three: the day, the month and the year. Perhaps it would be logical to argue here that it is not entirely correct to regard the component values of time as two separate parameters, because time is sequential and can be visually displayed by a straight line, where each subsequent value is greater than the previous one.
However, in this case, I consider time from the point of view of its typical use and the methods of habitual manipulation: for example, when the user faces the task of setting the current time in the system settings of an OS, or setting an alarm time. Usually in such cases, the user is first asked to set the hour component of the desired time, and then the minute component. Accordingly, in this case, from the user’s point of view, the hours and the minutes are two independent parameters that are set separately.
The fact that, perhaps, any modern-day person — a student or a working person — is forced to use an alarm clock to some extent in order to comply with their daily schedule, along with the fact that the timepicker is an integral element of the interface of any alarm clock, make this type of application an ideal platform for my experiment.
The goal of the experiment
To check the possibility of switching from the classic timepicker design to a two-dimensional slider using the example of an alarm clock application.
The main hypothesis
Due to the fact that (as we have already explained) the screen allows to simultaneously use two dimensions, the desired hour and minute of the alarm can be set in a single motion.
First sketches
Due to physical limitations of the area of the slider (with the size of the phone’s screen), I decided to take a value of 5 minutes as the minimum increment for the slider. I wish to note that, to my surprise, I did not receive any comments related to the fact that the prototype is not flexible enough to meet the user’s needs, while, as I thought, this aspect can become one of the most important obstacles for daily use.
Prototype and user testing
At different stages the prototype was tested on a small group of ca. 30 persons. The group included people with different technical backgrounds, education levels, of different sexes and ages. The main task for the test group was to set the specific alarm time, namely 11:45 AM. The measured parameter was always the time it takes for the person to complete the task.
https://framer.cloud/NMykZ
People seeing the prototype for the first time:
- Completely failed the task: 0–5%
- Required 5 to 10 seconds to solve the task: 30–35%
- Required 3 to 5 seconds to solve the task: 45–50%
- Required less than 3 seconds to solve the task: 5–10%
Repeated testing:
- Completely failed the task: 0–5%
- Required 5 to 10 seconds to solve the task: 0–5%
- Required 3 to 5 seconds to solve the task:0–5%
- Required less than 3 seconds to solve the task: 80–85%
Feedback
Most of the comments received were positive. Many emphasized that they would use such a solution to solve everyday tasks. Some people noted that, possibly, over time they would be able to select the time faster, since they would remember where specific values are situated. Some noted that this solution is too unusual. Some of the testers also said that they do not see any significant improvement in comparison with standard timepickers.
Conclusions
Based on the results of testing, it can be stated with confidence that the concept of two-dimensional sliders has completely justified itself. The first acquaintance with the new interface element, however, takes a little longer than subsequent use. Perhaps, it would be worthwhile to compare the speed of this solution with standard timepickers, but the purpose of my research was mostly to study whether such a concept is viable, and the results pleasantly surprised me. In addition to timepickers / datepickers, you can easily imagine such sliders, for example, in photo-processing applications, where the user is faced with the task of setting interdependent or associated hue / brightness values, or in music equalizer applications. In short, in any situations where users encounter the need to manipulate composite or related values.
As a disclaimer for a picky reader, I wish to note that I do not in any way declare the uniqueness of this idea and do not pretend to be a pioneer in the field. I can well imagine that something like this may already be used in certain niche products, but even so, the idea seems fresh and promising in order to try to apply it for everyday operations and to present it to a wider audience.
