Local Zooming

Example of the Local Zooming UX pattern.

Problem

People want details when they want them without losing context.

Solution

Show an overview of your information with the ability to select specific points to see more details without losing the context.

Context

  • The application displays too much information to effectively show in a single view in any layout (a map, table, etc).
  • Your layout can adjust to show more detail for particular points of interest without losing or terribly distorting the context.

Rationale

Local Zooming lets the user know the data details without losing the surrounding context.

Another similar approach is Data Tips, which overlays the details rather than modifying the surrounding layout. Data tips obscure the immediate context, though, so using them when that’s okay. If you need the immediate context more than the edge context (i.e., that which will probably flow off the screen when the layout expands), local zooming is probably better. Overview Plus Detail is another viable alternative, though generally speaking the overviews in that pattern have less detail and are meant more as an orienting and navigational device.

This pattern shines when you have local, contextual higher level detail that you don’t want to lose.

Implementation

You need to think about two core things—what to show at each level of detail and how to show it, especially how you will change the layout to show the extra details. For the higher-level view, you should still try to show as much as you can, at least of the salient information that people will use to disambiguate items and make decisions on items as they are perceived in relation to each other.

The local zooming should not be required to effectively use your higher level of information, at least it the higher level should help people hone in on the most likely candidates they are interested in so that they only have to zoom one or a few items to achieve their goals.

Probably the simplest way to implement the local zoom is to expand a row vertically and push surrounding rows down. This assumes a row-based layout. If you have columns, it could expand horizontally, both for rectangles, or even circularly for circular items. If you can, it’s probably best to have a transition that animates so that the change in layout is gradual and not surprising or disorienting to people.

When the selection expands, you have to decide what to do with surrounding content. The simplest thing is to let it fall off the viewable area. Another option would be to condense surrounding information either for all surrounding or only for edge information; fisheye is one way to do this condensing, but it usually comes at the cost of distorting the immediately surrounding information to the point where it is unintelligible. [This author thinks fisheye is more gimmicky than valuable and usable, at least in the context of this pattern.]

You need to determine how people will select information. Depending on the effect on surrounding information, i.e., if it isn’t dramatic, hover might be a good, light-feeling option to let people easily explore more details. If the effect is dramatic or takes more than little to no perceivable time to execute, a user action that is proportionate should be considered. This could be as simple as a wait hover or, more likely, involve clicking or double-clicking. If the items in the view are difficult to select, you can use Magnetism to help users select the desired one.

Examples

The primary example of DateLens is a PocketPC and Desktop calendar application. It shows several months of the calendar, and when you click on a date, that day’s schedule is displayed using a Transition. Note that the day’s schedule has both maximize and minimize buttons. If you click the minimize one, it will go back to the monthly view. If you click the maximize button, it will further zoom into that day.

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

Example of the Local Zooming UX Pattern Example of the Local Zooming UX Pattern

Skype uses this pattern, even though the information density is low compared to other implementations. You see the higher level info of all your contacts, and when you click on one, it expands to show more information.

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

Example of the Local Zooming UX Pattern Example of the Local Zooming UX Pattern

The My Customers list in the Infragistics faceOut sample for Silverlight uses this approach on the contact list as well, showing contact information for customers in addition to just their names and photos. It’s a common approach for contact lists, especially on mobile devices or other form factors where space is limited.

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

Example of the Local Zooming UX Pattern Example of the Local Zooming UX Pattern

Inxight (now SAP’s) TableLens let the user expand any number of rows. The rows are only expanded vertically, and this screenshot shows three expanded rows.

http://quince.infragistics.com/110z

Example of the Local Zooming UX Pattern Example of the Local Zooming UX Pattern

LG KM900 use this pattern in menu list, to show more information and function without changing/popup screen.

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

Example of the Local Zooming UX Pattern Example of the Local Zooming UX Pattern

A tile view is a kind of local zooming. This example shows Infragistics' Avee Talent Management example.

http://quince.infragistics.com/2h8p

Example of the Local Zooming UX Pattern Example of the Local Zooming UX Pattern

Sources

Jennifer Tidwell, Designing Interfaces

University of Maryland, About Datelens

Tags

Map, Displaying Complex Data, Grid.