Yandex Blog

So, why do I like working with maps? Cartographic design is the design of information, and informational design is:

Complex. We work with large volumes of information. We have to make decisions not only about what is necessary to include, but also how to use it most effectively.

Interdisciplinary. To design useful maps, you need to be more than just a designer or cartographer. You also need to be a researcher, a psychologist, and an expert in various fields. Sometimes outside experts need to be consulted.

Experimental. It’s incredibly cool: not just to make something, but also to see how it turns out, and observe how people use it. Working with maps is a multitude of experiments with practically unlimited possibilities to create something new.

And that's pretty close to what we do at Yandex.Maps. There are a few things that one needs to know to make a good map.

Context and environment

A map is data, and without design it would look something like this:

All we have is a layer of streets. If we add a river and a layer of buildings, this is what we get:

Not too user-friendly, right? We have to constantly come up with ideas so that our maps don't look like that.

To the casual observer, it might seem like practically nothing ever changes in Yandex.Maps. But if you compare these snapshots from different times, you can see that we are constantly experimenting and introducing something new.

Other teams are also working on maps and improving their products. It's essential that we follow their work and look at what they've done.

It's important to remember that maps developed on paper and have existed on it for many years, so a lot of knowledge can be drawn from studying paper maps:

But Yandex.Maps is an interactive product, and by simply changing the scale, a user switches between several static (paper) maps. This means that our maps must be visually consistent, regardless of how much information is shown. Any change in design that comes with changes to the scale must be predictable for the user.

Besides that, Yandex.Maps is mainly used for two functions: directly as a map, and as an underlying base for displaying different kinds of information.

Our maps are used on mobile phones, day and night. And, of course, thousands of drivers use them behind the wheel.

Regardless of the development of mobile technologies, people still print out our maps. And printers don't always produce good results.

In Moscow, for instance, pedestrians look at printouts of maps on their way up the escalator on the metro, as they prepare for the final leg of their journey, but the lighting there isn’t very good. Designers has to mind it.

Users

Besides environments, it’s important for us to know who we are making our product for, and how these people will use it. The first thing that comes to mind here is the territory of interest to users: where exactly on a map they are looking and how intensively.

A heat map of search queries shows that people are interested in cities and the territory along thoroughfares.

Because our map is interactive, it’s essential to take into account that users’ queries are different at different scales, or zooms.

To make a broad generalisation, usage at different scales looks like this:
1. Looking at Earth as a whole, people want to identify continents and find countries of interest.
2. Looking at a country, users are interested in the locations of cities and the connections between them.
3. Looking at a whole city, it’s important to see districts and major thoroughfares: arterial roads make big cities recognisable and distinguishable.
4. Looking at a district, people are interested in streets and locales.
5. Looking at a block or a street, people are interested in the final leg of their journey or a particular address.

To understand our map users better, we also need to look at statistics from those using the Yandex.Traffic service to look at current traffic conditions.

It turns out that there are two separate worlds that intersect somewhere at medium zoom scales: the world of pedestrians and the world of drivers. This means that our map design must be based on the demands of these two groups and an understanding of which zoom level is most important for each.

These two different kinds of maps of Moscow can be illustrated by the picture below:

Pedestrians have fair knowledge of the areas around metro stations. These are islands of city life, weakly connected to each other: the metro map does not correspond to the city’s true geography and distorts perceptions of the location of these stations. Drivers move along thoroughfares and know the road map quite well.

In smaller cities where the metro is not so developed, pedestrians and drivers have more in common. Pedestrians getting about on foot or on public transportation know the city better. For them, the points of attraction are mainly districts and squares, while drivers focus on streets, also having decent knowledge of districts.

Pedestrians' perceptions of locales are completely different from how these places are represented on maps. Their orientation is also different, and so are their points of interest. The mental map of an area in people’s heads is a very important thing, and understanding it helps make maps more user-friendly and more receptive to people’s needs.

Besides memory, people also have vision. That’s why their visual capabilities have to be taken into account. By various estimates, up to 10% of the male population on the planet is affected by colour blindness. Fewer women are affected – just 0.5%.

