How to develop a new design of maps

OpenStreetMap is a project that has United large numbers of people in creating the most detailed maps of the world. These are open to all, and each may Supplement or be used for your project. — as is the case of the successful application of OpenStreetMap data. It is a popular mobile app c offline map of the whole world, downloaded and installed more than 20 million users.

Our Studio started to develop the design world maps for The main task is to take into account the usage scenarios of the product and to offer modern and comfortable cartographic style. Main usage scenarios. Orienteering map, POI search and route building.

A detailed look at what we need to work on. Map to redesign.

Since we are talking about data all over the world, the mobile phone screen is not enough to analyze the map in several specific areas. Printable map at different scales, comparing the product with competitors. Keep always before your eyes is what were working with is extremely important — it allows you to be in the context and focus. Free wall in the Studio while the project is transformed into analytical center.

Short summary of the comparative analysis about the following. Map need to improve both stylistically and content -. Some objects could occupy less space on the screen, for example, trunk — they are too thick, making it difficult to recognize the road network of the city or too large icons that take up a lot of space. And some types of entities are not on a very detailed scale — they overload the map and find the right indicate difficult. This card can be cleaner and neater.

Next, you need to understand how to use In addition to the standard statistics of the search and the popularity of the devices, ask the team to share statistics download cards from different countries. What country and where users download. Data much, need something to pack them in a clear view.

Visualize. Distribution download maps, in percentage of the total number. Interesting to see what proportion of users in each country downloads your country — local use.

Share local downloads of maps of the total number. Revealed interesting discoveries. For example, Austria download from Germany more than all the way from Austria. It is most likely that the Germans come to Austrian ski resorts.

What does this statistic have to do with the map styles. Precise knowledge of the user helps to clarify the problem and to offer solutions tailored to the peculiarities in the use of existing product. It turned out that there are countries in which popular with local users, and there are countries, which is often used by tourists. Further, the most interesting development of styles.

Start with a clean slate. This process consists of many small iterations and experiments with style, data, and their own sense of what should be a good map. Creation of cartographic style. In addition to stylistic decisions we are sometimes required changes in the product itself.

The guys from the development of helped us with this, and there was a feeling that our Studio has joined their team during the project. More and specially designed tools for debugging card styles were very comfortable and gave a result that was easy to test directly on your mobile device. In the end, we get this concept.

Map of Barcelona city centre, in an updated style. We redesigned the visual object classification, reducing the number of visual styles to a smaller number of symbols. It is now easier to distinguish from main roads secondary, and walking paths have been clearly read by the dotted line. Easier to navigate and motorists, and pedestrians.

Transport nodes are highlighted more clearly, and at metro stations appeared used in this city designation. Icons for maps Displaying the revised guidelines, selected the most important category of POI (point of interest). Also applied more stringent filtering objects — this eliminates the feeling of congestion, and increasing the scale of the map included less important categories of objects.

For much of the POI icons set is used Maki — they are perfectly uniform and is suitable for use in the map, and to refer to the metro and various modes of transport we have developed a set of icons especially for this project. Madrid. Normal vision. Madrid through the eyes of a person with impaired color vision.

Special attention is paid to the color palette. She is not full of many shades. Contrasting symbols highlighted important for the orientation of objects, for example, major highways and bus stops, and less contrast — assistive guidelines. From scale to scale the contrast of symbols is distributed context use case.

Color maps were chosen so that they could distinguish all users, including people with impaired color perception (color blindness). This is important, as ~8% of men and ~0.5% of women do not distinguish between some colors. The design concept of the guys from liked, but it was not so easy, because in front of the introduction of styles to large audience, and it must be done safely for users. So that the styles were perceived not as a total redesign, but the next update.

Therefore, we developed another style of map — intermediate. It uses the same rules and styles, except for the designations of roads. We found that yellow road is well remembered by users, so keep the usual designation of roads, which is quite similar to painless upgrade.

Three card style (from above downwards). Still styles, an intermediate version (start now), the concept of design in future versions: Today updated version of the app with our card design and actively collect feedback. In subsequent versions of the application, the developers plan to update the graphics engine and extend the capabilities of the rendering, so some of our “designer fashion” in the style of the cards will appear later.

And since we are talking about the redesign, we want to show that weve had in comparison with the previous styles (were/was, from left to right). Europe.

The map of the world, we shifted the focus from the signatures of the countries on the signature of the cities, and the capital marked with an asterisk — it is easier to find them, because most users want to find the city and country on the map, they find the outlines of its borders and the approximate location. The West coast of North America. Work with information and its representation is a simplification of filing, creating user-friendly notations.

The reduction in the number of visual categories and filtering of small cities on the overview scale makes it convenient to search them on the map. It is unlikely at this zoom level, man needs all the cities, they will appear on the scale or two later. New York.

London. On a more detailed scale the skeleton highways to help Orient you come signature urban areas. They were in the old style, but due to the congestion maps other signatures were almost not noticeable.

Moscow. However, in many large cities, where rapid transport system, people are oriented in the metro stations and major transport nodes.

Paris. Very handy when on the map denote the metro specific cities relevant to how it looks in place. For ten large cities have been developed such designations. List of cities will be updated.

Minsk. Considered important for pedestrians moment — the exact location of the subway exit and the designation. Usually in OpenSteetMap metro station is noted on the location of the platform under the ground (aside, to a mile from the actual entrance), but to get there, the man with the surfaces need to find the entrance to the subway on the map.

San Francisco. To simplify the presentation of information to clip on each scale of the map and leave only important for user objects.

Rome. OpenSteetMap — an amazing project, and today, it is the most detailed map of the world, and anyone can improve it. And another nice detail.

The updated app has a “night” mode — the colors of which are chosen so that the map on the screen does not blind in the dark. The mode can be enabled by typing “?dark” in the search bar (and “?light” to return “day” card back). Berlin — day and night map modes.

Now in maps shows 385 million different objects in hundreds of different categories. We thank the guys from for the opportunity to work with such a large and interesting array of data. It was very interesting.


Leave a Reply