{"id":7298,"title":"\u041a\u0430\u043a\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0431\u0435\u0440\u0443\u0442 \u0441 \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u0438 \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0435","url":"\/redirect?component=advertising&id=7298&url=https:\/\/vc.ru\/finance\/287640-predstavte-chto-vy-dolzhny-vernutsya-na-20-let-nazad-v-proshloe-kakie-sovremennye-tehnologii-zahvatite-s-soboy&placeBit=1&hash=4693aaf51fe37b122309350bd15ef7991e11843fbc9183a8a592e9af3c9af557","isPaidAndBannersEnabled":false}

История о том, как создать дизайн-систему сайтов аэропортов для пассажиров

Мы, digital-агентство Uplab, занимаемся разработкой и продвижением сайтов для компаний-лидеров рынка.

Последний год мы работаем над сайтами крупных региональных аэропортов.

В начале осени 2018-го года мы запустили новый сайт международного аэропорта Екатеринбурга — «Кольцово». Зимой — Ростова-на-Дону «Платов». Уже в 2019-м году: аэропрта Самары «Курумоч», Нижнего Новгорода «Стригино» и сайт аэропорта Нового Уренгоя, сделанные по одной дизайн-системе. Подробнее — в кейсе на Behance.

Клиент

«Аэропорты Регионов» — ведущий аэропортовый холдинг России. В него входят международные аэропорты нескольких городов-миллионников:

  • «Кольцово» Екатеринбурга;
  • «Курумоч» Самары;
  • «Стригино» Нижнего Новгорода;
  • «Платов» Ростова-на-Дону.

Также управляющая компания реализует проекты строительства нового аэропорта Саратова и модернизации аэропортов Петропавловска-Камчатского и Нового Уренгоя.

По итогам 2018 года услугами аэропортов холдинга воспользовалось 15 млн 263 тысячи пассажиров.

Причины редизайна

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

Аэропорты холдинга по-настоящему современные. Например, «Платов» первый в России получил пять звезд Skytrax — самого влиятельного рейтинга аэропортов в мире.

Поэтому сайты должны были соответствовать современному и высокому уровню самих аэропортов.

Решения

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

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

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

Пример тех же аэропортов на десктопах:

Сейчас формируется тренд — на главной странице сразу предлагать два самых распространённых пользовательских сценария: «Прилёт» и «Вылет». А остальную информацию помещать на следующие уровни, выдавая постепенно, по запросу.

Главная

Было:

Стало:

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

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

На первом же экране аудитория разделяется на пассажиров и партнёров:

Далее — на тех, кого интересуют вылеты, и тех, кого интересуют прилеты:

На первом экране появляются лишь самые необходимые пассажирам сервисы:

  • табло;
  • сезонное расписание;
  • как добраться;
  • парковка;
  • схема аэропорта.

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

Табло

В первом релизе информацию в разделе «Табло» на мобильных устройствах надо было свайпить.

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

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

Как добраться

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

Крупные карточки содержат подробные данные о рейсах: номер маршрута, расписание, время в пути, перечень остановок.

Реклама на сайте

Сайты для «Аэропортов Регионов» — в первую очередь решают задачи пользователей, а не продают что-либо. Реклама дополнительных услуг выполнена нативно и ненавязчиво, в рамках общей дизайн-концепции.

Сезонное расписание

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

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

Этот раздел тоже вынесен на главную. Так выглядит главная страница сайта аэропорта Нового Уренгоя:

Итог

Первый сайт из серии «Кольцово» уже получил несколько наград на отраслевых конкурсах: «серебро» в номинации «Инклюзивность и дизайн для всех» и «бронзу» в номинации «Сайт в сфере транспорта» на «Золотом сайте». А на премии Tagline сайт стал вторым в «Лучшей интеграции» и третьим в главной номинации «Лучший сайт года».

Агентство и команда клиента продолжают развивать эту дизайн-систему.

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

Все сайты, опубликованные на данный момент:

