Data Tips

Example of the Data Tips UX pattern.

From Infragistics faceOut (http://infragistics.com/faceOut)

Problem

You need to provide additional information about something displayed on the screen without navigating away from it.

Solution

When the user hovers over the target item, show a small window like a tooltip to display additional information about the item.

Context

  • You are displaying items for which you have additional information beyond what is displayed, such as a chart, overview table, etc.
  • You have additional information that would be useful for users to have easy access to without losing their context.
  • The additional information is consumable in a small window format.
  • The interface recognizes that a user is hovering (such as with a mouse, stylus, finger, or other pointing device) so it knows when to show the additional information and for what.
  • If your interface supports it, Local Zooming may be a better choice.

Rationale

There are two key principles at work here. First and most important is that showing the additional data in context of the higher-level items maintains the context so users can consider it easily within that broader context (without mentally leaving the higher context that a full popup window or navigation to a new page would cause).

The second aspect is the triggering based on hover. Hovering is less committing than selecting. It’s like a tentative I-am-curious-about-this-item-but-not-committed-to-it activity, like browsing the items in a shopping aisle versus picking an item up off the shelf. As such, showing additional information, even if you have more to show upon selection, is a nice experience. Also, seasoned computer users will be familiar with the idea of tooltips and hovering in this way, so if you can provide them, they are usually appreciated.

By the same token, the information displayed needs to be easily consumable. The user wants to touch their toe into the water before jumping in, so don’t overload a data tip—display just enough of that extra information to provide value to further help them decide if they want to take the plunge.

Implementation

First thing to do is ensure that you can’t show everything you need to show in the higher-level view, be it a list, chart, or table/grid. It is better to not require any extra effort to provide the information the user needs. If you determine you can’t, try to prioritize the information such that the most important information is in the high-level view and the additional information is nice-to-have.

Once you’ve done that, double-check that the additional information is actually helpful and that it will fit and be consumable in a small window. If it is too large, try either selecting a meaningful subset or don’t use this pattern.

Now you have the data to show, put it into the smallest possible window and hide it. You want to setup a trigger based on the user hovering to show the window after a short time, usually no more than a second. Try it out to see what feels right—if it feels like it takes too long, make it show sooner. You want a balance between showing it immediately (which can get funky if the user quickly moves over the items) and making them wait so long that they lose interest, assume that there is no data tip, and/or get frustrating waiting too long.

Because these are contextual, you want to be sure to position them near the item that they apply to, which is usually also near where the pointer is located. It is best to try to not obscure the item, so some small offset from the item or mouse location is good. You should also consider how the window obscures the other items and try to obscure them as little as possible—remember the key value here is the additional information in context, so keep the context visible as much as possible.

There is another approach that can work well: reserve a portion of the view to display the additional details. The main benefit here is that you do not obscure any of the items—the context is fully visible along with the additional information. The trick is to make it obvious that the two are related—that what the user is hovering over is what is shown with more info in the reserved space. You can do this by using some key reference (like a name, code, etc.), by some visual connection (such as a line, tab metaphor, color, etc.), and/or by proximity.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Data Tips pattern can be implemented in the following ASP.NET controls: WebDataGrid, WebGrid using the Row Edit Template features and in the WebChart using the tooltips feature. Check out the samples browser to see it in action.

Silverlight

You can use the templating capabilities of the Tooltip feature of NetAdvantage for Data Visualization’s xamWebChart to display additional contextual information, such as a NetAdvantage for Silverlight xamWebGrid, as the user hovers over chart data points.

Windows Forms

You can use the NetAdvantage for Windows Forms controls: WinGrid and WinChart as well as the WinToolTipManager to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called WinGrid -> Miscellaneous Features in 5.3 -> Header, Row, and Summary Tooltips sampleto see it in action.

WPF

You can implement this pattern using the NetAdvantage for WPF XamDataGrid or XamChart Control. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser called xamChartà Tooltips to see it in action.

JavaServer Faces

NetAdvantageforJSF’s chart component supports data tips automatically. With client-side JavaScript events you can also “pop up” dialog boxes whena user mouses over or clicks an area within your chart. See an example here.

Examples

The primary example for this pattern is from the faceOut sample application from Infragistics. When a user hovers over a bar in the bar chart, the rich tooltip is displayed showing orders for that month. The interesting thing about that data tip is that it can become an interactive window on its own, which makes for a seamless transition from curious data tip viewing to selection and interaction with that item.

http://quince.infragistics.com/1191

Example of the Data Tips UX Pattern Example of the Data Tips UX Pattern

Google Earth shows the name of each data point when hovering the mouse over it.

http://quince.infragistics.com/11g3

Example of the Data Tips UX Pattern Example of the Data Tips UX Pattern

Yahoo Financials shows the data tips always in the same place, at the top of the chart.

http://quince.infragistics.com/10vh

Example of the Data Tips UX Pattern Example of the Data Tips UX Pattern

Sources

Jennifer Tidwell, Designing Interfaces

Tags

Data Analysis, Data Visualization, Drill-Down, Chart, Displaying Complex Data.