Design. The rule of three thoroughfare styles

For our map style redesign in 2011 we decided to get a San Francisco-based design and technology studio called Stamen involved. These cool guys pointed out key issues with our maps, helped us refine our ideas and gave us some important improvement recommendations.

Map design isn’t about beauty. It’s about meaning. And it’s about making something simple and user-friendly out of something very complex. Street layer design can illustrate this well.

With one style for all levels of roads, there is no distinction between them and it's impossible to make sense of the city or understand its structure.

Because all roads are different, the idea arises that every type of road should have its own visual representation. And the map becomes more understandable. Seven types of roads = seven types of visual representation.

But it’s very difficult for a user to distinguish seven different styles – the differences between neighbouring types are too subtle. So to make the map easier to use, we reduce the seven types to three.

Now it appears to be easier to read.

After we’ve worked out how to deal with meaning and informational structure, we can start thinking about a more aesthetic presentation.

One of the main principles of Yandex.Maps is recognisability. Even if you copied our colour palette or took a screenshot without showing that these maps were made by Yandex, the majority of people in Russia would still recognise it as Yandex.Maps.

The Stamen boys suggested we use a method of representing roadways called “The Rule of Three Thoroughfare Styles”. We decided to test this method first on the design of the Public Map, and then on the design of the map of Istanbul.

We liked the result, and we implemented it on the design of the Moscow map.

Design. Colour and palette

Experiments with a new colour scheme were also many, and interesting. This one is not bad, but not ideal:

Copyright: OpenStreetMap

Finally, after a tons of experiments and researches a concept that we liked:

Copyright: OpenStreetMap

After settling on the concept and experimenting with colours, we arrived at the colour scheme that would be used in our maps. I did all sorts of things with it: I looked at it on various monitors, on a mobile phone screen indoors and outdoors, through the eyes of people with atypical colour vision, and printed it on various printers. In essence, this is the prototype of the colour scheme of Yandex.Maps.

Design. Pictograms

Besides the logic of representation and colour design, maps also contain pictograms.

A pictogram is a visual anchor for a user of a map. These anchors must be understandable, readable and sufficiently distinguishable on a motley background. And if there are to be several pictograms, visually they must form a unified set.

Since we are making an interactive product in which every zoom level has a different amount of information, we need pictograms of different sizes for different scales. For example, we made four sizes of pictograms for railway stations.

Redesigning the Moscow map

Equipped with newly acquired knowledge and the results of our many experiments, at the end of last summer we decided to alter our map of Moscow.

Thanks to the rule of three styles, roadways on one of the most popular zoom levels became finer, and the picture became cleaner. We worked on the textual labels, and space appeared for the names of city locales – important information for orientation.

Thanks to our work on the textual labels, the map became easier to read at the next zoom as well. Here we made railway stations stand out as the main transportation hubs.

Metro stations' names were also added to this scale. We managed to do it in such a way that the picture did not become cluttered.

In the past we included metro lines on the map, but then in one version we removed them to make the map less cluttered. Users didn’t like this change, and they didn’t hesitate to let us know immediately. So we designed flowing lines to show the underground transport routes, and returned them to the map – this is important information for orientation in the city.

In the next zoom down, the metro lines had to be left off because they obscure building numbers and street names. But we solved the problem by colouring each metro symbol to indicate which line it is on. Improvements to colour and labels made other elements easier to read as well, so the eye can quickly find what’s needed.

Now let's put our map to the test. This is how it looks on a black-and-white printout:

And now with lots of markers on the map:

It also became easier for people with atypical colour vision to read our maps – but we still need to do more work on the design of our traffic jam readings for these people. That remains a difficulty at the present time.

Users have reacted positively to the changes in Yandex.Maps. At first I was worried: people tend to have a strong reaction to changes in their maps. But my fears proved to be unfounded.

In the course of redesigning our maps, we researched, observed, tested, erred, argued and discussed. But I don't consider the process to be complete. A map is not an oil painting – it's a living product that must constantly develop. We have lots of ideas and plans. I think we're only halfway there.

Andrey Karmatsky, Head of Yandex.Maps design team