{ "author_name": "Дмитрий Глумов", "author_type": "self", "tags": ["\u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d","\u0430\u0432\u0438\u0430"], "comments": 28, "likes": 42, "favorites": 86, "is_advertisement": false, "subsite_label": "design", "id": 70217, "is_wide": true, "is_ugc": true, "date": "Tue, 04 Jun 2019 12:10:39 +0300", "is_special": false }
0
28 комментариев
Популярные
По порядку
Написать комментарий...

Много мелких косяков и спорных решений по части интерфейса (мало функциональная шапка на 50% экрана, расположение важного контента на странице, механика некоторых элементов, банальные ошибки и так далее). Масса моих знакомых включая меня самого, что от старого сайта аэропорта стрелялась, что от нового (речь про Кольцово), всё это напоминает выжимку трендов небрежно собранных воедино.

8

Открыл сейчас сайт Кольцово — лично мне всё понятно и любой сценарий, который бы этот сайт для меня должен был решить, решается в пару кликов. Что с ним не так?

4

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

Зашел еще раз, вспомнил что выбесило. В таблице прилетов/вылетов ожидаемое время по расписанию/фактическое с указанием даты просто в ступор ввело. Так и хочется дату за фактическое время принять. Зачем вообще везде дату писать? Ну хотя бы на сегодня уберите ее ред.

0

Довольно сложно сделать так, как Вы говорите, видя цифры 10:50, а под ними 04.06. Сложно угодить специфическому восприятию каждого отдельного человека — приходится выбирать то, что подходит большинству. В данном случае вроде всё норм.

2

Блиц-опрос: во сколько вылетает самолёт?

0

Очевидно, что в 45:07. Вы странный.

3

А теперь объясните, зачем повторять эту информацию по 2 раза?

0

Но ведь вчера сегодня было завтра. А завтра сегодня станет вчера.

0

в 7 часов 6 минут. 45 апреля ред.

1

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

0

А можно подробнее про исследования? Что, как и какими методами делали? И как мерили инклюзивность дизайна?

3

Илья, подробно в комментариях тему исследований раскрыть не представляется возможным. Вероятно, это тема для следующей статьи. Если коротко, то данные на основе открытых источников, данные собранные собственными seo-аналитиками, данные Google Analytics более десятка разных сайтов аэропортов, доступом к которым мы располагаем. Были и юзабилити-тестирование пользователей и тестирование структуры методом карточной сортировки. Что касается инклюзивности, то отдельно, как параметр, мы его не мерили, но, если речь про версию для слабовидящих, то она реализована с привлечением соответствующей экспертизы.

2

Исследовали как он выглядит на iMac 27" с расстояния 3 метра, видимо.
На 21" мониторе - красивое, но бесполезное говно. В плане полезности - на порядок хуже старого уродливого сайта.

1) На первой странице рейсы... не поместились. Только неграмотная надпись "Онлайн-табло" (чем "Рейсы" и даже просто "Табло" не угодили?) на 3/4 экрана.
2) Поле для поиска рейса хрен увидишь. Ну, спасибо хоть не display: none в качестве оформления.
3) Поиск не ищет по совмещёнными рейсам. На фотке - AF-4611 вылетает в 12.00. На старом, кстати, ищет.
4) Из-за группировки совмещённый рейс "глазами" и по Ctrl+F тоже не найти, нужно "разворачивать" группировки. С чартерами время которых "где-то завтра" нужно разворачивать все группировки.
5) Популярный бред про использование кук. Люди, зачем?! Мы не в Евросоюзе!

Тестировщики, похоже, самолётами не летают. ред.

1

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

1

Почему никто не берется переделать сайт для Домодедово?)

2

Спасибо за идею, реально классный сайт в плане "было/стало" ибо сделать хуже практически нереально :D

0

Отличный концепт. Я не так близок к UX/UI, но с точки зрения обычного пользователя это как глоток свежего воздуха. Уже порядком поднадоел тренд на цифровой "евроремонт": разные скргуления и кислотные раскраски стартовых страниц, а так же желание впихнуть на стартовую страницу все что можно и нельзя.

2

Сценарий для встречающих не проработан вообще. Один и тот-же рейс в старой и новой версии сайта, открываю с телефона.

Было: фактическое время отправления, состояние выдачи багажа, вся информация на одном экране
Стало: время отправления по графику, багажа нет, обновляешь страницу листаешь до статуса

И это только одна мелкая страничка.
Если самолет уже сел, то на табло информация о нем скрывается под абсолютно незаметную кнопку "Показать прибывшие рейсы". Там-же почему-то по умолчанию прилет, а не вылет, было наоборот.
Имхо сайт делали дизайнеры, сделали красиво, а вот про пользователей забыли.

1

Действительно, отдельный раздел "Встречающим" не вошел в финальный вариант проекта в ходе обсуждения на стороне Заказчика, так как он по содержанию дублирует другие разделы.
А вот багаж отсутствие в карточки багажа – технологическое ограничение.
Справедливое замечание про статус, в следующем релизе табло будет существенно доработано и статус будет сразу.

0

Выглядит сочно. Поделитесь метриками / конверсиями в формате было/стало?

0

Общее увеличение глубины просмотра на 30%.
Общая посещаемость выросла на 7%.
В разделах: онлайн-табло, главная, парковка, партнерам, об аэропорте, новости, еда и покупки в аэропорту, бизнес залы, схема аэропорта, поиск – средний рост посещаемости составил 396%
Глубина просмотра выросла на 30%
Показатель времени на сайте снизился на 9%, снижение посещений страницы поиска на 28%, что связано с более быстрым поиском нужной информации.
_____
Период: апрель '18 – апрель '19

2

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

0

По вашему редизайн не может повлиять на конверсию? Я правильно вас понял?

0

По-моему этот пост уже был здесь

0

Тоже видел

0

Ярослав, значит, кейс запомнили. Тот материал провисел час всего.

0

"Мы занимаемся разработкой и продвижением сайтов для компаний-лидеров рынка". Норм позиционирование!

0

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

0
Читать все 28 комментариев
Как сделать рынок лома прозрачным: рассказывает QIWI Business

Делимся опытом создания платежной инфраструктуры для целой отрасли

Oppo начала разработку собственного процессора для смартфонов — Nikkei Статьи редакции

Компания станет последним из крупнейших производителей смартфонов, которые перешли на собственные чипы.

Шпаргалка для инвестора: главное о ETF

Рассказываем основные принципы инвестирования в ETF.

Мемы и поездки вместо зубрежки: как изменилась профессия репетитора

Николай Иванченко — молодой преподаватель, ему всего 26 лет. Уже больше пяти лет он работает репетитором в Калининградской области и готовит школьников к ЕГЭ по истории. Ко Дню репетитора он рассказал сервису Работа.ру, почему нужно менять систему преподавания и чем отличаются нынешние подростки от миллениалов.

Сделай сам: умная камера для наблюдения за питомцами

Обучаем нейросеть на котиках.

30 стартапов прошли в финал конкурса SaaS Factory Московского инновационного кластера

Конкурс SaaS Factory нацелен на поиск готовых инновационных программных решений для бизнеса и внедрение продуктов и сервисов в корпорации. Эксперты оценили 206 заявок, из них отбор прошли 30 стартапов. Теперь основателей технологических проектов ждет программа развития, где они смогут приступить к совместной работе над инновационными решениями с…

Что пугает в резюме?

Сейчас ищу технического кофаундера (подробнее тут: «Как найти кофаундера?»), получаю достаточно много писем и обращений самого разного содержания. Хотел поделиться впечатлениями, это не руководство и не критика.

Разбор: «Яндекс» действительно притворяется системным сообщением iOS на iPhone

Чтобы убедиться, так ли это, я решил открыть сайт одиозной компании «Яндекс» на компьютере в браузере Safari, включив режим отладки и используя «юзер-агент» iPhone. И проверить, действительно ли это системное сообщение или «Яндекс» имитирует системное сообщение iOS, используя фишинговый методы?

Личный фонд - новый способ оформления наследства

С 1 марта 2022 года появится возможность структурировать наследство с помощью личных фондов.

«Яндекс.Маркет» добавил в приложение просмотр 3D-моделей крупной бытовой техники в режиме дополненной реальности Статьи редакции

Можно посмотреть, поместится ли она в комнате.

null