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.
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.
Selected a palette:
Adjusted the color to comply more to the rest of the application:
Step 2 - Tested the selected colors with different ranges of data variance
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.
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.
Step 5 - Final adjustments
Tested the result in context of the application and adjusted the intensity of the colors to match the app.
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.
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.
