Концепт редизайна приложения «РЖД Пассажирам» для 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 — анимация.
Занимался проектом три месяца с разной степенью вовлечённости. Сейчас я бы отказался от некоторых решений — переделал бы фильтры и сортировку, убрал бы раздел «Заказы» и так далее. Да и вообще постарался бы сделать в один экран — эдакий «РЖД Лайт».
Спасибо за внимание!
Комментарий недоступен
Неплохой редизайн.
Покликав по прототипу отмечу, что нет возможности выбрать места в вагоне - это важный кейс, когда покупаешь билет, этому уделяешь много внимания. Выбор вагонов неплохо реализован в приложении туту.
А еще нет возможности купить сразу несколько билетов - сценарий заточен под одиночную поездку.
Но за исключением таких недочетов, которые естественны для концепта, моно сказать что это гораздо лучше чем то что сейчас есть у РЖД. На вот этом блоке стало очень смешно
Выбор вагона, экран фильтрации — важные кейсы согласен, но к сожалению мне пришлось ограничить время на прототипирование.
Почему нельзя? Можно!) в разделе "Заказы" сам Заказ может содержать в себе несколько билетов. В примере их как раз два. Увидеть этот пример можно в интерактивном прототипе и в этой статье.
В ржд отправляли?)
сделали заход) существующее приложение их полностью устраивает
«Проводник сказал, что мой поезд ушёл вчера, и деньги за билет вернуть я уже не успею.»
Простите, а как можно забыть о том, что у вас запланирована поездка и ещё вы поехали на вокзал спустя день? Вы ошиблись датой в покупке билета?
История знает немало случаев, когда люди, беря билеты на, например, 00:05 24 апреля, приходили на вокзал в 23:40 24 апреля и начинали слегка недоумевать. Это время всё ещё считается поздним вечером, а не началом следующих суток, особенно если шибко не вдумываться.
Дело было так. Я смотрел билет 26 января (условно) на 27 января в 22:10. Свободных мест не было в большинстве вагонов и начал искать что-то поближе например в 21:50 отбытие мне подходит. Посмотрел цены, даты и видимо (уже не помню своих точных действий) время выбрал а дата оказалась сегодняшняя — 26 января.
Цейтнот и моя невнимательность. Но отсутствие уведомлений, что мое отправление будет через пару часов побудило сделать этот проект.
Комментарий недоступен
Субъективное суждение.
Это приложение я тоже анализировал и оно не без проблем. Например, принцип отображения информации поезда не самый очевидный - время слева, внутри блока симметричная композиция но информация по логике расположения разная (номер поезда слева а справа время прибытия) и это странно.
Оно простое и в этом главное преимущество.
Отличная работа, Дмитрий. Мне нравится даже больше официальной прилы. Ну и вообще проблема же не в дриббл-дизайне как таковом...
спасибо) да проблемы в дрибл-дизайне и нет. просто дизайнер может за красотой упустить смысл и хороший пользовательский опыт. на дрибле таких кейсов полно. я целил в опыт больше, меньше в красоту
Подскажите в чем смысл использования такого количества приложений? Когда можно было того же добиться меньшим. Вместо марвела и фигмы можно было использовать, например, только марвел. Рисовать иконки в иллюстраторе мне кажется жутко неудобно. Гораздо проще это делать в фигме или скече. Каких то сложных композиций у вас я не нашел. Я бы вообще только фигмой ограничился и чем то еще для анимаций
На этапе прототипа мне нужен был фидбек от коллег ,и чтобы было полное представление я сделал интерактив в Фигме. В Фигме сидят все и там же я получил комментарии. Возможно в Марвеле можно комментировать (не пробовал), но не факт что все ее юзают.
Когда делал презентацию на Биханс выбрал Марвел, потому что можно встроить интерактив в тело презы. Возможно так можно и в Фигме, но в Марвеле я был уверен за итоговый результат.
По поводу создания векторной графики все субъективно. Я знаю что Фигма сделает базовую графику, знаю что Скетч сделает больше базы и уверен что Люстра сделает вообще любую графику. В ней и работаю. Дело привычки
Все бы хорошо, если бы не этот мерзотный модный белый цвет. Посмотрите на оф приложения iOS, там по минимуму чисто белого цвета, везде оттенки светло-серого.
Уже третий радизайн РЖД в этом году - вы там все с тендера идете?
Как то предлагали работу в конторе которые главный портал для РЖД делают. После общения выяснилось что они после релиза записывают его на CD!!! диск и передают лично в руки заказчику в лице РЖД. После этого желание работать отпало, и я понял почему при покупке билетов через их сайт я матерюсь раз 5. Про карту лояльности я вообще молчу, UI сделан так что бы никто и никогда её не зарегистрировал и не получил бонусы.
Комментарий недоступен
Комментарий недоступен
и что в итоге? отправили им? или делали чисто для себя?
Отправили. Их устраивает существующее приложение
Не увидел в прототипе выбора времени при поиске билета - часы или хотя время суток(в текущем приложении выбор диапазона часов есть), а также типы поездов: сидячий и остальные.
Их в концепте нет. Пришлось опустить самые очевидные экраны.
Если показывать вообще все детали и сценарии приложения, то объем перевалит за 150 экранов (предположительно) и на такой проект потребуется куда больше времени, которого у меня не было.
кстати новый сайт ржд таки синхронизировали со старой базой данных, щас зашел и смог залогиниться и посмотреть старые заказы. а месяц назад не работало.
ну и вообще (с осторожностью) признаю, что сайт радует глаз.
https://ticket.rzd.ru/en#/
Хороший подход и очень неплохой дизайн, но простите меня за задротство: контурная иконка Ленинградского вокзала как-то подозрительно похожа на Казанский вокзал, а между тем Ленинградский и Московский - здания близнецы. Может тут как-то по-другому обыграть?
Все верно - они близнецы. И если бы я сделал на разных вокзалах одну и ту же иллюстрацию, это было бы похоже на лень и копипасту. Так что пришлось немного пофантазировать. Задача была показать, что у каждого вокзала будет своя уникальная иллюстрация.
У Busfor прям зеркальное отображение официальной ржд приложеньки. Кто у кого стянул?
3 дня в Москве это пытка. Нужен другой кейс.
Проделана огромная работа, но результат ничем не лучше предыдущего.
Плохо. Много работы проделано, но столько же много важных моментов упущено. Лучше проработать 2/3 Самых Важных кейса со всеми нюансами и на основании этого сделать Look and Feel концепт. Тогда, можно будет оценить на сколько круто сделано. Сейчас, кажется, что если в этот концепт добавить функционала из жизни — то всё сломается. Например, в жизни фильтр ну никак не будет тэгами)) Как выбрать тэгами время с 21 до 12 ночи в пятницу?
В прототип есть пример экрана с выбором фильтров (выбор времени там есть). И он реализован не тегами. Собственно фильтры в виде тегов отображаются после применения фильтра.
Отлично выступил с этим проектом в субботу, было интересно послушать про него после того, как прочитал здесь!
Спасибо! рад что понравилось =)
Хороший крепкий кейс!
спасибо)
Я так понимаю, что когда становишься дизайнером или менеджером продукта, то избежать мутаций отдела мозга, отвечающего за метафоры, никак нельзя:
отказ от «dribbble-дизайна» 🤦🏻♂️