Сложное поле даты с опцией диапазона
Контекст: Я разрабатываю веб-форму, которая позволяет пользователям вводить информацию о какой-либо работе, которую они создали (название, описание, изображение и т. д.).
Одно из необязательных полей будет полем даты. После обсуждения продукта с некоторыми целевыми пользователями я обнаружил, что у них разные потребности в этой области.
- Некоторые хотят ввести определенную дату (например, 3 марта 2013 г.).
- другие хотели бы ввести только год
- , тогда как некоторые другие нуждаются в диапазоне (например, 2012-2013).
Одним из других требований продукта является то, что пользователи могут фильтровать /сортировать свою работу по дате, поэтому общее текстовое поле не будет работать, если не будет соблюден определенный формат. Мне бы хотелось услышать некоторые варианты того, что раньше работало для других.
4 ответа
Ряд выпадающих списков или comboboxes может работать хорошо, позволяя пользователю указывать дату на любом уровне детализации, который она хочет.
Сначала просто покажите:
скачать источник bmml - Каркасы, созданные с помощью Mockups Balsamiq
Если пользователь выбирает год, вы можете отобразить дополнительное раскрывающееся меню в течение месяца, а также указать возможность добавления конечного диапазона в год по умолчанию по сравнению с текущим годом.
... а затем, если пользователь решит указать месяц, дайте ей возможность указать день.
Даже если пользователь выбирает диапазон от определенного дня к определенному дню, год и месяц для них обычно будут одинаковыми, поэтому, устанавливая дату окончания по умолчанию так же, как и дату начала, вы делаете это так, что пользователю обычно нужно будет выбрать только четыре раскрывающихся списка, чтобы указать точный диапазон дат. В то же время вы позволяете ей выбирать только одно или два выпадающего списка, если она хочет указать более подробный диапазон.
Просто наткнулся на это на linkedin. Linkedin использует простую ссылку для переключения между диапазоном и одной датой.
У вас есть стандартный однодисковый выбор по умолчанию: 
, и вы можете переключить это, чтобы ввести диапазон:
Я бы выбрал одно текстовое поле ввода и позволял вводить свободный диапазон формы по линиям, которые Fogbugz и трекеры времени выполняют для продолжительности. Они допускают ввод в различных формах и интерпретируют его сами, не требуя всех видов конкретных элементов управления.
Например, Jira (отслеживатель проблем) будет интерпретировать длительность задач из одного текстового поля:
- 1h => 1 час
- 2d 5h => 2 дня 5 часов.
- 3w 4d => 3 недели 4 дня
Вам просто нужно придумать несколько простых понятных правил для разбора ввода.
Абсолютная необходимость заключается в немедленной обратной связи о том, как вы интерпретируете ввод. Это может быть на ярлыке справа или справа от поля ввода текста.
Чтобы сделать сложные вещи легкими, вам нужно что-то знакомое пользователям и не требует больших усилий от пользователей. Как насчет (интеллектуального) слайдера, где вы можете выбрать год или дату без даты окончания (макет 1)? Это может быть улучшено с помощью второго ползунка для даты окончания (макет 2), поэтому вам действительно не нужно менять сам элемент управления или использовать несколько выпадающих меню, которые очень полезны для ваших пользователей.
скачать источник bmml - Каркасы, созданные с помощью Mockups Balsamiq
Эта конструкция решит все три проблемы ваших пользователей ...