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.
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
|
 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
This article is translated to Serbo-Croatian language by Anja Skrba from Webhostinggeeks.com.