Долгое время использовал в своих проектах, различные готовые JavaScript-календари для ввода дат, в частности Dynarch jsCalendar, и они полностью устраивали. Но в ходе разработки одного проекта, связанного с автострахованием, возникла необходимость довольно частого ввода дат из прошлого (дни рождения, дата выдачи паспорта и водительских прав, пенсионного и т.п.). Оказалось, что использовать календари в таких случаях не так уж и удобно, так как приходится отматывать несколько десятков лет назад и для этого приходится делать много действий мышкой.
Было решено поискать более удобный вариант «мышиного ввода» (ввод даты с клавиатуры никто не отменял). Перебрав больше десятка различных календарей, условно раздел их на 3 основных типа (в скобках указан один из представителей данного типа).
Есть еще варианты, в которых год вводится с клавиатуры, но тогда, по-моему, уже проще всю дату ввести с клавиатуры.
И тут вспомнился календарь из Windows Vista/7, готовых календарей в таком стиле оказалось всего пару штук. Но у обоих был недостаток, они не умели показывать десятилетия. Ради спортивного интереса решил сделать свой вариант «вистовского» календаря, который умел бы выводить десятилетия. Вот что из этого получилось.
Основной плюс такого подхода в том, что для ввода даты таким способом нужно всего 4 клика независимо от даты (в пределах последнего столетия). Так же побочными бонусами оказалась, возможность входа и выхода на любом этапе, т.е. можно сразу показывать текущий месяц (где нужны текущие даты), можно показать год и после выбора месяца выйти (для кредиток), а можно и вовсе только год (год выпуска авто).
В Windows Vista/7 календарь выглядит несколько иначе, десятилетия выводятся диапазонами, типа 1980-1989, сначала сделал также. Но после тестов решил отказаться от этой идеи. Так как из-за вдвое большого количества чисел на той же площади, становилось сложнее сделать выбор, плюс большинство людей, не из числа программистов, привыкли считать, начиная с единицы, и для них более привычны диапазоны, типа 1981-1990, из-за чего люди начинали немного тупить в какой именно диапазон входят нулевые года. В результате решил выводить года с буквой «x» в конце, так вроде получилось более удобно, мозг уже практически чисто визуально сравнивает три первых цифры на совпадение, а не размышляет о попадании числа в диапазон.
После реализации стало любопытно, какая будет разница в скорости ввода. Сделал тестовую страничку, которая измеряет время, затраченное на ввод дат с помощью разных календарей. Для сравнения выбраны Dynarch jsCalendar в двух вариантах (года с шагом 1 и 2), jQuery UI Datepicker и мой вариант календаря в стиле Vista получивший название zDater.
Эксперименты проводились на друзьях, а также родителях (в качестве пользователей которые не очень дружат с компами).
Прогнозируемо самым медленным вариантом оказался Dynarch jsCalendar, на ввод даты уходит 11-15 секунд, на втором месте расположился jQuery UI Datepicker — время сократилось до 6-10 сек. Естественно, чем более древняя дата, тем больше времени уходит на ввод.
Ну и на первом месте с заметным преимуществом (особенно при повторном использовании, когда уже знаешь принцип работы) zDater – 4-5 секунды, а после небольших тренировок можно и в 2 секунды укладываться. У родителей конечно результаты похуже, zDater стал еще больше выигрывать у конкурентов, возможно за счет того что нет больших списков годов, в которых неподготовленным юзерам сложнее ориентироваться.
Страница с тестом, на которой вы можете протестировать самостоятельно разные варианты.
Вот пример для человека, который неплохо дружит с компом, после второго прохода (первый для ознакомления).
UPD. Поправил тестовую страницу добавил для jQuery UI русский и неделю с понедельника, сделал случайный вывод дат для теста, в zDater сдвинул под поле ввода.
Также добавлены примеры ввода разных типов дат для наглядности (например, текущая дата, месяц и год, только год).
Было решено поискать более удобный вариант «мышиного ввода» (ввод даты с клавиатуры никто не отменял). Перебрав больше десятка различных календарей, условно раздел их на 3 основных типа (в скобках указан один из представителей данного типа).
- Выбор года и месяца осуществляется стрелками (datePicker от frequency-decoder).
- Выбор года и месяца стрелками и из выпадающего списка (Dynarch jsCalendar).
- Выбор года и месяца из стандартных селектов (jQuery UI Datepicker).
Есть еще варианты, в которых год вводится с клавиатуры, но тогда, по-моему, уже проще всю дату ввести с клавиатуры.
Календарь в стиле Windows Vista/7
И тут вспомнился календарь из Windows Vista/7, готовых календарей в таком стиле оказалось всего пару штук. Но у обоих был недостаток, они не умели показывать десятилетия. Ради спортивного интереса решил сделать свой вариант «вистовского» календаря, который умел бы выводить десятилетия. Вот что из этого получилось.
Основной плюс такого подхода в том, что для ввода даты таким способом нужно всего 4 клика независимо от даты (в пределах последнего столетия). Так же побочными бонусами оказалась, возможность входа и выхода на любом этапе, т.е. можно сразу показывать текущий месяц (где нужны текущие даты), можно показать год и после выбора месяца выйти (для кредиток), а можно и вовсе только год (год выпуска авто).
В Windows Vista/7 календарь выглядит несколько иначе, десятилетия выводятся диапазонами, типа 1980-1989, сначала сделал также. Но после тестов решил отказаться от этой идеи. Так как из-за вдвое большого количества чисел на той же площади, становилось сложнее сделать выбор, плюс большинство людей, не из числа программистов, привыкли считать, начиная с единицы, и для них более привычны диапазоны, типа 1981-1990, из-за чего люди начинали немного тупить в какой именно диапазон входят нулевые года. В результате решил выводить года с буквой «x» в конце, так вроде получилось более удобно, мозг уже практически чисто визуально сравнивает три первых цифры на совпадение, а не размышляет о попадании числа в диапазон.
Сравнение юзабилити календарей
После реализации стало любопытно, какая будет разница в скорости ввода. Сделал тестовую страничку, которая измеряет время, затраченное на ввод дат с помощью разных календарей. Для сравнения выбраны Dynarch jsCalendar в двух вариантах (года с шагом 1 и 2), jQuery UI Datepicker и мой вариант календаря в стиле Vista получивший название zDater.
Эксперименты проводились на друзьях, а также родителях (в качестве пользователей которые не очень дружат с компами).
Прогнозируемо самым медленным вариантом оказался Dynarch jsCalendar, на ввод даты уходит 11-15 секунд, на втором месте расположился jQuery UI Datepicker — время сократилось до 6-10 сек. Естественно, чем более древняя дата, тем больше времени уходит на ввод.
Ну и на первом месте с заметным преимуществом (особенно при повторном использовании, когда уже знаешь принцип работы) zDater – 4-5 секунды, а после небольших тренировок можно и в 2 секунды укладываться. У родителей конечно результаты похуже, zDater стал еще больше выигрывать у конкурентов, возможно за счет того что нет больших списков годов, в которых неподготовленным юзерам сложнее ориентироваться.
Страница с тестом, на которой вы можете протестировать самостоятельно разные варианты.
Вот пример для человека, который неплохо дружит с компом, после второго прохода (первый для ознакомления).
UPD. Поправил тестовую страницу добавил для jQuery UI русский и неделю с понедельника, сделал случайный вывод дат для теста, в zDater сдвинул под поле ввода.
Также добавлены примеры ввода разных типов дат для наглядности (например, текущая дата, месяц и год, только год).