For many websites graphics are an intricate component, for ProjectPiglet.com it’s a requirement.
In this article, we will discuss our old design, and why it didn’t work. Followed by the new design and implementation of our chart view(s) on mobile. We view this as a guide for anyone looking to improve their chart design on mobile, as many of them could use similar improvement.
Old Design
It’s important to mention the old design, which in my opinion – is barely usable. Below is a screen shot of the header view and the graph view (screen size of a Nexus 6p):
Here are a few of the issues with this design, but we will focus on the chart only. Below are some of the issues we were able to identify:
- Having two yAxises took up roughly 50% of the potential chart area, making it hard to read
- Occasionally, the cross section would be off the chart
- The tooltip didn’t automatically adjusted to screen size
- At the time (not shown in the image) the legend was set to a specific y locaion, which would put it over the “sources” text
For the sake of being through, below is a marked up image of ProjectPiglet.com‘s asset view, identifying the issues:
There’s also the Experts’ Opinion view (of Bitcoin), where it’s clear the tooltip is too large:
As you can see, the charts hard to read, the tooltip is off the screen and so on… This lead to an increased bounce rate, and 50% reduction in time spent on the website, pageviews, etc.:
Meaning, this issue is costing money!
** Note: Because we are working with Highcharts, from here on out the implementation details will be regarding Highcharts, but the principles remain constant across frameworks.
New Mobile Chart Design
Our whole product is notifications and charts. We need both to be as clean and smooth as possible. We still have a long way to go, but the initial thoughts on the new design are as follows:
- Maximize chart size
- Tooltip should fit within screen
- No zoom with fingers (happens by accident too often)
- Cross-section should be clear and on the mobile device
- Hide most of the data besides the chart (“a picture is worth a thousand words”)
With that in mind, we think we’ve done a pretty good job with the next secution covering the resizing based on screen size.
Dynamic Chart Resizing & Altering (Highcharts)
First, let me say, Highcharts is wonderful. There is a licensing fee for commercial use (now), but in my opinion it’s worth it. That being said, there are quite a few issues I’ve overcome while working with Highcharts. Particularly, dynamically resizing and altering options of a chart.
Overall, this isn’t hard to do, but it’s not well documented (if at all). The majority of the time I’ve had the resizing of the chart work on Highcharts without a hitch. However, altering the yAxis (we have two) or tooltip is not automated, thus customization is needed. The easiest way to achieve our goals is to add a function to the “load” event on the chart; by default this is undefined.
Inside the function, I check the window width (to see if it’s on mobile), then remove the title and label (but not the entire axis) for the first axis, and remove the visibility of the second axis. Finally, to ensure the tooltip was within range, I also dynamically set the tooltip size on the chart (2/3 the window size).
The code below is to do it in coffeescript (primarily what projectpiglet.com uses):
This is all under the chart option within a Highchart object, and for completeness I add a Javascript version below:
With that, we go from the hard to read, shrunken cart above (Experts’ Opinion chart), to one that at least fits on the screen. Below you can see a comparison (note this test screen is 320px wide):
Maximizing Chart Space
One of the other aspects to improve on mobile was maximize the chart impact. In an attempt to achieve this, I decided to hide all of the sections behind a “details” HTML element, only on mobile view:
Again for completeness below is the javascript code to similarly wrap an element you’d like to hide on mobile in a details HTML element:
The text hiding, combined with our chart view creates a pretty nice UI on mobile (based on Nexus 6p view):
From the comparison it is clear the graph is much more pronounced now, easier to read, and everything has been aligned properly. More over, the chart appears right on the page; plus the meta data (hidden behind the details section) are even easier to read:
Perhaps there are still improvements, but for now it’s at least usable (which was questionable before).
Review
After improving the mobile UI for charts, it’s clear: charts need to be front and center. Everything is less important. The conversion rate(s) and usablity of many sites depend on charts / graphics, thus they should be cared for. Ideally, everyone would view charts on a desktop, as it provides the largest viewing space, but being prepared for mobile (roughly 50% of the traffic) is a requirement.
I should note, there are some drawbacks to this particular design / implementation. For one, you lose the view of the yAxis. Typically, this would bother me a ton (coming from a math background). However, we are limited on space when working with mobile and I personally feel it’s a worthy trade. There is also a small risk I took by altering the chart based on window size, as opposed to screen size. This means that even people using a desktop with a browser set smaller than 900px will see the mobile view. Personally, I’m alright with this, as I believe it’s an improved experience none-the-less.
On a whole, I’m much happier with the new design, especially given I use the mobile version of the site daily. If you have any suggestions, questions, or conerns feel free to reach out!
