Как стать автором
Обновить

Комментарии 82

Симпатично, но, как мне показалось, очень перегружено. Да и набить дату рождения вручную — 23.06.1987 оказалось гораздо быстрее, чем тыкать мышкой (всегда так дату и заполняю).
Перегружено что?
А про набить вручную — во первых обычно там размещаются или долбаные выпадающие списки, или пара списков и ввод вручную, во вторых — а если девайс только с тачем?
>Перегружено что?
Перегружен интерфейс.

>Там размещаются или долбаные выпадающие списки, или пара списков и ввод вручную
Не знаю. Большинство сайтов, на которых регистрировался, позволяют как выбрать из выпадающего, так и ввести вручную.

>а если девайс только с тачем?
Ни на айфоне ни на андроиде не имел проблемы (на айфон открывается штатный выборщик даты, на андроиде — в зависимости от лончера).
> Перегружен интерфейс.
Хм. ну можно сворачивать, это сократит размер. К нему основная претензия, или не верно понимаю формулировку?

> Не знаю. Большинство сайтов, на которых регистрировался, позволяют как выбрать из выпадающего, так и ввести вручную.
Вот яша.паспорт. Самый вменяемый ввод, но нужно ввести руками, кликнуть мышой, ввести руками — много переключений контекста.


> Ни на айфоне ни на андроиде не имел проблемы
Не имею ни того ни другого, но насколько я помню — не все там так хорошо.
Не имею, но осуждаю.
Я высказал свое мнение, что еще вы хотите, выставив свое творение на суд хабра?
и на том спасибо :)
собсно, критика и нужна была.
насчет яши паспорта: зачем мышкой то кликать?
ввели день, нажали таб, стрелками выбрали месяц, опять таб, ввели год. Не?
По мне мышка она как более удобный девайс.
Да и выбор стрелками месяца хорош только для тех, кто в начале года родился :)
НЛО прилетело и опубликовало эту надпись здесь
UI у jQuery получше будет
а ввод года у них есть? :)
О!!! год выпадающим списком — это наше все.
Школьникам — самое оно.
Вспомним теперь о тех, кто родился году так в 1978, или в 1956, есть и такие.
Но выглядит менее нагружено, занимает минимум места на экране да и ввод руками предусмотрен, чего у вас не наблюдается.
Какая вам разница, сколько места занимает что-то в модально окне :)?
Да никто не запрещает вводить руками, просто модуль ввода еще не дописал, потому его и нет.

> Но выглядит менее нагружено
можете хоть на пальцах показать что значит нагружено? если свернуть некоторые поля — будет лучше?
Чуть ниже — м.б. стоит добавить анимацию, типа «тыкнул на десятилетие, низу всплыла панель с годами». Интуитивнее получится. Да и красивее…

Исходная точка — один выбор десятилетия. Далее, по мере выбора, остальное появляется. Смысл — пользователь не пугается кучи кнопок с цифрами.
у. оно подумает, но тут важно не получить как на дебильном Гармине — каждый раз вводя адрес приходится начинать выбор с города(бесит). Спасибо что хоть страну запоминает умолчальную.
На мой взгляд громоздко, а в том случае когда еще и время нужно указывать совсем беда будет.
время на самом деле не часто приходится вводить, так что пока закроем глаза на этот вопрос.
Без времени никак нельзя. Ведь если человек решит использовать ваше api, он должен будет знать, что если время понадобится, ему не придётся искать и разбирать новое api, в котором эта функциональность есть.

По-поводу громоздкости повторю предыдущих комментаторов: действительно награмождение кнопочек отпугнёт любого неайтишного пользователя (а скорее всего и айтишного тоже). Нужно либо их как-то разделить, либо придумать другое решение. Глаза разбегаются и нужно искать куда тыкнуть, чтобы получить желаемый результат.
Ну тут как бы с одной стороны половина пикеров не предоствляет возможности работы с ним, с другой стороны — принципиальной проблемы прикрутить его нет, прото надо понять где, чтобы не было «перегружено» :)

> Нужно либо их как-то разделить, либо придумать другое решение
Есть идеи? Как показала проверка боем — из меня не слишком удачный проектировщик UI :)
Это правда, нормальных datetime пикеров очень не хватает. Но это возможность для вас занять нишу :))

Кстати, обычные люди сталкиваются с проблемами при заполнении datetime пикеров, даже jQuery UI с нормальным плагином. Рекомендую кроме ручного заполнения поля заиметь еще и маску даты, чтобы она подсказывала человеку, что-то вроде: __.__.____ __:__

