• Votes for this article 99 people voted for this
  • Dashboard Insight Newsletter Sign Up

Data Visualization On Smart Phones

by Alexander Chiang, www.dundas.comFriday, February 18, 2011

This article is translated to Serbo-Croatian language by Anja Skrba from Webhostinggeeks.com.

Introduction

This article will discuss how to effectively visualize and navigate data on smart phones. The intended audiences of this piece are user interface designers and mobile software developers who are tasked with building a dashboard, report, or a data visualization solution for a mobile device in a business intelligence context.

It is important to separate mobile tablet devices like the iPad from traditional smart phones such as Blackberries and iPhones. The most critical difference between these is the screen real estate available, with smart phones having significantly less real estate to work with compared to tablets.

Requirements and Considerations

There are requirements and considerations that need to be examined before diving into the design of a data visualization interface for a smart phone:

  • Due to the small screen size and inconsistent user interfaces of smart phones, it is important to set the expectation that data should only be displayed for viewing; however, for those who are more ambitious, ideas will be presented on how a user could analyze and work with their data on this type of mobile device.
  • People typically want access to information in order to take action as soon as possible. Thus, it makes more sense for a system to notify the user to look at specific data visualization, as opposed to continually browsing through the information on their mobile device.
  • The visualizations should be limited to simple charts, gauges, and tables (yes, tables are a type of visualization). Maps and other shape heavy visualizations are inappropriate for these types of devices since they will be too difficult to read. In addition zooming can be clumsy for various mobile devices like the Blackberry Bold series.

With these points in mind, let's start designing the visualization interface.

Navigation

At the heart of the interface are visualizations of business metrics.  The figures on the right show some examples of trends, single value comparisons and categorical comparisons represented in a visual manner.

Due to the small screen size it is best to show these graphs, gauges, and tables individually and to restrict combining them. Let's call these individual visualizations "visblocks" (similar in nature to DashBlock found in Dundas Dashboard, a dashboard software solutions platform). The next step is to consider how one would navigate all these visblocks.

The easiest way would be to take a carousel / album cover / coverflow approach similar to that of the iPhone / iTouch interface as depicted in the figure below:

iPhone Data Visualization
Fig. 2.1 Album cover navigation of visualizations


This type of navigation is fine, but sometimes you may just want a summary of what's going on. An interface that is ideal for this particular situation is a scorecard. Figure 2.2 shows an example of a scorecard that can be used to get a quick idea of how your business metrics are doing.

 

Types of Visualizations
Line Chart Trend
Fig. 1.1 TrendBullet Graph
Fig. 1.2 Single value comparison (bullet graph)

Horizontal Bar Graph
Fig. 1.3 Categorical comparison

 

Data Visualization Drilldown
Fig. 2.2 Drilling down into a graphical view

For further information on scorecards and proper metrics measurement see the "What's Missing from your Scorecard" article (Mark Brown, 2009).

Interacting With Visblocks

One of the main assumptions stated above was limiting the analysis that a user would perform on the visblocks. Having said that, let's discuss basic interactivity needed to accomplish some common analysis, starting with something practical.

Showing the values as labels of points on a graph (whether it depicts a trend or a comparison) isn't practical on mobile devices. With the small screen size, the labels representing the values will either be too small or overlap each other.  On the other hand, single value visualizations typically won't have this problem as there are only one or two values to display. The easiest way for someone to view the values is to switch to a tabular representation of the data, and the best way for someone to switch to tabular view is to click on a button similar to the one shown in the top right hand corner of Figure 3.1.

This is how a user would interact with visblocks, but external systems need to work with them as well. As we stated in the requirements and considerations section, it's more efficient for an external system to send a notification to the user's phone to tell them the visblock(s) to look at. A notification icon should appear on the home screen of the mobile phone similar to that of a received text message. This is shown in Figure 3.2.

Interactive Analysis

data chartFig. 3.1 Tabular view of the visual data

Mobile alert notification

Fig. 3.2 Alert notification (notice the icon to the left of the time)

