Спроектировать интерфейс регистрации на рейс в терминале самообслуживания в аэропорту.
Задача
Вводные данные
В аэропорту двадцать авиакомпаний. Пассажир может путешествовать один, с семьёй или друзьями. Он не очень понимает, чем отличается номер электронного билета от номера брони, не понимает, какой стороной вставлять паспорт в сканер и можно ли вообще сканировать такой документ, как у него.
Решение и схема
Заставка
Информационный блок с логотипами авиакомпаний я разместил по принципу «облака». Вариант с размещением по сетке не подошел, напоминает кнопки — путает пользователя.
Выбор метода авторизации
Определил три наиболее комфортных метода авторизации. Поставил агрессивную фоновую картинку, чтобы добавить лётной романтики.
Ввод номера
Подсказки справа помогают понять разницу между кодом и номером.
Авторизация с помощью карты
Выбрав авторизацию с помощью карты, пользователь картой по сканирующему устройству и авторизируется. Контурная иконка помогает понять как правильно вставлять карту.
При обработке появляется «прелоудер» с указанием состояния.
Подтверждение маршрута
После авторизации пользователь попадает на страницу со списком маршрутов, где он подтверждает регистрацию или изменяет посадочные места. Эта единственная страница где я разместил кнопку «Выход» — на остальных она не нужна.
Изменение мест, ничего не выбрано
Страница делится на три блока: список пассажиров, схема расположения мест, навигация.
Кнопка «Вернуться» ведёт на предыдущую страницу.
Изменение мест, выбран пассажир
Если нажать на конкретного пассажира, то одновременно подсветится и место на схеме
расположения. Аналогичное действие произойдёт, если нажать на место на схеме расположения.
Изменение мест, выбор пассажиров
На этой странице выбраны три пассажира. Чтобы выполнить пересадку требуется нажать на нужные места. Пересадка произойдёт в тот же момент.
Изменение мест, пересадка завершена
Показан результат пересадки. Появилась кнопка «Отменить пересадку», которая доступна некоторое время. Синяя кнопка «Вернуться» трансформировалась в жёлтую кнопку «Продолжить» — пересадка мест произошла и так я акцентирую внимание на завершённом действии.
Завершение регистрации
На эту страницу пользователь попадает после подтверждения регистрации. Распечатываются билеты и терминал возвращается к начальной странице с заставкой.