Design Yandex.Maps as a science and passion

Published on July 09, 2013

Design Yandex.Maps as a science and passion

    My name is Andrey Karmatsky, and I lead the work on the design of Yandex.Maps. In the spring, I went to Novosibirsk to the Codefest 2013 conference , where I talked about how we develop the design of Yandex.Maps. It was a good opportunity to structure the accumulated knowledge into a small story that I would like to share with you.

    Why do I like cards?


    The cards fascinate me with their beauty, which hides a lot of meaning - information painstakingly collected and structured.

    For example, the Carta Marina of the Magnus brothers. It may seem that this is just a beautiful illustration. In fact, this is a unique historical document that contains a lot of information and historical facts about Northern Europe of the 16th century. To date, only two copies of this map have been preserved. Today, after many, many years, technologies and algorithms allow you to create incredible things in cartography.

    Carta Marina of the Magnus brothers



    Watercolor by Stamen Design.

    Watercolor by Stamen Design
    Map tiles by Stamen Design. Data by OpenStreetMap

    Some artists also like maps, and they use them to create their paintings or draw pictures in the form of fictional maps. For example, artist Matt Cusick created a series of works from old American geography textbooks.

    But a map is not just a picture. The correct presentation of information helps make important decisions.



    The more accurate and complete the information is presented, the more correctly the decisions will be made. For example, a commander’s work card.

    image
    From the book “The Commander’s Working Map” by I. D. Pombrick and N. A. Shevchenko. The

    correct presentation of map data can save lives. This is well illustrated by the story of London doctor John Snow, who during an outbreak of cholera in 1854 in the Soho district interviewed residents and marked cases of cholera on the map.

    image

    After three days of observing and examining the map, he concluded that the water column on Broad Street was infected. As a result, it was decided to bury it. After that, cases of illness sharply declined. Now at this place is a memorial dedicated to John Snow.

    image

    And there are many such stories - when a correctly made map helped people - a lot.

    So why do I like doing cards? Cartographic design is the design of information, and information design is:

    1. Complexity . We work with large volumes of data. It is necessary to make decisions not only about which ones are needed, but also about how to use them as useful as possible.
    2. Interdisciplinarity . To develop convenient maps, you need to be not only a designer or a cartographer. You need to be a researcher, psychologist and expert in several areas. Sometimes we even have to attract outside experts.
    3. The experiments . This is incredibly cool: not only to do something, but also to see what the result is, and watch how people use it. Working with maps is a lot of experimentation and almost unlimited possibilities to create something new.

    Some guys explain the meaning of web mapping like this: B is very close to what we do. So, the design of Yandex.Maps. I’ll tell you what we need to know in order to make a good map.

    Tim wallace



    Context and Environment


    I have already said that a map is data, and without any design, it will look like this.



    Just a layer of streets. And if you add a river and a layer of buildings, then so.



    And we need to constantly come up with something so that people do not see our Maps as in these pictures.
     
    It may seem to an ordinary observer that almost nothing changes in Yandex.Maps. But if you look at the time slices, it becomes noticeable that we are constantly introducing something new and experimenting.

    How Yandex.Maps design has changed

    But other guys work and improve their products. They must be watched and watch what they have done.

    Other cards are also changing.

    Other cards are also changing.

    It is important not to forget that the cards developed on paper and “live” on it for many, many years, so a lot of experience can be gained from studying paper cards:

    These are all my cards.

    But Yandex.Maps is an interactive product, and simply by switching the scale, the user switches several static (paper) maps. This means that our map must be visually consistent, regardless of how much information is displayed on it. Changing the design of the map with switching the scale should be predictable for the user. 



    In addition, Yandex.Maps are mainly used in two qualities: directly as a map and as a substrate for displaying various layers of information.

    Different layers on Yandex.Maps

    Our card is used on a mobile phone: both on a sunny day and at night. And, of course, hundreds of thousands of drivers look at her like that in the passenger compartment.



    Despite the development of mobile technology, our card is being printed. And printers do not always print well.

    You must always consider how the card will look printed

    By the way, one of the observations in Moscow - pedestrians are looking at a printout of a map at the moment when they climb up the escalator from the metro, preparing to go through the so-called “last mile”. And there is not very good lighting.

    Users



    In addition to the environment, it is very important for us to know for whom we are creating our product and how these people will use it. The first thing that comes to mind for solving this problem is determining the territory of interest of users: where they look on the map and how intense.

    The heatmap of requests shows well that people are interested in cities and territories along highways.

    Heat Map Queries

    Since we are making an interactive map, it is imperative to consider that users have different requests at different scales.
     
    If it’s very rude, then the scenarios for using different scales are approximately as follows:

    1. A man looks at the whole world. He wants to find and recognize continents in order to find the country of interest to him.
    2. A person looks at a country (as in the picture above). He is interested in the location of cities and the connections between them.
    3. A man looks at the whole city. It is important for him to see areas and main highways: the main arteries of highways make large cities recognizable and distinguishable among themselves.
    4. A man looks at the area. The streets and more local parts of the district are important to him.
    5. A man looks at the quarter or looks at the street. He is interested in the “last mile” of his route / search interest.

    image

    If you think a little more, then for a better understanding of your users, you can look at the statistics of requests from those who use Traffic.

    image

    It turns out that we have two worlds that intersect somewhere on a medium scale: pedestrians and motorists. This means that the design of the city map needs to be developed based on the needs of these two groups and understanding to whom the scale of the map is more important now.

    image

    The presence of two different “maps of Moscow” can be illustrated in the image below.

    The difference between pedestrians and motorists

    Pedestrians know the surroundings around the metro quite well. These are islands with some urban life, weakly connected with each other (this is due to the fact that the metro scheme that does not correspond to the geographical location of the stations completely distorts their ideas about the real location of these stations). Motorists move along the corridors of highways and know the road map quite well.

    I decided to conduct a little experiment on myself. In the first picture I marked the roads on which I feel confident without a map - the main streets where I often travel. I immediately remembered the routes to work, the streets near the house or near work and the road to airports or other places I often went to (large shops, for example).

    So drivers are guided by the map

    And in the second picture I painted my “pedestrian” Moscow: areas where I do not need a map for orientation.

    So guided by the map pedestrians

    In smaller cities, where the subway is not so developed, pedestrians and motorists interfere with each other less. Pedestrians moving on foot or by public transport know the city better. The attraction points for them are mainly areas or squares, and motorists use the streets, also knowing the areas well.

    image
    The central part of Novosibirsk: areas, metro and streets. A

    pedestrian does not imagine the area at all as it is shown on the map. And the orientation is not the same, and the points are of a completely different interest. A mental map of the area in the head of people is a very important thing, the understanding of which helps to make maps more convenient and more receptive. 

    So we usually imagine a map

    In addition to memory, a person has eyesight. Therefore, it is necessary to take into account the visual abilities of a person. According to various estimates, up to 10% of the male population of the planet havecolor perception disorders . Among women, they are much less common - only in 0.5%.

    As people with normal vision and color anomalies see Yandex.Maps

    Design


    Rule of Three Trunk Styles

    The design of the card is not about beauty at all. He's about the meanings. Like any design. It is about how difficult it is to make simple and convenient. I will illustrate this thesis with an example of street layer design.

    Layer of roads - 1 style, display categories do not differ. It is completely impossible to understand and understand the structure of the city.



    Since the roads are all different, the idea arises that each type of road should have its own visual representation. And it becomes a little clearer. 7 types of roads = 7 types of display.



    But it’s very difficult for the user to distinguish between seven types of display - the difference between the neighboring ones is too small for him. Therefore, to make the map more convenient, we make three of the seven styles.



    It seems to be easier to read now.

    And after we have decided on the meaning and information structure, we can think about a more aesthetic idea. One of the main principles of Yandex maps is recognition. Even if we have copied a color palette or taken a screenshot without Yandex, most people will understand that Yandex.Maps is in front of them.



    Our method of displaying roads we called the "Rule of 3 styles of highways." We decided to test it first in the design of the People’s Card, and then in the design of the Istanbul Card.

    Map of Istanbul, drawn according to the rule of styles of the three highways

    We liked the result, and we applied the rule in the design of the map of Moscow.

    Color and palette

    The experiments with the new map palette were also numerous and interesting. I'll show you a couple of funny options.


    © OpenStreetMap


    © OpenStreetMap

    Agree, not that. So we began to think how to return to a warm and recognizable Yandex.Map.

    image
    © OpenStreetMap

    It's already warmer.


    © OpenStreetMap

    And finally, here is a concept we like.


    © OpenStreetMap

    After the adoption of the concept and a series of experiments with the palette, the palette is created, which will be in the Maps. I conducted several experiments with this picture: I looked at different monitors, ran out onto the street with a mobile phone, looked with the eyes of color anomalies, and printed on several printers. In fact, this is a prototype of the color palette of our Maps.



    Pictograms

    In addition to the display logic and color scheme, the map has pictograms.

    Icon - a visual anchor for the card user. The icon should be understandable, readable and sufficiently distinguishable on the colorful background of the map. And in the case when we have several icons, they should form a single visual series.

    And since we are creating an interactive product, where each scale has a different amount of information, the pictograms on Yandex.Maps have several sizes for different scales. For example, for railway stations we made pictograms of four sizes.

    Icon Creation Process

    Redesign of Moscow map

    Armed with the acquired knowledge and experimental results, at the end of last summer we decided to change the map of Moscow. So, what we did.

    Thanks to the rule of three styles, highways on one of the most popular scales have become thinner and the picture is cleaner. We worked through the signatures, there was a place for the signatures of the districts - this is important information for orientation.

    Work on the map of Moscow

    Again, due to the mastery of work with signatures, the map became easier to read on the next scale. Also here we have identified stations as the main transport hubs.



    And on this scale of the map, signatures appeared at metro stations. We managed to do this so as not to overload the picture.



    Once we had metro lines displayed, and then in one of the versions we thought to unload the picture by turning them off. Users did not like this and they immediately let us know about it through feedback. We made the lines smooth and returned them to the map - this is important orienting information.



    But now, on a scale below the metro line, they are prevented from reading house numbers and street names. We solved this problem by drawing a metro icon in the color of the line on which the station is located. Also, due to more successful work with color and captions, other objects began to be read better - it became more convenient for the user to find with his eyes what he needed.



    Now let's check our map. So it looks printed.

    Printed Yandex.Maps

    And so with a bunch of tags on the map.



    Color-impaired users have also become a little easier to perceive. The next step is the design of traffic jams for these guys, this is a big problem now.



    Users took the changes on Maps very positively. At first I was very worried: people have a very high level of reflection on changes in map design. The experiences were in vain.

    In the course of work on design, we researched, observed, tried, made mistakes, argued and discussed. But I do not consider the work completed. Cards are not an oil painting - it is a living product that needs to be constantly developed. We have many ideas and plans. I think we are only somewhere in the middle of the road.