MicroCharts Widget – Design for the iPhone

The microcharts widget is one of the most popular, data-dense widgets that MicroStrategy offers.
Some of its salient features include a sparklines and sparkbars, bullet graphs, and an outline tree mode.

My job was to design this widget to work well on the iPhone – and come up with a design to keep it data-dense yet clutter free!

 

The existing web widget looks like this:
Microcharts-general-web

The redesign process started with a study of existing widgets MicroStrategy offered for mobile devices, the competitive landscape, and cross-team discussions with consultants, tech support engineers and product management to understand the mobile use cases.
We concluded that:

  • Customers will typically use this as power-version of a regular table, and as such, would expect an interaction rich widget. All of the main functionality needed to be in there, we couldn’t remove too many features that existed in the web or iPad versions.
  • Even though there were design as well as functional challenges with supporting an “outline” mode, we would need to figure out ways to resolve these as it was a very frequently used feature and make a smaller display that much more useful.

Design Challenge 1

Support multiple columns in a user-friendly way

Users on an average have between 2-7 columns that display metrics in different formats: simple numbers, sparklines, or bullet graphs. There are different established interactions patterns to deal with such cases – showing just one column at a time that can be toggled, swiping through multiple columns, fixing the leftmost (attribute) columns and horizontally scrolling the overflow.

We chose the 3rd option and added some design tweaks to make the customer’s job easier:

  1. The column sizes can vary, in order to support graphs and number gracefully. This enables them to see multiple metrics on the screen at the same time and compare them, as long as they fit.
  2. Customers can quickly pick a density setting – normal, high or low, and we calculate the column sizes for them.
  3. Customers can perform a “slow drag” to move the columns gradually or a “quick swipe” to move the next column to the leftmost position within the non-fixed panel.

Design Challenge 2

Support a tree-hierarchy with easy and intuitive opening and closing of the outline structure.

The web version of microcharts uses indentation for the outline mode. For the mobile version, we did not want to use indentation due to space constraints as well as general ux. We went with a visual separation showing the hierarchy with subtle drop shadows.

We also supported gestures for quick opening and closing of an entire level – pinch open and close.

Linlin-light-theme-changesmicrochart-mobile-smooth-scroll