Как Создать Интерфейс Сервиса Планирования Путешествий

Колонка основателя и технического директора проекта Timescenery Основатель и технический директор проекта Таймсценария Никита Дедик написал колонку для vc.ru об интерфейсе сервиса, благодаря которому пользователь может сразу построить маршрут путешествия, забронировать авиабилет или отель, найти жилье или ресторан и многое другое.

Мы любим путешествовать по всему миру.

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

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

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

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

У такого путешествия есть один большой недостаток – оно чертовски сложное.

Организация насыщенного путешествия, например, автопутешествия в страны Бенилюкса или Андалусии, — очень трудоемкая задача.

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

Трудности в планировании собственного путешествия.

с которыми столкнулись за годы работы в консьерж-службах.

Ориентация на местности

Приходится посещать множество сайтов, читать рекомендации других путешественников и собирать найденную информацию в удобном для анализа виде – зачастую это таблицы в Excel или Google Docs. В соответствии с исследовать от Expedia при планировании одной поездки можно использовать до 161 различных сайтов.

Построение маршрутов

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

Планирование

Чтобы планы не перекрывали друг друга и чтобы между пунктами плана было достаточно времени, необходимо помнить и сравнивать множество чисел.

Подбор удобных рейсов

Аренда автомобиля

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

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

.

Поиск жилья по маршруту

Даты путешествия

Услуги бронирования

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

Информация для дороги

Как бы тщательно вы ни собирали всю эту информацию, всегда есть вероятность что-то забыть.

Универсальное решение для планирования путешествий

Так появился проект Таймсценария , по-русски «Таймсинеры», а для друзей — «Таймс».

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

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

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

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

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

Мы продолжали добавлять функциональность продукта, выпуская обновления каждые две недели в рамках версии 1.xx. В декабре 2016 года мы официально выпустили версию продукта v2.0 — и это обновление касается не столько нового функционала, сколько масштабного редизайна интерфейса продукта и редизайна как внешнего вида, так и пользовательского опыта в целом.

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

Лучшие поставщики в одном месте

В создании визуальных сценариев путешествий для Timesinery участвуют уже знакомые Foursquare, Google Maps, Wikipedia, Ostrovok, RentalCars и другие сервисы, подобно тому, как строят дома из кирпича.

Стоимость продукта

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

• Все услуги бронируются вообще без перехода на другие сайты.

Задача продукта

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

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

• Сделайте максимально простым бронирование нескольких услуг у нескольких поставщиков одновременно.

Продуктовое решение

• Мы разработали и поддерживаем набор алгоритмов нечеткой логики для сопоставления геообъектов на основе данных от нескольких поставщиков – не всегда полных и не всегда точных – и дальнейшей очистки этих данных.

• Планировщик времени и путешествий — гибкая платформа для создания сценариев путешествий любой сложности.

• Бронирование услуг одной кнопкой — уникальная технология Timesinery, автоматизирующая массовое бронирование услуг для загруженных поездок.

Унификация интерфейса

Стабильный опыт на всех платформах

• Многоканальный.

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

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

• Непрерывность.

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

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

Особенности разработки интерфейса

Изначально мы планировали поддерживать любые устройства — от смартфонов до больших настольных моноблоков.

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

Адаптивная планировка.

Интерфейс Timesinery адаптивный, то есть адаптируется к размеру экрана и сценариям использования, ожидаемым для каждого типа устройства.

На большом экране интерфейс разделен на три части — например, параметры поиска, список результатов и карта.

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

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

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

Смартфоны



Таблетки



Большие диагонали Вложенные панели.

Одно из наших открытий в интерфейсе — архитектура вложенных панелей.

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

, и справа откроется подробная информация о выбранной опции.

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

Если вам необходимо изменить настройки фильтра, возврат к параметрам поиска доступен в один клик.

Таким образом, большинство экранов в Timesinery могут «жить» как в большей правой панели, так и в меньшей левой панели, а также в однопанельном режиме на мобильных устройствах или малых диагоналях.

