Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 56
JQuery UI быстрее всех оказался.
не та дата 19.816 14.523 20.329 29.328 не та дата 9.497 11.184
Это после первого раза? Судя по цифрам — первый раз, много времени ушло на ознакомление, так как в том же zDater время уменьшилось почти вдвое на второй дате. Уверен при еще одном проходе время значительно улучшится.
Вид zDater'a поначалу немного шокирует. Было бы легче, если бы он открывался сразу на выборе дня, с выбранным текущим. Максимум 3 лишних клика не сильно замедлят юзера, зато его не так сильно удивит внешний вид календаря.
+хотелось бы анимации, а то ткнул по календарю, а там только последние циферки поменялись.
+хотелось бы анимации, а то ткнул по календарю, а там только последние циферки поменялись.
Да поначалу непривычно, и при единичных вводах zDater даже прогрывает из-за непривычности, но он как раз изначально создавался для ввода множества дат одним пользователем, поэтому начальная непривычность менее критична.
Добавлю на тестовой странице разные варианты использования для наглядности.
Анимацию добавлю, тут пока главное сам «скелет» отточить, а приукрасить можно немного позднее.
Добавлю на тестовой странице разные варианты использования для наглядности.
Анимацию добавлю, тут пока главное сам «скелет» отточить, а приукрасить можно немного позднее.
Я бы не хотел заставлять своих пользователей тренироваться :)
Самым интуитивным показались именно select`ы JQueryUI.
Самым интуитивным показались именно select`ы JQueryUI.
Ну людям и с теми же смартфонами или планшетами по началу приходится тренироваться, понятное дело что любой новый интерфейс требует какого-то первоначального ознакомления.
Тут уже зависит от задач, если вашим пользователям нужно один раз за всё пребывание на сайте ввести дату рождения, то конечно особого смысла в использовании zDater нет. Но если пользователям регулярно нужно вводить даты, десятки или сотни в день, то уже несколько другие критерии для оценки.
Тут уже зависит от задач, если вашим пользователям нужно один раз за всё пребывание на сайте ввести дату рождения, то конечно особого смысла в использовании zDater нет. Но если пользователям регулярно нужно вводить даты, десятки или сотни в день, то уже несколько другие критерии для оценки.
Календарик понравился очень, правда я достаточно долго просидел на экране выбора десятилетия — немного непривычно.
И сделайте пожалуйста, что бы для теста можно было указать необходимую дату для выбора
И сделайте пожалуйста, что бы для теста можно было указать необходимую дату для выбора
Также интересует мнение стоит ли релизить календарик для свободного пользования, и какой функционал хотелось бы в нем видеть.
Стоит! Хотелось бы иметь возможность его настройки: например, чтобы можно было не предлагать выбор десятилетия, а сразу выбирать из последних 10 (12 в данном случае) лет или сразу начинать с выбора месяца текущего года или даже с выбора числа текущего месяца (и неплохо бы с возможностью перехода на предыдущий или следующий).
Хотя нет, для ближайших дат удобнее всё же обычный календарь.
Да, пожалуй, достаточно будет возможности начинать с выбора года, причём положение текущего тоже хорошо бы иметь возможность настраивать. Допустим, предлагаются девять предыдущих, текущий и два последующих года. Или шесть предыдущих, текущий, пять последующих.
Да, пожалуй, достаточно будет возможности начинать с выбора года, причём положение текущего тоже хорошо бы иметь возможность настраивать. Допустим, предлагаются девять предыдущих, текущий и два последующих года. Или шесть предыдущих, текущий, пять последующих.
Такой календарик много кому понадобиться! Конечно же стоит реализовать такой календарик для свободного пользования.
Хотелось бы следующего (из того что сразу в голову пришло):
>В результате решил выводить года с буквой «x» в конце, так вроде получилось более удобно, мозг уже практически чисто визуально сравнивает три первых цифры на совпадение, а не размышляет о попадании числа в диапазон.Очень удачное решение.
Хотелось бы следующего (из того что сразу в голову пришло):
- — Синхронный вывод выбираемой даты в поле ввода.
- — Изменение значения (на каждом этапе выделять элемент соответствующий дате).
- — Управления скролом-мыши (это очень удобно, например как в Windows).
- — Клавиатурное управление:
— Выбор/выделение элемента на текущем этапе: перемещение стрелочками, цифровым вводом (дополнительно «буквенный ввод» для этапа с выбором месяца);
— Отмена изменения даты — «Escape»;
— Переход на следующий этап — «Enter», «Space», «.», «,»;
— Переход на предыдущий этап — «Backspace»;
- — Установки и конфигурирование:
— Диапазон возможных дат (максимальны и минимальная дата);
— Пред-установка даты;
— Выбор между инлайновым и всплывающим календарём.
— Возможность установки окончательного выбора с помощью двойного клика.
Симпатично, оригинально? но неудобно!
В чем скрытая причина такого маленького размера контрола? неужели сложно сделать его больше и вместить больше контролов?
p.s. к сожалению скриншота сейчас привести не смогу… когда то очень давно делал свой контрол-календарик выбора даты (не веб), он занимал почти в двое больше места и содержал больше контролов.
* сбоку был доступен выбор вариантов дат (настраивался так же свойствами контрола), при этом если предлагается только год и месяц, то день и время не менялся. Так как в подавляющем большинстве случаев этот список был возможен (на основе предыдущих дат, типе вводимых данных и т.п.), но был специально коротким — 3-4 варианта, 'и он часто использовался' (проект не долго использовался в целом и загнулся).
* поле ввода самой даты цифрами было доступно одновременно с календариком (синхронизированы — изменения отображаются сразу у обоих) — это наверное самое обязательное
* месяц выбирался в выпадающем списке (а так же можно было нажать соответствующий символ на клавиатуре — они при отображении списка месяцев выделялись в названии)
* курсор по умолчанию устанавливался в поле с годом (или поле ввода часа — настраивалось свойством), на последних двух цифрах — позволяло год вводить сразу же после открытия календарика
* клавиши-стрелки вверх/вниз и pgup/pgdown увеличивали/уменьшали значение поля, в котором стоит курсор, переход между полями стрелками влево/вправо и автоматически после окончания ввода. т.е. не приходилось лишний раз щелкать 'tab' или 'точку' (точка — отдельный разговор, то что она в разных раскладках находится на разных местах это издевательство, но поддержку в контроле вводил: точка, запятая, минус и двоеточие меняли текущий контрол на следующий)
* календарик полностью можно было использовать на клавиатуре, кстати в обоих раскладках EN и RU одни и те же клавиши (ориентировались на русские буквы)
Специальных тестов на скорость ввода не проводил, но мысль у меня была следующая — действий пользователь должен выполнять по минимуму (действие — это просмотр/ввод числа/нажатие клавиши/перенос руки на мышку/движение мышки) — в среднем получалось пять/шесть действий с момента открытия календарика… это очень хороший результат.
В чем скрытая причина такого маленького размера контрола? неужели сложно сделать его больше и вместить больше контролов?
p.s. к сожалению скриншота сейчас привести не смогу… когда то очень давно делал свой контрол-календарик выбора даты (не веб), он занимал почти в двое больше места и содержал больше контролов.
* сбоку был доступен выбор вариантов дат (настраивался так же свойствами контрола), при этом если предлагается только год и месяц, то день и время не менялся. Так как в подавляющем большинстве случаев этот список был возможен (на основе предыдущих дат, типе вводимых данных и т.п.), но был специально коротким — 3-4 варианта, 'и он часто использовался' (проект не долго использовался в целом и загнулся).
* поле ввода самой даты цифрами было доступно одновременно с календариком (синхронизированы — изменения отображаются сразу у обоих) — это наверное самое обязательное
* месяц выбирался в выпадающем списке (а так же можно было нажать соответствующий символ на клавиатуре — они при отображении списка месяцев выделялись в названии)
* курсор по умолчанию устанавливался в поле с годом (или поле ввода часа — настраивалось свойством), на последних двух цифрах — позволяло год вводить сразу же после открытия календарика
* клавиши-стрелки вверх/вниз и pgup/pgdown увеличивали/уменьшали значение поля, в котором стоит курсор, переход между полями стрелками влево/вправо и автоматически после окончания ввода. т.е. не приходилось лишний раз щелкать 'tab' или 'точку' (точка — отдельный разговор, то что она в разных раскладках находится на разных местах это издевательство, но поддержку в контроле вводил: точка, запятая, минус и двоеточие меняли текущий контрол на следующий)
* календарик полностью можно было использовать на клавиатуре, кстати в обоих раскладках EN и RU одни и те же клавиши (ориентировались на русские буквы)
Специальных тестов на скорость ввода не проводил, но мысль у меня была следующая — действий пользователь должен выполнять по минимуму (действие — это просмотр/ввод числа/нажатие клавиши/перенос руки на мышку/движение мышки) — в среднем получалось пять/шесть действий с момента открытия календарика… это очень хороший результат.
Ну во-первых, это пока можно сказать набросок, а не конечный продукт, он пока даже не зарелизен. Чтобы понять стоит ли двигаться дальше. Это можно сказать альфа-версия, чтобы можно было опробовать концепцию. Или Вы чтобы проверить основной алгоритм сначала делаете всякие второстепенные украшения?
Во-вторых, большинство того что Вы перечислили планируется реализовать, в том числе контроль ввода в input, автоформатирование и горячие кнопки.
В-третьих, что касается много контролов, то много элементов рассеивают внимание, и при вводе случайных дат (или вы будете клиентов выстраивать в очереди по дате рождения), никакой зависимости между вводимыми датами практически нет, и соответственно эти конторолы будет просто занимать место.
Во-вторых, большинство того что Вы перечислили планируется реализовать, в том числе контроль ввода в input, автоформатирование и горячие кнопки.
В-третьих, что касается много контролов, то много элементов рассеивают внимание, и при вводе случайных дат (или вы будете клиентов выстраивать в очереди по дате рождения), никакой зависимости между вводимыми датами практически нет, и соответственно эти конторолы будет просто занимать место.
Извините, но тестирование «подогнано» под ваш календарь.
На любом из календарей дату плюс минус 1-2 месяца можно выбрать быстрее, чем на вашем календаре.
Если мне нужно выбрать послезавтра, то мне не хочется делать 4 клика, мне достаточно сделать один.
Ваш календарь удобен, тут не поспоришь. Но скорость работы с ним может быть преимуществом только, если надо указывать даты, сильно отличающиеся от текущей в будущее или прошлое.
На любом из календарей дату плюс минус 1-2 месяца можно выбрать быстрее, чем на вашем календаре.
Если мне нужно выбрать послезавтра, то мне не хочется делать 4 клика, мне достаточно сделать один.
Ваш календарь удобен, тут не поспоришь. Но скорость работы с ним может быть преимуществом только, если надо указывать даты, сильно отличающиеся от текущей в будущее или прошлое.
Дык судя по топику такой юзекейс и был.
Как бы изначально задача стояла даты вводить из прошлого (так как ОСАГО не выдают новорожденным). А для ввода текущих дат практически неважно какой календарик, они выглядят практически идентично, потому там, как бы, и сравнивать особо нечего.
Я же писал, что в zDater можно указывать для каждого календаря откуда начинать, он спокойно может выводить сразу календарь с днями, а не десятилетия.
Немного позднее поправлю страничку с тестом, и добавлю там варианты ввода других дат, как текущих, так и неполных дат.
Я же писал, что в zDater можно указывать для каждого календаря откуда начинать, он спокойно может выводить сразу календарь с днями, а не десятилетия.
Немного позднее поправлю страничку с тестом, и добавлю там варианты ввода других дат, как текущих, так и неполных дат.
В винде при выборе десятилетий диапазоны сделаны не просто так, год вида 198x слишком непривычен, особенно если это первое что видишь после открытия календаря.
Там же первым слайдом показывается сегодняшняя дата и есть небольшая анимация, благодаря которой показывается как мы попали на выбор десятилетий.
Но. Если ваш календарь показывать с сегодняшней даты, тогда он начнет проигрывать уишному.
Сделайте более грамотные тесты, со случайными числами из одного месяца, года, десятилетия и столетия, настройте УИшный календарь (неделя должна начинаться с понедельника, названия на русском), выводите календари в случайном порядке, тогда можно будет сравнивать показатели.
Там же первым слайдом показывается сегодняшняя дата и есть небольшая анимация, благодаря которой показывается как мы попали на выбор десятилетий.
Но. Если ваш календарь показывать с сегодняшней даты, тогда он начнет проигрывать уишному.
Сделайте более грамотные тесты, со случайными числами из одного месяца, года, десятилетия и столетия, настройте УИшный календарь (неделя должна начинаться с понедельника, названия на русском), выводите календари в случайном порядке, тогда можно будет сравнивать показатели.
1) вместо 196x предлагаю сделать «196...», ибо нагляднее. цифру «6» можно делать bold-ом, а то и цветом. то же самое — с выбором кокретного года. поэкспериментируйте, может получиться лучше чем сейчас.
2) выбор десятилетия/года/месяца надо таки сделать в столбик, это очень чётко улавливается интуитивно.
в остальном идея очень понравилась.
2) выбор десятилетия/года/месяца надо таки сделать в столбик, это очень чётко улавливается интуитивно.
в остальном идея очень понравилась.
1) Я этот «x» просто в настройки запихну, каждый будет сам решать что ему нравится. Насчет жирного подумаю.
2) В столбик будет проблема с местом, много места будут 12 элементов занимать по высоте. А если делать прокрутку, то тогда уже почти не будет отличия от стандартного селекта.
2) В столбик будет проблема с местом, много места будут 12 элементов занимать по высоте. А если делать прокрутку, то тогда уже почти не будет отличия от стандартного селекта.
1) ещё можно дополнительно обернуть эту циферку/буковку в дополнительный и пускай каждый стилями вертит как ему нравится, хоть подчёркивает)
2) согласен про нехватку места, но опять же — 12 элементов это не так много, зато намного проще уловить глазом очерёдность, по сетке надо искать, а по списку — сразу чувствуешь, где нужный тебе элемент. если вам не нравится делать так по умолчанию, можно сделать опцией. лично я был бы ей очень рад :)
2) согласен про нехватку места, но опять же — 12 элементов это не так много, зато намного проще уловить глазом очерёдность, по сетке надо искать, а по списку — сразу чувствуешь, где нужный тебе элемент. если вам не нравится делать так по умолчанию, можно сделать опцией. лично я был бы ей очень рад :)
Пару месяцев назад стоял перед похожим выбором. Ни 1 из существующих вариантов меня не устроил (точнее был 1, но он использовал mootools, а я использую jQuery). В итоге скопировал все идеи из win7 календаря, + пара мелких своих. Получилось удобно :) А в вашем примере в первых двух сразу же запутался и бросил.
Самый удобный способ — просто ввести дату. Обычными клавишами цифрового блока ввести дату. Своё время сказать не могу, тестовая страница категорически не хочет понимать такой способ.
Есть еще такой календарь: kendoui calendar, который похож на zDater.
В Windows Vista/7 калькулятор выглядит несколько иначе…— наверное, все-таки, календарь )
По-моему, календарь должен быть таким: dev.base86.com/app/pages/scripts/vista-like_ajax_calendar_version_2/
Добавьте его для интереса в конец своего списка
Добавьте его для интереса в конец своего списка
Отличный календарь.
Я как раз его и имел ввиду когда говорил о календарях в виста-стиле, но не нашел там, как можно выйти на десятилетия.
Второй аналог без десятилетий www.eyecon.ro/datepicker/ который я рассматривал.
Второй аналог без десятилетий www.eyecon.ro/datepicker/ который я рассматривал.
(сделав хитрое лицо) Позвольте и мне высказать свое мнение. Мне нравится календарь внизу этой страницы: zm-sochi.ru/offers/novyy_god_v_mosenergo_4.html#form-order. Он правда не позволит выбрать 1955 год, но, по моему, он куда удобнее и юзабельнее.
Самый правильный календарь есть в Ajax Control Toolkit того же Майкрософта. Когда просекаешь, что режимы переключаются нажатием на заголовок, ничего удобнее уже не придумать. Жаль, в jQ UI нет такого.
Если Вы планируете сделать удобную штуку для широкого использования, предлагаю спросить про этот Календарик в «Советах»
У меня, кстати, на jQuery UI быстрее всего. Скорее потому что я знаю уже, как им пользоваться.
У меня, кстати, на jQuery UI быстрее всего. Скорее потому что я знаю уже, как им пользоваться.
Очень хорошее решение, спасибо. Но лично мне не хватает возможности вернуться обратно на уровень выше, после выбора диапазона.
Кстати обнаружился еще приятный бонус, zDater нормально работает на смарте, тестил в Opera Mobile на Android, у кого есть возможность, потестите на iOS, WP и разных планшетах. Причем результаты получается не намного хуже, чем на компе, в моем случае 6-7 секунд.
К сожалению, из-за месива id в вызове датапикера, не смог использовать ваш календарь (нужно повесить на класс, чтобы легко добавлять функционал во все формы веб-приложения. Нашел вот такой jscontrols.ru/controls/?datepicker — еще и с функцией автокорректировки ввода (раньше использовал отдельный). Правда, декады там не в пример вашим хуже сделаны.
Идея хорошая — красивый и удобный календарь. Но когда отрываешь первый раз, только через несколько секунд понимаешь что это за матрица.
Для тестов попробуйте сделать еще такой вариант — показывайте сразу 4 блока расположенные рядом один за другим — выбор десятилетия, года, месяца, дня и по-умолчанию показывайте какую-нибудь дату (выделяйте выбранные элементы). То есть у вас сейчас эти блоки показываются последовательно один за другим, а попробуйте замерить скорость ввода, когда они показываются все сразу.
Для тестов попробуйте сделать еще такой вариант — показывайте сразу 4 блока расположенные рядом один за другим — выбор десятилетия, года, месяца, дня и по-умолчанию показывайте какую-нибудь дату (выделяйте выбранные элементы). То есть у вас сейчас эти блоки показываются последовательно один за другим, а попробуйте замерить скорость ввода, когда они показываются все сразу.
ждём релиза zDater
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Сравнительное тестирование JavaScript-календарей