В прошлом топике мы рассказывали о том, как наш проект «Авиагик» решает распространенные интерфейсные проблемы авиасервисов. Проект находится в стадии прототипа, поэтому обратная связь для нас ценна, как ничто другое. Аудитория Хабра нас не подвела — материал получил большой отклик и собрал более сотни комментариев, авторы которых высказывали свои пожелания к интерфейсу и говорили о том, какие решения им показались не самыми удачными.
Мы тщательно проанализировали полученные отзывы, создали новую версию интерфейса и сегодня представляем вашему вниманию финальный прототип «Авиагика» перед непосредственным запуском сервиса.
Новый интерфейс
Для наиболее наглядной демонстрации изменений мы записали специальное видео — все перемены в интерфейсы в нем не только показываются, но и объясняются. Поэтому те из читателей, кто больше любит смотреть видеотуториалы, чем читать статьи, могут сразу перейти к просмотру демонстрации в Axure (чтобы разглядеть все детали, лучше использовать полноэкранный режим):
Для тех же, кто больше привык читать о развитии проектов в текстовом виде, наш рассказ ниже.
Примечание: Новый интерфейс в данный момент находится в стадии тестирования и не выложен на сайт, поэтому пока что «пощупать» его вживую не получится.
Что изменилось
Как мы писали в прошлом посте, цель создания «Авиагика» заключается в том, чтобы дать пользователям большую свободу в плане выбора настроек путешествий («как ингредиенты пиццы»).
С помощью графического интерфейса, ключевыми элементами которого являются круги-ингредиенты, путешественник может задавать различные комбинации перелета — устанавливать точное время вылета, аэропорт прилета, планировать пересадки в интересных городах, а также видеть изменение цены билета на лету и фиксировать понравившиеся варианты с помощью специальной иконки замка.
Первый прототип сервиса выглядел следующим образом:
Многим читателям наша идея «кругового» интерфейса понравилась, однако были озвучены и моменты, которые в первом прототипе мы не учли.
Строка выдачи
Прежде всего, оказалось, что не всем пользователям было очевидно назначение того или иного элемента интерфейса. Многие просто не понимали, что в «Авиагике» формирование параметров билета идет слева-направо — сначала выбирается город вылета, подстраивается дата, затем определяются города пересадок, а затем предоставляется информация о времени прилета и пункте назначения.
Для того, чтобы выделить данные по выбранным в данный момент параметрам рейса была создана «строка выдачи» — линия подсветки в середине экрана, которая фокусирует внимание пользователя на тех «ингредиентах» перелета, которые он выбрал:
Кроме того, мы сделали то, что уже давно напрашивалось — подписали сами колонки выдачи. Теперь с первого взгляда на экран понятно, где расположена информация по дате вылета, где указаны города пересадок, а где данные по дате и месту прилета.
Календарь с подсказками
В прошлой версии интерфейса было не очень удобно сравнивать цены на билеты в конкретные дни — а ведь часто путешественнику не столько важен день, сколько цена поездки. Поэтому мы добавили в верхнюю часть интерфейса специальный календарь, показывающий, в какой день лететь дешевле.
В ячейке конкретного числа представлена фоновая гистограмма, показывающая уровень цен на билеты в этот день:
По клику на пиктограмму самого календаря открывается новое окно, с помощью которого можно еще подробнее видеть разницу в ценах по числам:
В будущем мы планируем добавить в календарь функцию отображения погоды, чтобы путешественники могли выбирать самые выгодные перелеты в ясную погоду.
Отзывчивые элементы интерфейса
Теперь важные элементы интерфейса стали более отзывчивыми — по клику на колонку с пересадками, датой прилета или аэропортом назначения открываются дополнительные меню, в которых показывается информация, не поместившаяся в первоначальную колонку:
Плюсом такого решения стала возможность размещения в этих дополнительных меню полноценных фильтров, помогающих гибко настроить перелет без необходимости тыкать мышкой в маленькие круги основного интерфейса.
Маршрутный «градусник»
В комментариях к первому материалу некоторые пользователи указывали на то, что не смогли увидеть элемент, который мы называем «градусником», с информацией о выбранном маршруте.
Раньше он был довольно бледным и располагался в верхней части экрана. Теперь же он более заметен и располагается внизу, поскольку обращаться к нему нужно не так часто, как к тому же календарю:
Дальнейшие планы
«Авиагик» все еще находится в стадии прототипа, поэтому мы по-прежнему будем рады любой обратной связи и комментариям, относительно выбранных нами интерфейсных решений. По результатам обсуждения данного материала в проект будут внесены финальные изменения, и он будет запущен в «боевую» эксплуатацию.
На сегодня все, спасибо за внимание! Не забывайте подписываться на наш блог.
Комментарии (53)
Evgeny42
29.04.2015 11:39+1Запросил приглашение на сайте. А на почту мне написали, что пригласят когда сайт откроется.
Забавный у вас тестовый полет.
aviArt Автор
29.04.2015 11:50Для доступа на сайт воспользуйтесь пожалуйста промо-кодом, который был указан в прошлой статье: HA9HCIN
Evgeny42
29.04.2015 13:23Спасибо, зарегистрировался.
Попробовал попользоваться. Страница результата, на мой взгляд очень запутанная. Специально не пытался разбирать статью, чтобы можно было оценить юзабилити.
На одних кружках дата, на других время, на третьих трехбуквенные названия аэропортов, без их полных названий.
Дуги какие-то, круги. Больше похоже на неправильный рисунок планет и их спутников. Кнопки снизу, которые не похожи на кнопки. Серый цвет всего интерфейса. Замочки на окружностях не ясно для чего. Не ясно как искать и бронировать билеты на двух людей сразу. Ну и прочие вещи, которые по мелочи делают интерфейс слишком не очевидным.
В общем, не понравилось, потому что не удобно. Но цены находит хорошие :)
dude_sam
29.04.2015 11:48+2Вот нигде нет такой функции, как расписание всех рейсов из города (для всех возможных аэропортов) по дням недели.
К примеру, ищу на конкретную дату вылета и выдача предлагает вариант с пересадкой, а оказывается есть прямой рейс, но в другой день недели.
Удобно было бы видеть при выборе направлений подсказку, что рейсы не ежедневные. Ну или просто в выдаче результата ремарку, что на соседние даты есть прямые рейсы.
ArjLover
29.04.2015 21:49Присоединяюсь. Опять же когда не важны даты, а улететь хочется изящно и напрямую, то начинается пробивка недели — когда там рейсы есть и есть ли вообще? А потом еще обратный надо найти. Когда 1-2 раза в неделю летает — это как-то утомляет.
Vorchun
29.04.2015 12:08Из видео я не понял как выбрать маршрут БЕЗ пересадок.
SashaTregub
29.04.2015 12:37+1Сейчас это решается чекбоксом в фильтре настроек «Без пересадок» habrastorage.org/files/b7a/17e/53a/b7a17e53ae7544ae969b9079e459f26f.png
Если по результатам тестирования это решение окажется неочевидным, выделим его понятнее и активнее.
Спасибо за комментарий )
roller
29.04.2015 12:37+2Подскажу типичный юзкейз.
Я хочу найти все направления к морю, где вода на ближайшую неделю (либо в выбранные даты по среднегодовой статистике) больше 19 градусов, чтобы это находилось в европе, чтобы можно было выбрать нужна/не нужна виза, ну и естественно отсортировано по цене.
norlin
29.04.2015 13:12Попробуйте глянуть www.agenda.travel/wizard — проект «мёртвый», но в плане поиска вроде бы работает.
colix
29.04.2015 13:08А кнопка с сердечком снизу это лайки маршрута или что?
SashaTregub
29.04.2015 13:19+1Да, пользователь может запомнить удачный вариант перелета и с легким сердцем искать более удобный )
Ag47
29.04.2015 14:38Все-таки более стандартной практикой является Избранное и соответсвенно звездочка, нет?
norlin
29.04.2015 13:11Простите, я не совсем про интерфейс, но близко. Понимаю, что это тестовая версия, и всё такое, но мало ли…
Сделал поиск – «ничего не найдено».
Нажал ещё раз «Найти» – выдало результаты.
Потыкал всякое разное, сходу непонятно (я так понимаю, это всё ещё старая версия).
Нажал на логотип слева вверху — перекинуло на главную страницу, все настройки сбросились. Вернуться назад не получилось…Aviator360
29.04.2015 16:46+1Да, это старая версия интерфейса, привязанная к работающему поисковому движку. При интеграции новой версии мы дошлифуем эти моменты. Спасибо за комментарий )
darthslider
29.04.2015 13:51Потыкал 3 минуты и заметил один момент. Мне нужно вылететь, допустим 10 мая вечером, что бы 11 утром быть на месте. Таким образом время вылета, актуальное для меня это с 19:00 10 мая по 3:00 11 мая. Что бы проверить билеты на это время через ваш сервис мне нужно выбрать сначала вилку 19:00-24:00 10 мая, после чего руками выбрать 11 мая и сместить вилку на 0:00-3:00. Не слишком-то удобно.
Даже хуже того, при выборе даты мне предлагают рейс в 0:30 и 22:30 и на первый взгляд может показаться, что разница между рейсами 2 часа, а не двадцать.
Вообще вот этот момент очень тонкий, я один раз взял билеты на 0:30 и только спустя сутки осознал, что я вылетаю на сутки раньше, чем хотел. Думаю такие ошибки случаются довольно часто.darthslider
29.04.2015 13:57И да, вариант +-3 дня с целью уменьшения цены билета либо отсутствует, либо хитро спрятан. При нажатии на круг с датой появляются только 2 соседних дня, думаю стоит добавить еще как минимум по 2 дня в обе стороны. На anywayanyday это решается таблицей дата вылета туда/обратно, очень удобно. Далеко не всегда изменение только одной из дат снижают цену, зачастую надо смещать обе.
darthslider
29.04.2015 14:04Так же звёздочка с цифрой ноль изначально выглядит очень странно, совершенно не понятно, что это закладки. Выглядит как «маршрут который вы смотрите имеет рейтинг 0 звёзд, не стоит туда лететь» или что-то подобное.
Так же, вот я смотрю билеты туда-обратно. При этом у меня куча настроек «туда», но я нигде не могу найти детали для «обратно»:
habrastorage.org/files/bc9/eb7/91f/bc9eb791f6994e0aac6c285f54f757f7.png
Пока я не нажал «бронировать» я даже не был уверен, что это точно в обе стороны и цена за 2 перелёта.
SashaTregub
29.04.2015 17:132 дня по обе стороны у нас в тестовой версии, в будущем у нас будет широкий диапазон дат.
Комментарий про то, что избранное выглядит непонятно учтем.
Граничное время рейсов между сутками — действительно непростой момент, будем тестировать и изменять интерфейс, если проблемы таки возникнут.
Спасибо за комментарии и советы!
Grammidin
29.04.2015 15:01Для сравнения искал билет до Барселоны на трех сайтах.
Лично мне(повторюсь, личное мнение) совсем не удобно было пользоваться «продвинутым» интерфейсом. Зашел на другие сайты, там тупо вводишь откуда, куда, диапазон дат — и система отображает список вариантов в виде обычного списка(можно искать с пересадками и без).
И выглядит классический вариант намного удобней.
Меня все эти кружки вводят в ступор. Какое-то время пришлось разбираться, что вообще к чему. А будет ли случайно зашедший пользователь разбираться?
Был ли «профит» от того, что я разобрался в этом интерфейсе? Нет. Больше возможностей не появилось.
Установка «без пересадок» кружком не удобна. Результаты поиска представлены не удобно. Имхо, перемудрили…SashaTregub
29.04.2015 17:17Интерфейс действительно непривычный, мы это понимаем. Но он дает больше контроля над выбором рейса, чем традиционный интерфейс, поэтому мы в него верим.
Спасибо за мнение )
ArjLover
29.04.2015 21:55+1Если нужно просто одному улететь из default city в другой банально популярный сити на две недели, то действительно можно смело идти прямо в кассу. Если же хочется полетать по Европе, в пересадках подобрать друзей в одном аэропорту и никому долго не ждать и дальше полететь вместе, а потом еще успеть где-то утром на поезд, то нужен интерфейс куда можно забивать все эти условия. Все зависит от цели.
KEKSOV
29.04.2015 15:59А мне томат…
Часто хочется подзависнуть в городе пересадки на денек другой. Каждый раз приходится открывать тыщу страниц с различными вариантами на каждый отрезок пути…SashaTregub
29.04.2015 17:19Интересная мысль — предлагать отдельный пункт маршрута, как длинную пересадку, спасибо )
darthslider
29.04.2015 17:23+1Стоит отдельно уточнять, если в пункте длинной пересадки нужна виза. Я тут было обрадовался 8 часовой пересадке в Дубае, а потом выяснил, что без визы из Аэропорта не выйти. В Гуаньчжоу же дают 72 часовую транзитную визу, например.
Так же стоит обратить внимание, что долгая пересадка ночью уже не так интересна. Еще, какие-то авиакомпании дают бесплатно отель при долгой пересадке, а какие-то нет. Если это можно как-то уточнять и показывать дополнительно — было бы великолепно.at0mic
29.04.2015 17:34Стоповер авиакомпании, предлагающие перелет со стыковками, как правило, стараются не предлагать.
А если брать сегменты отдельно, то выходит, как правило, дороже.
Есть смысл так искать на лоукостерах, но их в этой системе нет.darthslider
29.04.2015 17:41Я просто как-то летел из Манилы в Москву через Гуаньджоу и у нас была пересадка часов 18. Я был морально настроен найти какое-нибудь жилье по прилёту и был искренне удивлён когда нас заселили в гостиницу. Авиакомпания China Southern Airlines. При этом рейс был одним из самых дешевых на те даты.
ArjLover
29.04.2015 22:03Здесь все зависит от цвета паспорта, то есть от гражданства. И бывают очень, ОЧЕНЬ хитрые правила в тиматике, такие хитрые что лучше и не связываться с их автоматической интерпретацией.
darthslider
30.04.2015 10:19Да, тут вы правы конечно. Есть ведь счастливые обладатели паспортов, которые слово «виза» слышат очень редко )
Aviator360
29.04.2015 17:58Часто хочется подзависнуть в городе пересадки на денек другой
С этой идеи и начался наш проект :)
По вашей проблеме «Рейсов по этому маршруту не найдено». Система бронирования не смогла найти рейсы полностью по этому маршруту. Мы вот-вот запустим функционал самостоятельной стыковки сегментов, и рейсов по сложным маршрутам станет сильно больше. Stay tuned! :)
z0rg
29.04.2015 18:09Что делать тем кто уже зарегистрировался и хочет посмотреть изменения, но не помнит пароль?
aviArt Автор
29.04.2015 18:19Отправил инструкцию по восстановлению пароля личным сообщением.
Но на самом деле, в демо-версию изменения еще не вносились. Пока новый интерфейс существует только в прототипах и описан в статье. :)
kobiak
30.04.2015 02:13Попробовал найти билет до Мельбурна из Окленда, не удалась…
Пробуем искать билет из Окленда в Москву. Система выдала два варианта, интуитивно не очень понятно как и что выбирать в этих кругах, немного запутанно. Всё таки список из цены, время перелета и пересадок немного удобней.
реквестую следующее:
Выбираем пункт отправления и диапазон дат + цену до + регион прилета = все направления и цены на карте для наглядной визуализации.
Иногда, когда хочется в отпуск и отдохнуть где-то у моря, имея определенный бюджет, глаза разбегаются и тратиться очень много времени выбирать определенные страны по одной и запоминать, записывать цены. А сервис отображающий цены (все цены) в регион из пункта выбранного, был бы очень уместен. Нечто подобное есть у авиасайлс, но там указаны не все цены (направления), приходится всё равно в ручную очень много кликать :(
AxMuha
30.04.2015 02:16-1Надо разграбить его, и в пустых местах ещё побольше подсказок написать, и тогда отлично можно продать в Китай, они такое любят
sphinks
30.04.2015 14:00Зашел, посмотрел, а где все то что в ролике было? Или это ваш внутренний прототип который на сайт не выложили?
Aviator360
30.04.2015 14:05Да, версия из ролика пока существует лишь в прототипе. Следующим этапом мы раскрасим прототип и интегрируем интерфейс в проект.
KEKSOV
30.04.2015 14:01Кстати, если не секрет, где вы берете данные по рейсам и ценам, и сколько это вам стоит?
at0mic
30.04.2015 14:08В прошлом посте писали ребята, у них обычные договоры с авиакассами и GDS. Т.е. цены, в общем-то, такие же, как и везде.
Aviator360
30.04.2015 14:10Мы напрямую или через партнёров подключены к основным системам бронирования (3 зарубежных GDS, 1 российская), пользуемся результатами от Google/ITA, планируем дальше подключать системы бронирования авиакомпаний-дискаунтеров.
Стоимость озвучить не могу, т.к. условия индивидуальны по каждой системе бронирования.at0mic
30.04.2015 14:21+1Я могу озвучить стоимость подключения к travelfusion, 2k евро в год + 2 евро им платить за каждую бронь.
DnAp
03.05.2015 00:22Вот посмотрел я на этот интерфейс и коментарии, и у меня возник вопрос.
А это ли нужно пользователю? Куча форм и галочек… Может, лучше узнать что он хочет? Вроде «гуру» в яндекс маркете.
Вы в Москве?
Хотите полететь в…
А когда?
Дата принципиальна? Если полететь на день позже то можно сэкономить до n$ и k часов.
Хотите задержаться в транзитном пункте на денек?
Ну и все в этом духе.
darthslider
08.05.2015 12:05Цены у вас и правда не плохие. По крайней мере ниже конкурентов. Но всё равно, оказалось, что зайти на сайт авиакомпании и купить билет сразу там вышло на 5% дешевле.
TimsTims
Всё круто, но как ваш сайт работает с мобильными браузерами?
Такой большой и информативный интерфейс весь не влезет ведь. Как решили эту проблему?
SashaTregub
Сейчас мы запускаем и тестируем десктопную версию сервиса. Мобильный интерфейс сохранит концепцию настройки взаимозависимых параметров перелета, но, вероятно, без кругов.