Слева параметры, справа список



Слева список результатов, справа выбранный вариант

Инструменты самостоятельного планирования

Планировщик времени и путешествий

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

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

Режимы отображения

Все события имеют значки, обозначающие их категории.

• График.

  Детальное планирование и механизм синхронизации.

  Мы постарались следовать устоявшимся шаблонам — можно кликнуть по строке, чтобы выбрать период в полчаса, или зажать кнопку мыши и перетащить рамку, чтобы указать другой диапазон времени, как в Excel или Google Calendar. Рамку также можно захватывать, перетаскивать и изменять ее размер.

• Повестка дня.

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

  С помощью повестки дня легче оценить список планов на день без лишних подробностей.

• Календарь.

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

  Цветные полоски внутри ячеек – зеленые, оранжевые и красные – указывают на то, насколько загружен день.

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

Выбор времени, событий, дат в формах

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

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

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

Автоматизация планирования

• Время, необходимое для прохождения формальностей в аэропортах, включается в планы автоматически.

• Время получения и возврата автомобиля также учитывается автоматически.

• Посещения проживания добавляются за каждую ночь на весь срок бронирования, а также за первое посещение с целью регистрации автоматически.

Погода, фазы солнца, часовые пояса

• Слева от шкалы времени на временной шкале вы можете увидеть вертикальную полосу оттенков синего цвета.

  Он показывает ночь (темно-синий фон), день (голубой), восход и закат в предполагаемом месте пользователя.

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

• Сверху полосы с фазами суток также отображается прогноз погоды на 10 лет вперед в соответствующем районе.

  Позволяет учесть, какая там средняя температура в интересующее время года.

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

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

• Изменения зимнего и летнего времени также отображаются на шкале времени в зависимости от запланированного местоположения пользователя в соответствующий момент времени.

  Вы всегда будете знать, как и в какой момент перевести часы.

Маршруты в рамках расписания

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

Маршруты в расписании и на карте

• Маршруты между всеми точками расписания строятся автоматически, а также сохраняются в расписании, наглядно демонстрируя время, проведенное в дороге.

• Разумеется, маршруты также отображаются на карте.

  Доступны все привычные настройки – тип транспорта и другие предпочтения.

Маршруты при поиске мест

• При поиске геообъектов время в пути от предыдущей точки расписания рассчитывается автоматически.

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

• Если вы ищете место для посещения в ближайшее время, ваше местоположение и маршрут от него также будут определены автоматически.

  В несколько кликов вы сможете найти ближайший вегетарианский ресторан и сориентироваться по времени прибытия.

Время в зависимости от маршрутов

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

  Итак, после сохранения планов отелей и перехода к поиску ресторана рекомендуемое время для посещения ресторана отображается автоматически.

• Предпочтительный вид транспорта наследуется из предыдущего пункта расписания, поэтому планировать поездку или прогулку по городу становится проще.

Карта – инструмент планирования

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

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

Карта там, где вам это нужно

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

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

Фотографии на карте

• Точки отображаются на карте не в виде однообразных «булавок», а в виде фотографий.

• Выбранный вариант «пульсирует» на карте.

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

• При наведении курсора на фотографию отображается дополнительная информация.

Поиск по области карты

• Любые геообъекты — достопримечательности, отели и другое жилье, готовые сценарии путешествий — можно найти не только применительно к конкретным населенным пунктам, но и вообще на любом участке карты.

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

• При выборе сценариев из их каталога и поиске автомобиля в аренду карта служит фильтром — достопримечательности на карте можно отметить галочками, чтобы в списке остались только релевантные результаты.

Подбор рейсов и трансфера

Конкретные рейсы и пересадки на этих сайтах являются второстепенной информацией и чаще всего отображаются в текстовом виде.

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

-путевые перелеты, которые иногда превращаются в пытку.

В Timesinery упор делается на гибкий выбор удобных, а не просто недорогих рейсов.

Визуальное сравнение и фильтрация рейсов

