🌆 👩🏼‍🌾 👩🏾‍💼 What is wrong with railroad car schemes 👨‍❤️‍💋‍👨 👩🏽‍⚖️ 🍜

Once, a woman called our support team and accidentally separated the family, choosing places in the carriage. She wanted to buy a whole compartment, and took 15, 16, 17 and 18 seats, considering them one group. Even before that, we suspected that it was not convenient for everyone to read the circuits, but at that moment we understood this especially clearly.

Old scheme:

New after research:

The scheme of choosing seats in a car is part of the process of ordering a ticket for a train. Some people are not comfortable reading it and they make mistakes. Plus, in recent years, before quarantine, people from the remote places, far from IT, began to actively travel, and it was especially difficult for them. For example, in the first diagram above, few people can correctly and confidently determine the upper and lower shelves without additional clues.

We conducted a large-scale study on the use of these schemes. We collected and tested several options for how to improve them. Made on the basis of the best version of the UI kit, which is now laid out for free use .

And now I will tell you about what generally can go wrong when choosing seats in different cars.

Weaknesses of old schemes

Running a little ahead, the first study showed what was needed:

More clearly show the upper and lower shelves, this is not obvious to everyone
It is more noticeable to divide the compartment by combining the seats in groups so that people are not mistaken when buying tickets in different compartments
Highlight the window openings, making their location more obvious, as people confuse them with the walls
Show more clearly information about the direction of train movement, many cradle
In sit-down wagons, it is more obvious to show the seat spread relative to others - again, so as not to separate
Strive not for realism in the details of the wagon diagram, but for simplification

There are people who really want to sit by the windows, but cannot figure out how this works:

“There are nuances in Peregrine Falcon, - you can get between the windows, so I look carefully,“ where are the windows. It’s not visible here: is the strip a window or a wall? ”

There are those who can only sleep in a certain direction of train movement. There are those who are rocked in the direction against movement in the sedentary:

"Places that are in the direction and against, - you have to look at where it is directed, maybe tint the backs."

The first approach to the redesign of schemes, "curly"

At first we relied on intuition. We knew that passengers had difficulties, but did not know if these were isolated cases or a pattern. We tried to make the schemes more realistic: with the help of pseudo-volume shelves and shadows, we showed the tiering in reserved seats and compartment cars. Armchairs in a sitting car resembled armchairs in a movie theater.

It was:

It became:

Beautiful? Yes. Works? No.

Showed the scheme to passengers

Then they conducted a large series of interviews, which showed people updated schemes of cars. And we found out the following.

1. People do not understand where the upper and the lower shelf are.

As much as we would like, not all spatial thinking works well. To indicate the upper and lower shelves, more explicit hints are needed. Experienced users know the even-odd scheme, but this is not enough.

“It is necessary to be able to see this volume, in order to understand which shelf is under which - in 3D and it’s good to keep an eye on it - not everyone will be able to.”

2. Mentally combine places from neighboring compartments

Visually, these places are closer, so the proximity theory works. Even a more contrasting wall between the coupe does not help, we checked it.

“I didn’t even notice that these are different compartments - wow! Now, I would now divide the family. "

3. Confused windows and walls.

It is necessary to highlight the window openings, making their location more obvious. There are people who really want to sit by the windows, but cannot figure out how this works.

4. Looking for the direction of movement

There are those who can sleep only in a certain direction of movement of the train. There are those who are rocked in the direction against movement in the sedentary. Not on all trains we can show the direction of movement, but in sit-down cars this is most often possible.

"The movement of the train needs to be brighter, otherwise you can skip it, because a lot of everything is crammed and not visible."

5. Oriented along the backs of seats.

In seated wagons, it is important for people to turn the seat relative to others. Just like in the case of the coupe - so as not to separate. Now the search for the backrest requires extra effort.

6. They want not realism, but simplicity.

High detail and realism raise many questions - each person interprets what he sees in his own way. And on the contrary, removing all unnecessary, we reduce the number of discrepancies. Armrests are an extra decoration. In the picture above, the armrests only create visual noise and make it difficult to understand where the seats look.

Worked on the bugs

Schemes used to be difficult to create and scale. There was not enough constructor. I had to climb into Illustrator, mark the area under the seats in the car and manually rename each place. The background for the diagrams was drawn separately in Photoshop, and then imported into the Illustrator in a raster.

We removed all the excess tinsel and drew the UI kit in Figure, completely switching to the vector format. Now all the wagon diagrams in Tutu.ru are assembled from these components:

Icons and fonts in the open UI kit may differ from those licensed for the company.

The team has a detailed guide for assembling the diagrams. Now schemes of cars can be assembled not only by designers. The task of the designer is to make a review after the circuit is assembled.

On wagon diagrams, we show a person only the information that affects his decision to purchase. If this is a train with seated wagons like Swallows, then it is important to show the location of windows, tables and chair backs.

In the Swallows carriage we show: seats for passengers with animals, the cheapest seats, fellow travelers, direction of travel and photos from a certain angle of the carriage

Everyone knows that in a compartment carriage there are windows and tables by default, therefore it is more important to show the grouping of seats

Grid

Element sizes and the indentation on the diagrams is based on a 4-pixel grid. We doubled the minimum size of the footprint in the diagram so that people miss less when ordering from the phone.

There are exceptions where you need to visually increase or decrease the size of the elements with strokes. For example, the coupe size 78 x 78 is not a multiple of 4 pixels. In this case, the apparent indent from the seats to the walls of the compartment is 4.

The dimensions of the corridors and passages in the cars are usually equal to one or two modules of seats.

Icons

Icons are inscribed in a 24-pixel container. Sometimes it’s useful to reduce the icons to 18 pixels. For example, when you need to designate places for passengers with animals or people with disabilities. Or show fellow travelers on a busy place.

We try to combine the same zones into one icon, without indicating the areas in the car they occupy. For example, if the carriage has a double toilet or two adjacent luggage racks, we show one icon in their place. It is enough for the buyer to have a general idea of what is behind him and how long to go to the toilet.

Dimensions of cars

Inside one class, we strive to make equal-sized schemes for cars. Moreover, the width and height of the schemes at the first stage of drawing the schemes is not limited and depends on the number of components in the scheme. It is useful to start drawing the diagrams of a specific train with a carriage with the most seats.

Using Swallows Premium as an example, we first collect the scheme of car No. 2.

And then for car No. 3 we remove unnecessary places under the zones of toilets, coolers, luggage racks, preserving the original grid and the location of the windows.

Increasing the speed of creating circuits A circuit

designer needs to name each seat according to a template of the form “seat-21”. Sometimes such places in the car may be more than a hundred. The Figure has a good tool for mass renaming layers. It remembers the order of duplication of layers and renames them according to the template "seat- $ N".

We share a set of components for free

You can download a set of components for your wagon diagrams and use it under a Creative Commons BY license.

UI kit of wagon diagrams in Fig →

To use, make a duplicate of the file, and it will appear in your projects.

If you have never worked in Fig, try it - you might like it. This is a handy web tool used by designers around the world. Sasha Okuneva's “ Guide to Figma ” helped the guys from our team get to know the instrument faster .

New schemes can be viewed on our website. For example, here are the trains from Moscow to St. Petersburg - we have already rolled up new schemes for the Sapsans and Swallows. We haven’t reached the reserved seat, coupe and SV yet, we are working on it.

Well, of course, schemes can be used anywhere: if carriers, Russian Railways or someone else wants to apply or modify them to build their own on the basis of them, we are all for it.