Концепт редизайна приложения «РЖД Пассажирам» для 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, но в этот раз я хотел разобраться. 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 — анимация.

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

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

0
55 комментариев
Написать комментарий...
Павел

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

Ответить
Развернуть ветку
Дмитрий Ковалев
Автор

Дело было так. Я смотрел билет 26 января (условно) на 27 января в 22:10. Свободных мест не было в большинстве вагонов и начал искать что-то поближе например в 21:50 отбытие мне подходит. Посмотрел цены, даты и видимо (уже не помню своих точных действий) время выбрал а дата оказалась сегодняшняя — 26 января.

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

Ответить
Развернуть ветку
Max Smirnov

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

Ответить
Развернуть ветку
52 комментария
Раскрывать всегда