There is a ‘trendy’ design pattern, many years in use, of not displaying the Y axis on a chart in some financial mobile apps.
I first noticed this in the app Robinhood. But I’ve also seen it in apps such as SoFi. Sadly, despite advocating for a change, these apps are still persisting this flawed data visualization design.
Why is this bad?
Overall, due to the mobile format, it often makes sense to show something like a line or candlestick chart that’s closer to a square or even portrait proportion.
When a chart in this format presents either a narrow rang of time or a fairly stable historical trend, even minor up and down movements of only a few dollars can look like wild swings at a glance. This is why this pattern is flawed. If a user can’t quickly understand the high and low price range that is traditionally communicated by the data on the Y axis, the glance could trigger a perception of movement that’s proportionally incorrect.
Presenting data in this way will require the audience to think harder than they should have to, for no apparent functional reason. Products that use this kind of design appear to be prioritizing spontaneous conversion of their Buy/Sell buttons over helping their customers make more informed decisions.
So what’s a better way?
The first option is to simply include the y axis. It is possible to do this in a small space. A few examples include Apple’s iOS stocks app and TD Ameritrade. What’s notable is that both take the approach of right-aligning the display of the text labels to make it more readable and functional in a mobile setting.
The Coinbase app offers and example of the second way to approach this. You can omit the Y-axis, if you include the lowest and highest price overlaid on the chart within the relative time period. This is another useful way to give the viewer a quick way to understand the relative volatility of movement while maximizing the horizontal space that a Y-axis would otherwise inhabit.
You can’t completely do away with the relevant data that a Y axis provides on charts just because the screen is small. Alternatively, if your motivation is to make a chart look cooler or simpler then you are fueling the “dribbblification” tropes about superficial designers who don’t understand business, usability and customer needs. Lastly, it would be even worse if you are doing this on purpose to somehow distort or add friction to an end user’s comprehension of the data – as that seems to fall into the category of dark patterns.
Hey @RobinhoodApp, the @coinbase iOS app has an elegant solution for communicating relative h/l variations in price without including full Y axis labels, you should copy this because it improves glanceability pic.twitter.com/P5sBDdK0P1
— James Young (@jydesign) November 25, 2017