Trailforks Introduces Trail Grade Visualization
You may, or may not have already noticed that we recently incorporated elevation/grade visualization into the Trailforks app. Grade visualization has been a requested feature for quite some time, but it took us a while to find a solution that we were happy with.
Let's look at the problem. Trails have different distances and different elevations, but within the app we had limited horizontal and vertical space to represent these differences.
![elevation]()
![elevation]()
![elevation]()
We started by integrating a few different visualizations into the app to test and better understand the usability of each.
![elevation examples]()
![elevation examples]()
![elevation examples]()
The question we asked ourselves was, how can we represent the grade to instantly convey to the user an understanding of the trail characteristics?
Our solution
![elevation examples]()
Using the trail Credit Line as an example, it looks like there is a punchy climb at the beginning of the trail, followed by a few ups and downs, finishing with a low grade pedal section.
![elevation examples]()
This trail is slightly downhill the whole way with no surprises.
![elevation examples]()
Pleasure trail seems to start off ok, but soon it's downhill steep after steep. It also looks like there will be a punchy uphill or hike-a-bike uphill section, depending on how good you are.
We really like this solution as it's clean and simple.
At a glance this gives the user more knowledge of the trail they are about to ride.
Nerd talk beginning. These are some of the goals and work we did to make all this happen.
![filter]()
Some basic signal processing.
![signal processing]()
Testing filters
1. Create an in-house custom elevation service for the whole World.
2. Increase localized accuracy of elevation service data by augmenting data with millions of rides
3. Regenerate all trail data points with equidistant points mapped to new more accurate elevation points.
4. Real time signal process the elevation data to filter out noise yet preserve important signal.
5. Represent the data to provide the user instantaneous understanding of trail characteristics.
Hope everyone enjoys this new feature and please leave us some feedback and suggestions on this and future improvements and features.
Let's look at the problem. Trails have different distances and different elevations, but within the app we had limited horizontal and vertical space to represent these differences.
Here are 3 different trails that visually have similar elevation profile charts. From this it's hard to determine what kind of a ride this will be unless we start digging into the details like the numeric distance, elevation and difficulty of the trail.
We started by integrating a few different visualizations into the app to test and better understand the usability of each.
These do solve the issue of representing absolute grade, but we were still not happy. In all these cases a user is required to visually associate the color grade with the elevation profile line to determine if the grade is related to an uphill or down hill.
The question we asked ourselves was, how can we represent the grade to instantly convey to the user an understanding of the trail characteristics?
Our solution
Here we represent the grade data with different colors and different height bars. The color and height of the grade bars are directly proportional to the absolute grade. The grade bars can extend above or below to represent if this is an uphill or downhill section of trail.
We really like this solution as it's clean and simple.
At a glance this gives the user more knowledge of the trail they are about to ride.
Nerd talk beginning. These are some of the goals and work we did to make all this happen.
1. Create an in-house custom elevation service for the whole World.
2. Increase localized accuracy of elevation service data by augmenting data with millions of rides
3. Regenerate all trail data points with equidistant points mapped to new more accurate elevation points.
4. Real time signal process the elevation data to filter out noise yet preserve important signal.
5. Represent the data to provide the user instantaneous understanding of trail characteristics.
Hope everyone enjoys this new feature and please leave us some feedback and suggestions on this and future improvements and features.
Author Info:
