Moscow will no longer be the same

If you do not design the card at all, then it will look something like this. And this is just one layer of streets.



Conveniently? I think no.

For this reason, we are constantly engaged in the design of the map and make various changes with each update. Today, the design of the map of Moscow has undergone significant changes, and we will tell you more about them.

In short, the goal of card design sounds very short:
Make the card more convenient to use.

Behind the brevity of this formulation is hiding many interesting implementation details.

If we had a magic wand or a magic spell, after reading which the card instantly would become more convenient with each swipe, then this story would end immediately. Or it would not have begun at all. However, this does not happen. The magic is usually hard work.

We studied the feedback from users and experts in the field of design, systematized knowledge of problems and, after a series of discussions, formulated the following requirements for a “convenient map” for ourselves:

- our map should provide the maximum “readability” of objects on the map;

- the card should still be recognizable and familiar to Yandex users (it was not an easy requirement to change the design and at the same time try to keep what users were used to);

- layers of displayed objects (for example, search results, traffic jams) should be clearly distinguishable on the map;

- when printing a card on a black and white printer, the card should be sufficiently contrasted and objects of different types should be distinguishable;

- in the new design for some territories it is necessary to provide for the possibility of bilingual signatures of objects (for a map of Kiev we have already done this, for example);

- make the map so that the most important information for the user, taking into account his current task, is more visible, and less important information on the map fades into the background;

- The new design should include two options for use: just a map as a picture that you can already navigate, as well as a tool for displaying any data (for example, search results). In this case, the design should be one;

- the map design will be used on Yandex.Maps both in the browser and on the mobile device, in addition to this we provide the map to third-party sites and mobile applications through API and MapKit technologies

. Throughout the project, we did not forget about people with visual impairments, about color reproduction of monitors, about sunny weather and screens of mobile devices, about the existing habits of users, about technological limitations, about design trends, about the timing, about our own habits, about preferences and about many other things things.

It is important to note that both pedestrians and motorists use the map. For example, for Moscow motorists, the most important landmarks of the city are highways: the radial-ring structure should be easily readable on all map scales. For pedestrians, areas and metro stations are important (which sometimes turn out to be more important in orientation than areas). The challenge was to keep the balance of these two user groups and maintain the usability of the card.

First and foremost, we streamlined the display styles of highways at the most popular scales. We strove to come to the point that on one scale there should be no more than three styles of highways. In this case, the styles should have been selected so that they could be easily distinguished from each other. Secondly, we decided on this map scale to stop distinguishing between industrial and residential quarters, this is not essential for orientation on this scale, but it made the map overloaded. Thirdly, the highways “made” thinner, so they became clearer, more space appeared between neighboring highways.

 

The signatures of the districts were worked out on this scale, and the stations were highlighted with more visible icons:

 

And on this scale, work with highway styles made the picture “cleaner”. Plus, signatures of metro stations appeared on this scale - for Moscow these are very important landmarks.

 

In one of the previous updates to the map of Moscow, we removed the colored metro lines from the map design, believing that this could prevent motorists from watching traffic jams. We received a lot of letters from users asking them to return the metro lines. We realized that we made a mistake and corrected the design. We came up with a good style for the metro lines, they are now smooth and do not interfere with traffic jams.

 

On the next scale, we made sure that the color of the line at the metro stations was not lost - this is very important for orienting pedestrians.

 

At the next zoom level, motorists will enjoy a pleasant surprise. We added directional arrows; Given the many one-way streets in the center, the map has become more convenient. By the way, in the summer, we pleased motorists of St. Petersburg with a similar innovation.

 

In addition, focusing on complex junctions will now be even more convenient for motorists. For example, the interchange at the intersection of the Moscow Ring Road and the Yaroslavl Highway has changed on a map of crazy complexity:

 

As a result, we have preserved recognition, improved the readability of objects and the display of layers. The card is quite contrasty and easy to watch on your mobile. The new style, of course, will be finalized and implemented in maps of other cities.

The design was created by the map design group in Yandex, with the active participation of the entire service team. At the same time, during the project, we consulted with external experts, whom I would like to thank for valuable advice and recommendations. For example, our experience with the Stamen design team turned out to be useful : we received several valuable recommendations for improving the design and embodied them in this map.

Yandex.Mart Team