Pull to refresh

Comments 56

JQuery UI быстрее всех оказался.
не та дата 	19.816 	14.523 	20.329
29.328 	не та дата 	9.497 	11.184
Это после первого раза? Судя по цифрам — первый раз, много времени ушло на ознакомление, так как в том же zDater время уменьшилось почти вдвое на второй дате. Уверен при еще одном проходе время значительно улучшится.
Вид zDater'a поначалу немного шокирует. Было бы легче, если бы он открывался сразу на выборе дня, с выбранным текущим. Максимум 3 лишних клика не сильно замедлят юзера, зато его не так сильно удивит внешний вид календаря.

+хотелось бы анимации, а то ткнул по календарю, а там только последние циферки поменялись.
Да поначалу непривычно, и при единичных вводах zDater даже прогрывает из-за непривычности, но он как раз изначально создавался для ввода множества дат одним пользователем, поэтому начальная непривычность менее критична.

Добавлю на тестовой странице разные варианты использования для наглядности.

Анимацию добавлю, тут пока главное сам «скелет» отточить, а приукрасить можно немного позднее.
Я бы не хотел заставлять своих пользователей тренироваться :)
Самым интуитивным показались именно select`ы JQueryUI.
Ну людям и с теми же смартфонами или планшетами по началу приходится тренироваться, понятное дело что любой новый интерфейс требует какого-то первоначального ознакомления.

Тут уже зависит от задач, если вашим пользователям нужно один раз за всё пребывание на сайте ввести дату рождения, то конечно особого смысла в использовании zDater нет. Но если пользователям регулярно нужно вводить даты, десятки или сотни в день, то уже несколько другие критерии для оценки.
Не занудства ради, а где требуется так часто вводить даты? И не проще ли тогда сделать простой инпут — вбиваешь себе на цифровой клавиатуре и радуешься.

PS: У меня дату выбирают только в одном месте и то можно без этого.
Я же писал в самом начале, в моем случае это онлайн-система для автострахования (выписка полисов ОСАГО и КАСКО).
Календарик понравился очень, правда я достаточно долго просидел на экране выбора десятилетия — немного непривычно.

И сделайте пожалуйста, что бы для теста можно было указать необходимую дату для выбора
В смысле просто текстовые поля добавить для ввода даты с которой потом сравнивать результат? Я подумывал над тем чтобы просто выводить даты случайно.
Либо так, либо случайно. Тестовое поле для своей даты хорошо тем, что человек может выбрать ту дату которая ему больше всего нравится или своей день рождения — самую частую дату которую необходимо вводить. Рандомная хороша тем, что уравнивает всех и вся.
Добавил случайные даты.
И так же, рандомно надо менять положение календарей, так же будет более честный тест
Также интересует мнение стоит ли релизить календарик для свободного пользования, и какой функционал хотелось бы в нем видеть.
Стоит! Хотелось бы иметь возможность его настройки: например, чтобы можно было не предлагать выбор десятилетия, а сразу выбирать из последних 10 (12 в данном случае) лет или сразу начинать с выбора месяца текущего года или даже с выбора числа текущего месяца (и неплохо бы с возможностью перехода на предыдущий или следующий).
Хотя нет, для ближайших дат удобнее всё же обычный календарь.

Да, пожалуй, достаточно будет возможности начинать с выбора года, причём положение текущего тоже хорошо бы иметь возможность настраивать. Допустим, предлагаются девять предыдущих, текущий и два последующих года. Или шесть предыдущих, текущий, пять последующих.
Ох, и невнимательно же я читал статью! Позор на мои седины! :)

Тем не менее, про положение текущего года, кажется, не упоминалось — а было бы неплохо иметь такую настройку.
Я добавил на тестовую страницу внизу несколько примеров использования для наглядности.
Спасибо! То, что нужно!
Такой календарик много кому понадобиться! Конечно же стоит реализовать такой календарик для свободного пользования.

>В результате решил выводить года с буквой «x» в конце, так вроде получилось более удобно, мозг уже практически чисто визуально сравнивает три первых цифры на совпадение, а не размышляет о попадании числа в диапазон.
Очень удачное решение.

Хотелось бы следующего (из того что сразу в голову пришло):

  • — Синхронный вывод выбираемой даты в поле ввода.

  • — Изменение значения (на каждом этапе выделять элемент соответствующий дате).

  • — Управления скролом-мыши (это очень удобно, например как в Windows).

  • — Клавиатурное управление:
      — Выбор/выделение элемента на текущем этапе: перемещение стрелочками, цифровым вводом (дополнительно «буквенный ввод» для этапа с выбором месяца);
      — Отмена изменения даты — «Escape»;
      — Переход на следующий этап — «Enter», «Space», «.», «,»;
      — Переход на предыдущий этап — «Backspace»;

  • — Установки и конфигурирование:
      — Диапазон возможных дат (максимальны и минимальная дата);
      — Пред-установка даты;
      — Выбор между инлайновым и всплывающим календарём.
      — Возможность установки окончательного выбора с помощью двойного клика.
Похоже мы с Вами практически одинаково мыслим, все это как раз и планируется добавить. На странице с тестом написал краткий список реализуемых функций.
Симпатично, оригинально? но неудобно!
В чем скрытая причина такого маленького размера контрола? неужели сложно сделать его больше и вместить больше контролов?

p.s. к сожалению скриншота сейчас привести не смогу… когда то очень давно делал свой контрол-календарик выбора даты (не веб), он занимал почти в двое больше места и содержал больше контролов.
* сбоку был доступен выбор вариантов дат (настраивался так же свойствами контрола), при этом если предлагается только год и месяц, то день и время не менялся. Так как в подавляющем большинстве случаев этот список был возможен (на основе предыдущих дат, типе вводимых данных и т.п.), но был специально коротким — 3-4 варианта, 'и он часто использовался' (проект не долго использовался в целом и загнулся).
* поле ввода самой даты цифрами было доступно одновременно с календариком (синхронизированы — изменения отображаются сразу у обоих) — это наверное самое обязательное
* месяц выбирался в выпадающем списке (а так же можно было нажать соответствующий символ на клавиатуре — они при отображении списка месяцев выделялись в названии)
* курсор по умолчанию устанавливался в поле с годом (или поле ввода часа — настраивалось свойством), на последних двух цифрах — позволяло год вводить сразу же после открытия календарика
* клавиши-стрелки вверх/вниз и pgup/pgdown увеличивали/уменьшали значение поля, в котором стоит курсор, переход между полями стрелками влево/вправо и автоматически после окончания ввода. т.е. не приходилось лишний раз щелкать 'tab' или 'точку' (точка — отдельный разговор, то что она в разных раскладках находится на разных местах это издевательство, но поддержку в контроле вводил: точка, запятая, минус и двоеточие меняли текущий контрол на следующий)
* календарик полностью можно было использовать на клавиатуре, кстати в обоих раскладках EN и RU одни и те же клавиши (ориентировались на русские буквы)

Специальных тестов на скорость ввода не проводил, но мысль у меня была следующая — действий пользователь должен выполнять по минимуму (действие — это просмотр/ввод числа/нажатие клавиши/перенос руки на мышку/движение мышки) — в среднем получалось пять/шесть действий с момента открытия календарика… это очень хороший результат.
Ну во-первых, это пока можно сказать набросок, а не конечный продукт, он пока даже не зарелизен. Чтобы понять стоит ли двигаться дальше. Это можно сказать альфа-версия, чтобы можно было опробовать концепцию. Или Вы чтобы проверить основной алгоритм сначала делаете всякие второстепенные украшения?

Во-вторых, большинство того что Вы перечислили планируется реализовать, в том числе контроль ввода в input, автоформатирование и горячие кнопки.

В-третьих, что касается много контролов, то много элементов рассеивают внимание, и при вводе случайных дат (или вы будете клиентов выстраивать в очереди по дате рождения), никакой зависимости между вводимыми датами практически нет, и соответственно эти конторолы будет просто занимать место.
Извините, но тестирование «подогнано» под ваш календарь.

На любом из календарей дату плюс минус 1-2 месяца можно выбрать быстрее, чем на вашем календаре.

Если мне нужно выбрать послезавтра, то мне не хочется делать 4 клика, мне достаточно сделать один.
Ваш календарь удобен, тут не поспоришь. Но скорость работы с ним может быть преимуществом только, если надо указывать даты, сильно отличающиеся от текущей в будущее или прошлое.
Дык судя по топику такой юзекейс и был.
Как бы изначально задача стояла даты вводить из прошлого (так как ОСАГО не выдают новорожденным). А для ввода текущих дат практически неважно какой календарик, они выглядят практически идентично, потому там, как бы, и сравнивать особо нечего.

Я же писал, что в zDater можно указывать для каждого календаря откуда начинать, он спокойно может выводить сразу календарь с днями, а не десятилетия.

Немного позднее поправлю страничку с тестом, и добавлю там варианты ввода других дат, как текущих, так и неполных дат.
В винде при выборе десятилетий диапазоны сделаны не просто так, год вида 198x слишком непривычен, особенно если это первое что видишь после открытия календаря.
Там же первым слайдом показывается сегодняшняя дата и есть небольшая анимация, благодаря которой показывается как мы попали на выбор десятилетий.

Но. Если ваш календарь показывать с сегодняшней даты, тогда он начнет проигрывать уишному.

Сделайте более грамотные тесты, со случайными числами из одного месяца, года, десятилетия и столетия, настройте УИшный календарь (неделя должна начинаться с понедельника, названия на русском), выводите календари в случайном порядке, тогда можно будет сравнивать показатели.
1) вместо 196x предлагаю сделать «196...», ибо нагляднее. цифру «6» можно делать bold-ом, а то и цветом. то же самое — с выбором кокретного года. поэкспериментируйте, может получиться лучше чем сейчас.
2) выбор десятилетия/года/месяца надо таки сделать в столбик, это очень чётко улавливается интуитивно.

в остальном идея очень понравилась.
1) Я этот «x» просто в настройки запихну, каждый будет сам решать что ему нравится. Насчет жирного подумаю.
2) В столбик будет проблема с местом, много места будут 12 элементов занимать по высоте. А если делать прокрутку, то тогда уже почти не будет отличия от стандартного селекта.

1) ещё можно дополнительно обернуть эту циферку/буковку в дополнительный и пускай каждый стилями вертит как ему нравится, хоть подчёркивает)
2) согласен про нехватку места, но опять же — 12 элементов это не так много, зато намного проще уловить глазом очерёдность, по сетке надо искать, а по списку — сразу чувствуешь, где нужный тебе элемент. если вам не нравится делать так по умолчанию, можно сделать опцией. лично я был бы ей очень рад :)
Пару месяцев назад стоял перед похожим выбором. Ни 1 из существующих вариантов меня не устроил (точнее был 1, но он использовал mootools, а я использую jQuery). В итоге скопировал все идеи из win7 календаря, + пара мелких своих. Получилось удобно :) А в вашем примере в первых двух сразу же запутался и бросил.
Самый удобный способ — просто ввести дату. Обычными клавишами цифрового блока ввести дату. Своё время сказать не могу, тестовая страница категорически не хочет понимать такой способ.
Можно совместить оба способа. По дефолту обычный input, при фокусе аккуратно появляется календарь, но фокус остаётся в input-е. По мере набора текста в input-е — дата выбирается и в календаре, при потере фокуса календарь исчезает. В итоге и волки сытывсе довольны :)
В Windows Vista/7 калькулятор выглядит несколько иначе…
— наверное, все-таки, календарь )
Но каклькулятор-то ведь тоже выглядит иначе! =)
Отличный календарь.
Я как раз его и имел ввиду когда говорил о календарях в виста-стиле, но не нашел там, как можно выйти на десятилетия.

Второй аналог без десятилетий www.eyecon.ro/datepicker/ который я рассматривал.
UFO just landed and posted this here
(сделав хитрое лицо) Позвольте и мне высказать свое мнение. Мне нравится календарь внизу этой страницы: zm-sochi.ru/offers/novyy_god_v_mosenergo_4.html#form-order. Он правда не позволит выбрать 1955 год, но, по моему, он куда удобнее и юзабельнее.
Ключевой вопрос, удобнее для каких целей? Если выбрать ближайшую дату, то возможно, если выбрать какую-то дату из прошлого, то надоест год искать.
Самый правильный календарь есть в Ajax Control Toolkit того же Майкрософта. Когда просекаешь, что режимы переключаются нажатием на заголовок, ничего удобнее уже не придумать. Жаль, в jQ UI нет такого.
Вообще-то в zDater также режимы переключаются, разве что пока без анимации.
Да, я сейчас посмотрел, ваша реализация еще лучше. Только посмотрите, как выглядит последний экран при вводе даты «31 мая 1976» в календаре Майкрософта, и сравните с вашим. Удобно, когда весь месяц помещается в экран.
Если Вы планируете сделать удобную штуку для широкого использования, предлагаю спросить про этот Календарик в «Советах»

У меня, кстати, на jQuery UI быстрее всего. Скорее потому что я знаю уже, как им пользоваться.

UFO just landed and posted this here
Очень хорошее решение, спасибо. Но лично мне не хватает возможности вернуться обратно на уровень выше, после выбора диапазона.
Возврат на уровень выше — клик по заголовку календаря.
Хм. Не очень-то это очевидно.
Точно также сделано в винде, не очевидно да, но удобно.
Кстати обнаружился еще приятный бонус, zDater нормально работает на смарте, тестил в Opera Mobile на Android, у кого есть возможность, потестите на iOS, WP и разных планшетах. Причем результаты получается не намного хуже, чем на компе, в моем случае 6-7 секунд.
К сожалению, из-за месива id в вызове датапикера, не смог использовать ваш календарь (нужно повесить на класс, чтобы легко добавлять функционал во все формы веб-приложения. Нашел вот такой jscontrols.ru/controls/?datepicker — еще и с функцией автокорректировки ввода (раньше использовал отдельный). Правда, декады там не в пример вашим хуже сделаны.
Я же писал, что это пока набросок, сделаю релиз можно будет нормально использовать.
Идея хорошая — красивый и удобный календарь. Но когда отрываешь первый раз, только через несколько секунд понимаешь что это за матрица.

Для тестов попробуйте сделать еще такой вариант — показывайте сразу 4 блока расположенные рядом один за другим — выбор десятилетия, года, месяца, дня и по-умолчанию показывайте какую-нибудь дату (выделяйте выбранные элементы). То есть у вас сейчас эти блоки показываются последовательно один за другим, а попробуйте замерить скорость ввода, когда они показываются все сразу.
Sign up to leave a comment.

Articles