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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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