Рисунок 1 – Экран запуска и стартовая страница мобильного приложения, боковое меню (функции доступные без регистрации (для гостя))
Рисунок 2 – Боковое меню: функции, доступные без регистрации (для гостя)
В верхнем правом углу страницы расположена иконка, при клике на которую, открывается интерактивная карта, позволяющая отслеживать транспорт в режиме реального времени и строить маршруты от одной точки к другой (рисунок 3).
Рисунок 3 – Интерактивная карта, доступная по клику на иконку в
правом верхнем углу экрана
3. Регистрация пользователя
Доступно 2 варианта регистрации пользователя:
– Создание учетной новой учетной записи пользователя в мобильном
приложении (подсистеме ЛКП)
– Регистрация через внешние информационные системы: ЕСИА (Госуслуги),
VK, Яндекс (Yandex.ID).
4. Создание учетной новой учетной записи пользователя в мобильном
приложении
Для регистрации пользователя (создания новой учетной записи) необходимо
выполнить следующие шаги (рисунки – 4,5):
1. На стартовой странице нажать кнопку НЕТ АККАУНТА? РЕГИСТРАЦИЯ,
расположенную в нижней части экрана;
2. Заполнить поля, необходимые для регистрации нового
пользователя:
– Телефон (10 цифр номера телефона, следующих за префиксом «+7»,
проверяется уникальность: если номер был указан для ранее
зарегистрированного пользователя, указать его повторно не
получится);
– E-mail (адрес электронной почты – если номер был указан для ранее
зарегистрированного пользователя, указать его повторно не
получится);
– Фамилия;
– Имя;
– Пароль (должен больше 8 символов);
– Подтверждение пароля (введенные данные должны совпадать с
паролем).
3. Нажать кнопку СОЗДАТЬ АККАУНТ.
Выполняется валидация (проверка) телефона и e-mail на уникальность: если
указанный в форме регистрации телефон или e-mail был(и) зарегистрирован
ранее, приложение сообщит об ошибке и не позволит создать учетную запись
с такими данными.
4. Ввести код подтверждения, полученный на e-mail, указанный при
регистрации. Нажать кнопку ПОДТВЕРДИТЬ.
Последовательность действий пользователя представлена на рисунке 4.
Рисунок 4 – Регистрация нового пользователя
Рисунок 5 – Подтверждение учетной записи при регистрации
В случае, когда код подтверждения введен верно, пользователь получает
доступ к личному кабинету и попадает на Основной экран мобильного
приложения, функциональные возможности которого описаны ниже (рисунок
11). В случае, если код подтверждения введен неверно, пользователь видит
соответствующее сообщение об ошибке.
При регистрации нового пользователя в мобильном приложении, данные
учетной записи автоматически передаются в Подсистему «Личный кабинет
пассажира».
5. Регистрация через внешние информационные системы: ЕСИА (Госуслуги),
VK, Яндекс (Yandex.ID)
Предусмотрена возможность регистрации с помощью внешних информационных
систем.
Регистрации через внешние информационные возможна при выполнении
следующих условий:
– пользователь имеет учетную запись в выбранной им внешней
информационной системе;
– пользователь знает данные для авторизации в учетной записи в выбранной
информационной системе или может восстановить их;
– учетная запись выбранной для регистрации внешней информационной
системы должна быть уникальной – то есть ранее не связанной с другими
учетными записями данного мобильного приложения или подсистемы
ЛКП.
Необходимо выполнить следующие шаги:
1. Нажать на одну из 3 иконок, размещенных в нижней части экрана на
странице регистрации:
– ЕСИА (Госуслуги);
– Яндекс (Yandex.ID);
– VK.com.
2. Во всплывающем окне (рисунок 6) нажать на кнопку «Продолжить» для
продолжения регистрации через выбранную внешнюю информационную
систему.
3. Авторизоваться в аккаунте внешней информационной системы в
соответствии с ее правилами.
4. При успешной регистрации будет осуществлен переход на Основной экран
мобильного приложения для авторизованных пользователей.
5. Если учетная запись в выбранной внешней информационной системе
содержит недостаточно данных для регистрации, приложение отобразит экран
ввода недостающей информации (например, номера телефона – рисунок 7) и
попросит подтвердить данную информацию посредством кода, отправленного
на электронную почту.
Рисунок 6 – Всплывающее окно при авторизации через внешние информационные системы
Рисунок 7 – Заполнение недостающей для создания учетной записи
информации при регистрации через ВИС Яндекс
6. Авторизация
Для авторизации пользователь должен ввести телефон/e-mail и пароль,
указанные при регистрации аккаунта на экране авторизации в мобильном
приложении.
Рисунок 8 – Экран авторизации в мобильном приложении
7. Деавторизация
Пользователь может выполнить выход из учетной, нажав на кнопку «Выйти»,
расположенную внизу бокового меню. При нажатии на кнопку отображается
всплывающее окно, запрашивающее подтверждение действия. При
подтверждении – выполняется деавторизация, при отклонении запроса –
возврат к прошлой экранной форме.
Количество авторизованных устройств пользователя в один момент времени –
не более 1-го. В случае авторизации пользователя на новом устройстве,
идентификатор сессии предыдущего устройства удаляется, а пользователь
принудительно деавторизовывается на предыдущем устройстве. Сообщение
принудительной деавторизации показано на рисунке 9.
Рисунок 9 – Сообщение принудительной деавторизации
8. Восстановление доступа к учетной записи
Для восстановления доступа к учетной записи пользователю необходимо
нажать на ссылку «Восстановление доступа» на экране авторизации. После
нажатия на ссылку приложение отобразит экран Восстановления доступа
(рисунок 10) с формой для ввода e-mail пользователя, на который был
зарегистрирован аккаунт, доступ к которому необходимо
восстановить.
После заполнения формы – на указанный электронный адрес будет направлено
письмо со ссылкой для изменения пароля. Необходимо перейти по данной
ссылке, задать новый пароль на сайте Личного кабинета пользователя и
затем авторизоваться с его помощью в мобильном приложении.
Рисунок 10 – экран Восстановления доступа
Рисунок 11 – Основной экран
В верхней части основного экрана отображаются:
– слева – иконка «гамбургер» (три горизонтальные линии), по тапу на
которую появляется боковое меню;
– по центру – название мобильного приложения («Подорожник»);
– справа – иконка, по тапу на которую открывается интерактивная карта,
позволяющая построить маршрут и отображающая движение транспорта в
реальном времени.
Ниже расположен раздел, отображающий проездные билеты, содержащий две
вкладки:
– «виртуальные» – список приобретенных ВПБ;
– «транспортные» – список привязанных к данному аккаунту транспортных
карт.
Нажатие на кнопку «Купить» при активной вкладке «виртуальные» открывает
экран покупки ВПБ, при активной вкладке «транспортные» открывает экран
привязки/пополнения транспортных карт.
Ниже расположены 4 кнопки, ведущие на соответствующие экраны приложения
(рисунок 11):
– История платежей
– История поездок
– Изменения маршрутов
– Новости.
Раздел «История платежей» содержит информацию обо всех последних
платежах (в том числе – завершившихся с ошибкой) по виртуальным билетам
и транспортным картам;
Раздел «История поездок» содержит информацию о последних поездках
пользователя по виртуальным билетам и привязанным транспортным
картам.
Раздел «Изменения маршрутов» содержит актуальную информацию об
изменениях маршрутов (материалы категории «Изменения маршрутной сети»).
В разделе отображаются последние 5 материалов, отсортированные по дате
размещения от самого нового. По нажатию на текст материала – выполняется
переход на полный короткий текст материала об изменении маршрута. По
нажатию на стрелку в верхнем левом углу – возврат к списку материалов,
по нажатию на стрелку в верхнем углу – возврат на Основной экран
приложения.
Раздел «Новости» содержит последние новости (материалы категории
«Пассажирам»). В разделе отображаются последние 5 материалов,
отсортированные по дате размещения от самого нового. По нажатию на
короткий текст новости – выполняется переход на полный текст новости. По
нажатию на стрелку в верхнем левом углу – возврат к списку новостей, по
нажатию на стрелку в верхнем углу – возврат на Основной экран
приложения.
10. Боковое меню: функции, доступные для авторизованного
пользователя
Иконка «гамбургер» (три горизонтальные линии), по тапу на которую
осуществляется вызов бокового меню с 4 логическими разделами (рисунок
12):
Рисунок 12 – Боковое меню авторизованного пользователя мобильного
приложения
1. Имя пользователя – открывает окно редактирования профиля
пользователя.
2. Список ссылок для оплаты проезда
– Виртуальные билеты – возможность просмотра купленных пользователем
виртуальных билетов.
– Транспортные карты – возможность просмотра добавленных пользователем
транспортных карты, кнопки – добавления новой транспортной карты и
пополнения транспортной карты без привязки к данному аккаунту.
– Разовые (гостевые) билеты.
– Банковские карты – привязанные к данному аккаунту банковские
карты
3. Список ссылок для работы с приложением:
– Профиль – открывает окно редактирования профиля пользователя.
– Настройки – открывает интерфейс настроек работы приложения:
o Пуш-уведомления – возможность включить/отключить пуш-уведомления от
данного мобильного приложения на устройстве пользователя
o Кеширование – настройка размера кэша новостей, хранящихся в памяти
устройства и доступных без подключения устройства к сети Интернет
o Вход в приложение – установка кода для входа в приложение
– раздел «Контакты» (содержит контактную информацию СПБ ГКУ «Организатор
Перевозок»: ссылки на социальные сети (Вконтакте, телеграм), номер
телефона, справочной службы, кнопку, ведущую на форму обратной
связи);
– Раздел «О приложении» –отображает описание и информацию о версии
мобильного приложения, установленного на устройстве.
4. Кнопка Выйти – по нажатию на кнопку отображается всплывающее окно,
запрашивающее подтверждение действия. При подтверждении – выполняется
деавторизация, при отклонении запроса – возврат к прошлой экранной
форме.
В верхнем правом углу страницы расположена иконка, при клике на которую,
открывается интерактивная карта, позволяющая отслеживать транспорт в
режиме реального времени и строить маршруты от одной точки к
другой.
11. Боковое меню для авторизованных пользователей и гостей
В боковом меню в зависимости от статуса пользователя будут отображаться
разные функции (рисунок 13). Ниже приведены функции для каждого статуса
пользователя:
Для гостя:
– Пополнить без регистрации
– Получить фискальный чек
– Контакты
– О приложении
Для авторизованного пользователя:
– Виртуальные билеты
– Транспортные карты
– Разовые (гостевые) билеты
– Банковские карты
– Профиль
– Настройки
– Контакты
– О приложении
– Выйти
Рисунок 13 – Боковое меню – сравнение функций
12. Виртуальные билеты
Позволяет просматривать и управлять проездными билетами, включая
покупку, пополнение и предъявление с целью выполнения контроля оплаты
проезда (рисунок 14).
Рисунок 14 – Проездные билеты
Рисунок 15 – Транспортные карты
14. Разовые (гостевые) билеты
Предоставляет функции для покупки и предъявления разовых билетов
(рисунок 16).
Рисунок 16 – Разовые (гостевые) билеты
15. Банковские карты
Позволяет управлять банковскими картами, привязанными к данной учетной
записи (рисунок 17):
– Просматривать список карт.
– Управлять профилем карты: при клике на иконку карты становится
доступным меню со следующими фикциями:
o Просмотр данных карты (первые 6 цифр, последние 4 цифры номера
карты)
o Выбирать карту для оплаты «по умолчанию» (при активации этого
параметра данная карта будет приоритетной при оплате проезда по
отношению к другим банковским картам).
o Удалить карту – данные карты будут удалены, карты перестанет быть
доступной для оплаты проезда. После нажатия на кнопку «Удалить карту» на
экране отображается всплывающее окно с подтверждением удаления карты.
При нажатии «Отмена» карта остается привязанной к учетной записи, при
нажатии «Удалить» – данные карты удаляются.
Рисунок 17 – Банковские карты (управление привязанными банковскими
картами)
Рисунок 18 – Профиль и управление данными профиля
17. Управление данными профиля
Позволяет просмотреть и редактировать персональные данные, настройки и
другую информацию о пользователе.
Для управления данными профиля необходимо нажать на кнопку
«Редактировать»
Изменение данных профиля (телефон, имя, фамилия) необходимо подтверждать
в два этапа:
1. Переход по ссылке в письме, направленном подсистемой ЛКП.
2. Нажатие на кнопку «Сохранить» в профиле.
Новый e-mail необходимо подтверждать в два этапа:
1. Переход по ссылке в письме, направленном подсистемой ЛКП, на
действующий e-mail.
2. Переход по ссылке в письме, направленном подсистемой ЛКП на новый
e-mail.
Рисунок 19 – Управление данными профиля, удаление профиля
Рисунок 20 – Контакты
Рисунок 21 – Все виртуальные билеты
20.2. Приобретение виртуального проездного билета
Чтобы приобрести виртуальный проездной билет, пользователь должен
выполнить следующие действия (рисунок 22):
в списке виртуальных проездных билетов найти и нажать кнопку “Купить
билет”;
выбыть нужный билет из доступных вариантов (билеты рассортированы по
группам – Единый электронный билет, суточные, месячные);
войти в карточку выбранного виртуального билета и нажать кнопку (для
месячного билета – выбрать дату начала действия) – “Купить билет”.
Пользователю будет предложено ввести данные для оплаты на стороне банка,
после чего необходимо ввести информацию и произвести платеж.
После успешного завершения платежа, приобретенный билет автоматически
появится в списке проездных билетов. Пользователь сможет использовать
его для поездок и управлять им через соответствующие функции
приложения.
Рисунок 22 – Приобретение виртуального проездного билета (пополнение ЕЭБ)
В разделе Транспортные карты (рисунок 23) пользователю доступны:
список всех добавленных транспортных карт, привязанных к данной учетной
записи, а также кнопка «Пополнить без привязки», кнопка «Добавить
транспортную карту».
При нажатии на ранее добавленную транспортную карту пользователь будет
перенаправлен в окно управления этой картой, где сможет выполнять
различные операции с ней, такие как:
Просмотр номера карты.
Редактирование названия карты.
История поездок – просмотр истории поездок по данной карте.
История платежей – просмотр истории платежей по данной карте.
Добавления карты в избранное (кнопка «Добавить билет в избранное»)
Удаление карты (кнопка «Удалить карту»). При нажатии на кнопку «Удалить
карту» пользователь должен подтвердить действие удаления.
Рисунок 23 – Раздел Транспортные карты
20.3. Пополнение привязанной транспортной карты
Чтобы пополнить привязанную к профилю транспортную карту, пользователь
должен выполнить следующие действия (рисунок 24):
– в списке привязанных транспортных карт выбрать нужную
– в окне выбранной транспортной карты нажать кнопку “Пополнить билет”,
которая расположена внизу экрана;
– в окне пополнения транспортной карты ввести сумму, на которую
пользователь хочет пополнить билет;
– пользователю будет предложено ввести данные для оплаты на стороне
банка; ввести необходимую информацию и произвести платеж.
После успешного завершения платежа проездной билет будет пополнен на
указанную пользователем сумму. Пользователь сможет использовать
обновленный баланс для проездов и управлять билетом через
соответствующие функции приложения.
Рисунок 24 – Пополнение привязанной транспортной карты
20.4. Пополнение транспортной карты без привязки
Чтобы пополнить транспортную карту без привязки к профилю, пользователь
должен выполнить следующие действия (рисунок 25):
в списке транспортных карт нажать на кнопку «Пополнить без привязки»,
расположенную внизу страницы;
в окне «Пополнить без привязки» указать:
сумму, на которую пользователь хочет пополнить транспортную карту;
номер ЭБ, который необходимо пополнить (выполняется валидация по
количеству символов в номере ЭБ);
тип ЭБ.
Пользователю будет предложено ввести данные для оплаты на стороне банка;
ввести необходимую информацию и произвести платеж.
После успешного завершения платежа проездной транспортная карта будет
пополнена на указанную пользователем сумму. Пользователь сможет
использовать обновленный баланс для проезда и управлять билетом через
соответствующие функции приложения.
Рисунок 25 – Пополнение транспортной карты без привязки
20.5. Оплата проезда
Для оплаты проезда необходимо перейти в нужный билет и предъявить его
валидатору (в случае оплаты QR-кодом), поднести устройство к валидатору
при использовании NFC.
20.6. Всплывающее сообщение об оплате проезда
После успешной оплаты через валидатор вы увидите сообщение с информацией
о выполненной операции (рисунок 26). Это сообщение будет содержать
следующую информацию:
Статус платежа – указывает на успешное завершение операции оплаты.
Дата – дата, когда произошла оплата проезда.
Время – время, когда произошла оплата проезда.
Тип транспорта – указывает на вид транспорта, на который был оплачен
проезд.
Номер автобуса – номер автобуса, если это применимо и доступно для
отображения.
Рисунок 26 – Контроль оплаты проезда/Всплывающее сообщение об оплате проезда
Эта информация поможет пользователю подтвердить успешное выполнение
операции оплаты проезда.
20.7. Всплывающее сообщение о повторном прикладывании
Если после успешной оплаты через валидатор пользователь повторно
приложит устройство, он увидит сообщение о невозможности выполнения
операции, так как данная транзакция уже зарегистрирована. Это сообщение
будет содержать следующую информацию (рисунок 27):
статус платежа – указывает на успешное завершение операции оплаты;
дата – дата, когда произошла оплата проезда;
время – время, когда произошла оплата проезда;
тип транспорта – указывает на вид транспорта, на который был оплачен
проезд;
номер автобуса – номер автобуса, если это применимо и доступно для
отображения.
Эта информация позволяет узнать, что повторная попытка оплаты не
удалась, поскольку транзакция уже была успешно завершена ранее.
Рисунок 27 – Сообщение о повторном прикладывании
21. Изменения маршрутов
Окно “Изменения маршрутов” в приложении содержит список материалов о
внесенных изменениях в маршрутную сеть. Для ознакомления с обновлениями
маршрутов необходимо выполнить следующие шаги:
1. На главном экране приложения найти раздел “Изменения маршрутов” или
открыть боковое меню и выбрать соответствующий пункт.
2. В окне “Изменения маршрутов” будет доступен список статей, содержащих
информацию о проведенных изменениях.
3. Используя прокрутку, необходимо нажать на заголовок статьи. При
нажатии на заголовок статьи осуществится переход в окно статьи, где
будет доступна более подробная информация об изменениях маршрутов.
На рисунке 28 представлен общий список изменений маршрутной сети.
Рисунок 28 – Общий список изменения маршрутной сети
22. Новости
Окно “Новости” в приложении содержит список статей с последними
новостями (рисунок 29). Чтобы ознакомиться с новостями, выполните
следующие шаги:
1. На главном экране приложения найдите раздел “Новости” или откройте
боковое меню и выберите соответствующий пункт.
2. В окне “Новости” вы увидите список статей, содержащих последние
новости.
3. Прокрутите список и найдите заголовок статьи, которая вас интересует.
Нажмите на заголовок статьи.
4. При нажатии на заголовок статьи вы перейдете в окно статьи, где будет
доступна более подробная информация о новости.
5. Ознакомьтесь с содержимым статьи и получите необходимую информацию о
последних новостях.
Рисунок 29 – Материалы раздела «Пассажирам» (Новости)
22.1. Интерактивная карта
Для открытия интерактивной карты (рисунок 30) в приложении необходимо
выполнить следующие действия:
на стартовом или основном экране приложения найти кнопку, расположенную
в правом верхнем углу (обычно это иконка карты или символ
геолокации);
нажать на эту кнопку, чтобы открыть интерактивную карту;
после открытия интерактивной карты представляется возможность
воспользоваться различными функциями:
отображение транспорта в реальном времени – на карте будут видны
различные маркеры или иконки, представляющие транспортные средства,
такие как автобусы, троллейбусы или трамваи, их текущее положение будет
обновляться в реальном времени, позволяя отслеживать их движение;
избранное – возможность добавить места или остановки в раздел
“Избранное” на карте для быстрого доступа к ним в будущем;
поиск – возможность ввести запрос в поле поиска на карте и получить
соответствующие результаты;
геолокация – карта может использовать геолокацию пользователя для
отображения текущего положения на карте, что позволяет быстро определить
близость к остановкам или другим интересующим пользователя местам;
построение маршрута – возможность использовать интерактивную карту для
построения маршрута от одного места к другому, при выборе начальной и
конечной точек на карте, приложение предложит наиболее оптимальный
маршрут, учитывая доступные виды транспорта и преграды на пути (рисунок
30).
Рисунок 30 – Интерактивная карта