top of page

Map Element Redesign (UI)

Objective: 

This map is used for navigation, and it's important to understand height differences. 

The map also shows different obstacles and relevant data, that needs to stand out.

Before the change:

The heights colors were too bold and took the focus from the other important indications on the map.

The map before the change

Step 1 - Researched map colors palette

Done using a web page I created that reads the demo data from file, and paints a grid of squares colored according to the height.

I experimented with different color palettes and different coloring methods.
In the first step, I tried gradient coloring.

map1 colors.png

Selected a palette:

map2 selected colors.png

Adjusted the color to comply more to the rest of the application:

map3 adjusted colors.png

Step 2 - Tested the selected colors with different ranges of data variance

map4.png

Conclusion: Gradient coloring is not good enough - when the data variance gets smaller, we quickly loose the visual differences.

Step 3 - color the differences with steps of colors

Divided the data into steps (or groups) of values, and assigned each a separate color.

map5.png

Conclusion: "Steps" coloring is not good enough - when the data variance gets smaller, we quickly loose the visual differences.

Step 4 - combined both methods of coloring

Selected a subset of the color range according the to min. & max. data, and then used a combination of steps & gradient to paint the map.

map6.png
map7.5.png

Step 5 - Final adjustments

Tested the result in context of the application and adjusted the intensity of the colors to match the app.

map7.png

Step 6 - Re-Tested the selected colors with different ranges of data variance

Step 7 - Adding details

After creating the base map, I chose a color for the grid lines, and designed the different data that needs to be displayed on top of the map.

map8.png

After the change:

The heights colors are distinct enough that the height differences are obvious, but are mild enough that the other important indications on the map jump out.

 


The map indications were also redesigned, taking into consideration they need to be shown on different types of maps as well.

map 1.png
bottom of page