• На схемах рейсов указано время отправления и прибытия, все детали трансфера – варианты легко сравнивать между собой глазами, не задумываясь о цифрах.

  Известно, что зрительная нагрузка переносится мозгом человека легче, чем когнитивная.

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

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

Пошаговый выбор вариантов

• Рейсы по каждому этапу маршрута отображаются отдельно - отдельные рейсы туда, отдельно рейсы обратно.

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

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

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

• Действовать можно в любом порядке – если вам важнее сначала выбрать обратный рейс, можете начать с него.

  Этот механизм работает для маршрутов с любым количеством этапов.

Удобное планирование трансфера

• При нажатии на схему вариантов перелетов открывается подробная информация о рейсах, аэропортах, а также схема полетов на карте.

Например, на маршруте Москва — Лиссабон KLM предлагает набор вариантов с пересадкой в Амстердаме.

Timesinery позволяет «прикрепить» интересующий вас рейс из Москвы в Амстердам, чтобы увидеть все варианты перелета в Лиссабон, включающие этот рейс.

Для этого вам необходимо открыть информацию о рейсе и отметить конкретный рейс.

В списке останутся только опции с этим полетом, а чекбокс рядом с ними будет в «наполовину нажатом» состоянии (помните третье состояние чекбокса в Windows с квадратом?).

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

И так для любого этапа маршрута.

Галочкой отмечен конкретный рейс (справа), в списке остается несколько вариантов с этим рейсом (слева)

Быстрый поиск арендованного автомобиля, жилья и мест для посещения

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

Краткая информация

• В списке схематически показаны основные характеристики автомобиля, его класс и рейтинг прокатной компании.

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

• Подробная информация о каждом объекте загружается мгновенно при выборе его из списка, при этом и список, и карта остаются видимыми, если позволяет разрешение экрана.

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

Быстрые фотографии

• Фотографии выбранного результата поиска, а жилья - каждой категории номеров сразу отображаются в достаточном размере - с возможностью мгновенного перехода в полноразмерную галерею.

• Текстовая информация, такая как описание жилья и полный перечень услуг, вынесена на отдельную вкладку, что облегчает восприятие информации и ускоряет процесс выбора.

Быстрая карта

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

• Подбирать жилье становится удобнее в последнюю минуту – вы можете поискать и забронировать подходящий вариант рядом с вашим текущим местоположением.

• При аренде автомобиля карта также служит фильтром – просто отметьте на карте точку получения, чтобы увидеть только предлагаемые там автомобили.

Быстрая стоимость

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

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

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

Платформа сценариев путешествий

Планы путешествий — гибкие, визуальные, интерактивные, социальные

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

Сначала план, потом даты

Сценарии могут пересекаться и пересекаться – противоречия в этом нет.

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

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

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

Опыт визуализации

• Специально для этого мы разработали «журнальный» вариант отображения сценария, в котором основной упор делается на большие фотографии, разнообразие макетов по типу и продолжительности мероприятий, а также «воздушный» дизайн с обилием пустого пространства.

  .

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

  Да-да, Timesinery — это прежде всего контент-платформа, где контент — это подробное и яркое описание уникального опыта путешествий от реальных людей.

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

Интерактивные планы

• Альтернатива е

• Программное Обеспечение Для Калибровочной Лаборатории И Его Преимущества Для Испытательных Лабораторий

  19 Oct, 24

• Простые Способы Заработать Деньги В Интернете Для Подростка

  19 Oct, 24

• Экзамены По Windows Server 2016

  19 Oct, 24

• Методы Успешной Кампании С Оплатой За Клик

  19 Oct, 24

• Инфраструктура Обработки Очередей В Социальной Сети Мой Мир

  19 Oct, 24

• Воспроизведение Торрентов В Браузере С Помощью Magic Player

  19 Oct, 24

• Настройка Unity

  19 Oct, 24

• Особенности Обработки Html-Письмов

  19 Oct, 24

• Пост О Небольших Видеоиграх

  19 Oct, 24

• Cord - Плагин Для Выбора Кабеля

  19 Oct, 24