This section is intended for those of you ambitious enough to try and implement data analysis on a smart phone.
There are typically three types of analysis interactivity associated with business metrics:

  • Filters - used to see a certain cut of the data (e.g. selecting a range of time or a particular product)
  • Drill downs - used to see what composes a particular value (e.g. a business metric that shows monthly revenue, letting you drill down to see the days of the month)
  • Enhanced tool tips - used to show what a particular value is composed of (e.g. a business metric that shows monthly sales, with tool tips that display a breakdown by product)

Filters

The simplest and probably best thing to do would be to display a filters dialog, and let the user pick and choose what they need. It would beneficial to display the values of the filters in text at the top of the visblock.

Drill down

The only way this will have a chance of working is if a bar graph is used in the visblock (having bars makes it easier to pick the data point you want to drill down into). Once the bar is clicked, the next data level to display is a visblock, and so on and so forth. The trick here is to implement bread crumb navigation so that it's easy for a user to go back to the previous display:

Mobile Performance Dashboard
Fig. 3.3 Drill down (notice the bread crumb at the bottom of the pie chart)

Enhanced Tool Tips

Tooltips are highly difficult with smart phones.  The best thing to do is to utilize a one level drill down operation as shown in Fig. 3.3.

Conclusion

Careful considerations have to be made to effectively use smart phones when visualizing and interacting with data. The major challenges are the screen size and the inconsistent user input interfaces. By taking into account the lowest common denominator these design and implementation principals will help you to build a more practical data visualization interface.

About the Author

Alexander Chiang is Vice President of Product Management with Dundas Data Visualization, and runs the product management group for Dundas Dashboard. He formerly led the Dundas Consulting Group, where he advised a variety of Fortune 100 companies on the technology platforms and tools that best fit their dashboard requirements. His many years of user interface design and his expertise in data visualization techniques have enabled him to facilitate effective software solutions for the broader BI community. He currently runs a business intelligence blog called www.alexsandy.com

This article is translated to Serbo-Croatian language by Anja Skrba from Webhostinggeeks.com.

Tweet article    Stumble article    Digg article    Buzz article    Delicious bookmark      Dashboard Insight RSS Feed
 
Other articles by this author

Discussion:

Bhagyashree Dayama said:

I like your article very much. I was searching for any tool for data visualization on iPhone and I found your article.. Its realy nice. I have few question,

Is Dundas Dashboard is for iPhone?

Is there any tool available for data visualization on iPhone in your company?
And if yes is it free or paid?

Alexander Chiang said:

Hi Bhagyashree,

We're currently looking at smart phones from a broader perspective including Blackberries, iPhones, Android based phones, and Windows 7 based phones. Rather than trying to build native apps, which is a product maintenance nightmare, we are doing heavy research into HMTL5 and utilizing this revision of the markup language to bring a consistent user interface and user experience across these mobile devices.

In addition, we want to make sure that our mobile strategy is practical rather than a check mark on a vendor evaluation form. My suggestion is to monitor my blog or Dundas's online resources for future updates.

Website: http://www.dundas.com
Facebook: http://www.facebook.com/DundasDashboard
Twitter: http://twitter.com/DundasData
LinkedIn: http://www.linkedin.com/groups?gid=3709839&mostPopular=

Currently, we are still in the R&D phase, but expect some exciting things from us in the coming

months.

I hope that answers your question!

AC

Dan Everett said:

Hi Alexander,
I think you did a really good job of laying out the basics.
PCWorld did a top 15 essential iPad apps for work, which included BI. http://bit.ly/dlePCWiPad

I agree about looking at smart phones from a broader perspective. According to Computerworld Android has the most market share. http://bit.ly/dleADms

The one thing that I would add is that companies moving to mobile need to consider provisioning, security and device management. http://bit.ly/dleAfaria

Regards,
Dan

Jon Hazell said:

Dundas Dashboard can be viewed on mobiles, you can render the dashboard in HTML5 or you can use Dundas Mobile, the mobile viewer for Dundas Dashboard. More information can be found on the Dundas website or you can check out the Dundas Mobile Webinar video - http://www.youtube.com/watch?v=bMPhwhBT6N8

Site Map | Contribute | Privacy Policy | Contact Us | Dashboard Insight © 2017