Редизайн «Билеты РЖД»: 4 древних проблемы в UX, от которых пора избавиться

В работу к дизайнеру Ratio Кате Шведюк попало приложение, которое не менялось с 2014 года. Мы нашли в нём типичные UX-болячки того времени — избавляйтесь от этих решений, если они до сих пор используются в ваших интерфейсах.

Первое официальное приложение Российских железных дорог появилось в 2016 году и называлось «Билеты на поезд». Но значительно раньше разработчик Дмитрий Струков сделал независимое приложение «Билеты РЖД».

Люди пользуются приложением до сих пор: «Билеты РЖД» установили более 1 млн раз, а ребята из Google даже включали его в подборки «Выбор редакции». В мелочах оно удобнее, чем официальное — например, можно выбрать сразу всех нужных пассажиров из списка сохранённых, а не добавлять каждого через отдельный поп-ап.

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

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

В 2014 году сама возможность купить что-то в онлайне была фишкой — этот опыт не нужно было встраивать в жизненные ситуации, он был чем-то из ряда вон. Теперь же приложения стали частью ежедневной рутины, поэтому дизайнеры и проектировщики интерфейсов должны думать о том, как их в эту рутину встроить.

Обычно пользователи открывают приложение РЖД, чтобы показать билет проводнику или вспомнить, во сколько отправляется поезд. Хорошо, когда для этого достаточно свайпнуть вниз — без ковыряния в менюшках.

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

Виджет с ближайшими событиями на главном экране — важная фишка для всех приложений, в которых есть продажа билетов или онлайн-запись на услугу. Если экран нужно показывать на кассе или администратору, то вся необходимая информация должна быть доступна сразу после открытия.

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

В итоге у приложения мог быть богатый инструментарий, о котором никто не знал. Чтобы разобраться с функциями, приходилось либо читать мануалы, либо искать учителей среди знакомых. Это уместно, если мы говорим о профессиональном приложении, вроде Figma или Photoshop. Но приложение с билетами точно заслуживает того, чтобы отдельно в нём разбираться?

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

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

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

Раньше выбор цвета был вопросом стиля: все элементы сайта выполнялись либо в корпоративных цветах, либо в цветах, которые нравятся руководству. Сейчас UX-дизайнеры используют цвет как дополнительный смысловой канал.

Выбор мест. Цветовое кодирование разделяет верхние и нижние места — пассажиры часто путают их при покупке билетов. В старом дизайне схема вагона тоже была цветной, но обозначения не расшифровывались. Было трудно понять, что розовый — это женское место, так что в новом дизайне Катя добавила расшифровку.

Ввод паспортных данных. Имя пассажира и кнопка подтверждения меняют цвет, когда все поля заполнены и пора переходить к следующему шагу.

Оплата. По правилам РЖД оплатить билеты можно только в течение 15 минут после заказа. Чем меньше осталось времени, тем агрессивнее становится цвет шапки.

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

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

Это все UX-проблемы из 2014, которые мы нашли. А какие типичные косяки старых приложений помните вы?

Мы выложили больше скриншотов нового интерфейса на Behance — посмотрите и поделитесь мнением в комментариях. Если вам понадобится дизайн и разработка для приложения или веб-проекта, обращайтесь в Ratio.

Катя Шведюк ВКонтакте

«Билеты РЖД» в Google Play

#ux #интерфейсы #мобильные_приложения #ржд