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

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

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

Кто бы мог подумать живя в 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 комментариев
Написать комментарий...
Roman Nenznaskiy

Вы топите за юзабилити.

Решил посмотреть билеты Москва-Киев.
поиск выдает 3000 вариантов... ок.
Пытаюсь выбрать диапазон времени вылета - болт
Пытаюсь выбрать диапазон времени прилета - болт

Пытаюсь найти утренний рейс... на 4-й странице решил больше не подгружать данные.

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

http://prntscr.com/l0g7qm - белый текст на желтом не читается вообще.

НО мой вам бесплатный, дешевый и не спрашиваемый совет. Если не хотите через год-два-три быть в лучшем случае в том же положении, что и сейчас - заканчивайте с разработкой... вот просто остановите ее и начните продавать.
99% времени - исключительно продажи и тогда есть совсем небольшой шанс, что когда вы поймете, что ошибались с концепцией, то данные выводы заставят вас провести N количество кастдевов (а вы их не проводили 100%), потом сделаете 2-3 пивота с полным переформатированием продукта и возможно тогда у вас появится шанс на какой-то успех.

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

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

Мы настолько сильно НЕ слышим людей, что за 4 дня внесли с десяток правок и улучшений, о которых нам подсказали именно ЛЮДИ. Кстати говоря, на подходе ещё целое множество правок.

Вы предъявляете претензии к отсутствию ключевого функционала (на этот конкретный вопрос я отвечал одному из комментаторов, но Вы не читали его потому, что не за этим сюда пришли), однако затем сразу же требуете остановить разработку и сыплете терминами, чтобы показать что? Что вы лучше нас знаете, как нам развивать наш же проект? Так делать не надо. Мы во Флот.ру считаем, что ключевым фактором успешного развития проекта является постоянное и тесное взаимодействие пользователей и администрации сервиса. Мы выбрали такой вектор развития и будем его придерживаться. Собственно, для чего и затевалось написание этой статьи - собрать начальный фидбэк от пользователей. Мне кажется, с этой задачей мы справились на пятёрочку :)

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

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

Я занимаюсь "стартаперством" уже более 10 лет. Начинал так же, как и вы: есть опыт организации разработки, свои дизайнеры, проектировщики и прочее. На большую часть своих проектов я смотрел, не как на бизнес-процесс с посчитанной юнит экономикой, проведенными тестированиями пользователей (customer development), попыток пересмотреть концепцию проекта (пивот), что бы сделать его жизнеспособным и т.д. я все проекты оценивал по большей части из принципа "хммм.... прикольная идея, смогу ли я это повторить? Смогу! А можно ли заработать на этом? Ну если проект-донор зарабатывает 100 млн в год, а я сделаю даже лучше, то если я буду зарабатывать всего 1% от его оборота, то это будет.... 1.000.000 баксов в год! Все, ДЕЛАЮ!"

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

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

Почему я написал, что нужно остановить разработку? Потому что вы ее хорошо делаете! вы знаете - как кодить, вы знаете - как сделать проект быстрее, удобнее и т.д. НО именно потому, что у вас это хорошо получается, вы только это и делаете.
Потому что продавать тяжело.. потому что генерировать и проверять гипотезы по завоеванию рынка и поиску новых ниш - это тяжело т.к. 95% всего, что вы будете пытаться делать - работать не будет! но только эти действия вас приближают к результату...

Из ниши метапоисковиков я могу сходу привести 10 проектов с десятками тысяч покупок в месяц и которые разорялись! Поверьте, разорялись они не потому, что у них сервера были дорогие, а у вас дешевые... и не потому, что они были неудобные, а потому что они не выдержали конкуренции. Основное правило конкурентного рынка гласит "с ростом конкуренции маржинальность бизнеса стремиться к нулю".

Сейчас я вам проведу самый маленький тест, что бы вы увидели, что вы даже сейчас работаете в жесткий минус:
Я предлагаю вам представить, что у вас уже реальный бизнес и вам необходимо работу, которую вы делаете сейчас бесплатно, оценить так, словно ее бы делал наемный сотрудник и делал не хуже вашего.. вы же не хотите всю жизнь кодить и дизайнить поп-апы... ? Я уверен, что с вашими знаниями, вы бы просили за подобную работу минимально 100к в месяц... и столько же просил ваш напарник. Итого - 200к в месяц расходов... умножаем на 2-а года разработки и получается порядка 5 млн долга (опять же все условно). Я понимаю, что вам кажется, что этого долга нет т.к. это ваша инвестиция в будущее проекта и т.д. но долг есть, ведь вы потратили на него свое время, которое стоит ровно 5 млн. Если вы не собираетесь отбивать эти деньги прибылью, то вы просто устроились бесплатно в свой стартап и занимаетесь приятным хобби, а не инвестированием...

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

На эту тему можно очень долго рассуждать, аргументировать и прочее. Лучшее, что вы сейчас можете сделать, это как я писал выше: "заканчивайте с разработкой... вот просто остановите ее и начните продавать.
99% времени - исключительно продажи и тогда есть совсем небольшой шанс, что когда вы поймете, что ошибались с концепцией, то данные выводы заставят вас провести N количество кастдевов (а вы их не проводили 100%), потом сделаете 2-3 пивота с полным переформатированием продукта и возможно тогда у вас появится шанс на какой-то успех."

Советую перед этим потратить сутки и читать подряд все, что пишет Аркадий Морейнис в своем канале в телеге: https://t.me/temno

Моя задача - сэкономить вам еще 5 млн инвестиций самозанятости, которые вы потом спишите на потери.

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