Но у некоторых людей даже с таким типом поля возникают проблемы :)))Поэтому можно еще в api сделать опцию, которая разделит date picker и time picker. Это, кстати, дополнительно упростит совмещение интерфейсов date и time picker'ов.
Не интуитивно как то… С минуту тыкался, пытаясь понять как выбрать 85 год. Нажал на 80, а то что снизу там, незаметно для глаза. Может стоит как то выделять?
м.б. стоит добавить анимацию, типа «тыкнул на десятилетие, низу всплыла панель с годами». Интуитивнее получится. Да и красивее…
хм. можно попробовать, спасибо за идею.
Рядовой пользователь, прежде чем куда-либо кликнет, будет долго смотреть на цифры «1940 — 1960 — 1980» и соображать «как же мне ввести 1957 год?».
ну, можно кликнуть да посмотреть, но в общем согласен, криво, но тут ниже уже дали идею как пофиксить эту проблему.
Когда-то тоже делал date picker. Больше для удовольствия, нежели для практической пользы.
Вот что вышло
image

image
Прикрутить справа колонку с интервалами дат и универсальный плагин готов.
Очень слабый дизайн.

Выбор месяцев плавает — при русскоязычной дате распределение месяцев по строкам — 4/5/3 (видно на первой картинке в статье). Интересно какое оно будет для украинского, французского, арабского?
Я бы попробовал писать сокращенное название месяцев или вообще заменить выбор месяца на слайдер.

Почему выбор дня в 8 колонок? Людям привычен семидневный календарь. А учитывая, что всё равно считается день недели, то можно было бы и сдвиг сделать, чтобы было совсем календароподобно.

Я думаю что скоро datepicker-ы будут замещены HTML5 Forms, и «спрос» сейчас будет на те, которые могут восполнить функционал в тех браузерах, которые пока ещё эту часть HTML5 не поддерживают. Особенно с type=datetime беда в этом плане.
дык оно и не дизайнер :)

> Выбор месяцев плавает — при русскоязычной дате распределение месяцев по строкам — 4/5/3 (видно на первой картинке в статье). Интересно какое оно будет для украинского, французского, арабского?
Именно, плавает. Распределение по строкам для разных языков можно разным и настроить, к чему вам попиксельное совпадение?

> Почему выбор дня в 8 колонок?
потому что влезает в 4 строки. мне при вводе чего-то типа ДР все равно на день недели, поэтому и проигнорировал, но в общем-то буду делать.

> Я думаю что скоро datepicker-ы будут замещены HTML5 Forms
Хотите сказать, что вот этот ужас удобен? С сайта Opera.
image
при вводе чего-то типа ДР все равно на день недели

У вас будет два разных дэйт пикера для ввода ДР и для любого другого события, где важен день недели?
Если это разные по смыслу инпуты — что мешает делать их разными?
У них один и тот же смысл: выбрать дату
так вот чем руководствуются дизайнеры, при заполнении данных кредитной карты заставляющие выбирать месяц прописью из выпадающего списка? при том, что на карточке он цифирками.
ну да ладно, это не очень интересно.
При заполнении кредитной карты не надо указывать дату.
Кто-то не согласен?
29 октября 2012 — это дата
октябрь 2012 — это месяц и год
назовем это моментом времени с разным уровнем детализации.
Называйте это как хотите, но для выбора года и месяца не нужен date picker, т.к. он предназначен для выбора даты (конкретного числа). Ввод срока действия кредитной карты решается другим инструментом и выпадающий список для этого идеально подходит.

В вашем же случае необходимо указать число. Судя по всему вы хотите предложить пользователю два разных инструмента для выбора даты рождения и любой другой даты, где имеет значение день недели. Это печально, что вы не думаете о пользователях, а считаете своё решение единственно верным, хотя всё что нужно сделать это разместить даты в нужном порядке.

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

Для ввода срока действия кредитной карты на демо-страничке есть инлайновый елемент, вот пруфф-шот



он не требует выбрать день и не принуждает пользователя ни к чему.
сделан как попытка объяснить, что это не пикер а полноценный фреймверк с массой интересных настроек, гибкий как хм… ну, с большими вощможностями для катомизации.

собсно, все претензии сводятся к тем 2К кода, над которым я и не думал-то особо, пока делал гибкость да модульность с асинхронностью.

шаблоны — это такая фигня. поменять их — дело плевое.
О чём вообще разговор?
У вас будет два разных дэйт пикера для ввода ДР и для любого другого события, где важен день недели?
Если это разные по смыслу инпуты — что мешает делать их разными?

Т.е. для ввода даты некоего события, которое состоится в последнюю пятницу ноября, вам придётся использовать другой плагин, в котором числа по-человечески встанут в 7 столбиков в соответствии с днём недели.

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

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

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

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

Исправился, теперь пользователь из ступора должен выйти
habrahabr.ru/post/156553/#comment_5367007

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

Олицетворение подхода из этой иллюстрации:


