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 circuit:

New after research:

The wagon seat selection scheme is part of the train ticket booking process. 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 lay 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 that it is necessary:

1. More clearly show the upper and lower shelves, this is not obvious to everyone
2. 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
3. Select the openings of the windows, making their location more obvious, as people confuse them with the walls
4. Show more noticeable information about the direction of train movement, many cradle
5. In sit-down wagons, it is more obvious to show the seat spread relative to others – again, so as not to separate
6. 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 Sapsan, – 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 seated:

“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 patterns. We tried to make the schemes more realistic: with the help of pseudo-volume shelves and shadows, we showed the tier in reserved seats and compartment cars. Armchairs in a sitting car resembled armchairs in a movie theater.

It was:

It became:

Handsomely? Yes. Works? No.

Showed the scheme to passengers

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

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

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 seats from neighboring compartments

Visually, these places are closer, so the theory of proximity 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 direction

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. Not on all trains we can show the direction of movement, but in seated 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 on the backs of seats

In seated wagons, it is important for people to turn the seat relative to others. As 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. Conversely, 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 no 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 Fig, completely switching to the vector format. Now, from these components, all the schemes of cars in Tutu.ru are assembled:

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

The team has a detailed guide for assembling circuits. Now railcar schemes 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: places for passengers with animals, the cheapest seats, fellow travelers, direction of travel and photos from a certain angle of the carriage

Everyone knows that by default there are windows and tables in the compartment car, so it’s more important here to show the grouping of seats

Grid

The sizes of the elements and the indentation in the diagrams are 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, a coupe size of 78 x 78 is not a multiple of 4 pixels. In this case, the visible indent from places to the walls of the compartment is 4.

The dimensions of corridors and passageways in wagons are usually equal to one or two place modules.

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.

Car sizes

Inside one class, we strive to make equal-sized railcar designs. In this case, 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 assemble the scheme of car No. 2.

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

Increase the speed of creating schemes

The 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”.

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, duplicate 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. The guys from our team helped to get to know the tool faster “Figma GuideSasha Okuneva.

New schemes can be viewed on our website. For example, here trains from Moscow to Petersburg – We have already rolled up new schemes for Sapsans and Swallows. We have not yet reached the reserved seat, coupe, or SV, and 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.