Лого vc.ru

Редизайн: Создаем сервис по поиску авиабилетов

Редизайн: Создаем сервис по поиску авиабилетов

ЦП продолжает цикл материалов, посвященных редизайну сайтов и приложений популярных сервисов. В новом выпуске рубрики ЦП попросил UX-экспертов digital-агентства Uprock разработать современный и удобный сервис для поиска авиабилетов.

Поделиться

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

Всего было проанализировано около 30 компаний, занимающихся продажей онлайн-авиабилетов: aviasales.ru, buruki.ru,  kayak.ru, momondo.ru и другие. Сделали соответствующие выводы, выписали все фишки и приступили к следующему шагу.

Название

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

Прототипирование 

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

На данном этапе большая часть решений — это гипотезы, которые мы делаем на основе своего опыта и конкурентного анализа.

Главная страница 

Первым делом мы задаем себе вопрос, для чего заходит пользователь на страницу, и получаем логичный ответ: «Купить билет». Хорошо, что еще косвенно ему может быть интересно? Выдвигаем гипотезу, что, вероятно, это скидки и популярные направления, а также подписка на интересные предложения. Возможно, что-то еще, но пока остановимся на этом, чтобы не перегружать страницу.

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

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

Было бы неплохо местом отправления считать город, в котором я сейчас нахожусь. Добавляем эту фишку — потом уже на тестировании с реальной аудиторией мы сможем понять, хорошо это или плохо.

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

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

Страница поиска 

На этой странице пользователя обычно заставляют находиться до 20 секунд, пока идет поиск по базе данных. Для пользователя это время тянется бесконечно, и он будет признателен за любую интересную релевантную информацию. Странно, но мы не нашли вариантов, когда эту страницу используют эффективно. 

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

Выдача результатов 

Эта страница представляет собой массив данных, который обрабатывается фильтрами. Основное, что нужно уметь для отрисовки таких страниц — умение работать с акцентами, чтобы подача информации была негромоздкой. Из фишек: добавили сортировку по результатам и пиктограммы на результатах (например, ночной рейс или нет питания).

Фильтрацию сделали по аналогии с другими сервисами — здесь сложно придумать что-то кардинально новое, легче испортить. 

Одна из фишек этой странице — правый сайдбар. Сюда вынесли всю дополнительную информацию, которая уже была на странице поиска.

Оформление билета 

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

Далее следуют поля с личными данными и сумма платежа, выбор способа оплаты. Сюда же можно добавить опциональную информацию, размер багажа, страхование, льготные программы.

Резюме

Особо хотелось отметить aviasales.ru — из проанализированных конкурентных сервисов у них сильные маркетинговые решения. Было бы интересно узнать у читателей, каких функций не хватает в существующих на рынке решениях.

Статьи по теме
Редизайн: Каким мог бы быть сайт Российских железных дорог09 октября 2014, 09:33
Редизайн: Сайт «Студии Артемия Лебедева» на современный лад03 декабря 2014, 10:32
Редизайн: Каким мог бы быть сервис для поиска жилья CIAN15 октября 2014, 14:47
Редизайн: Каким мог бы быть сайт журнала о путешествиях «Вокруг света»13 ноября 2014, 15:25
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Ага, мне тоже. Синий немного давит, а так вполне пристойно.

0

Честно, посмотрел только картинки :) Может вы и объяснили в тексте почему у вас самолёты летают по кривой (Мск-Варшава почти через Киев), может он действительно так и летает, но это чисто визуально давит на моё подсознание. На всех сайтах летают по прямой, ну ок по дуге, но не через полпланеты. И этот момент стимулирует какие-то ненужные размышления :) ИМХО, разумеется. А так все чисто, ровно, молодцы.

И еще, создаётся впечатление, что самолёту тяжко лететь первую половину пути (по красной-то линии), а потом по синей половине вжик и за полчаса долетает :)

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

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

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

