Aviasales
4 565

Ночной режим и сравнение цен во вкладках — что умеет сайт Aviasales

Рассказ о неочевидных функциях сайта и истории их создания.

В закладки

Ночной режим

Изменение цветовой темы со светлой на тёмную.

Эту функцию мы придумали на внутреннем хакатоне. Мы выяснили, что в зависимости от времени года от 20% до 53% запросов приходится на тёмное время суток. Значит, можно сделать процесс поиска билетов более комфортным для пользователей.

Технически для решения задачи можно было собирать отдельные файлы стилей для светлой и тёмной темы. Так, например, делает Twitter. Это экономит несколько килобайт (в сложных случаях — десятков килобайт) размера файла, но такой подход плохо масштабируется и не очень удобен в разработке. Поэтому мы поменяли все хардкодные значения цветов, шрифтов и всего того, что может поменяться в ночной теме, на CSS-переменные. Благо, их поддерживают почти все браузеры.

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

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

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

Артём Варт
фронтенд-разработчик Aviasales

Бронирование билета без перехода на сайт авиакомпании

Облегченная версия страницы с самыми нужными кнопками.

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

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

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

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

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

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

Иван Барышев
продакт-менеджер Aviasales

Фильтрация билетов с понравившимся сегментом

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

Сервис появился как решение наших собственных проблем. Бывает так, что рейс «туда» подходит идеально, а обратно попадаются долгие стыковки, неудобное время вылета и вообще не то. Особенно часто подобная ситуация встречается на рейсах в Латинскую Америку.

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

Иван Барышев

продакт-менеджер Aviasales

Сравнение цен на разные перелеты

Разница цен на перелёты считается на отдельных вкладках Aviasales автоматически.

Мы заметили, что пользователи открывают несколько вкладок, чтобы сравнить стоимость билетов. Это, конечно, не самый частый в мире кейс, но «боль» очевидна. Нет никакой формулы «если 10% юзеров делают так — пили фичу». Разработчикам было интересно и совсем несложно сделать нотификации во вкладках, которые позволяют найти самый выгодный вариант.

Иван Барышев

продакт-менеджер Aviasales

Сравните стоимости билетов на самолёт и на поезд

Купить билеты на «Сапсан» можно на Aviasales.

Это, скорее, сезонная фишка, которая нужна во время сражения поездов с самолётами за пассажиров. Действительно, иногда бывает дешевле поехать «Сапсаном». Для обработки таких кейсов и появился блок с ж/д билетами.

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

Иван Барышев

продакт-менеджер Aviasales

У Aviasales есть ещё несколько функций, которые делают заказ билетов удобнее. Можно:

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

  • Узнать стоимость билетов на соседние дни без изменения даты в запросе. Они отображаются в календаре.

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

  • Заранее узнать об удобствах на борту и статистике опозданий рейса. Можно посмотреть, есть ли в самолёте розетки или Wi-Fi.

  • Зафиксировать пересадку в определённом аэропорту.
  • Выбрать продолжительность пересадки.

  • Выбрать ближайший прямой перелёт без пересадок.

Расскажите в комментариях, каких функций вам не хватает на Aviasales.

{ "author_name": "Aviasales", "author_type": "editor", "tags": [], "comments": 57, "likes": 31, "favorites": 10, "is_advertisement": false, "subsite_label": "aviasales", "id": 50504, "is_wide": true, "is_ugc": false, "date": "Tue, 13 Nov 2018 09:46:15 +0300" }
{ "id": 50504, "author_id": 199189, "diff_limit": 1000, "urls": {"diff":"\/comments\/50504\/get","add":"\/comments\/50504\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/50504"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199189, "possessions": [] }

57 комментариев 57 комм.

Популярные

По порядку

Написать комментарий...
2

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

Ответить
1

Уже в процессе ) Функционал «Избранные билеты» появится в одном из следующих апдейтов.

Ответить
0

Функционал не появится. Появится функциональность.

Ответить
1

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

Ответить
0

Ну и всегда можно интересующие билеты в мобильном избранном ) Например:

Ответить
1

Ночной режим - вроде сейчас мастхев для большинства сайтов, но дико удобно. Спасибо!

Ответить
1

Всегда пожалуйста )

Ответить
0

Добавьте ещё, пожалуйста, к ночной теме NightShift!

Ответить
0

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

Ответить
1

Скорость поиска билетов в 10 раз ниже Google flight, поэтому использую его.

Ответить
1

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

Ответить
0

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

Ответить
0

Попросили написать, я написал. Результат для меня как клиента одинаковый, а время тратить на каждое обновление параметров поиска. Ездите на лошадях, не так уж и медленно, зато выбор пород больше. Но вы просто медленнее приедете, но в тоже самое место. Я готов ждать 45 секунд, если реально результат будет выше.

Ответить
0

Спасибо за фидбек, безусловно, мы всегда стремимся к совершенству =)

Ответить
–1

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

на самом деле не купишь, потому что они просто показывают совпадения :) ну и кэша у них до ануса :)

Ответить
1

И как ночная тема повлияла на конверсию?

Ответить
0

+1 интересно.
АвиаСейлс - вы ее считаете после каждой правки или уже просто делаете правки, потому что решили что это полезно?

Ответить
1

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

