Data Visualization On Smart Phones

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:

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.

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

Fig.
3.1 Tabular view
of the visual data

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:

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

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.

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