I created a chart using wijmo5. (Click here to see the actual chart in action)
The client wants and I quote,
mouse-over / finger-press will show the exact data for that datapoint
on the mobile phone.
I have my concerns because due to the restriction of the screen space, it is hard to select the right datapoint on a chart.
I did consider adding ball-like markers to indicate which datapoint the user is looking at. Not sure if this is the best UX decision.
An example of ball markers is this:
On top of that, if there are any good UX suggestions for charts on the mobile phone would be great as well.
I found a good suggestion at reddit about pinning the top and left part of the chart. I think they mean the axes.
In summary, what UX should I add/modify on my current chart so that user can select/view details about specific data points on the chart via the mobile phone? And if there are additional good UX tips for displaying charts on mobile phone that will be great as well.
Answer
A common UX pattern for mobile charting is is to allow the user to touch anywhere on the graph and then highlight the data points in line with the principal axis above or below the touch point. Additionally, adding a textual representation of the data isn't a bad idea.
For a quick example:
download bmml source – Wireframes created with Balsamiq Mockups
This can be adapted easily even to polar or radial plots, though it becomes difficult to zone in on those near the origin.
Something else that the New Relic mobile app does, which is highly relevant to their use-case as a system monitoring tool, is allow you to mute selected data sets in order to drill down on something specific. For example, total CPU usage graphed as a stacked area over time, where you can disable the "system" portion and look only at your "application", which is a boon on mobile where I imagine eye-balling stacked areas is a bit harder. In the screenshot below, you can tap the segments to add or remove them from the overall graph.
No comments:
Post a Comment