Header Image Credit: Pixabay
When it comes to communicating information, there is perhaps no better avenue than simple graphs and charts. This rings especially true in the fast-paced world of social media and mobile phones.
This means that properly designing mobile-friendly graphs and charts is important and as our post ‘4 Stages of App Development: Part 2, Design’ explains, rolling out an effective design can be challenging. In this article, we will then be looking at a few ways graphs and charts can be made mobile-friendly.
Make sure you’re building for mobile
First of all, it pays to remember that shoehorning desktop designs onto a mobile screen simply doesn’t work. Medium’s guide on data visualisation for mobile explains that reproducing features like drop-down menus and rollover tooltips on a smaller screen can yield ugly results. It’s important that you treat mobile design as a different beast and build specifically for mobile.
This also means keeping in mind the platform’s constraints. This can range anywhere from slow data connections to limited data plans. Consider the context in which users are viewing your graphs and charts and then stick with simple visuals and light media files. Take advantage of optimised layouts, font size, grid placement and colours to communicate your information clearly on small screens.
Avoid information overload
Similarly, one thing you can do is to be mindful of how much information you’re putting in, so as not to overwhelm your graph or your audience. The graph below from The Guardian, illustrating national newspapers’ support in elections from 1945 to 2010, does a good job of this.
Image Credit: Guim
Colour coordinating the parties and putting the years they were supported on an x-axis makes it look informative without looking too overwhelming. Another nice touch is putting the legend on the same page so the reader doesn’t have to scroll to find it. This approach even works for more information-heavy graphs, like the gold trading chart on FXCM, shown below. It manages to illustrate the trading history, market price trends, etc. while remaining uncluttered, thanks to its minimal use of text and icons. These are all effective ways to communicate information without scaring the reader off. Because there is also less ‘screen real estate’ on mobile devices, learning to properly condense information in an easy to view graph is vital.
Only give users relevant information
You should also learn to prioritise content based on the user’s needs. Only show them information that they are looking for/is relevant to them among the thousands of metrics that are available. Twitter does a good job of this by giving users access to information like an overview of activity relating to their tweets. Information that would’ve taken hours to find is now available at the click of a button.
Image Credit: Amazonaws
Facebook’s analytics for pages is another example of this. With one glance, it gives users an idea of how active their page is and how people are interacting with it.
Image Credit: Oberlo
With TechPP listing the numerous mobile apps made specifically for creating graphs and charts, the demand for easily digestible information on mobile has never been clearer. The article even states that Internet usage on mobile devices already exceeded desktop usage back in 2016. With this trend unlikely to change anytime soon, understanding the needs of mobile users has never been more crucial.
