Однажды в нашу службу поддержки позвонила женщина, которая случайно разделила семью, выбирая места в вагоне. Она хотела купить целое купе, а взяла 15, 16, 17 и 18 места, считая их одной группой. Мы и до этого подозревали, что не всем удобно считывать схемы, но в тот момент поняли это особенно явно.
Старая схема:
Новая после исследований:
Схема выбора мест в вагоне — часть процесса заказа билета на поезд. Некоторым людям неудобно ее читать и они делают ошибки. Плюс в последние годы, до карантина, начали активно путешествовать люди из глубинки, далекие от ИТ, и им было особенно сложно. Например, на первой схеме выше мало кто может правильно и уверенно определить верхние и нижние полки без дополнительной подсказки.
Мы провели масштабное исследование об использовании этих схем. Собрали и протестировали несколько вариантов того, как можно их улучшить. Сделали на основе лучшего варианта UI-кит, который теперь выкладываем для свободного использования.
А я сейчас расскажу вам про то, что вообще может пойти не так при выборе мест в разных вагонах.
Слабые места старых схем
Забегая чуть вперед, первое исследование показало, что нужно:
- Более явно показывать верхние и нижние полки, это не всем очевидно
- Заметнее разделить купе, объединив места в группы, чтобы люди не ошибались, покупая билеты в разных купе
- Выделить проемы окон, сделав их расположение более очевидным, так как люди путают их со стенами
- Показывать заметнее информацию о направлении движения поезда, многих укачивает
- В сидячих вагонах более явно показывать разворот кресла относительно других — опять же, чтобы не разделяться
- Стремиться не к реализму в деталях схемы вагона, а к упрощению
Есть люди, которые очень хотят сидеть у окон, но не могут разобраться, как это устроено:
«В Сапсане есть нюансы, — между окошками можно попасть, поэтому я внимательно смотрю, — где окна. Здесь не видно: полоска — это окошко или стенка?»
Есть те, кто может спать только в определенном направлении движения поезда. Есть те, кого укачивает по направлению против движения в сидячих:
«Места, которые по направлению и против, — приходится разглядывать, куда оно направлено, может, спинки подкрасить».
Первый подход к редизайну схем, «кучерявый»
Сначала мы полагались на интуицию. Мы знали, что у пассажиров есть сложности, но не знали, единичные это случаи или закономерность. Мы попробовали сделать схемы более реалистичными: с помощью псевдообъемных полок и теней показали ярусность в плацкартных и купейных вагонах. Кресла в сидячем вагоне напоминали кресла в кинотеатре.
Было:
Стало:
Красиво? Да. Работает? Нет.
Показали схемы пассажирам
Затем провели большую серию интервью, на которых показали людям обновленные схемы вагонов. И выяснили следующее.
1. Люди не понимают, где верхняя, а где нижняя полка
Как бы нам ни хотелось, не у всех хорошо срабатывает пространственное . Для обозначения верхних и нижних полок нужны более явные подсказки. Опытные пользователи знают схему «чёт-нечет», но этого мало.
«Это надо объемно уметь видеть, чтобы понять, какая полка под какой, — в 3Д и хорошо еще присматриваться, — не все так смогут».
2. Мысленно объединяют места из соседних купе
Визуально эти места ближе, поэтому работает теория близости. Даже более контрастная стенка между купе не помогает, мы это проверили.
«Я даже не заметила, что это разные купе, — ничего себе! Вот, я бы сейчас разделила бы семью».
3. Путают окна и стены
Необходимо выделить проемы окон, сделав их расположение более очевидным. Есть люди, которые очень хотят сидеть у окон, но не могут разобраться, как это устроено.
4. Ищут направление движения
Есть те, кто может спать только в определенном направлении движения поезда. Есть те, кого укачивает по направлению против движения в сидячих. Не во всех поездах мы можем показать направление движения, но в сидячих вагонах это чаще всего возможно.
«Движение поезда надо ярче, а то можно пропустить, так как много всего напихано и не видно».
5. Ориентируются по спинкам кресел
В сидячих вагонах людям важен разворот кресла относительно других. Так же как и в случае с купе — чтобы не разделяться. Сейчас поиск спинки требует лишних усилий.
6. Хотят не реализма, а простоты
Высокая детализация и реализм вызывают много вопросов — каждый человек трактует увиденное по-своему. И напротив, убирая все лишнее, мы уменьшаем количество разночтений. Подлокотники — это лишнее оформительство. На картинке выше подлокотники лишь создают визуальный шум и мешают понять, куда смотрят кресла.
Поработали над ошибками
Раньше схемы было сложно создавать и масштабировать. Не хватало конструктора. Приходилось лезть в Иллюстратор, размечать область под места в вагоне и вручную переименовывать каждое место. Фон для схем рисовался отдельно в Фотошопе, а затем в растре импортировался в Иллюстратор.
Мы убрали всю лишнюю мишуру и нарисовали UI-кит в Фигме, полностью перейдя на векторный формат. Теперь из этих компонентов собираются все схемы вагонов в Туту.ру:
Иконки и шрифты в открытом UI-ките могут отличаться от лицензированных для компании
В команде есть подробный гайд по сборке схем. Сейчас схемы вагонов могут собирать не только дизайнеры. Задача дизайнера — сделать ревью после того, как схема собрана.
На схемах вагонов мы показываем человеку только ту информацию, которая влияет на его решение о покупке. Если это поезд с сидячими вагонами вроде Ласточки, то здесь важно показать расположение окон, столов и спинок кресел.
В вагоне Ласточки мы показываем: места для пассажиров с животными, самые дешевые места, попутчиков, направление движения и фотографии с определенного ракурса вагона
Все знают, что в купейном вагоне по умолчанию есть окна и столы, поэтому здесь важнее показать группировку мест
Сетка
Размеры элементов и отступы на схемах опираются на 4-пиксельную сетку. Минимальный размер посадочного места на схеме мы увеличили почти в два раза, чтобы люди меньше промахивались при заказе с телефона.
Бывают исключения там, где необходимо визуально увеличить или уменьшить размеры элементов с обводками. Например, размер купе 78 x 78 не кратен 4 пикселям. При этом видимый внутренний отступ от мест до стен купе равен 4.
Размеры коридоров и проходов в вагонах обычно равны одному или двум модулям мест.
Иконки
Иконки вписаны в 24-пиксельный контейнер. Иногда иконки бывает полезно уменьшить до 18 пикселей. Например, когда нужно обозначить места для пассажиров с животными или людей с ограниченными возможностями. Либо показать попутчиков на занятом месте.
Одинаковые зоны мы стараемся объединить в одну иконку, не обозначая области в вагоне, которые они занимают. Например, если в вагоне есть сдвоенный туалет или две рядом стоящие багажные полки, мы показываем на их месте по одной иконке. Покупателю достаточно иметь общее представление, что находится за его спиной и как долго идти до туалета.
Размеры вагонов
Внутри одного класса мы стремимся делать равные по размерам схемы вагонов. При этом ширина и высота схем на первом этапе отрисовки схем не ограничена и зависит от количества компонентов на схеме. Полезно начинать отрисовку схем конкретного поезда с вагона, в котором больше всего посадочных мест.
На примере Ласточки Премиум мы сначала собираем схему вагона №2.
А затем для вагона №3 убираем ненужные места под зоны туалетов, кулера, багажных полок, сохраняя первоначальную сетку и расположение окон.
Увеличение скорости создания схем
Дизайнеру схем нужно называть каждое место по шаблону вида «seat-21». Иногда таких мест в вагоне может быть больше сотни. В Фигме есть хороший инструмент массового переименования слоев. Он запоминает порядок дублирования слоев и переименовывает их по шаблону «seat-$N».
Делимся набором компонентов бесплатно
Вы можете скачать себе набор компонентов для схем вагонов и пользоваться им по лицензии Creative Commons BY.
UI-кит схем вагонов в Фигме →
Для использования сделайте дубликат файла, и он появится в ваших проектах
Если вы никогда не работали в Фигме, попробуйте — вам, возможно, понравится. Это удобный веб-инструмент, которым пользуются дизайнеры по всему миру. Быстрее познакомиться с инструментом ребятам из нашей команды помогло «Руководство по Figma» Саши Окунева.
Новые схемы можно посмотреть на нашем сайте. Например, вот поезда из Москвы в Петербург — новые схемы мы уже накатили для Сапсанов и Ласточек. До плацкарты, купе и СВ пока не добрались, работаем над этим.
Ну и, конечно, схемы можно использовать где угодно: если перевозчики, РЖД или кто-то еще хочет их применять или модифицировать, чтобы строить на основе них свои — мы только за.
Автор: Саша Куликов
