Календарный период — улучшаем интерфейс

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

    Тем не менее, в результате, работая над drop-down выбором календарного периода, в голову пришла интересная мысль не разбивать дату на две отдельные формы «С» и «По», как это всегда делают, а объединить их в одну форму и выпадающий блок.

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

    Если короче, сейчас сплошь и рядом, в том числе на именитых туристических сайтах, используют две отдельные формы для определения календарного периода, при чём одновременно, как правило, можно открыть только одну из них:

    image
    Пример обычной формы на Booking.com. Календари «С» и «По» разнесены в разные блоки



    Я же предлагаю объединить это в одну форму с выпадающим блоком/окном с двумя календарями, который появляется как только пользователь кликнет в область данной формы. Впрочем, кликабельной можно сделать только кнопку-иконку календаря, расположенную по центру, тем самым ещё и дав пользователю возможность ввести дату вручную прямо в input-формы.

    image
    Новый, улучшенный вид выбора календарного периода

    Я не претендую на абсолютную уникальность этой инновации, но до сих пор в сети подобного решения не встречал. Если у уважаемых читателей появится конструктивная критика или идеи как можно ещё улучшить данное решение — буду рад выслушать.
    Share post

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 56

    • UFO just landed and posted this here
        +11
        ИМХО, в гугл-аналитикс поинтереснее решение (http://habreffect.ru/files/42b/78297a3d1/goo_analyt_dates.png).
          0
          В их случае есть одна проблема — я не вижу перед глазами начальной даты (кроме формы, в которой не понятен день недели). И это большой минус.
            0
            Почему? Начальная дата (на скриншоте 06.08.2010) имеется аж в трех местах, в том числе и на календарике. Причем выделена цветом, очень удобно.
              0
              А если начальная дата будет в январе, а конечная в декабре? Перед глазами начальной даты и дня недели у Вас не будет, к сожалению.
                0
                Это смотря как сделать. Можно при прокрутке на другие месяцы оставлять видимым первый и последний.
                  0
                  А вот это уже зависит от того, где и для чего календарь будет использоваться. В большинстве поездок (допустим, сайт турфирмы), я думаю, дата обратного билета в пределах двух месяцев будет, и такой проблемы не возникнет.

                  Решение гугла более интуитивное — вот тебе календарик (один), отметь на нем интервал (представьте, как вы на настенном календаре даты поездки отмечаете, вы же не два календаря на стену вешаете), в вашем же возникает вопрос: почему два календаря, причем иногда с одним и тем же месяцем (если интервал начинается и заканчивается в пределах месяца, скажем)? Это сложно, это путает. Люди так не мыслят.

                  Еще одна проблема вашего решения — не видно, как даты начала и конца друг относительно друга расположены. Я, допустим, знаю, что хочу поехать в отпуск на неделю (потрачу на задачу три дня, пролежу в больнице полмесяца и т.д.), я отмечаю начало, а чтобы отметить конец, мне придется перенести взгляд вправо, найти там ту же дату, которую я отметил слева (а не дай бог еще месяц другой окажется, менять надо будет, и хорошо, если я сразу это замечу), потом мысленно отсчитать от нее три дня (придерживая пальчиком дату начала, чтобы не сбиться), отметить конец. На малых интервалах, короче, не работает.

                  Возможен случай, когда по условиям использования чаще будут отмечаться интервалы на три месяца и более, с точностью до дня. Опять же, проще иметь два поля и два календаря, чтобы выставлять даты независимо, так как в таких условиях не нужно их друг относительно друга выравнивать, они вряд ли друг от друга зависят. Плюс в этом случае возможен вариант неполного ввода — дату начала отметил, дату конца пошел выяснять. Ваш же календарь не отпустит, пока все не выберешь.
              0
              Да, если бы не на flash
              • UFO just landed and posted this here
              +5
              отличное решение.
              можно добавить выделение выбранного периода (бэкграундом например) и счетчик внизу «выбрано ## дней»
                +1
                Счётчик — отличная идея. Спасибо mekegi!
                0
                Решение не плохое. но не привычное. Правда всё дело времени.

                С другой стороны, надо посчитать количество кликов. При стандартной реализации данного интерфейса надо кликнуть 4 раза (клик по полю 1, клик выбора даты 1, клик по полю 2, клик по выбору даты 2). В предложенном варианте тоже 4 клика (клик по кнопке, клик по дате 1, клик по дате 2, клик по применить). так что выходит по количеству кликов они одинаковы…

                В целом идея не плоха. Надо будет подумать над внедрением её в один из проектов компании.
                  0
                  Избавляемся от кнопки «Применить» — остается 3 клика :)
                    0
                    Тоже вариант, соответственно закрывать попап окошко при клике на вторую дату…
                      0
                      Закрывать окошко при клике на вторую дату — не очень хорошо. Юзер может ошибиться в выборе и может последовать повторный выбор. Можно закрывать при клике вне окна, к примеру. Или за X close, или таки оставить кнопку «Применить».
                  0
                  В jquery-вском дейтпикере есть такой режим, тестировали, и отказались. Юзер привык вбивать даты 2 раза, переучивать сложно.
                    0
                    В чём же была проблема? Что юзеры по привычке делали не так в Вашем случае?
                      0
                      Юзеры видят сдвоенный календарь и путаются. Сервис ведь не только для гиков)
                        +3
                        Вы что там, фокус-группу собирали? )
                    –2
                    А для бухгалтеров очень удобен вариант 1с, хоть он и требует отдельного модального окна.
                    habreffect.ru/files/c78/ed71c4c24/Untitled.png
                      0
                      Ну не часто нужно в реальной жизни выбрать период с 14.07 по 17.12.
                      А неделя, месяц, квартал более востребованы.
                      И целые и начиная с какой-то даты.
                      +3
                      Идея, на мой взгляд, неплохая. Понравилось цветовое разделение чисел текущего месяца и прошлого/следующего и водяные знаки «с» и «по» на календарях.
                      Что не понравилось:
                      1) кнопка «Сбросить» внизу. Первое впечатление — она сбрасывает установленную дату к некой дате по умолчанию, но при этом абсолютно не понятно к какой именно. Если она закрывает окно — то тогда думаю нужно менять текст на что то другое.
                      2) в вашем input'e также абсолютно непонятен день недели обеих дат. Для этого придется открывать календарь.
                      3) красный крестик наверху имхо привлекает очень много внимания к себе, во всяком случае я его заметила чуть ли не первым.
                      4) общий комбобокс для месяца/года. Ситуация выбора месяца встречается гораздо чаще, чем года. Если же человек захочет выбрать год — ему придется крутить достаточно длинный список. Может быть, рациональней было бы их разделить на два комба?
                      5) возможна такая ситуация, что в некоторых языках слова на «водяных знаках» окажутся слишком длинным, значит у них будет мелкий шрифт и их будет сложно прочесть.
                      6) нет дополнительного разделения рабочих и выходных дней.
                      7) фраза «Окончание действия» рядом с input'ом, в котором написаны две даты, выглядит по крайней мере странно.

                      P.S.Обилие саморекламы в конце статьи оставляет впечатление, что вся статья была написана с целью пиара себя любимого и повышение visibility. Причем довольно негативное впечатление.
                        0
                        Юлия, целью данного поста было донести идею, чтобы люди её развили, конструктивно покритиковали, и, если кому понравится, приняли на вооружение. Критиковать название поля, водяные знаки, считаю, не коструктивно. Очевидно что это было «выдрано» из контекста конкретного проекта и не является универсальной панацеей для любого проекта. Адаптируйте под себя, не вопрос. В том числе и комбо-боксы.

                        Комментарий №2 про input — да, в идеале выводить день недели ещё и в инпуте.
                        №6 — да, это улучшение было бы тоже к месту.

                        По поводу саморекламы. Если вы саморекламой называете подпись в конце статьи с линками на личный сайт — в цивилизованном мире по-моему в этом нет ничего зазорного. Я тут Сникерсы и Тампаксы не пытаюсь впарить никому.
                          +2
                          +1 к P.S., соотношение количества ссылок на себя-любимого и инновативности предложения не в вашу пользу :) Сходите, к примеру, на сайт Люфтганзы — там похожее решение. Не говорю, что оно лучше/хуже, но пара iteraction-идей мне как пользователю очень нравятся:
                          1) Перекидывать календарь обратной даты, так, чтобы она была позже даты вылета
                          2) Закрывать календарь после выбора «конечной» даты.

                          По вашей идее:
                          1) Что делают кнопки «Применить»/«Сбросить»?
                          2) Что делает крестик в правом вернем углу?
                          3) Выбираются ли серые цифры?
                          4) Как перейти к сегодняшней дате?

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

                            Да, у Lufthansa решение похоже.
                              0
                              Кнопки — это вообще-то часть интерфейса, причём важная ;) На мой взгляд, идея объединения двух календарей в один как таковая ничего не стоит (реализаций много видела), дьявол в мелочах кроется, а про них как раз вы ничего не рассказали. Даже если от рюшечек отвлечься.
                                0
                                Окей, кнопка применить — закрывает данное окно и берёт выбранные даты в работу.
                                Кнопка сбросить — сбрасывает выбранные параметры на текущую дату +7 дней.

                                Крестик в правом углу закрывает данное окно. Его так же можно закрыть кликнув вне окна в любой области.

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

                                Если идея объединения двух календарей в один для Вас стара — я считаю Вам не стоит тратить время на данный пост.

                                А в мелочах всё же Бог :)
                                  +1
                                  А я вот считаю, что сама могу прекрасно решить, на что мне тратить время :)

                                  Окей, кнопка применить — закрывает данное окно и берёт выбранные даты в работу. Кнопка сбросить — сбрасывает выбранные параметры на текущую дату +7 дней.

                                  Почему они столь похожи? Почему пользователю нужно каждый раз вчитываться в нестандартный текст? Это не к конкретным рюшкам претензия если что.

                                  Крестик в правом углу закрывает данное окно. Его так же можно закрыть кликнув вне окна в любой области.

                                  И? Введённые параметры сбрасываются или сохраняются?

                                  Серые цифры говорят о том, что это предыдущий месяц. Да, они выбираются.

                                  Т.е. я правильно понимаю: будет написано «Сентябрь», а выбран может быть октябрь? И в соседнем октябрьском календаре могут быть две выбранные даты?

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

                                  А вот бы это продемонстрировать?

                                  Поймите правильно, пожалуйста: идеи — это очень хорошо, но только важно, чтобы их адекватно восприняли и реализовали. Если говорить об интерфейсах: очень важно уделять внимание взаимодействию, а не просто плюхать картинку со слова «это из как-то проекта, на рюшки внимания не обращайте». А иначе «как всегда» получится у не очень опытных последователей.

                                    0
                                    Цвет кнопок лучше развести, соглашусь.

                                    При закрытии окна Х данные сбрасываются.

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

                                    Что ж, я могу обновить картинку с полной версией. Только всё же повторюсь, что это было заточено под конкретные нужны проекта. На Хабре же, я полагаю, пользователи опытные весьма и смогут развить идею каждый в свою сторону, не наломая дров, а сделав интерфейс ещё лучше :) Могу конечно и заблуждаться…
                                      0
                                      Опытным разработчикам идея объединения двух календарей в один наверняка не раз приходила в голову, и свои реализации имеются :) А неопытные вполне могут вдохновиться вашей идей — но до хорошей реализации они допилить её не сумеют. Подайте им пример! :)
                          0
                          никоим образом не умаляю работы кодера, хочу заметить, что как раз вчера обсуждали с друзьями недостатки существующих сайтов с заказом авиабилетов — сошлись на том, что все они соревнуются, кто покрасивше календарик нарисует, тогда как новых, полезных функций никто не реализует
                            +2
                            было бы неплохо если добавить шорткаты для быстрого заполнения
                            например:
                            • — Сегодня
                            • — Вчера
                            • — Последние 7 дней
                            • — Прошлая неделя (пн-вс)
                            • — Этот месяц
                            • — Прошлый месяц
                              0
                              Да, идея хорошая Shuhrat. В оригинале такие шорткаты есть в данном проекте. Я их упрозднил для этого поста. Главное, что хотел донести — это объединение календарей.
                              Так или иначе, коммент для остальных будет полезный.
                              0
                              Конечно, лучше один раз ткнуть и все выбрать, чем два раза тыкать :)
                                +2
                                а мне вариант на www.ozon.travel/flight/ понравился
                                  0
                                  Потыркал. Не разобрался, но идея с динамическим добавлением транзитных городов — клёвая, определённо!
                                    0
                                    там нужно выбрать обратный перелет, чтобы был доступен выбор двух дат
                                      0
                                      Там очень удобно устроен календарь.

                                      Изначально можно выбрать только 1 дату — откуда куда и соответтвенно когда

                                      Если нажать еще «обратно» тогда все даты начиная с начальной подсвечиваются рыжим и можно выбрать дату конца.

                                      img40.imageshack.us/img40/6458/logojb.png
                                    0
                                    Два календаря все же немного сомнительная идея.
                                    Она теоретически хороша, а вот практически не очень, т.к. если бы
                                    люди с самого начала приучались работать с вашим вариантом — не вопрос,
                                    а тут будет стоять вопрос (часто, чаще) о том, что нужно бы
                                    переучиться.

                                    А в целом мысль конечно здравая.
                                      0
                                      Я думаю если плотней посидеть и проработать интерфейс календарей так, чтобы всё было макисмально очевидным и интуитивным — пользователи примут. В моём варианте есть мелкие недочёты, о которых другие читатели сообщили в комментариях. Я думаю если всё это учесть — будет хороший и интуитивный интерфейс во всех отношениях.
                                      +1
                                      Неплохая реализация, но меня смущает следующее:

                                      1. Там, где «Окончание действия» я бы добавил бы все же «с» и «по» или тире там поставить, тк реально сбивает с толку что за даты.
                                      Тут собрались все опытные пользователи, знакомые с нюансами интерфейсов, а среднестатистический пользователь может вообще ничего не понять.

                                      2. Выделить текущую дату, или написать «сегодня такое-то число», считаю это важным.

                                      3. Кнопку «применить» обозвал бы по-другому, там «Ок» или «Выбрать», а «Сбросить» сделал бы ссылкой, может быть красного цвета, потому что две одинаковых кнопки сбивают.
                                        0
                                        Тоже хорошие замечания, Sashafirs!

                                        Я подумываю о том, чтобы собрать все комменты и выложить третий вариант интерфейса, с учётом всех нюансов, высказанных читателями :)
                                          0
                                          Да и конечно же хотелось бы увидеть этот прикольный механизм внутри интерфейса, а не отдельно, тк важно посмотреть на его интеграцию в целом.
                                        0
                                        Как универсальное решение выбора диапазона идея не годится. Возможно лишь в конкретном случае, когда диапазон определенно больше двух месяцев. Если пользователи чаще всего выбирают небольшой диапазон — вы будете показывать им два календаря с одинаковым месяцем?
                                          –1
                                          В случае с тур. сайтами — даже при маленьких диапазонах пользователям выводят каждый календарь в отдельном окне. Это не удобно.

                                          Да, два календаря с одинаковым месяцем — не плохой вариант контроля над начальной и конечной датой.
                                            0
                                            Один календарь с выделенным диапазоном (например как в гугл аналитикс или на озон тревел) — лучше чем 2 календаря с одинаковым месяцем
                                          0
                                          Неплохо бы еще на этих двух календарях выделять период отличным цветом, и т.к. у Вас на календаре период более двух месяцев, то те месяцы которых не видно (в данном случаи это август, сентябрь, ноябрь) отображались в виде списка подсвеченных надписей между двумя календарями.
                                          Ну и фон «С», «ПО», который «под календарями», лучше заменить на «июль», «декабрь»
                                          ИМХО
                                            0
                                            октябрь* пропустил. извиняюсь.

                                            А так, идея с двумя календарями мне понравилась. Непременно реализую у себя в ближайших проектах.
                                            +1
                                              +1

                                              Внутри партнёрки яндекса по ЯДу
                                                0
                                                Наша реализация выбора даты (сделаю оговорку, систему используют люди которые с компьютеров на «твою мать» и им это по душе)

                                                  0
                                                  ах, картинки и ссылкы я так понимаю немогу вставлять, тогда так:
                                                  habrastorage.org/storage/30040166/8cf065a0/22e425f3/a74c4a58.png
                                                  habrastorage.org/storage/e4b504d7/aaa85f10/26c08c8f/5882e8c1.png
                                                  +1
                                                  Ну делать так делать… чтобы видно было:
                                                    0
                                                    То, что просто само просится :)

                                                    А к автору статьи — кнопки «Применить», «Сбросить» и «Закрыть» — как-то много вариантов. Я бы «применял» значения по второму щелчку по дате, «сбрасывал» и «закрывал» по щелску за пределами календаря.
                                                      0
                                                      Да, полностью с Вами согласен. В комментах вообще много хороших идей по улучшению есть. В частности по выделению периода.
                                                      0
                                                      Про календарь все подумали, а зачем кнопку «сбросить» делать точно такой же, как и «применить» и еще и поставить справа (зачем там вообще «сбросить»?) — это, конечно, мелочи…

                                                      Only users with full accounts can post comments. Log in, please.