Концепт редизайна приложения «РЖД Пассажирам» для iOS

Процесс создания нового интерфейса приложения — с исследованием и отказом от Dribbble-дизайна.

Я как пользователь приложения РЖД столкнулся с рядом проблем интерфейса и взаимодействия. А как дизайнер — решил погрузиться в продукт и посмотреть, как его улучшить. Статья описывает полный процесс создания концепта: предыстория, исследование, прототипирование, дизайн и выводы.

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

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

Можно обвинить дизайнеров, заказчика, который захотел поместить функциональность сайта в одно приложение, но факт остаётся фактом — интерфейс приложения РЖД сложный и местами неочевидный.

Я сделал концепт — приложение для людей и без Dribbble-дизайна на каждом экране. Своего мнения было недостаточно, и я провёл небольшое исследование.

Исследование проводил с коллегами (не дизайнерами) из компании e-Legion:

• пять респондентов не пользуются приложением РЖД;
• два респондента пользуются приложением.

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

После тестирования я получил обратную связь в целом по приложению РЖД и дополнил своими заметками. Составил обобщающий список болевых точек:

• перегрузка и лишняя информация на главном экране и при выборе поездов и вагонов;
• агрессивный цвет меню и оформления в целом;
  
• неинформативные пункты в меню;
  
• тупиковые сценарии работы (например, выбор поезда без вагонов;
  
• отсутствие предупреждений;
  
• неправильные решения в интерфейсе (кнопки меню и назад в navigation bar);
  
• запутанность некоторых разделов (например, «Заказы»).
  

Раздел меню «Вокзалы» никто не понял, хотя это один из самых полезных разделов в приложении.

Туда

• Отправление из Санкт-Петербурга (Московский вокзал) — 24 февраля в 21:00.
• Прибытие в Москву (Ленинградский вокзал) — 25 февраля в 00:35.
  
• 779А Сапсан — сидячие места.
  
• Два пассажира.
  

Обратно

• Отправление из Москвы (Октябрьский вокзал) — 27 февраля в 21:35.
• Прибытие в Санкт-Петербург (Московский вокзал) — 28 февраля в 05:01.
  
• 136*С Фирменный поезд компании — плацкарт.
  
• Один пассажир.
  

Чем дальше в лес, тем толще белки.

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

Промежуточные экраны прототипов перевалили за 50, а концепт расширился до 27.

Мы привыкли сразу делать Tab bar, но в этот раз я хотел разобраться. Tab bar удобнее в интерфейсе, чем «гамбургер», но не является панацеей. В рамках Human Interface Guidelines дизайнеры и разработчики стараются добиться лучшего опыта в iOS, используя чаще Tab bar.

На Android же больше приложений с «гамбургером». Material.io позволяет использовать оба варианта. В большинстве обновлённых сервисов Google есть «гамбургер» и Tab bar. До сих пор нет единого правильного решения для всех.

При выборе стоит исходить из частоты обращений к разделам меню. Если можно выделить три–пять часто используемых разделов, то есть смысл в Tab bar. Если частый раздел один, то «гамбургер» — нормальное решение. Не такое удобное, но только из-за этого переделывать интерфейс нет никакого смысла, иначе — это дизайн ради дизайна, привет, Dribbble. Я выбрал Tab bar, потому что есть необходимость в доступе к трём–пяти разделам.

Сложным оказался выбор отображаемой информации для большой аудитории приложения. Пришлось усреднять выборку информации приложений и представлять опыт реальных пользователей.

По первому рабочему прототипу получил объёмную обратную связь из отдела дизайна и отбросил несколько крутых (как тогда казалось) фишек.

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

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

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

Выбрал размеры и начертания шрифтов, сверстал текстовые блоки, нарисовал иконки, подобрал цвет. Всё делал в символах. Проверял на девайсах через Sketch Mirror и Crystal.

В процессе дизайна прототип слегка менялся. Референсы — приложения Google, «Яндекса», «Туту.ру»

К первому сносному дизайну сделал интерактивный прототип в Figma (быстро и можно комментировать) и отправил в отдел дизайна на ревью.

Параллельно сделал пару экранов в тёмном оформлении. Тёмная тема интерфейса — отличный инструмент для определения акцентов. Впоследствии изменил и основной интерфейс.

После самопроверок собрал ещё 60 правок и завершил экраны для презентации и интерактивного прототипа.

Раздел «Маршруты»

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

Раздел «Заказы»

Основная работа заключалась в правильной вёрстке информации и акцентировании внимании на важном: стоимость, направление, время.

Раздел «Вокзалы»

Главная проблема этого раздела была в том, что ты ещё не успел зайти, а тебя атакуют pop-up, тем самым вызывая негатив. Теперь этот раздел дружелюбен и встречает лёгкими иллюстрациями реальных вокзалов и информацией, которые они предоставляют. Если актуальных вокзалов нет, можно найти любой на соседней вкладке.

Раздел «Ещё»

Теперь можно увидеть уведомления в трёх обновляемых разделах. Названия разделов стали компактнее.

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

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

В процессе я выписывал все наблюдения, которые пригодятся для работы над другими проектами:

• тёмная тема — полезный инструмент проверки интерфейса;

• выбор «гамбургера» и Tab bar всё ещё актуален;

• идеи нужно проверять — некоторые из них просто нереализуемы;
• прототип и дизайн стоит делать в одном инструменте.

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

• Figma — прототип и интерактив;
• Sketch — дизайн;
  
• Adobe Illustrator — иконки и иллюстрации;
  
• Marvel — интерактив для презентации;
  
• Adobe After Effects — анимация.
  

Занимался проектом три месяца с разной степенью вовлечённости. Сейчас я бы отказался от некоторых решений — переделал бы фильтры и сортировку, убрал бы раздел «Заказы» и так далее. Да и вообще постарался бы сделать в один экран — эдакий «РЖД Лайт».

Спасибо за внимание!