В прошлом топике мы рассказывали о том, как наш проект «Авиагик» решает распространенные интерфейсные проблемы авиасервисов. Проект находится в стадии прототипа, поэтому обратная связь для нас ценна, как ничто другое. Аудитория Хабра нас не подвела — материал получил большой отклик и собрал более сотни комментариев, авторы которых высказывали свои пожелания к интерфейсу и говорили о том, какие решения им показались не самыми удачными.
Мы тщательно проанализировали полученные отзывы, создали новую версию интерфейса и сегодня представляем вашему вниманию финальный прототип «Авиагика» перед непосредственным запуском сервиса.
Новый интерфейс
Для наиболее наглядной демонстрации изменений мы записали специальное видео — все перемены в интерфейсы в нем не только показываются, но и объясняются. Поэтому те из читателей, кто больше любит смотреть видеотуториалы, чем читать статьи, могут сразу перейти к просмотру демонстрации в Axure (чтобы разглядеть все детали, лучше использовать полноэкранный режим):
Для тех же, кто больше привык читать о развитии проектов в текстовом виде, наш рассказ ниже.
Примечание: Новый интерфейс в данный момент находится в стадии тестирования и не выложен на сайт, поэтому пока что «пощупать» его вживую не получится.
Что изменилось
Как мы писали в прошлом посте, цель создания «Авиагика» заключается в том, чтобы дать пользователям большую свободу в плане выбора настроек путешествий («как ингредиенты пиццы»).
С помощью графического интерфейса, ключевыми элементами которого являются круги-ингредиенты, путешественник может задавать различные комбинации перелета — устанавливать точное время вылета, аэропорт прилета, планировать пересадки в интересных городах, а также видеть изменение цены билета на лету и фиксировать понравившиеся варианты с помощью специальной иконки замка.
Первый прототип сервиса выглядел следующим образом:
Многим читателям наша идея «кругового» интерфейса понравилась, однако были озвучены и моменты, которые в первом прототипе мы не учли.
Строка выдачи
Прежде всего, оказалось, что не всем пользователям было очевидно назначение того или иного элемента интерфейса. Многие просто не понимали, что в «Авиагике» формирование параметров билета идет слева-направо — сначала выбирается город вылета, подстраивается дата, затем определяются города пересадок, а затем предоставляется информация о времени прилета и пункте назначения.
Для того, чтобы выделить данные по выбранным в данный момент параметрам рейса была создана «строка выдачи» — линия подсветки в середине экрана, которая фокусирует внимание пользователя на тех «ингредиентах» перелета, которые он выбрал:
Кроме того, мы сделали то, что уже давно напрашивалось — подписали сами колонки выдачи. Теперь с первого взгляда на экран понятно, где расположена информация по дате вылета, где указаны города пересадок, а где данные по дате и месту прилета.
Календарь с подсказками
В прошлой версии интерфейса было не очень удобно сравнивать цены на билеты в конкретные дни — а ведь часто путешественнику не столько важен день, сколько цена поездки. Поэтому мы добавили в верхнюю часть интерфейса специальный календарь, показывающий, в какой день лететь дешевле.
В ячейке конкретного числа представлена фоновая гистограмма, показывающая уровень цен на билеты в этот день:
По клику на пиктограмму самого календаря открывается новое окно, с помощью которого можно еще подробнее видеть разницу в ценах по числам:
В будущем мы планируем добавить в календарь функцию отображения погоды, чтобы путешественники могли выбирать самые выгодные перелеты в ясную погоду.
Отзывчивые элементы интерфейса
Теперь важные элементы интерфейса стали более отзывчивыми — по клику на колонку с пересадками, датой прилета или аэропортом назначения открываются дополнительные меню, в которых показывается информация, не поместившаяся в первоначальную колонку:
Плюсом такого решения стала возможность размещения в этих дополнительных меню полноценных фильтров, помогающих гибко настроить перелет без необходимости тыкать мышкой в маленькие круги основного интерфейса.
Маршрутный «градусник»
В комментариях к первому материалу некоторые пользователи указывали на то, что не смогли увидеть элемент, который мы называем «градусником», с информацией о выбранном маршруте.
Раньше он был довольно бледным и располагался в верхней части экрана. Теперь же он более заметен и располагается внизу, поскольку обращаться к нему нужно не так часто, как к тому же календарю:
Дальнейшие планы
«Авиагик» все еще находится в стадии прототипа, поэтому мы по-прежнему будем рады любой обратной связи и комментариям, относительно выбранных нами интерфейсных решений. По результатам обсуждения данного материала в проект будут внесены финальные изменения, и он будет запущен в «боевую» эксплуатацию.
На сегодня все, спасибо за внимание! Не забывайте подписываться на наш блог.