У встроенного <input type=«date» /> интерфейс и то удобнее. Вообще самый удобный и быстрый способ, который я знаю — просто вбивать строку, а уж контрол должен попытаться правильно понять пользователя. Проверял на 2000 записях, вбитых вручную
не люблю вбивать вручную.
Кроме того, ну есть у нас умный контрол, только как он поймет «02.01.2012» — это 2-е января или первое февраля?

PS. есть идеи по интерфейсу? :)
Я тоже любитель «интерактивных няшных html5-формочек, сенсорных интерфейсов и все такое», но поверьте, когда работаешь с реальными данными, то осознаешь весь кошмар подобных решений.
Он должен понять как второе января, потому что разделитель — точка. И вообще, для этого в некоторых фреймворках (.NET, к примеру) есть CultureInfo, указывающее, как принято писать дату в той или иной стране.
К тому же, после ввода 02.01.2012 в значении поля может установиться ярким текстом 2 января 2012, что недвузначно укажет пользователю, что же он ввел.

По интерфейсу — что-то мне это больно напоминает надоевший Ext.js. Ну то есть дизайна как такового нет вовсе.
Сделайте отступы, пожалуйста.
к пользователю CultureInfo не прикрутишь

> По интерфейсу<...>то есть дизайна как такового нет вовсе
ну, можно и так сказать, но это дело наживное. внутрях вид очень настраивабелен.
По крайней мере, у нас есть язык страницы и интерфейса — уже как минимум сможем отличить ru от en и dd.mm.yyyy от yyyy-mm-dd.
И обратите внимание на Date.js, чтобы не плодить велосипедов.

> очень настраивабелен.
Лично я ценю, когда для шаблона можно вручную настроить хотя бы классы отображения, а лучше, когда весь шаблон. Но это мое ИМХО.
Гляньте в сторону bootstrap-подобных решений и сделайте подобное. Очень удобно, когда дизайн контрола ненавязчив и почти незаметен, чтобы его можно было в дальнейшем модифицировать(а не переделывать заново) для различных стилей
Полагаться на язык интерфейса — ненадежно. Я вот пользуюсь обычно en-вериями, дабы не ломать голову над риверс-инженерингом «что же это значило». А даты ввожу по-русски.

> И обратите внимание на Date.js
Я на moment.js прикручиваю все, он круче Date, так что велосипеды только веселые, по необходимости.

> Лично я ценю, когда для шаблона можно вручную настроить хотя бы классы отображения, а лучше, когда весь шаблон
а, любопытная идея. подъемная, подумаю.
> Гляньте в сторону bootstrap-подобных решений
да смотрел на них мельком, много там всего, что именно-то учесть надо?
К примеру вот. Я не говорю делать «так же, как и здесь», но повсеместное засилье bootstrap'a и контрол в одном с ним стиле пойдут на пользу UI. Основные цвета элемента управления — черный и белый, как в бутстрапе. Сначала верстается обычный интерфейс, а затем уже подгоняется под целевой стиль, только тогда ваш datepicker пусть становится голубо-синим. А до этого момента Вы не можете догадываться на сайте с каким стиле будет использоваться Ваш элемент управления
ну в общем-то стиль примера — это стандартная Jquery-UI тема. Но можно и на bootstrap перелопатить, это не сложно.
За пример спасибо, там тоже идея интересная. подумаю.
Еще раз спасибо за наводку, многое стырил было интересно.

Если все еще интересно, что у меня там получилось — отписал внизу, habrahabr.ru/post/156553/#comment_5367007
не всегда с клавиатурой все хорошо
В таких случаях мне нравится подход их iOS и Android




Но к ним нужно добавить возможность ручного ввода даты.
О да, испытываю удовольствие в предвкушении от промотки до 1970. А в андроиде это надо 41 раз тыкнуть в стрелочку?
Не слишком удобно, ИМХО,
Нет, нажать на год и ввести 1970, экранная клавиатуру никто не отменял
В анидроиде эти штуки тоже прокручиваются пальцем, как и на айфоне, причём тоже инерционно. Одним движением можно 10 лет прокрутить, так что это около 4х движений для достижения начала 70-х.
Никогда не давайте программистам делать UI. То, что в результате получится, будет похоже на пульт управления космическим кораблем.

Ваш пример — еще одно подтверждение этого правила.
специалисты по UI могут сделать макет хорошего пикера, удобного для использования с большими промежутками дат?
Я сам программист, если что.

Меня вполне устраивает пикер в iOS. Мне кажется, что его делали люди, которые думают головой, а не странными местами.
ну хотя бы в том, что я думал, хоть и странным местом, вы не мне отказываете — и на том спасибо :)

ИМХО — если бы я так вот запросто мог переплюнуть ребят, которые делают штуки для iOS — ооо…

