Что не так с сервисами по поиску авиабилетов или как мы создавали идеальный поисковик

Рассказ команды сервиса «Флот.ру».

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

Кто бы мог подумать живя в 2007 году, что буквально через 10 лет будет оплачивать заказ в Starbucks с помощью смартфона? Человека, сказавшего в 2007 году, что через мобильное приложение на смартфоне можно будет забронировать авиабилет и пройти Check-In в аэропорту с его же помощью, наверное, и вовсе бы высмеяли.

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

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

Что же не так с поисковиками авиабилетов?

Если вкратце, то:

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

Теперь подробнее. В первую очередь, поиску мешает реклама. Она так или иначе присутствует в поисковиках.

И ладно, если бы она представляла собой нативное решение, вписывающееся в дизайн карточек с информацией об авиабилетах. Однако зачастую реклама — это простой рекламный баннер AdSense, который может мигать, сверкать и переливаться красками. Как пользователю может нравиться такая светомузыка, когда он пытается сосредоточиться? Как ни крути, совершается важная и дорогостоящая покупка (здесь речь идёт о среднем чеке — 10-12 тысяч рублей).

Давайте подсчитаем количество баннеров и реальных авиабилетов на странице с поисковой выдачей

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

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

Туда летим через AUH, а обратно — через AUH, GYD

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

Какую мы поставили перед собой задачу и как её решили

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

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

Теперь разберём детально каждый пункт.

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

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

Если вы прокручиваете страницу по направлению вниз, то эта плашка пропадает, оставляя ещё больше пространства для просмотра карточек билета. Если вы начинаете прокручивать страницу вверх, то плашка возвращается. Казалось бы, 35 пикселей на Full HD мониторе — это ничто. Но не стоит забывать о 13-дюймовых ноутбуках с разрешением 1920x1080, у которых включено масштабирование интерфейса 150%. Это здорово экономит место для пользователей с маленьким разрешением дисплея.

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

Без преувеличения, лучший дизайн карточки авиабилета в мире

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

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

Почему была выбрана именно такая компоновка информации на карточке? Всё это неспроста и объясняется снова-таки психологией того или иного человека.

Так повелось, что люди на подсознательном уровне выделяют своих фаворитов среди множества остальных. Так и с авиакомпаниями — кто-то предпочитает «Аэрофлот» за их вкусные и бесплатные сэндвичи даже на ближнемагистральных рейсах, а кто-то обожает АК «Россия» за возможность полетать на легендарном Boeing 747. Поэтому логотипы перевозчиков мы поставили в той части карточки, куда пользовательский взгляд попадёт в первую очередь.

Затем идёт основная информация о сегментах:

Основная часть карточки авиабилета

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

Карточка читается очень просто:

Вылет из Москвы (аэропорт Шереметьево), 28 сентября, в 8:35 — прямой рейс длительностью в 1 час и 25 минут — прибытие в Минск (аэропорт Минск Национальный) 28 сентября, в 10:00.

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

Блок с ценами, правилами провоза багажа и рейтингом, который выставили пользователи этому билету

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

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

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

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

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

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

Так устроена человеческая психика — человек всегда хочет иметь самое вкусное по самой низкой цене. У нас получилось уместить две карточки авиабилетов на 13-дюймовом экране:

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

Возможность сравнить два продукта «в лоб» позволяет увидеть общую картину и сравнивать их между собой без необходимости крутить страницу вверх-вниз, постоянно возвращаясь к какому-то одному варианту.

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

Чуть пользователь начинает не понимать то или иное обозначение, он сразу начинает сомневаться, что опять-таки отсрочивает совершение им покупки.

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

Два сегмента полёта с одинаковым тарифом, но разными условиями провоза багажа

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

Предупреждаем пользователя о расхождениях в тарифах

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

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

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

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

Ответить
Развернуть ветку
Андрей Дымов
Автор

В нашем поиске никогда не будет рекламы. Можете сделать скриншот этого комментария и сохранить себе на несколько облачных хранилищ, чтобы случайно не потерять. Если у нас появится реклама и/или предложения докупить трансфер/такси/страховку/etc - ткнёте лично мне этим скриншотом в лицо :)

Ответить
Развернуть ветку
Vladislav

На чем планируете зарабатывать если не секрет? :)

Ответить
Развернуть ветку
Андрей Дымов
Автор

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

Ответить
Развернуть ветку
Vladislav

Но в деньгах нуждаются серверные мощи, разработка, маркетинг (основная статья расходов для меты) и так далее.

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

Аукционы раздуты, а рынок нищий. ОТА и так еле еле концы с концами сводят. Ну зачем тратите время и вдохновение на эту нишу, почему ресерч предварительный не сделали?

Ответить
Развернуть ветку
Андрей Дымов
Автор

Наши расходы на два сервера в Европе - 12$ в месяц. Разработкой занимаюсь я сам, в одиночку, поэтому будем считать, что она бесплатна. Она не отнимает столько сил и времени, как может показаться. К тому же, над своим собственным проектом работать значительно легче психологически. Это как ребёнок. На него сил и времени не жалко.

Aviasales нам не конкуренты. Им принадлежит слишком большая доля рынка, но мы на неё даже не претендуем, кстати. Skyscanner - кто этим вообще пользуется? Kayak хорош, но это забугорная тема. В СНГ им не пользуется почти никто.

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

Трудно ответить на последний абзац. Два года назад мы с товарищем хотели придумать, чем хотим заниматься. После недолгих раздумий пришли к выводу о том, что хотим заниматься авиа-тематикой. Спустя два года разработки заниматься этим не надоело, боевой дух не пропал, а значит, что мы выбрали правильную тематику и будем продолжать в ней вариться. Большинство стартапов умирают из-за того, что идея сдулась и у команды пропал интерес. Куй железо, пока горячо, как говорится :)

Тем более, такой огромный проект в портфолио лишним не будет.

Ответить
Развернуть ветку
Радион Уранов

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

Ответить
Развернуть ветку
Олег Саенов

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

Ответить
Развернуть ветку
Радион Уранов

Правильно, но в конечно счете переходишь покупать со Скайсканера.

Ответить
Развернуть ветку
163 комментария
Раскрывать всегда