Ночной режим и сравнение цен во вкладках — что умеет сайт Aviasales
Рассказ о неочевидных функциях сайта и истории их создания.
Ночной режим
Изменение цветовой темы со светлой на тёмную.
Эту функцию мы придумали на внутреннем хакатоне. Мы выяснили, что в зависимости от времени года от 20% до 53% запросов приходится на тёмное время суток. Значит, можно сделать процесс поиска билетов более комфортным для пользователей.
Технически для решения задачи можно было собирать отдельные файлы стилей для светлой и тёмной темы. Так, например, делает Twitter. Это экономит несколько килобайт (в сложных случаях — десятков килобайт) размера файла, но такой подход плохо масштабируется и не очень удобен в разработке. Поэтому мы поменяли все хардкодные значения цветов, шрифтов и всего того, что может поменяться в ночной теме, на CSS-переменные. Благо, их поддерживают почти все браузеры.
В таком решении вся цветовая схема — это один файл с набором CSS-переменных и их значений, который легко конвертируется, например, в JSON. В ходе работы стало понятно, что стоило делать не столько именно ночную тему, сколько возможность кастомизации внешнего вида вообще. Общий размер файла при этом подходе почти не увеличивается, а тема переключается мгновенно, потому что нет необходимости загружать отдельный файл стилей.
Конечно, нам захотелось, чтобы ночная тема умела включаться-выключаться автоматически в зависимости от наличия на улице солнца. Положиться на одно только локальное время нельзя — вечереет в разных широтах в разное время. Но, получив примерные координаты пользователя по IP, можно сделать запрос в специальный сервис, который вернёт фазу суток для заданных координат-времени.
Проблема в том, что с нашим количеством пользователей сторонний сервис не справился бы с нагрузкой, поэтому мы решили применить немного волшебства и математики, чтобы считать фазу дня прямо на клиенте. По умолчанию ночная тема будет включаться с закатом и отключаться с рассветом, но если пользователь переключит её вручную, то его выбор сохранится. А для включения автоматического режима мы добавим настройку в личный кабинет.
Бронирование билета без перехода на сайт авиакомпании
Облегченная версия страницы с самыми нужными кнопками.
Конверсия на сайтах одних партнёров может быть в разы выше, чем на других. Заметив это мы пришли к очевидной идее — сделать максимально удобный и понятный единый интерфейс для бронирования билетов с конверсией на уровне топовых партнеров.
Начать решили с «Аэрофлота». У них, пожалуй, самые лояльные клиенты. Для многих пассажиров важно покупать билеты именно на официальном сайте «Аэрофлота». По мнению людей, это более безопасно и надёжно.
Тестируя самую первую версию мы поняли, что, помимо интерфейсных задач, нам нужно решить проблему доверия пользователя — подготовить его к тому, что оформлять билет он будет не на привычном аэрофлотовском сайте, а прямо на Aviasales. В России пользователи раньше не сталкивались с таким решением и не знают, что такое assisted booking и как он работает.
Всё просто — мы передаём указанные пользователем данные «Аэрофлоту» и уже на стороне авиакомпании происходит оплата и оформляется билет. То есть с точки зрения безопасности и надёжности нет разницы, бронируете вы на Aviasales или на сайте «Аэрофлота».
Чтобы донести это до пользователей, мы разместили краткую информацию о работе быстрых бронирований на окнах ожидания, сняли видео-инструкцию и продвигали её через маркетинговые каналы. Параллельно шла работа над интерфейсом: появилось больше брендинга «Аэрофлота», форма стала двухстраничной — шаг оплаты уехал на отдельную страницу. Появился сайдбар с информацией о пассажирах и рейсе, пользователи получили возможность сохранять данные пассажиров и быстро подставлять их в форму при последующих бронированиях. Добавили выбор тарифов и класса.
В результате, конверсия на нашей странице была выше, чем на сайте авиакомпании, а на мобильных устройствах — превзошла в разы.
Фильтрация билетов с понравившимся сегментом
Смотреть билеты только с удобным вариантом пересадки.
Сервис появился как решение наших собственных проблем. Бывает так, что рейс «туда» подходит идеально, а обратно попадаются долгие стыковки, неудобное время вылета и вообще не то. Особенно часто подобная ситуация встречается на рейсах в Латинскую Америку.
Мы реализовали классический кейс в стиле «путешественники для путешественников» — первыми заметили неудобство и решили его с помощью фильтра сегментов.
Сравнение цен на разные перелеты
Разница цен на перелёты считается на отдельных вкладках Aviasales автоматически.
Мы заметили, что пользователи открывают несколько вкладок, чтобы сравнить стоимость билетов. Это, конечно, не самый частый в мире кейс, но «боль» очевидна. Нет никакой формулы «если 10% юзеров делают так — пили фичу». Разработчикам было интересно и совсем несложно сделать нотификации во вкладках, которые позволяют найти самый выгодный вариант.
Сравните стоимости билетов на самолёт и на поезд
Купить билеты на «Сапсан» можно на Aviasales.
Это, скорее, сезонная фишка, которая нужна во время сражения поездов с самолётами за пассажиров. Действительно, иногда бывает дешевле поехать «Сапсаном». Для обработки таких кейсов и появился блок с ж/д билетами.
Все железнодорожные варианты отличаются только временем отправления и иногда ценой, поэтому собраны в одном месте. Такие билеты отображаются во время поиска в одну сторону и только для взрослых пассажиров. Это связано с пользовательскими предпочтениями на маршруте Москва – Санкт-Петербург.
У Aviasales есть ещё несколько функций, которые делают заказ билетов удобнее. Можно:
Сохранить настройки фильтров для поиска билетов и использовать их в будущем. Например, показывать билеты варианты конкретной авиакомпании в определённый промежуток времени.
Узнать стоимость билетов на соседние дни без изменения даты в запросе. Они отображаются в календаре.
- Авторизоваться через социальные сети в личном кабинете, чтобы получить скидки от партнёров и сэкономить на поездке.
Улучшить на сайте класс обслуживания и пересесть в более удобное кресло.
Заранее узнать об удобствах на борту и статистике опозданий рейса. Можно посмотреть, есть ли в самолёте розетки или Wi-Fi.
- Зафиксировать пересадку в определённом аэропорту.
Выбрать продолжительность пересадки.
Выбрать ближайший прямой перелёт без пересадок.
Расскажите в комментариях, каких функций вам не хватает на Aviasales.
Посчитать время захода солнца по координатом это волшебство?
Да, это самая настоящая компьютерная магия =)
Ничего себе, сам хед оф дизайн снизошел минусануть. Валера, подставить 2 координаты и дату в формулу (которую ты не выводил) это не волшебство, это математика уровня 7 класса. К чему этот пафос, вроде вы решили сложнейшую инженерную задачу?
https://gyazo.com/a01595352b2b4d7638b696908850e545 - там маленький баг в сафари с выбором дат
Спасибо, скоро все поправим )
Кнопку «К сравнению», чтобы можно было добавить интересные рейсы по одному направлению на отдельную страницу и на ней в удобном формате сравнить плюсы и минусы каждого перелета.