Кстати, любопытно — если вы сами не делаете UI — откуда вы его берете, когда оно вам нужно?
Я сам делаю UI, просто я постоянно показываю его не-программистам и интересуюсь на тему того, что они думают по этому поводу и очевидно ли им, что от них в данном случае требуется.

Я, правда, не переоцениваю своих навыков — я несколько ушел вперед относительно «программистского интерфейса» (потому что держусь парадигмы «сделать хорошо в 90% случаев и возможно — в остальных 10%»), но не самый большой специалист по юзабилити.

Ваш интерфейс плох для пользователя тем, что он требует от пользователя нетривиальных навыков сложения многозначных чисел (если у меня год рождения 1976 — мне надо догадаться, что это 1960+16). Эта первая проблема, которую я вижу. Нормальный пользователь не может из 5 вычесть 2 без ошибки, а тут такая головоломка.

Совершенно непонятно, зачем полные названия месяца. Пользователь прекрасно сориентируется по «янв», «апр» и «май», а еще лучше просто числами, заодно и нормальная таблица получится — сейчас найти с первой попытки июль довольно тяжело.

Издевательство над здравым смыслом и привычным интерфейсом — это сгруппированные по 8 элементы типа «день». В неделе семь дней. Почему-то вы об этом не подумали. Или вам показалось, что это совершенно не важно.

Интерфейс должен решать задачу. Скажите, какая задача ставилась при разработке этого чуда?
Задача — ввод большой даты а-ля ДР без идиотских километровых выпадающих списков и без ручного ввода.

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

> зачем полные названия месяца
потому что я люблю полные названия месяца. это как-то по-русски.

> Издевательство над здравым смыслом и привычным интерфейсом — это сгруппированные по 8 элементы типа «день». В неделе семь дней.
А в триместре три месяца, а в декаде — десять дней, а фортнайт равен двум неделям — ну и что? К делу это не относится, вот и проигнорировал. Но если общественность негодуЭ — я подумаю.
Ввод даты без ручного ввода (кстати, что под этим подразумевается? ввод с клавиатуры?) и без выпадающих списков — это не задача, это ограничения, наложенные на задачу.

Чем вызваны такие ограничения? За что мы боремся, исключая эти варианты?

Вы любите полные названия месяцев — на здоровье. Я люблю цифры. Чья любовь важнее — разработчика или пользователя? Когда я решаю задачи удобства интерфейса, я ставлю во главу стола пользователя.

Если мы говорим об элементе управления «выбор дня в месяце», то ближайшая аналогия — календарь. При прочих равных следует выбирать представление, которое привычно пользователю — то есть календарное.
> Чем вызваны такие ограничения?
Моим пониманием удобства ввода.

> Чья любовь важнее
«Если бы я спросил людей, чего они хотят, они бы попросили более быструю лошадь.» (с) Генри Форд

Не бойтесь экспериментов :)
Если вы не специалист по юзабилити — не стоит ограничивать рамки задачи своим пониманием.
:)
как бы это помягче сказать…

Похоже мне нечем будет расплатиться с вами за ваши услуги консультанта, так что не давайте мне профессиональных советов.
Ну, в таком случае могу только пожелать профессиональных успехов.
> требует от пользователя нетривиальных навыков сложения многозначных чисел
кстати, тестировалось на живых людях.
аудитор по налогам не нашел никаких сложностей в этом пункте :)
Аудитор по налогам, вероятно, умеет считать.
Не обычно и надо привыкнуть, но в целом хорошо что не надо ничего тянуть или крутить.

наверно годы лучше диапазонами, по типу 70-80… хотя это уже на вкус.
оно огребло тумаков собрало пожелания и подумает над новой версией, менее нагруженой, чуть более удобной и симпатичной. Думаю выйдет лучше, так что пока привыкать не надо :)

спасибо за отзыв.
А почему у вас в интерфейсе в неделе восемь дней?
А с чего вы решили, что это неделя? :) Это тупо восемь дней.
Интересная разработка, только вот год не слишком интуитивный, да дизайн ужасный. Попробую усовершенствовать.
О, первый заглянувший под капот :)

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

Но если есть желание поковырять уже — запретить не могу буду рад :)
Если все еще интересно — на скору руку слепил апдейт. немодальное окошко, вот такое


потыкать вживую — на той-же страничке примера, первая самая.

да, мелковато, но это дело наживное.
и дней недели пока нет :) на след. неделе буду бодать, там ниче сложного, просто поковыряться надо.

так лутсше?

про цвета и т.п. пока речь не ведем — это полировка на потом.
Лучше, бесспорно. Только сделайте возможность ввода с клавиатуры
Дался вам этот клавиатурный ввод :)
Да сделаю, сделаю, там поковыряться надо, в todo стоит задача.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории