Новый интерфейс киосков самообслуживания
в аэропортах

2025

Авиакод

Авиакод — дочка холдинга УК «Аэропорты регионов», которая создаёт цифровые сервисы и оборудование для аэропортов.

UX аналитика

UI/UX дизайн

Авиа

За два месяца мы спроектировали UX/UI трёх сервисов и собрали систему, где весь путь — от сканирования паспорта до багажной ленты — занимает меньше минуты.

Цели и задачи

Компания обратилась с целью создать пользовательский интерфейс для нового киоска самообслуживания. Основная его функция — регистрация пассажиров на рейс и приём багажа без необходимости стоять в очередях и обращаться к сотрудникам.

Задача — разработать новый UX/UI-дизайн для трёх сценариев:

регистрации пассажира на рейс;

регистрации и сдачи багажа;

оплаты.

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

.

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

Регистрация в аэропорту занимает в среднем около 4 минут на одного пассажира и до 40 минут ожидания в очереди в часы пик. При этом сотрудники выполняют одни и те же действия: проверяют документы, вводят данные, оформляют багаж.

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

Как устроены киоски самообслуживания

Систему можно условно разделить на два типа устройств:

стойка регистрации — в центре зала, где пассажир сканирует паспорт, выбирает место и оформляет багаж;

стойка drop-off — у транспортной ленты, где багаж физически взвешивается и отправляется.

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

Исследование и аналитика

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

.

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

Сформировали рекомендации:

объединить действия на одном экране, где это возможно;

сократить количество кликов и подтверждений;

заменить текстовые инструкции на визуальные и анимационные подсказки;

сделать коммуникацию более человечной и понятной;

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

.

Эргономика и тестирование физического взаимодействия

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

Виктория Денис

арт-директор Uplab

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

.

По результатам тестирования сформулировали следующие принципы:

Все основные кнопки вынесены в нижнюю часть экрана на высоте 5 см.

Основная кнопка для продолжения («Далее» или «Оплатить») всегда располагается справа и выделена зеленым цветом. Это позволяет пройти весь сценарий, нажимая только на неё. Кнопка для возврата или альтернативного действия (например, «Назад») находится слева.

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

Размер кнопок 4,5 см x 4,5 см, а область нажатия ещё больше.

Высота ключевых элементов рассчитана по усреднённым антропометрическим данным — чтобы и человек ростом 160 см, и человек 190 см могли одинаково комфортно взаимодействовать с экраном.

Мы используем стандартное цветовое кодирование, чтобы пользователь моментально понимал, что происходит:

Цветовое кодирование
и эмоциональная анимация

зелёный ведёт вперёд (успех, подтверждение);

красный сигнализирует о проблеме (ошибка, запрет).

.

Кроме того, мы дополнили визуальные сигналы максимально однозначными текстами и подсказками. Например, в сценарии регистрации на рейс, когда система предлагает отсканировать паспорт, пользователь видит анимацию с пошаговой инструкцией — паспорт открывается, переворачивается, кладётся на нужное место.

.

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

Иллюстрации и детализация интерфейсов

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

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

Регистрация на рейс

Система предлагает отсканировать паспорт. Если распознать данные не удалось, появляется сообщение об ошибке и возможность повторить попытку.

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

Регистрация нескольких пассажиров в одной брони

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

Выбор посадочного места

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

Нашим решением стал гибкий «конструктор», основанный на данных. В интерфейс поступает код с описанием параметров борта: количество рядов, типы мест (эконом, бизнес, дополнительное пространство и т. д.) и их расположение. На основе этих данных схема салона формируется автоматически.

.

Это делает интерфейс универсальным и масштабируемым для любых моделей самолётов.

Мы проработали все возможные типы мест и варианты их расположения.

Оплата и получение посадочного талона

После того как пассажир выбрал место и дополнительные услуги, система считает итоговую сумму. Далее — оплата картой или СБП. Чек и посадочный талон можно получить по QR-коду, e-mail или распечатать у киоска.

Важно: до оплаты дополнительных услуг сценарий можно прервать в любой момент.

Сокращение количества экранов и оптимизация пользовательского пути

Если экран не несёт новой информации и не требует активного действия — он лишний. Так, например, в блоке оплаты подразумевалось пять последовательных экранов: выбор способа, ввод e-mail, подтверждение, оплата, получение чека. Мы схлопнули их в один, добавив чекбокс «Отправить чек на e-mail».

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

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

Регистрация багажа

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

Затем интерфейс объясняет пассажиру порядок действий: нужно положить чемодан на платформу и нажать кнопку «Багаж размещён».

.

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

.

Обработка ошибок и сценарии с отклонениями

Второй вариант — нативный апселл, встроенный в пользовательский сценарий.

Если что-то идёт не по плану — интерфейс сообщает об этом. Например, при перевесе система показывает сообщение: «Вес багажа выше допустимого» и предлагает выложить лишние вещи и повторно взвесить багаж — или оплатить перевес.

Отрабатываются и другие типы ошибок:

негабаритный багаж;

ошибка сканирования;

багаж размещён неверно;

и др.

Сдача багажа на стойке Drop-off

На втором этапе пассажир подходит к стойке Drop-off — здесь всего одно действие: «Сдать багаж».

');var hanlerWidth=el.querySelector('.t410__wrapper .jx-handle').offsetWidth,leftSide=el.querySelector('.t410__wrapper .jx-image.jx-left'),rightSide=el.querySelector('.t410__wrapper .jx-image.jx-right'),leftWidth=leftSide.offsetWidth - hanlerWidth/2,rightWidth=rightSide.offsetWidth - hanlerWidth/2,wrapper=el.querySelector('.t410__wrapper'),mobileLeft=el.querySelector('.t410__mobile_left'),mobileRight=el.querySelector('.t410__mobile_right');mobileLeft.style.width=leftWidth + 'px';mobileRight.style.width=rightWidth + 'px';wrapper.addEventListener('touchend',function() {leftWidth=leftSide.offsetWidth - hanlerWidth/2;rightWidth=rightSide.offsetWidth - hanlerWidth/2;mobileLeft.style.width=leftWidth + 'px';mobileRight.style.width=rightWidth + 'px';});}}});let inter=setInterval(function(){let sld=document.querySelectorAll('#' + blk + ' [data-elem-id="' + id + '"] .jx-right img');if(sld.length>0) {clearInterval(inter);var left=document.querySelector('#' + blk + ' [data-elem-id="' + id + '"] .t410__wrapper').getAttribute("data-juxtapose-imgurl-first");var right=document.querySelector('#' + blk + ' [data-elem-id="' + id + '"] .t410__wrapper').getAttribute("data-juxtapose-imgurl-second");let style=window.getComputedStyle(document.querySelector('#' + blk + ' [data-elem-id="' + id + '"]'));var width=style.width.replace("px","");document.querySelector('#' + blk + ' [data-elem-id="' + id + '"] .jx-image.jx-left').insertAdjacentHTML('afterbegin','

');document.querySelector('#' + blk + ' [data-elem-id="' + id + '"] .jx-image.jx-right').insertAdjacentHTML('afterbegin','

');let img=document.querySelectorAll('#' + blk + ' [data-elem-id="' + id + '"] img');img.forEach(function(item) {item.remove();});}},50);});let dispchng=el.querySelector('.t410');dispchng.addEventListener('displayChanged',function(){window.juxtapose.sliders.forEach(function(obj) {if(obj.selector==='#t410-juxtapose__' + recid) {obj.setWrapperDimensions();return}});})};function t_ready(t) {"loading"!=document.readyState?t():document.addEventListener?document.addEventListener("DOMContentLoaded",t):document.attachEvent("onreadystatechange",function() {"loading"!=document.readyState&&t()})} t_ready(function() {let opt=setInterval(function(){let slds=document.querySelectorAll('[nlm076-slider-id="691965"] [data-juxtapose-imgurl-first="https://static.tildacdn.com/tild3737-3833-4736-a563-373138313362/1.jpg"][data-juxtapose-imgurl-second="https://static.tildacdn.com/tild3261-3962-4763-b262-346330653732/2.jpg"]');if(slds.length>0) {clearInterval(opt);t410_onObjLoad('juxtapose',function() {slds.forEach(function(item,index) {let parent=item.closest('.nolimnlm76');if(parent) {parent.classList.remove('nolimnlm76');let id=item.closest('[data-elem-id]').getAttribute('data-elem-id');let blk=item.closest('.r').getAttribute('id');t410_init(id,blk);window.addEventListener("resize",function() {let sldWidth=item.closest('.tn-elem').style.width;let int=setInterval(function() {let sldWidth2=item.closest('.tn-elem').style.width;if(sldWidth!=sldWidth2) {clearInterval(int);document.querySelector('#' + blk + ' [data-elem-id="' + id + '"] .jx-image.jx-right').firstChild.style.width=sldWidth2;document.querySelector('#' + blk + ' [data-elem-id="' + id + '"] .jx-image.jx-left').firstChild.style.width=sldWidth2;}},10);setTimeout(function() {clearInterval(int);},2000);});}});});}},50);});function t410_onObjLoad(objName,okFunc,time) {if(typeof window[objName]==='object') {okFunc()} else {let timerId=setTimeout(function checkFuncExist() {if(typeof window[objName]==='object') {okFunc();return} timerId=setTimeout(checkFuncExist,time||100)});};};}());