Поехали! Или немного о проектировании интерфейса выбора дат


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

    Но… не так давно, передо мной стояла задача спроектировать календарь выбора периодов. Диапазон выбора дат варьировался от 2-х дней до нескольких месяцев.

    Целевая аудитория достаточно неоднородна: возраст от 35 до 60 лет, компьютерная грамотность от новичков до уверенных пользователей.

    Задача: сделать максимально удобный формат выбора дат, понятный целевой аудитории.
    Перед проектированием были изучены и протестированы конкуренты, прочитано несколько статей на заданную тему.

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

    Наличие кнопки “Готово” (Подтвердить, Выбрать, ОК …) в теле календаря


    Люди не всегда приходят на сайт имея в голове четкие даты.

    Они могут указывать период, размышлять, менять даты (начальную, конечную, весь период). Большинство сайтов скрывают календарь сразу же после выбора даты. www.booking.com, www.aeroflot.ru как пример. Такое поведение системы раздражало пользователей в ситуации, когда случайно была выбрана не та дата или еще не принято окончательное решение. “Нажал не туда” особенно актуально для людей старшего возраста, с плохим зрением, в условиях спешки или невозможности сосредоточиться. Основания для такого проектирования понятны — меньше кликов, меньше нагрузка.

    Но мы не всегда знаем кто и как будет взаимодействовать с интерфейсом. В каких условиях он при этом будет находиться.

    Для этой ситуации удобно решение Google Авиабилеты. Гуляй по датам в раздумьях сколько хочешь, календарь будет виден пока не кликнешь на кнопку “Готово”. Удобно, присутствует ощущение контроля и понимание работы интерфейса.



    Выдача результатов поиска без лишних кликов


    Такая функция хорошо реализована на сайте www.trivago.ru. Ввожу необходимые параметры, а результаты уже подгружаются.



    Визуальное выделение начальной и конечной дат


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

    На некоторых сайтах отсутствовали индикаторы текущих дат.

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

    Пример раз: www.airbnb.ru

    Понятно какие даты можно выбрать, а какие нельзя. Текущая дата не выделена



    Пример два: www.ozon.travel/flight/

    Ещё одно решение: недоступные даты не указаны в календаре. Текущая дата стоит первой, не оставляя сомнений откуда необходимо начинать поиск.



    Пример три: www.booking.com

    Визуально понятны текущая, доступные и недоступные даты



    Возможность быстро сбросить выбранные даты


    Полезно, если пользователь решил полностью изменить запрос. Для быстрой очистки некоторые пользователи обновляют страницу. А бывают ситуации, что пользователь выбрал даты, но обновил страницу случайно.

    Если пользователь случайно обновится, он вряд ли будет в восторге от необходимости заполнять всё заново. Если же он обновился намеренно, то увидит сохранённые даты и начнет вбивать новые.

    Для решения этих проблем можно разместить где-то на виду заметную ссылку «Сброс» или «Новый поиск» рядом с вводом даты.

    Это позволит быстро очищать результаты поиска, при необходимости, и сохранять данные при случайном обновлении.

    www.google.ru/flights



    Предзаполненные поля


    На некоторых тестируемых сайтах поле “Дата” было уже заполнено.

    В некоторых случаях стояла только начальная дата, в некоторых — начальная и конечная. Такое поведение интерфейса вызывало недовольство тестируемых и сбивало с толку. Конечно, каждый случай необходимо рассматривать индивидуально.

    Например, покупка ж/д или авиабилетов, бронировании гостиниц может проходить сильно заранее. Тогда текущая дата неуместна.

    При бронировании билетов, например, в кинотеатр, такой подход может быть оправдан.

    Ниже показаны примеры заранее заполненных полей. Удобно? Стоит подумать.

    Пример один: www.rzd.ru



    Пример два: www.trivago.ru



    Пример три: www.rentalcars.com



    Автоматическое заполнение даты “Обратно”


    Еще одна часто встречающаяся “фишка” со знаком минус. При вводе даты “Туда”, дата “Обратно” подставляется автоматически. Как правило, это следующий день.

    Такое поведение интерфейса также вызвало недовольство своей непредсказуемостью и излишней самостоятельностью.

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

    Как пример для тестирования сайты: www.booking.com, www.trivago.ru

    Идеи на заметку:


    Напоследок, неплохие идеи, которые не понадобились для разработки, но остались в копилке.

    Указание стоимости сразу в календаре


    www.google.ru/flights

    При выборе дат туда/обратно рассчитывается общая стоимость полета. Отдельным цветом выделены самые дешевые перелеты. Удобно, если стоит задача найти самый дешевый вариант, либо сравнить цены.



    Варианты отображения/переключения между месяцами


    Когда необходимо показать сразу несколько месяцев, можно подсмотреть идеи и подумать о удобном решении.

    Идея раз: www.rentalcars.com



    Идея два: www.ozon.travel/flight/



    Идея три: www.swiss.com/ru/ru



    Визуальное отделение выходных от будней


    Самый простой вопрос: начинать неделю в понедельник или в воскресенье? Это зависит от предоставляемой услуги и целевой аудитории. Если клиенты чаще заказывают ваши услуги в выходные, выделите выходные и, возможно, праздничные дни.

    www.skyscanner.net



    Мини-шагомер для быстрых переходов


    Для планирования коротких поездок и пр. Нет необходимости открывать календарь. Тут же можно показывать результаты поиска.

    Следует помнить, что мини-степперы — хорошее улучшение при выборе дат, но не стоит заменять ими полноценный попап с календарем.

    Что выбрать? Сначала изучить цель календаря и диапазоны ввода дат. Если даты уходят далеко в прошлое или в будущее (например, для бронирования отпуска), то попап с календарем — хороший вариант.

    Если диапазон дат довольно короткий (менее шести недель — например, при бронировании медицинского приёма), обязательно подумать о добавлении мини-степпера для более быстрой настройки.

    Один: www.bahn.de



    Два: www.google.ru/flights



    Собственно все. Как всегда, любые мнения принимаются, критика приветствуется, за дополнительные примеры хороших решений благодарности!
    Поделиться публикацией
    Комментарии 9
      +3
      Всегда предпочитаю вводить с клавиатуры, и если уж не полностью дату, то хотя бы каждый блок отдельно (хотя часто было возможно и как календарем выбрать так и с клавиатуры ввести). Помню даже встречал варианты, когда в месяце строковое, и можно было вводить как «июнь» так и «06», а оно автоматом в нужный вид уже для себя делало.
      Листать календари мышкой, как то долго и неудобно (ну на телефоне и планшете норм, да).
      Про ж/д — лично у меня, как раз чаще всего покупалось «на сегодня», просто чтоб в очереди не стоять. И вроде когда то у них небыло заполнено по умолчанию, а если так — то появление явно не от балды ;).
        +1
        Лучший вариант по вводу даты, когда идет автозамена: 26.6/26-6/26/6 — будет 26.06.2018. Не часто такие варианты встретишь. А как правило, на сайтах выбор даты — это постоянная головная боль. Есть варианты, когда стоит форматируемое текстовое поле с нужным форматом, просто вводишь цифры без разных точек или тире — но это не часто. В разного рода онлайн банкингах или даже на личной страничке сотового оператора создание отчета с нужным периодом — это еще те танцы с бубном (может и не у всех, но мой опыт показывает, что всё очень печально).
        +4
        Самый простой вопрос: начинать неделю в понедельник или в воскресенье? Это зависит от предоставляемой услуги и целевой аудитории. Если клиенты чаще заказывают ваши услуги в выходные, выделите выходные и, возможно, праздничные дни.
        Если прицел только на СНГ, то начало недели только понедельник. Старшее поколение просто бесит, когда начало недели, «по западному» в календаре — в воскресение.
          +1
          Я бы ещё добавил пример календаря, где есть дополнительный параметр, влияющий на выбор дат. В случае со Skyscanner'ом это цена билетов.
          Скриншот


          Так же в моей практике часто использовались быстрые ссылки вроде сегодня/завтра/через неделю, автоматически заполняющие календарь.
            +1
            Интересно, что чаще всего месяцы расположены рядом, а не друг под другом. При этом дни недели идут по горизонтали, хотя при таком раскладе более логично выглядит вертикальное расположение, на я такого никогда не видел. Это из-за привычки или есть какие-то разумные причины? (При вертикальных днях недели месяцы будут нормально «стыковаться» друг с другом).

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

            Еще совсем не уделили внимание вопросу сезонности. Допустим речь идет о курорте, который работает только три месяца в году (летом — у воды, зимой — в горах). Тут будет уместно показывать сразу три месяца? Разве нет? Понятно, что вы решаете проблему покупки билетов, но эта задача не слишком далеко от нее отстоит: точно также выбирается период, и кажется, что удобнее видеть сразу ВСЕ возможные даты, избавив пользователя от прощелкивания месяцев вперед-назад.
              +2
              При этом дни недели идут по горизонтали, хотя при таком раскладе более логично выглядит вертикальное расположение, на я такого никогда не видел. Это из-за привычки или есть какие-то разумные причины?

              Причина проста, мы читаем справа налево.

              А вот вертикальное расположение месяцев делают часто, особенно в мобильных версиях. В приложении Airbnb так сделано, даже лучше, там вертикальный скролл месяцев.
                +1
                Вы знаете, мы читаем слева направо, но почему-то во всех таблицах есть вертикальные столбцы и мы их тоже читаем. И календари (печатные) с вертикальными днями недели мне попадались, а вот в интерфейсах они действительно редко встречаются.
                Вертикально делают списки: лоты на eBay — самый яркий пример — мы справляемся с таким направлением.
                  +1
                  Таблицы это отдельная тема, там элементы колонок/строк сравниваются между собой и нет однозначного потока элементов.
                  Списки это вообще о другом, они подгруппы с набором элементов и у них, как правило, нет однозначного порядка сортировки.
              0

              В ссылке на ozon.travel/flight/ опечатка: написано «https//» вместо «https://». Из-за этого ссылка не открывается.

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

              Самое читаемое