Заодно инвертировалась и традиционная последовательность Куда - Когда: календарь выше прочих параметров, так что как минимум день первого вылета естественно отметить в первую очередь. Это само по себе в плане удобства бонусов не дает, но выделяет на общем фоне.

А можно наших апроковцев попросить нарисовать свой вариант, скажем, для сайта карьеры? Переделать HH или SJ, а лучше всего свое видение предложить.

0

вчера видел, только это лендинг, детали посмотреть не удалось

0

Это не "только лендинг" - как минимум переработанная структура навигации + вывод наиболее актуальных уведомлений на главную.

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

0

Добрый день, вы могли бы уточнить цель редизайна?

0

Хотелось бы посмотреть как вы реализуете UX. Почему на главных страницах нет объявлений? Почему я должен обязательно что-то вводить в строку поиска? Почему я не могу прийти и начать тыкать на вакансии сразу? Подразумевается, что человек знает что ищет? Далее, какое оптимальное кол-во информации о вакансии лучше показывать в результате поиска? Я понимаю, что это узнается опытным путем, но все же.

Кстати, может этот интерфейс для билетов получится подогнать под сайт карьеры?

0

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

Одним из любимых ресурсов, которым регулярно пользуюсь для поиска сотрудников это brainstorage.me/

Понятная и простая структура.

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

Насчет брейнсториджа, интерфейс слишком простой. Не видно нужной информации сразу. По мне, формат подачи информации неверный. "Талантливый Android-разработчик" это не вакансия, а мечта. Один словом, мой вопрос из предыдущего поста - оптимальное кол-во информации о вакансии.

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

1. Погодите. Где на главной "объявлений нет"? Прямо с ходу показывается список вакансий под конкретно ваше резюме (если оно заполнено), ниже есть каталог по профессиям. Это я про редизайновую версию.

Да, в каталоге придется сделать пару кликов, чтобы сузить выборку до конкретно вашей профессии. Но нефильтрованая лента вакансий (как на brainstorage) бесполезна - там будет слишком много посторонних вакансий продавцов салонов связи или операционистов банка.

2. Поиск эффективнее методичного просматривания вакансий - на большой базе, когда их тысячи. Тут картина сравнима с развитием навигации по интернета. Yahoo с Апортом тоже начинали с каталога интернет-ресурсов. Но потом пришли чистые поисковики типа Google и Яндекса их забороли.

Конечно, да, чтобы пользоваться поиском действительно надо понимать, что вы ищете. Но повторюсь, есть функция автоматического подбора вакансий под ваше резюме - думать вообще не надо ;)

3. В выдаче поиска сейчас есть компания, город (метро) и зарплата. Плюс однокликовые фильтры, чтобы отсеять формальные условия-галочки, например, парт-тайм. Это все, что имеет фиксированную форму: кроме этого в вакансии только текст (в произвольной форме).

0

Неплохо получилось. Но цвета напоминают авиасейлс)

0

aviasales.ru, buruki.ru, kayak.ru, momondo.ru - эти сайты не продают билеты, не вводите в заблуждение. Это мета поиски, которые пока только сравнивают и передают партнерам. кроме каяк, он и сам продает между делом.

Хорошо-то как. И нейминг.

Нейминг хорош, но на такую игру слов уже обратили внимание ребята из этого сервиса: www.trevolta.com/

Траволта - класс!

0

Очень не хватает возможности вводить пункты пересадок и указывать время нахождения в этих пунктах.

Согласен, что они нужны. Эти пункты можно реализовать дополнительными фильтрами в левом сайдбаре.

0

Путать будут в смысле.

0

"Так как мы делаем продукт для себя, то не будем заморачиваться..." - отличный подход, но он больше не работает. Может все-таки стоит немного заморочиться над потребностями, сценариями и пользователями?!
А комментировать тут даже нечего. Люди которые не делают сразу мобильный дизайн для тревела - это просто динозавры, а не дизайнеры.

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

