[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Редакция vc.ru", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 64, "likes": 13, "favorites": 23, "is_advertisement": false, "section_name": "default", "id": "21381" }
Редакция vc.ru
4 818

Как создать интерфейс сервиса по планированию путешествий

Колонка основателя и технического директора проекта Timescenery

Поделиться

В избранное

В избранном

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

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

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

Сложности самостоятельного планирования путешествий

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

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

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

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

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

Составление расписания

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

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

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

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

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

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

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

Даты поездки

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

Бронирование услуг

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

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

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

Решение «всё в одном» для планирования путешествий

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

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

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

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

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

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

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

Наша продуктовая и бизнес-задача — соединить наиболее популярные среди пользователей сервисы в едином интерфейсе, чтобы вывести процесс планирования на новый уровень. Уже привычные Foursquare, Google Maps, Wikipedia, «Островок», RentalCars и другие сервисы участвуют в создании наглядных сценариев путешествий «Таймсинери», как из кирпичиков строятся дома.

Продуктовая ценность

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

Продуктовая задача

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

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

  • Мы разработали и поддерживаем набор алгоритмов нечёткой логики для сопоставления гео-объектов на основе данных от нескольких поставщиков — не всегда полных и не всегда точных — и дополнительной очистки этих данных.
  • Планировщик времени и перемещений — гибкая платформа для создания сценариев путешествий любой сложности.
  • Бронирование услуг одной кнопкой — уникальная технология «Таймсинери», которая автоматизирует массовое бронирование услуг для насыщенных путешествий.

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

Единый опыт на всех платформах

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

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

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

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

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

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

Смартфоны

Планшеты

Большие диагонали

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

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

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

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

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

Планировщик времени и перемещений

Ядро функциональности «Таймсинери» — интерфейс планирования времени. У него большое будущее — это не только организация путешествий, но и личного времени, и делового расписания, однако пока мы говорим о путешествиях. Всё, что связано с времяпровождением, будь то авиаперелёт, получение автомобиля, пешая прогулка или посещение ресторана, отображается в расписании.

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

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

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

Нажатие на событие открывает его детали

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

Нажатие на событие также открывает детали

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

Нажатие на дату отправляет в таймлайн или повестку к нужной дате

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

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

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

Поля для редактирования времени (справа) также используют таймлайн (слева)

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

Нажатие «Откуда» в настройках маршрута (справа) открывает повестку (слева) для выбора события из списка

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

Нажатие на даты в форме (слева) открывает календарь в режиме выбора диапазона дат (справа)

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

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

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

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

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

  • Слева от шкалы времени в таймлайне можно видеть вертикальную полосу в оттенках синего цвета. Она показывает ночь (тёмно-синий фон), день (светло-синий), рассвет и закат в планируемом местонахождении пользователя. Таким образом, организовать романтический ужин с видом на закат так же просто, как не оказаться за рулём в незнакомой стране, когда солнце уже село.
  • Поверх полосы с фазами дня также выводится прогноз погоды на 10 лет вперёд в соответствующей местности. Позволяет учитывать, какая в среднем температура там бывает в интересующее время года.
  • Смены часовых поясов отображаются в таймлайне и повестке автоматически, что позволяет наглядно планировать дни в будущем по местному времени. Так, при перелёте с востока на запад день может стать длиннее, а иногда даже вернуться во вчерашний день, а при перелёте на восток день укорачивается.
  • Смена зимнего и летнего времени также выводятся на шкале времени в зависимости от планируемого местонахождения пользователя на соответствующий момент времени. Вы всегда будете знать, как и в какой момент следует перевести часы.

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

Маршруты как часть расписания

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

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

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

Маршрут пунктиром в таймлайне (слева), настройки маршрута и указания (в центре), маршрут на карте (справа)

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

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

Маршрут от моего местоположения в настройках (в центре) и на карте (справа)

Выбор времени с учётом маршрутов

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

Маршрут от предыдущей точки (пунктир в таймлайне слева) учитывается при выборе времени (справа)

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

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

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

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

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

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

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

Поиск по участку карты

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

Подбор перелётов и пересадок

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

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

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

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

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

Для обоих этапов — туда и обратно — установлены фильтры времени вылета и прилёта

Поэтапный выбор вариантов

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

Выбран вариант перелёта обратно (сверху), под ним выведены все подходящие перелёты туда

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

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

Список вариантов (слева), подробности выбранного варианта (в центре), карта перелётов (справа)

Если вы желаете заложить побольше времени на пересадку, чтобы посмотреть город, то в интерфейсе предусмотрен выбор не только «готовых» перелётов из точки A в точку B, но и конкретных рейсов до промежуточных точек. Например, на маршруте Москва — Лиссабон компания KLM предлагает набор вариантов с пересадкой в Амстердаме. Таймсинери позволяет «закрепить» интересующий рейс из Москвы в Амстердам, чтобы увидеть все варианты перелётов до Лиссабона, которые включают этот рейс.

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

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

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

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

Быстрая информация

  • Основные характеристики автомобиля, его класс и рейтинг прокатной компании схематично выводятся уже в списке.
  • Иконки основных услуг, звёздность и средний чек, категория и рейтинг жилья и точек интереса — также сгруппированы для быстрого прочтения.
  • Подробная информация о каждом из объектов загружается моментально при его выборе из списка, при этом и список, и карта остаются видимыми, если позволяет разрешение экрана. Никаких новых вкладок и потери контекста.

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

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

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

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

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

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

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

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

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

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

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

Сначала план, затем даты

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

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

Визуализация опыта

Сценарии путешествий — это возможность в красивой форме представить детальные планы путешествий.

  • Специально для этого мы разработали «журнальный» вариант отображения сценария, в котором основной упор делается на крупные фотографии, разнообразие лейаутов по типам и продолжительности событий, «воздушный» дизайн с обилием пустого места. Нашей задачей было отойти от функциональной составляющей в пользу эстетичности, заложив фундамент для принципиально нового поколения travel-журналистики. Да-да, «Таймсинери» — это в первую очередь контент-платформа, где контент — это подробное и яркое описание уникального опыта путешествий от реальных людей.
  • Сценарии путешествий могут описывать как уже свершившийся опыт, так и ещё не начавшийся, что даёт возможность начать переживать его ещё на этапе планирования.

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

  • Альтернатива эмоциональному журнальному представлению сценариев в Таймсинери — весьма утилитарное отображение внутри планировщика. Сценарии путешествий отображаются в нём в максимальных подробностях в виде последовательного интерактивного плана, а также в виде точек и маршрутов на карте.
  • Каждое событие можно просмотреть подробно — при этом на экране остаётся и список событий для быстрого переключения между ними, и карта, и подробности события.

Список событий в сценарии (слева), детали выбранного события (по центру) и карта с маршрутами в сценарии (справа)

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

Социальное взаимодействие

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

Возможность быстро поделиться ссылкой на сценарий

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

Бронирование всех услуг одной кнопкой

Одна из уникальных технологий «Таймсинери» — возможность одновременного бронирования нескольких услуг от разных поставщиков нажатием одной кнопки. Именно эта технология позволяет составить сценарий путешествия, затем подобрать подходящие даты и быстро забронировать всё необходимое, как если бы вы покупали пакетный тур, но вообще без участия туроператора. Это гораздо более гибко и безопасно, о чём мы писали в Журнале Времени.

Единая форма для всех услуг

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

Единая форма для всех услуг в сценарии — перелётов, аренды автомобиля и жилья

Параллельное фоновое бронирование

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

Область уведомлений

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

Уведомления на большой диагонали

  • Есть несколько типов уведомлений — процесс (спиннер), успех, ошибка, запрос. Они выглядят и ведут себя по-разному. Запрос подразумевает реакцию пользователя, так что обращает на себя внимание и при нажатии отправляет, например, на страницу банка для ввода кода 3D-Secure. Успех и ошибка дают возможность быстро перейти к бронированию. Процесс демонстрирует, что бронирование ещё не завершено.
  • Для мобильных устройств логика поведения уведомлений изменена, так как экранная площадь сильно ограничена. Сама область уведомлений находится вместе с переключателями языка, валюты и аватаром пользователя в меню со списком разделов, которое доступно при нажатии на иконку текущего раздела в шапке.

Уведомления на смартфоне

Все бронирования в одном месте

  • Сценарии путешествий содержат в себе бронирования с группировкой по типу услуг — в едином формате и в одном интерфейсе. Если вы много путешествуете, то особенно это оцените, ведь больше не будет путаницы с подтверждениями броней для разных поездок в почте, — теперь все подтверждения сгруппированы в рамках сценариев.
  • Также все брони по типам услуг доступны единым списком на первом экране приложения, что позволяет, к примеру, быстро найти ближайший перелёт в Москву, не вспоминая, в какой сценарии он сохранён.

Список предстоящих перелётов с бронями

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

Бронь номера в отеле

Что ещё умеет «Таймсинери»?

Возможность делиться находками

Любые гео-объекты, которые можно найти в «Таймсинери», легко отправить в виде ссылки другим людям или выложить в соцсети. Для удобства в интерфейсе есть отдельная кнопка «Поделиться», которая предлагает наиболее популярные варианты соцсетей, а также возможность скопировать ссылку.

Быстрая отправка ссылки на ресторан

  • При отправке таких гео-объектов в соцсети мы специальным образом формируем OpenGraph-теги, так что ссылка выглядит в ленте красиво и информативно. Регистрации после перехода по таким ссылкам мы учитываем, поскольку планируем в дальнейшем установление социальных связей между пользователями внутри «Таймсинери».

Пример отправки сохранённого жилья в Facebook

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

Пример отправки сохранённого события во «ВКонтакте»

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

Пример ссылки на результаты поиска автомобиля

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

Пример отправки сценария в Facebook

Избранное

Все объекты, которыми можно поделиться, можно также добавлять в избранное. Они попадают в блок «Моё избранное» в соответствующем разделе для быстрого доступа.

Ресторан добавлен в избранное

  • Блок «Моё избранное» подчиняется тем же правилам, что и обычный поиск точек, т. е. учитывает видимый участок карты и установленные фильтры. Это позволяет найти только то избранное, что актуально для конкретных задач и для выбранной местности.
  • В числе ближайших планов — возможность группировать избранное в пользовательские списки и, как и со всем в «Таймсинери», — делиться ими.
  • Но и это ещё не все. Мы планируем также добавить возможность встраивать составленные списки на другие сайты — например, для статей с подборками лучших ресторанов или необычных достопримечательностей, — в таком же интерактивном формате, как весь проект «Таймсинери».

Куда дальше

«Таймсинери» — это ещё и платформа спецпроектов. Об этом читайте подробнее в презентации.

#Интерфейсы

Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

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

0 новых

Популярные

По порядку

Прямой эфир

Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления