Problem

A scroll-and-select device is targeted, and a Vertical List is called for, but small amounts of additional information can be displayed that would assist the user's task.

In the Fisheye List, the item in focus expands to display additional information. All others remain at their minimized state.

Solution

In a Fisheye List, items not in focus appear exactly as they do in any other type of Vertical List.

When a list item is in focus, but not selected, it will expand vertically. This additional room will be use to display more information about the list item.

The term refers to the "fisheye" lens, which has severe spherical distortion. Items in the center of the viewing area are much larger than those at the edges.

Variations

As with other list items, details of arrangement are almost unlimited, and are not considered variations in principle.

This only works with selection methods that allow focus (or hover state) separate from selection. Current touch and pen devices do not support a hover or focus but not selected state, so cannot use this. To use something similar for those devices, or to preserve similarity of function on several device classes, the Windowshade pattern, or a Pop-Up may be applied to each line item.

Note: Hover state indication is possible on many devices with touch screens if they also have a 5-way-pad directional control. The list on such a device would have to be designed to operate in both modes. If a Fisheye List is required, then touch actions may need to cause different behaviors on the list, as described above.

As each item comes into focus, it is expanded and additional information is presented. This only works well on scroll-and-select devices, and generally one item will always be in focus, and expanded. Here, the second item is in focus, then the user scrolls down one to make the third item in focus.

Interaction Details

On hover (when an item is in focus) the line item will expand, pushing all those below it down. The new information will not over-write other items in the list. Any Pagination or Location Within indicators will have to take this into account, as the number of items displayed may change.

When technically feasible, the item should expand by moving to the new size, and revealing the new information as an animation.

Selection of an expanded item may perform any action desired, as with a conventional list.

Presentation Details

An expanded list item will open downward, leaving the top of the list item in the same place.

Most or all of the layout and content visible before expansion should remain unchanged, and in place. Additional information may be added in the space available below this information.

Additional information should generally be of lower-priority, so in smaller type or with lower contrast. Optionally, if truncation of the original list item information is a serious problem, such as with a book title, the remaining information (at the same display type) may wrap to another line. Rarely, when the point of the Fisheye List is to expand key information, the design may consider expansion to be from the middle, pushing any secondary information to the bottom of the list area, and using the newly expanded middle space to display the longer title.

When expanded, additional information is presented, and this doesn't always have to be text. Here, an image of the contact uses alignment reminiscent of a Thumbnail List to expand on the information in line. This is also one good solution for Thumbnail Lists where few of the list items have an associated image. Other information may also be displayed. For example, a text-only list may be expanded to include a thumbnail, either because not all information has images, or to provide for larger thumbnails than would otherwise be practical to display.

Care should be taken to assure the size of the expanded list item is clear, and it does not appear to be two items, or is confused with other list items.

Antipatterns

Images, when used as a Thumbnail List should generally not expand. This throws off the alignment of text and reduces the amount of text visible, significantly reducing user understanding of the state change and slowing responses.

Do not conflate this pattern with others, such as Pop-Up. The expanded state pushes following items down the page, and never overlaps them.

Avoid jumping to the open state, and never refresh the entire screen. Users will not see the relationship between the two states and the value of the pattern will become lost. If this cannot be done for technical reasons, use another pattern.

Examples