Концепт редизайна приложения «РЖД Пассажирам» для 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 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

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

Субъективное суждение.

Это приложение я тоже анализировал и оно не без проблем. Например, принцип отображения информации поезда не самый очевидный - время слева, внутри блока симметричная композиция но информация по логике расположения разная (номер поезда слева а справа время прибытия) и это странно.

Оно простое и в этом главное преимущество.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

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

можете смело брать на вооружение идеи из концепта) буду только рад

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

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