Приложение, которое мы сделали для РЖД
Продажей и бронированием билетов на официальном сайте перевозчика уже давно никого не удивить. Но на дворе не 2010, а 2017 год. И пока граждане не без удовольствия наблюдают за ростом цен на нефть и с неудовольствием — за ценами на многое другое, «Российские железные дороги» решили модернизировать свое мобильное направление.
У РЖД было свое приложение и раньше, причем не для сферического «Йотафона» или «Эльбруса», а для вполне себе современной платформы Android, обладающей крупнейшей пользовательской базой в России. Добавить поддержку других платформ планировалось позднее.
Это «позднее» наступило полгода назад. Мы выиграли заказ на разработку обновленного приложения под Android и две другие мобильные операционные системы: iOS и многими не вполне заслуженно гонимую Windows Phone. Несколько месяцев активной разработки, тестирования и доработок — бета-версия готова.
Про то, как мы это сделали, расскажем под катом.
Свое первое мобильное приложение РЖД выпустила в прошлом году для магазина Google Play. Называется «Билеты на поезд». Это единственное официальное приложение перевозчика. Всё, что представлено в сторах помимо него, — это либо софт посредников, которые берут доходящую до 15% агентскую комиссию, либо что-то неофициальное и не всегда работающее, как надо.
Перед нами поставили задачу переработать приложение с учетом накопленного пользовательского опыта и выложить новую версию сразу во все основные магазины приложений: Google Play, AppStore и Windows Store.
В ходе разработки мы постарались соблюсти баланс между классическими приложениями по продаже билетов и желанием внедрить что-то новое, что поможет пользователям настроить всё под себя. Так получилось приложение «РЖД. Билеты на поезд».
Эволюция интерфейса основных страниц приложения
Интерфейс
При проектировании UI мы руководствовались тремя простыми правилами:
• Предсказуемость.
• Простота для новичка и удобство для опытного пользователя.
• Повторное взаимодействие с приложением должно быть быстрее первого.
Предсказуемость
Приложения, которые предлагают массовую типовую услугу, должны быть предсказуемыми, особенно если дело касается продажи билетов. Даже не запуская приложение, пользователь должен представлять, что ожидает его внутри, а задача разработчика — не обмануть его ожиданий.
Это как приехать на любой железнодорожный вокзал в РФ или Европе: везде увидишь примерно одинаковую картину. Пассажир знает, что где-то здесь есть касса, зал ожидания, рядом фудкорт или пара кафе, а вот здесь по типичным указателям можно выйти к платформам.
Поэтому с UI не стоит слишком экспериментировать, чтобы не оставить недоуменного пользователя в дебрях несчитываемого интерфейса. Лучше отказаться от радикальных идей и сосредоточиться на творческом развитии существующих норм.
Простота для новичка и удобство для опытного пользователя
Если человек только установил приложение, его не стоит пугать обилием кнопок, колонок и сложностью меню. У российских перевозчиков, например, у S7 или «Аэрофлота», с пониманием этого правила все в порядке: пользователя сразу встречает окно поиска рейса, без излишеств. Это user-friendly решение для новых пользователей. В свою очередь, постоянный пользователь приложения должен получать дополнительные возможности благодаря расширенному функционалу и кастомизации.
Повторное взаимодействие с приложением должно быть быстрее первого
Все данные должны вводиться только один раз — во время первого использования приложения. Один раз вошел в систему? Отлично, больше логиниться не нужно. Купил билет? Супер, теперь у нас есть данные о пассажире и его последнем рейсе, которые не придется вбивать повторно.
Мы считаем, что в мобильных приложениях сохранять нужно всё, кроме платежной информации. Большинство людей нервирует тот факт, что данные карточек могут храниться непонятно где и кем, пусть это и РЖД, «Аэрофлот» или любая другая компания из топ-20. Исключение составляют банкинги и платежные системы, которым пользователи традиционно доверяют.
Руководствуясь этими тремя пунктами, мы старались сделать наше приложение максимально дружелюбным для всех категорий пользователей. Всё остальное: с какой стороны кнопка-«бургер», цветовая гамма, навигация боковой панели, — можно назвать хоть и важным, но вторичным. Ведь если каждый раз будет требоваться логин и пароль, не будут сохраняться формы введенных данных о маршруте, или придется снова и снова вводить имя и фамилию (представьте, что приложением пользуется некто Иннокентий Константинович Крестовоздвиженский), он рано или поздно перестанет пользоваться приложением. И правильно сделает.
Возможности приложения
Плавно перекатываясь с UI, хотелось бы рассказать о том, что наше приложение умеет. Как мы считаем — всё, что может понадобиться потенциальному пассажиру со смартфоном в руках.
А именно:
• Покупка билетов (как в одну сторону, так и туда-обратно).
• Возврат билетов.
• Приобретение билетов за бонусные баллы и отслеживание бонусного счета.
• Покупка и применение транспортных карт (может быть, вы впервые слышите о них, но они существуют).
• Хранение и экспорт электронных билетов.
• Расписание движения поездов и вывод интересующих маршрутов на главную страницу плюс хранение истории поисков.
• Сохранение данных пользователя.
• Показ объявлений РЖД (например, сообщения об изменении расписания поездов дальнего следования или пригородных электричек).
• Навигация на вокзалах.
• FAQ.
Демонстрация основных функциональных страниц мобильного приложения
Кроме этого, хотелось бы рассказать о некоторых конкретных решениях, которые в глобальный список не вошли.
Обучающие слайды
При первом запуске приложение показывает три обучающих слайда. При том, что решение может показаться раздражающе-банальным, стоит помнить, что целевая аудитория приложения — не только хипстеры или IT-специалисты, а совершенно обычные пассажиры поездов и электричек, которые в основной массе редко пользуются чем-то кроме почты, карт и вотсапа.
Поэтому в стартовых слайдах, которые, как мы надеемся, многим смогут помочь, мы добавили справочную информацию о дополнительных возможностях приложения, которые не слишком внимательный или опытный пользователь может и не обнаружить. Там же мы объясняем, зачем нужна авторизация и напоминаем, что это официальное приложение, и никаких дополнительных агентских комиссий за купленные билеты платить не придется. Фокус-группа показала, что людям важно четко знать, сколько денег они заплатят: пользователи опасаются скрытых платежей и прочих «пунктов договора со звездочкой мелким шрифтом».
Демонстрация экранов обучающих слайдов
Отсутствие повторной авторизации
Мы понимаем, что делать принудительную авторизацию для покупки билета — это жестоко. Увы, API РЖД построен таким образом, что никаких действий с билетами без входа в личный кабинет совершить нельзя.
Однако мы сделали так, чтобы с авторизацией пользователь сталкивался всего один раз за все время пользования приложением. Мы предусмотрели возможность пропустить этап авторизации и сразу перейти к заказу билетов, но залогиниться все равно придется, правда, уже на этапе покупки. Если вы были авторизованы единожды, то приложение само подтянет ваши данные, и больше вспоминать об этой процедуре вам как пользователю не придется.
Само собой, реализована возможность использования уже существующей учетной записи с сайта РЖД, так что придумывать новый логин и пароль не потребуется. Профили в приложении и на сайте РЖД идентичны — можно авторизоваться под существующим логином и паролем или завести новый аккаунт. Соответственно, в него можно будет войти и с сайта. Данные обо всех купленных билетах передаются в аккаунт на сайте, а купленные на сайте — в приложение.
Кто пользовался официальным сайтом перевозчика, в курсе, что при бронировании билетов приходится авторизоваться повторно. От этой процедуры нам удалось избавиться.
Главная страница
На «главной» мы реализовали сразу несколько приятных мелочей. Например, через нажатие на символ геолокации на основе вашего местоположения будет определен пункт отправления. Сделали выбор даты в виде календаря, а не «барабана», чтобы сэкономить пользователям несколько секунд. В календаре по умолчанию проставляется текущая дата.
Также мы разместили здесь четыре модуля: «Любимые маршруты», «История запросов», «Мои билеты» и «Новости компании». В идеале они покрывают почти все паттерны пользовательского поведения для нашей аудитории.
В «Любимые маршруты» можно добавить любые интересные пользователю направления. Для этого нужно отметить значок с изображением сердца на этапе выбора рейса. После этого в модуле начнут показываться ближайшие рейсы. Если выбрано несколько маршрутов, то между ними можно переключаться при помощи свайпа. В настройках модуля можно выбрать категории поездов, которые следует показывать. Так, например, удобно получать актуальное расписание электричек.
«История поиска» показывает два последних маршрута, которые искал пользователь. Есть отдельная кнопка для просмотра всех поисков.
«Мои билеты» показывают три последних приобретенных проездных документа. По нажатию пользователь переходит на страницу билета со штрих-кодом, где при необходимости можно экспортировать его из приложения. Скажем, отправить себе на почту или сохранить в архив фотографий.
«Новости компании» — это на самом деле объявления для региона, в первую очередь изменения расписания электричек и поездов. Какую именно информацию отображать, можно настроить через фильтры.
Особенности покупки билета в приложении
Мы долго думали, как сделать процедуру максимально понятной, но в то же время позволяющей полностью настроить под себя будущую поездку. В результате не придумали ничего лучше, чем сделать несколько этапов, каждый из которых постепенно конкретизирует условия проезда. До этого нами предпринималась попытка уместить оформление бронирования в 2–3 этапа, но интерфейс получался настолько громоздким, что мы решили отказаться от такой идеи.
Процесс покупки билетов в приложении РЖД
Вот некоторые наши решения:
1. На этапе выбора места в вагоне мы показываем направление движение поезда, расположение туалетов и мест хранения багажа.
2. При выборе места приложение сразу показывает окончательную стоимость бронирования. Это важно, поскольку цена нижних, верхних мест и некоторых «боковушек» отличается.
3. Даже если вы покупаете билет в первый раз, система предложит заполнить строки данными из вашего профиля в личном кабинете, и останется только ввести номер паспорта. При следующих покупках достаточно будет только выбирать нужного пассажира из имеющихся профилей.
4. В приложении можно ввести данные карты РЖД-бонус для начисления бонусов за поездку и/или данные транспортной карты — для получения скидок. Или выбрать льготы, которые РЖД разрешает оформлять онлайн. Например, оформить детский билет.
5. На сайте РЖД наблюдалось не очень удобное явление: если дойти до стадии подтверждения заказа, а потом вернуться назад, то выбранное вами место некоторое время считалось забронированным, и оформить его заново сразу не получалось. В приложении мы это починили: теперь если вернуться с экрана подтверждения назад, то билет разблокируется.
6. Оплату мы сделали в веб-шлюзе ВТБ, а не в самом приложении. Никакие платежные данные не сохраняются. Покупка подтверждается через 3D-secure. Предусмотрена поддержка карт с нестандартными номерами (как в некоторых пакетах Сбербанка).
Есть еще пара вещей, о которых мы хотели бы рассказать
Во-первых, мы реализовали в приложении покупку транспортных карт. Технически это обычные дисконтные карты, которые можно купить на вокзале или на сайте РЖД. К примеру, сейчас за 1000 рублей продается многократная 10%-я скидка на проезд в любых поездах. Карта действует 1 месяц.
Во-вторых, внутри приложения есть навигатор по вокзалам. Он находится в левом меню во вкладке «Вокзалы». Сейчас навигатор работает для восьми объектов, но мы расширим его для всех вокзалов городов, принимающих игры ЧМ2018 по футболу. Оттуда же можно будет связаться со службами вокзала, на котором вы находитесь, — от справочного бюро до начальника вокзала.
Справочная информация по вокзалам
Подробности разработки
Наконец, немного о технической стороне приложения. Серверный бэкенд включает в себя кластер серверов приложений с применением свободного программного обеспечения. В качестве базового ПО мы использовали Redhat Wildfly, Nginx, Apache HTTP server, Memcached и PostgreSQL. Бэкенд обеспечивает взаимодействие мобильных клиентов с целым набором учетных автоматизированных информационных систем РЖД с кэшированием данных для быстрого отклика интерфейса мобильного клиента и возможности динамической фильтрации данных без повторного обращения к интеграционным сервисам РЖД. Помимо этого, на нем лежит реализация горизонтальной масшабируемости и обеспечение обработки до 1 млн запросов в сутки.
Где взять новое приложение
Мы получили разрешение РЖД провести закрытое бета-тестирование приложения до официального релиза.
Чтобы получить бета-версию, просто отправьте на адрес rzd-mobile@i-teco.ru письмо с темой «Тестирование приложения РЖД», и мы быстро пришлем инструкцию и ссылку на приложение. В письме нужно указать операционную систему, для которой вы хотите получить приложение, и имя вашего аккаунта в магазине приложений этой платформы.
Будьте внимательны: текущая версия позволяет сделать практически всё, что будет в готовом приложении, даже купить билет. Но, как это обычно и бывает на стадии бета-теста, мы пока не гарантируем, что всё работает, как надо.
Сейчас приложение доступно для мобильных устройств под управлением iOS версии 8 и выше, на Android версии 4.0.4 и выше, а также на Windows Phone версии 8 и выше. И даже на Windows Mobile (владельцы люмий, мы про вас не забыли!).
Так что приглашаем всех желающих на бета-тест. С удовольствием выслушаем мнения, с пониманием воспримем критику и с радостью обсудим предложения в почте или в комментариях к этой публикации.
Комментарии (5)
Hazrat
7 марта 2017 в 14:22
0↑
↓
Круто, сейчас опубликую в хабре свое портфолио!
ahnyava
7 марта 2017 в 14:23
+1↑
↓
сервер говорит: «Не удалось выполнить доставку следующим получателям или группам:beta-rzd@i-teco.ru (beta-rzd@i-teco.ru)
7 марта 2017 в 14:39
0↑
↓
Обновил email, не тот указал
7 марта 2017 в 14:46
0↑
↓
Отдельное спасибо РЖД за винфон. Жалко, что не UWP, судя по всему, но хоть что-то.7 марта 2017 в 14:56
0↑
↓
Друзья, большая просьба! в письмах указывать платформу, к какой необходимо подключить ваш id: apple, google, microsoft.