Ответить
1

Правильно понял, что конверсия с ночной темы выше чем с дневной темы в ночное время? Или в любое время? Увеличение конверсии заметное или в общем потоке незначительное?

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

Ответить
1

Конверсия немного выше, чем ранее в ночное время без ночной темы – но не сказать, что заметно выше.

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
2

Логично! Будем думать в этом направлении, спасибо.

Ответить
–3

Посчитать время захода солнца по координатом это волшебство?

Ответить
3

Да, это самая настоящая компьютерная магия =)

Ответить
1

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

Ответить
1

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

Ответить
1

Я захожу почитать интересную статью, а по факту читаю 4 абзаца про то как вы вызвали готовую функцию, поменяли цвет в CSS и преподносите это как волшебство. Вроде же это не газета "Пенсионер" и не хабр для детей и не какое-то новое бизнес решение, потому что так делают уже лет 15. Вы читателей за идиотов держите? Поменять цвета в стиле - это правда то чем ты гордишься? Я задал простой вопрос, но ты пришел и молча начал минусить вместо ответа. Так у кого на самом деле бомбит?

Ответить
4

Это не газета «Сделай интересно Андрею» — не все читатели vc, как и наши пользователи, разбираются в верстке, СSS-переменных и других нюансах разработки. И, внимание, статья не об этом. Она про неочевидные функции сайта, о которых пользователи могли не знать, и то что мы по пути рассказали о том, как это появилось на свет, делает нас разве что хорошими рассказчиками. Если тебе не интересно — проходи мимо и не читай, а не устраивай истерику на пустом месте обвиняя нас в … том что мы «пафосные»? Да, я горжусь тем что мы поменяли цвета в стилях (и это было не просто, но статья не об этом, как я уже говорил) сделали приятную фичу пользователям и довели до прода. Много метапоисков с ночной темой можешь вспомнить? Да вообще, любых крупных сервисов, которые подумали об этом, изучили тему и сделали? На твой «простой вопрос» тебе просто ответили от лица компании, но ты решил перейти на личности и до сих пор читаешь между строк в поисках, до чего бы докопаться.

Ответить
0

Заметил такую вещь. Если искать на OneTwoTrip - одна цена, а если через Aviasales покупать у OneTwoTrip, то будет дешевле плюс возможность накопить трипкоины (раньше при переходе со сторонних поисковиков на OneTwoTrip, трипкоины не начислялись). Почему бы Авиасейлс не завести свою бонусную программу? Хотя бы при покупке на сайте без перехода? Мелочь, а приятно)

Ответить
1

Трипкоины - это триппер бонусом к путешествию )

Ответить
0

тоже удивился с названия :)

Ответить
0

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

Ответить
0

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

Ответить
1

Если выбрать «Куда угодно» в поле «Куда» на Авиасейлс, то получите примерно такой же список + карту с ценами.

Ответить
0

Подписка на дешёвые билеты "куда угодно"

Ответить
1

Есть такая ) Подписаться можно в Боте низких цен в онлайн-мессенджерах или во вкладке "Путешествия" в мобильном приложении.

Ответить
0

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

Ответить
0

Вот это тоже нелогично. Зачем мне два таких уведомления, в одном из которых цена в два раза выше, чем в другом.

Ответить
0

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

Ответить
0

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

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

Ответить
0

Так мы ж не предлагаем вам 2 раза лететь =) Мы предлагаем выбрать один из вариантов и лететь один раз. А вариантов в один месяц может быть оочень много, особенно если рейсы ежедневные. Если вы не рассматриваете дорогие билеты на праздники, то просто выставьте лимит по цене и они больше не будут вам предлагаться. А по исключениям подумаем, спасибо.

Ответить
0

Иногда рейс Москва - Хабаровск - Владивосток оказывается дешевле, чем Москва - Хабаровск, хотелось бы видеть и такие варианты

Ответить
0

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

Ответить
0

Почему нет выбора периода?

Ответить
0

https://gyazo.com/a01595352b2b4d7638b696908850e545 - там маленький баг в сафари с выбором дат

Ответить
0

Спасибо, скоро все поправим )

Ответить
0

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

Ответить
0

Привет! А есть примеры таких рейсов?

Ответить

0

А что у вас за компания? =)

Ответить
0

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

Ответить
0

Привет! К сожалению, авиакомпании не умеют выписывать одним билетом разные тарифы, поэтому в таком случае придется покупать разные билеты. Однако есть агентства, которые могут так делать, поэтому в данном направлении мы уже думаем, спасибо!

Ответить
0

Нет хватает пересадок/выбора другого аэропорта по близким аэропортам в разных городах, например, Братислава и Вена. Между ними ехать час, мне все равно, в какой лететь. Отчасти конкретно этот кейс закрывает Победа своим трансфером, но это если из Москвы лететь, а не по Европе.

Ответить
0

А ещё прям голубая мечта: куда угодно по Европе/Азии/России/и тд в несколько городов.
Например, у меня отпуск 2 недели, за это время я хочу посетить от 2 до 5 городов Европы. Мне примерно все равно куда ехать, и я готова подстроиться под дешевые билеты и часть сегментов вообще закрыть автобусом. Но это, наверное, слишком сложный поиск

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "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" ], "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" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "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-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }