Что не так со схемами вагонов железной дороги

в 12:55, , рубрики: ui kit, usability, Блог компании Туту.ру, вагон, выбор места, графический дизайн, железная дорогая, интерфейс, схема, транспорт

Однажды в нашу службу поддержки позвонила женщина, которая случайно разделила семью, выбирая места в вагоне. Она хотела купить целое купе, а взяла 15, 16, 17 и 18 места, считая их одной группой. Мы и до этого подозревали, что не всем удобно считывать схемы, но в тот момент поняли это особенно явно.

Старая схема:

Что не так со схемами вагонов железной дороги - 1

Новая после исследований:

Что не так со схемами вагонов железной дороги - 2

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

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

А я сейчас расскажу вам про то, что вообще может пойти не так при выборе мест в разных вагонах.

Слабые места старых схем

Забегая чуть вперед, первое исследование показало, что нужно:

  1. Более явно показывать верхние и нижние полки, это не всем очевидно
  2. Заметнее разделить купе, объединив места в группы, чтобы люди не ошибались, покупая билеты в разных купе
  3. Выделить проемы окон, сделав их расположение более очевидным, так как люди путают их со стенами
  4. Показывать заметнее информацию о направлении движения поезда, многих укачивает
  5. В сидячих вагонах более явно показывать разворот кресла относительно других — опять же, чтобы не разделяться
  6. Стремиться не к реализму в деталях схемы вагона, а к упрощению

Есть люди, которые очень хотят сидеть у окон, но не могут разобраться, как это устроено:

«В Сапсане есть нюансы, — между окошками можно попасть, поэтому я внимательно смотрю, — где окна. Здесь не видно: полоска — это окошко или стенка?»

Есть те, кто может спать только в определенном направлении движения поезда. Есть те, кого укачивает по направлению против движения в сидячих:

«Места, которые по направлению и против, — приходится разглядывать, куда оно направлено, может, спинки подкрасить».

Первый подход к редизайну схем, «кучерявый»

Сначала мы полагались на интуицию. Мы знали, что у пассажиров есть сложности, но не знали, единичные это случаи или закономерность. Мы попробовали сделать схемы более реалистичными: с помощью псевдообъемных полок и теней показали ярусность в плацкартных и купейных вагонах. Кресла в сидячем вагоне напоминали кресла в кинотеатре.

Было:

Что не так со схемами вагонов железной дороги - 3

Что не так со схемами вагонов железной дороги - 4

Стало:

Что не так со схемами вагонов железной дороги - 5

Что не так со схемами вагонов железной дороги - 6

Красиво? Да. Работает? Нет.

Показали схемы пассажирам

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

Что не так со схемами вагонов железной дороги - 7

1. Люди не понимают, где верхняя, а где нижняя полка

Как бы нам ни хотелось, не у всех хорошо срабатывает пространственное мышление. Для обозначения верхних и нижних полок нужны более явные подсказки. Опытные пользователи знают схему «чёт-нечет», но этого мало.

«Это надо объемно уметь видеть, чтобы понять, какая полка под какой, — в 3Д и хорошо еще присматриваться, — не все так смогут».

Что не так со схемами вагонов железной дороги - 8

2. Мысленно объединяют места из соседних купе

Визуально эти места ближе, поэтому работает теория близости. Даже более контрастная стенка между купе не помогает, мы это проверили.

«Я даже не заметила, что это разные купе, — ничего себе! Вот, я бы сейчас разделила бы семью».

Что не так со схемами вагонов железной дороги - 9

3. Путают окна и стены

Необходимо выделить проемы окон, сделав их расположение более очевидным. Есть люди, которые очень хотят сидеть у окон, но не могут разобраться, как это устроено.

Что не так со схемами вагонов железной дороги - 10

4. Ищут направление движения

Есть те, кто может спать только в определенном направлении движения поезда. Есть те, кого укачивает по направлению против движения в сидячих. Не во всех поездах мы можем показать направление движения, но в сидячих вагонах это чаще всего возможно.

«Движение поезда надо ярче, а то можно пропустить, так как много всего напихано и не видно».

Что не так со схемами вагонов железной дороги - 11

5. Ориентируются по спинкам кресел

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

Что не так со схемами вагонов железной дороги - 12

6. Хотят не реализма, а простоты

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

Поработали над ошибками

Раньше схемы было сложно создавать и масштабировать. Не хватало конструктора. Приходилось лезть в Иллюстратор, размечать область под места в вагоне и вручную переименовывать каждое место. Фон для схем рисовался отдельно в Фотошопе, а затем в растре импортировался в Иллюстратор.

Мы убрали всю лишнюю мишуру и нарисовали UI-кит в Фигме, полностью перейдя на векторный формат. Теперь из этих компонентов собираются все схемы вагонов в Туту.ру:

Что не так со схемами вагонов железной дороги - 13
Иконки и шрифты в открытом UI-ките могут отличаться от лицензированных для компании

В команде есть подробный гайд по сборке схем. Сейчас схемы вагонов могут собирать не только дизайнеры. Задача дизайнера — сделать ревью после того, как схема собрана.

На схемах вагонов мы показываем человеку только ту информацию, которая влияет на его решение о покупке. Если это поезд с сидячими вагонами вроде Ласточки, то здесь важно показать расположение окон, столов и спинок кресел.

Что не так со схемами вагонов железной дороги - 14

В вагоне Ласточки мы показываем: места для пассажиров с животными, самые дешевые места, попутчиков, направление движения и фотографии с определенного ракурса вагона

Что не так со схемами вагонов железной дороги - 15

Все знают, что в купейном вагоне по умолчанию есть окна и столы, поэтому здесь важнее показать группировку мест

Сетка

Размеры элементов и отступы на схемах опираются на 4-пиксельную сетку. Минимальный размер посадочного места на схеме мы увеличили почти в два раза, чтобы люди меньше промахивались при заказе с телефона.

Что не так со схемами вагонов железной дороги - 16

Бывают исключения там, где необходимо визуально увеличить или уменьшить размеры элементов с обводками. Например, размер купе 78 x 78 не кратен 4 пикселям. При этом видимый внутренний отступ от мест до стен купе равен 4.

Что не так со схемами вагонов железной дороги - 17

Размеры коридоров и проходов в вагонах обычно равны одному или двум модулям мест.

Что не так со схемами вагонов железной дороги - 18

Иконки

Иконки вписаны в 24-пиксельный контейнер. Иногда иконки бывает полезно уменьшить до 18 пикселей. Например, когда нужно обозначить места для пассажиров с животными или людей с ограниченными возможностями. Либо показать попутчиков на занятом месте.

Что не так со схемами вагонов железной дороги - 19

Одинаковые зоны мы стараемся объединить в одну иконку, не обозначая области в вагоне, которые они занимают. Например, если в вагоне есть сдвоенный туалет или две рядом стоящие багажные полки, мы показываем на их месте по одной иконке. Покупателю достаточно иметь общее представление, что находится за его спиной и как долго идти до туалета.

Что не так со схемами вагонов железной дороги - 20

Размеры вагонов

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

На примере Ласточки Премиум мы сначала собираем схему вагона №2.

Что не так со схемами вагонов железной дороги - 21

А затем для вагона №3 убираем ненужные места под зоны туалетов, кулера, багажных полок, сохраняя первоначальную сетку и расположение окон.

Что не так со схемами вагонов железной дороги - 22

Увеличение скорости создания схем

Дизайнеру схем нужно называть каждое место по шаблону вида «seat-21». Иногда таких мест в вагоне может быть больше сотни. В Фигме есть хороший инструмент массового переименования слоев. Он запоминает порядок дублирования слоев и переименовывает их по шаблону «seat-$N».

Что не так со схемами вагонов железной дороги - 23

Делимся набором компонентов бесплатно

Вы можете скачать себе набор компонентов для схем вагонов и пользоваться им по лицензии Creative Commons BY.

UI-кит схем вагонов в Фигме →

Для использования сделайте дубликат файла, и он появится в ваших проектах

Если вы никогда не работали в Фигме, попробуйте — вам, возможно, понравится. Это удобный веб-инструмент, которым пользуются дизайнеры по всему миру. Быстрее познакомиться с инструментом ребятам из нашей команды помогло «Руководство по Figma» Саши Окунева.

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

Ну и, конечно, схемы можно использовать где угодно: если перевозчики, РЖД или кто-то еще хочет их применять или модифицировать, чтобы строить на основе них свои — мы только за.

Автор: Саша Куликов

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js