Comparative testing of javascript calendars
For a long time I used various ready-made JavaScript calendars for entering dates in my projects, in particular Dynarch jsCalendar, and they were completely satisfied. But during the development of one project related to car insurance, it became necessary to quite often enter dates from the past (birthdays, passport and driver's license, pension, etc.). It turned out that using calendars in such cases is not so convenient, since you have to wind off several decades ago and for this you have to do a lot of actions with the mouse.
It was decided to look for a more convenient version of “mouse input” (nobody canceled the date entry from the keyboard). After going through more than a dozen different calendars, they are conventionally divided into 3 main types (in brackets one of the representatives of this type is indicated).
There are other options in which the year is entered from the keyboard, but then, in my opinion, it is already easier to enter the entire date from the keyboard.
And then I remembered the calendar from Windows Vista / 7, there were only a couple of ready-made calendars in this style. But both had a flaw, they did not know how to show decades. For the sake of sports interest, I decided to make my own version of the “Whist” calendar, which would be able to display for decades. That's what came out of it.
')
The main advantage of this approach is that to enter the date in this way you need only 4 clicks regardless of the date (within the last century). It also turned out to be side bonuses, the ability to enter and exit at any stage, i.e. you can immediately show the current month (where current dates are needed), you can show the year and after choosing a month to go out (for credit cards), but you can do only a year (year of release of the car).
In Windows Vista / 7, the calendar looks a little different, decades are displayed by ranges, such as 1980-1989, at first did as well. But after the tests I decided to abandon this idea. Since, due to twice the number of numbers in the same area, it became harder to make a choice, plus most people, not from among programmers, were accustomed to count, starting with one, and more familiar to them are ranges, such as 1981-1990, because What people started to blunt a little in what range the zero years are. As a result, I decided to display the year with the letter “x” at the end, so it seemed to be more convenient, the brain is already almost purely visually comparing the first three digits for a match, and does not reflect on the number falling into the range.
After the implementation, it became curious what the difference in input speed will be. I made a test page that measures the time spent on entering dates using different calendars. For comparison, the selected Dynarch jsCalendar in two versions (year with increments of 1 and 2), jQuery UI Datepicker and my version of the calendar in the style of Vista called zDater.
The experiments were conducted on friends, as well as parents (as users who are not very friendly with computers).
Predictedly, the slowest option turned out to be Dynarch jsCalendar, it takes 11-15 seconds to enter the date, jQuery UI Datepicker is in second place - the time has been reduced to 6-10 seconds. Naturally, the older the date, the more time it takes to enter.
Well, in the first place with a noticeable advantage (especially when reused, when you already know the principle of operation), zDater is 4-5 seconds, and after small trainings it is possible to keep within 2 seconds. Parents, of course, have worse results, zDater has won even more from competitors, perhaps due to the fact that there are no large lists of years in which unprepared users are more difficult to navigate.
A test page on which you can independently test various options.
Here is an example for a person who is not bad friends with a computer, after the second pass (the first one for familiarization).
UPD. Corrected the test page added for jQuery UI Russian and a week from Monday, made a random conclusion of dates for the test, in zDater shifted under the input field.
Also added examples of entering different types of dates for clarity (for example, the current date, month and year, only year).
It was decided to look for a more convenient version of “mouse input” (nobody canceled the date entry from the keyboard). After going through more than a dozen different calendars, they are conventionally divided into 3 main types (in brackets one of the representatives of this type is indicated).
- The choice of year and month is made by arrows (datePicker from frequency-decoder).
- Select the year and month by arrows and from the drop-down list (Dynarch jsCalendar).
- Select the year and month from the standard selects (jQuery UI Datepicker).
There are other options in which the year is entered from the keyboard, but then, in my opinion, it is already easier to enter the entire date from the keyboard.
Calendar in the style of Windows Vista / 7
And then I remembered the calendar from Windows Vista / 7, there were only a couple of ready-made calendars in this style. But both had a flaw, they did not know how to show decades. For the sake of sports interest, I decided to make my own version of the “Whist” calendar, which would be able to display for decades. That's what came out of it.
')
The main advantage of this approach is that to enter the date in this way you need only 4 clicks regardless of the date (within the last century). It also turned out to be side bonuses, the ability to enter and exit at any stage, i.e. you can immediately show the current month (where current dates are needed), you can show the year and after choosing a month to go out (for credit cards), but you can do only a year (year of release of the car).
In Windows Vista / 7, the calendar looks a little different, decades are displayed by ranges, such as 1980-1989, at first did as well. But after the tests I decided to abandon this idea. Since, due to twice the number of numbers in the same area, it became harder to make a choice, plus most people, not from among programmers, were accustomed to count, starting with one, and more familiar to them are ranges, such as 1981-1990, because What people started to blunt a little in what range the zero years are. As a result, I decided to display the year with the letter “x” at the end, so it seemed to be more convenient, the brain is already almost purely visually comparing the first three digits for a match, and does not reflect on the number falling into the range.
Calendar Usability Comparison
After the implementation, it became curious what the difference in input speed will be. I made a test page that measures the time spent on entering dates using different calendars. For comparison, the selected Dynarch jsCalendar in two versions (year with increments of 1 and 2), jQuery UI Datepicker and my version of the calendar in the style of Vista called zDater.
The experiments were conducted on friends, as well as parents (as users who are not very friendly with computers).
Predictedly, the slowest option turned out to be Dynarch jsCalendar, it takes 11-15 seconds to enter the date, jQuery UI Datepicker is in second place - the time has been reduced to 6-10 seconds. Naturally, the older the date, the more time it takes to enter.
Well, in the first place with a noticeable advantage (especially when reused, when you already know the principle of operation), zDater is 4-5 seconds, and after small trainings it is possible to keep within 2 seconds. Parents, of course, have worse results, zDater has won even more from competitors, perhaps due to the fact that there are no large lists of years in which unprepared users are more difficult to navigate.
A test page on which you can independently test various options.
Here is an example for a person who is not bad friends with a computer, after the second pass (the first one for familiarization).
UPD. Corrected the test page added for jQuery UI Russian and a week from Monday, made a random conclusion of dates for the test, in zDater shifted under the input field.
Also added examples of entering different types of dates for clarity (for example, the current date, month and year, only year).
Source: https://habr.com/ru/post/131689/
All Articles