Что понравилось, так это главная страница с картой и ценами.
Дизайн банален, как у всех.
Вторая страница с приблудами о погоде... Нет! Если мне нужна погода или новости, пока идет поиск, я зайду на эти страницы , открыв нужные вкладки.
Больше всего в современных сервисах бесит избыток информации. Я покупаю билет! Мне не нужен отель, прокат тачки и т.п.
Эти маркетологи достали со своими доп.продажами.
Хоть.бы стихи классиков придумали разместить или произведения живописи из виртуальных музеев мира. От шума на 2 странице тошнит. Это банально к тому же. И зачем мне погода в Риме сегодня? Я лечу через неделю или месяц!
В общем, довольно скучно все это. К тому же, почему-то ни слова про Skyscanner, хотя это одно из лучших решений.

0

Главная страница
1. Пользователь заходит на главную чтобы найти билет, для начала. Он будет долго искать и потом уже, может быть купит.
2. Не прорисовано, как выбирается дата, пассажиры и класс, а также что скрывается за «и рядом» у города
3. А мобиле форма, кажется, в один экран не влезет, это плохо
4. История не прорисована и ей уделено мало внимания
5. У карты цен задавать минимальную цену билета не вижу смысла – все хотят подешевле
6. Как карта цен выглядит на разных масштабах? У многих нет фильтрации пинов на разных масштабах и получается каша
7. Куда у карты цен на мобиле делись настройки?

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

Страница результатов поиска
9. Мне кажется, эта страница самая важная и сложная, здесь можно было бы показать разные варианты выдачи при билетах в одну/две стороны и сложных перелетах
10. Что кроется за «Показать все «АвиакомпаниЯ»»(тут наверное еще и очепятка)?
11. Аэропорты выбираются только для первого города из всех выбранных? Это, кстати, проще указать в самом начале
12. Ход с обратным направлением второго перелета никто не поймет, как не рисуй стрелочки
13. Либо можно выбрать несколько классов сразу, либо зачем показывать класс если он везде одинаковый?
14. Логотипам уделено много внимания, но выбирает ли народ билеты по авиакомпаниям?
15. Что происходит, когда кликаешь на билет? Сразу переход на страницу оплаты?
16. Нет must-have фичи – график цен +-3 дня
17. Блоки справа и вправду только отвлекают от главного, вам тут нужно билеты помогать выбирать, а не погоду смотреть

Страница «Оформление и оплата»
18. Как будут выглядеть пересадки?
19. Блок формы поискового запроса остался, наверное, это баг

А по поводу дизайна – похоже на очередной сайт, никаких крутых решений, из старых то не все.

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Johnny Vorony

Мне очень стыдно, коллеги, но до этой статьи я не знал кто такая Алена Владимирская.

Алёна Владимирская и оператор Wi-Fi в московском метро запустили проект с бесплатными карьерными советами
0
Арчибальд

Конечно! Некоторые не опускаются до ножей и кредиток,а строят свои капиталы на пирамидах!

PewDiePie сохранил лидерство в рейтинге самых высокооплачиваемых YouTube-блогеров по версии Forbes
0
Сергей Запухляк

Я разработчик уникального плеера ВК для Mac. Вчера попросил оставить использование API, готов был сделать плеер бесплатным, на что получил ответ:

Добрый день!

Мне очень жаль, но мы ничего не можем Вам предложить.

С уважением,
ВКонтакте

«ВКонтакте» закроет публичный доступ к аудиозаписям для сторонних приложений
0
Сергей Запухляк

Я разработчик плеера ВК для Mac. Вчера попросил оставить использование API, готов был сделать плеер бесплатным, на что получил ответ.

«ВКонтакте» закроет публичный доступ к аудиозаписям для сторонних приложений
0
Арчибальд

Нажрутся своих гамбургеров,а потом снашивают друг-друга в попы.

Рекламная война брендов фастфуда: кампании McDonald’s, Burger King, Pizza Hut и Subway
0
Показать еще