Новый сайт аэропорта Внуково: рассказывают разработчики
Привет от IT-компании Riverstart! Делимся опытом, как создали новый сайт для Международного аэропорта Внуково.
Проект завершен, а пока мы готовим полноценный кейс, поделимся с вами подведением итогов. Это отличный способ окинуть взглядом все, что было сделано, и оценить работу целостно.
Какие работы вошли в проект:
Собрали самое интересное из того, что мы сделали для создания понятного, быстрого и удобного сайта с множеством деталей, доступного для аудитории разных стран.
1. Прототипы и дизайн
Нам хотелось объединить физический аэропорт и веб-сайт в одну экосистему. Пассажир, который заранее спланировал маршрут на сайте, в самом здании сможет быстро сориентироваться по аналогичным указателям.
Для этого мы перенесли в дизайн сайта внутреннюю навигацию физического аэропорта, которую сделала студия Лебедева. Использовали те же цвета, иконки, шрифты, кнопки, отразили навигацию в структуре.
Если планируете выходить на такие масштабные проекты, готовьтесь к внушительным объемам работы и обсуждений.
Мы любим большие проекты, потому что они дают хороший буст к профессиональному развитию и мотивируют искать способы оптимизировать работу.
Наши дизайнеры ненавидят рутину, поэтому подбирают способы ускорить механическую работу и побольше покреативить. К примеру, используют дизайн-токены для быстрой связки дизайна и верстки. Для Внуково нужно было сделать 110 макетов с адаптивами и 45-50 шаблонов, с дизайн-токенами время на разработку дизайн-макетов ощутимо сократилось.
Если вам интересно, что это вообще такое и как работает, дайте знать в комментариях — подготовим материал про дизайн-токены.
2. Онлайн-табло
Онлайн-табло мы разработали так, чтобы было максимально просто воспринять информацию на бегу, в спешке и стрессе. Мы же сами бываем пассажирами, так что знаем, как бывает сложно ориентироваться в гейтах и стойках, особенно на ранних рейсах.
Внешнее оформление онлайн-табло тоже опирается на дизайн-систему внутренней навигации аэропорта и содержит пиктограммы, которые использованы на физических табло.
3. Карточка рейса
Из табло можно перейти на карточку конкретного рейса со всей информацией, которую нужно знать пассажиру.
Каждый рейс состоит из десятка цифр. Пассажиру, особенно если он летит впервые, может быть сложно быстро разобраться в том, что есть время вылета по расписанию, но могут быть задержки, у регистрации есть начало и конец, а еще надо найти свой выход и стойки. На карточке рейса все важные поинты собраны в нативную сетку, так что пассажиру легко ориентироваться в информации. Для тех, кто сильно волнуется, добавили советы: к примеру, за сколько времени до рейса лучше приехать в аэропорт.
На карточке рейса можно подписаться на уведомления по email, в Телеграме или ВКонтакте, чтобы система присылала оповещение о каждом изменении статуса рейса, и отправить страницу о рейсе друзьям или родственникам, которые будут встречать.
Гораздо спокойнее иметь все актуальные данные в телефоне под рукой, чем ходить проверять табло в зале или вслушиваться в объявления в аэропорте.
4. Интерактивная карта аэропорта
Мы обработали карту четырех этажей и окрестностей, чтобы составить исчерпывающую интерактивную карту со всеми указателями, плашками и возможностями для пассажира и со всеми организациями в аэропорту, будь то кафе или места упаковки багажа.
5. Личный кабинет партнера
Для работы с партнерами нужен был отдельный Личный кабинет. Мы разработали его на Laravel индивидуально для Внуково.
ЛК партнера не отображается в общем интерфейсе, менеджер формирует для партнера логин и отправляет вместе со ссылкой на форму для входа. В кабинете доступны все документы для работы каждого представителя компании с Внуково, контакты личного менеджера и правила, обязательные к прочтению.
Отдельная функция — статистический дашборд, предоставляющий менеджерам со стороны аэропорта данные по открытиям документа партнерами. Представители аэропорта должны быть уверены, что партнеры в курсе всех условий, поэтому если партнер не открывает файл, менеджер может напомнить ему изучить информацию.
6. Трехъязычный контент
Сайт аэропорта международный, так что нужны были версии на русском, английском и китайском языках.
Мы собрали две команды переводчиков, в которые вошли носители языков из Англии и Китая для обязательной проверки.
Ради интереса мы подсчитали, сколько слов обработала команда, которая работала с контентом — переводом, корректировкам и размещением. В сумме на трех языках получилось 263 000 слов и бессчетное количество работы по корректировке и синхронизации текстов.
7. Сложные интеграции
Чтобы все функции сайта работали без сбоев, мы провели множество интеграций с внутренними системами аэропорта:
- работа онлайн-табло;
- изменение сезонного расписания;
- система покупки авиабилетов;
- проверка статусов грузов;
- онлайн-оплата парковок;
- примерно 17 форм связи с разными департаментами.
И интеграции со сторонними сервисами:
- Телеграмм, ВК и email для уведомлений об изменении статусов рейсов;
- HH.ru для выгрузки вакансий;
- Яндекс.Карты для пояснений, как удобнее добраться до аэропорта.
8. Оптимизация загрузки
К сервисам поиска рейсов, покупки билетов, бронирования грузовых мест ежедневно обращаются десятки тысяч пользователей.
Для проекта мы разработали архитектуру, которая позволяет системе стабильно работать при нагрузках. Тестировали нагрузки по максимуму — сайт летает и с 10 000 пользователей в секунду.
9. Инклюзивность
Мы сделали настраиваемую версию для слабовидящих с четырьмя цветовыми схемами, возможностью отключить картинки или сделать их черно-белыми, вариантами масштабирования текста без горизонтальной прокрутки, и отключением всех эффектов.
Каждый режим проверен на обязательные параметры:
- контрастность;
- отсутствие вставок постороннего контента внутри значимого;
- наличие заменяющих текст изображений;
- возможность выполнить любое действие с помощью клавиатуры без ограничения по времени;
- корректная работа программных средств экранного доступа для слабовидящих,
- и прочих, необходимых для использования сайта.
Новый сайт Внуково уже работает. В комментариях делитесь впечатлениями и вопросами, а если было интересно, оцените пост)
С вами была команда IT-компании Riverstart!
Подписывайтесь на наш блог на VC, в нем мы делимся советами и опытом по созданию IT-проектов. Например, рассказываем, как следим за окупаемостью проектов в компании.
Отличная работа, все удобно и читается легко (кроме меню пожалуй). Единственное, я бы добавил пару фичей
- Поместил на видное место кнопку для помощи в трансфере пассажирам с ограниченными способностями
- Добавил кнопку для людей с проблемами зрения
- Вместо RU, EN - проще использовать флаги стран
Так сделаем сайт более дружелюбных для всех. Но это мое видение. Работа по-прежнему отличная.
Как связан флаг страны с языком ? Какой флаг вешать для EN?
Cпасибо за советы, мы вообще со всеми ними согласны. Людям с ограниченными возможностями здоровья и пассажирам с детьми мы уделили особое внимание: ссылки на информацию для их перелета закреплены в первом экране карточек рейса. А переключение версии для слабовидящих закреплена в хеддере и меню сайта) Кстати, почему меню показалось неудобным? Мы наоборот считаем его сильно нативным, так как большое количество страниц мы разделили по аудиториям аэропорта: для пассажиров, партнеров и тех, кто хочет узнать больше про сам аэропорт)
Лучше писать словами: «русский язык», «english». Причём так, чтобы можно было найти поиском по странице.
Разработчики сайта: UX-дизайн, 160 страниц с уникальным дизайном, интеграции со внутренними системами аэропорта.
Тем временем новости на сайте:
Вообще это распространенная проблема. Дизайнеры делают красивые макеты, разработчики делают технологичные сайты по ним. Сайт передают заказчику, а он уже заполняет своим контентом, который порой может не соответствовать дизайну.
Но мой любимый случай, это когда добавляют чат для продаж, который весит 20мб, мерцает всеми оттенками красного, издает звуки и двигает загрузку каждой страницы на 3 секунды.
Ребзя, а вот подскажите, как именно вы тестировали это чудо на 10к пользователей?
Привет! Для проверки использовали Yandex.Tank и k6.io. С помощью тестовых скриптов запускали проверку под 100-500 виртуальными пользователями, если находили проблемы — исправляли, и постепенно увеличивали количество пользователей, пока не получили 10к запросов в секунду и допустимый уровень отклика и ошибок.
Хорошая работа, приятно, что у нас все-таки есть хорошие команды)
Отличная работа с акцентами и пространством.
Комментарий недоступен
Молодцы!
Вам бы переделать сайт стамбульского аэропорта.
Да и не только.
У большинства аэропортов сайты один хуже другого.
выглядит здорово и удобно
Выглядит современно. Но можно ли добавить в прилетах не только, что идет выдача багажа, но и на какой ленте?
И странный баг - на табло прилета входишь в меню рейса, переключаешь на английский язык, язык меняется. Но если сделать шаг назад - обратно в общее меню прилетов - язык меняется обратно на русский).
И раз уж вы составили интерактивную карту всего аэропорта, было бы очень удобно, если б в кафешках и ресторанах висели бы QR коды. Наводишь приложение - Вы здесь, к выходу на посадку пройти так-то.
Спасибо за то, что нашли баг. Отправили чинить. Сайт запущен совсем недавно, сейчас идет исправление последних багов "на бою") Указание номера ленты возможно будет позже, были технические причины, почему не получилось сделать это сейчас. А насчет qr-кодом передадим Внуково, идея нам нравится.
Это не баг, а фича 😂
У них активный язык ведь зашит в адресе страницы, соответственно возвращаясь назад вернётся и язык, который был на той странице
PS. Хотя у меня при шаге назад идёт возврат на текущую страницу, но на предыдущем языке. Или я не так понял?
Отлично, очень даже отлично. Молодцы! Здесь только сделать бы текст поменьше, слишком крупный, а так все отлично!
Это фича, чтобы слепые увидели.
Комментарий недоступен
Кто такой "провожающий пассажир"? И встречающий.
Не лучше ли убрать слово пассажир вовсе? (Пиши-сокращай)
Вылетающим
и провожающим
Прилетающим
и встречающим
Да очень круто сделано, молодцы! Покрутил на десктопе и мобилках, адаптив отлично работает. Кстати, если можно, вопрос, сейчас опять пошел тренд на скругление всего, что движется, все ринулись бордер радиусы лепить как во времена web 2.0. Как считаете, тени вернутся? ))
Куда они денутся) Тень — естественное явление, к тому же выразительный прием для достижения эффекта обьема и глубины. Другой вопрос в каком виде это будет использоваться. Если как украшательство, как когда то, то история сомнительная (тот же скевоморфизм вспомнить, развлечение для скучающего дизайнерского комьюнити, а не улучшения взаимодействия пользователя)
Если тени — как прием для улучшения взаимодействия с интерфейсом — то оно так и используется. Тень как часть принципа поверхностей, за счет которых достигается контраст и выделяются соотвествующие элементы. В том же материале уи — это правило базовое для всей дизайн системы, где передача высоты достигается с помощью использования определенной палитры цветов или теней, логично связанных с уровнем высоты поверхности относительно остальных (тени по их гайдам, кстати, не рекомендуется использовать повсеместно, а исключительно как акцент в конкретных случаях, способ отделения от контента или реакция на взаимодействие с пользователем. Да это везде так используется
Короче тень ни куда не девалась, а заняла свою функциональную нишу. Выразительных приемов и возможностей стало огромное количество, тень как - стилеобразующий прием на сайте — это странно было бы видеть))
(речь про крупные коммерческие проекты, где проводиться работа с улучшением взаимодействия. Локальные и независимые проекты — могут себе позволить многое, парни на дрибле, как площадке для экспериментов, — вообще ни в чем себе не отказывают )
Особенно интересно сравнивать функционал с сайтом аэропорта Кольцово.
Версус напрашивается. Лайк за него, дизлайк за Внуково )
PS оба хороши, но какие разные подходы и вангую бюджеты
Комментарий недоступен
Шок, очень круто проделанная работа!
Ждем обновления сайта Домодедово
Новый сайт это круто, но не так круто как новые самолеты
Самолёты, увы, не делаем(( только сайты, сервисы, приложения и все такое.
смотрится очень хорошо! "стильно, современно" как принято говорить)
карта аэропорта оч удобная, вот везде бы так! Молодцы, ребята, заморочились)
Смотрится оригинально, побольше бы таких сайтов в российских организациях👍🏻
Отлично проработанный сайт, вплоть до самых мелочей ,мне очень понравилося!
Прикольная работа. А почему на табличках с гейтами выбрали знак многоточие, а не тире? Через тире вроде как привычнее.
Именно про многоточие это внутренняя навигация аэропорта, которую делала команда Лебедева. И которая, к слову, крутая) Мы ее максимально наследовали в онлайн на сайт. Часто бывает, что сайты аэропортов и навигация в аэропорту выглядят разрозненно. А мы преследовали следующую цель: чтобы пассажир на сайте Внуково привыкал к одной системе. После приезжал в аэропорт и видел то же самое, насколько это возможно)
Комментарий недоступен
Особенно в онлайн табло, как-будто для слабовидящих версия, поэтому даже на 2к экране очень мало строчек помещается, надо скролить.
Приведите пример. Сайт аэропорта, который вам нравится.
Я был на сайтах _всех_ аэропортов мира, не спрашивайте что я там делал), и могу сказать, что сделали вы хорошо. Плохо что пропал раздел Направления http://www.vnukovo.ru/flights/flight-map/
Спасибо) направления все еще можно выбрать, но на странице Сезонного расписания. Чтобы не создавать дубли страниц, мы вынесли направление как один из фильтров. Попробуйте, стало удобнее.
Спасибо, приятно слышать) Направления теперь здесь https://www.vnukovo.ru/ru/for-passengers/reysi/sezonnoe-raspisanie/?bound=departure
Комментарий недоступен
Ждем оценку дизайна от маэстро Лебедева
Лебедев кукарек. Кто его еще слушает?
Окна себе дома сделайте уже со скругленными углами, дизайнеры.
Скругленные углы в дизайне нового сайта — прямая отсылка к самому зданию Внуково и к его логотипу. Присмотритесь с улицы на купол в терминале А)
Все очень большое и очень много шума лишнего. Картинки лишние убрать бы, кнопки просто без фона, может шрифты надо поменьше сделать.
Очень вдумчивый комментарий, подкормленный аналитикой и юзкейсами. Думаю они там вникнут в идею и все по быстрому переделают.
Слово "прилет" заиграло новыми красками.
Замечательный пример объема работ, с отсылкой к классикам 😌
крутая работка, обычно делают говно все, а тут даже потралить не дают
нахрена? он еще не закрылся?
Давно не летали?)
Протестировал калькулятор парковки с телефона
1. Выбор парковки. Там только один выбор, так зачем туда надо нажимать? Задел на будущее? Сделайте сейчас сразу так, что бы не надо было тыкать лишний раз.
2. Выбор даты. Выбрал дату и нужны ещё раз тыкнуть в стороне, что бы календарь исчез. Зачем?
Видимо предполагается, что человек тыкнет во время начала парковки, но это очевидно только опытному пользователю. Человек первый раз в форме видит, что окно выбора даты не исчезает. Видимо надо ещё, что то делать с выбором даты, ибон окно висит и ждёт действия пользователя.
3. Ниже простыня правил, которые никто не читает. Скройте за разворачивающейся галочкой "Подробные правила парковки"
Все круто и красиво. Только один момент мне кажется можно доработать. Имея такую шикарную карту, финальным действием должно стать не просто получение информации, а возможность прокладки маршрута до места посадки или до места выдачи багажа. Хотя скорее всего вы эту идею прорабатывали, и тут больше вопрос наверное в бюджете на проект.
И в целом наверное хотелось бы хэдер в мобильной версии видеть более динамичным к изменениям конекста. Чтобы был mobile first более глубоким. Хотя тут наверное опять вопрос бюджета. Но в целом, думаю постепенно все это сделается по мере развития проекта. В общем удачи вам) Вы молодцы!)
Восхитительная работа!
Спасибо)
Неплохо ) подскажите по стеку технологий который использовали front / back
https://www.vnukovo.ru/bitrix/admin/index.php#authorize
Битра, ещё и вход в админку http-auth не закрыли 🤷♂️
cant read "Nash Rasul" in English, whats wrong?
Лет ми спик фром май харт™.
Что-то слабо верится, что в Войне и мир 188 000 слов
Пишут, что правда) Вы думали больше или меньше?
Сайт аэропорта на modx конечно мощно
Он на Битриксе
Комментарий недоступен
Очень круто. Хотелось бы в подобном принять участие, даже не из-за денег.
p.s. (дополнено) С анимацией сильно перестарались и с планшета под палец не очень функционально.
Комментарий недоступен
Комментарий недоступен
Комментарий недоступен
Комментарий недоступен
Комментарий недоступен
Комментарий недоступен
Расскажите про дизайн-токены
Планируем сделать такой материал) Можете подписаться на блог, чтобы не пропустить.
В целом понравилось. Из вкусовщины — слишком крупные шрифты, переигрались. Из странного — зачем кнопку парковок на главной поместили справа? Выглядит как будто баг вёрстки и она съехала от плиток слева.
кайф, жалко только на тестах на пользователях сэкономили... для заказчика же делали, не для пользователей
Михаил, тесты делали) Могу выделить модерируемые тесты на пользователях онлайн табло, сами дизайн-макеты. Или количественные методы по метрикам существующего сайта: там порядка 3-4 типов работ провели.
Что нарисовано на иконке покупок рядом с сумкой?
Подарок)
Единственное что лично мне нужно от сайта аэропорта (а я летаю Очень Часто) это услуга розыска потерянного багажа (lost & found)
В разделе пассажирам - нету
в разделе прилетающим - нету
в форме поиска по слову "розыск" сайт зависает ( аж прям Не удается получить доступ к сайтуПревышено время ожидания ответа от сайта www.vnukovo.ru.)
вывод: сайт говно.
Ну как же нет, страница находится в разделе Пассажирам, в меню видна, все ок)
С третьего раза поиск сработал, нашлось. Тем не менее. 15:07 мск 13/06/2023
урл https://www.vnukovo.ru/ru/search/?query=%D1%80%D0%BE%D0%B7%D1%8B%D1%81%D0%BA
проверяйте почему висело.
Комментарий недоступен
Верстка могла быть сильно аккуратнее. Иконки, текст в кнопках, бургер Меню — все кривое по вертикали. Причем, вначале думал что это фича, но в картинках в статье все ровненько
вм
Зачем сайт аєропорту, если скоро самолёты перестанут летать?
Очередной сайт, адаптированный только для мобильных устройств. Огромные кнопки и надписи даже на 24" смотрятся дико.
Комментарий удален модератором